Maintain consistent presentation through use of Themes and Styles

In order to provide a better user experience within your application or website its important to that the visual elements of the application maintain a consistent look and feel. This does not mean that creative design should not be applied in creating the project. What it means is that it is probably better to define how buttons will look in your application and keep it consistent everywhere.

It might be that your design has buttons that perform different kinds of task such as leading to a new "page" and displaying a popup window. It is conceivable, even recommended, that you will assign these two different kinds of function different appearances. This will help your users better understand what they can expect when they click on each of these button styles and enhance their usage experience.

Morfik makes it very easy for the developer to create a consistent user experience throughout the application or Website through a couple of related features: Themes and Styles. Styles work, for controls, in a manner that is analogous to how text formatting styles work in word processing applications. You chose a style for a control and all the characteristics of the style are imparted on the control, while themes allow you to create a well defined set of colors, fonts and styles that will be used throughout your application.

Styles

One of the major innovations introduced with Morfik 2.0 was the concept of control styles. A control style holds information about all the visual characteristics of all states that particular control can assume and allows them to be imparted onto a selected control, all at once. This makes is easy for you ensure that all controls that are used to create a menu, for example, look exactly the same. It can also be used to ensure that all buttons used in an application have the same appearance. This helps to avoid a lot of senseless work copying values of properties or doing copy and paste of controls to get them to look the same on different Forms.

Using predefined or custom built styles you can easily apply a certain set of visual characteristics to any control. Morfik embraces a philosophy that tightly couples development with visual design, making it easy for developers to achieve great results without having to depend on a design-specific application. Using styles your development experience will be a bit different as it will become more declarative. Simply defining the appearance of the states of a control will be enough for the Morfik Framework to automatically change switch between visual representations of the control; no code required.

Control States

As mentioned initially, a style actually includes information on how the control should look in each of the different states it can assume at runtime. The following states are common to all controls:

  • Default - This style is the one that applies to the control's normal or neutral state.
  • Mouse Over - This style is applied to the control when the mouse pointer is passing over it.
  • Disabled - This style defined the appearance the control will have when its Enabled property is set to false.
  • Mouse Down - This style is applied to the control when the left mouse button is pressed with the mouse pointer over the control.


The following additional states can be assumed by the Button control when it is part of a group:

  • Down - This state only applies to button controls which are part of a button group and which has its Down property set to true. Within a button group only one button will have this property set to true.
  • Down Mouse Over - This style is applied to a control that is in the Down state, when the mouse pointer moves over it.
  • Down Mouse Down - This style is applied to a control that is in the Down state when the left mouse button is pressed with the mouse pointer over it.

Other controls such as the TextEdit control can assume other states such as:

  • Focused - This state is assumed when the control receives the focus.

Styles Panel

The properties for each of the states that make up a style can be configured through the Ribbon and the Properties panel. In order to choose which state you are going to be working on and to see what the state will look like you use the Styles panel which is, by default, docked with the Properties panel to the left of the main window of the Morfik development environment.

In the Styles panel you will see several representations of the control for which you are configuring the style. Each representation is shown under the name of the state which it is representing. The Styles panel is shown in Figure 1.


consistent-presentation-styles-themes-styles-panel.png
Figure 1 The styles panel with several states for a Button control being shown.


At the top of the styles panel is a drop down list which contains the names of all styles that are available in the current project for the specific type of control that is currently selected in the Form designer. If you select a different name on this list the selected control will immediately assume the characteristics newly selected style.

Note: If you have made changes to the formatting of one or more states of a control and choose another style name from the drop down at the top of the Styles panel, before updating the current style, all your changes will be lost when the control assumes a new style.

Once you have made modifications to how one or more states of a control's style are configured, you should use the Update button at the top of the panel so that the changes made to the current control are saved back to the project wide style. Once that is done the style changes are propagated to all controls that currently use that style in the project.


consistent-presentation-styles-themes-styles-panel-update.png
Figure 2 The styles panel with the update button highlighted.


Managing Styles

Morfik has a Styles Manager which allows you to see all styles that are defined for each type of control, in the current project. Through this dialog, which is shown in Figure 3, you can also choose to rename or remove certain styles. This feature allows you do proper house cleaning of your project's environment ensuring that you don't have to carry around left over styles from unsuccessful experiments.


