Morfik3 Users Manualx Parte 001

Introduction
The ability to adapt quickly is everything in this connected age, yet the tools and technologies used to develop sophisticated web-based applications are showing more and more weaknesses as the size of applications grow. A process that has never been either quick or easy is only becoming harder. But, by thinking outside the box, Morfik is redefining?from the ground up?how web applications are built. Morfik is introducing into them technology from other areas of IT specialization such as traditional application development, graphics design, computer-aided design and productivity applications. Morfik is combining elements of all of these areas into the development of web applications in order to make the whole process more productive.
Introduction
The old way

Morfik's approach to web development can be best understood by taking a critical look back at traditional web development. When the World Wide Web was first created, its main purpose was to make information accessible and to aid in collaboration between groups of scientists and students. At that time there were no web applications; there were simply web pages. The earliest web pages were nothing more than simple text documents with special tags (groups of characters) inserted to enhance formatting. Serverside programming was then introduced to gather information from visitors to these pages. Unfortunately, sending information back and forth between the server and browser, often situated on opposite sides of the world, was a slow process. It made for very frustrating user experience?particularly when filling out large or multiple forms. The situation was improved somewhat by adding a small measure of interactivity to the pages themselves, but this is where things seemed to stall. Even after many years of evolution, web application development is still, essentially, done in the same fashion. Thousands of people around the world are putting all their effort into creating huge, interactive systems with tools originally conceived only to format text and build the most basic web pages. While it is possible to do this, it is far from being productive. Traditional web development frequently results in portions of the browser side code getting mixed with the server side code. This is hardly ideal as it makes for either confusing code in pages or applications that require many page loads. Both scenarios lead to reduced performance and a less-thanideal user experience.
The Morfik way

Morfik introduces a whole new way of creating web applications through the use of high-level, objectoriented languages and visual design tools. With this new tool set, developers can code their applications using time-tested software development practices. They can leverage their experience while benefiting from a modern visual designer. This makes the creation of stunning, interactive web interfaces a breeze. When using Morfik 3.x, developers can become productive very quickly as they are able to make use of their existing skills and knowledge. Morfik language has no syntax of its own, just semantic meaning. Developers code using syntaxes from familiar high-level languages such as C#, Pascal and Basic, and Morfik implements a compiler that maps these to the underlying Morfik language. Code intended for the interface (browser) side of the application is compiled into a combination of HTML, XML, CSS and JavaScript, while code intended for the application control (server) portion of the application is compiled into a native binary executable or dynamically linked library. To make things even easier, the Morfik compiler also takes into account the visual design information and generates the images necessary to display the desired effects.
The old way 2
Introduction
A great tool for browser applications

The HTML/XML/CSS/JavaScript code combination that the Morfik compiler generates for running in the browser is entirely standards-based and compliant, communicating with the Morfik-generated server components through standard HTTP requests and web service standards. Because of this, the browser portion of a Morfik application (XApp) can call out to any standards-based server platform and the Morfik-built server components can be called from any standards-compliant client application. This intrinsic flexibility has led to the possibility of creating a new type of project in Morfik, starting from version 2: an application that has only browser-side code. Such pure browser applications (or Browser XApps) are applications that do not directly depend on any serverside component, though they might use several different services from different service providers on the Internet. The Browser XApp is essentially an application that is 100% browser-based and does not care at all about which server it is served from. Morfik Browser XApps can be used to interface with different services that are currently available on the Web or to simply to break down complex projects involving different teams working on the interface (presentation layer) and the application logic into separate projects. This can also be achieved using regular Morfik applications that consume services published by other applications, regardless of them being built with Morfik or not. The power and ease-of-use of the Morfik high-level language syntax makes Morfik the best tool for building the complex applications that are required to run within a browser. This allows the creation of projects that might not be feasible to implement directly in JavaScript. Browser XApps should be able to do just about everything you can do with a full web application (combining browser and server components), but in order to access a database a Browser XApp will still require interaction with a server component due to browser security limitations. This component, however, could be implemented in any platform which is capable of creating industry-standard compliant web services. You can also use the XML data sources in browser applications to separate data from layout in your project.
A great tool for server applications

With Morfik 3.x you can also go to the other extreme of web development and create an application that only publishes web services without having any interface of its own. These are pure server applications and they can be used to implement a set of services which will be consumed by other applications. Morfik is designed to cover all the basic needs of a developer working on the creation of a web application. Web applications can go from having a couple of users (during testing) to hundreds of thousands in a very short time. With this in mind, Morfik set out to create a scalable solution that could accommodate such disparate requirements of web-based, online applications. Morfik's server-side strategy, first and foremost, focuses on performance and scalability. Morfik server components are totally stateless by default. Being native binaries, they consume fewer resources than similar solutions based on virtual machines such as Java and .Net, and they have the added advantage of being able to do anything that a native application is able to do on the selected server platform. Since Morfik and its framework are entirely standards-based, it is very easy to create a full-featured Web Services server application in minutes, or to add a Web Services interface to an existing application.
A great tool for browser applications
Introduction
A great tool for design

Morfik 3.x is now an even better tool for designers. The introduction of Pages as high level visual objects combined with an enhanced Form Designer with true WYSIWYG allows you to get a much better feel for how your applications will look at runtime. The Morfik Framework combined with the development environment itself allow for instantaneous switching of the project's look through the use of themes and styles. Web designers across the world spend their time creating great-looking effects, but then spend just as long trying to reproduce these tricks in different places. At Morfik, however, the R&D team is busily adding new features to the Morfik Framework and controls that allow you to add new formatting and design touches to your applications by simply changing a couple of properties and then recompiling your applications. Using the new Page designer and an enhanced Form designer, developers and designers get a clear picture of how the forms' components will come together inside the browser. This means fewer iterations of design changes to get the desired look for your pages.
Aggregating the Web

The ability to easily import Web Services and to design sophisticated web-based interfaces makes Morfik a premier tool for creating applications that aggregate information from multiple sources. Morfik applications can easily call out to a multitude of services available on the web and also access internal company databases, bringing together data from a myriad of sources into a single front-end application. Morfik can do this because in addition to providing all the tools to create incredible browser applications, it provides all the tools for server-side forwarding of calls to other domains and has the ability to access multiple databases from multiple vendors. Morfik applications can extend or act as front-ends to legacy applications, or just to put Ajax clothing on your existing web-based applications. All this comes together to allow businesses to consolidate information from a variety of sources. Just think what this could do for presentations to customers or company executives.
Unprecedented productivity
Many developers have already discovered that Morfik allows them to reach unprecedented levels of productivity in creating sophisticated web applications. In fact, some companies are using Morfik to win contract bids even when the final work is required to be done on a different platform. Thanks to the combination of Morfik's framework, compilers and visual workspace, developers can quickly and easily create great-looking Ajax applications that provide site mock-ups or even fully-functional prototypes for the work they are bidding for. They have a decided advantage over their competitors, who are unable to put together a comparable prototype in the same space of time. Morfik has placed even further emphasis on productivity in version 2.0 onwards. New design features such as Themes and Styles allow developers to quickly perform tasks that substantially which alter the appearance of an application or website without requiring extensive coding changes. Project management and navigation have become much more visual through the use thumbnails instead of plain text lists. Internal tests showed that it is quicker to locate a document by scanning for its likeness than by reading a list. Thumbnails, combined with the ability to filtering the project view, save time and enhance productivity.
A great tool for design 4
Introduction
The Mobile Web

Morfik explicitly supports building applications for Web access from the iPhone, iPod Touch and the iPad. Developers can design different interfaces for each device within the same Morfik project and the Morfik Framework decides which pages to serve based on the kind of device is accessing the application. Support for previewing applications as they will look in the respective mobile devices is provided by the Morfik debug browser, making it easy for developers to see how their applications will look without having to constantly refer to the mobile device itself.
A new era in web development

Morfik is the logical next step in pushing forward the frontiers of web application development. High level, object-oriented languages and visual design tools are combined in totally new ways that allow complete scalability, flexibility and a previously unseen level of productivity when creating sophisticated web applications.
Related Topics
What's New Your orientation and background Web application development - a general overview Morfik's unique approach to web development High performance web applications
See Also
What you need before getting started Installing Morfik Back to top
The Mobile Web
Whats_New
Morfik 3 has a number of major and minor new features as well as bug fixes and small improvements. In this topic you will have a brief overview of the major new features with links to topics that go into greater detail about them.
Pages as first class objects
Morfik 3 adds a new type of high level object: Pages. Pages are a visual representation of the concept of the Virtual Page that was introduced in Morfik 2. Using pages it is much more simple to structure a Morfik application and implement most of its navigational organization without writing a single line of code.
Read more...
Explicit support for mobile devices

With version 3 Morfik has added special support for mobile devices in general and Apple's popular iPhone, iPod Touch and iPad in particular. The Morfik development environment allows the user to create alternate interfaces for different devices within the same application. The Morfik Framework automatically presents the correct set of Pages to the user based on the device he/she is using at the moment.
iPad ready Web applications - With version 3 of Morfik the user can create pages especially tailored to the iPad's screen resolution and input method and have it automatically presented to the enduser whenever he access the website or application from the iPad, while presenting another interface when he access it from a desktop computer, another when access is from an iPhone and still another when it is from a BlackBerry device. Mobile Preview - The Morfik built-in debug browser now offers support for previewing iPhone and iPad applications in their respective pixel resolutions and orientations. Both the iPhone and iPad applications can be seen as if they were in the respective device. The user can alternate which device is being used to browse the application and which orientation from a drop down menu that is available under the device button in the toolbar of the debug browser.
Read more...
Pages as first class objects
Whats_New
New API for Design time behavior of Packages

With version 3.0 Morfik introduced a more well rounded support infrastructure for creating scripts to add design time behavior to widgets within the Morfik development environment.
The new design time behavior infrastructure for widgets includes support for accessing external libraries in the form of Dynamic Link Libraries.
Abstract Data Access Classes

As part of the effort of adding support for additional databases to the Morfik Framework and the Morfik development environment, a series of abastract data access classes has been introduced. These classes can be used as the basis for the implementation of native access to just about any database.
Read more...
Native Database Connectivity
In version 3 Morfik has re-implemented the database access portions of the Morfik Framework in a way that allows for direct connection to databases other than Firebird and ODBC. This means that it is now possible to
New API for Design time behavior of Packages 2
Whats_New
implement direct native access to other databases. Morfik 3 supports native access to the following additional databases:
MySQ L Post gr es O racle MS SQ L Read more
Continuous Editable Forms

Continuous editable forms were introduced in Morfik 2.x but were still at an experimental stage. In Morfik 3.x a lot of work went into making these forms usable and useful. You can now design a single form for browsing and editing data.
Read more...
The Container Set Control

The Container Set control allows multiple container controls (referred to as Pages) to occupy the same visible space on a form with only one of the Pages visible at any time. The Pages can be moved through in a forward or backward direction or any page can be brought to the front at any time. Changing
Native Database Connectivity 3
pages can also invoke graphical transitions sliding pages in from left to right, right to left, top to bottom or bottom to top. Other Morfik controls, including Container Sets and Subforms, may be placed on any of the pages.
Whats_New
Read more...
The Repeater Control

Morfik 3 includes a new control, Repeater, that allows the developer to add a continuous list from a datasource without having to use the normal subform-form combination. The Repeater control has a Data Source property that can be set to any table or query and a display area that can contain controls bound to data fields. The Repeater control does not include a navigation bar and no paging through the dataset is possible, however the number of records displayed can be controlled.
Read more...
Menus
Morfik 3.x introduces a very powerful menu control that can be used to to create menu bars that match just about any page layout you design. Morfik menus allow the user to place individual controls within dropdown menus thus allowing complete freedom to create as sophisticated a menu systems as the user wishes. Among other things it is possible to create menus that pop up the left or right of a menu item, instead of underneath it. It is also possible to define the alignment of the popup menu in relation to the text of the selected option. This allows the user to set for example that the dropdown menu of a menu option that is aligned to the right of the page will also be aligned to the left.
Read more...
Internationalization and Localization

Morfik has implemented a design method that we believe will make the creation and maintenance of websites supporting multiple languages a straightforward process that can be easily executed. As always, we are going to be the first users of our own technology, so you can expect to see morfik.com in
The Container Set Control
Whats_New various languages! Supporting multiple languages on your website consists of two parts: 1. Internationalization ? the process of designing your website in such a way as to make localization possible, and 2. Localization ? the actual process of adapting your site to a specific region or language.
Read more...
Support for JSON added

All communication between the browser and server portions of a Morfik application or website are now based on JSON (Javascript Object Notation), for improved performance. JSON is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript text format for representing simple data structures and objects.
Read more...
Animation and special effects
Morfik includes built-in support for browser-side image animation and transition effects through the SystemAnimations module. Included in the module are support for Fade, Move, Resize, Resize to Vertical Center, and Resize to Horizontal Center transitions. All these transitions can be combined to create a large variety of transition effects and animations.
Read more...
Project Templates
Internationalization and Localization
Whats_New
With Morfik 3, the base template that is used to create a new project is replaced by a functionality that allows you to choose from a set of several pre-built templates. These new templates will help the user to go from a totally new project to a published website much more quickly than previously possible.
Read more...
Edit Masks for TextEdit Controls
The improved TextEdit control has a number of new properties to support edit masks for input. Using input masks the developer can control which characters are allowed in different positions when entering text and numbers and also provide display formatting characters. Additionally the TextEdit control can convert the case of initial values to upper or lower case and display special text for empty fields.
Read more...
International character set support in Reports

As of version 3.0 Morfik supports a wider range of international character sets in reports. Morfik reports are generated as PDF documents that the user can view through Adobe's Acrobat Reader or save it for later review of forwarding to other people.
Project Templates 6
Whats_New
Morfik is adding support for the following languages:

Central Europe Cyrillic Western Europe Greek Turkish Hebrew Baltic Vietnamese Thai Japanese Chinese Other Middle-eastern languages
Read more...
Server Side Optimizations

Morfik 3 includes a number of server side optimizations to accelerate the delivery of web applications to the browser. The result is that Morfik 3 applications are much faster to load and execute than ones compiled with prior versions of Morfik. These optimizations have been applied to General xApp Performance, Forms and Reports, Continuous Forms and The Main Page among others.
Read more...
Miscellaneous compiler and framework changes

Morfik 3 brings a number of improvements in the compiler and runtime library. We have done our best to ensure that most existing projects will continue to work seamlessly with new version. In some cases however you might have to make minor adjustments. Here is the list of what has been changed:
A change has been made to the way string constants are handled in browser-side code. In version 2 one had to be aware of the way strings are encoded in Javascript and use escape characters when declaring string constants that include certain characters. In version 3 compiler takes care of that so string constants can be specified according to the rules of the language you are using. Browser-side code: all class fields and local variables are automatically initialized now. String fields are set to have empty string value, numeric fields are set to be 0, object fields are set to contain null value. Morfik C# syntax has been improved. In particular, support for shorthand assignments such as += or ++ has been added, and for loop statement is now supporting all the features of c#. Also, escape characters can now be used when defining string constants in c#.
International character set support in Reports
Whats_New Errors panel has been improved to always show you the full list of compiler errors in your project and to maintain the order of errors reported when the list is changing. This makes code refactoring to be a much nicer experience. If you program against IBO database directly, you might need to add SystemConnectorsIBO unit to the uses section of your module. Morfik BX and Morfik CX: if you use AsString(), AsInteger() and other functions of that sort, you might need to change the code to read AsString, AsInteger (remove the braces) Indy is now obsolete and is provided for backward compatibility only. If you project depends on it, you can download the free package from this page. For new projects please consider using Synapse package instead. FlashUploader, RSS Button, Wysiwyg and Google Maps Morfik 2 custom controls have been removed. Wysiwyg has been superseded with tinyMCE package. We are going to provide packages to replace other controls too. Run-time behavior of continuous editable forms has been altered - changes are submitted to the server when the user navigates to another page or submits them explicitly. Dropdown control can now be resized at run-time. If you have a fixed-size dropdown, you can set its Can Grow property to No for better performance.
Morfik Wiki 3
Miscellaneous compiler and framework changes
Whats_New
This entire wiki is in the process of being updated to reflect changes and new features added to Morfik 3 and you will be able to find many topics which have already been updated to reflect conceptual changes. Some topics, specially those that go into extensive details related to how to complete an activity haven't yet been updated due to the need to have all interface changes finalized before revising such topics.
Related Topics
Building your first application with Morfik Identifying and creating your application pages Building navigation menus and linking your application pages Creating Interfaces for the Mobile Web An overview of support for external data sources in Morfik Abstract Data Sources Built-in support for JSON in Web Methods Support for UTF-8 Unicode in Reports
Back to top
Morfik Wiki 3
Your_orientation_and_background
Different individuals with different backgrounds will inevitably have different perspectives on any given topic. Despite the obvious fact that no group is totally homogeneous, people with similar backgrounds and interests are more likely to share views. With this premise in mind, let's consider what certain groups or someone with a specific background should expect from Morfik.
Contents
1 Web designers 2 Web developers 3 Ajax developers 4 Desktop developers 5 Client/server developers 6 Other, more specific groups 7 Delphi developers 8 Visual Basic developers 9 Microsoft Access developers 10 A single tool for all web development needs 11 Related Topics
Web designers
This group includes professional web designers whose work is more focused on the visual aspects of a website than on its mechanicswho do artwork and overall visual design but leave the coding to a programmer.
To the visual designer, Morfik offers a canvas on which to paint a website. A quick look at the BookCollector sample that comes with the product will show that almost no code went into creating that application. Anyone with the skill set necessary to create the overall design for a website should approach Morfik as a design tool to build a website in only a short time.
Web developers
These people work on websites in the development/programming side of things. They sometimes do their own artwork and create sites using scripting languages such as Perl, PHP and Python. Some of them are passionate about their language of choice, while others just use the one that will get the job done. Long-term web developers that are used to a mainstream web development model may question the radically different approach Morfik brings to the table. We ask that you read on with an open mind. Just like any tool, familiarity brings productivity. Although Morfik presents a different way of developing applications, you will find that once you get used to it you will wonder how you ever got by without it.
Contents
Ajax developers
Generally speaking, Ajax developers are specialized web developers who know how to use the technique known as Ajax. They already have good knowledge of how to create web applications and may be quite set in their ways.
If you are part of this group, you will like this bit: Morfik still allows you to use Ajax, but presents a different way to do things that will allow you to do more with Ajax, with a lot less effort. Again, familiarity and productivity are closely linked. We are confident that if you take the time to learn Morfik, you will be able to create better-looking, more interactive websites and applications in a lot less time that you can with your existing development tools.
Desktop developers
This group is composed of those who either professionally or as hobbyists develop applications for desktop platforms such as Windows, Linux or OS X. If you fall into this group, especially if you are a professional developer, you should feel right at home with Morfik. In introducing Rapid Application Development (RAD) aspects into web development, Morfik has developed a tool that works in a similar fashion to visual development tools such as Visual Studio, Delphi and NetBeans. In fact, Morfik has expanded on this base without making the resulting environment any harder to use.
Client/server developers
Client/server systems share traits with desktop applications as far as interface development goes, but add more complexity when processing is shifted from the client to the server. These systems were among the first in line for replacement by web-based applications, but in many cases they are still the heart of a company. Developers familiar with these systems should feel comfortable working with Morfik as they will appreciate the similarity to traditional desktop development environments and should have no trouble adjusting to how Morfik uses Web Methods to invoke server-side processing. Morfik could even be described as a tool for developing client/server systems, where both the client and the server use only web standards technology.
Other, more specific groups

The Morfik R&D team took inspiration from several tools and products that are used by specific groups of professionals. Developers who are comfortable working with these should have great affinity for Morfik.
Delphi developers
Ajax developers
Experienced Delphi developers often shield away from writing web applications for centralized models because of lack of familiarity with web development tools. If this sounds like you, it is time you took a look at Morfik FX.
Traditional web development utilizes text editors with HTML syntax highlighting and maybe some help with tags. There is little in the way of concepts or usage that helps a developer become more productive. Let's be honestafter working with Delphi for years these web development tools can be downright disappointing. Morfik, however, allows the use of Object Pascal to program not only the server side of a web application, but its browser side as well. Morfik 2.x has an advanced Form Designer and a large number of design-related features added to its visual editors. Programming a Morfik application is, in many ways, very similar to programming a Delphi application. The Morfik Framework uses many concepts that will be immediately familiar to any Delphi developer, from high-level objects such as forms to the smaller helper classes such as string lists. To get a better sense of just how familiar Morfik should feel to a Delphi developer, take a look at the source code for one of the Forms in the Morfik FX BookCollector sample application. A careful examination will reveal that although there are some differences to the source code of a unit that contains a Delphi Form, there are obviously many more similarities. Morfik compiles a web application into JavaScript for the browser side and into a binary executable (or plug-in module) on the server side. A Delphi developer who wants to create a web application with Morfik can choose to use almost any licensed version of Delphi as the back-end compiler for Morfik. There is no need to make changes to an application's source code to switch back and forth between back-end compilers, so the user can freely choose whichever one is most suitable at the time. This makes it easy to use, for example, Delphi to compile an application for Windows and FreePascal to compile the same application for Linux. Delphi developers can quickly become productive in creating sophisticated web applications, web services and even browser-only applications. In fact, Morfik is the easiest, most powerful path a Delphi developer can choose to create Ajax web applications while retaining familiarity with language constructs, framework and environment.
Tips For Delphi Developers
Visual Basic developers

