...
It's very easy to setup a new custom component in OFBiz in plugins directory. Using command line you just need run the following command.
| Code Block |
|---|
|
$ ./gradlew createPlugin -PpluginId=ofbizDemo |
...
3.) Add new screen file with Ofbiz default decorator to OfbizDemoScreens.xml with newly added freemarker and groovy files as:
...
...
OfbizDemoScreens.xml
<section>
<actions>
<set <section>
<actions>
<set field="titleProperty"
|
value="PageTitleAddOfbizDemos"/> |
value="addOfbizDemoFtl"/> |
<widgets>
<decorator-screen
|
location="${parameters.mainDecoratorLocation}"> |
<decorator-section name="body">
<screenlet title="${uiLabelMap.OfbizDemoListOfbizDemos}">
|
</screenlet>
<screenlet title="${uiLabelMap.OfbizDemoAddOfbizDemoServiceByFtl}">
|
</screenlet>
</decorator-section>
</decorator-screen>
|
4.) Add new controller request and a new item for OfbizDemo menu as:
...
...
controller.xml
...
...
...
...
...
...
...
...
value="AddOfbizDemoFtl"/> |
...
...
...
...
...
...
...
OfbizDemoMenus.xml
| title | OfbizDemoMenus.xml |
|---|
<menu title="${uiLabelMap.OfbizDemoAddFtl}" |
><link target="AddOfbizDemoFtl"/></menu-
|
5.) Add new UI Labels as used by your app.
...
We will be doing it by defining custom decorator for your application view. A decorator in OFBiz is nothing but a screen that you define and reuse afterwards by including in your other screens of application. You are already doing it with default decorator (main-decorator –> ApplicationDecorator) which comes with OFBiz. Just observe your screens you have prepared so far, you will find that, you were using this main decorator, please refer below line in OfbizDemoScreens.xml.
...
OfbizDemoScreens.xml
<decorator location="${parameters.mainDecoratorLocation}"> |
| Info |
|---|
The mainDecoratorLocation is available in parameters map as it is defined in webapp's web.xml |
| Code Block |
|---|
| language | xml |
|---|
title |
web.xml
<context-param>
<description>The
location of the <context-param>
<description>The location of the main-decorator
|
description>
<param-name>mainDecoratorLocation</param-name>
|
Now is the time to define your own decorator with custom styling.
...
5.) Open $ OFBIZ_HOME/plugins/ofbizDemo/webapp/ofbizDemo/WEB-INF/web.xml and make entries for css and js directories in allowedPaths at the end as shown below:
...
...
web.xml
<init-param>
<param-name>allowedPaths</param-name>
<param-value>
|
6.) Add new directory named "includes" at location $ OFBIZ_HOME/plugins/ofbizDemo/webapp/ofbizDemo/ and create two new files in this new directory you just added named PreBody.ftl and PostBody.ftl. We will be using(including) these two files in our decorator screen to build complete HTML page.
...
...
PreBody.ftl
xml
| title | PreBody.ftl |
|---|
<html>
<head>
<title>${layoutSettings.companyName}</
|
title>
<meta name="viewport"
|
content="width=device-width, |
<#if webSiteFaviconContent?has_content>
|
<#list layoutSettings.styleSheets
|
styleSheet>
<link rel="stylesheet"
|
href="${StringUtil.wrapString(styleSheet)}" |
<#list layoutSettings.javaScripts
|
javaScript>
<script type="text/javascript"
|
src="${StringUtil.wrapString(javaScript)}"></ |
</head>
<body data-offset="125">
|
Screen=========================
|
h4>
<div class="container
|
<li>
<a href="<@ofbizUrl>main</@ofbizUrl>">Main</
|
a>
</li>
<li class="active"
|
><span class="flipper-title">${StringUtil.wrapString(uiLabelMap[titleProperty])}</
|
span></li>
<li class="pull-right">
|
<a href="<@ofbizUrl>logout</@ofbizUrl>" title="${uiLabelMap.CommonLogout}">logout</
|
i></a>
</li>
</ul>
</div>
</div>
<div class="row">
|
Screen=========================</
|
Screen=========================</
|
| Code Block |
|---|
| language | xml |
|---|
title |
PostBody.ftl
</div>
</div>
</div>
</div>
<h4 </div>
</div>
</div>
</div>
<h4 align="center">
|
Screen=========================</
|
7.) Open Common Screens file of your component $ OFBIZ_HOME/plugins/ofbizDemo/widget/CommonScreens.xml, this is the file we will define our custom decorator.
8.) Update screen named "OfbizDemoCommonDecorator"(which will serve as custom decorator for your app) as shown below:
...
...
CommonScreens.xml
<screen <screen name="OfbizDemoCommonDecorator">
|
<section>
<actions>
<property-map resource="OfbizDemoUiLabels"
|
resource="CommonUiLabels" |
<set field="layoutSettings.companyName"
|
from-field="uiLabelMap.OfbizDemoCompanyName"
|
<set field="layoutSettings.styleSheets[]"
|
value="/ofbizDemo/css/bootstrap.min.css"/> |
<set field="layoutSettings.javaScripts[+0]"
|
value="/ofbizDemo/js/bootstrap.min.js" |
</actions>
<widgets>
<section>
<condition>
<if-has-permission permission="OFBIZDEMO" action="_VIEW"/>
</condition>
<widgets>
|
specific>
<decorator-section-include
|
<decorator-section-include
|
specific>
</widgets>
<fail-widgets>
<label style="h3">${uiLabelMap.OfbizDemoViewPermissionError}</
|
widgets>
</section>
</widgets>
</section>
</screen>
|
In the code above you may have noticed the layoutSettings.styleSheets[] and layoutSettings.javaScripts[+0] notations. You can use the layoutSettings. notation for any files.
If you want to order styleSheets or javaScripts with empty square brackets you simply add the file at the end of the layoutSettings.styleSheets or layoutSettings.javaScripts list, with [+0] you add it at front of it.
9.) Use this decorator in your Freemarker screen that you created in last part as:
...
...
OfbizDemoScreens.xml
<screen <screen name="AddOfbizDemoFtl">
|
<section>
<actions>
<set field="titleProperty"
|
value="OfbizDemoAddOfbizDemoFtl"/> |
value="addOfbizDemoFtl"/> |
</actions>
<widgets>
<decorator-screen name="OfbizDemoCommonDecorator"
|
location="${parameters.mainDecoratorLocation}"> |
<decorator-section name="body">
|
text="${uiLabelMap.OfbizDemoListOfbizDemos}"/> |
html>
</platform-specific>
<label style="h4" text="${uiLabelMap.OfbizDemoAddOfbizDemoFtl}"/>
|
html>
</platform-specific>
</decorator-section>
</decorator-screen>
</widgets>
</section>
</screen>
|
10.) Update your FTL files to follow HTML web standards and apply CSS on it as:
...
AddOfbizDemo.ftl
<form action="<@ofbizUrl>createOfbizDemoEventFtl</@ofbizUrl>"
|
name="createOfbizDemoEvent"
|
<div class="control-group">
|
<label class="control-label"
|
for="ofbizDemoTypeId">${uiLabelMap.OfbizDemoType}</ |
label>
<div class="controls">
|
<select id="ofbizDemoTypeId"
|
<#list ofbizDemoTypes as demoType>
<option value='${demoType.ofbizDemoTypeId}'>${demoType.description}</
|
</select>
</div>
</div>
<div class="control-group">
|
<label class="control-label"
|
for="firstName">${uiLabelMap.OfbizDemoFirstName}</ |
label>
<div class="controls">
|
required> </div>
</div>
<div class="control-group">
|
<label class="control-label"
|
for="lastName">${uiLabelMap.OfbizDemoLastName}</ |
label>
<div class="controls">
|
required> </div>
</div>
<div class="control-group">
|
<label class="control-label"
|
for="comments">${uiLabelMap.OfbizDemoComment}</ |
label>
<div class="controls">
|
</div>
</div>
<div class="control-group">
|
class="btn">${uiLabelMap.CommonAdd}</ |
| Code Block |
|---|
| language | xml |
|---|
titlebutton>
</div>
</div>
</form>
|
ListOfbizDemo.ftl
<table >
<thead>
<tr>
<th>$>
<thead>
<tr>
<th>${uiLabelMap.OfbizDemoId}</
|
th>
<th>${uiLabelMap.OfbizDemoType}</
|
th>
<th>${uiLabelMap.OfbizDemoFirstName}</
|
th>
<th>${uiLabelMap.OfbizDemoLastName}</
|
th>
<th>${uiLabelMap.OfbizDemoComment}</
|
th>
</tr>
</thead>
<tbody>
<#list ofbizDemoList as ofbizDemo>
<tr>
<td>${ofbizDemo.ofbizDemoId}</
|
td>
<td>${ofbizDemo.getRelatedOne("OfbizDemoType").get("description",
|
td>
<td>${ofbizDemo.firstName?default("NA")}</
|
td>
<td>${ofbizDemo.lastName?default("NA")}</
|
td>
<td>${ofbizDemo.comments!}</
|
td>
</tr>
</#list>
</tbody>
</table>
|
10. Now restart OFBiz as you have made entries to allowedPaths in web.xml. As it reloads hit https://localhost:8443/ofbizDemo/control/AddOfbizDemoFtl you should see page with custom styles that you have used instead of using default OFBiz theme. It should look like:
...