Navigation:  How To > How to Customize ... > WebOffice flex (flash) Client > Layout Customizations >

Layout Customizations by project skin

Previous pageReturn to chapter overviewNext page

Actually the WebOffice flex (flash) client is deployed with different skins, the standard (blue) skin and optional skins, i.e.: grey, olivedrab and navajowhite3. Every WebOffice flex (flash) project can be started

either without the parameter skin, then the default blue skin will be used

or with the parameter skin for an optional skin, e.g. &skin=grey

 

Note: For customization of the stylesheet the Adobe Flex SDK 3.5 (free) is needed. See http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK for details. This tool is needed to decompile/compile SWF files.

 

Define an own project skin

To define an own project skin, several customizations can be done. Go through the steps from the example below:

Navigate to C:\Tomcat\webapps\<WebOffice application>\client_flex\bin-release. Copy the config_grey.xml and rename it to config_[mySkin].xml e.g. config_green.xml. Open the file with a text editor and search and replace the word grey with the name of your skin. Save the configuration file.

Navigate to C:\Tomcat\webapps\<WebOffice application>\client_flex\bin-release\com\mysynergis\webofficeflex\assets\styles and copy and rename the grey folder to the name of your skin. Open the default11.css stylesheet inside the new folder with a text editor (before the SWF file have to be decompiled). Search and replace the word grey with the name of your skin. Next step is to change the relative paths to the images to full qualified paths (use “/” instead of “\” for folder structure). To change the layout of some functionalities of the WebOffice flex (flash) client in this CSS file, have a look to the table in Layout Customizations by styles.

Navigate to C:\Tomcat\webapps\<WebOffice application>\client_flex\bin-release\com\mysynergis\webofficeflex\widgets and copy and rename the folder grey to the name of your skin. For changing the style of the navigation panel Adobe Flex Builder is needed. Therefore it is not recommended to change it.

Before changing the images navigate to C:\Tomcat\webapps\<WebOffice application>\client_flex\bin-release\com\mysynergis\webofficeflex\assets\images and copy and rename the folder grey to the name of your skin. Editing the images b_toolactive36.png and b_toolinactive36.png affects the tool buttons. Follow the steps from Layout Customizations by images to define/exchange your own images.

Finally the decompiled SWF file have to be compiled again. Enter the command window of your OS. Navigate to the “bin” folder of your Flex SDK. Create the SWF by compiling the stylesheet:
mxmlc.exe C:\Tomcat\webapps\<WebOffice application>\client_flex\bin-release\com\mysynergis\webofficeflex\assets\styles\<stylename>\default11.css
howto_flex_by_project_skin01

 

 

Note: Please see Project Skins for more details about project skins in the WebOffice flex (flash) client.

Note: If the Project Skin property is configured, the skin parameter for the flex client (e.g. “&skin=olivedrab”) will have no effect.