Building navigation menus and organizing your applications functionality

Notes-M3-48.png This article requires updates for compliance with Morfik 3. Further information might be found on the navigation menus and organizing your applications functionality talk page. (ML) (27-04-2010)


One of the first questions a new user asks when starting their first Morfik project is: Where do I start? Fortunately, Morfik provides a base template from which you can start your first project and start exploring how Morfik works.

In this article we will start by going over the basic concepts of how to structure your application and how this standard template works. After that, we will see how we can apply the same techniques to extend it.

Identify your application's 'Pages'

This is can be a hard first step when you are new to web development, but it quickly becomes easier with a bit of practice. Many developers coming from a desktop development background have difficulty imagining that an application can be divided into pages, but most can. How do you go about doing that?

Even if you have never, ever, worked on creating a web application, you have been a user of the Web and you can put that experience to use and envision how your application's functionalities should be grouped and how individual bits of data would be presented to the end user.

Think of how your application would change as the user navigates through the options. You can start by establishing what would be the first "page" or "screen" the user would see on entering your application or website. That will be your "home" page. What options will be available for the user on that page and what will the page look like when the user chooses each of these options? A good portion of this page might even remain unchanged when the user selects a specific option. Though you might be changing just a small portion of the page, consider this as another page or a state, and assign it a name.

Pages and Virtual pages

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

Morfik's pages are therefore entities that represent a certain application state that the user will view within the browser. When you design a page are defining an application state and naiming it so that it can later be referenced by other parts of the application. Pages are published and made identifiable by their names as Morfik defines a valid URL for them, within your application.

There are many virtual pages that are not interesting within the space of your application. These pages are not worth publishing and are considered as internal to the application (not visible to the outside world). On the other hand the virtual pages that are published are extremely important as they expose interesting points within your application space to the outside world. Read more about Virtual Pages...

For the rest of this topic we will establish that whenever we refer to a page or a virtual page we are describing a predefined state in your application. As a rule of thumb, however, if a state is represented by a visually created page, it will be refered to as just "page" leaving the usage of the "virtual" qualifier to states which are created through action or data driven changes in pages during application execution. Read More about pages...


top-level-navigation.png
Figure 1: Top level navigation structure within a website or web-based application.

Mapping your application's structure

Once you have thought through the first levels of your application and considered what "pages" you are going to have, you should have most of the material you need to begin mapping it out. Look over your notes and ask yourself if some of the "pages" or "states" you have singled out have the same structure but differ in the content they are showing. If the answer is yes, than flag them. These might be candidates for being a single page with different parameters or part of a related set of pages.

Consider the diagram shown below, in Figure 2. Notice that the pages which are linked from the Home page all have names in the plural form. This indicates that they lead to pages that provide information about multiple items of whichever type they are related to. It makes sense that you be presented a list of items to choose from before you can focus on an individual item. If you are dealing with a homogeneous group of items, items which all have the same set of categories, you would want to create a single "page" which can display information about any specific item, instead of having to create a page for each individually.


navigation-and-parameters.png
Figure 2: The application's structure with the addition of parametric pages


This will not only cut down the work necessary to create the application in the first place, it will make it easier to update or change in the future because instead of having a specific page for each of the company's products or customers, you have only one which displays different information based on a parameter it receives.

This process of "mapping" your application can be applied repeatedly until you have a good view of all the pages that you will need to build and which ones can be parametric. Note on the diagram in Figure 3 that pages are organized in a sort of drill down structure, going from the one with a very broad information scope (the home page) to pages which are more specifically focused. This is a common pattern to look for in designing your website or web-based application.

All pages in Morfik are composed of one or more Forms. Pages are derived from a Master Form or page class/template and then customized by inserting specific forms into certain places. With this in mind we will move closer a level and see how we can decompose one of the pages that have been mapped into one or more forms. Read more about Forms....

A top level navigation menu

Once you have mapped the structure of your application in a manner such as described above and illustrated in Figures 1 and 2 you can start to build a navigation menu for your application. There are several controls that can be used to create different types of menus, depending on how you want to structure the navigation of the application. Figure 3 shows the top level menu of a website (in this case www.morfik.com) built just with the Button control.


morfik-com-navigation-menu.png
Figure 3: The Morfik.com top-level navigation menu.


Top level menus are generally used to link to pages that function as section headers or entry points for a group of related functions or pages. In this case, these pages provide more information about the functions and offer new menus for the user to select from within that portion of the application or website.

If the number of functions which are aggregated under each top level menu option is not large, or if only some of the pages linked to from the top level menu actually have further navigation options, it is not uncommon to add a pull-down menu of choices directly from the top level menu as show in Figure 4.


building-menus-dropdown-in-use.png
Figure 4: Morfik 2.1 What's New site with the drop-down control used in place of some buttons.

Secondary navigation menu

Websites and applications that have a larger body of content or functionalities to organize will often have secondary navigation menus. These, in most cases, follow a different orientation than the one used in the top level menu. This means that, generally, if you have a horizontal top level menu, the secondary menus will be vertical and vice versa.


building-menus-secondary-menu.png
Figure 5: A secondary menu from Morfik.com. This offers options to navigate to different download lists once the user enters the download area from the top level menu.