Users of Microsoft's Visual Basic should feel relatively at ease working within Morfik's development environment. Though not directly inspired by Visual Basic, Morfik supports Basic language in the form of a dialect that is not too different from Microsoft's implementation.
If you are a Visual Basic developer who is yet to create web-based applications, it may be because you find the available tools to be unsatisfactory. Again, let?s be honest. After working with visual design for years, text editors with HTML syntax highlighting and help with tags are a poor excuse for a development environment. Experienced Visual Basic developers should have very little trouble becoming productive with Morfik BX. This version of Morfik allows you to write not only the server side of your application in Basic, but the code that will
Delphi developers 3
run within the browser as well. This simple thingthe ability to write all the code in a single, familiar language and work with everyday concepts such as forms, code modules and reportsshould enable you to quickly start building sophisticated web-based applications.
Microsoft Access developers

Access was, along with Delphi, one of the primary sources of inspiration for Morfik due to its famed ease-of-use.
The Morfik development environment, many of its database-related concepts and the Morfik Framework have been closely modeled on similar features in Access. The multi-band Forms and the stored queries with their visual designer are two such examples. Morfik's choice of built-in database engine was also, in someways, influenced by Access. This is because Firebird provides the same ease of movement, having the entire database contained in a single file, as you get from an Access MDB file. For more advanced Access users who access a database through SQL commands, you will will be pleased to know that despite being a lightweight database server, Morfik's built-in database is a fully-fledged relational database with extensive SQL support.
A single tool for all web development needs

While other companies concentrate on segregating different aspects of web application design and development, Morfik takes a different approach. In line with its basic philosophy of simplicity and empowerment, Morfik is committed to removing the distinction between designers and developers and instead brings the power of sophisticated design tools to a development environment. At the same time, Morfik is committed to making these powerful features as easy to use as possible, benefiting both designers and developers. Whether you are a web designer, an experienced software developer or an old hand at HTML and JavaScript coding, Morfik is working to create a tool that will enable you to be more productive and enable you to go places you might not have ventured before.
Related Topics
Introduction to Morfik What's New Web application development - a general overview Morfik's unique approach to web development High performance web applications Back to top Visual Basic developers 4
Web_Application_Development_-_A_General_Overview
When the World Wide Web burst into public attention, creating websites and web pages was a novelty. It wasn't particularly difficult; it was just something a bit different. Web pages were created using HTML (Hypertext Markup Language), a format especially created for academic uses where documents often contained references to other documents. HTML files were no more than text files that included special character sequences, called tags, used to indicate how specific portions of the documents content should be displayed. In fact, in 1994 Windows Notepad was one of most widely used applications for editing HTML content. This extreme simplicity was key to the Web's rapid growth.
Contents
1 First Generation web applications 2 Ajax enters the scene 2.1 Not a new technology 2.2 Ajax gets noticed 2.2.1 Google Maps 2.2.2 GMail 3 The evolution of web applications 3.1 The server side evolves 3.2 Front-end alternatives 3.2.1 Adobe Flex and Flash 3.2.2 Microsoft Silverlight 3.2.3 Ajax and web standards 3.3 Rich Internet Applications 3.3.1 Independence of runtime 3.3.2 Tightly controlled environments 3.3.3 iPhone 3.4 Making a choice 4 The coding of Ajax applications 4.1 JavaScript Synthesis Technology 5 The Web as an operating system 6 The future 7 Related Topics
First Generation web applications

The first generation of applications developed for the Web were very, very basic. These applications generally consisted of a few forms that the user would fill in and submit to the server. Once the data arrived at the server, it was processed and a new page was generated in response. All processing was done on the server, as the browser was only able to display documentsallowing no logic to be implemented locally. This, of course, wasted a lot of time, especially since there was no such thing as broadband. If you entered incorrect data, it would be sent to the server, checked, found to be in error and returned with an appropriate message. Often the forms would return to their initial statewith all fields blankand you would
Contents 1
have to enter everything again. Not all applications even checked for errors, so often incorrect information would
be stored and later processed. Things improved when it became possible to handle small processing chores within the browser. To protect against malicious code, any execution was done within a very controlled and restricted environment with no access to the computer's private data. Any code embedded within a page was limited to accessing information only within that page. The small executable scripts were in the form of a language called JavaScript. This quickly grew in popularity due to the overall improvement in the user experience, and soon became an almost de facto requirement for good websites.
Ajax enters the scene

New browsers brought new features, many of which were unique and not supported by rival products. Two main playersMicrosoft and Netscapetried to win over users by offering new and frequently incompatible features is what is now know as the 'Browser War'. During this time browsers were given all the features required to implement techniques for allowing the code inside web pages to communicate with the server without having to do a full page reload. This is what is today known as Ajax, or Asynchronous JavaScript and XML programming.
Not a new technology

Ajax had therefore been around, nameless, years before receiving widespread attention. Morfik itself had been working on the development of its flagship productthe world's first Ajax development environmentlong before the term 'Ajax' was first used to describe a specific technique.
Ajax gets noticed

It wasn't until 2005, when Google released two services that made extensive use of asynchronous requests to send XML fragments between the browser and server, that Ajax received its name. Already a giant in the search engine field, Google was in a unique position to attract attention to any service it chose to launch, and the applications were in fact quite impressive.
Google Maps
The impressive Google Maps was a stunning first example of what was truly possible within a browser environment. All previous attempts at bringing high quality satellite imagery to the Web had been burdened by the need to load huge images every time the user wanted to look at a different location. Google Maps broke with that by fragmenting the images into small pieces that were dynamically requested and received by the page within the browser. These fragments loaded much faster than a large picture and also allowed the user to move around the map and zoom in and out. The experience was amazing, compared to what was previously considered possible, even though the underlying technology had been available in the major browsers for quite some time.
First Generation web applications
Web_Application_Development_-_A_General_Overview GMail
Google's GMail, a free email service, had simplicity of use, and an impressive responsiveness made possible by Ajax. GMail was implemented as a single web page that transforms to meet the user's request. Emails appeared in a list, and if one was clicked the page transformed to show the full text of that message. The message body appeared within the space previously occupied by the message list. The page transformations required smaller amounts of data to flow through the Internet connection; this was much faster than a full page reload. Not only that, but it also avoided the 'blinking' sensation that occurred when an entire new page replaced one that displayed much of the same content. While GMail did not replace other established players such as Hotmail and Yahoo Mail, its improved online experience set a new standard to which all such services would be measured. Most importantly, Google demonstrated that Ajax-powered pages could provide the end user with a better browsing experience.
The evolution of web applications

In the wake of the impression left by GMail and Google Maps, developers started to sprinkle Ajax though many other websites and online applications. Even a little bit of Ajax code, cleverly used, could improve the responsiveness of an existing application. Ajax is now commonly used in massively accessed web sites such as Twitter, Facebook and LinkedIn. These days the only place without at least a little bit of Ajax is in static informational pages, but even those are being touched as more and more HTML editing tools offer ready-made code snippets for adding a touch of the Ajax 'magic'. Google has made usage of Ajax in its Google Documents suite of online productivity applications, as has Zoho a smaller company with an impressive portfolio of Ajax-enabled web applications. These examples have definitively raised the bar for new web-based applications and made users crave for more sophistication.
The server side evolves

While all these changes were visibly affecting the browser side of web applications, development on the server side was not standing still. The very need to provide information to the browser component of the application, and not just serve full HTML pages, helped move the web server towards becoming more of a generic application server. To support this, new standards for service definition were created in the form of Web Services. As Web Services entered widespread usage, efforts to define how this new environment should be modeled and managed started to coalesce and were given the term Service Oriented Architecture (SOA). This is now widely used to describe how enterprises should build and use Web (and even non-Web) Services.
Front-end alternatives
The number of Internet users continued to grow, and soon there were several different approaches to providing the richer, more interactive experience that users wanted. Of these, three have distinguished themselves through wide adoption, the size of the effort put into them and by the size of their respective vendors.
GMail 3
Web_Application_Development_-_A_General_Overview Adobe Flex and Flash
The fact that users wanted more responsive applications didn't go unnoticed. Adobe, who already had in its portfolio the Flash plug-in for browsers, decided that it could increase responsiveness by replacing the browser's rendering engine with its own, reducing the role of browser to simply a launcher of applications. For years, the Flash plug-in had been widely used for creating animations and charts. It could now also be used for creating small games that could be played over the web without needing to install anything on a local machine. Adobe promoted Flash as a better platform for creating interactive and responsive Internet applications. Not only that, but it created a whole set of extensions to Flash and eventually revamped the whole engine behind the plug-in, introducing Flexessentially a layer that sits on top of the Flash engine and is geared towards the creation of applications. Flash and Flex allow the creation of very attractive applications, but they can be perceived as 'foreign' to the web experience unless they fulfill a particular role within a normal HTML page. The videos on YouTube, for example, are presented with Flash, but the page itself is still created using basic web standards such as HTML and CSS. If the entire YouTube page was created with Flash it might look better, but would in subtle ways seem 'different' to the end user. Also, movie titles, author, comments and other information displayed on the page would not be accessible by search engines. Flash plug-ins are also automatically blocked by firewalls in many businesses and schools because of the abundance of Flash online games that are now available. This practice restricts developers who want to use small touches of Flash to enhance the overall experience of a website. Plug-ins are also a problem for sites that are likely to be accessed through mobile devices. The Apple iPhone for example, which is currently one of the most used web-enabled phones, does not support plug-ins. More recently Adobe has pushed forward with an additional technology set called Air, a runtime that supports the execution of Flash and Flex-based applications outside of the web browser. Despite these advances, there seems to be no widespread movement to adopt Flash-based technology outside of its traditional role of providing graphics and animation within the context of a web page. In fact the increasing number of users with mobile devices running Apple's iPhone OS such as the iPod Touch, the iPad and the iPhone itself has been increasingly discouraging companies from adopting or even maintaining that technology.
Microsoft Silverlight
As Flash moved from being tightly focused on graphics and animation to becoming a platform for applications, Microsoft reacted to counter what it perceived as a threat to its overall dominance in this area. Its response came in the form of Silverlight, which creates interactive content like Flash and Flex, but allows such applications to run outside the web browser like Air. Silverlight has so far shown no signs of becoming the standard interface for the Internet applications of the future that Microsoft had hoped. It is used on several websites for video streaming, but this usage is similar to that of Adobe's technologies; it is used to complement the features in the browser rather than fully replacing them. Not surprisingly, as a plug-in it suffers from the same inconveniences as Flash and Flex, but it does have a much smaller installed base than its direct competitor.
Adobe Flex and Flash
Web_Application_Development_-_A_General_Overview Ajax and web standards Ajax and the technologies that represent the web standards are taking a comfortable lead as the technologies of choice for building more interactive and responsive websites. These technologies are implemented directly by the browser and do not require the installation of a plug-in. This makes a huge difference to the accessibility of a website. Anyone with web access can interact with a web application built using Ajax techniques, but the competing technologies all require the end user to install supporting runtime.
Rich Internet Applications

Applications that use the Internet as a medium for communication and distribution are known as 'Rich Internet Applications' or RIAs. This term encompasses applications built with non-standards based technologies such as Flash, Flex, Air and Silverlight, and other examples such as Skype and instant Messaging software. These applications are important in our everyday lives and are certainly deserving of recognition, but increasingly sophisticated and dynamic browser-based RIAs point to a new era in computer usage. They are immediately available on any computer equipped with a modern browser and are very easy to use. Many are currently available, and there are certainly more on the way. The technology that you choose ultimately depends on your goals. Do you want your site to be widely accessible? Do you want it to show up in search engine results? There are a number of things you must consider.
Independence of runtime The major weakness of plug-in based technologies is a dependency on a specific runtime, and there is no guarantee that this will be present in the end user's computer. Many enterprises impose very tight controls on the installation of plug-ins and other runtime environments out of concern that they may be used to run code designed to bypass security measures. Educational organizations such as schools and universities often block access to plug-in based applications, so the best option is to develop for only the default capabilities of the browser. This will ensure that your application will be accessible from the organization's network.
Tightly controlled environments There are a small number of organizations that are so concerned about protecting their intellectual property that they even disable JavaScript within pages. This will prevent Ajax applications from working, but as Ajax is now so widespread the number of organizations that go to this level of restriction is very small.
iPhone
Ajax and web standards
Web_Application_Development_-_A_General_Overview In the two years since its introduction the iPhone has become a web access platform to be reckoned with; most polls indicate a slice of over 50% of all mobile web access. iPhone sales continue to grow and show little sign of slacking off, so it would seem foolish to create online applications or websites that could not be accessed from such devices. Mobile browsing is likely to become even more important in the future, and while Adobe and Microsoft are trying to get their RIA platforms supported in these devices, they are unlikely to become standard.
Making a choice
Morfik has always aimed to provide the best way to create sophisticated applications that can be accessed through the browser. After careful analysis and consideration of existing technologies, Morfik developers have concluded that it would be beneficial to embrace a broader, less restrictive idea of standards. Both Adobe's and Microsoft's RIA solutions rely on plug-ins, which can be blocked and whose content cannot be indexed by search engines. As such, they are a poor choice for projects that aim for information visibility and accessibility. Plug-ins however, can still play an important role; they can be imbedded and used within standards compliant content to help address specific problems where the standards are inadequate. Ajax, while a good alternative, still has its problems in mainstream usage as the content it generates is not considered search engine friendly. Morfik has recognized this and has developed a tool set to work around this issue.
The coding of Ajax applications

The only way to execute actions on the browser side of a web application, without using plug-ins, is to describe them in JavaScript. It is no surprise that as the complexity of these applications has grown, writing them has become increasingly more difficult. Unlike strongly typed compiled languages, which have a rigorous programming model, interpreted languages such as JavaScript do not offer the benefit of compilers to enforce the application integrity. Compilers are the preferred tools for building large, complex languages; without them, small changes to an otherwise perfectly working program can cause unpredictable runtime crashes.
JavaScript Synthesis Technology

Morfik recognized the need for compilers that could generate JavaScript from high-level language such as C#, Object Pascal and BASIC and developed its JavaScript Synthesis Technology to do just that. Developers can write code in their language of choice and enforce the rigorous type checking and referential integrity that is lacking in JavaScript. The advanced compiler architecture analyzes an application in its entirety before starting to generate the desired output. An interesting side-effect of this is that it also allows the conversion of high-level language code into the other high-level languages supported. Morfik's innovative approach to the development of complex and sophisticated Ajax-based web applications has been followed by products from other companies such as Google, with its Web Toolkit (GWT), and Microsoft's iPhone 6
Web_Application_Development_-_A_General_Overview Script#. The entry of these industry giants into the game seems to ratify the approach already taken by Morfik and confirm that higher-level languages will undoubtedly play a significant role in the future development of browser executable code. GWT and Script# follow similar lines for compiling higher-level languages into executable script, but Morfik's aim is much greater in scope and it has been developing in this area for a lot longer. Morfik offers a much broader tool set capable of much more than just language translation. Language is just one issue to consider when empowering developers to become more productive. Morfik believes that by raising the abstraction layerboth in regards to JavaScript and to many other underlying web protocols and formatsdevelopers are freed from having to worry about the nuts and bolts of a web application much in the same way that they seldom need to worry about how the Windows GDI or the ODBC APIs work. The Morfik compiler not only generates the JavaScript code, but it also produces supporting HTML, CSS and even images during the compilation process. A high-level language developer using Morfik does not need to worry about how the HTML and CSS work; similarly the visual design aspects of the tool allow developers to create visually impressive applications without the need for a graphic designer.
The Web as an operating system

When the World Wide Web (or Web) exploded into the homes and offices of people around the world, developers were faced with a fundamental change in the way applications could be built for use by distributed groups of people. For many years, applications were designed as a simple visual display that presented the user with the required functionality. As Windows-based application development matured, user interfaces grew in sophistication and complexity. The Web introduced a totally new way of creating interfaces; applications were created to generate pagesthe standard form of presenting information on the Web. Much of development went from creating Windows-based applications to creating page-based applicationsa real paradigm shift in the world of application development. The introduction of the web server into the basic infrastructure meant applications shifted from being twotier (client/database server) to being based on three or more tiers when a separate application server was involved. Eventually, web servers became de facto application servers, furthering the concept of Service Oriented Architecture. A method of creating simple applications to take advantage of the physical distribution made possible through the Internet had evolved into a more complex software development process than the one it was exploiting. In an era dominated by the development of MS Windows-based applications, the popularity of websites exploded and the Web started dislodging Windows as the preferred interface for corporate applications. A crop of visual development tools brought great flexibility and enhanced productivity for developers. These visual tools were introduced in the first half of the 1990s and took development to a whole new level of productivity. The capabilities and functionalities provided by the browser and the corresponding server component increased to the point where they can now be considered new application platforms. Just as Windows became an application platform running on top of the old DOS, the browser has become an application platform running on top of Windows or other operating systems such as Linux and Mac OS X. JavaScript Synthesis Technology 7
Morfik calls this the WebOS, and Morfik was created to enable applications to be construction as easily for this platform as they can be for Windows. The visual tools featured in Morfik are actually reminiscent of those used for creating Windows applications. Sophisticated applications can now be developed for the feature-rich WebOS platform, regardless of the underlying operating system, bringing a whole new paradigm shift in the development of web applications. A few tweaks to a configuration parameter and the same applications can be deployed to a server as a centralized application for a department or small business; or to a server farm to handle huge amounts of traffic and concurrent usage for a high traffic website or corporate intranet environment, and Morfik even allows web applications to become desktop applications with virtually no additional work.
The future
Current work in defining new and more powerful standards for the browser hint that in the future, more powerful and sophisticated applications will be delivered by the Web. Recently, Google showed the first screenshots and released details of of its ChromeOS. This only runs on specifically designed hardware, providing the necessary services for the Chrome browser, inside which all applications will be run. While this is not the first attempt at this type of system, it is relevant that it is pushed by one of the largest companies in the Web landscape. It is still too soon to tell how things will play out for this initiative and others which will undoubtedly follow. Will the future will be one in which we continue to use local applications alongside web-based one? Will all data reside in the cloud and all applications work in the browser? As we travel towards this undiscovered territory, one thing seams clear: Ajax-based applications are here to stay.
Related Topics
Introduction to Morfik What's New Your orientation and background Morfik's unique approach to web development High performance web applications Back to top
The Web as an operating system
Morfiks_Unique_Approach_to_Web_Development
Morfik brings a unique approach to web development as it continuously questions the traditional approaches, and challenges established paradigms. To understand Morfik, its differences, advantages and the way it works, it helps to have a clear image of how and where Morfik uses different technologies to build your application.
Understanding Morfik application technology

