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.

form-designer.png
Figure 1 Form Designer


Forms

The Form is the single largest visual object you can use to create your application with Morfik. The Form is the canvas upon which you will 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 a full fledged web page or a small visual element that is composed together with other similar elements within a larger Form, to create a page. Morfik is unique in how it allows absolute and flow layout elements live in harmony within the same page while offering the best WYSIWYG visual design capabilities in the industry. Read more...

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

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

Starting with a Blank Form

A form is like a canvas where you paint your application or website's interface using controls and visual effects. By combining controls you can create essentially any web page you want or reproduce a design pattern you have seen elsewhere.

form-designer-new-blank-form.png
Figure 2 Recently created form in the Morfik Form designer.


When you create new form, it comes up totally blank in the Form designer as shown in Figure 2. While this form already has three bands, the Header and the Footer bands are configured with zero height by default. You can use the handles above and below the Detail band to resize these bands into view. If you resize both bands so that they become visible you will have a form that is similar to that shown in Figure 3.

form-designer-new-blank-form-header-footer.png
Figure 3 Recently created form in the Morfik Form designer with both Header and Footer bands visible.


When you start to design your form you should first consider how your are going to use the its bands. Bands can have visual effects applied to their coloring such as gradients and transparency (configurable opacity level). This kind of formatting can be a good tool in the creation of your visual design.

Adding Controls and Widgets

Once you have created a new form and applied whatever formatting options you like to its default bands, you are ready to add controls and widgets. Controls and Widgets are the elements which actually display information for the end users of your application or website.

While in the form designer you can choose controls to insert directly from the Home tab of the ribbon, as indicated by the number 1 in Figures 4. The same is true for widgets which appear separately in a drop down menu accessible by clicking on the Widgets button, also highlighted in Figure 4 and indicated by the number 2.

form-designer-inserting-controls-widgets-home-tab.png
Figure 4 Controls and Widgets can be inserted from the Home tab of the ribbon.


It is also possible to insert controls and widgets from the Insert tab of the ribbon, when you are in the form designer, just as in Figure 4 the respective areas of the ribbon are indicated by the numbers 1 and 2 in Figure 5.

form-designer-inserting-controls-widgets-insert-tab.png
Figure 5 Controls and Widgets can, also, be inserted from the Insert tab of the ribbon.

Selecting Controls

You can move any control around inside a form by click and dragging on the control. If you want to select multiple controls at once you can click and drag to create a selection box around the controls you would like to move, or you can hold down the SHIFT key while clicking on multiple controls to select them.

If you would like to select multiple controls at once, inside a container, you should use press and hold the CONTROL key while you click and drag the mouse to create a selection rectangle, within the boundaries of the container.

Moving Controls

You can move controls around in a form by dragging them with the mouse or by using they keyboard through the combination of CONTROL and ARROW KEYS. When you drag a control using the mouse you will see thin, blue colored, guidelines appear as the control moves in the form. These lines are intended to inform you when the control comes into vertical or horizontal alignment with other controls inside the form. You will also see small guidelines appearing between controls as the control you are moving nears another control. This guideline is indicative that the control has approached another control up to a specific margin which is set in Morfik options. This is useful to ensure consistent spacing between controls throughout your application.

The following Figure shows a snapshot of some of the automatic guidelines coming into view as a user repositions a Button control on a form with other controls.

form-designer-automatic-guidelines.png
Figure 6 This picture shows a control being moved in a form with the automatic guidelines in view.


If you wish to move a control around without being influenced or affected by the automatic guidelines you can press and hold the ALT key while dragging and the guidelines will not come into play.

Arranging Controls

When you are designing a form, the placement of your controls is very important to ensure you get the results you want. You will want some information in your form to remain close to the sides of the page, regardless of its width and have other portions of your design that should always appear at the bottom of the page, for example. This kind of layout decisions can be easily implemented with careful configuration of some properties of certain controls in your design.

Placement Properties

