In Morfik 3 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. Pages, as introduced in Morfik 3.0 are a visual representation of the Virtual Pages concept that had already been surfaced in the Morfik Framework as of version 2.1.x.

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.

top-level-navigation.png
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 are responsible for establishing the general layout of the application as well as setting the background over which the application is designed. Read more...

Master Form

When you first start to build your Morfik project, the Morfik development environment creates a Master Form which provides the base layout for all pages in your application. In this Form you will define some areas, which might be common to all pages in your application and others that will always be different from page to page.

Once you have properly configured and formatted this Master Form you can start to create the pages you have mapped for inclusion in your project.


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. A class or template page is like a specialized model derived from the Master Form. It is created based on the Master Page, as all other pages in a Morfik project, but once you add controls and formatting and save it as a new class or template it can be used as the model from which a new page will be created.

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.

In the screenshot show in Figure 2 the area that is marked with the number 1 is dimmed as it displays content that is inherited from a template or the master form while those marked with the numbers 2 and 3 are shown with a thin blue frame and are normally colored. Areas 1 and 2 are SubForm controls whose contained forms can be changed by the user while editing that specific page.

page-designer-dimmed-area.png
Figure 2: Page with inherited elements dimmed.

In the picture shown in Figure 3, you can see the New Page dialog which allows the user to choose if the page that is to be created is for a generic device, i.e. a regular desktop or notebook computer or for a mobile device such as the iPhone or the iPad. Once an option has been selected the user can select from within the list of available page templates or classes in the current project.

Page templates or classes are project specific. When you create a new project based on an existing Morfik project template it may contain a number of page templates or classes which will be available for use within your project and which will appear in the New Page dialog whenever you choose to create a new page. Any pages you flag as being a page class will also show in the list of available templates shown in the New Page dialog.

Mobile Pages

As of Morfik 3.x 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.

mobile-page-iphone.png
Figure 3: 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.

default-page-dialog.png
Figure 4: Default page dialog.


In figure 4 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.

Hyperlinks

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. This is a feature that was much enhanced in Morfik 3 as the high level Page objects make it easier for the developer to retain overall vision of how his application is organized and thus makes it easier to create the necessary links between pages.

Huperlink Sub-Properties

There are two sub-properties that can be set for the Hyperlink property: Target and Title. These properties allow you to have a more fine-grained level of control of how the hyperlink behaves and is interpreted by search engines.

Target - This sub-property allows you to choose one of four options for how the browser will open the hyperlink: _blank, _self, _top, _parent.
Title - While the actual text that will appear on the screen is given by the caption of whatever control for whom the Link is being set, the Title property is looked at by search engines to evaluate the relevancy of the link.