Ever in an experimental mood, I decided to give it a try. Actually the whole bit is documented in the Configuring Siebel Open UI guide in Siebel bookshelf, but as usual you will also find the steps I executed in this post.
Swatches
Before we start, let's talk about "swatches" (and I don't mean the swiss watch brand). A swatch in terms of style sheets is a collection of CSS rules regulating the colors, fonts and icons used in certain areas of web applications.
The following image is taken from the Configuring Siebel Open UI guide and explains the concept nicely.
 |
| Image Source: Siebel Bookshelf, Configuring Siebel Open UI guide. |
Swatch | Description |
A | Application-level navigation bar |
B | List applets |
C | Popup applets |
D | Grid items |
E | Third-level view area |
F | Second-level form applets |
Using ThemeRoller to create custom swatches
Now that we know about swatches, let's open ThemeRoller and create six swatches...
1. Go to http://themeroller.jquerymobile.com.
2. Use the dropdown list in the version number field to select version 1.3.2. As of IP 2013, Siebel Mobile Applications use jQuery Mobile 1.3.0 and 1.3.2 is the closest currently available.
3. Create six swatches (A to F), using the ThemeRoller UI. This is quite straightforward. I found it useful to take care of the global settings first, then start with a single swatch (delete all others). Using the Duplicate feature, I then created five other swatches based on the first and modified them.
The following screenshot shows some very ostentatious example swatches.
4. Once you're finished, simply hit the Download button and provide a name for the theme to download.
5. Extract the downloaded .zip archive.
6. Open the themes folder which is created as part of the extraction process.
7. Copy the .css files from the themes folder to the PUBLIC/%LANGUAGE%/files/custom folder of the Siebel Developer Web Client and/or Siebel Web Server Extension installation directory.
8. Open the images subfolder in the extracted archive.
9. Copy all files from the images subfolder to the PUBLIC/%LANGUAGE%/images/custom folder of the Siebel instance. (Create the custom folder if necessary).
10. Navigate to the PUBLIC/%LANGUAGE%/files/custom folder and open the file with the .min.css extension using a suitable editor.
11. Replace all occurrences of “images/” with “../../images/custom/”.
12. Save the file.
13. Open the custom mobiletheme.js file which should already exist in the siebel/customscripts folder.
14. Add the following code to the file:
SiebelApp.ThemeManager.addResource(
"SBL-MOBILE",
{
css : {
custom : "files/custom/mystyle.min.css"
}
}
);
The above code uses the addResource method of the ThemeManager class to add the mystyle.min.css file to the existing SBL-MOBILE theme. Note that the file name could be different, depending on the name you chose in step 4.
15. If not already done, register the custom/mobiletheme.js file in the Manifest Filesview of the Administration - Application screen and add the file to a custom PLATFORM DEPENDENT entry in the Manifest Administration view, providing a valid object expression such as “Mobile”.
16. Launch the mobile application.
17. Verify that the custom style sheet is loaded.
As an alternative to using the addResource method, we can also register a new custom theme.
And here is the result in all it's glory (sorry for the colors but I tried to show the different swatches rather than aim for an award-winning style).
Summary
Using the jQuery Mobile ThemeRoller is a simple approach to quickly create custom mobile themes.
However, the style sheet produced by ThemeRoller does not cover all aspects of Siebel Mobile Applications such as icons and buttons. The appearance of these artifacts needs manual fine-tuning.
have a nice day
@lex
אין תגובות:
הוסף רשומת תגובה