Pages and page templates in Morfik 3.0

Morfik 3.0 introduces the concept of pages and pages templates or classes.  These concepts change the way we should think about creating a Morfik application at a basic level and I thought it would be interesting to discuss them in more detail, specially for those that have had previous contact with Morfik but haven’t been tried out the new beta version yet.

First thing to know is that these changes are not mandatory.  What this means is that if you already have a project under development or in production you will still be able to work on these projects with Morfik 3, without changing your application’s logic or structure.

The new page concepts in Morfik 3 offer the make the creation of new applications substantially faster and easier by allowing you to design pages and then save them as templates for the creation of other pages in the future.

Pages serve various purposes in Morfik.  They allow you to better structure your application and ensure consistent layout throughout.  They also allow you to define clean URLs and work with hyperlinks which greatly improves search engine visibility.

When you create a new page you are asked to choose which template your page will be based on.  Depending on the project template you chose to use, you may have one ore more page templates to choose from and you can create your one templates once you feel you have mastered the concept.

Once a page is created you will be able to edit it.  Editing a page is quite simple and actually quite restricted.  All you can change in a page is how it is called and its URL and you can assign different Forms to different slots, or subforms controls, which are visible and empty.  The positioning of the subforms in the page is determined by the layout of a form that provices the basic visual representation of the page.

This form is called frmRoot through out all Morfik 3 projects I have seen created. You can set a different form to be the base of other page templates by defining that form as a Page class. Loading a page that is based on a different root form will cause all forms to be reloaded, even if some forms are shared in between the current page and the new one to be loaded.

In planning your application’s general design, it is important to understand that all page templates in Morfik are craeated in an incremental manner, being one built on top of another.  You can have two or more templates designed from a previous one, but most templates in the end will be built on top of a root design.

By failing to consider this properly I was forced to go back and redo some work more than once, when first trying out Morfik 3.  Once you have this firmly in mind you adapt and start designing with it in mind and while I you can achieve just about any page layout combination in your website with Morfik 3, having layouts that differ a lot may require an uncomfortable number of form nestings.

Below I have added pictures of two page templates I have created in one of several small project I have been working on recently.  The firt is an altered _Blank_ template.  This will be the most basic, fundamental, page model in your application and anything that you add here will be visible in all pages of your application.

The black border you see around the pictures was added to help give a better view of the page contours as a large section of the page is white.  Everything you see in the _blank_ template will be visible in all the pages that are created from it and in all the pages which are created from page templates which are derived from it.

You will notice that the bottom half of the colored header of the page is shown in a lighter color than the top.  That is because the bottom half is covered by a subform control in the root form which creates an area to which you will be able to assign a Form to.  While most pages derived directly from the _Blank_ template in this project don’t really have any use for that, pages derived from subsequently created templates may do so.

In this particular project the _Blank_ template is used as the base for all pages which are visible to the anonymous  users while another template called _InApp_ is used as the base for the creation of the pages which are visible after the user has logged in to the application.

Notice that the _InApp_ template has a group of buttons or menu in the header area that was previously empty in the _Blank_ template.  These are the top level navigation options which should be available to the user while he is working within this application.  These options are layed out in a small form which was  then assigned to the area in the ehader of the _InApp_, statically binding them.

What this means is that all pages derived from _InApp_ will display this menu to the users.  If I later decide that I want to have a page which does not display this menu, but a different one, I will need to derive that page from the _blank_ template.  If your application has many different such menus you might want to assingn them directly to individual pages, instead of assigning  and statically binding them in the page template ofr you might simply decide to create a deeper page template hierarchy.

Creating a more extensive page hierarchy is probably a good idea for larger projects, specially considering that there is no real performance penalty at runtime.

If you look closely at the _Blank_ template you will notice that it includes a copyright message in the footer and the basic menu of the Morfik Security Package at the very top of the header.  These items and options will be available all throughout the application and cannot be overriden in any intermediate page templates or individual pages.  If you feel the need to be able to redefine everything in every section of your application you will need to insert subforms that fully cover each of the sections of the frmRoot form that defines the overal look and assignable sections of all pages.

In this specific case I decided that these options and message should always be visible, as well as the name of the company that is using the application and which can be seen as “COMPANYNAME” in these screenshots.  Both the TextLabel controls used to display this basic information were created in the frmRoot form.  The form was then assigned a data source which refers to a table that holds information about the Company and from which the Company name is retrieved.  The copyright message  is simply a static text.

The following image shows a page which was created from the _InApp_ template, with a placeholder form assigned to its central content (white) area. This placeholder form is simply displaying a light blue TextLabel which identifies it so that I can test the basic navigation functionality of the application.

I hope this description of how these basic page templates can be created was helpful to you in getting to know a bit more about Morfik 3 and how it can be used to create great web applications.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>