Morfik applications are generally composed of two parts: a server-side component and a browser-side component. These parts are based on very different technologies but are intrinsically linked and share a set of features that allow them to work together. All communication between the two parts of the application happens using web standards such as HTTP requests and SOAP for the invocation of web services. A single programming language for all codingInstead of requiring the developer to learn myriad programming and markup languages to develop a single application, Morfik allows the developer to write all code for both browser and server portions of the application in a single language.
One tool, single language
A choice of programming languages Morfik believes that developers should have freedom to choose to work with a programming language syntax with which they are already familiar. Morfik strives to provide the closest implementation possible of several commonly used programming languages, within the bounds required by the underlying Morfik Framework. The languages currently supported are: C#, Object Pascal and Basic. Integrated design and developmentOther companies work to separate design and development, with a focus on corporations with stratified teams. Morfik focuses on the small and medium size teams advocated by modern agile development techniques, and brings design and development together in a unique approach to application development. The design-oriented features take away the need to write a lot of code for basic user interface design.
Morfik Integrated Development Environment
A page and form-based interface design metaphorInstead of using the traditional simplistic 'page' metaphor which is poorly suited to component-based, modular design, Morfik adopts a combined page and form-based metaphor. In Morfik, a Form can represent large sections or just a small portion of a page and it will be used to compose a larger page object. Page objects aggregate several different forms to compose the whole 'page' the end user will see in his browser. True WYSIWYG designMorfik's advanced visual Page and Form Designers offer what is by a large margin the most authentic What You See Is What You Get design environment in the industry. Dependency awarenessThe Morfik development environment is highly aware of the dependencies between different documents and objects within a project. This awareness allows Morfik to update references to reflect user-made changes and present warnings on when removing a document/module from the project might result in broken references. A single tool for all web development needsMorfik combines into the Form Designer just about all graphic effects that might be required to create a specific design. Morfik leaves to specialized tools such as Photoshop or Gimp only what might be described as artistic work. Images necessary for shadows, glows, borders, corners and gradients are done automatically when a project is compiled. Morfik also provides, out-of-the-box, a fully functional, freely deployable, relational database and the visual database design tools for creating tables and queries. High performance server-side codeWhile providing visual development features and working to make the developer's job as easy as possible, Morfik also works to provide a high performance and scalable server architecture. Morfik produces native binary applications for its target platforms and the Morfik Framework and development environment promote the creation of totally stateless applications that can easily be deployed to a server farm for load balancing.
Browser side
The browser side of your application is the client portion of your system. It will be responsible for the application's interface and will communicate with the server side of the application to request processing and handle results that are sent back. This portion of the application resides entirely inside a page being rendered in a web browser. It is therefore limited in functionality to what is allowable within the confines of script execution within the browser. Although the restrictions are many, due to security concerns, a lot can still be accomplished within a modern browser. Developers from other backgrounds should be aware that everything happens asynchronously inside the browser. The code you write, or which is generated by Morfik, on the browser side of your applicationbe it in Pascal, C# or Basicwill get compiled to JavaScript so it can run inside the browser. The compiler will also generate a combination of HTML, CSS and images for the browser side of the application. These are all part of the established W3C standards for web content and work with all browsers.
Note: You still need to be aware that some browsers do a worse job than others when rendering pages and that some of these aspects are beyond even Morfik's control. For example: Internet Explorer (all versions) does a remarkably bad job of rendering semi-transparent HTML elements. In some cases, you just have to refrain from using this kind of feature if you want your application to look good in Microsoft's browser.
Server side
The server side of your application is always a native binary for the platform of your choice. Morfik's decision to use native code in the server side of the application ensures that you will have a low footprint, high performance application. In order to achieve compatibility with multiple platforms and still provide the best performance, Morfik makes use of the FreePascal compiler for the final phase of its compilation. First the code, in any of the three supported languages, is processed and a detailed map of its content is built. Morfik then generates what is called intermediate code in Object Pascal. This code is then compiled directly to the appropriate binaries for Windows or Linux. The binaries can be either a stand-alone executable, which will work as a web server, or as a binary extension module for Microsoft's Internet Information Server or the Apache server. Due to the fact that the final binaries are produced by a slightly modified version of the FreePascal compiler, it is possible to link external code that is compatible with that compiler into the server-side portion of a Morfik application. This could include code created specifically for FreePascal or libraries that were created for use with Delphi, but are also compatible with FreePascal. Morfik applications are, by default, 100% stateless on the server side. What this means is that from the moment you create your application you are ready to deploy it in just about any situationfrom your personal notebook to a server farm. You can take it with you on the go, or have it up and ready to service a large number of users.
Note: All Morfik code is stateless on the server side and the code that is created by the Morfik development environment directs or induces you to write any additional code in a way that
Browser side 3
retains that condition. It is possible for you, however, to write code that will deviate from this by creating code that is dependent on a server-side global variable. You should avoid declaring global or module level variables on the server side of the application to ensure that the application remains stateless with the scalability advantages that architecture offers.
Database
Morfik has at its core the idea that most useful web applications will make extensive use of databases. Database access and the display of database-stored information is very easy with Morfik and is part of its visual design philosophy. Through an industry standard ODBC connection, a Morfik application can connect to several different databases. Morfik also provides, 'out of the box', a fully functional relational database server. This server is an open source database called Firebird which can be freely distributed with your own applications.
Built-in database
In line with its view of the importance of databases, Morfik will, by default, create an empty database for any new project. The Morfik .MXD file is compatible with the database format of the supplied Firebird database server. This will be the project's main database and from within the Morfik development environment you will be able to create new tables and queries that access those tables. Morfik provides a Table Designer and a Query Designer that can be used to create these objects. If you are fluent in SQL you can opt to create what is called a pass-through query by writing its SQL code directly. If you are creating a project that does not need to have its own database, you can specify this in the options dialog. In this case, the application will not attempt to connect to the Firebird database and you do not need to deploy it along with your binaries.
External databases
If you need to access a database which is not the default project database, then it is an external database. In Morfik parlance, any database which is not the default database is called an external database, even if it is another Firebird database. External databases can be of two kinds: Firebird or ODBC. Through an ODBC connection you will able to access almost any kind of database including Microsoft's SQL Server or MySQL.
Note: In accessing a non-Firebird external application, your experience may vary according to the implementation of the ODBC driver you are using.
The following diagram is a simple reminder of which technologies are used in each section of a Morfik application.
Server side
Server and browser technologies used in Morfik applications
Rapid Application Development

Morfik was designed from the ground up to bring Rapid Application Development (RAD) to web application development. As the name suggests, the focus is on building applications fast. This does not mean that you cannot or should not plan and carefully design the architecture of your application. It means, however, that you can design, code, test and make corrections and improvements faster. This will free up more of your time, which you could use for improving your application through user reviews, planning sessions, code review and the like.
It's all about productivity

Being able to do more in the same or even less time. Achieving better and more impressive results. Morfik is all about productivity and enabling people with software development skills to become productive in the world of web development. By taking care of the underlying nuts and bolts, Morfik frees the developer from having to fuss around with HTML and CSS files, giving you time to really think about the logic and architecture of the application. As of version 2.0 Morfik offers a large number of visual effects that you can apply to visual elements while designing the interface for your application. These effects allow you to proceed with a design without having to wait for a specialist to provide the images you would otherwise need for effects such as rounded corners, shadows and gradients. The availability of these effects and the speed with which you can change your design to test different combinations will allow you to achieve much better results, faster than ever before. Morfik also allows you to choose from a variety of provided themes, or create your own, to give your application or website the appearance you want. Changing themes can result in significantly different looks as they encompass colors, fonts, and control styles. You can change all these aspects of the application with a single click.
Visual design
At the heart of a RAD approach to developmentbe it desktop, client/server or Weblies a visual designer. This is where your interface takes shape and where you decide what happens when the user interacts with different elements.
External databases 5
Morfiks_Unique_Approach_to_Web_Development If you choose to create a new web application project from the system menu (round button with a 'power' icon), you will get a skeleton application composed of a couple of pages and forms. This is the basic template Morfik has provided to get you started.
Form Designer
One you have created a new project, double-click on the Index Form thumbnail in the Project View of the Morfik development environment and you will see what is essentially the startup page for your new project. You can view and select from a gallery of themes by clicking on the Design Tab at the top of the main window.
Visual design
Morfik Design Tab Theme Gallery
You will notice that the entire look of your application changes as you hover the mouse over different themes. Changing a theme allows you to change pretty much all aspects of your application's visual appearance almost instantaneously.
Note: You are not limited to the themes that are provided; you can also create a totally new theme or
alter an existing one. Themes you create can be exported and imported into other installations of the Morfik development environment, in other computers. Once you have selected a theme, click on the Run button (round green button with a 'play' symbol on it) to compile and run your application. Status information will be displayed in the Output Panel that appears on the bottom of the main window. Once the application has finished compiling it will be run inside the Morfik Debug Browser. The Morfik Debug Browser is built on Mozilla Firefox technology and is tied into the Morfik development environment so as to allow you to more easily test and, if necessary, debug your application.
Visual design
Morfik Debug Browser
As can be seen in the screenshot, you can get a totally new application, customize its appearance in a couple of minutes and in a couple more have it up and running, without ever writing a line of code. Development doesn't get much more visual or more rapid than this.
An overview of Forms and Controls

Morfik projects are typically composed of several Forms brought together in Pages, through use of SubForm Controls. These are used to define the areas of a Page or Form where another Form will be inserted. This essentially means that when you design a Form you are creating a visual snippet which will be inserted into another Form or Page. There are several reasons for this approach, but the most important one is that it makes the process of creating the interface to your website or web-based application easier to manage.
Morfiks_Unique_Approach_to_Web_Development When you first create a blank Form you see something similar to that shown in the following figure. At the top there is a Header Band and at the bottom there is a Footer Band, while in between them you have the Detail Band.
A new Morfik Form Elements that are used on a Form to create the interface of a page or application are always Controls or Widgets. Controls are the basic elements; the building blocks for everything in Morfik. Widgets, on the other hand are normally built from several Controls. Controls such as TextLabels, Containers, Rectangles and TextEdits can be placed on any of the Bands of a Form and arranged and configured so that your pages or the interface for your web-based application will look as you want. The following screenshot shows the Index Form from the BookCollector sample application, which is provided with Morfik, at design time. The highlighted area indicates where a SubForm control is placed.
Using SubForms in Morfik You can also see in this figure how Controls are arranged on each of the three Bands of the Form. In this case they follow what is a very common pattern in websites which is to have the navigation options at the top in the Header Band. At the bottom you have the general kind of messages you normally see at the end of a page, as well as some design elements that complete the general design. These elements are in the Footer Band of the Form.
10
Header, Details and Footer Bands in Morfik Forms You can connect Forms to data sources, which can be tables or queries, so that you can create your design without actually having to place content into the design. This allows for the decoupling of data from design and, as you can compose a page with multiple different Forms, it becomes easy to have pages that show data from multiple distinct data sources.
A design tool for non-designers

Morfik wanted to extend the basic concept of visual development to reflect what you need in order to create great-looking web applications, so it added to its development environment several features and capabilities normally associated with graphic design. Applications used by graphic artists and designers and are notoriously complex for the uninitiated. Instead of following in the footsteps of applications such as Photoshop or CorelDraw, Morfik decided to seek inspiration in the sort of application that is used to create charts, diagrams and presentations. Instead of allowing the user to create any image, these applications offer customization of the graphic elements already available.
A design tool for non-designers
11
The Main Form in Mapping-Device sample project, in Design View In doing so, Morfik created a development environment powerful enough to allow a professional designer to create almost any design, but is also simple enough that people without design experience can master its use and create great-looking websites and interfaces for web-based applications.
Rapid prototyping
Due to the speed at which Morfik allows the creation of sophisticated interfaces for web-based applications, it can be used very effectively as a powerful prototyping tool. It is not uncommon for a developer to create, in a couple of days, a mockup of a much larger application. This can be used as a valuable tool to validate a design with the end users before the actual work of creating the application begins. By the same token, Morfik can be a valuable tool for conducting Joint Application Design (JAD) sessions with end users. These sessions, advocated by some agile software development methodologies, can happen with live feedback on how certain design ideas will play out when applied to the real application. Whether you are designing a website, a complex web-based application or simply prototyping a proposed application, Morfik makes visual design and graphic design foremost within the developer's user experience. As you master its use, Morfik will enable you create great looking, powerful applications in shorter time than you would think was possible.
Related Topics
Introduction to Morfik What's New
Rapid prototyping
12
Morfiks_Unique_Approach_to_Web_Development Your orientation and background Web application development - a general overview High performance web applications Back to top
Related Topics
13
High_performance_Web_applications
Why does performance matter? As it turns out, depending on what you are doing, it doesn?t. On the other hand, again depending on what you are doingit can be critical. Business success, particularly for websites that work within a media-rich environment or process millions of requests per day, can depend on performance.
Contents
1 Interpreted vs. native code 2 High performance server code 3 Low memory utilization 4 Related Topics
Interpreted vs. native code

Historically, server-based computing started out divided into two camps: compiled and scripted code. Scripted code was generally preferred when it became common practice to host a hundred different websites on the same computer. It could more easily be made to respect server restrictions and it could access a process of isolation called sandboxing. Compiled code was generally regarded as the best option for maximum performance but, at the time, one compiled server extension could not be isolated from the next one running on the same computer and so was regarded as a solution that required a dedicated server. In order to guarantee overall server stability, process isolation was desirable even between different extensions created by the same company. Java, a language/platform that performed like native code but allowed different applications to be sandboxed in their own virtual machines, become the recognized choice for large scale enterprise development. It offered better performance than scripting languages, especially with the advent of just-in-time compilation, but could isolate processes in their own spaces. The difference between a completely native and an interpreted solution is small for basic file serving, but with intense server-based calculations or data processing this difference really stands out. Native applications beat interpreted applications in performance and memory utilization in just about every task. This is the reason why platforms such as Java and .NET perform just-in-time compilation to machine language that allows code to run natively after the first time it is executed. Even solutions that have just-in-time compilation and in which subsequent calls are to natively compiled code, however, are not evenly matched against a natively compiled version of the same algorithm. This is because of the small overhead required (again sandboxing) to guarantee the isolation and behavior of the code being executed.
High performance server code

Morfik takes a different approach to creating a high performance computing solution for server-based processing. This approach uses natively compiled code for all server-side processing, relying on the significant evolution of operating system process isolation and hardware abstraction visualization that has occurred over the last decade to handle server stability and isolation. Server code is entirely compiled into machine native code and relies on software components with a small memory footprint. This is the ideal combination for creating computationally intensive applications that can be run on virtual machines.
Contents 1
High_performance_Web_applications
Most of today?s effective implementations of a cloud computing environment rely on hypervisor-based virtual machines and thus effectively sandbox applications of one user from those of other users. In this scenario, running an additional level of virtualization and sandboxing is at most times irrelevant from a reliability point of view while still affecting performance.
Low memory utilization

Morfik-built applications are, by default, stateless on the server-side, which makes them lightweight in memory consumption and ideally suited for load balancing in server farm environments. Morfik provides an assortment of features which help you enhance your application?s performance without requiring any knowledge of how the underlying technologies work. These include automatic gzip compression, JavaScript code obfuscation and optimization as well as intelligent application-level caching. Morfik?s compiler ensures that all your JavaScript code adheres to best practices such as those described in Steve Souders? book High Performance Web Sites (O?Reilly Media, 2007) to give your website a performance boost without adding to your workload.
Related Topics
Introduction to Morfik What's New Your orientation and background Web application development - a general overview Morfik's unique approach to web development
High performance server code
What_You_Need_Before_Getting_Started The Morfik development environment has been developed primarily to fast-track the process of building user-friendly, interactive web applications. Developers can code with familiar high-level languages such as C#, Pascal and Basic, and the Morfik compilers will generate all the JavaScript code, HTML and even many of the visual elements required to implement the application. Ready-made functions in the form of widgets and packages can be plugged in to easily add function to your application, and the use of themes makes it easy to update and customize its appearance. In fact, the slowest part of developing with Morfik?as with all new tools?is working out how to use it. Once you?re past that stage, you?ll wonder how you ever managed without it. So, what is the best way to get productive as quickly as possible?
Install Morfik
Check that your existing system meets the requirements for installing Morfik and then download and install either the evaluation or full version of Morfik. Installing Morfik ...
Review the documentation

You can?t read though all the information in these pages in one sitting, but at least scan through the list of contents on the Morfik wiki Home page. Don?t forget the Reference section at the bottom of the Home page. There is lot to learn about Morfik, and these pages will remind you what is what, and how it all fits together.
Note: Information is arranged logically into sections about important areas such as the user
interface, databases and deployment. These sections generally start with a very useful overview of the topic.
Try the tutorials and examples

Our tutorial ?Building your first application with Morfik? is a great place to start learning about how Morfik works. You will become familiar with the terminology, commands and concepts used throughout Morfik. You?ll also find other useful examples of working with Morfik throughout this documentation, with many of them based around a basic Content Management System (CMS) with User Authentication. The CMS example demonstrates how a database can be developed and accessed using Morfik. In addition, there are a variety of sample projects at Morfik.com for you to download and explore.
Build your own Morfik application

Once you are familiar with the concepts used in Morfik, you might want to try building your own application. This page gives a good introduction to the thought processes that are involved in planning out your application.
Install Morfik
What_You_Need_Before_Getting_Started
Note: Morfik takes quite an innovative look at many of the 'old-school' approaches to web application development and some of the terminology and abstractions used can take a bit of getting used to. At any time when using Morfik, pressing F1 will take you to the relevant Morfik wiki page. For example, you might want to know more about a menu that appears when you hover over the Ribbon, or about an object that you have selected. This context-sensitive help is only available in version 2.4.
Add functionality to your application

Morfik provides an every-increasing supply of packages and widgets that make it easy to add popular functions, links and advertisements to your page. These are listed on the Morfik wiki Home page and can also be downloaded from the Morfik.com website.
Stay informed
The Morfik Developer Assist program responsible for these add-ons also produces a regular newsletter with the latest Morfik news and links to the latest add-ons. If you have not already done so, register here to access the add-ons and receive regular updates from Morfik Development Assist. Morfik developers and management also share release news and company developments through Morfik Blogs. Users also have a chance to comment and ask questions through this forum.
So there you have it. Make the effort to get started with Morfik, and you will find that you can product interactive web applications faster than ever before. Enjoy.
Related Topics
Installing Morfik Customizing the environment Getting to know Morfik application workspace Building your first application with Morfik
Build your own Morfik application
Installing_Morfik
Morfik's software and hardware requirements:

Windows XP, Windows Vista (32 or 64-bit), Windows 7 (32 or 64-bit) Intel Pentium class, 1.8 GHz processor or better 1 GB RAM or more 1 GB hard disk space (Installer + User Files) Monitor 1280x1024 screen resolution or better 32-bit color, 64 MB graphics memory or better
Morfik is only available as a download, and the installation steps are identical for both purchased and trial versions.
To install Morfik:
1. Open the downloaded Zip file with a tool such as WinZip? or other compatible program. 2. Double-click the .EXE file. 3. Follow the instructions and prompts in the Setup Wizard to complete the installation.
Note: Morfik installs into C:\Program Files\Morfik folder on 32-bit Windows systems, and in the C:\Program Files (86)\Morfik folder on 64-bit Windows systems. Morfik is itself a Win32 application. To start Morfik:
Either double-click the desktop icon (if created by the installer) or single-click the taskbar speed button (if created by the installer).
If you purchased Morfik and are starting it for the first time, you will be prompted for your Serial Number when the program starts. You will find your Serial Number in one of the emails you would have received from Morfik after completing your purchase.
Related Topics
What you need before getting started Customizing the environment Getting to know Morfik application workspace Related Topics 1
Installing_Morfik Building your first application with Morfik
Related Topics
Customizing_the_Morfik_Environment
The Morfik workspace can be configured to better suit your needs and the way you work. There are many configuration options covering everything from the appearance of the interface to how the compilers behave. For detailed information about customization, please refer to Morfik Options and Preferences. One of the first things you might want to customize is the color scheme used by the Morfik workspace, as this could have some influence on the design of your project. You can change the color scheme directly from the Welcome screen.
Figure 1: Color scheme selector in the Home tab of the Ribbon when no project has been opened.
Figure 2: The Morfik workspace with different color schemes selected.
Customizing_the_Morfik_Environment
How Do I: Customize Morfik Environment?

In this video you learn about customizing Morfik design environment. The Home screen is a convenient starting place for important tasks. It provides a set of links to Morfik on-line resources as well as access to the installed sample projects. Learn how you can customize the color scheme of the design tool and the environment options.
The player will show in this paragraph
Customizing Morfik Environment
Related Topics
What you need before getting started Installing Morfik Getting to know Morfik application workspace Building your first application with Morfik
How Do I: Customize Morfik Environment?
Morfik_Application_Workspace
The Morfik application workspace provides an effective way for you to interact with project documents, properties and code. Morfik uses the Ribbon interface along with document thumbnails in Project View to provide an effective design environment capable of accommodating the needs of visual programming and graphical design. The workspace places most of the commonly executed operations onto its highly visible toolbar so that you can easily make changes to your project and documents. The application's main toolbar provides access to most of the project and document management features as well as document formatting and graphical design.
Workspace layout
The Morfik workspace is divided up into areas as indicated by the numbers in the diagram below.
Clicking on different sections of the Workspace takes you to the relevant topic
1 - The Power Menu

The Power Menu is accessed by clicking the dark blue button with white 'power on' symbol at the far left of the Ribbon. A drop-down menu provides immediate access to most Morfik functions related to project and document management, such as opening and closing files. Some menu options on the Power Menu are context-sensitive, and will be disabled if they are not applicable to the current state of the Integrated Development Environment (IDE).
Workspace layout
The Power Menu
The Power Menu contains the following options (sub-menu options are denoted by the | symbol): New Project | New Web Application New Project | New Package New Project | New Project Wizard New Page New Item | New Form New Item | New Report New Item | New Table New Item | New Query New Item | New Module New Item | New Web Method New Item | New Widget Open Close Close All Save Save As | Save As
1 - The Power Menu 2
Save As | Save Project As Save All Deploy
2 - Run Button
The Run Button appears to the right of the Power Menu. The Run Button is used to start, stop and pause your application.
Morfik Run Button The Run Button is only enabled when a project is open, and toggles between 3 different states:
State 1Press to compile and start the application; State 2Displays when the application is running. Press to halt the application; State 3Displays when the debugger encounters a breakpoint. Press to continue
application execution without stepping into/through any remaining code.
3 - Quick Access Toolbar

The Quick Access toolbar and Customize button are located to the right of the Power Menu button. It gives you one-click access to your most commonly used IDE functions. The toolbar is also completely configurable.
Quick Access Toolbar and Customize Button
To configure the Quick Access Toolbar, press the Customize Button (as shown above) to display the Customize drop-down menu with the following menu options:
2 - Run Button
List of Currently Configured Commands More Commands... Show Quick Access Toolbar [Above | Below] the Ribbon Minimize Ribbon
How Do I: Learn Tips and Tricks on Ribbon Menu and Toolbar?

