Choose and Apply Style

IFML Modeling with WebRatio Platform
1,164 views Published on Mar 27, 2014 | Time 20 min
Applies to: 7.2 or higher

An important aspect of a Web application is its Visual Identity.  The Visual Identity represents all the graphic widgets that you may want to use in order to make the Web application look good while providing a great user experience.  WebRatio lets you create Web applications with a great Visual Identity without forcing you to define the graphics from scratch.  Even though it's possible to create a custom style, it's interesting to know that with a basic knowledge of WebRatio you can obtain a professional result.  This lesson explains how graphic resources are organized in WebRatio Platform and how you can easily apply a predefined set of available visual identities to your Web Project.

Transcript

Table of contents

Style Project

WebRatio Platform separates the logic of the Web application, consisting of user interaction and business logic, from the Visual Identity of the application itself. The goal of this separation is to be able to reuse the Visual Identity with different Web Projects. That's why all graphic resources belonging to a specific Visual Identity are contained in a dedicated project, named "Style Project". All predefined style projects are visible in the "Style Projects" folder of the WebRatio Explorer View. A "Style Project" is a project that contains all the layout templates needed to generate the graphical elements of a Web application. The project also includes the resources used in the templates, such as "CSS" and "JavaScript" files, and also "media" resources (images, etc.) So, the Style Project specifies the graphic appearance to be applied to the Web Project. This specification is done at the lowest granularity available, through the usage of templates. A template is a file specifying the graphic appearance of a specific model element.

Predefined Style Projects

Inside your workspace, at startup, you will find six predefined Style Projects ready to be used. Each one of them has a different purpose. The "WRDefault" is a black-and-white Style Project that contains definitions for all the Layout Templates for elements included in the style hierarchy. The "WebRatio" style project is a simple style that is set as the default Style Project associated with Web Projects in WebRatio Platform. The "Multiflex" style project is refers to the Multiflex style available online at this link. The "Reports" and "Excel" style projects are used to generate reports from specific modeled pages within a Web Project. The "Reports" Style Project is used to generate PDF reports through Jasper iReport, while the Excel style is used to create Excel Reports.

The Default Style Project

When you work on a Web Project, WebRatio Platform automatically sets the "WebRatio" style as default, so that when modeling the very first features, you can concentrate on the functionality rather than on the presentation. You can see how the Web application looks like by generating the Web Project. Click on the "Generate and Run" button to launch the Web application generation process.

Additional Style Projects

In addition to the set of predefined styles available directly in the tool, you can also download additional styles from the "WebRatio Add-Ons". The "WebRatio Add-Ons" is the place where you can share all your custom projects with the WebRatio Community and where you can find additional material that can be useful for the development of your project. To learn more, view the "WebRatio Store User Guide" article. The available styles include: "WhiteLabel", "Bootstrap" and "Fertile Environment". Let's download the "Bootstrap Style" Project as an example. Open the "WebRatio Add-ons" by clicking on the "Add-ons" icon on the "WebRatio" toolbar. The "WebRatio Add-ons" opens in a dedicated View. Choose the "Style project" option from the "Filters" section on the left. You will see only the items available in order to see only the "Style Projects". In the main area, search for the "Bootstrap Style" and press the "Install" button. Remember that in order to be able to install the style you have to be logged in with your profile. The installation procedure asks you to confirm the installation; after that press "Finish".

How to Download a Style Project from WebRatio Add-ons

In addition to the set of predefined styles available directly in the tool, you can also download additional styles from the "WebRatio Add-ons". The "WebRatio Add-ons" is the place where you can share all your custom projects with the WebRatio Community and where you can find additional material that can be useful for the development of your project. To learn more, view the "WebRatio Store User Guide" article. The available styles include: "WhiteLabel", "Bootstrap" and "Fertile Environment". Let’s download the "Bootstrap Style" project as an example. Open the "WebRatio Add-ons" by clicking on the "Add-ons" icon on the "WebRatio" toolbar. The "WebRatio Add-ons" opens in a dedicated View. Choose the "Style Project" option from the "Filters" section on the left. You will see only the items available in order to see only the "Style Projects". In the main area, search for the "Bootstrap Style" and press the "Install" button. Remember that in order to be able to install the style you have to be logged in with your profile. The installation procedure asks you to confirm the installation; after that press "Finish".

Style Project Modularity

A "Style Project" is structured in a modular way, so that the different aspects of the page presentation can be specified and changed independently, and so that it’s possible to reuse the "Style Project" several times. A "Style Project" contains "Templates" referring to different model elements such as "Page", "Grid", "Cell", "View Components", "Attributes", "Fields" and "Flows". The same modular structure is used in the "Layout" tab of the "Properties View" in which you can assign and configure the style for your Web Project. Select the "Project" tab in the main work area and select the "Layout" tab in the Properties View to see this section.

How to Manage Project Dependencies

