Wednesday, 8 May 2013

Updating Xataface Applications to Use the G2 Theme

NOTE:  As of version 2.1, the g2 theme is installed by default so the steps described in this article are no longer necessary.

The default Xataface theme was built on the old Plone 2.0 stylesheet from 2005.  Safe to say, it looks its age.   Clearly, Xataface needs a face lift.  The only question was how to introduce the modifications.  There were two primary options to choose from:

  1. Modify the core Xataface templates and stylesheets.
  2. Create an optional module that overrides the default templates and stylesheets.
In order to cause minimal disruption to existing Xataface applications, I chose the latter, and the solution is embodied in the g2 module - which includes new Javascripts, Stylesheets, and templates that look a little more modern.

The default Xataface theme.  Notice the tables list on the left and vertical because there are more than 10 tables included in the tables menu.
Same page using the G2 theme.  Notice the tables listed horizontally along the top.  The "More" drop-down menu lists the remaining tables.


Some features of the g2 module include:
  • jQuery.  jQuery is now included by default - so it is available to all scripts and Javascript modules.
  • Advanced Find form.  The advanced find form is now accessible using a dynamic Javascript pull-down effect so that users don't have to navigate away from the existing list or details page in order to perform a find.
    The Advanced find form appears via pull-down.
  • Selected Record Actions.  Result list actions are now all dialed in to operate on the records that are "checked" in list view.
    The list view now shows result list actions across the top and bottom of the list.  These all operate on the selected rows (i.e. the rows whose checkboxes are checked).
  • Result controller.  The result controller is now less cluttered, and only gives users option to change the "limit" and "start" when they click on the result details.
    The result list controller is more streamlined.  The "1-11 of 11" label is all that appears.  Clicking on that displays the pop-up dialog to modify the "skip" and "limit" settings.
  • More actions...  Action lists are now limited to 7 actions in a particular category.  Additional actions, are then included in an 8th "More" drop-down menu.  This makes the interface far more extensible when there are large numbers of tables.
    Now excess tables are listed in the "More..." menu automatically.  This is the case with all action groups.

How To Install

  1. Create a "modules" directory in your application if one doesn't already exist.
    $ cd /path/to/myapp
    $ mkdir modules
  2. Check out the latest g2 module from the subversion repository, into the "modules" directory.
    $ svn co http://weblite.ca/svn/dataface/modules/g2/trunk g2
  3. Add the following to the [_modules] section of your application's conf.ini file.:
    modules_g2=modules/g2/g2.php
  4. Clean out the templates_c directory to remove old cached templates.
    $ rm -rf templates_c/*

Video Tutorial


10 comments:

  1. The video won't play, says its a duplicate...

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Hi. It is asking for a username and password when i try to check out the code.

    ReplyDelete
    Replies
    1. I meant my other comment to be in reply to this... please see that comment
      Steve Hannah18 November 2013 14:36

      Delete
    2. Thanks! Got it from github no problem. (For svn I was using GUI Windows client)

      Delete
  5. Try getting it from github instead.
    https://github.com/shannah/xataface-module-g2
    I am slowly moving all Xataface stuff over to github. The github repo is therefore more recent than the subversion repo.

    However, there is no password protection on the SVN repo. I have seen reports from other people stating that they have run into the password issue but I can't seem to reproduce it myself. Are you using the command-line SVN client or a GUI app? Make sure you're getting it anonymously and not providing a username.

    ReplyDelete
  6. Looking for the Best Dating Website? Join and find your perfect match.

    ReplyDelete
  7. If you need your ex-girlfriend or ex-boyfriend to come crawling back to you on their knees (even if they're dating somebody else now) you got to watch this video
    right away...

    (VIDEO) Win your ex back with TEXT messages?

    ReplyDelete