|
|
| (3 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{ZKSpreadsheetEssentials3PageHeader}}
| |
| | | | |
| − | since 3.5.0
| |
| − |
| |
| − | ZK Spreadsheet provides an extensive component set that allow web developers to use as building blocks for easy web page UI construction.
| |
| − | Theme is a collection of stylesheets and associated images for its component set. Stylesheets are the files with extension of ".css.dsp". Think of them as normal CSS files that could utilize JSP taglib functionality. Associated images all have file extension either of ".gif" or ".png".
| |
| − | Please refer to the subsections for the process of creating custom themes and packaging them inside jar files
| |
| − |
| |
| − | = Create a theme project skeleton =
| |
| − |
| |
| − | The general idea is described in the introductory paragraph. Since classic <ref name="zssthemes">Classic Theme[https://github.com/zkoss/zkspreadsheet/tree/3.5/classic]</ref> is the official example theme, web developers could simply clone the classic<ref name="zssthemes"/> project, and use it as a starting point.
| |
| − |
| |
| − | = Modify the theme resources =
| |
| − |
| |
| − | Now it is just a matter of modifying the relevant stylesheets and importing associated image files.
| |
| − |
| |
| − | Instead of creating a theme project from scratch, it is easier to use one of the existing standard theme as a template.
| |
| − |
| |
| − | Setting up the environment:
| |
| − | <ol>
| |
| − | <li>Clone classic theme <ref name="zssthemes"/> from github, if haven't done so.</li>
| |
| − | <li>Import Classic as an Existing Maven Project into Eclipse.</li>
| |
| − | <li>Rename all the file names and folder names that contains the word ''classic'' to the theme name of your choice</li>
| |
| − | <li>Unpack the generated archive to replace the content originally inside the folder '''src/archive/web/classic/js/zss'''</li>
| |
| − | </ol>
| |
| − |
| |
| − | Next, the new theme will need to be registered first before it could be used by the ZK Spreadsheet application. For archive-based themes, this is done by providing an implementation of the <javadoc type="interface">org.zkoss.zk.ui.util.WebAppInit</javadoc> interface.
| |
| − |
| |
| − | '''Note:''' the registered name should match the folder name.
| |
| − |
| |
| − | For example, assume the custom theme is named '''darkstar''',
| |
| − |
| |
| − | <source lang="java" line="true" highlight="7">
| |
| − | package foo;
| |
| − | import org.zkoss.zss.theme.SpreadsheetThemes;
| |
| − |
| |
| − | public class DarkstarThemeWebAppInit implements WebAppInit {
| |
| − | @Override
| |
| − | public void init(WebApp webapp) throws Exception {
| |
| − | SpreadsheetThemes.register("darkstar");
| |
| − | }
| |
| − | }
| |
| − | </source>
| |
| − |
| |
| − | Also, make sure that '''metainfo/zk/config.xml''' contained the following configuration.
| |
| − |
| |
| − | <source lang="xml" highlight="4">
| |
| − | <config>
| |
| − | ...
| |
| − | <listener>
| |
| − | <listener-class>foo.DarkstarThemeWebInit</listner-class>
| |
| − | </listener>
| |
| − | ...
| |
| − | </config>
| |
| − | </source>
| |
| − |
| |
| − | Here would just summarize the steps.
| |
| − |
| |
| − | General steps for component style modification:
| |
| − | <ol>
| |
| − | <li>Locate the stylesheet for a given component</li>
| |
| − | <li>Modify existing images or add new images as needed</li>
| |
| − | <li>Customize the spreadsheet style by tweaking the stylesheet located in step 1</li>
| |
| − | </ol>
| |
| − |
| |
| − | = Use a Theme =
| |
| − |
| |
| − | Using a anchive-based theme in a ZK Spreadsheet Application is simple. Simply put the theme jar file inside the '''WEB-INF/lib''' folder of your ZK Spreadsheet application. During the startup of your application, the new custom theme would be automatically registered, and available to use.
| |
| − |
| |
| − | The process can be summarized as follows:
| |
| − |
| |
| − | <ol>
| |
| − | <li>Put the theme jar file inside '''WEB-INF/lib''' folder</li>
| |
| − | <li>Ready to use</li>
| |
| − | </ol>
| |
| − |
| |
| − | = Switching Themes =
| |
| − |
| |
| − | Standard theme resolution checks the theme settings in the following order.
| |
| − |
| |
| − | # Cookies
| |
| − | # Library property
| |
| − | # Theme priority
| |
| − |
| |
| − | == Dynamically switching themes using Cookies ==
| |
| − |
| |
| − | <source lang="java">
| |
| − | SpreadsheetThemes.setTheme(Executions.getCurrent(), "custom");
| |
| − | Executions.sendRedirect();
| |
| − | </source>
| |
| − |
| |
| − | == Dynamically switching themes using Library Property ==
| |
| − |
| |
| − | Library property could be used to assign a preferred theme when the current theme setting could not be obtained from Cookies.
| |
| − |
| |
| − | '''Programmatically:'''
| |
| − |
| |
| − | <source lang="java">
| |
| − | Library.setProperty("org.zkoss.zss.theme.preferred", "custom");
| |
| − | Executions.sendRedirect();
| |
| − | </source>
| |
| − |
| |
| − | '''Declaratively:''' in ('''WEB-INF/zk.xml''')
| |
| − | <source lang="xml">
| |
| − | <library-property>
| |
| − | <name>org.zkoss.zss.theme.preferred</name>
| |
| − | <value>custom</value>
| |
| − | </library-property>
| |
| − | </source>
| |
| − |
| |
| − |
| |
| − | = References =
| |
| − |
| |
| − | <references/>
| |
| − |
| |
| − | {{ZKSpreadsheetEssentialsPageFooter}}
| |