Visual Design in Morfik 3

What's new?

Morfik 3 has a lot of new features in several different areas but in this topic the focus is specifically on visual design.

In Morfik 3 the concept of the "Page" was made to be a very strong one in the development environment with Pages being granted first class, high level project object, status. Now, when you create an application with Morfik 3 you start out by creating the Pages you envision that your application should have and then you proceed to detail and implement their functionality buy building the Forms that you will position inside them.

Forms still work very much as they did in Morfik 2.x and most developer interaction is still with Forms. In this respect little has changed.

Pages

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

The presence of the new high level Page visual objects makes the visualization of the applications structure a lot easier and allows the user to have a clear a visually significant list of the Pages in the application. The first stage in creating a new Morfik application is defining what pages it will have. For example, if you are building a website you would have pages: "Contact", "About the Company" and "Services" while if you are building an inventory tracking system you would have pages "Orders", "Customers", "Products" and "Suppliers".

When working on Pages in the visual designer all portions of the page that are inherited from the Master Form or from a page class or template is dimmed down. This allows you to clearly see what portions of the page can be altered. Double clicking on the dimmed area will take the user to the page template or class or directly to the Master Form, if no class or template was used. This will allow the user to alter that Page or Form which once saved will reflect that change in all its derived pages.

In the screenshot show in Figure 1 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 1: Page with inherited elements dimmed.


The impact of this new feature is significant and can be better appreciated when you create a new project based on a new Morfik template. You can immediately see all the pages in that template and quickly move to customize what is necessary.


Project View

Changes to the project view in the Morfik development environment place Page objects as the central application building elements, making thumbnails visible (by default) only for pages. All other high level objects are now by default shown in iconic form.

The user can optionally re-enable the option of showing Forms and Reports as thumbnails in project view by setting the Show Thumbnails option in General section of the Morfik Options dialog to All. Changing this option will result in the same view as was default in Morfik 2.x, with the addition of Page objects.

Pages and the Mobile Web

The new Page objects help developers create applications that present different interfaces to end-users depending on which mobile devices they are using to access the application or website. This new feature lets users customize their application to better serve users that frequently access it through the use of such devices as iPhones, iPods and iPads. Read more...

Forms

The Form is the canvas upon which you will do most of the work to create your application or website's visual interface. By placing and configuring controls on a the surface of a Form's bands you will customize it to achieve the desired look and feel. Forms can be used to create the Pages of a Morfik project or as pop ups that are presented to the user for quick interactions such as a log in request.

Forms can be created in many sizes going from large ones that take up most of a Page to a small visual element that is composed together with other similar elements within a larger Form or a Page.

All pages are composed of one or more forms which are placed in specific locations of the page through the usage of a control called SubForm. The SubForm control defines an area of a page or form where another form will be inserted. Pages are thus created through the aggregation, formatting and layout of various forms. Read more...

Master Form

Every Morfik 3.x project has a special Form called a Master Form. This form provides a template for all the pages that are created within the project. Changes made to the Master Form will be reflected upon saving to all pages in the application. It is essential that the Master Form have at least one unbound SubForm control so that the user can customize derived pages by binding different forms.

This form will look just like any other form in the project view of a Morfik project. In a blank project this will be the first form that is created in the project. When you create a project based on one of the new Morfik 3.x templates this form will be appropriately set for you based on the design of the template.

New Templates

Morfik 3.x includes a variety of templates which are designed to help the user get a quick start on creating a new application, while at the same time offering a way to create good looking websites with minimal effort. The templates also provide examples on how to achieve effects of design patterns which the user can learn and then make use of in extending his/her project or when working on a new project.

Controls

Morfik 3 makes available new controls which can have a profound impact on how you create your applications or websites due to the new possibilities they offer. Among the new controls you will find generally used items such as a menu bar, and some others which were created by Morfik's R&D team to explore some of the unique characteristics of the Morfik Framework.

Of special interest for overall design is the repeater control which allows you to design a data view without the requirement of a specific form. This control has its own data source, independent of the data source of the form that contains it and controls placed within it can be bound to the fields of its own data source. This control changes the dynamic of interface design in Morfik as a substantially lower number of forms is needed to create pages that bring together data from different data sources.

There are still situations in which the form is a better or in fact the only solution to a specific design necessity, but the repeater control certainly has an impact on how you design and structure your application or website's forms.

New controls

For more details on using Menus in a Morfik application read Working With Menu Controls.

Related Topics