This video is a tour of Morfik?s Ribbon style user interface. A selected number of commands in Morfik Ribbons have been explained and tips are given on how they could be used. The video also includes an overview of the Quick Access Toolbar and the Power menu.
Morfik Ribbons and Quick Access Toolbar video
4 - Ribbon
The Ribbon is the main toolbar of the Morfik workspace. Morfik has adopted this taller toolbar to better display graphically rich information about themes, layouts and color selection. The tabs on the Ribbon display the commands that are most relevant for each of the task areas in the applications. Following is a list of tabs in the Morfik Ribbon.
Morfik Ribbon
Home Tab Design Tab Project Tab Debug Tab View Tab External Data Tab Insert Tab
3 - Quick Access Toolbar
5 - Project View
The Project View displays the objects that are contained in your project such as Forms, Reports, Tables and WebMethods. It also provides a highly visual reference for managing these objects, including the ability to create new objects and edit existing ones.
Project View
Note: You can activate Project View at any time by using Ctrl+Alt+P keyboard shortcut.
Documents that are visual in nature are by default represented by a thumbnail image. This makes it easy and fast to locate specific Forms and Reports in projects with a moderate number of objects. Figure XX shows the Project View for a small project. For projects with many similar documents it is sometimes best to use the filtering option that is available from the Home Tab of the Ribbon when you are in Project View. In Figure xx you can see the Project View of a project and the filtering mechanism being used. In this example, documents and objects containing 'staff' in their name 5 - Project View 5
Morfik_Application_Workspace are displayed.
Project View with filtering in use To see many objects on screen at the same time, reduce the Zoom Factor for the Project View. This option is available from the Home Tab of the Ribbon. Reducing the zoom level will lead to all thumbnails being replaced by small icons to allow more objects on screen at the same time. Figure 4 shows a project view at its minimum zoom settings.
5 - Project View
Zoom level control for Project View
Note: You can also hold down the control key and use the mouse wheel to zoom in and out of Project View.
Designer/Editor
The Designer/Editor enables you to perform graphical design work on your objects (such as Forms and Reports) and work on the code behind those objects using a powerful text editor. The area at the center of the workspace is reserved for the document Designer or Editor. The content in this section changes according to document and selected view. While editing a Form, for example, a visual design and two code views would be available. The view can be changed from the Ribbon.
The Designer/Editor can be invoked for the following objects:

Designer/Editor 7
Form Designer Report Designer Table Designer Query Designer WebMethod Designer Module Designer Relationship Designer
6 - Left Docking Site

The Left Docking Site, which by default is along the left side of the workspace, contains the Properties, Events and Styles Inspectors. The panel hides along the left side of the screen when not in use. Clicking the mouse cursor on the panel causes it to expand fully to the right; moving the mouse cursor off the panel causes it to contract. The panel may be locked in its expanded position by 'pinning' it in place with the Pin Button.
Left Docking Site 6 - Left Docking Site 8
An Inspector can be moved from its original location by dragging it to another location on the workspace. In order to facilitate this movement, the Inspector must first be pinned in place. To move the Inspector back to its original pinned location, double-click the Inspector's title bar. An Inspector may also be closed by pressing the Close button. If you accidentally close a panel, you can reopen it by going to the Ribbon bar's 'View | Panels | Panels' drop-down menu and selecting the appropriate panel.
The Properties, Events and Styles Inspectors function as follows:
Properties Inspector Overview Events Inspector Overview Styles Inspector Overview
7 - Right Docking Site

Along the right side of the workspace, by default, is the Right Docking Site containing the Debug Scripts and Debug Source Inspectors.
7 - Right Docking Site
Morfik_Application_Workspace Right Docking Site The panel (by default) hides along the right side of the screen when not in use. Hovering the mouse cursor over the panel causes it to fully expand to the right; moving the mouse cursor off the panel causes it to contract. The panel may be locked in its expanded position by 'pinning' it in place; press the Pin Button to do so. These panels are of use only when debugging an application at the platform compiler level (JavaScript and Object Pascal for the browser and server portions of the application, respectively).
The Debug Scripts and Debug Source Inspectors function as follows:
Debug Scripts Debug Source CPU View
8 - Bottom Docking Site
Bottom Docking Site Located, by default, across the bottom of the workspace, the Bottom Docking Site contains a series of Inspectors that can be used when performing management tasks for your project or while debugging. These Inspectors include:
Output Errors Search Log Watches Breakpoints Call Stack XML JSON
8 - Bottom Docking Site
SQL HTTP
9 - Status Bar
The application Status Bar provides a range of contextual information about objects. It is divided into several sections showing Zoom, Position, Style, Width and Height information.
Status Bar
Zoom Percentage Edit State Control Name and Type Left and Top Positions Width and Height Font Type and Size Style Details
Related Topics
What you need before getting started Installing Morfik Customizing the environment Building your first application with Morfik Back to top
9 - Status Bar
11
First_Application Building your first application with Morfik The best approach to mastering a new software development tool such as Morfik is to 'learn by doing'so here is your chance to do just that. In this chapter, you will create your first web application from start to finish using some of the core features found in Morfik. No prior knowledge of Morfik is necessary.
Introduction
This article focuses on what you can do with Morfik. At this stage you do not need to know how or whyyou will learn about those later.
Creating your first applicationa guest book

At this stage, you might be saying to yourself, ?Hey, wait a minute! I don't know anything about Morfik, or building a web application for that matter!? Well, fear not! We're not only going to show you how to build a web application from start to finish, we're going to prove how quick and easy it can beeven if you know nothing about application development! We're going to build an online guest book application that lets users post messages to a message board. These tasks require a table(to store users and comments) and the user interfaces to view and add comments. During the process of creating this applicationwith its specific functionalityyou will be exposed to many of Morfik's core features. If you haven't already done so, please first install Morfik. Complete instructions are available here. Otherwise, start Morfik and let's begin!
Step 1create the project

To build an application with Morfik, you must first create a project for the application. To create the project, click on the 'New Project' command on the Home|New tab of the Ribbon bar.
Introduction
First_Application
Figure 1: New Project Dialog
Note: The Ribbon bar changes dynamically depending on the context. If you have a project open, the 'New Project' button will not be visible. Either close the project, or access the New Project command or New Project Wizard through the Power Menu Button.
From the available list of templates on the New Project dialog choose a template that suits your project best. We select the 'Rocking Green' template, call the project 'GuestBook' and leave the location in its default state and within a new folder.
Step 1create the project 2
First_Application If the "Create sample pages" checkbox is ticked, the new project will include a number of sample Pages (including pages for hand held devices). These pages can also be added after the project is created using the "New Page" command. Press the OK button and wait a moment as the new project is created. Your new project includes the main page template for the project called Index and a template page for an Apple iPhone (Figure 2). In this article we will focus on the Index page template. In a Morfik project Pages define your application's interface and internal organization as they define the placement of content and navigational structure.
Figure 2: A New Project is successfully created.

Congratulations! You've successfully created a web application! Granted, it doesn't really do anything useful, but that's not the point. By specifying the basic settings, and without having written a single line of code, you now have an application that can be compiled, executed, deployed and has a built-in high-performance database!
Step 2 - Create and configure Guests Comments Table

We will create a table to store information about guests and their comments. We use the Table Wizard to create the table and will call the table 'Guests'. Press the 'Table' button on the Ribbon Bar's 'Project|Document Wizards' tab to display the Table Wizard. Enter "Guests" as the table name as shown in Figure 3.
First_Application
Figure 3: New Table Wizard - Table Name

Press the Next button to continue. We now need to label the various columns of the 'Guests' table. Press the 'Add' button to create a new column. Set Name to GuestID and the Type to AutoNumber (Figure 4) and then press the OK button to close the Field dialog box.
First_Application
Figure 4: Defining fields (columns) in the New Table Wizard Press the Add button again to create another new column. Set Name to FullName and Type to Text and then press the OK button to close the Field dialog box. Repeat the above steps to create three more columns:
COLUMN EmailAddress Comment ContactMe
TYPE Text Memo Yes/No
Once the above fields are added to the table, you should have the list of fields shown in Figure 5.
First_Application
Figure 5: Completed list of fields

Press the Next button to continue. You can now specify that the GuestID should be used as the primary key to uniquely identify each record in the table (Figure 6). Select the 'Yes, use the following field(s) as the primary key' radio button and then press the ellipsis button to display the Define Primary Key dialog box. Select 'GuestID' column in the "Define Primary Key" dialog and then press the OK button to close the dialog box.
First_Application
Figure 6: Defining the Primary Key in the Table

Wizard. Press the Next button to continue. We're done defining the Guests table. Press the Finish button on the Wizard to close it (Figure 7).
First_Application
Figure 7: Completed New Table Wizard Complete

You will see the table and the fields that you just created in the Table Design View (Figure 8). Any further adjustments to the fields can be applied from here, but we will leave the default settings for this application.
Figure 8: Table Design View

While we are here, let's add a dummy record to the Guests table for testing purposes. Press the [F12] key to switch to Table Data View (Figure 9). Answer 'Yes' if asked for confirmation on saving the table. On the Home|Records tab of the Ribbon bar, click on the New Record command.
First_Application Add the following values in the record:
FullName : Jon Citizen EmailAddress: jon@citizen.com Comment: This is cool and I am very happy to have the first comments in this Guestbook sample project. Keep up the good job. ContactMe: 1
Figure 9: Table Data View

The GuestID column will automatically be assigned the value 1 when the record is updated. On the Home|Records tab of the Ribbon Bar, press the Update button to save the new record. Close the Guests table. The table is now ready to be used in your project and you should be able to see the new table under the 'Tables' category in the Project Panel.
Step 3Configure the Application User Interface

Any work on the user interface of the project can start from a Page that is created as part of the selected template. Depending on the project, we could either choose one of the existing pages in the template as the home Page or create a new Page with a layout closer to our project and use it as the home Page. Since GuestBook is a relatively simple project, we use the existing Index Page in the project and start our user interface design.
First_Application
Figure 10: Using the Index Page in the project

When working with Pages, the portion of a Page that is part of the Master Form (the very top level of the UI) is dimmed down (marked with 1 in Figure 11). The remaining part of the Page are divided into sections using subforms (marked with 2 in figure 11) with the subform containing a form. Forms are the canvas upon which you will do most of the work to create application visual interface.
10
First_Application
Figure 11: New Index Page

Double clicking on a subform or the dimmed area of Index page will open the form within the subform or the project master form respectively. Start with double clicking on the header section of the page (part of the Master Form) to view the Master Form (Figure 12).
11
First_Application
Figure 12: Project Master Form (frmRoot)

Customize the Master form header to suit our project with the following changes to the Caption and Width properties of TextLabel1 and TextLabel2:
TextLabel1 : TextLabel
Caption Guestbook
Caption Width Welcome to our guestbook, we'd love to hear from you 500px
GuestBook is a simple project with only one Page and no need for navigation so we remove the list of links. We also remove the links in the Footer of the Master Form by deleting "Container6" which includes all the Footer links. Save and Close the frmRoot form. The Index Page header is now updated (Figure 13).
12
First_Application
Figure 13: Index Page in an updated Master Form

Pages in Morfik projects are composed of one or more forms which are placed in specific locations of the page through the usage of a control called SubForm. The SubForm control defines an area of a page (or form) where another form will be inserted. Pages are thus created through the aggregation, formatting and layout of various forms. Double click on the Subform in your Index page to start designing the Form within the subform. This form will be used to display a list of existing comments as well as allowing guests to add new comments. Dock the Property Inspector as shown in Figure 14:
13
First_Application
Figure 14: Form to be designed for viewing and adding

comments Start with setting up the following properties of the form:
frmEmpty
View Mode Data Source Page Size vmContinuousEditable Guests 50
The "vmContinuousEditable" view mode for forms allows viewing multiple records, as well as the ability to add or edit records at run time with grid-like behaviour. Go to the Insert Ribbon and click on TextLabel control in Standard section. Then click on the Details Band of the Form to place a TextLabel on the form. While selected, switch to the Home Ribbon, then click on the "Style" command (in Appearance section) and from the drop-down list select "Heading6". Now we set some properties of the new TextLabel to display the guest full name.
Data Field Left Top Width FullName 45px 15px 500px 14
First_Application Place a second TextLabel for the comments and position it under the guest full name TextLabel and while selected, apply the following property changes:
Can Grow Data Field Left Top Width Word Wrap Yes Comments 45px 42px 800px Checked
We also draw a Line in between each entry by placing a Rectangle control from the Insert Tab(within the Extended section) under the comments TextLabel and apply the following changes through the Rectangle properties.
Rectangle1 : Rectangle
Border Sides Border Width Color Height Left Width Un-check "bs Bottom", "bs Left", "bs right" 1px None 7px 65px 785px
Click on the Details band of the form and set the following property:
Detail : Band
Height 94px
Following the above changes, your form should look like the screenshot shown in Figure 14:
15
First_Application
Figure 14: Updated Comments List Form
Step 4Data Entry and project Preview

The current databound form will give us a list of guests and their comments from the Guests table but how do guests add new comments you may ask! If you recall, we changed the "View Mode" for the above form to "vmContinuousEditable" which makes it a "Continuous Editable" form. These forms include record editing functionalities through the usage of a special editing band. The editing feature in Continuous Editable forms are automatically enabled and by double clicking on a record at run time it is possible to do in-place editing of the displayed records. However there are still a couple of functionalities that we need to add to the form in order to do data entry at run time. Let's customize the "Edit Band" by right clicking on the Form and from the Form context menu, select ?Customize Edit Band? (Figure 15).
16
First_Application
Figure 15: Customize Edit band in Continuous Editable forms

The above action makes the Edit band visible during design and allow us to customize it for Data entry. Please note that the Edit band is visible at Design time and is only displayed at run time when a new record command is called. As you note, by default, the Edit band only include the editing controls for the fields that are shown in the Details band. We will customize the Edit band to show and allow data entry for all fields, except for the "GuestID" field which is of Auto-Number data type and is automatically incremented by the system. Click on the Edit band and change it's height property as suggested below:
DetailEditable : Band
Height 232px
Select the existing edit control for FullName field (Edit_TextLabel1) and change the following properties:
Edit_TextLabel1 : TextEdit
Left Top Width 161px 18px 600px
Next, select the the edit control for Comments field (Edit_TextLabel2) and change the following properties:
17
First_Application
Left Height Top Width 161px 92px 53px 600px
It is now time to add editing controls for the fields that are not included in the Edit band by adding a new TextEdit control and setting it's Data Field to the EmailAddress field from the Guests table. To save time, we make a copy of the existing TextEdit control. Click on the Edit control for FullName field (Edit_TextLabel1), then right click and select Copy (or use Ctrl+C) to make a copy of the control. Right click on the form and click on Paste (or use Ctrl+V) to add the new TextEdit control to the form. Apply the following property changes to the new TextEdit control:
Data Field Left Top Width EmailAddress 161px 155px 600px
The last control to add for editing is for the "Contact Me" field which is of type Boolean. Click on the Insert Ribbon tab and in the list of controls in the Standard section, click on Checkbox control. Move the cursor down under the EmailAddress edit control and click again. Make sure the new checkbox is selected and apply the following property changes:
Edit_Checkbox1 : CheckBox
Caption Data Field Left Top Contact Me ContactMe 161px 189px
In the final stage of customizing the Edit band we add titles for each editing control. Click on TextLabel control in Insert Ribbon tab and place it next to the edit control for the Fullname field. While selected, go to the Home Ribbon, click on "Style" drop-down and select "Heading6" to apply formatting to the TextLabel and make the following suggest property changes: Step 4Data Entry and project Preview 18
First_Application
Caption Left Top Guest Name 45px 19px
Follow the above steps to place titles next to each Edit control and update the Caption and Top properties according to the field they represent. The Edit band customization is now complete and the last thing to do before we preview the project is to add a Navigation bar in the footer of the form. Expand the Footer band by placing the mouse over the border of the Details and the Footer bands and click and hold down the left mouse button when the cursor looks like a double sided arrow and drag the Footer down till the height is around 45px. Click on the empty Footer band and in the list of properties for the Footer, click on "Navigation Bar" ellipces. This opens the Navigation Bar dialog. Tick the "Enabled" and "Large Buttons" Checkboxes (as shown in Figure 16) and click on OK button.
Figure 16: Form Navigation Bar Dialog

You should now be able to see the navigation bar in the Form Footer which includes commands for Adding, Deleting, Editing and Submitting of records. All commands on the navigation bar are customizable or can be hidden.
19
First_Application
Following the above Edit band customizations and changes to the form, your form should look like the screenshot shown in Figure 17.
Figure 17: Guest Comments form at design time We have now completed our first application and can have preview by clicking on the Run button. Shortly after clicking on the Run button, you should see your application in the built-in browser (Figure 18).
Note: On systems protected by a Firewall, the 'Windows Security Alert' is displayed at the time of running the project or Previewing a form. You should not get this dialog if you click on "Unblock".
20
First_Application
Figure 18: Guestbook application at run time

Try Adding, Editing and Deleting some test comments to ensure all functionalities are in place and work as expected. Of course you can further customize the navigation bar and hide commands such as Delete or Editing of records.
Note: The built-in Morfik Debug Browser is used to display your application at run time. There are links
to 5 major browsers and mobile devices on the debug browser that lets you view your application in different browsers and mobile devices. In order to use these browsers, you will need to have them installed on your system.
Step 5Data Entry Validation

