Presentation templates

Posted by: Jesse in Untagged  on Print PDF

Jesse

With presentation templates, UltraCore achieves the capability to define a main application layout, that will be applied to all or certain application pages. The goal was to be able to define a presentation layout in plain HTML and CSS, without the need of any dynamic code inside. Also it would be possible to re-use templates between different applications, in this way creating a web template market, where different templates can be directly applied to an application, to create a completely different layout. By implementing this, we thought the final solution should be as powerfull as the Joomla templating mechanism, but should be language neutral. This means no code inside the template.This also allows the templates to be viewed directly inside a web browser.

 We achieved the templating solution by introducing the following concepts:

  •  A template can include a dynamic UltraCore component, by defining the componentName attribute inside an HTML tag.
  • We defined a naming convention for the standard components of an application
  • The template engine should transform template resource URL's from local URL's to online URL's automatically

The first concept was implemented, by letting the template engine scan for tags with the componentName attribute. If such tags exist, the value of the componentName attribute is used to lookup the component in the current Page. If found, the component will be dynamically inserted. If not found, the html tag that defines the componentName is removed from the html code. In order to create fully styleable menu's, the following conventions where also defined:

  • A Hierarchical menu component can be defined inside html by using ul and li tags.  By controlling the classes of these tags, one can define the behaviour for closing and opening of such menu leafs, as well as the styles of the menu for each level of the menu. (See examples templates basic and advanced-perspective
  • Breadcrumps can be defined by a series of (floating) divs
  • Horizontal menu can be defined by a series of (floating) divs
  • Tabs can be defined by a series of (floating) divs (Styles tab-item and tab-item-selected should be defined)

The naming convention for the components of a page is the following

  • mainMenu1: Main menu (Hierarchical menu)
  • mainMenu2: Alternative main menu (Hierarchical menu)
  • hmenu: Horizontal Menu
  • breadcrump: The breadcrump component
  • tab: A tab component that is used as navigation in the page
  • content: Will be inserted as content into the content container
  • content-parent: Will be inserted one level higher as content, to create content insertion without decorative frame
  • logo: The title or logo element of a page

With ultracore, 2 standard templates come out of the box, the basic and advanced-perspective template. They form also good examples to start with, when you want to create your own templates. A demo application is part of ultracore, deployed automatically with an UltraCore compile, that shows the templates applied. To access the application, enter the url localhost/ultracore/login.ac. After login, a top-panel button allows you to change the user properties of the application. Among these properties is the template property, that allows you to change the active template and see it applied instantly.