axJQueryTheme – Change existing jQuery theme
Description
axJQueryTheme allows Developers to change existing jQuery themes in TS2 using JQuery theme options available and from jQuery website.
Usability
|
Context |
Supported |
|---|---|
|
Input screen fields |
No |
|
Output screen fields |
No |
|
Input subfile fields |
No |
|
Output subfile fields |
No |
|
New screen elements |
No |
Properties
|
Name |
Description and Comments |
JavaScript |
Shipped default |
|---|---|---|---|
|
jqueryTheme |
Select from jqueryTheme available options. |
No |
DefaultTheme |
Notes, Comments and Warnings
This extension is only available when JQueryUI theme is used.
TS2 by default is using the jQueryUI smoothness theme. By adding this extension to customize screens, Developers can now change the jQueryUI theme using available options currently shipped with aXes. It does not limit Developer to use available options; it is also possible for the Developer to add additional themes that are available from jQueryUI websites.
How to Add additional jQueryUI themes.
Visit http://jqueryui.com/ click the themes sections, customized or download any existing theme available.
Extract the zip files and look for the css folder containing the theme that we will be adding to aXes.
Copy the folder containing the selected theme.
Example: “eggplant”
Add a prefix “jQtheme_” to the selected theme folder
Example: jQtheme_eggplant
Copy the jQtheme_<theme name> folder to /ifs/axes/ts/ts2/css
Make sure to set the authorities of all the file inside the jQtheme_<theme name> to *PUBLIC *R authorities. Use the WRKLNK command in your IBM i to ensure that the new file only has *PUBLIC *R authorities.
In Application, appStylesTheme property = jQueryUI
When JQueryUI is selected from Application->Styling->appStylesTheme property, the behaviour and the path being accessed by this extension will change. When the JQueryUI theme is used, follow the following steps in downloading the JQuery Theme.
Visit http://jqueryui.com/themeroller and customize or download any existing theme available. During download, enter “.terminalTheme” (with the dot) in the CSS Scope input box.
Extract the zip files and look for the css folder containing the theme that we will be adding to aXes.
Copy the folder containing the selected theme.
example: eggplant
Add a prefix “jQtheme_” to the selected theme folder
Example: jQtheme_eggplant
Copy the jQtheme_<theme name> folder to /ifs/axes/ts/ts2/css/projectThemes
If you want the theme to be used in an existing project only and not on all projects, copy it to the folder /ifs/axes/ts/screens/<project name>/projectThemes where <project name> is the project where you want to use this theme.
Make sure to set the authorities of all the file inside the jQtheme_<theme name> to *PUBLIC *R authorities. The note mentioned above also applies for this.
Using the JQuery extension version of this extension, the theme set in the jqueryTheme will only be applied into the screen where this extension is added. Moving to another screen that does not contain this extension will apply the JQuery theme that is set in the Application->Styling->jqueryTheme property. This will allow different screens to have its own JQuery theme.
See Also
Application Style Collection for Application themes