There are simple routines that we could apply to this project to improve its data integrity and functionality. For example in the data entry form, we can check the entered values in the TextEdit controls before submitting
Step 5Data Entry Validation
21
First_Application
the data and show a message if no valid information is entered. To do this, in the data entry form, double click in 'On Before Submit' event and add the following code: FX Code
Procedure frmEmpty.WebFormBeforeSubmit(Var Cancel: Boolean); Begin If (Edit_TextLabel1.Text.Trim = ") OR (Edit_TextLabel2.Text.Trim = ") OR (Edit_TextLabel3.Text.Trim = ") Then Begin Cancel := True; ShowMessage('All fields require data!') End; End;
BX Code
Published Message Sub WebFormBeforeSubmit(ByRef Cancel As Boolean) If (Edit_TextLabel1.Text.Trim() = "") Or (Edit_TextLabel2.Text.Trim() = "") Or (Edit_TextLabel3.Text.Trim() = "") Then Cancel = true ShowMessage("All fields require data!") End If End Sub
CX Code
published message void WebFormBeforeSubmit(ref Boolean Cancel) { if ((Edit_TextLabel1.Text.Trim() == "") || (Edit_TextLabel2.Text.Trim() == "") || (Edit_TextLabel3.Text.Trim() == "")) { Cancel = true; ShowMessage("All fields require data!"); } }
Conclusion
Congratulations! You've just completed your first Morfik application! To further empower the notion of 'learning by doing', we suggest you go through the sample projects that are installed with Morfik. Looking at the inner workings of a professionally developed application is another great learning approach.
Related Topics
What you need before getting started Installing Morfik Customizing the environment Getting to know Morfik application workspace
Back to top
Conclusion
22
Building_Graphical_User_Interfaces_-_Introduction_and_Overview
The Graphical User Interface is the single most influential factor affecting the user experience and perhaps the most important part of an application. Often applications are judged by the way they look and feel, and this is even more so when it comes to the Web. The way that an application's functionality and data are organized and presented to the end user is of vital importance. Many of the recent new technologies on the Web have been developed specifically to enable web applications to provide a better user experience. Rich Internet Applications (RIAs) have the most sophisticated user interfaces. Amongst the most notable RIA technologies are Ajax, Flex, Silverlight and JavaFX. Morfik has chosen to use Ajax due to it being native to the browser and not requiring special plug-ins or software to be installed either on the user's machine or within the browser. This choice has proven itself to be a sound one with the growing user base of mobile devices running Apple's iPhone OS which doesn't support any kind of browser plugin, at this time.
Contents
1 Web user interfaces 2 Steps involved in building graphical user interfaces in Morfik 2.1 Building the structure 2.2 Adding content, behavior and interactivity 2.3 Enhancing the appearance 3 Related Topics
Web user interfaces

At the time when Windows offered a new user experience on the desktop, many traditional application developers dismissed it on the basis that it did not bring additional functionality, and as such it did not warrant the considerable effort required to write Windows applications. Even worse were those who ported their applications to Windows but kept the old DOS-based command-line user interface. What they failed to recognize was the importance of the new graphical user interface paradigm and its impact on users' choice of applications. We now have the same situation for the Web, but on a grander scale. Far beyond the traditional users of desktop applications, the World Wide Web has become the new computing platform for the masses. Once again the user interface becomes one of the most challenging aspects of this new platform. Application developers are again facing the same dilemma. Contrary to popular belief amongst desktop application developers, the ultimate user experience for a web application is not necessarily created by reconstructing the desktop experience on the web. Attempts to do so have often had disappointing results. Unlike desktop applications, where functionality is the primary consideration, in web applications the content is the focus. In web applications functionality is built around content. As such, content drives the design of user interface on the web. Think about the websites you visit. What do you find there? Content. Now think about the desktop applications you use. You use them to complete tasks. A web application needs to provide functionality while looking like a brochure. A page is perhaps the most important metaphor on the Web. The role of the page in a web application is the same as the role of a window in a desktop application. The layout of a web application needs to have a certain degree of fluidity so that the layout can change in response to changes in content. In contrast, scrollbars are the only way to deal with the variability of content in desktop applications. Although scrollbars can be used inside a web page, their use is generally discouraged and limited to specific controls such as list boxes and comboboxes.
Contents 1
Figure 1 A typical desktop application (Photoshop) versus a typical web application (Facebook) The content-driven nature of the page layout poses a serious challenge to the conventional desktop tools for building user interfaces on the Web. The failure of the traditional user interface design tools is so great that most web developers have come to the unfortunate conclusion that a text editor is the best tool for designing web user interfaces! One of the main reasons for this is that under the conventional approach, the functionality of user interface and its graphical design have to be built using two different types of tools. Every time there is a change in one domain a tedious manual process must follow to transfer the changes over to the other domain and vice versa. Morfik has recognized this challenge and has built a development tool that makes creating web applications a whole order of magnitude more efficient than what can be achieved by conventional tools. Morfik achieves this through combining graphical design and visual programming into one tool as well as having developed a special technique that allows for WYSIWYG design of user interface with absolute positioning while maintaining the
Web user interfaces 2
Building_Graphical_User_Interfaces__Introduction_and_Overview necessary degree of flexibility at run time.
Steps involved in building graphical user interfaces in Morfik

There are three distinct phases involved in designing user interfaces in Morfik. In each phase there are a number of activities that you must carry out to achieve the design objectives. These phases are: building the structure of the application user interface adding content, behavior and interactivity enhancing the appearance of the application user interface.
While there are some overlapping aspects to these phases, they present distinct parts of the design process and should be treated separately.
Building the structure

The structure of an application user interface relates to page layout and the organization of functionality within an application. The building of a primary navigational framework is also part of this phase in the design process. The focus is high-level application flow with the goal of allowing end users to get the information and functionality they need quickly and efficiently, without frustration. The main activities involved in this phase are: choosing the right layout for your application using Pages to structure your application user interface building navigation menus and organizing your application's functionality.
Adding content, behavior and interactivity

In this phase, you will be engaged with connecting user interface elements to various data sources within your application as well as defining behavior and interactivity for your application user interface elements. Most activities can be accomplished without coding. There are, however, situations where coding may become necessary. The goal at this stage is not to develop the functionality or the content for your application; the aim is simply to hook up to the existing functionality and content that have already been defined within your application to user interface elements. The main activities involved in this phase are: working with Forms to add behavior and content to your application using Controls and Widgets to add interactivity and display content controlling the layout of your application.
Steps involved in building graphical user interfaces in Morfik
Enhancing the appearance

In this phase you will be engaged with adding graphical effects to enhance the presentational quality of your user interface. Simply said, the aim is to make your application look good! In practice, this phase is more challenging than it might appear in the first instance. The hallmark of a professionally designed user interface from a graphical design point of view is its consistency throughout the application. Keeping a consistent look and feel across many pages and over the length of product development cycle is certainly a challenge not to be underestimated. To make this challenge easier, Morfik has introduced Themes and Styles as part of the graphical design system. Using Themes and Styles you can control the appearance of your application at a global level rather than having to deal with the individual appearances of various controls. The main activities involved in this phase are: adding Graphical Effects to enhance presentation maintaining consistent presentation through use of Themes and Styles.
Related Topics
How is Morfik different? Understanding Morfik's approach to Web application layout Identifying and creating your application pages Building navigation menus and linking your application pages Getting to know Morfik Forms Using Forms to build your application user interface Working with Forms to add behavior and content to your application Using Controls and Widgets to add interactivity and display content Controlling the layout of your application Using Graphical Effects to enhance presentation Maintain consistent presentation through use of Themes and Styles Creating Interfaces for the Mobile Web
Back to top
Enhancing the appearance
How_is_Morfik_different
If you are familiar with or have had any experience with building websites using conventional tools, you might find it quite a bit different when working with Morfik. This, however, will not last long. Once you are past the initial stage you will immediately realize the power of the new approach. The following sections will help you to get your bearing right by describing key differences between Morfik and other web development tools.
Contents
1 No HTML or CSS files 2 Designing Pages 3 Pages in Morfik 4 Use of absolute coordinate system 5 For every Form you get two code modules instead of one 6 Graphical Design is merged with Visual Programming 7 Related Topics
No HTML or CSS files

One of the key differences between Morfik and other web development tools is that Morfik does not require the developer to know the inner workings of the browser. The developer does not need to know how to code HTML, XHTML, CSS, HTTP, SOAP or any other acronym that describes techniques and file formats for web development. In Morfik, you will build user interfaces using objects that represent higher levels of abstraction such as Pages, Forms, Buttons, Containers, Labels, DropDowns and Calendar Controls instead of HTML tags and their associated styles. Through a process of compilation, Morfik generates all the necessary HTML, CSS, JavaScript and image files based on the high level description of design provided by the developer. When you first try Morfik it is immediately obvious how easy it is to create the basics of a web application, without actually doing any coding. What is more impressive is that you don't have to write any HTML or scripting code and Morfik does not spit these out at you.
Designing Pages
In Morfik you do not write pages, you design them. You also design Formsa metaphor used in all major desktop development tools. Modern, Ajax-enabled web applications have what might be considered few pages, or in some cases only one, but these pages undergo several changes in appearance in order to interact with the user. With Morfik you will design Pages as you will want your application to display them, by designing and aggregating Forms for user interaction in addition to content presentation. Forms can also be self-containing (both at design time and at run time) and therefore extremely modular. HTML pages are NOT! Though you can use server-side scripts to compose a Page from several HTML snippets, you cannot define an HTML Page in terms of other HTML Pages.
Contents
How_is_Morfik_different In Morfik, the layout and, more importantly, the behavior of an arbitrarily complex page can be successively reduced down to simpler and simpler Form constructs.
Pages in Morfik
Unlike other web applications that consist of a series of web pages, a Morfik application uses a single page to run an entire application within the browser. This single page will morph itself into all the pages that compose your application, without ever requiring a full page reload by the browser. This radical move ensures two key benefits for the Morfik developer and the end user: 1- No page refresh is required while a user interacts with a Morfik application. 2- No postbacks are needed for tracking state changes within an application. Avoiding page refreshes makes Morfik applications appear seamless and behave more like desktop applications with a greater level of continuity and smoothness. Also, the state of the application is not posted back to the server every time a user goes to another page within the same application. Imagine if every time you ran a command within a desktop application the application would save its current state before shutting down and then immediately restarting again! While this may be tolerable for smaller applications, it is clearly impractical to have this model used for larger applications such as word processing or spreadsheet. The same is equally true about simple and complex user interfaces on the web. Having a single page to represent an entire application within the browser is highly desirable from a software development point of view; however, from the Web point of view this model has some flaws that need to be addressed. The World Wide Web works best with pages and that shows through its basic operations. For example the history list within browsers and the associated back and forward buttons; the common practice of bookmarking; hypertext models and hyperlinking; and search engine bots all assume the existence of web pages with distinct URLs. Morfik applications need to comply with this page-centric view in order to successfully work with the rest of the web. To achieve this, Morfik introduces the abstract concept of virtual pages. In Morfik, the state of an application's user interface at any given point in time is considered to be a virtual page. Whenever the state of an application user interface changes in response to user input, the new state is thought of as a new virtual page. Morfik's virtual pages are abstract entities, but are "materialized" in high level objects called Pages. These Page objects represent particular states that the application will assume. From an end user's perspective a Morfik Page object is exactly like any other web page created with any other tool, but internally the Morfik Framework transparently makes it work in a more optimized manner, by morphing the single page Morfik uses to display the entire application. Pages are are published and made identifiable by defining a URL for them. Your application may define any number of Page objects for internal use which are not relevant to the outside world and are not worth publishing. On the other hand, some pages are extremely important and it is these that you want users to find and be able to directly access.
Read more about Virtual Pages... Read more about Page objects...
Designing Pages
Use of absolute coordinate system

One of the things that you will notice as soon as you start working with Morfik is that when you place a button it will go exactly where you point the mouse to at the time of placement. This is because in Morfik you do the layout of the user interface in absolute coordinates. This does not sound particularly extraordinary until you realize that no other web development tool can do this. Anyone who has tried using an HTML editor can attest to the awkwardness of the process. This is due to the design of HTML language and the way browsers render it. Browsers work like word processors in that they consider the content as totally fluid. Style is simply an attribute of the content which is applied in the form of instructions in a separate document known as a CSS file. While this is suitable for pages that have little functionality and simple design, the task becomes progressively more difficult as the degree of the sophistication grows in terms of behavior and appearance of the application user interface. Many people have had to resort to a text editor as the best tool for coding the user interface of modern web applications. Morfik uses a unique blend of absolute positioning and fluid layout that makes visual design of complex user interfaces not only possible but fun! This blend allows the designer to do the layout of application user interfaces in absolute coordinates at design time, along with specifications that provide for a reasonable degree of flexibility for the layout at run time. Of course, it is possible in Morfik to mark a specific region in the layout to follow fluid layout rules similar to the conventional approaches. We refer to this model of positioning as Plastic Layout.
For every Form you get two code modules instead of one
One aspect of Morfik that might be difficult to get your head around initially is the fact that in Morfik every form has two associated modules. The code associated with the application user interface resides partly in the browser side and partly on the server side of your application. The module residing in the browser side uses red for syntax highlighting and implements the Ajax behavior. The one residing on the server side uses blue for syntax highlighting and has a more conventional role similar to server-centric systems such as PHP or ASP. Although closely related, these two modules do not directly interact with each other. They simply represent the same user interface elements in two different domains. One module compiles into binary and runs on the server side where as the other compiles into JavaScript and runs within the browser.
Graphical Design is merged with Visual Programming

In Morfik you define the behavior and appearance of your application using the same tool and as part of the same process. Unlike other approaches where graphical design, page layout and coding are considered as separate processes and often done by different people using separate toolsfor example Photoshop for graphic design, Dream Weaver for HTLM layout editing and a specialized Text Editor or IDE for codingMorfik offers one tool for all aspects of user interface design and programming. Morfik dramatically increases the speed of the development by extending its visual programming model to include the graphical design aspects of a web application. Unlike desktop applications, graphical design is a significant part of the web application development process. Modern web applications provide enhanced user experiences through graphically rich interfaces that include, amongst other things, subtle effects such as rounded corners, sources of light, shadows, reflections and
Use of absolute coordinate system 3
anti-aliased text. Due to the current limitations of browsers, these images need to be broken down into a large number of smaller fragments which in turn need to be meticulously coded into HTML and CSS documents. Any non-trivial change to the user interface layout or style would require re-building and re-coding of these images. Morfik removes this burden by automating the creation and the subsequent management of these images during development and at runtime. This opens up new possibilities that are extremely difficult to achieve manually. Take Image Bundling for example. In order to reduce the number of round trips made to the server at runtime, Morfik bundles multiple images into a single file at design time and subsequently manages the complex partitioning of them at runtime. The complexity associated with this task makes it prohibitive to be done manually using conventional web development tools.
Related Topics
Introduction and Overview Understanding Morfik's approach to Web application layout Identifying and creating your application pages Building navigation menus and linking your application pages Getting to know Morfik Forms Using Forms to build your application user interface Working with Forms to add behavior and content to your application Using Controls and Widgets to add interactivity and display content Controlling the layout of your application Using Graphical Effects to enhance presentation Maintain consistent presentation through use of Themes and Styles Creating Interfaces for the Mobile Web
Back to top
Graphical Design is merged with Visual Programming
Understanding_Morfiks_approach_to_Web_application_layout
When building Rich Internet Applications (RIAs) there is a greater need for control over the layout of the application user interface. The provision for a greater control is a common feature amongst RIA technologies such as Flex, Silverlight and JavaFX. Similarly, Morfik also provides a model that allows for a greater level of control over the application user interface layout; however, unlike these platforms, Morfik does not rely on browser plug-ins or special software to achieve this. Morfik has developed a unique technique that is implemented in Ajax code, removing the need for browser plug-ins. This approach is named Plastic Layout due to its ability to combine absolute positioning with flow layout.
Contents
1 Plastic Layout 2 Content-driven layout versus container-driven layout 3 Grow/shrink properties (content-driven) 4 Placement properties (container-driven) 5 Plastic Layout in action 6 Tips, tricks and things you need to know 7 Application?s alignment within the browser window 8 Related Topics
Plastic Layout
Plastic Layout is a technique in which the developer successively breaks the application user interface into smaller functional sections based on the application logic and the graphical design of the user interface. These sections are then programmatically organized into a spatial tree structure at run time. Each node in the tree is aware of the existence, state and behavior of other nodes and can respond to layout changes (communicated as events) according to changes in content and the rules set out by the developer at design-time. While in Morfik the navigational structure of an application is created with Pages, the pages themselves are composed entirely of Forms. All the application user interface is thus built using forms. Forms represent major nodes within this tree structure; however, there are other nodes that exist in the tree and are important in the layout process. A form is comprised of a series of repeatable bands. Within each band there are user interface elements such as button and container controls. A special node, the SubForm Control, is used to link forms within this structure. In this documentation the term Plastic Layout Tree is used to refer to this hierarchical structure as depicted in Figure 1.
Contents
Figure 1: Plastic Layout Tree All nodes within the tree have Width and Height properties. With the exception of Band nodes, all other nodes assume a location within the space provided by their respective parent nodes. The location is defined by the Left and Top properties. Bands are special nodes with unique layout characteristics. They are laid within a form in a sequence and with relative positioning.
Content-driven layout versus container-driven layout

To better understand Morfik Plastic Layout it may help to think in terms of two fundamental forces that drive the layout process. Every node within the Plastic Layout Tree is subject to these two forces. One is the force exerted by the content within a node (content-driven layout) while the other is the force exerted by the container node (parent) on the contained node (container-driven layout).
Plastic Layout
' In the container-driven layout case, Figure 2, resizing of Container1 will force Container2 to move down (in this example Container2 is bottom-justified). In the content-driven layout case, Figure 3, the TextLabel control is forced by the content to grow in order to reveal the entire text content. These two processes operate independently and in parallel with little conflict. Conflicts can only arise along the Yaxis and when such a case arises priority is given to the change initiated by the container-driven layout process'. It is worth mentioning that content-driven layout dominates the process when building applications that have the look and feel of a website while the container-driven layout dominates when building desktop-like applications. In general, however, both these layout processes are used within most applications created by Morfik.
Grow/shrink properties (content-driven)

A change in the content of a child control will cause its parent control either to grow or shrink depending on whether the amount of content was increased or decreased. On the other hand, if the content of the parent control changes, the child control is not affected. It is important to note that a change is propagated in a cascading style from bottom to the top of the Plastic Layout Tree. In content-driven layout a change in control content could affect sibling controls as well (controls that have been placed in the same container). Depending on whether the content is shrunk or grown, sibling controls will be either pulled up (to fill up the resultant gap) or moved down (to clear the way for control growth). The siblings that are affected are ones that fall entirely below the primary control being adjusted, as shown in Figure 4.
Content-driven layout versus container-driven layout
It is requested that a screenshot or screenshots be included in this article to improve its quality. () () Figure 4: Grow/shrink effects on sibling controls There are three control properties and four events that allow developers to fully control the behavior of the content-driven layout.
Grow/Shrink related properties: Property Description The CanGrow property determines the behavior when the Caption text is too large to fit into the Control:
if
Can Grow
CanGrow=No, the Control retains its design-time height if CanGrow=Scroll, the Control retains its design-time height, but allows the end user to scroll through the text if CanGrow=Yes, the Control increases its height to accommodate the text The CanShrink property determines the behavior when the Caption text is too small to completely fill the Control:
if
Can Shrink
CanShrink=False, the Control maintains its design-time height if CanShrink=True, the Control decreases its height to accommodate the text Note: enabling CanShrink has no effect unless CanGrow is also enabled. Using this property only makes sense if the control will contain data bound controls. If there is only a small amount of content to be displayed within the control, its height will be reduced so that it elegantly displays the content without leaving large blank areas in the page. More information on how controls can grow and shrink at runtime is available under the topic Plastic Layout. The ShrinkOnHide property specifies how Morfik's Layout engine repositions other controls when the container's visibility is changed at runtime.
Shrink On Hide
Grow/Shrink related Events:

Grow/shrink properties (content-driven) 4
Event
Description
On After Grow Or Shrink This event is fired within the browser after the height of a control is adjusted in order to fit its new content. On After Pushed Or Pulled On Before Grow Or Shrink On Before Pushed Or Pulled This event is fired within the browser after the position of a control has changed in response to a change in the content of a sibling control. This event is fired within the browser before the height of a control is adjusted in order to fit its new content. This event is fired within the browser before the position of a control is changed in response to a change in the content of a sibling control.
Placement properties (container-driven)

A change in a parent container's dimensions could affect the placement of its child controls depending on the child control's placement properties. A change in the dimension of a child control, on the other hand, will not affect its parent control's dimension. The affect of a change cascades down the Plastic Layout Tree until it reaches the bottom nodes.
Figure 5: Placement properties

There are two control properties that allow developers to fully control the behaviour of the containerdriven layout process: Horizontal Placement Placement properties (container-driven) 5
Vertical Placement
Plastic Layout in action

There are practical aspects to the implementation of Plastic Layout that are important to know. The following diagram shows the flow of the Plastic Layout process at run time:
Figure 6: Layout generation The first thing to note is that the Plastic Layout process does not generate the actual layout. The initial layout is created on the server-side by the form generator and then sent to the browser-side of the application for final processing. All the layout information defined at design-time is contained in an XML template which is stored inside the .MXR file. This XML template contains precise positioning information, information about formatting and data sources as well as instructions on the required plasticity of the layout. The Morfik Form Generator (on the server side) first processes this template and uses the formatting information as well as accessing the specified data sources to generate the starting HTML. It then sends it to the browser for final processing. The Plastic Layout begins in the browser by first interpreting the developer?s instructions on plasticity and then adjusting the location and the dimensions of various nodes in the Plastic Layout Tree to bring flexibility to a layout that is otherwise rigidly defined. The second thing to note is the nature of key events that start the layout process and the various actions taken by the Plastic Layout system in response to these events. Opening a FormThe layout process is triggered by a number of different events. The most significant of these events occurs when a form is opened in response to a call to the OpenForm function. The event occurs just before a form is made visible in the browser. It invokes the layout process to begin its plastic work on the content of the form. There are three steps involved:
Step 1: The layout process first processes all TextLabels, CheckBoxes and Optionbuttons and depending on their CanGrow and CanShrink properties will apply height adjustments to each of these controls. Each adjustment may result in subsequent changes of the height of the parent control or a change in the location of sibling controls. The cascading nature of this process, however, is confined to those controls that are within the same form; no Event is Plastic Layout in action 6
allowed to cross the boundary of the Form into the Parent Form. Similarly, the same layout process goes through all containers within the form that have their ShrinkOnHide set to true and will perform height adjustments.
Step 2: A single grow/shrink Event is triggered on the Form?s Owner Subform which will carry through to the Owner Form the aggregate result of all the changes that were made in the Form during Step 1. The Parent Form will do all the necessary adjustments to its child controls before passing this event up the next form in the tree. This will continue until the top form in the Plastic Layout Tree is reached. Step3: The container-driven layout process begins at this point in the cycle. It starts from the form node that is just being loaded and will recursively work down the Plastic Layout tree until the bottom most nodes of the tree are reached. All controls that have their HorizontalPlacement or VerticalPlacement properties set are processed during this step.
Note: When a Form is cached within a SubForm, subsequent calls to the OpenForm command on the same form will only result in Step 2 and Step 3 to be executed. Note: Opening a form often results in one or more child forms to open implicitly. These secondary forms, upon opening, will only execute Step 1 and Step 2. Step 3 is only run for the primary form being opened. Setting Width and Height propertiesProgrammatically setting the width or height of a control will trigger the container-driven and the content-driven layout processes to run. The container-driven layout process is run on all the child controls, provided that the HorizontalPlacement or VerticalPlacement properties are set. The content-driven layout is run on the control itself, provided that the control is a TextLabel, Checkbox or an OptionButton and either the CanGrow or CanShrink properties are set. Note: The content-driven layout process only responds to the changes in the Width property. Setting the height property does not start the content-driven layout process. Care must be taken when setting the Width or Height properties of a control as the recursive nature of the layout process could result in multiple runs that may not be necessary and be waste of processor?s time. Resizing Browser WindowThis event will trigger the container-driven layout process to run on the main form of the application and will expand through the entire Plastic Layout Tree. If the properties of controls that determine the layout behavior are not set properly this is where the negative effect will be seen. The application will appear as slow in responding to the resize events that are fired repeated during the resizing of the browser window. To mitigate this effect, a timer is set up to reduce the frequency of events that are passed through to the system; however, this does not remove the need to carefully configure control layout properties within a project. Other ActionsThere are three other actions that trigger the content-driven layout process to run: Changing the visible property of a container (only if it actually changes) Changing the caption of a TextLabel, CheckBox or OptionButton (only if the value changes) Changing the active tab in a TabControl result in the layout process to be run on the TabSheet control being activated.
Plastic Layout in action
Tips, tricks and things you need to know

In order to gain maximum benefit from the Plastic Layout, it is beneficial to consider the following when designing an application: 1) Use containers to guard against the undesirable effects of ?grow and shrink? on sibling controls. It is not always desirable to move sibling controls that fall underneath the control that is being re-sized. Use a borderless container to isolate sibling controls that are not to be moved by the expanding or shrinking control. This technique is demonstrated in Figure 7. Note the effect of container D in isolating container B so that when the text label is grown, container B remains fixed in place.
Figure 7: Using containers to isolate siblings 2) Sometimes it is not possible to use a container to guard against the undesirable effects of ?grow and shrink? on sibling controls. In these situations use OnBeforeGrowOrShrink and OnBeforePushedOrPulled events to achieve the same result as shown in the code snippet below:
Procedure Form1.TextLabel5BeforePushedOrPulled(Var deltaY: Integer); Begin deltaY := 0; End;
3) Do not set CanGrow and CanShrink properties if not neededthere are normally many instances of TextLabel controls that are static and are not data bound. These controls usually do not require their sizes to be changed at runtime. Make sure that the CanGrow property and CanShrink properties for these controls are set to No and False, which are the default values. Otherwise the layout process attempts to adjust their size, which often results in an insignificant amount of resizing. This insignificant change in size can, however, trigger a wave of grow and shrink operations on parent nodes further up the Plastic Layout Tree. If not checked, this problem could have a very negative impact on the performance of continuous forms. You could alternatively set the
Tips, tricks and things you need to know 8
Understanding_Morfiks_approach_to_Web_application_layout InternalGrowShrinkOverride field of a control to True in order to make it invisible to the Plastic Layout process.
4) Place sibling controls with the same justification in a common container. This will reduce the number of operations performed to produce the same effect as shown in Figure 8. Note that Container A is the only control that needs to have its HorizontalPlacement property set to hpRightJustify.
Figure 8: Optimizing alignment 5) Do not change the design-time property values that are stored in the creation record field. The Plastic Layout process uses in its calculations the design-time values of position and size properties that are stored in the Attrs field. Changing these values could be detrimental to the Plastic Layout process.
6) The Plastic Layout process does not regard hiding a control as affecting its content. Therefore, it does not take any action when the visible property of a control is changed. For container controls, however, this behavior can be changed through the ShrinkOnhide property. The current implementation, however, simply sets the height of a container to zero when its visible flag is set to false, provided the value of ShrinkOnHide property is set to True. The problem will arise when the container is made visible again. The Plastic Layout process attempts to restore the original height of the container based on its child controls. This results in the bottom margin (the distance between the bottom of the bottom-most control and the bottom of the container) to disappear. To work around this problem a dummy control can be placed right at the bottom of the container control so as to maintain the bottom margin.
Application?s alignment within the browser window

