OrangeScape Developer Community

A community for Application Developers on OrangeScape's Platform-as-a-Service

Theming your applications - Template Layout

Every page that is being rendered in the application consists of the following layers.

  • index.html
  • import.html
  • theme.html
  • header.html
  • menu.html
  • layout.html
  • footer.html
These files are arranged in the order as displayed in the picture above.  Each of the files define a certain section of the page.

index.html
  • This is the Parent / Base on which every other layer will be loaded and arranged.
  • This loads all the applications default scripts and style definitions.
  • This also has the function call, which calls for the menu construction.
  • This file loads the next layer (import & theme)
import.html
  • This file is one of the files loaded as the second layer.
  • This has the loadMenu() function which is being called from index.html to start menu construction.
  • Any Custom script / style definition imports, which the developer wants to use, should be done here.
  • Also, changing the menu library call to any other library than the default one should also be done here.
theme.html
  • This is the other file which is loaded in the second layer.
  • This is where the decision to load the theme or not is made.
  • This has the base framework for the page design.
  • This loads the various sections of the page in the next layer. (Header, Menu, Layout, Footer)
header.html
  • This has the page definitions for the Header section of the page.
  • basically the top part of the page.
  • By default, this displays
    • Application logo.
    • Application Name.
    • Logged In User's Name.
    • A link to manage the users of the application (If the logged in User is Administrator).
    • Logout link.
  • If theme is not to be loaded, then this file will not be used.
menu.html
  • This has the page definitions for the Menu Section of the page.
  • This is where the unordered list which will be used to construct the menu is contained.
  • This contains the template for the menu to be constructed, and also the container div which will hold the menu html code.
  • If theme is not to be loaded, then this file will not be used.
  • If  user form is used, instead of the Worktop as the home page, then this file will not be used. (unless theme.html is customized to do otherwise).
layout.html
  • This is where all Application Forms, Queues and Reports are rendered.
  • Based on the model being loaded corresponding template will be loaded.
  • Regardless of the theme setting, this will be loaded.
footer.html
  • This defines the footer information displayed at the bottom of the page.

Views: 435

Comment

You need to be a member of OrangeScape Developer Community to add comments!

Join OrangeScape Developer Community

Comment by Kamal.S on February 20, 2014 at 2:23pm

© 2017   Created by OrangeScape Technologies.   Powered by

Badges  |  Report an Issue  |  Terms of Service