Log in
Morfik Site |Forums |Blogs

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.

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.


working-with-forms-to-add-behavior-forms-tabs_M3.png
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 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.


working-with-forms-to-add-behavior-sign-in.png
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;

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.


working-with-forms-to-add-behavior-injecting-forms.png.png
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.


working-with-forms-to-add-behavior-form-to-inject.png
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.


working-with-forms-to-add-behavior-form-at-rt.png
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 3 gets inserted into one of the SubForms in the first form. The result of this operation is shown at runtime in Figure 6.


working-with-forms-to-add-behavior-form-injected-rt.png
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;
    ToDosID                 := ToDoIDLabel.Caption;
    NewToDo                 := False;
    OpenForm('Staff ToDos Details Form','Staff ToDos Subform:SubForm1(' + Container1.BandIndex.ToString + ')', '');
End;

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


Back to top


© 2012 Morfik Technology. All Rights Reserved.

What links here Related changes Special pages Printable version Permanent link Privacy policy About Morfik Wiki Disclaimers Powered by MediaWiki