Since the application?s main form (top node of the Plastic Layout Tree) does not have a parent container its alignment within the browser is handled in a special way. There is an application-level property, Page Alignment, that controls the alignment of application?s main form relative to the browser window. This property can be accessed through the Options|Application dialog box as shown in Figure 9.
Figure 9: Application's page alignment

property The possible options for page alignment are: LeftThe application?s Main Form is placed in the top left corner of the client area of the browser window. Resizing the browser window in the horizontal or vertical directions will not affect the application?s Main Form alignment (Figure 10).
Figure 10: Left alignment

CenterThe application?s main form is horizontally centred within the client area of the browser Application?s alignment within the browser window 10
window. Resizing browser window in the horizontal direction will trigger an event that will start the layout process (Figure 11).
Figure 11: Center alignment
RightThe application?s Main Form is placed in the top right corner of the client area of browser window. Resizing the browser window in the horizontal direction will trigger an event that will start the layout process (Figure 12).
Figure 12: Right alignment StretchedThe application?s main form is stretched in both directions in order to fill the entire area of the client portion of the browser window. Resizing browser window in the horizontal or vertical direction will trigger an event that will start the layout process (Figure 13).
11
Figure 13: Stretched alignment
Stretched (horizontal direction only)The application?s Main Form is stretched in a horizontal direction in order to fill the entire width of the client portion of the browser window. Resizing the browser window in the horizontal direction will trigger an event that will start the layout process (Figure 14).
Figure 14: Streched (horizontal direction only) alignment
Related Topics
Introduction and Overview How is Morfik different? Identifying and creating your application pages Building navigation menus and linking your application pages Getting to know Morfik Forms Using Forms to build your application user interface Working with Forms to add behavior and content to your application Using Controls and Widgets to add interactivity and display content Controlling the layout of your application Using Graphical Effects to enhance presentation Maintain consistent presentation through use of Themes and Styles Creating Interfaces for the Mobile Web
Related Topics
12
Understanding_Morfiks_approach_to_Web_application_layout Back to top
Related Topics
13
Identifying_and_creating_your_application_pages
In Morfik all applications are composed of one or more pages, not unlike most websites you daily visit on the web. The Pages represent the pages the end user will be able to navigate to inside your application or website and created by assembling together a set of Forms and organizing them appropriately. The organization and navigational structure of the application is defined by how these Pages are assembled and linked together.
Contents
1 Pages define application organization 2 Identify your application's 'Pages' 3 Creating a New Page 4 Creating Application-Specific Page Templates 5 Master Forms 6 Page Templates for Mobile Devices 7 Page URLs 8 Page URL Parameters 8.1 Mapping Ambiguity 9 Related Topics
Pages define application organization

In a Morfik project Page objects define your application's interface and internal organization as they define the placement of content and navigational structure. The navigational structure is defined by what pages you create and how they are linked together to reach the desired results of your application or website.
Figure 1: Top level navigation structure within a website or web-based application. In figure 1 you can see the basic structure of an application or website with several first level pages being linked to from the project's Home page. Pages also contribute to the definition of what an application will look as they
Contents 1
are responsible for establishing the general layout of the application as well as setting the background over which the application is designed.
Identify your application's 'Pages'

This can be a hard first step when you are new to web development, but it quickly becomes easier with a bit of practice. Many developers coming from a desktop development background have difficulty imagining that an application can be divided into pages, but most can. How do you go about doing that? Even if you have never, ever, worked on creating a web application, you have been a user of the Web and you can put that experience to use and envision how your application's functionalities should be grouped and how individual bits of data would be presented to the end user. Think of how your application would change as the user navigates through the options. You can start by establishing what would be the first "page" or "screen" the user would see on entering your application or website. That will be your "home" page. What options will be available for the user on that page and what will the page look like when the user chooses each of these options? A good portion of this page might even remain unchanged when the user selects a specific option. Though you might be changing just a small portion of the page, consider this as another page or a state, and assign it a name. Once you have thought through the first levels of your application and considered what "pages" you are going to have, you should have most of the material you need to begin mapping it out. Look over your notes and ask yourself if some of the "pages" you have singled out have the same structure but differ in the content they are showing. If the answer is yes, than flag them. These might be candidates for being a single page with different parameters or part of a related set of pages. Consider the diagram shown below, in Figure 2. Notice that the pages which are linked from the Home page all have names in the plural form. This indicates that they lead to pages that provide information about multiple items of whichever type they are related to. It makes sense that you be presented a list of items to choose from before you can focus on an individual item. If you are dealing with a homogeneous group of items, items which all have the same set of categories, you would want to create a single "page" which can display information about any specific item, instead of having to create a page for each individually.
Pages define application organization
Figure 2: The application's structure with the addition of parametric pages

This will not only cut down the work necessary to create the application in the first place, it will make it easier to update or change in the future because instead of having a specific page for each of the company's products or customers, you have only one which displays different information based on a parameter it receives. This process of "mapping" your application can be applied repeatedly until you have a good view of all the pages that you will need to build and which ones can be parametric. Note on the diagram in Figure 3 that pages are organized in a sort of drill down structure, going from the one with a very broad information scope (the home page) to pages which are more specifically focused. This is a common pattern to look for in designing your website or web-based application.
Creating a New Page

When creating a new project you are asked to choose a project template. A project template contains a number of pre-designed page templates that are used during the process of creating a new page. These page templates define the layout of a page and provide empty spaces for content. A new page is created by choosing one of these page templates. To create a new page simply run the New Page command in the Power Menu (see figure 3) .
Identify your application's 'Pages'
Figure 3: Create New Page Command.

Then, you will be promoted to choose a page template. See Figure 4. Enter a name, select a page template and then press OK. Morfik will create and open a new Page document using the selected page template as the basis of the layout of the new page. See Figure 5.
Creating a New Page
Figure 4: New Page Dialog.

In the screenshot shown in Figure 5 the area that is dimmed displays content that is inherited from the selected page template. The white and green sections with thin blue frames are SubForm controls whose contained forms is to be defined. To define a form click on the little arrow when the Subform is selected and choose the create form command. Alternatively you can double-click on the Subform and a form will be automatically created.
Creating a New Page
Figure 5: New Page Dialog.
Creating Application-Specific Page Templates

Once you know some or all of the pages you will have in your application the next step is to look for commonalities between them. For example, most websites maintain a common header throughout all pages, providing general navigation options. This could be a commonality between all pages of your application as well. If not, there might be others that you will only be able to determine once you have thought carefully about how your application will work and what information it will display in any given state. If you have identified groups of pages that share certain characteristics you may choose to create a page class or template to define the set of characteristics that they will share. It is common for a Morfik project, be it for an application or for a website, to have several page classes or templates. These special pages make the work of creating several pages that are similar much easier and faster. To define an application-specific page template based on an existing page within your project, right-mouse click on the page while in the Project view and then select the properties command. Once the page document properties dialog appears tick the "Defines Page Class" checkbox. See Figure 6. The new page template should appear in the New Page dialog.
Creating Application-Specific Page Templates 6
Figure 6: Creating Application-Specific Page Templates.
Master Forms
In addition to the ability to define a template page based on an existing page within your project (see above), it is possible to define a page template based on an existing Form. Forms that are used in this way are called Master Forms. In deed, Master Forms provide the base layout for all pages in your application. In these Forms you will define areas, which might be common to a number of pages in your application and others that will always be different from page to page. To define an application-specific page template based on a Form, right-mouse click on the Form while in the Project view and then select the properties command. Once the Form document properties dialog appears tick the "Defines Page Class" checkbox. See Figure 6. The new page template should appear in the New Page dialog.
Page Templates for Mobile Devices

with Morfik it is possible to create a separate set of pages for users accessing the application through an iPhone, an iPod or an iPad. A Morfik project allows the developer to specify which Page object will function as the home page for each type of device. Through the hyperlinks in that page an entirely separate interface can be provided for each type of device.
Master Forms
Figure 7: A Page designed for an iPhone or iPod Touch.

A single Morfik project can contain different sets of pages for each kind of device: desktop, handheld and tablet. All of these pages may share forms and back-end code in order to minimize the effort required to create multiple applications to handle every type of device.
Page Templates for Mobile Devices
Figure 8: Default page dialog.

In figure 8 the Default Page dialog is shown with text boxes for the developer to specify what should be the default page for each type of device. Options are available for regular computers, i.e. desktops and notebooks, iPhones and iPods, the iPad and all other mobile devices. Through this dialog it is possible to set more than one device to have the same default page, if that is compatible with the webite's design and appropriate for providing the necessary functionality to end-users.
Page URLs
Morfik Pages have a URL property which is used to define a relative path for the page. This relative path will compose the page's full URL when combined with your application's root URL. Inside your current project you will be able to reference a page by its relative URL for the purpose of establishing links between pages and defining the navigational organization of the application. For navigation from outside the application you will always need to use the complete URL for the page. A URL can be defined by clicking on the URL button in the inspector panel, or selecting the Define URL command on the Ribbon and supplying a path for the URL which is shown in Figure 5.
Figure 5: Dialog for publishing URLs in the Morfik development environmnet.

Since Morfik pages objects are not a reference to actual HTML files this virtual path can be defined in a completely arbitrary way. There is absolutely no requirement that the supplied path should bear any resemblance to the names of the forms that are used in defining the particular state of application for which the URL is being published. Furthermore, the logical hierarchy in the path which is defined through the folder notation can be made up in any imaginable way.
Page URLs
Page URL Parameters

Morfik web development methodology is heavily geared towards using parameters. Parameters are defined for forms and queries when they are created. Subsequently specific values need to be supplied whenever such forms or queries are invoked. This pattern and its requirements do not change with the new model of hyperlinks and Published URLs. In the new system, parameter definition remains the same so far as forms and queries are concerned. However, there is a need for explicit representation of these parameters within a published URL. A full URL has many parts including standard parameters that appear after the ??? delimiter as a sequence of name=value pairs separated by ?&? in accordance with various web standards. A clean URL on the other hand is a non-technical term that is used to refer to URLs that do not have such parameters. A published URL in Morfik is a clean URL and does not use the notation above for parameter passing. Clean URLs use an implicit way of mapping values that appear in the main body of the URL to the corresponding parameters defined for the URL. This approach is often referred to as URL rewrite and normally is performed at the web server level. In Morfik this process happens within its framework. Parameter mapping in Morfik occurs at the time that a URL is being published. Segments of a URL can be marked as representing a parameter value through the use of square brackets as shown below:
products/[prmCategory]/[prmProductName]
Given the above definition a given instance of a clean URL such as:
http://www.morfik.com/products/software/MorfikFX
can be mapped to a full URL as shown below:

http://www.morfik.com/products?prmCategory=software&prmProductName=MorfikFX
It is important to note that when publishing a URL no new parameter is being defined. Publishing of a URL only involves the mapping of segments of a URL to parameters that are already defined by the underlying forms. Using the mapping information, parameter values that are present in a clean URL are passed through to all forms that happen to have a parameter defined by the same name.
Mapping Ambiguity
It is important to mention that the process of parameter mapping is not perfect. There may be occasions where it is not possible to perform the mapping due to ambiguous definition of published URLs. Under these circumstances parameter mapping may not produce the expected result. Ambiguity results when two or more published URLs have overlapping paths with parameters that can be interpreted in multiple ways. An example of this scenario is shown below:
http://www.morfik.com/products/software/[prmFeature] http://www.morfik.com/products/[prmCategory]/[prmProductName]
In the example above the two Published URLs create ambiguity. If the following URL is supplied, both of the
Page URL Parameters 10
Identifying_and_creating_your_application_pages above Published URL definitions can be selected by the system to perform the required mapping.
http://www.morfik.com/products/Software/auto-deployment
In the case where the first definition is selected, the mapping would produce the following full URL which is the correct mapping:
http://www.morfik.com/products/software?prmFeature=auto-deployment
Using the second definition, the mapping would produce the following erroneous full URL:
http://www.morfik.com/products?prmCategory=Software&prmProductName=auto-deployment
To resolve ambiguity Morfik uses the simple formula of selecting the published URL definition whose fixed portion (URL minus parameters) is the greatest in length. Using the above formula the right result is obtained for the given instance of the supplied URL. However, if the following URL is encountered the wrong definition would be selected.
http://www.morfik.com/products/Software/MorfikFX
The resultant full URL will be:

http://www.morfik.com/products/software?prmFeature=MorfikFX
instead of:
http://www.morfik.com/products?prmCategory=Software&prmProductName=MorfikFX
The above scenario highlights the need for careful selection of paths and a valid range of parameter values when defining parameters in a Form or Publishing URLs so as to eliminate potential for ambiguity. Ambiguity can be totally removed from the above definitions if the first published URL definition was changed to:
http://www.morfik.com/products/softwareProduct/[prmFeature]
And that ?SoftwareProduct? was never chosen as a label for a product category.
Related Topics
Introduction and Overview How is Morfik different?
Mapping Ambiguity
11
Identifying_and_creating_your_application_pages Understanding Morfik's approach to Web application layout Building navigation menus and linking your application pages Getting to know Morfik Forms Using Forms to build your application user interface Working with Forms to add behavior and content to your application Using Controls and Widgets to add interactivity and display content Controlling the layout of your application Using Graphical Effects to enhance presentation Maintain consistent presentation through use of Themes and Styles Creating Interfaces for the Mobile Web
Back to top
Related Topics
12
Building_navigation_menus_and_linking_your_application_pages Once you have identified and created pages in a manner such as described in the article, Identifying and creating your application pages, you can start to build a navigation menu for your application. There are several controls that can be used to create different types of menus, depending on how you want to structure the navigation of the application. Figure 1 shows the top level menu of one of the default template websites built just with the Button control.
Figure 1: Top-level navigation menu.

Top level menus are generally used to link to pages that function as section headers or entry points for a group of related functions or pages. In this case, these pages provide more information about the functions and offer new menus for the user to select from within that portion of the application or website. If the number of functions which are aggregated under each top level menu option is not large, or if only some of the pages linked to from the top level menu actually have further navigation options, it is not uncommon to add a pull-down menu of choices directly from the top level menu. Refer to Using Menubar page to learn how to make complex multi-level menus. Websites and applications that have a larger body of content or functionalities to organize will often have secondary navigation menus. These, in most cases, follow a different orientation than the one used in the top level menu. This means that, generally, if you have a horizontal top level menu, the secondary menus will be vertical and vice versa. This menu allows you to navigate through several different download lists. This menu is shown when you enter the downloads area of the website in order to allow you to narrow your range of options. 1
Building_navigation_menus_and_linking_your_application_pages
Note: It's quite usual for secondary menus to follow a different "orientation" from the primary
one. This is specially true if the primary menu has a horizontal orientation. One benefit of this arrangement is that both menus can easily be visible at the same time, reducing the need for the user to "navigate" between menu levels.
Contents
1 Linking your Application Pages 2 Setting Up Hyperlinks 3 Using Page URLs as targets for Hyperlink properties 4 OpenPage Function 5 OnHyperlinkClick Event 6 Related Topics
Linking your Application Pages

Most Morfik controls which are not designed for text input have a Hyperlink property that can be used for the purpose of establishing navigational paths inside the application or to offer the option of navigating outside the application. It is by configuring the Hyperlink property of different controls to reference different Pages within your application that you define its navigational structure and how users will use it to find and enter information. Through the use of Pages and Links it is possible to implement all navigation within an application built with Morfik without the developer having to write any code. Hyperlink property is defined for the following controls: 1. TextLabel 2. Button 3. Image 4. Dropdown 5. Container 6. Rectangle
When the hyperlink property is defined for these controls the Morfik framework inserts an HTML anchor tag <a>ctrl</a> when generating the control HTML. This would make these controls appear as hyperlinks to a browser whenever their hyperlink property is set.
The new hyperlink property for the above controls could be set either through the Properties panel or using the Link button in the URLs section on the Ribbon when the form designer is active.
Contents
Figure 2: The Hyperlink Property in Properties Inspector Panel.
Figure 3: Link Button on the Form Designer Ribbon. The value of the hyperlink property is commonly set at deign-time. It is also possible to define or modify this property in the server-side of an application at run-time. Currently, it is not possible to set or modify this property in the browser code of an application. The hyperlink property can easily be used to navigate to an external website by simply copying the full target URL into the hyperlink property. However to use hyperlinks for internal navigation within a Morfik application, a page must be created so that the system can navigate to the target location. Publishing URLs and using the hyperlink property for internal navigation is an essential requirement for SEO.
Setting Up Hyperlinks
In general you will be using either a TextLabel, a Button or an Image control to act as the visual representation of a hyperlink in your application. All of the controls have a Hyperlink property which can be set to point either to a published URL for navigation within your own application or website, or to an external application which will take the user to another website. They an be set to point to other protocols such as mailto which will be handled by the browser and should bring up the user's email client to send an email to the specified address. You can set the Hyperlink property of a control either by selecting a URL in the drop down that is displayed when you click on the small arrow by the editor for this property in the Properties panel, or by clicking the Link button in the Home tab of the ribbon when the appropriate control is selected. If you click on the Link button you will get a dialog for selecting a previously published URL or manually entering one. This dialog is shown in Figure 6.
Linking your Application Pages
Figure 6: Dialog for selecting or entering the URL which you want to assign to the selected control.
You can use hyperlinks for creating an isolated link just as you can to create a menu, through the usage of a group of controls you can create navigation menus for your application.
Using Page URLs as targets for Hyperlink properties

So far it is the definition of a URL that has been discussed. Referencing a published URL in the new hyperlink property is straightforward if constant parameter values were to be passed. This is rarely the case when working with data-bound forms. To pass parameter values, Morfik allows for a special notation to be used in a URL reference to signify a data source with the following syntax:
[$DatabaseFieldName]
Examples of valid hyperlink property values are:

