OFBiz › OFBiz - Commits

svn commit: r1826200 [3/3] - in /ofbiz: ofbiz-plugins/trunk/birt/documents/ tools/wiki-files/ tools/wiki-files/BuildBot/ tools/wiki-files/birt/ tools/wiki-files/data-model/ tools/wiki-files/demos/ tools/wiki-files/themes/

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

1 message

jleroux@apache.org

svn commit: r1826200 [3/3] - in /ofbiz: ofbiz-plugins/trunk/birt/documents/ tools/wiki-files/ tools/wiki-files/BuildBot/ tools/wiki-files/birt/ tools/wiki-files/data-model/ tools/wiki-files/demos/ tools/wiki-files/themes/

Modified: ofbiz/tools/wiki-files/themes/README.md.html
URL: http://svn.apache.org/viewvc/ofbiz/tools/wiki-files/themes/README.md.html?rev=1826200&r1=1826199&r2=1826200&view=diff
==============================================================================
--- ofbiz/tools/wiki-files/themes/README.md.html (original)
+++ ofbiz/tools/wiki-files/themes/README.md.html Thu Mar 8 10:42:54 2018
@@ -1,48 +1,84 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="Content-Style-Type" content="text/css" />
+ <meta charset="utf-8" />
<meta name="generator" content="pandoc" />
- <title></title>
- <style type="text/css">code{white-space: pre;}</style>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+ <title>README</title>
<style type="text/css">
-div.sourceCode { overflow-x: auto; }
-table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
- margin: 0; padding: 0; vertical-align: baseline; border: none; }
-table.sourceCode { width: 100%; line-height: 100%; }
-td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
-td.sourceCode { padding-left: 5px; }
-code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
-code > span.dt { color: #902000; } /* DataType */
-code > span.dv { color: #40a070; } /* DecVal */
-code > span.bn { color: #40a070; } /* BaseN */
-code > span.fl { color: #40a070; } /* Float */
-code > span.ch { color: #4070a0; } /* Char */
-code > span.st { color: #4070a0; } /* String */
-code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
-code > span.ot { color: #007020; } /* Other */
-code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
-code > span.fu { color: #06287e; } /* Function */
-code > span.er { color: #ff0000; font-weight: bold; } /* Error */
-code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
-code > span.cn { color: #880000; } /* Constant */
-code > span.sc { color: #4070a0; } /* SpecialChar */
-code > span.vs { color: #4070a0; } /* VerbatimString */
-code > span.ss { color: #bb6688; } /* SpecialString */
-code > span.im { } /* Import */
-code > span.va { color: #19177c; } /* Variable */
-code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
-code > span.op { color: #666666; } /* Operator */
-code > span.bu { } /* BuiltIn */
-code > span.ex { } /* Extension */
-code > span.pp { color: #bc7a00; } /* Preprocessor */
-code > span.at { color: #7d9029; } /* Attribute */
-code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
-code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
-code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
-code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
+ code{white-space: pre-wrap;}
+ span.smallcaps{font-variant: small-caps;}
+ span.underline{text-decoration: underline;}
+ div.column{display: inline-block; vertical-align: top; width: 50%;}
</style>
+ <style type="text/css">
+a.sourceLine { display: inline-block; line-height: 1.25; }
+a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
+a.sourceLine:empty { height: 1.2em; position: absolute; }
+.sourceCode { overflow: visible; }
+code.sourceCode { white-space: pre; position: relative; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+code.sourceCode { white-space: pre-wrap; }
+a.sourceLine { text-indent: -1em; padding-left: 1em; }
+}
+pre.numberSource a.sourceLine
+ { position: relative; }
+pre.numberSource a.sourceLine:empty
+ { position: absolute; }
+pre.numberSource a.sourceLine::before
+ { content: attr(data-line-number);
+ position: absolute; left: -5em; text-align: right; vertical-align: baseline;
+ border: none; pointer-events: all;
+ -webkit-touch-callout: none; -webkit-user-select: none;
+ -khtml-user-select: none; -moz-user-select: none;
+ -ms-user-select: none; user-select: none;
+ padding: 0 4px; width: 4em;
+ color: #aaaaaa;
+ }
+pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
+div.sourceCode
+ { }
+@media screen {
+a.sourceLine::before { text-decoration: underline; }
+}
+code span.al { color: #ff0000; font-weight: bold; } /* Alert */
+code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
+code span.at { color: #7d9029; } /* Attribute */
+code span.bn { color: #40a070; } /* BaseN */
+code span.bu { } /* BuiltIn */
+code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
+code span.ch { color: #4070a0; } /* Char */
+code span.cn { color: #880000; } /* Constant */
+code span.co { color: #60a0b0; font-style: italic; } /* Comment */
+code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
+code span.do { color: #ba2121; font-style: italic; } /* Documentation */
+code span.dt { color: #902000; } /* DataType */
+code span.dv { color: #40a070; } /* DecVal */
+code span.er { color: #ff0000; font-weight: bold; } /* Error */
+code span.ex { } /* Extension */
+code span.fl { color: #40a070; } /* Float */
+code span.fu { color: #06287e; } /* Function */
+code span.im { } /* Import */
+code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
+code span.kw { color: #007020; font-weight: bold; } /* Keyword */
+code span.op { color: #666666; } /* Operator */
+code span.ot { color: #007020; } /* Other */
+code span.pp { color: #bc7a00; } /* Preprocessor */
+code span.sc { color: #4070a0; } /* SpecialChar */
+code span.ss { color: #bb6688; } /* SpecialString */
+code span.st { color: #4070a0; } /* String */
+code span.va { color: #19177c; } /* Variable */
+code span.vs { color: #4070a0; } /* VerbatimString */
+code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
+ </style>
+ 
</head>
<body>

- <default-view-size value="20"/>
- <autocompleter
- default-view-size="10"
- default-min-lenght="2"
- default-delay="300"
- display-return-field="true"/>
- <lookup
- position="topleft"
- width="640"
- height="500"/>
- <layered-modal
- width="800"
- height="600"/>
- </widget-properties></code></pre></div>
-<h2 id="themes-specific-properties">Theme's specific properties</h2>
+<div class="sourceCode" id="cb4"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb4-1" data-line-number="1"> <widget-properties></a>
+<a class="sourceLine" id="cb4-2" data-line-number="2"> <default-view-size value="20"/></a>
+<a class="sourceLine" id="cb4-3" data-line-number="3"> <autocompleter</a>
+<a class="sourceLine" id="cb4-4" data-line-number="4"> default-view-size="10"</a>
+<a class="sourceLine" id="cb4-5" data-line-number="5"> default-min-lenght="2"</a>
+<a class="sourceLine" id="cb4-6" data-line-number="6"> default-delay="300"</a>
+<a class="sourceLine" id="cb4-7" data-line-number="7"> display-return-field="true"/></a>
+<a class="sourceLine" id="cb4-8" data-line-number="8"> <lookup</a>
+<a class="sourceLine" id="cb4-9" data-line-number="9"> position="topleft"</a>
+<a class="sourceLine" id="cb4-10" data-line-number="10"> width="640"</a>
+<a class="sourceLine" id="cb4-11" data-line-number="11"> height="500"/></a>
+<a class="sourceLine" id="cb4-12" data-line-number="12"> <layered-modal</a>
+<a class="sourceLine" id="cb4-13" data-line-number="13"> width="800"</a>
+<a class="sourceLine" id="cb4-14" data-line-number="14"> height="600"/></a>
+<a class="sourceLine" id="cb4-15" data-line-number="15"> </widget-properties></a></code></pre></div>
+<h2 id="themes-specific-properties">Themeâs specific properties</h2>
This block contains all properties specific to this theme. In general these are some properties present on ftl template, that are initialized by the theme and can be surchaged by another theme through the extends elements.
-<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"> <property name="jgrowlPosition" value="center" type="String"/>
- <property name="jgrowlWidth" value="800" type="Integer"/>
- <property name="jgrowlHeight" value="" type="Integer"/>
- <property name="jgrowlSpeed" value="100" type="Integer"/></code></pre></div>
+<div class="sourceCode" id="cb5"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb5-1" data-line-number="1"> <property name="jgrowlPosition" value="center" type="String"/></a>
+<a class="sourceLine" id="cb5-2" data-line-number="2"> <property name="jgrowlWidth" value="800" type="Integer"/></a>
+<a class="sourceLine" id="cb5-3" data-line-number="3"> <property name="jgrowlHeight" value="" type="Integer"/></a>
+<a class="sourceLine" id="cb5-4" data-line-number="4"> <property name="jgrowlSpeed" value="100" type="Integer"/></a></code></pre></div>
<h2 id="ftl-macro-library">Ftl macro library</h2>
This block defines for each technology implemented by the screen engine where it can find the macro library for each model (Screen, Form, Tree, Menu)
-<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"> <templates>
- <template name="screen" type="html" content-type="UTF-8" encoding="none" encoder="html" compress="false">
- <template-file widget="screen" location="component://common-theme/template/macro/HtmlScreenMacroLibrary.ftl"/>
- <template-file widget="form" location="component://common-theme/template/macro/HtmlFormMacroLibrary.ftl"/>
- <template-file widget="tree" location="component://common-theme/template/macro/HtmlTreeMacroLibrary.ftl"/>
- <template-file widget="menu" location="component://common-theme/template/macro/HtmlMenuMacroLibrary.ftl"/>
- </template>
- ...
- </templates></code></pre></div>
+<div class="sourceCode" id="cb6"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb6-1" data-line-number="1"> <templates></a>
+<a class="sourceLine" id="cb6-2" data-line-number="2"> <template name="screen" type="html" content-type="UTF-8" encoding="none" encoder="html" compress="false"></a>
+<a class="sourceLine" id="cb6-3" data-line-number="3"> <template-file widget="screen" location="component://common-theme/template/macro/HtmlScreenMacroLibrary.ftl"/></a>
+<a class="sourceLine" id="cb6-4" data-line-number="4"> <template-file widget="form" location="component://common-theme/template/macro/HtmlFormMacroLibrary.ftl"/></a>
+<a class="sourceLine" id="cb6-5" data-line-number="5"> <template-file widget="tree" location="component://common-theme/template/macro/HtmlTreeMacroLibrary.ftl"/></a>
+<a class="sourceLine" id="cb6-6" data-line-number="6"> <template-file widget="menu" location="component://common-theme/template/macro/HtmlMenuMacroLibrary.ftl"/></a>
+<a class="sourceLine" id="cb6-7" data-line-number="7"> </template></a>
+<a class="sourceLine" id="cb6-8" data-line-number="8"> ...</a>
+<a class="sourceLine" id="cb6-9" data-line-number="9"> </templates></a></code></pre></div>
<blockquote>
Note: If you want surcharge some macros, you can just create the desired macros and import the others from common-theme (at the top of file) like that : <code><#include "component://common-theme/template/macro/HtmlFormMacroLibrary.ftl"/></code>
</blockquote>
<h2 id="screen-library">Screen library</h2>
This block defines where OFBiz can find all official screens definitions in framework/common
-Normally, you don't need to change this file except if you need to define a default screen style that doesn't exist OOTB. If you need to extend an existing one, you have to do it in the theme directory.
+Normally, you donât need to change this file except if you need to define a default screen style that doesnât exist OOTB. If you need to extend an existing one, you have to do it in the theme directory.
To define a new default screen style, you have to add it in this file, and point to the screen decorator in common-theme to define your default screen style as the default one.
-<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"> <common-screens>
- <structural-decorator default-location="component://common-theme/widget/CommonScreens.xml">
- <screen name="GlobalDecorator"/>
- ...
- </structural-decorator>
- <embed-decorator default-location="component://common-theme/widget/CommonScreens.xml">
- <screen name="FindScreenDecorator"/>
- </embed-decorator>
- <general-screen default-location="component://common-theme/widget/CommonScreens.xml">
- <screen name="geoChart"/>
- ...
- </general-screen>
- </common-screens></code></pre></div>
+<div class="sourceCode" id="cb7"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb7-1" data-line-number="1"> <common-screens></a>
+<a class="sourceLine" id="cb7-2" data-line-number="2"> <structural-decorator default-location="component://common-theme/widget/CommonScreens.xml"></a>
+<a class="sourceLine" id="cb7-3" data-line-number="3"> <screen name="GlobalDecorator"/></a>
+<a class="sourceLine" id="cb7-4" data-line-number="4"> ...</a>
+<a class="sourceLine" id="cb7-5" data-line-number="5"> </structural-decorator></a>
+<a class="sourceLine" id="cb7-6" data-line-number="6"> <embed-decorator default-location="component://common-theme/widget/CommonScreens.xml"></a>
+<a class="sourceLine" id="cb7-7" data-line-number="7"> <screen name="FindScreenDecorator"/></a>
+<a class="sourceLine" id="cb7-8" data-line-number="8"> </embed-decorator></a>
+<a class="sourceLine" id="cb7-9" data-line-number="9"> <general-screen default-location="component://common-theme/widget/CommonScreens.xml"></a>
+<a class="sourceLine" id="cb7-10" data-line-number="10"> <screen name="geoChart"/></a>
+<a class="sourceLine" id="cb7-11" data-line-number="11"> ...</a>
+<a class="sourceLine" id="cb7-12" data-line-number="12"> </general-screen></a>
+<a class="sourceLine" id="cb7-13" data-line-number="13"> </common-screens></a></code></pre></div>
Screens are separated in three types : * structural-decorator : contains all decorators that organise the screens structures * embed-decorator : decorator used only on sub screens * general-screen : list all generic inter applications screens # The common-theme This is the root theme that contains all information to ensure a good basic theme for OFBiz. Currently it keeps all old themes system for backward compatibility with ftl template managed by the entity VisualThemeResource
<h1 id="create-your-own-theme">Create your own theme</h1>
As a theme is a component, you can create a new theme like a plugin.
After creating a component, you can add the two minimal information :
<ul>
-<li>Theme.xml file in plugins/my-theme/widget/ with minimal information :
-<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"><theme name="my-theme"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/widget-theme.xsd">
-<visual-themes>
- <visual-theme id="MY_THEME" display-name="My Theme"/>
-</visual-themes>
-</theme></code></pre></div></li>
-<li>your data file to add your visual theme in plugins/my-theme/data/
-<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"><entity-engine-xml>
-<VisualTheme visualThemeId="MY_THEME" visualThemeSetId="BACKOFFICE"/>
-</entity-engine-xml></code></pre></div>
-The presence of VisualTheme entity helps to indicate which theme is available in your instance, specially helpful for tenant installations.</li>
+<li>Theme.xml file in plugins/my-theme/widget/ with minimal information :</li>
+</ul>
+<div class="sourceCode" id="cb8"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb8-1" data-line-number="1"><theme name="my-theme"</a>
+<a class="sourceLine" id="cb8-2" data-line-number="2"> xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"</a>
+<a class="sourceLine" id="cb8-3" data-line-number="3"> xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/widget-theme.xsd"></a>
+<a class="sourceLine" id="cb8-4" data-line-number="4"> <visual-themes></a>
+<a class="sourceLine" id="cb8-5" data-line-number="5"> <visual-theme id="MY_THEME" display-name="My Theme"/></a>
+<a class="sourceLine" id="cb8-6" data-line-number="6"> </visual-themes></a>
+<a class="sourceLine" id="cb8-7" data-line-number="7"></theme></a></code></pre></div>
+<ul>
+<li>your data file to add your visual theme in plugins/my-theme/data/</li>
</ul>
+<div class="sourceCode" id="cb9"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb9-1" data-line-number="1"><entity-engine-xml></a>
+<a class="sourceLine" id="cb9-2" data-line-number="2"> <VisualTheme visualThemeId="MY_THEME" visualThemeSetId="BACKOFFICE"/></a>
+<a class="sourceLine" id="cb9-3" data-line-number="3"></entity-engine-xml></a></code></pre></div>
+The presence of VisualTheme entity helps to indicate which theme is available in your instance, specially helpful for tenant installations.
To display your theme in OFBiz theme library, you can complete the information on each visual theme like
<pre><code><theme name="my-theme"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
@@ -176,17 +214,17 @@ under the License.
</blockquote>
<h2 id="extends-common-theme">extends common-theme</h2>
This is a first step to understand how the theme system works. With your new theme, you can try to surchage different elements. To start, extends the common-theme :
-<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"><theme name="my-theme"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/widget-theme.xsd">
- <visual-themes>
- <visual-theme id="MY_THEME" display-name="My Theme">
- <description>My new funny theme under nice tecnno</description>
- <screenshot location="/mytheme/screenshot1.png"/>
- </visual-theme>
- </visual-themes>
- <extends location="component://common-theme/widget/Theme.xml"/>
-</theme></code></pre></div>
+<div class="sourceCode" id="cb11"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb11-1" data-line-number="1"><theme name="my-theme"</a>
+<a class="sourceLine" id="cb11-2" data-line-number="2"> xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"</a>
+<a class="sourceLine" id="cb11-3" data-line-number="3"> xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/widget-theme.xsd"></a>
+<a class="sourceLine" id="cb11-4" data-line-number="4"> <visual-themes></a>
+<a class="sourceLine" id="cb11-5" data-line-number="5"> <visual-theme id="MY_THEME" display-name="My Theme"></a>
+<a class="sourceLine" id="cb11-6" data-line-number="6"> <description>My new funny theme under nice tecnno</description></a>
+<a class="sourceLine" id="cb11-7" data-line-number="7"> <screenshot location="/mytheme/screenshot1.png"/></a>
+<a class="sourceLine" id="cb11-8" data-line-number="8"> </visual-theme></a>
+<a class="sourceLine" id="cb11-9" data-line-number="9"> </visual-themes></a>
+<a class="sourceLine" id="cb11-10" data-line-number="10"> <extends location="component://common-theme/widget/Theme.xml"/></a>
+<a class="sourceLine" id="cb11-11" data-line-number="11"></theme></a></code></pre></div>
Now your theme should be operational, but without particularity.
You can surcharge a ftl macro, to do this create your own ftl macro file in plugins/my-theme/templates/macro/HtmlFormMacroLibrary.ftl with
<pre class="ftl"><code><#include "component://common-theme/template/macro/HtmlFormMacroLibrary.ftl"/>
@@ -199,89 +237,89 @@ under the License.
</#if>
</#macro></code></pre>
Now indicate to your theme that you want use this library
-<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"><theme name="my-theme"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/widget-theme.xsd">
- <visual-themes>
- <visual-theme id="MY_THEME" display-name="My Theme">
- <description>My new funny theme under nice tecnno</description>
- <screenshot location="/mytheme/screenshot1.png"/>
- </visual-theme>
- </visual-themes>
- <extends location="component://common-theme/widget/Theme.xml"/>
- <templates>
- <template name="screen" type="html" content-type="UTF-8" encoding="none" encoder="html" compress="false">
- <template-file widget="form" location="component://my-theme/template/macro/HtmlFormMacroLibrary.ftl"/>
- </template>
- </templates>
-</theme></code></pre></div>
-and check the result when you select your theme. The result isn't really interesting but it's to understand how it works.
+<div class="sourceCode" id="cb13"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb13-1" data-line-number="1"><theme name="my-theme"</a>
+<a class="sourceLine" id="cb13-2" data-line-number="2"> xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"</a>
+<a class="sourceLine" id="cb13-3" data-line-number="3"> xsi:noNamespaceSchemaLocation="http://ofbiz.apache.org/dtds/widget-theme.xsd"></a>
+<a class="sourceLine" id="cb13-4" data-line-number="4"> <visual-themes></a>
+<a class="sourceLine" id="cb13-5" data-line-number="5"> <visual-theme id="MY_THEME" display-name="My Theme"></a>
+<a class="sourceLine" id="cb13-6" data-line-number="6"> <description>My new funny theme under nice tecnno</description></a>
+<a class="sourceLine" id="cb13-7" data-line-number="7"> <screenshot location="/mytheme/screenshot1.png"/></a>
+<a class="sourceLine" id="cb13-8" data-line-number="8"> </visual-theme></a>
+<a class="sourceLine" id="cb13-9" data-line-number="9"> </visual-themes></a>
+<a class="sourceLine" id="cb13-10" data-line-number="10"> <extends location="component://common-theme/widget/Theme.xml"/></a>
+<a class="sourceLine" id="cb13-11" data-line-number="11"> <templates></a>
+<a class="sourceLine" id="cb13-12" data-line-number="12"> <template name="screen" type="html" content-type="UTF-8" encoding="none" encoder="html" compress="false"></a>
+<a class="sourceLine" id="cb13-13" data-line-number="13"> <template-file widget="form" location="component://my-theme/template/macro/HtmlFormMacroLibrary.ftl"/></a>
+<a class="sourceLine" id="cb13-14" data-line-number="14"> </template></a>
+<a class="sourceLine" id="cb13-15" data-line-number="15"> </templates></a>
+<a class="sourceLine" id="cb13-16" data-line-number="16"></theme></a></code></pre></div>
+and check the result when you select your theme. The result isnât really interesting but itâs to understand how it works.
<h2 id="create-from-scratch">create from scratch</h2>
-TODO...
+TODOâ¦
<h1 id="backware-compatibility-with-ofbiz-16.11-and-above">Backware compatibility with OFBiz 16.11 and above</h1>
<h2 id="how-themes-worked-before">How themes worked before</h2>
Before the theme management by model definition, all configurations have been present in the database through entity VisualTheme and VisualThemeRessource. These ressources were loaded in a layoutProperties variable and used directly by decorator screens and ftl templates.
<h2 id="now-with-the-common-theme">Now with the common-theme</h2>
All this logic is still present in the common-theme template to keep backward compatibility, but the VisualThemeRessource is now useless and properties have been migrated to the Theme definition in the part theme-properties ### Example with BlueLight The blue light theme has been these properties in VisualThemeRessource :
-<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"> <VisualTheme visualThemeId="BLUELIGHT" visualThemeSetId="BACKOFFICE" description="BlueLight Theme: breadcrumbs, drop-down menus and rounded corners"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_NAME" resourceValue="BLUELIGHT" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_IMAGE_URL" resourceValue="/images/ofbiz_logo.png" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_SHORTCUT_ICON" resourceValue="/images/ofbiz.ico" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_SCREENSHOT" resourceValue="/bluelight/screenshot.jpg" sequenceId="01"/>
-
- 
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_STYLESHEET" resourceValue="/bluelight/style.css" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HELPSTYLESHEET" resourceValue="/bluelight/help.css" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_DOCBOOKSTYLESHEET" resourceValue="/bluelight/webapp/bluelight/docbook.css" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_STYLESHEET" resourceValue="/common/js/jquery/plugins/asmselect/jquery.asmselect-1.0.4a-beta.css" sequenceId="02"/>
-
- 
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/jquery-1.11.0.min.js" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/jquery-migrate-1.2.1.js" sequenceId="02"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/ui/js/jquery-ui-1.10.3.min.js" sequenceId="03"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/asmselect/jquery.asmselect-1.0.4a-beta.js" sequenceId="05"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/datetimepicker/jquery-ui-timepicker-addon.min-1.4.3.js" sequenceId="07"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/fjTimer/jquerytimer-min.js" sequenceId="09"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/mask/jquery.mask-1.14.13.min.js" sequenceId="10"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/jeditable/jquery.jeditable-1.7.3.js" sequenceId="11"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/validate/jquery.validate.min.js" sequenceId="12"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/plugins/OpenLayers-2.13.1.js" sequenceId="13"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/util/OfbizUtil.js" sequenceId="15"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/util/fieldlookup.js" sequenceId="16"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/plugins/date/date.format-1.2.3-min.js" sequenceId="17"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/plugins/date/date.timezone-min.js" sequenceId="18"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/util/miscAjaxFunctions.js" sequenceId="19"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/util/selectMultipleRelatedValues.js" sequenceId="20"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/util/util.js" sequenceId="21"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/plugins/date/FromThruDateCheck.js" sequenceId="22"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/bluelight/dropdown.js" sequenceId="30"/>
-
- 
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_TMPLT_LOC" resourceValue="component://bluelight/template/Header.ftl" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_FTR_TMPLT_LOC" resourceValue="component://bluelight/template/Footer.ftl" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_NAV_OPEN_TMPLT" resourceValue="component://bluelight/template/AppBarOpen.ftl" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_NAV_CLOSE_TMPLT" resourceValue="component://bluelight/template/AppBarClose.ftl" sequenceId="01"/>
- <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_MSG_TMPLT_LOC" resourceValue="component://bluelight/template/Messages.ftl" sequenceId="01"/></code></pre></div>
-Now it's just
-<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"> <VisualTheme visualThemeId="BLUELIGHT" visualThemeSetId="BACKOFFICE"/></code></pre></div>
+<div class="sourceCode" id="cb14"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb14-1" data-line-number="1"> <VisualTheme visualThemeId="BLUELIGHT" visualThemeSetId="BACKOFFICE" description="BlueLight Theme: breadcrumbs, drop-down menus and rounded corners"/></a>
+<a class="sourceLine" id="cb14-2" data-line-number="2"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_NAME" resourceValue="BLUELIGHT" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-3" data-line-number="3"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_IMAGE_URL" resourceValue="/images/ofbiz_logo.png" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-4" data-line-number="4"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_SHORTCUT_ICON" resourceValue="/images/ofbiz.ico" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-5" data-line-number="5"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_SCREENSHOT" resourceValue="/bluelight/screenshot.jpg" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-6" data-line-number="6"></a>
+<a class="sourceLine" id="cb14-7" data-line-number="7"> </a>
+<a class="sourceLine" id="cb14-8" data-line-number="8"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_STYLESHEET" resourceValue="/bluelight/style.css" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-9" data-line-number="9"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HELPSTYLESHEET" resourceValue="/bluelight/help.css" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-10" data-line-number="10"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_DOCBOOKSTYLESHEET" resourceValue="/bluelight/webapp/bluelight/docbook.css" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-11" data-line-number="11"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_STYLESHEET" resourceValue="/common/js/jquery/plugins/asmselect/jquery.asmselect-1.0.4a-beta.css" sequenceId="02"/></a>
+<a class="sourceLine" id="cb14-12" data-line-number="12"></a>
+<a class="sourceLine" id="cb14-13" data-line-number="13"> </a>
+<a class="sourceLine" id="cb14-14" data-line-number="14"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/jquery-1.11.0.min.js" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-15" data-line-number="15"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/jquery-migrate-1.2.1.js" sequenceId="02"/></a>
+<a class="sourceLine" id="cb14-16" data-line-number="16"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/ui/js/jquery-ui-1.10.3.min.js" sequenceId="03"/></a>
+<a class="sourceLine" id="cb14-17" data-line-number="17"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/asmselect/jquery.asmselect-1.0.4a-beta.js" sequenceId="05"/></a>
+<a class="sourceLine" id="cb14-18" data-line-number="18"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/datetimepicker/jquery-ui-timepicker-addon.min-1.4.3.js" sequenceId="07"/></a>
+<a class="sourceLine" id="cb14-19" data-line-number="19"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/fjTimer/jquerytimer-min.js" sequenceId="09"/></a>
+<a class="sourceLine" id="cb14-20" data-line-number="20"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/mask/jquery.mask-1.14.13.min.js" sequenceId="10"/></a>
+<a class="sourceLine" id="cb14-21" data-line-number="21"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/jeditable/jquery.jeditable-1.7.3.js" sequenceId="11"/></a>
+<a class="sourceLine" id="cb14-22" data-line-number="22"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/jquery/plugins/validate/jquery.validate.min.js" sequenceId="12"/></a>
+<a class="sourceLine" id="cb14-23" data-line-number="23"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/plugins/OpenLayers-2.13.1.js" sequenceId="13"/></a>
+<a class="sourceLine" id="cb14-24" data-line-number="24"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/util/OfbizUtil.js" sequenceId="15"/></a>
+<a class="sourceLine" id="cb14-25" data-line-number="25"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/util/fieldlookup.js" sequenceId="16"/></a>
+<a class="sourceLine" id="cb14-26" data-line-number="26"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/plugins/date/date.format-1.2.3-min.js" sequenceId="17"/></a>
+<a class="sourceLine" id="cb14-27" data-line-number="27"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/plugins/date/date.timezone-min.js" sequenceId="18"/></a>
+<a class="sourceLine" id="cb14-28" data-line-number="28"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/util/miscAjaxFunctions.js" sequenceId="19"/></a>
+<a class="sourceLine" id="cb14-29" data-line-number="29"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/util/selectMultipleRelatedValues.js" sequenceId="20"/></a>
+<a class="sourceLine" id="cb14-30" data-line-number="30"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/util/util.js" sequenceId="21"/></a>
+<a class="sourceLine" id="cb14-31" data-line-number="31"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/common/js/plugins/date/FromThruDateCheck.js" sequenceId="22"/></a>
+<a class="sourceLine" id="cb14-32" data-line-number="32"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/bluelight/dropdown.js" sequenceId="30"/></a>
+<a class="sourceLine" id="cb14-33" data-line-number="33"></a>
+<a class="sourceLine" id="cb14-34" data-line-number="34"> </a>
+<a class="sourceLine" id="cb14-35" data-line-number="35"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_HDR_TMPLT_LOC" resourceValue="component://bluelight/template/Header.ftl" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-36" data-line-number="36"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_FTR_TMPLT_LOC" resourceValue="component://bluelight/template/Footer.ftl" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-37" data-line-number="37"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_NAV_OPEN_TMPLT" resourceValue="component://bluelight/template/AppBarOpen.ftl" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-38" data-line-number="38"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_NAV_CLOSE_TMPLT" resourceValue="component://bluelight/template/AppBarClose.ftl" sequenceId="01"/></a>
+<a class="sourceLine" id="cb14-39" data-line-number="39"> <VisualThemeResource visualThemeId="BLUELIGHT" resourceTypeEnumId="VT_MSG_TMPLT_LOC" resourceValue="component://bluelight/template/Messages.ftl" sequenceId="01"/></a></code></pre></div>
+Now itâs just
+<div class="sourceCode" id="cb15"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb15-1" data-line-number="1"> <VisualTheme visualThemeId="BLUELIGHT" visualThemeSetId="BACKOFFICE"/></a></code></pre></div>
And on theme definition
-<div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"> <theme-properties>
- 
- <property name="VT_HDR_JAVASCRIPT['add']" value="/bluelight/dropdown.js" sequenceId="30"/>
- 
- <property name="VT_STYLESHEET['add']" value="/bluelight/style.css"/>
- <property name="VT_HELPSTYLESHEET['add']" value="/bluelight/help.css"/>
- <property name="VT_DOCBOOKSTYLESHEET['add']" value="/bluelight/webapp/bluelight/docbook.css"/>
- 
- <property name="VT_HDR_TMPLT_LOC" value="component://bluelight/template/Header.ftl"/>
- <property name="VT_FTR_TMPLT_LOC" value="component://bluelight/template/Footer.ftl"/>
- <property name="VT_NAV_OPEN_TMPLT" value="component://bluelight/template/AppBarOpen.ftl"/>
- <property name="VT_NAV_CLOSE_TMPLT" value="component://bluelight/template/AppBarClose.ftl"/>
- <property name="VT_MSG_TMPLT_LOC" value="component://bluelight/template/Messages.ftl"/>
- </theme-properties></code></pre></div>
-Values with /images/... have been moved to the common-theme that bluelight extends, the theme definition keeps only what the theme adds to the extended theme.
+<div class="sourceCode" id="cb16"><pre class="sourceCode xml"><code class="sourceCode xml"><a class="sourceLine" id="cb16-1" data-line-number="1"> <theme-properties></a>
+<a class="sourceLine" id="cb16-2" data-line-number="2"> </a>
+<a class="sourceLine" id="cb16-3" data-line-number="3"> <property name="VT_HDR_JAVASCRIPT['add']" value="/bluelight/dropdown.js" sequenceId="30"/></a>
+<a class="sourceLine" id="cb16-4" data-line-number="4"> </a>
+<a class="sourceLine" id="cb16-5" data-line-number="5"> <property name="VT_STYLESHEET['add']" value="/bluelight/style.css"/></a>
+<a class="sourceLine" id="cb16-6" data-line-number="6"> <property name="VT_HELPSTYLESHEET['add']" value="/bluelight/help.css"/></a>
+<a class="sourceLine" id="cb16-7" data-line-number="7"> <property name="VT_DOCBOOKSTYLESHEET['add']" value="/bluelight/webapp/bluelight/docbook.css"/></a>
+<a class="sourceLine" id="cb16-8" data-line-number="8"> </a>
+<a class="sourceLine" id="cb16-9" data-line-number="9"> <property name="VT_HDR_TMPLT_LOC" value="component://bluelight/template/Header.ftl"/></a>
+<a class="sourceLine" id="cb16-10" data-line-number="10"> <property name="VT_FTR_TMPLT_LOC" value="component://bluelight/template/Footer.ftl"/></a>
+<a class="sourceLine" id="cb16-11" data-line-number="11"> <property name="VT_NAV_OPEN_TMPLT" value="component://bluelight/template/AppBarOpen.ftl"/></a>
+<a class="sourceLine" id="cb16-12" data-line-number="12"> <property name="VT_NAV_CLOSE_TMPLT" value="component://bluelight/template/AppBarClose.ftl"/></a>
+<a class="sourceLine" id="cb16-13" data-line-number="13"> <property name="VT_MSG_TMPLT_LOC" value="component://bluelight/template/Messages.ftl"/></a>
+<a class="sourceLine" id="cb16-14" data-line-number="14"> </theme-properties></a></code></pre></div>
+Values with /images/â¦ have been moved to the common-theme that bluelight extends, the theme definition keeps only what the theme adds to the extended theme.
<blockquote>
-Note property name supports the FlexibleMapAccessor syntax, so you can continue to populate a list (VT_STYLESHEET['add']), reset a list (VT_STYLESHEET[]) or add an element on the top list (VT_STYLESHEET[+0]) because some time the order libraries loading is important
+Note property name supports the FlexibleMapAccessor syntax, so you can continue to populate a list (VT_STYLESHEET[âaddâ]), reset a list (VT_STYLESHEET[]) or add an element on the top list (VT_STYLESHEET[+0]) because some time the order libraries loading is important
</blockquote>
<h3 id="migrate-you-own-theme">Migrate you own theme</h3>
Easily, create you Theme.xml and move your VisualThemeResource in theme-properties like in the BlueLight example above. Maybe you will need to update your template because the modelTheme return ressources not always as list. So : <code><property name="VT_HDR_TMPLT_LOC" value="component://bluelight/template/Header.ftl"/></code> -> return a String with <code>component://bluelight/template/Header.ftl</code> <code><property name="VT_STYLESHEET['add'] value="..."</code> -> return a List<String>