In most web application projects there is a design agency involved mostly designing the user interfaces within the corporate design of the company. E2E UI applications come with predefined themes which in some cases might not fit into the companies design concept e.g. integrate the application into the existing corporate portal site.
Due to the fact that the user interfaces are modeled within MagicDraw and not part of any design agencies delivery package, the agency can fully concentrate on the styling and not on the content of the screens. The content of the screens is modeled according to the business needs.
To be able for the design agency to develop their styles, they need a rough idea and a working file to design on.
Preparing the files for the Agency to work on
To be able to save a working version of a E2E UI application a Firefox Add-On is needed. This is due to Firefox not being able to export CSS content which are referenced or imported. To install the Add-On follow this link https://addons.mozilla.org/en-US/firefox/addon/4723/. The Add-On Save Complete (Version 1.0.1) installs automatically when clicked on the green Add to Firefox button.
Figure: Export Complete Web Page
After the installation Firefox will restart and will offer a new File menu entry Save Complete Page As.... Load the page that the agency needs to work with into Firefox and use the new menu entry to save the complete page including all referenced files.
Figure: Save Complete Page As...
Working with a design tool
Most design tools offer an import mechanism for existing pages or whole sites. This can also be done with the package that is saved via Firefox for external design implementation. Important though is, that the CSS files are amended without changing the class names.
Replacing/Re-importing changed files
To close the cycle, the changed design, coming from an external party, needs to be re-imported into the E2E Builder Project. To be able to understand what happens to the design that gets re-imported it is essential to know about how styles are handled during runtime within the browser.
Overwriting / Extending CSS
CSS class definitions
The above table shows the loading order and the effect of the overwriting (.menu class) and extending (.menuitem class) classes. The class attributes in bold are changed by the customized.css class definitions.
Assigning CSS Classes to UI Elements
To have more control on UI elements, it is possible to assign a custom CSS Class on the <<UIPackage>>, <<UIContainer>> or <<HTMLElement>>. This is helpful if there for example needs to be special design implemented. This css class definition is implemented in a custom css file which needs to be imported into the project to take effect.
Figure: CSS Class Assignment
Importing Custom Resources
Despite if it is a single new css file or a customized theme package the customized styles are imported into the project using the Resource Importer.
Importing a Custom Theme Roller Package
As described previously the changed CSS attributes will overwrite and/or extend the built in jQuery Theme CSS definitions. When using the online Theme Roller, the CSS class names will match the names of the jQuery default definitions.
Figure: Importing Custom Theme Package
A custom theme package is an archive containing not only CSS definitions but also image and script resources which are needed for e.g. displaying the different widgets. All these files need to be imported with the setting Extract All set to true. When deployed, the archive will be extracted and available to the user interface application.
Figure: Theme Roller Resource Import Settings
When importing ThemeRoller themes, it is essential that the main CSS theme file is added as a single resource. Only this way the resource can be identified and added to the Component Diagram. Selecting a main CSS resource is not only important when importing ThemeRoller archives, it is important to do so with all design archives which have one main style sheet referencing other style sheets or images.
Figure: Selecting Theme Roller CSS File
It is essential when choosing the jQuery UI main CSS library to have the resource type set to CSSFile in the Choose Type of Resource to import drop down list. This rule is valid for any CSS file which should be imported and used within the application.
As with all imported resources, they are made available in the Magic Draw Containment tree. The resources them self are not needed in any model or diagram. They are added to the UIRepository in the Component Diagram.
Figure: Imported Resources
Deploy UI Resources
Figure: Adding UI Repository
When importing a jQuery UI Theme, despite of if it was created using the online ThemeRoller tool or if it was developed manually, it is important to set the Default Theme to <none>. In general the imported theme's CSS classes will overwrite the built-in ones but it would take longer for the Browser to download the CSS files.
Figure: UI Deployment Settings
After deploying the xUML service and opening the user interface, the theme will be changed from the built in one to the custom designed one.
Figure: E2E UI without custom CSS
Figure: E2E UI with custom CSS
Figure: Global Resources Configuration
How to upload global resources is described in the E2E Bridge User Guide. Next to upload single files, whole zip and jar archives can be uploaded and at the same time be extracted.
Deploying Global Resources
The global resources are deployed either as single files or as a directory structure by upload and extracting a zip or jar archive. To deploy the resources, access the E2E Bridge via it's administration interface and upload the resources as described in Deploying and Managing Resources.
Figure: CSS Debugging with Firebug
The CSS debugger is opened by clicking on the HTML tab in the Firebug menu. The debugger is a combination of the page structure with all its HTML elements, which is shown on the left, and on the right side the CSS classes which are defined on the corresponding element. The CSS classes are organized in the loading sequence starting from the bottom. Each sequence step belongs to a CSS definition which resides in a style sheet file e.g. e2e.css.
In this case the CSS class .ui-widget from the original built-in style sheet theme definition will be overwritten by the imported jQuery UI theme. In detail this would be the