consistent-presentation-styles-themes-styles-styles-manager.png
Figure 3 The Styles Manager dialog.


Themes

Themes operate on a much larger scale than styles as they are applied to the entire project at once. A theme defines the set of colors, fonts and even control styles that the application will use. Morfik makes it easy for you choose a theme from a gallery of choices which are available in the Design tab of the Ribbon. The gallery is shown in Figure 4.

consistent-presentation-styles-themes-styles-theme-gallery.png
Figure 4 The theme gallery within the Design tab of the ribbon.


Just by hovering the mouse cursor over the Themes in the gallery you can preview how the Form that is open in the Form Designer (if any) will look using that Theme. This allows the developer to have a notion of how the application will look if that theme is applied to the project.

Themes can all also be customized through the creation of new control styles, as well as the selection of alternative colors an fonts. The application is always using its own theme as when a new theme is applied to a project, a copy of it is created inside the project. It is this copy, within the project that gets changes as you alter style properties and other theme characteristics.

It is possible to export your current theme and thus make it available to other projects. Themes are saved in files with the .mfktheme extension and can be shared with other project and other developers which can then import them in to their local Morfik installation.


consistent-presentation-styles-themes-styles-theme-gallery-dropdown.png
Figure 5 The theme gallery in drop down state with the export option highlighted.


Themes and Styles

All styles you define within the Morfik development environment exist within the context of the currently selected theme. You can redefine styles which are present by default within a theme, thereby ensuring that a theme change will result in your application's interface properly switching to a style of the same name in the new theme or create entirely new styles by adding styles with previously inexistent names in your theme.


Theme Colors

Morfik themes have a predefined set of colors that act as placeholders for actual colors. These theme-relative colors are always visible in the various drop down palettes which you can access through the Ribbon, the property window and other various dialogs within the development environment. In creating your application or website's interface you can choose to use absolute colors for specific interface elements. It is, however, recommended that you always avoid using colors other than the selected theme palette.


consistent-presentation-styles-themes-styles-theme-color-dropdown.png
Figure 6 The morfik drop down color palette in the Home tab of the ribbon when in Form designer.


If you want to work with a specific set of colors you can redefine the palette for the current theme through an option in the Design tab of the Ribbon as shown in figure 6. When you choose to redefine the color set of a theme you are taken to a special editor designed for selecting these colors. The Theme Color Editor is shown in Figure 7.

consistent-presentation-styles-themes-styles-theme-theme-color-editor.png
Figure 7 The theme color editor dialog.


You can choose to use the entire color set from a different theme. You can do this just by selecting the name of the theme from which you wish to borrow the color definitions in the Design tab of the Ribbon.

Theme Fonts

A Morfik theme has some pre-defined standard font style references. All themes have these pre-defined font styles and if you use these references your application should fully transition and transform according to how these are defined in the selected theme. Just with colors you can choose to redefine these font styles to better suit your design. In order to redefine the theme's font styles you can select the Edit Font Theme option in the drop down Fonts font theme list in the Design tab of the ribbon as shown in the Figure 8.

consistent-presentation-styles-themes-styles-theme-theme-font-editor.png
Figure 8 The Font Theme Editor dialog.


You can, in a manner also similar to colors, choose to use the entire font style set from a different theme. You can do this just by selecting the name of the theme from which you wish to borrow the font definitions in the Design tab of the Ribbon.

Managing Themes

The Morfik development environment offers a Theme Manager interface which is tied directly into the Options dialog that can be called from several places, depending on which designer you are working on. You can, however, always access this portion of the Options dialog directly through the Manager Themes option in the Design tab of the Ribbon.

consistent-presentation-styles-themes-styles-theme-theme-management.png
Figure 9: The Options dialog withe the Themes section selected.


Page Templates or Classes

Any page you design can become a template for the creation of other pages and work as a specialized Master Form for those pages created from it. This feature when used in conjunction with the Theme and Styles suppoort in Morfik can be a valuable asset in helping developers ensure consistency through out a large project. Read more...

Related Topics


Back to top