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 theme—guaranteeing 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...

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 suggests—nothing 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 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 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.

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.

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.

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

Widgets: user created controls

Different from controls which are built into the Morfik development environment, widgets can be created by Morfik users. Once created within a project a widget becomes available for insertion into forms of that project. This allows the developer to implement a specific behavior that he would like a control or group of controls to have in a manner that can be reused in all the forms necessary.

In this way, widgets allow the developer to package additional functionality into what looks and behaves similarly to a control, but to which the developer can add browser, server and designer code. Read more on widget creation...

More widgets

Morfik has released many widgets through add-on packages that are available to members of the Morfik Developer Assist program.

These packages are available to enhance what you can achieve with Morfik. Read more...

Related Topics

Back to top