Two properties control how controls react to changes in the size of the browser window. Correctly setting these properties is very important for the integrity of your design as the user can resize the browser window leading to extra space being visible. It is important to understand that the effect of these properties cascade throughout the content of a Morfik form. If a Container control is resized because its placement configuration so instructs, the controls it contains may be required to do so according to their placement configuration.

These properties can be set through the Property window in the Morfik development environment or directly from the Home tab of the ribbon when in the Form Designer.

form-designer-placement-dropdown.png
Figure 7 The drop down list of options for setting the placement properties directly from the ribbon.

Horizontal Placement

There are six values that this property can assume:

  • hpCentre - This setting ensures that the control will remain in a central position, regardless of how the browser window is resized.
  • hpJustify - This option will make the control grow or shrink horizontally as necessary to maintain its design distance from the edges of the browser window or of control that contains it.
  • hpLeftJustify - This option will make the control move horizontally as necessary to maintain its design distance from the left edge of the browser window or of control that contains it.
  • hpNone - This option represents the default behavior of a control and it will remain in the position and with the size it was designed, regardless of how the browser window is resized.
  • hpRelative -
  • hpRightJustify - This option will make the control move horizontally as necessary to maintain its design distance from the right edge of the browser window or of control that contains it.

Vertical Placement

There are six values that this property can assume:

  • vpCentre - This setting ensures that the control will remain in a horizontally central position, regardless of how the browser window is resized.
  • vpJustify - This option will make the control grow or shrink vertically as necessary to maintain its design distance from the edges of the browser window or of control that contains it.
  • vpBottomJustify - This option will make the control move horizontally as necessary to maintain its design distance from the bottom edge of the browser window or of control that contains it.
  • vpNone - This option represents the default behavior of a control and it will remain in the position and with the size it was designed, regardless of how the browser window is resized.
  • vpRelative -
  • vpTopJustify - This option will make the control move horizontally as necessary to maintain its design distance from the top edge of the browser window or of control that contains it.

Containers

In Morfik, controls can be grouped together inside a special kind of control called Container. Containers are very useful as they let yo0u group together controls which should always be close to one another, regardless of where they will appear on the final form. This grouping makes it much easier to move these controls around while keeping their positions relative to one another the same.

In order to select multiple controls at once, inside a container, you should use press and hold the CONTROL key while you click and drag the mouse to create a selection rectangle, within the boundaries of the container.

When you select a container it displays a special drag handle with crossed pairs of arrows as shown in figure 8. This handle makes it easy for you to drag the container without moving any of the controls inside the container by accident.

form-designer-container-drag-handle.png
Figure 8 A selected Container control with its special drag handle indicated by the red arrow.

Z-Order

The order in which you insert controls into a form determines their initial Z-Order position. The Z-Order can be seen as the depth at which the controls are placed three dimensionally on the form. This determines which controls hide what other controls and can be controlled by a couple of options which are available from the control's context menu or in a more fine-grained way from the Home tab of the ribbon when in the form designer.

These follow items represent the range of options available for manipulating a controls Z-Order:

  • Bring to Front - This option brings the control to the top most of forward most position. All other controls will be behind this one and it will hide what ever it is moved over.
  • Bring Forward - This option brings the control up one level in the Z-Order.
  • Send to Back - This options pushes the control all the way to the bottom or back of the Z-Order. Any control which is moved over this control will hide it.
  • Send Backward - This option pushes the control one level down in the Z-Order.


Setting the Z-Order of controls can be a powerful tool in accomplishing some designs in Morfik. If you set a control to be partially in front of the other and give it a shadow, for example, you can make it seem as if the other control is emerging from behind the top-most control.

This can also be a very helpful at design time if you have several controls which will be alternatively visible at a certain position on form, depending on some programmed logic. At design time all controls are visible all the time, so being able to shift their Z-Order allows you to select all the controls as you send the top-most control to the bottom of the Z-Order stack with a Send to Back command.

Form 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. Read more...

Overall Application Layout