You can see in Figure 5 a secondary navigation menu, in vertical orientation, from the Morfik.com website. This menu allows you to navigate through several different download lists. This menu is shown when you enter the downloads area of the website in order to allow you to narrow your range of options.

Note: It's quite usual for secondary menus to follow a different "orientation" from the primary one. This is specially true if the primary menu has a horizontal orientation. One benefit of this arrangement is that both menus can easily be visible at the same time, reducing the need for the user to "navigate" between menu levels.


Morfik default template

When you choose to create a new project with Morfik you have two basic choices: to create a totally blank project or to use the default template. The default template is a project with two forms, two pages and a Master Form which are all the necessary components for a two page website.

This very basic application makes use of all the basic layout and organization elements you need to have in an application and provides a good starting point for creation a totally new application.

Creating a new project

In order to visualize what is described in the rest of this topic, you should now create a new project from a template. This can be accomplished by selecting the Default option in the first page of the New Project Wizard. Just accept all the default options in the wizard and you will end up with a new project based on the default template previously described. You can view the created forms and pages at any time in the Project View of the Morfik development environment.

The Master Form created as part of this template defines the outermost area of your application. The two regular pages created inherit whatever formatting is applied to the Master Form and add their own visual elements. In the specific case of the default template, the two forms which are also a part of the template. In each page one of the two forms is embedded into a SubForm control which was introduced in the Master Form and thus is available in both of the projects pre-defined pages.

When you first open one of the predefined pages in the visual designer, you will notice that the contents of one of the Forms are displayed inside the ??? SubForm control. This happens because that form has been assigned to the ??? SubForm control included in the Master Form.


building-menus-template-content-page.png
Figure 6: View of the default configuration for the Index form in of the default project template.


If you choose the Manage URLs option in the Home Tab of the ribbon you will see a list with two different published URLs. These URLs define virtual pages for your application and will enable navigation within it.

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

Pages in the default template

Morfik's default template starts out with two pages, derived from the Master Form. One of these pages is defined as the default URL for the project. The default URL of a project defines which page will be displayed as the home page for the website or application.

The first Page that is defined in the template takes the name "About" and embeds a form called frmAbout into the predefined SubForm that it inherits from the Master Form as shown in Figure 7.


building-menus-template-about-page.png
Figure 7: Index form showing the "About" form assigned to its SubForm control.


The second Page defined takes the name "Content" and embeds the frmContent form in the predefined SubForm it inherits from the Master Form as shown in Figure 8.


building-menus-template-content-page.png
Figure 8: Index form showing the "Content" form assigned to its SubForm control.


Notes-M3-48.png This paragraph requires updates for compliance with Morfik 3. Further information might be found on the navigation menus and organizing your applications functionality talk page. (ML) (30-04-2010)

You will notice that Figures 6 and 8 are essentially identical as the content URL is selected as the start page, by default, in a project that was created with the default template. At any moment you can alter this configuration in the Project Options dialog.

Template hyperlinks

The default application or website template that comes with Morfik has just two hyperlinks configured—one for each of the two options that are available in the Side Bar area of the Master Form. These hyperlinks are associated with the TextLabel controls indicated in Figure 9, below.


building-menus-template-links.png
Figure 9: Section of the Side Bar area of the Master Form showing two TextLabel controls which have associated hyperlinks.

Extending the basic template

Once you have examined Morfik's default template, you will notice that extending that template to create a website is not difficult. Basically what you need to do is to create new forms which will be inserted into the appropriate SubForm in the pages derived from the Master Form in response to a user click on a link.

Once you have created a new form and designed its content to match another page you would like to add to the website or application you should create a new page derived from the Master Form and assign the desired form to the Form property of the SubForm control the page inherits from the Master form.

Create a new "Page"

Consider, for example, that you would like to add a page to display information about one of your company's products: "Product A". The first step is to create the form called frmProductA with the appropriate controls to display the relevant information about "Product A". Once you have created the form for "Product A" and saved it, you should assign it to the Form property of the predefined SubForm control of a new page.

Once you have configured your new page in this manner you should have something similar to image that is shown in Figure 10.


building-menus-template-new-page.png
Figure 10: A new page showing the frmProductA form assigned to the predefined SubForm control.


Once you have your new page looking like the one shown in Figure 10, you are ready to go. In this case your application will publish a URL named "producta", or whatever other name you give your page. You can then use this URL to implement navigation to this new page.

Add a menu option for navigation

In order to add a menu option to take you to your new page, you will need to add a new TextLabel control to the Side Bar area defined by the Container1 control, in the Master Form. In this case you should probably add a TextLabel control above the one which displays About and assign "Product A" to its Caption property. This will provide you with the visual aspect of the link for your new page.

If you reproduce what is described in this topic you should obtain a result that looks similar to the Form that is shown in Figure 11.


building-menus-template-new-page-link.png
Figure 11: Index form showing the "Product A" form assigned to its SubForm control and a new navigation option in the Side Bar area.


To complete the process, you must then assign the page you have created for this product to the link property of this TextLabel control. This will effectively turn what was just plain text into an actual link. This is all that is necessary, as the Morfik Framework takes care of everything else.

Related topics

Back to top