Pages

Pages

Previous: Under the hood Up to Contents Next: Customizing templates

Customizing the Web Lite Look and Feel

Jump:

The Xataface includes some powerful templating tools that give the developer the power to modify any part of the interface easily.

Tour of Web Lite's Core Templates

Xataface includes several core templates that, together, make up the default look and feel of a Dataface application. Find out how these templates are organized and what each is for.

If you take a look at the Dataface/templates directory, you will see a whole collection of templates as follows:


templates_dir.gif

There are essentially two types of templates:

  1. A template to render a full page.  We refer to these as 'Page templates'.
  2. A template to render a portion of a page, and not an entire page itself.  We refer to these as 'Block templates'.

Sometimes it is not clear if a template is a page template or a block template since there is no fundamental difference between them syntactically.  However, most of the Page templates inherit from 'Dataface_Main_Template.html'.

Page Templates

As mentioned above, a page template is a template that renders a full html page.  All page templates will generally inherit from Dataface_Main_Template.html which is the main page template used to render all pages in a Xataface application.  Page templates that are used to render specific pages or actions in the Xataface application extend Dataface_Main_Template.html filling "slots" with their own content.  Inheritance and slots will be explained later.  In this section we simply discuss where the templates are located and how they are related.


Page Template heirarchy. Click to enlarge
PageTemplateHeirarchy.png

Block Templates

Block templates render HTML snippets or sections that can be included in web pages.  There are block templates for displaying form elements, headers, footers, tabs, menus, logos, etc.. It is possible for these blocks to follow a heirarchy like Page templates do, but it is far less common.  Some block templates include:

Dataface_ActionsMenu.html
The actions menu.  This includes the options to "Create new record", "Show all", or "Delete Record".  Do not add or remove options from this menu by modifying or overriding this template.  That is better done using the Xataface actions framework.
Dataface_Application_Menu.html
A placeholder for your application's side menu.  The default template is empty, but you can place a template by this name in your application's templates directory to have it displayed in the left column of your application.
Dataface_DeleteForm.html
The HTML form to delete a record or records.
Dataface_Details_Controller.html
The "Previous", "Next", and "Jump" menus to be displayed in details mode.
Dataface_Fineprint.html
The fine print that is displayed at the bottom of the page.  E.g. Copyright 2006 Your Company...
Dataface_Logo.html
The logo that appears in the upper left of the page.
Dataface_MoveUpForm.html
An invisible HTML form and associated Javascript functions that are included to allow the moveUp and moveDown functionality for related records.
Dataface_NavMenu.html
The navigation (aka tables) menu.  It basically displays a menu of tables as specified in the '_tables' section of the conf.ini file.
Dataface_QuickForm_element.html
Renders an element of a form (e.g. in the Edit tab, or for adding related records).
Dataface_QuickForm_group.html
Renders a group of elements (i.e. elements that all have a common 'group' attribute).
Dataface_QuickForm_groupelement.html
Renders an element of a group on HTML forms.
Dataface_RecordGrid.html
A reusable template for rendering 2-dimensional arrays or lists of records in a sortable HTML grid.
Dataface_ResultListController.html
The paging controls for the list view (i.e. in the 'list' tab).
Dataface_TableView_tabs.html
Renders the tabs at the top of the page: e.g. 'list','details', 'find', etc...  Do not modify or override this template to simply add or remove tabs.  That can be done using the Xataface actions framework much more efficiently.
global_footer.html
A blank placeholder that will be displayed at the very end of the page.
global_header.html
A blank placeholder that will be displayed at the very start of the page.
head_slot.html
A blank placeholder that will be included inside the <HEAD> of the document.  You can include stylesheets and javascripts by overriding this template.
left_slot.html
A blank placeholder that will be displayed in the left column of the page.  You can add content by overriding this template.
 



Previous: Under the hood Up to Contents Next: Customizing templates
blog comments powered by Disqus
Powered by Xataface
(c) 2005-2024 All rights reserved