As with print on a paper page, the Web offers almost limitless possibilities on how to layout your pages. While this freedom is certainly desirable it can be daunting when you first a Web project and is faced with the decision to choose how you will layout content for your application. Morfik provides through two very simple controls the means to create virtually any design you wish. To create your layout you will primarily work with the Container and the SubForm controls which allow you to group controls and insert other Forms into the design of the Form you are currently working on. Read more...

Creating virtually any application layout is just a matter of positioning controls such as TextLabels, Containers, Rectangles and especially SubForms in the right places, with the right configurations on your form. The form is essentially a blank canvas where you are free to design your application or website. In this analogy the Form Designer is the at the same time the stand on which you place your canvas for painting but the paint palette where you choose what to place on your canvas.

In the Morfik development environment the ribbon is always adapting to what you are doing, so as to always display relevant options. Combined with the form designer's side panels it makes up a powerful paint palette with which to paint your forms.

Using Graphical Effects To Enhance Presentation

The one part of your application that gets exposed to its users it the interface. Other than the application's overall performance, nothing else has as much influence on how users perceive your application as how good your interface looks and works. Aware of this, Morfik put a lot of effort into creating a development environment that allows visual design to fully expressed without the need of recourse to other applications.

Morfik offers a wide variety of special formatting effects that can be applied to bands, containers and controls allowing their appearance to be highly customized by the user. These effects can be used to great effectiveness in enhancing the user interface of your website or web-based application. Read more...

Copying Formatting

The Morfik Form Designer offers several ways for you to quickly format controls in the same way other controls are formatted.

Format Painter

The format painter allows you to directly copy the formatting of one control to another. In order to this you need to select the control you want to copy the format from, click on the Format Painter button on the Home tab of the ribbon and finally click on the control you wish to apply the format to. Your control has been formatted. It is that simple.

Shared Style

If you are thinking of applying the formatting you have done to a control to a series of them, it is better to make use of the Shared Styles feature. You should assign a name, any string which looks like a name will do, to the Shared Style property of the control you have formatted, through the Properties panel on the left hand side of the main Morfik window. Once that is done you can go to the other controls you would like to have the same formatting and choose that name from the drop down list that appears for the Share Style property. Again, the controls are formatted with that simple action.

Adding Actions and Code

Once you have created the basic design for your forms and "pages" you will want to add some interactivity to your application or website. There are two ways you can do this in Morfik: Through WebActions or through coding.

WebActions

WebActions are special routines or functions which are frequently used and which have been flagged in the Morfik Framework for being visually assignable in the Form Designer. What this means is that without ever having to write any code by hand you can have those functions be called when specific events are triggered in a control.

When you select an event in the Events window in the Morfik development environment, a small button becomes visible at the outermost edge of the line. When you click on this button a Wizard dialog comes up for you to configure the action that you would like to associate with this particular event, of this particular object.

form-designer-webaction-wizard-first-page.png
Figure 9 First page of WebAction Wizard dialog in the Morfik form designer.


Once you have selected which WebAction you will want to execute in the first page of the WebAction Wizard dialog, you will have the opportunity to specify and required parameters for that specific action in the second page of the same dialog as shown in Figure 10.

form-designer-webaction-wizard-second-page.png
Figure 10 Second page of the WebAction Wizard dialog in the Morfik form designer.


You can have WebActions with several parameters just as you can have them with no parameters. The dialog you see in Figure 10 is for the OpenForm WebAction that not only has three parameters but one of them is a formatted string which provides parameter information for the Form that is being opened. In this case, the Wizard provides a grid for the entry of the parameter information which will be assembled into the final form of a parameter string.

Coding

If the action you would like to execute in response to an event of a control is not among those that are registered as WebActions you can code it directly into an even handler routine. To do this, simply double click the empty space to the right of the event name in the Events window in the Morfik development environment. In response to this Morfik will create an empty event handler routine and switch you to code view so that you can edit its source.

Once an event handler has been created for a specific event, double clicking the space to the right of its name in the Events window will always return you to the code that is assigned to that control, allowing you to easily locate and edit it.

Related Topics

Back to top