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.


basic-application-layout-1.png
Figure 1: Page or Form composed from several Forms


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....

form-designer-editing-form.png
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 grouping, though it certainly is possible to create them.

form-object-form-being-edited-three-bands.png
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).

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.


form-object-navigator-bar-records-edit.png
Figure 4: Screenshot of a navigator bar in the Footer a form at design time.


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.


form-designer-sorting-grouping-two-fields-no-bands.png
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.


The player will show in this paragraph

Forms Sorting and Grouping

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.

continuous-editable-form01.png
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.

continuous-editable-form02.png
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.


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 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', 'POPUP',           '"Modal=True"');
        eStandard:  OpenForm('frmEdit',              'Parent:Subform1', '"ShowAdvancedOptions=False"');
        eAdmin:     OpenForm('frmEdit',              'Parent:Subform1', '"ShowAdvancedOptions=True"');
    End;
End;


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' 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;


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.

Related Topics


Back to top