Style |
Used to manipulate and facilitate the styles in the Style Store.
Syntax
HTML |
<eibus:style id=sId></eibus:style> |
where,sIDdenotes the unique identifier of the style component.
The default style sheet that is applied to all the pages when the pages are loaded is calledSystemStyle. The style component provides an option to change the look and feel of the page by changing the systemStyle to any other style. It also allows the user to personalize styles for the pages within an application with the help ofApplicationStyle.
To dynamically add and initialize this component, you can use theinitializeHTMLElementsoraddTypemethods of the Application object.
The following table lists the methods that are defined in this component:
Table 1. List of Methods
Method |
Description |
|---|---|
closeStyleOverview(bUnconditional) |
Closes the Style Overview application displayed on the right frame of the Process Platform Ajax Toolkit framework. It takes a parameterbUnconditional, which is optional and is a Boolean that specifies whether the style overview application is to be closed unconditionally. |
Retrieves the style of the current application (ApplicationStyle). |
|
Retrieves all the classes of a particular style sheet. |
|
Retrieves all the rules of a particular style sheet. |
|
Retrieves all the available style sheets. |
|
Retrieves the default SystemStyle that is currently applied on all loaded applications (SystemStyle). |
|
hideStyleMonitor |
Hides the style monitor from display. The style monitor will always be running in the background even if it is hidden. showStyleMonitor() method can then be used to view the Style monitor. |
Sets the style specified for the current application. |
|
Sets the style specified to all the loaded applications (SystemStyle). |
|
showPersonalizationEditor |
Shows the Style Editor / Personalization Editor in the left frame of Process Platform Ajax Toolkit framework. |
showStyleMonitor |
Shows the Style monitor. |
showStyleOverview |
Shows the style Overview application on the right frame of the Process Platform Ajax Toolkit framework. |
startStyleMonitor(fpCallBack) |
Starts the Style Monitor. It takes an optional parameter fpCallBack, which is a pointer that specifies the function to call after starting the Style monitor. |
stopStyleMonitor(bUncontitional) |
Stops the style monitor. It takes a parameter bUnconditional, which is optional and is a Boolean that specifies whether the style monitor application is to be closed unconditionally. |
Example
The following example shows the usage of this library:
<html xmlns:eibus> <head> <title>Demonstration of a style</title> <script src="/cordys/wcp/application.js"></script> <script language="JScript"> function afterStart() { application.notify("Style Monitor Started Successfully"); } function stopMonitor() { mystyle.stopStyleMonitor(false); application.notify("Style Monitor Stopped"); } function closeOverview() { mystyle.closeStyleOverview(false); application.notify("Style Overview Closed"); } function afterGettingStyleSheets(styles) { var alertMessage = "All styles : \n\n"; for (style in styles) { alertMessage += "\t" + styles[style].name + "\n\n"; } application.notify(alertMessage); } function afterGettingClasses(classes) { var alertMessage = "All Classes : \n\n"; for (index in classes) { alertMessage += "\t" + classes[index] + "\n\n"; } application.notify(alertMessage); } function afterGettingRules(rules) { var alertMessage = "All Rules : \n\n"; for (index in rules) { alertMessage += "\t" + index + "\n\n"; } application.notify(alertMessage); } </script> </head> <body> <eibus:style id="mystyle"></eibus:style> <center> <h5> The functionality provided in style.htm can be viewed from the respective buttons. </h5> <h6> [It is expected that this page is executed when inside the Process Platform Ajax Toolkit Application Framework] </h6> <br> <table> <tr> <td valign="top">Style :</td> <td> </td> <td> <eibus:select id="t1" value="cordys" class="input" style="width:150px;height:20px"> <div value="default">Default</div> <div value="cordys">Cordys</div> <div value="expedition">Expedition</div> <div value="northwind">Northwind</div> <div value="siena">Siena</div> <div value="tiara">Tiara</div> </eibus:select> <br> </td> </tr> <tr> <td valign="top">System :</td> <td> </td> <td> <button style="width:150px" class="medium" onClick="mystyle.setSystemStyle(t1.getValue())" id=button1 name=button1>Set System style</button> <button style="width:150px" class="medium" onClick= "application.notify('Current System style : ' + mystyle.getSystemStyle())" id=button2 name=button2>Get System style</button> <br><br> </td> </tr> <tr> <td valign="top">Application :</td> <td> </td> <td> <button style="width:150px" class="medium" onClick="mystyle.setApplicationStyle(t1.getValue(), application)" id=button3 name=button3>Set Application style</button> <button style="width:150px" class="medium" onClick="application.notify('Current Application style : ' + mystyle.getApplicationStyle(application))" id=button4 name=button4>Get Application style</button> <br><br> </td> </tr> <tr> <td valign="top">Monitor :</td> <td> </td> <td> <button style="width:150px" class="medium"onClick="mystyle.showStyleMonitor()" id=button5 name=button5>Show Style Monitor</button> <button style="width:150px" class="medium"onClick="mystyle.hideStyleMonitor()" id=button6 name=button6>Hide Style Monitor</button> <br><br> <button style="width:150px" class="medium"onClick="mystyle.startStyleMonitor(afterStart)" id=button7 name=button7>Start Style Monitor</button> <button style="width:150px" class="medium"onClick="stopMonitor()" id=button8 name=button8>Stop Style Monitor</button> <br><br> </td> </tr> <tr> <td valign="top">Rules, Classes :</td> <td> </td> <td> <button style="width:150px" class="medium"onClick="mystyle.getStyleSheets(afterGettingStyleSheets)" id=button9 name=button9>Get StyleSheets</button> <button style="width:150px" class="medium"onClick="mystyle.getClasses(t1.value, afterGettingClasses)" id=button10 name=button10>Get Classes</button> <br><br> <button style="width:150px" class="medium"onClick="mystyle.getRules(t1.value, afterGettingRules)" id=button11 name=button11>Get Rules</button> <br><br> </td> </tr> <tr> <td valign="top">Editors :</td> <td style="width:10%"> </td> <td> <button style="width:150px" class="medium"onClick="mystyle.showStyleOverview(t1.value)" id=button12 name=button12>Show Style Overview</button> <button style="width:150px" class="medium"onClick="closeOverview()" id=button13 name=button13>Close Style Overview</button> <br> <button style="width:200px" class="medium"onClick="mystyle.showPersonalizationEditor()" id=button14 name=button14>Show Personalization Editor</button> </td> </tr> </table> </body> </html>