From Morfik Wiki

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.

Contents 1 Identify your application's 'Pages' 2 Virtual pages 3 Mapping your application's structure 4 A top level navigation menu 5 Secondary navigation menu 6 Morfik default template 7 Creating a new project 7.1 Virtual pages 7.2 Template virtual pages 7.3 Template hyperlinks 8 Extending the basic template 8.1 Create a new "Page" 8.2 Add a menu option for navigation 8.3 Related topics

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 that?

Even if you have never, ever, worked on creating a web application, you'd 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.

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.

Morfik's virtual pages are abstract entities and as such you do not build them. Instead they are published and made identifiable by defining a URL for them. 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...

For the rest of this article we will establish that whenever we refer to a page or a virtual page we are describing a predefined state in your application. This state will be published and thus have an individual name (URL) assigned to it.

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.

Consider the diagram shown below, in Figure 2. Notice that the virtual 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.

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.

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.

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.

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.

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 menu will be vertical and vice versa.

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 three forms that present two visual variations on a web page.

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 with three forms. You can view these forms at any time in the Project View of the Morfik development environment.

One of the forms created as part of this template is called Index. This is the outermost form of your application. The remaining two forms in the project are inserted into a SubForm of the Index form at different moments of the execution life of the application.

When you first open the Index form in the Form Designer, you will notice that the contents of the Content form are displayed inside the Index form. This happens because that form has been bound to a SubForm control present in the Index form.

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

Template virtual pages

Morfik's default template starts out with two published URLs—one for publishing each of the additional forms that are part of the project. One of these URLs is defined as the default URL for the project. The default URL of a project defines what virtual page will be displayed as the home page for the website or application.

The first URL that is defined in the template takes the name "about" and links to a virtual page which shows the About form inserted into the SubForm of the Index form as shown in Figure 7.

The second URL defined takes the name "content" and links to a virtual page which shows the Content form inserted into the SubForm of the Index form as shown in Figure 8.

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 Index form. These hyperlinks are associated with the TextLabel controls indicated in Figure 9, below.

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 SubForm in the Index 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 assign it to the Form property of the SubForm control of the Index form and publish a new URL for that state.

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 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 SubForm control that is present in the Index form.

Once you have configure your Index form in this manner you should have something similar to image that is shown in Figure 10.

Once you have your Index form looking like the one shown in Figure 10, you should publish a URL for it. In this case you could publish a URL named "producta". You can then use this URL to implement navigation to this new virtual 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 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.

To complete the process, you must then assign the URL you have published for the new page 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

• Introduction and Overview
• How is Morfik different?
• Understanding Morfik's approach to Web application layout
• Getting to know Morfik Forms
• Using Forms to build your application user interface
• Working with Forms to add behavior and content to your application
• Using Controls and Widgets to add interactivity and display content
• Controlling the layout of your application
• Using Graphical Effects to enhance presentation
• Maintain consistent presentation through use of Themes and Styles