Products/[$
Product]
FAQ/[$FAQID] About/Public/[$Category]News/[$Title] http://ww.mywebsite.com/uses/[$UserID]
Please note that this notation is only valid for internal navigation. Another important point is that if a reference is created in this manner then the resultant URL would have high dependency on the data content which may change and render the URL as a broken link. This is particularly important if the URL is likely to be bookmarked externally. For situations like that it?s best to define a URL field in a table rather than a simple text field. This Setting Up Hyperlinks 4
way the URL value can remain the same while the description data changes.
OpenPage Function
A Page can be programmatically accessed through the use of the OpenPage function. The OpenPage function is the equivalent of the OpenForm Function function and uses a Page URL as its first parameter with an optional second parameter that is identical to the third parameter of the OpenForm Function. The second parameter is only used if the URL used in the first parameter does not follow the clean URL format. FX Code
Procedure frmRoot.Button2Click(Event: TDOMEvent); Begin OpenPage('about/contactus'); End;
BX Code Published Message Sub Button2Click(Event As TDOMEvent)

OpenPage("about/contactus")
End Sub </source> CX Code

Published Message Sub Button2Click(Event As TDOMEvent) OpenPage("about/contactus") End Sub
OnHyperlinkClick Event
All controls with the Hyperlink property have an event that is invoked whenever the hyperlink is clicked on by the user. This event can be intercepted to introduce custom behaviour for handling a particular link within an application. FX Code
Procedure frmRoot.Button2HyperlinkClick(Var Url: string; Var Handled: Boolean); Begin If Not DataValid Then Begin Handled := True; Exit; End; OpenPage(URL); End;
BX Code Published Message Sub Button2HyperlinkClick(ByRef Url As String, ByRef Handled As Boolean)
If Not DataValid Then Handled = true Return
Using Page URLs as targets for Hyperlink properties
End If OpenPage(Url)
End Sub </source> CX Code

published message void Button2HyperlinkClick(ref String Url, ref Boolean Handled) { if (!DataValid) { Handled = true; return; } OpenPage(Url); }
Related Topics
Introduction and Overview How is Morfik different? Understanding Morfik's approach to Web application layout Identifying and creating your application pages Getting to know Morfik Forms Using Forms to build your application user interface Working with Forms to add behavior and content to your application Using Controls and Widgets to add interactivity and display content Controlling the layout of your application Using Graphical Effects to enhance presentation Maintain consistent presentation through use of Themes and Styles Creating Interfaces for the Mobile Web
Back to top
OnHyperlinkClick Event
Forms
The Form is the canvas upon which you will do most of the work to create your application or website's visual interface. By placing and configuring controls on a the surface of a Form's bands you will customize it to achieve the desired look and feel. Forms can be used to create the Pages of a Morfik project or as pop ups that are presented to the user for quick interactions such as a log in request. Forms can be created in many sizes going from large ones that take up most of a Page to a small visual element that is composed together with other similar elements within a larger Form or a Page.
Figure 1: Page or Form composed from several Forms
Contents
1 Plastic Layout 2 Form Designer 2.1 How Do I: Use forms in Morfik? 3 Bands 4 Data Bound Forms 4.1 Single Forms 4.2 Continuous Forms 4.2.1 Sorting and Grouping 4.2.2 How Do I: Implement Sorting and Grouping in Morfik Forms? 4.3 Continuous Editable Forms 5 Forms Make Up Pages 5.1 SubForms 5.2 Virtual Pages 5.3 Pages
Contents
Forms 6 Form Parameters 7 Opening Forms in Code 8 Copying Forms From Another Project 9 Related Topics
Plastic Layout
The Plastic Layout is a technique in which the application user interface is successively broken into smaller functional sections by the developer based on the application logic and the graphical design of the user interface. These sections are then programmatically organized into a spatial tree structure at run time. Each node in the tree is aware of the existence, state and behavior of other nodes and can respond to layout changes (communicated as events) according to changes in content and the rules set out by the developer at design-time. In Morfik the application user interface is built using forms. Forms represent major nodes within this tree structure; however, there are other nodes that exist in the tree and are important in the layout process. A form is comprised of a series of repeatable bands. Within each band there are user interface elements such as button and container controls? A special node, Subform control, is used to link forms within this structure. Read more... Forms are visually created in Morfik using a sophisticated WYSIWYG editor which is called Form Designer.
Form Designer
The Form Designer is a specialized part of the Morfik development environment which allows you to define the appearance and structure of your project's graphical user interface. whether you are building a Web-based application or a website, it enables you to position controls on the forms that compose the interface and configure their appearance and behavior. Form and control behavior can also be programmed with the code editor, which combines a powerful text editor with a debugger. Read more....
Plastic Layout
Forms
Figure 2: A form being edited in the Morfik Form Designer.
How Do I: Use forms in Morfik?

In this video presentation you learn how to use different types of forms in Morfik in order to create rich user interfaces that are composed of a combination of static and data-bound forms. Also you learn how to switch from one form to another using Web Actions. The player will show in this paragraph Morfik Forms Basics
Bands
Forms are divided into a set of Bands. By default all Forms have at least three bands called: Header, Details and Footer. Additional bands can be created in Forms which are data bound, through the Sorting and Grouping option. Figure 1 in this article shows a diagram of a Form with its three default bands. The Header band appears at the top of the Form with the Footer at the bottom. The Details band which lies between the other bands is where most of your design work will happen, but both of the outer bands can be quite useful in completing a design which is both functional as aesthetically pleasing to the end users. A form can have one Detail band and has by default one Header band and one Footer band. But a form can have many more Footer and Header bands through the use of the Sorting and Grouping features of the Form and Form designer. Generally speaking it is unusual to see forms with more then seven bands, which imply two levels of Form Designer 3
Forms grouping, though it certainly is possible to create them.
Figure 3: A form being edited in the Morfik Form Designer.

In Figure 3 you can all three default bands indicated by a different number. In order the numbers one through three indicate: Header, Detail and Footer.
Data Bound Forms

In a project you can have forms which are data bound and others which are not. Generally, non-data bound forms will be used in order to achieve some visual design goal in creating a specific layout for the information being presented by the application. When the Form itself is selected in the Form Designer, the Form property "View mode" can be set to vmSingle, vmContinuous or vmContinuousEditable.
Single Forms
A Single Form is a Form that is displayed just as designed, be it data bound or not. The only variations you will get in the appearance of a Single Form, i.e. a Form with View Mode set to vmSingle, are those relative to page resizing and the resizing of controls based on the content that is assigned to the Caption of TextLabel Controls. Non-data bound Forms are all Single Forms and data bound Forms are Single Forms by default. When data bound, a Single Form can be used to browser through data sets one record at a time, search for a specific record. If bound to a data source that references a single table it can also be used to edit or create a new record. All this functionality can be made available without coding if the developer chooses to display a Navigation Bar on one of the edge bands of the Form (Header or Footer).
Bands
Forms
Continuous Forms
Continuous Forms will replicate the controls which have been placed in its details band for each record in within data page for the data source to which the Form is bound. What this means is that it will visually transform, replicating those controls and their formatting and thus display a list. Once the the number of replicated control sets reaches the number specified in MaxRecordsPerPage the Form will stop replicating and will be complete. You can navigate to other data pages using either a Navigation Bar or the navigation methods available in the Form class. In as much as it displays a listing, but also has bands, a Continuous Form could be considered as a hybrid of an advanced data-grid and a Report. It can display in row-form a set of fields from multiple records. Of fundamental importance is to realize that both Single Forms and Continuous Forms are native to the browser and appear just like normal web pages. That is, any type of browser on any platform can view them. They do not any require any type of plug-in. In contrast to Single Forms, a Continuous Form can be considered as a hybrid of an advanced data-grid and a Report. It can display in row-form a set of fields from multiple records. It is from this perspective that a Continuous Form has some unique properties and features. It is possible, but not necessarily useful to anyone to display a thousand records, as this would lead to a very slow download time and an extremely large viewing page. Therefore, the most important feature is that you must define how many records are simultaneously displayed. The primary property that defines this limit is MaxRecordsPerPage. The power of a Continuous Form is that is represents the ultimate generalized version of a Data Grid. In a Data Grid, the data is displayed in a table-like manner with each record being displayed in a different row. However, with Continuous Forms, each record can be a fully-detailed Form in its own right each with its own data, formatting, and interactivity controls. The other advantage of a Continuous Form is that you only define the Form once and the Morfik Framework will automatically repeats the band for every record, up to the limit as defined by the value of the MaxRecordsPerPage property of the Form. Note 1: When you wish for users to enter or edit data it is best to use Single Forms as the Morfik Framework provides direct support for doing so. Single Forms, with the use of the Navigator, can be made not browse, insert, delete and edit records without any coding.
Note 2: For a Continuous Form, there is a one-to-many relationship between the controls that are placed on the Form (or Report) Canvas at design-time and those that appear at runtime.
To add the controls to allow a user to navigate between records, you can use the Form's built-in Navigation Bar. The Navigation Bar can be enabled and configured on either of the edge bands or even on both of them through the NavigationBar property that is available when one of these bands is selected.
Figure 4: Screenshot of a navigator bar in the Footer a form at design time.
Continuous Forms
Forms Sorting and Grouping

Sorting and grouping operations in Morfik are mostly defined at design time for the creation of the appropriate bands and band-contained controls. While this makes it extremely easy to create a grouped and/or sorted view of a data set, it also makes it a non-trivial task to re-sort the data presented at run time. One point which is very important and should always be considered is that when working with Web applications, your data source is not a local one, quite the opposite. You data source might be on the other side of the planet. This precludes client side sorting and grouping from being a viable option, unless dealing with very small amounts of data. Generally, the best way to offer differently sorted and grouped views of the same data is to use different queries to filter, sort and group the data while still on the server.
Figure 5: Sorting and Grouping dialog in the Morfik Form Designer. How Do I: Implement Sorting and Grouping in Morfik Forms?
In this video you will learn how to use the Sorting and Grouping feature of Morfik forms to produce sophisticated data-driven web pages. You will see how data from two tables (Categories and Products) are presented inside a Query and list of products are Sorted and Grouped based on their categories.
Forms Sorting and Grouping
Sorting and Grouping
Forms
Continuous Editable Forms

Continuous Editable Forms were introduced in Morfik 2.1 as a new View Mode which enables continuous Forms to be editable, as the name suggests. When you set a form's View Mode property to vmContinuousEditable you just need to ad a Navigator Bar to the form, with the data manipulation buttons present and it will take care of activating those functions on the form. When a Form is configured as ContinuousEditable the Details band is doubled. The visual Form Designer will show two versions of the Details band. One will be labeled as always and the second one will be labeled Details Band (Edit mode). This second Details band is used to design what the form will look like when data is being edited In Figure 6 you can see a Form that has been configured as ContinuousEditable showing two versions of the Details band. The band indicated by the number 1 is the regular version while the one indicated by the number 2 is the Edit Mode version of the band.
Figure 6: A ContinuousEditable form at design time.

In Figure 7 you can see the same form that is shown in Figure 5, but both versions of the details band have been extended so that their full descriptions can be shown to the left of their area in the Form Designer.
Figure 7: The same ContinuousEditable form displayed in Figure 6, but with both versions of the Detail band stretched to show their labels in the Form Designer.
Continuous Editable Forms 7
Forms
When designing a Form that will be used as ContinuousEditable it is recommended that both versions of the details band have height as the Edit Mode version of the band will appear over the regular one whenever the Form enters data editing mode. For more on Continuous Editable forms refer to this article.
Forms Make Up Pages

In Morfk you assemble multiple Forms together to create the equivalent of regular Web pages. These Forms are grouped within a Page object that uses SubForm controls to create the layout for arranging them. When all Forms are assembled into the visual representation you will have for your content, you have a complete page.
SubForms
A Subform is a special type of control which defines an area in which a form can be inserted into another form. SubForms are very important as they make it possible for the developer to breakup the design of a page into smaller parts. SubForms allow several different forms to be combined to make up a page. As you change which forms get inserted into what SubForms of an outermost form, you see different states which your application or website can assume. These different states that your application can assume are called virtual pages. Once you have established which of these states should be reproducible on demand by your end users, you can publish URLs for them.
Virtual Pages
A Morfik application is always composed of a single Web page, from the perspective of the Web browser. This page, through Ajax-based techniques morphs itself as it's state changes. In Morfik the state of an application user interface at any given point in time is considered to be a virtual page. Whenever the state of an application user interface changes in response to user input, the new state is thought of as a new virtual page. Read more...
Pages
Morfik Pages are the "materialization" of virtual pages that represent fixed states that your application will need to reproduce when required by the user. This is a technical way of saying that they represent what the end users of a Morfik application or website will perceive as web pages in their browsers. Read more...
Form Parameters
Form parameters are shared between the server side and the browser side of a Form. Every time you create a Form in the Morfik Workspace you are actually creating two common object classes in your code: one for the server and one for the browser side of the application. These two entities have very different behaviors at runtime but which, at the same time, are very tightly integrated. At runtime, the Morfik Application Framework makes sure that the correct, updated, values of these parameters are transferred from one side to the other. This ensures
Forms Make Up Pages 8
Forms
that no matter where your code is running those parameters hold the correct, valid, values. Read more ...
Opening Forms in Code