After downloading a "Style Project" or creating a new one, you have to manage the "Project Dependencies" of your Web Project in order to be able to use the new style. "Project Dependencies" are controlled from the "Project" and, by default. they are not enabled. To manage dependencies check the "Enable Dependencies" property from the right side of the Project View of your project. A dialog asks you to confirm the changes; press "Yes" to confirm. Now that the dependencies are enabled, you can "Add" and "Remove" projects referenced by your Web Project. Press the "Add" button to open the "Dependencies" dialog and choose one or more of the available projects. In this case, select the "Bootstrap" Style, then press the "OK" button. A new dialog is shown, which asks you to save the changes and reload the Web Project with the new dependencies. Press the "Yes" button again to confirm. Now you are ready to use the "Bootstrap" style in your Web Project. If you want to remove a project from the "Dependencies", select it and use the "Remove" button. Every time you change the "Dependencies", the tool will ask you to reload the Web Project in order to apply the changes to the "Dependencies".

How to see the Style Project structure

A "Style Project" is structured in a modular way, so that the different aspects of the page presentation can be specified and changed independently, and so that it’s possible to reuse the "Style Project" several times. A "Style Project" contains "Templates" referring to different model elements such as "Page", "Grid", "Cell", "View Components", "Attributes", "Fields" and "Flows". The same modular structure is used in the "Layout" tab of the Properties View in which you can assign and configure the style for your Web Project. Select the "Project" tab in the main work area and select the "Layout" tab in the Properties View to see this section.

Properties View - Layout Section

The "Layout" tab of the Properties View basically shows a property for each model element to which you can assign a layout. Here is the full list of available options. Click on each option to learn more.

  • The "Page Layout" is a template establishing the presentation elements of a page that do not depend on the "View Components", and that use the resources of the associated style sheet. There are essentially two aspects specified in a "Page Layout": the places in the Page where the "View Components" can be rendered and the positioning of the static resources that compose the page, such as the main menu.
  • The "Grid Layout" is a grid model where view components can be allocated for the purpose of establishing the respective positioning. The template is rendered as the "HTML" code that builds the main content of a page. This layout can be specified only when the "Layout Manager" is set to “Custom Grid”.
  • "Page Layout" The "Frame Layout" is a graphical container that does not display meaningful information but simply specifies the way the information contained inside is shown.
  • A"Frame" can be applied to any element of the page but is usually applied to a "View Component" or a set of "Components".
  • The "Cell Layout" is a template establishing the rendition of groups of "View Components", treated as a unique cohesive element for the purpose of presentation. This template is useful when the desired rendition effect requires interleaving features of different "View Components" or intermixing them inside the same "HTML" element.
  • The "Attribute Layout" is a template establishing the rendition of a display "Attribute" of a "View Component".
  • The "Field Layout" is a template establishing the rendition of a "Field" in a "Form" View Component.
  • The "Flow Layout" is a template establishing the rendition of a "Flow".
  • The "Layout Manager" is an option that changes the way in which the "Layout Grid" is shown in WebRatio Platform.
  • You can choose between the "Grid System", which uses the "960 Grid System" explained here, and the "Custom Grid", which uses a table to represent the "Layout Grid". The suggested option is "Grid System".
  • The "Error Style Page" is a template containing the "JSP" code, necessary to show the user a page reporting an error message when the Web Application has an unexpected behavior.
  • The "Login Style Page" is a template containing the "JSP" code, necessary to show the user a "Login Page" when the user tries to access a restricted area, and does not have the corresponding access rights.

How to apply a Style Project

Let's see how to use the "Layout" Properties apply a style to the "CRM" web project. Open the Project View by clicking on the "Project" tab. We are going to apply the style to the entire "Project", so let's select the "Project" node from the Outline View. The Properties View shows all the "Project" information. To manage the style, switch to the "Layout" Tab of the "Properties View". To use a "Style Project", change the value of the "Style" property by choosing one option of the dropdown menu. This dropdown will show all the "Style Projects" referenced by your Web Project in the "Project Dependencies". If you have not enabled the dependencies you will see all the "Style Projects" of the workspace. As an example, let's apply the "Bootstrap" style to the project. Select it from the dropdown menu. After the selection, other "Layout" properties of the project may also change, since each style project may contain a default setting for all the style elements. For example, by applying the "Bootstrap" style, the "Page Layout" property shows the "BootstrapStyle/Bootstrap" page layout. To apply the changes, save the project and use the "Generate and Run" command to launch the Web application and to see the changes. To view the changes, open the browser and access the Web application.

Style Hierarchical Structure

