Presentation styles

A common pattern or best practice in application software development is to separate the presentation of data from the actual content. Fonts, sizes, colors and layouts should not be embedded in the code of the application.  PermeAgility supports this using CSS stylesheets.  

While most application frameworks would require you to edit a file on the server to change the style sheet or worse, to have huge built-in required stylesheets that are too complicated, in PermeAgility it is stored in the database.  In fact, PermeAgility allows you to have multiple stylesheets and switch them without restarting the server. Unlike other frameworks where the style sheet is just a reference to a file on the server, in PermeAgility, the style sheet is embedded in each page. This allows a user to save a page and be able to view it later in all its styled glory within having to have all the supporting files for the page. (A page viewed without the style sheet is very ugly)

To change the stylesheet used by the server, click the Settings option in the menu.

The light style using the vertical menu:

Select one of the other styles and when you click submit, you will see the changes immediately.  Although this setting can be changed using the Constant settings, other constants are also changed when a stylesheet is picked. This utility is provided to allow you to easily change a style sheet without having to remember its exact name. It also allows you to change the table editor row count limit which is another commonly used setting.

Note: Only the two default style sheet you see in the screen shots is supplied with the default database, you will need to load an example database to try out the other style sheets, or you can easily build your own starting from a copy of the default stylesheet (Need tutorial for this)

Editing styles

To edit a style sheet, use the Tables menu option and select the Style table.  Then click the row of the style you want to edit.

Note that the CSS Code editor control is used when the column name is CSSStyle.

If you are editing a style that is currently in use, the results will take effect when you save your changes.  It is a good idea to copy the default style into one of your own so that you can always switch back.

Adding images to styles

If you want to add an image to a style, you will need to add it to the www directory under the directory where you installed PermeAgility.  You will also need to set the WWW_IN_JAR setting to false using the Constant table

To use an image from the database in a style, you can refer to it as a thumbnail like this:   ../thumbnail?ID=10:6&SIZE=MEDIUM

Where the ID is the rid of the thumbnail record.  

Sizes include SMALL (50x50), MEDIUM (640x480), or FULL (the full image or the file in the case of other types of files)

To view the thumbnails and find an ID for one, use the Query tool to SELECT FROM thumbnail or make the thumbnail table visible by editing the table groups.

Future versions may have downloadable stylesheets or a plus module for stylesheets.  Currently, you can use the JSON importer to export and import the style table entries.

Changing the main header logo

The header logo in the top left is not part of the style sheet but is generated by the Header class.  This is because it is used as a universal link to the application home page and we can't create links in a CSS stylesheet.  To change the logo, create or change a constant:

• Class Name = permeagility.web.Header

• Field = LOGO_FILE

• Value = 2 options

  • a name of the image in the image directory (under www directory if WWW_IN_JAR is false)

    • a thumbnail reference (eg.  ../thumbnail?ID=10:6&SIZE=FULL)  Note: .. needed to navigate up from default images directory

• Description = put anything you want, this is used to document what the constant will affect, how it should be used, and why it is overridden.

Note: If you change the image, a new thumbnail will be generated and you will need to update the link in the style