From time to time an XApp running in the browser needs to display new content to the user. This is often in response to some action by the user, for example clicking on a link. While there are many ways of displaying new content in an XApp, probably the most common way is to open a form. When a form is opened, HTML code representing the form is downloaded from the server, and then displayed in a specified area of the page. The opening of a form often happens implicitly, for example when the user clicks on a control whose hyperlink property has been set. However, forms may also be opened explicitly in browser-side code by use of the OpenForm function. For example, suppose we are writing a content management system. A form 'frmArticle' displays the content of an article, and includes a button 'EditBtn' for making changes to the text. When the user clicks on the Edit button, the XApp should first check the user's privilege level. If the user is a guest, a form 'frmEditingNotAllowed' should be displayed, stating that he/she is not permitted to edit the article. Otherwise, the user should be shown a form 'frmEdit' for editing the article's content. Certain options on frmEdit should only be visible to administrative users. The event handler for 'EditBtn' would look like this:
FX Code
Procedure frmArticle.EditBtnClick(Event: TDOMEvent); Begin Case UserPrivilegeLevel Of eGuest: OpenForm('frmEditingNotAllowed', eStandard: OpenForm('frmEdit', eAdmin: OpenForm('frmEdit', End; End;
'POPUP', 'Parent:Subform1', 'Parent:Subform1',
'"Modal=True"'); '"ShowAdvancedOptions=False" '"ShowAdvancedOptions=True"'
BX Code
Published Message Sub EditBtnClick(Event As TDOMEvent) Select Case UserPrivilegeLevel Case eGuest : OpenForm("frmEditingNotAllowed", Case eStandard : OpenForm("frmEdit", Case eAdmin : OpenForm("frmEdit", End Select End Sub "POPUP", "Parent:Subform1", "Parent:Subform1", """Modal=True""") """ShowAdvancedOptions """ShowAdvancedOptions
CX Code
published message void EditBtnClick(TDOMEvent Event) { Switch (UserPrivilegeLevel) { eGuest: OpenForm("frmEditingNotAllowed", eStandard: OpenForm("frmEdit", eAdmin: OpenForm("frmEdit", } }
"POPUP", "Parent:Subform1", "Parent:Subform1",
"\"Modal=True\""); "\"ShowAdvancedOptions=Fals "\"ShowAdvancedOptions=True
The first OpenForm statement specifies that frmEditingNotAllowed should be displayed as a popup form, and that the popup form should be displayed modally. The second and third OpenForm statements specify that frmEdit should be displayed in a subform 'Subform1' of the parent form, with form parameter 'ShowAdvancedOptions'
Form Parameters 9
Forms
having a value of 'False' and 'True' respectively. The behaviour of the parameter ShowAdvancedOptions would then be implemented in the browser-side code of frmEdit like so:
FX Code
Procedure frmEdit.WebFormReady(Var Ready: Boolean); Begin DeleteBtn.Visible := ShowAdvancedOptions; // ... other advanced options... End;
BX Code
Published Message Sub WebFormReady(ByRef Ready As Boolean) DeleteBtn.Visible = ShowAdvancedOptions ' ... other advanced options... End Sub
CX Code
published message void WebFormReady(ref Boolean Ready) { DeleteBtn.Visible = ShowAdvancedOptions; // ... other advanced options... }
For more information about the OpenForm function, see here....
Copying Forms From Another Project

While the best way to add Forms to multiple projects is have them in a Package and add that package to the project, it is possible to copy into the project you are working on, forms from another project. This a very simple operation which will require you to run two instances of Morfik at the same time. In one instance you should open the project which contains the form you would like to copy and in the other instance you should have the project into which you want to copy that form. Once you have the two projects open, in the Project View of the Morfik that contains the form you want to copy, you select the form by single clicking on it and then either select Copy from the context menu (right clicking on the form thumbnail) or use the keyboard shortcut for Copy. With that done you can switch to the second instance of Morfik , which will contain the target project and issue a Paste command in the Project View, through the context menu or by clicking on the Paste button of the Home tab of the Ribbon. The form should now be copied. Note: It is important to note that a form that is copied from another project might contain references to resources such as images. These resources will not be copied when you copy the form. If you wish the form to continue to reference these resources you will need to add them to the new project by clicking on the Project Resources button in the Project tab of the Ribbon and then clicking on the Add Resource button in the toolbar on the top portion of the Resource Explorer window that is displayed.
Opening Forms in Code
10
Forms
Related Topics
Introduction and Overview How is Morfik different? Understanding Morfik's approach to Web application layout Identifying and creating your application pages Building navigation menus and linking your application pages Using Forms to build your application user interface Working with Forms to add behavior and content to your application Working with Continuous Forms at Run Time Using Controls and Widgets to add interactivity and display content Controlling the layout of your application Using Graphical Effects to enhance presentation Maintain consistent presentation through use of Themes and Styles Creating Interfaces for the Mobile Web
Back to top
Related Topics
11
Using_Forms_to_build_your_application_user_interface
Both the Morfik Framework and the development environment are designed to make it easy for the user to decompose the problem of creating a web interface into small and easily manageable parts. This is accomplished through the use of pages that are assembled from Forms. In order to create a good-looking and efficient interface for your web-based application you need to figure out the best way to break down your interface into small Forms and put them together as parts of Pages. You also need to decide how and where you will be using the Form's bands to display relevant data or achieve desired graphic results. There are two major factors that will influence your decision: Data Sources and Appearance.
Figure 1 A Page designed by using bands and composing several forms through the use of SubForm controls.
Contents
1 Breaking up your design into Forms 2 Design choices based on data sources 2.1 Handling Master-Detail Relationships 2.2 Displaying lists 3 Design choices based on appearance 3.1 Foregoing a Header Band 3.2 Foregoing a Footer Band 4 Related Topics
Breaking up your design into Forms

In Morfik, each Form has one data source and while at first this can seem a little limiting, in does in fact allow you to draw information from many tables using a query. You can also bring data into your Forms using the Repeater control which offers a subset of the form's functionality and is useful to display small list of related data
Contents 1
Using_Forms_to_build_your_application_user_interface within a form. These elements make the displaying of information from multiple tables pretty straightforward, leaving the work of assembling all the data into a single data set to the database objects of your application. The diagram in Figure 2 shows a Page that is divided into five different areas, two of them represented by a its native Header and Footer bands and three others represented by three SubForm controls and marked as: Side Bar, Featured Items and Content.
Figure 2: The areas highlighted in red indicate where SubForm controls are used to break up the Page into smaller areas, each of which can be designed as a separate form.
The difference between the layouts shown in Figures 1 and 2, for example, are related to the desire to have content that is considered special in some way appear at the very top. The natural way to implement such a scenario in Morfik is to use a SubForm control and embed a form which recovers and displays the required information in that particular position. The decision to embed a form in a particular position is generally more closely related to either aesthetic or data retrieval reasons, but in cases such as this both play a very important role. The form to be embedded at the Featured Items region will apply some sort of filter on the whole body of content to determine which items are to be featured. Because these items are supposed to be worthy of special attention, the design should be different enough from the rest of the page to draw attention. In the layout shown in Figure 2, the Featured Items section runs horizontally across the top of the area generally occupied by content. This would might be a good opportunity to employ a continuous form with columns, such as that employed in the home of Morfik's BookCollector sample project. This case highlights both major reasons why you would make a section of your "page" or outermost form into an embedded form: Selecting a new data source, and having data shown in a special design such as in columns.
Breaking up your design into Forms
Design choices based on data sources

While all bands of a Form share the same data source, they are not restricted to displaying the same information. In fact, if you decide to group your data through usage of the Grouping and Sorting option of the Form Designer, you will be given the opportunity to create new bands in your Form in order to display information related to each individual grouping. The Morfik development environment allows you to specify up to ten fields by which you can group and sort the data that will be displayed in a Form. The Morfik Framework automatically uses this information and adds the appropriate clauses to the SQL commands for the data source in order to recover the desired data. This greatly simplifies the task of creating queries and allows you to choose different forms of presenting a data set, without having to create multiple query objects.
Figure 3: The Form Band that can be seen at the top, with the text STITLE is what is known s a group header. This kind of header is added to the Form whenever you choose while creating a grouping or sorting option.
In the case of the form displayed in Figure 3, we wanted to have the title for a section of articles to be displayed above their summaries. We could not, however, use the regular header to do so, because the form must be a continuous form in order to display the titles and summaries for all articles. This precludes us from binding controls in the header to data fields as there would be no way to specify which of the records would be the source of the displayed information. To work around this we create a Group Header which will take the name of the field by which data is to be grouped. In such a group, all records will have the same value for that specific field and therefore it can be used in that particular header.
Design choices based on data sources
Figure 4: Same form that appears in the previous figure with the Group Header extended to show its name.
Handling Master-Detail Relationships

There are times, however, when you have a situation referred to as a Master-Detail Relationship between datasets. It is very simple to handle these situations with Morfik, though it might not be immediately evident to a new user. Morfik makes it quite easy to implement Master-Detail Relationships through the use of dynamic or parametric URLs. By linking to a parametric URL and passing it a different parameter you can display different data sets from the detail data source. When working with continuous forms you can assign to certain controls links with field references embedded. The field values for the specific records will get added to the URLs at runtime and will effectively become parameters for URLs that were defined as having them. This feature makes it easy to have a SubForm control which loads different data sets based on a value of a field in another data set. As of Morfik 3.x you can also use the Repeater control to implement the display of a set of records. Depending on the situation this option can help to simplify the application's overall composition by helping cut down the number of small forms required to create each page. This control will also offer a performance advantage in comparison to the use of a form as its implementation requires less round trips to the server for all the data to in place.
Displaying lists
Morfik forms have a view mode which is specifically designed for displaying lists of items. In this mode, which is set by choosing vmContinuous in the View Mode property of the form, all controls inserted into the Details band will be repeated once for each record in a data page. These records will be retrieved from the forms data source and the exact number of records will be defined by the MaxPageSize form property. Read more...
Handling Master-Detail Relationships
Continuous forms are ideally suited to presenting any and all kinds of lists to users. These can go from having the plain appearance similar to a sophisticated ListBox control from to very complex lists with varied control types for displaying different kinds of information or even recursively embedded lists to provide a view into a hierarchical data structure.
Figure 5: This form is used to provide a simple list of records in a table, one line/row for each record. The form that is shown in Figure 5, above, is intended to display information about an article or document being published on a website. Notice how different bits of information about the article are arranged around the form to provide clear and immediate access to everything a user might need to decide to go ahead and read an article in full. This form does not follow the mold of a plain list, but arranges information in multiple lines using up more vertical space in order to provide the application's user with a more meaningful sample of the articles.
Figure 6: This form is used to provide a structured view of information about articles. The information is arranged in fo lines/rows of controls, but the bottom TextLabel control will expand to multiple lines if the data so requires.
Design choices based on appearance

When designing your application's interface, there are choices that are dictated solely based on aesthetic considerations. For example, in some situations you will want to use the Header band to highlight titles for sections of a virtual page with different formatting from that of the Detail band. In this case, even though bands are generally related to how you use and display information from your data source, they become a handy design feature. In fact, it is sometimes easier for you to envisage how your application will be divided up into Forms, based on how it will look. Once you know how your application should look to the end user, the data sources for each part start to become almost obvious.
Displaying lists 5
If you are building a corporate website or an internal system, there is no need to dynamically compose your header from a database. You already know the name of your company, you already have its logo. In most of these cases the best thing is to go ahead and just create a header with the information you want to display at design time. This will, actually, provide you with an exact picture of how your application will look, right in the form designer. Website footers are used most often as an area in which to place a series of links and information which, though not part of the core functionality of the application or website, should be available to the end user. This generally includes links to contact pages, copyright information, privacy statements, etc.
Foregoing a Header Band

While a form's Header band offers a convenient way to implement a header or top banner for websites, it does not allow any content to bleed into the neighboring band. This is actually a characteristic of all form bands and is at times a good reason to implement a header at the top of your form's Detail band, instead of using the Header band. From a strictly visual point of view you can achieve the same results with rectangles and containers as you would with formatting the Header band itself, but you will be able to position controls which seem to crossover one section to the other just by being at a "shallower" z-order level than the controls implementing the header.
Figure 7: This page's design creates the website header within the Details band of the current form. Notice the image bleeds across the "boundaries" of the "header" and into the content area. In the picture you see in Figure 7 there is an image that crosses into the area that can be considered to be the Header that is going to be displayed in the application. This is only possible because the form is not making use of the actual Header band.
Design choices based on appearance 6
Placing controls that are not intended as content, but as a header, inside the Details band of your form or page can indicate the need to include one or more SubForms in the same band for displaying actual content, as more often then not it will come from the retrieval of records in a database.
Foregoing a Footer Band

The same way you can leave out of your design the presence of a Header band, you can leave out the Footer band. You can use controls inside the form's detail band to effectively present the users of your application or website with the contents of a page footer without using the native band. This is however a scenario that is far less likely to occur as the footer is rarely an important component of your overall design, especially since in most cases it is only visible after you have scrolled to the bottom of the page. Should you believe you have reason for not using the native Footer band of a Morfik form you can use the Vertical Placement property of a control to make it "stick" to the bottom of the form as it grows as appropriate for its content. This will allow you to create a footer that is always displayed at the very bottom of the page, regardless of how long the page is.
Related Topics
Introduction and Overview How is Morfik different? Understanding Morfik's approach to Web application layout Identifying and creating your application pages Building navigation menus and linking your application pages Getting to know Morfik Forms Working with Forms to add behavior and content to your application Using Controls and Widgets to add interactivity and display content Controlling the layout of your application Using Graphical Effects to enhance presentation Maintain consistent presentation through use of Themes and Styles Creating Interfaces for the Mobile Web
Back to top
Foregoing a Header Band
Working_with_Forms_to_add_behavior_and_content_to_your_application
Forms are a fantastic tool in Morfik as they can be combined and recombined in a Morfik application in order to achieve both design and functional goals. Forms allow you to partition your design into small parts which, once you are familiar with their usage and potential, can be combined in new and innovative ways to enhance how your application works.
Contents
1 Using forms as controls 2 Popup Forms 3 Form injection 4 Related Topics
Using forms as controls

Forms can be, and very frequently are, used to allow the exchange small sections of the overall Page in order to access a specific function or view a different dataset. In some cases forms are used in combination with other controls to achieve interesting visual effects. You can, for example, combine a SubForm control, a set of buttons and an equal number of elements into a set of forms to implement what looks like a tab-like, multi-page visual simulation such as those frequently used in option dialogs in desktop applications. Though Morfik has a similar control, the usage of forms in a SubForm control makes it very easy to use different data sources for each of the "tabs" being displayed. Morfik's visual effects features make it very simple for the developer to format the button control, for example, to resemble a "tab" such as those used to index folders. In fact, an example of this very technique can be seen in use in the Morfik BookCollector sample application. In BookCollector, a series of Button controls formatted to look like tabs are placed across the top portion of the application's home page, offering the ability to choose a genre to browse. One of the buttons, however, returns the user to the starting home page which shows books in more detail, but only two at a time. You can see this design in Figure 1, which shows the BookCollector sample application.
Contents
Figure 1: BookCollector application with a button strip that toggles which form is displayed within the central area of the Page.
Popup Forms
Popup forms are very easy to use in Morfik, differently from just about any other web development tool. A single parameter added to an OpenForm function call is all that is necessary to make a form appear as a popup. This allows Morfik developers to pursue design options which most other developers would avoid due to the amount of work involved. Popup forms are used in Morfik in several kinds of activities: to provide more detail about a data element selected within a page, for login in user authentication schemes and for general data entry. The first option is by far the
Using forms as controls 2
least frequently used as consistent web interfaces will tend to adapt to changes in embedded information instead of relying on popups. The other two uses, however, are very common. Morfik's Authentication and Access Control Package offers a pre-built user sign-in form that can be displayed as a popup when the user chooses to be authenticated.
Figure 2: Popup sign-in form implemented by Morfik's Authentication and Access Control Package There are no limitations on the size or complexity of forms that are displayed as popups. This means that if the developer should choose to do so, large portions of an application's interface can be implemented in the form of popups. Popups can, for example, be used for data editing and input while the underlying page is used solely for data presentation. This approach requires the presence of links in the data presentation interface that invoke the popup forms for editing existing data or the input of new data. In order to display a form as a popup all you need to do is to specify the word "POPUP" as its target in a call to the OpenForm method, as shown in the following code snippet. FX Code
Procedure Index.SiteManagementOptionClick(Event: TDOMEvent); Begin If UserIsAuthenticated Then OpenPage('Admin', '"openmode=refresh"') Else OpenForm('UserSignIn', 'POPUP', '"title=Sign In", "modal=true"'); End;
Popup Forms
BX Code
Published Message Sub SiteManagementOptionClick(Event As TDOMEvent) If UserIsAuthenticated Then OpenPage("Admin", """openmode=refresh""") Else OpenForm("UserSignIn", "POPUP", """title=Sign In"", ""modal=true""") End IF End Sub
CX Code
published message void SiteManagementOptionClick(TDOMEvent Event) { if (UserIsAuthenticated) { OpenPage("Admin", "\"openmode=refresh\""); } else { OpenForm("UserSignIn", "POPUP", "\"title=Sign In\", \"modal=true\""); } }
Form injection
Another interesting technique to add interactivity to your application or website's interface is to use form injection. When using this technique you position very thin SubForm controls in your forms so that when appropriate you can display a new form within them, making them grow. When you are through with the new forms, closing them can make the SubForm controls contract and disappear until a new form is opened within them.
Figure 3: A form with two very thin SubForm controls indicated by the arrows. In Figure 3 you can see a form from the Ajax for Small and Medium Business sample that is available from the Morfik website. At runtime the application causes the form shown in Figure 4 to appear within the top most SubForm shown in Figure 2.
Form injection
Figure 4: Form which will be injected into the thin SubForm indicated in Figure
2. In figure 5 you can see a "page" which contains the form which is shown in Figure 2.
Figure 5: Page containing the form that is shown in Figure 2, at runtime.

By way of a small snippet of code in the OnClick event handler for a TextLabel control the form shown in Figure Form injection 5
3 gets inserted into one of the SubForms in the first form. The result of this operation is shown at runtime in
Figure 6.
Figure 6: Same "Page" shown in Figure 4, but now with the form show in Figure 3 inserted into the form that is shown in Figure 2, at runtime. In order to achieve this result, the following code was assigned to the OnClick event handler for one of the TextLabel controls in the form shown in Figure 3. Implementing this sort of behavior in your application's interface can yield a highly interactive application which provides a comfortable interface to the end users. A form appears on screen when it's needed, exactly where it is needed, and goes away later. This mode of interfacing with the end user for data entry is much less "disruptive" to the application's interface than bringing up a popup form. FX Code
Function "Staff ToDos Subform".Container1Click(Event: TDOMEvent); Var Inx : Integer; Begin Inx := Container1.BandIndex; EditContainer.BandIndex := Inx; SubForm1.BandIndex := Inx; ToDOIDLabel.BandIndex := Inx;
Form injection
ToDosID := ToDoIDLabel.Caption; NewToDo := False; OpenForm('Staff ToDos Details Form','Staff ToDos Subform:SubForm1(' + Container1.BandIndex.ToStr End;
BX Code
Published Message Sub Container1Click(Event As TDOMEvent) Dim Inx As Integer Inx = Container1.BandIndex EditContainer.BandIndex = Inx Subform1.BandIndex = Inx ToDoIDLabel.BandIndex = Inx ToDosID = ToDoIDLabel.Caption NewToDo = false OpenForm("Staff ToDos Details Form", "Staff ToDos Subform:SubForm1(" + Container1.BandIndex.To End Sub
CX Code
published message void Container1Click(TDOMEvent Event) { Integer Inx; Inx = Container1.BandIndex; EditContainer.BandIndex = Inx; Subform1.BandIndex = Inx; ToDoIDLabel.BandIndex = Inx; ToDosID = ToDoIDLabel.Caption; NewToDo = false; OpenForm("Staff ToDos Details Form", "Staff ToDos Subform:SubForm1(" + Container1.BandIndex.ToSt }
Notice in the call to the OpenForm function in the previous code snippet, the target parameter is not a straight up form and subform name combination. The target in this case has an Index in its composition because the target form is included in the details section of a continuous Form. This means that at run time there will be several instances of that particular control in the page at any one time so we must identify which of those instances we wish to use as the target destination for the call to OpenForm. This use of an indexed target is not uncommon in Morfik programming and is in fact a necessity when dealing with SubForms in the details Band of a continuous form.
Related Topics
Introduction and Overview How is Morfik different? Understanding Morfik's approach to Web application layout Identifying and creating your application pages Building navigation menus and linking your application pages Getting to know Morfik Forms Using Forms to build your application user interface Working with Continuous Forms at Run Time Using Controls and Widgets to add interactivity and display content Controlling the layout of your application Using Graphical Effects to enhance presentation Maintain consistent presentation through use of Themes and Styles Creating Interfaces for the Mobile Web
Related Topics
Back to top
Related Topics
Using_Controls_and_Widgets_to_add_interactivity_and_display_content
When you first create a form, it is just a an empty rectangle. In order for forms to display information to the users of your application or website, it needs to have mapped out what information to display, where and in what form. In order to provide this map to a form, we place controls and widgets in its design surface. The same concepts apply to the reports in your project. Controls are the most basic building blocks of the interface of your website or application. Controls are placed directly onto the design surface of forms or reports, inside one of the document's bands. Morfik offers a set of controls which are theme-aware and that will change their appearance when you change the project's themeguaranteeing that your project has a consistent look, always. Widgets are a level up from controls, being built from them. Every widget is composed of one or more controls, customized to work differently from how the base control(s) work by default. Read more...
Contents
1 Basic information display 2 Basic interactivity 2.1 Data navigation 2.1.1 Navigating through pages 2.1.2 Navigating through records 3 Data entry 3.1 Data entry controls 3.2 Navigation Bar for data entry 3.3 Functionalities in-a-Box 3.3.1 Widgets: user created controls 3.3.2 More widgets 4 Related Topics
Basic information display

For most basic information display, just two controls will suffice: TextLabel and Image. These two controls allow you to display any textual and graphic information and are generally responsible for most content display in all Morfik applications and websites. For enhanced design capabilities two other controls are added to the mix: Rectangle and Container. The Rectangle control is exactly what its name suggestsnothing more than a geometric shape which can assume any color and level of transparency. Rectangles also have very flexible configuration options for displaying borders. You can choose which sides to display borders on, as well as which width, color and pattern. The Container control, while looking very much like a Rectangle, has the added capability of containing other controls, hence the name.
Basic interactivity
Using Morfik we can start to create basic user interactivity using the same base controls involved in the basic information display, provided we just want to let the user change how and what information is being displayed. By assigning a URL to the link property of a TextLabel or Image control you can provide ways for the user to navigate to different pages. If a page to which the user is navigating to differs from the one that is currently
Contents 1
displayed in the browser by only the contents of a SubForm control, only that SubForm will get reloaded. This is handled automatically by the Morfik Framework and provides a mechanism for allowing the user to choose different data sets to view. There developer does not even have to resort to writing code for this to occur. However, by adding a little bit of code to the mix it is possible to have small portions of the page change in response to where the user is moving the mouse pointer, or in response to clicks on specific controls. One of the most useful techniques for adding such bits of interactivity to a page is to simply toggle the state of the Visible property of a TextLabel or Container. The Morfik Framework automatically adjusts the position of controls which would be under the control which is becoming visible or invisible, providing a good visual result for minimum effort. When a page changes its state being so altered it becomes in effect a different virtual page.
Figure 1: A list of Frequently Asked Questions from the Morfik.com website. In Figure 2 you can see the same list of Frequently Asked Questions that is shown in Figure 1, but this time you can also see the answer to the first question. This answer is displayed by making visible a Container control which holds the TextLabel control for the answer and an "X" image in the bottom right hand corner when the TextLabel control with the text for the question is clicked on. To hide the answer of a particular question you click on the red "X" below and to the right of the answer.
Basic interactivity
Figure 2: Same list shown in Figure 1, but with the answer to the first question visible.
Data navigation
While technically the Navigation Bar isn't considered a control or a widget it certainly looks like it. The Navigation Bar looks like a widget that was built from several Button and TextLabel controls. It lets the user navigate through a data set without ever doing a page reload. Read more... While this is a simple concept, the fact that the navigation does not require a page reload makes this a useful feature for adding interactivity to your application. By simply configuring a form to display a properly configured Navigation Bar you can allow the user to browse through different data sets. The Morfik Framework takes care of all the database connectivity and data set paging that is necessary to implement a smooth navigation experience for your users.
Navigating through pages
The Navigation Bar has options that work on the page and record levels. When you are building an interface to display information from multiple records in any portion of the screen, it makes sense to include a Navigation Bar configured for page-based navigation on that particular form.
Data navigation
Page-based navigation options will request specific data pages from the server, as needed, when the user clicks on any operation. The actual number of downloaded records will match the value set in the MaxPageLength property of the form in question.
Navigating through records
As previously mentioned, the Navigation Bar has options that work on the page and record levels. When you are building an interface to display information from a single record, at a time you can add a Navigation Bar configure for record-based navigation on that particular form. Record-based navigation options will request specific data pages from the server as the user navigates through the records. Records are always downloaded to the browser in a page-by-page manner. This means that the browser portion of your application will not be requesting more data from the server until your user attempts to navigate beyond the number of records already downloaded (in any direction).
Data entry
The next level of user interactivity is handling data entry. While websites are 95% built around displaying information, they do require some data input. Web-based applications are, generally, much more interactive in the sense that they are built to allow the user to store and manage information. In many cases we are talking about business information as web-based technologies become the standard for creating business systems in the corporate world.
Data entry controls

Most of your data entry needs in Morfik will be covered by using a the TextEdit and the DateTimeEdit controls. These controls handle tasks such as entering single line and multi line text, password entry and date time input. In addition to these two controls you can use the ComboBox control very effectively to allow the user to choose an option for a specific field. CombBox controls can provide an easy way to look up information in a table for data entry into another one. When used in this manner a ComboBox control is frequently referred to as a Lookup Combo. Another control which can be of interest in data entry situations is the Checkbox control which provides a simple and graphically appealing mechanism for choosing the value of a binary choice.
Navigating through pages
Navigation Bar for data entry

As previously stated, the Navigation Bar is not a control or a widget but a feature of the form. It does, however, look like a widget and behaves much as a set of controls. The Navigation Bar can be configured to display options that enable the user to insert, delete and edit records, without requiring any coding by the developer. Read more...
Figure 3: Navigation Bar with buttons for data manipulation.
In Figure 3 you can see the Navigation Bar's buttons that are related to editing data. The highlighted buttons invoke the following functions, from left to right: Edit current record Submit/confirm edit Cancel edit Add record Delete record
Functionalities in-a-Box
Widgets are composed of controls and supporting code to provide some basic, pre-defined functionality. They allow you to combine several controls into what essentially becomes another control, available from the ribbon within your project. This can be a powerful resource to quickly add functionalities to an application. A good example of this is the Login Bar widget that is part of the Authentication and Access Control Package available from the Morfik Developer Assist program. When you drop this control onto a form it immediately adds user management and authentication functions to the application, without the user having to write a single line of code. Read more...
Figure 4: Login Bar widget
Navigation Bar for data entry

Morfik3 Users Manualx Parte 001

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Morfik3 Users Manualx Parte 001

Încărcat de

Drepturi de autor:

Formate disponibile

Introduction

The old way

The Morfik way

A great tool for browser applications

A great tool for server applications

A great tool for browser applications

A great tool for design

Aggregating the Web

The Mobile Web

A new era in web development

The Mobile Web

Pages as first class objects

Explicit support for mobile devices

Pages as first class objects

New API for Design time behavior of Packages

Abstract Data Access Classes

Native Database Connectivity

Continuous Editable Forms

The Container Set Control

The Repeater Control

Internationalization and Localization

The Container Set Control

Support for JSON added

Animation and special effects

Internationalization and Localization

Edit Masks for TextEdit Controls

International character set support in Reports

Morfik is adding support for the following languages:

Server Side Optimizations

Miscellaneous compiler and framework changes

International character set support in Reports

Miscellaneous compiler and framework changes

Other, more specific groups

Tips For Delphi Developers

Visual Basic developers

Microsoft Access developers

A single tool for all web development needs

First Generation web applications

Ajax enters the scene

Not a new technology

Ajax gets noticed

First Generation web applications

The evolution of web applications

The server side evolves

Web_Application_Development_-_A_General_Overview Adobe Flex and Flash

Adobe Flex and Flash

Rich Internet Applications

Ajax and web standards

The coding of Ajax applications

JavaScript Synthesis Technology

The Web as an operating system

The Web as an operating system

Understanding Morfik application technology

One tool, single language

Understanding Morfik application technology

Morfik Integrated Development Environment

Understanding Morfik application technology

Server and browser technologies used in Morfik applications

Rapid Application Development

It's all about productivity

Morfik Design Tab Theme Gallery

Morfik Debug Browser

An overview of Forms and Controls