The inheritance logic starts from the "Layout.xml" file, which is contained in the "Style Project". To apply a layout on specific project elements, WebRatio Platform uses a hierarchical approach, which makes it possible to set layout properties at a high level and have these properties inherited by all sub-elements. At the same time, lower levels can overwrite the inherited properties with new settings decided in the "Layout Properties View". Let's see a working example of the hierarchical approach, using the "CRM" web project. This project has two "Site Views", "Administration" and "Sales Manager", and by default both of them have the same style assigned. Let’s suppose you want to change the "Page Layout" of the "Administration" site view to the "WebRatio/Basic" style. Select the "Administration" tab from the work area and select the" Administration" node from the Outline View. Move to the Properties View and select the "Layout" tab; then change the "Page Layout" property by choosing the "WebRatio/Basic" option. Notice that this property value is shown in black, which means that you have explicitly set the value. When a property is inherited instead, its value is shown in gray. To verify that the two "Site Views" have a different look, just generate the "Layout" of the "Administration" site view, using the "Generate and Run" command.

How to work with the hierarchical approach

The inheritance logic starts from the "Layout.xml" file, which is contained in the "Style Project". To apply a layout on specific project elements, WebRatio Platform uses a hierarchical approach, which makes it possible to set layout properties at a high level and have these properties inherited by all sub-elements. At the same time, lower levels can overwrite the inherited properties with new settings decided in the Layout Properties View. Let's see a working example of the hierarchical approach, using the "CRM" web project. This project has two "Site Views", "Administration" and "Sales Manager", and by default both of them have the same style assigned. Let’s suppose you want to change the "Page Layout" of the "Administration" Site View to the "WebRatio/Basic" Style. Select the "Administration" tab from the work area and select the" Administration" node from the Outline View. Move to the Properties View and select the "Layout" tab; then change the "Page Layout" property by choosing the "WebRatio/Basic" option. Notice that this property value is shown in black, which means that you have explicitly set the value. When a property is inherited instead, its value is shown in gray. To verify that the two "Site Views" have a different look, just generate the "Layout" of the "Administration" site view, using the "Generate and Run" command.

How to Apply a Layout on a "View Component"

Let's now see how to apply a "Layout Template" to a specific "View Component". Suppose that you want to change the rendering for a "List" component of the "CRM" web project that has the "Bootstrap" style project applied. The default choice for the "List" component is the "BootstrapStyle/Default" template. To change the "Layout Template" of a "View Component" you need to open the "Layout View". Select the "List" component from the page. As you can see the "Layout View" is loaded, and the grid structure, with all the "View Components" of the same Page, is shown. Now from the "Layout" View select the "List" component from the "Grid"; this opens the "Layout Properties View" of the "Component". Here you can use the dropdown menu of the "Component Layout" property to change the layout selection. For example, choose the "WRDefault/Normal" template and save. To test the changes, save and launch the generation procedure using the "Generate and Run" button. You can use this procedure for every component layout that you want to change.

How to Apply a Layout on an "Attribute"

Let's now see how to apply a "Layout Template" on a specific "Attribute". Suppose that you want to change the rendering for the "Address" attribute of the "Companies List" component of the "CRM" web project that has the "Bootstrap" style project applied. You want to show, at most, twenty characters of the address. You can use the "CutText" Attribute Template for this purpose, which is included in the "WRDefault" style project. The default choice for any attribute of the "List" component is the "BootstrapStyle/Default" template. To change the "Layout Template" of the "Attribute", you need to open the Layout Outline View. Select the "List" component from the Page. As you can see the "Layout View" is loaded, and the grid structure, with all the "View Components" of the same Page, is shown. Now from the "Layout View" select the "List" component from the "Grid"; this opens the "Layout Properties View" of the "Component" and the "Layout Outline View". From the "Layout Outline View" expand the node related to the "List" component and select the "Address" attribute. The "Properties View" is now filled with the "Layout Properties" of the "Attribute". You can use the dropdown menu of the "Attr. Layout" property to change its rendering. Choose the "WRDefault/CutText" template and save. To test the changes, save and launch the generation procedure using the "Generate and Run" button. You can use this procedure for every layout attribute that you want to change.

How to Apply a Layout on a "Field"

Let's now see how to apply a "Field Template" on a specific "Field". Suppose that you want to change the rendering for the "VAT" field of the "Company Data" form component of the "CRM" web project that has the "Bootstrap" style project applied. You want to show only the value of this field with a different layout from generic fields. You can use the "FieldValue" Attribute Template for this purpose, which is included in the "WRDefault" style project. The default choice for any attribute of the "Form" component is the "BootstrapStyle/EntryUnit" layout template. To change the "Layout Template" of the "Attribute" you need to open the "Layout Outline View". Select the "Form" component from the page. As you can see the "Layout View" is loaded, and the "Grid" Structure, with all the "View Components" of the same Page, is shown. Now from the "Layout View" select the "Form" component from the "Grid"; this opens the "Layout Properties View" of the "Component" and the Layout Outline View. From the Layout Outline View expand the node related to the "Form" component and select the "VAT" field. The Properties View is now filled with the "Layout Properties" of the "Field". You can use the dropdown menu of the "Field Layout" property to change its rendering. Choose the "WRDefault/FieldValue" template and save. To test the changes, save and launch the generation procedure using the "Generate and Run" button. You can use this procedure for every layout field that you want to change.