...
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:
| Code Block |
|---|
| language | xml |
|---|
| title | OfbizDemoScreens.xml |
|---|
|
<screen name="AddOfbizDemoFtl"> |
<section>
<actions>
<set
<section>
<actions>
<set field="titleProperty" value="PageTitleAddOfbizDemos"/> |
<set
<set field="headerItem" value="addOfbizDemoFtl"/> |
<script
<script location="component://ofbizDemo/webapp/ofbizDemo/WEB-INF/actions/crud/ListOfbizDemo.groovy"/> |
<widgets>
<widgets>
<decorator-screen name="main-decorator" location="${parameters.mainDecoratorLocation}"> |
<decorator-section name="body">
<screenlet
<decorator-section name="body">
<screenlet title="${uiLabelMap.OfbizDemoListOfbizDemos}"> |
<platform-specific>
<html><html-template
<platform-specific>
<html><html-template location="component://ofbizDemo/webapp/ofbizDemo/crud/ListOfbizDemo.ftl"/></html> |
</screenlet>
<screenlet
</screenlet>
<screenlet title="${uiLabelMap.OfbizDemoAddOfbizDemoServiceByFtl}"> |
<platform-specific>
<html><html-template
<platform-specific>
<html><html-template location="component://ofbizDemo/webapp/ofbizDemo/crud/AddOfbizDemo.ftl"/></html> |
</screenlet>
</screenlet>
</decorator-section> |
4.) Add new controller request and a new item for OfbizDemo menu as:
| Code Block |
|---|
| language | xml |
|---|
| title | controller.xml |
|---|
|
...
<request-map uri="AddOfbizDemoFtl"> |
...
<security https="true" auth="true"/> |
...
<response name="success" type="view" value="AddOfbizDemoFtl"/> |
...
...
...
<view-map name="AddOfbizDemoFtl" type="screen" page="component://ofbizDemo/widget/OfbizDemoScreens.xml#AddOfbizDemoFtl"/> |
...
| Code Block |
|---|
| language | xml |
|---|
| title | OfbizDemoMenus.xml |
|---|
|
<menu<menu-item name="addOfbizDemoFtl" title="${uiLabelMap.OfbizDemoAddFtl}" |
><link ><link target="AddOfbizDemoFtl"/></menu- |
item>
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.
| Code Block |
|---|
| language | xml |
|---|
| title | OfbizDemoScreens.xml |
|---|
|
<decorator<decorator-screen name="main-decorator" location="${parameters.mainDecoratorLocation}"> |
| Info |
|---|
The mainDecoratorLocation is available in parameters map as it is defined in webapp's web.xml |
<description>The location of the
<context-param>
<context-param>
<description>The
location of the main-decorator screen to use for this webapp; referred
to as a context variable in screen def XML files.</ |
description> <param-name>mainDecoratorLocation</param-name>
<param-value>componentdescription>
<param-name>mainDecoratorLocation</param-name>
<param-value>component://ofbizDemo/widget/CommonScreens.xml</param- |
value>param>
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:
<param-value>
<init-param>
<param-name>allowedPaths</param-name>
<init-param>
<param-name>allowedPaths</param-name>
<param-value>/error:/control:/select:/index.html:/index.jsp:/default.html:/default.jsp:/images:/includes/maincss.css:/css:/js</param- |
value>param>
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.
| Code Block |
|---|
| language | xml |
|---|
| title | PreBody.ftl |
|---|
|
<html>
<head>
<title>$<html>
<head>
<title>${layoutSettings.companyName}</ |
title> <meta title>
<meta name="viewport" content="width=device-width, user-scalable=no"/> |
<#if
<#if webSiteFaviconContent?has_content> |
<link
<link rel="shortcut icon" href=""> |
<#list
<#list layoutSettings.styleSheets as |
styleSheet> <link styleSheet>
<link rel="stylesheet" href="${StringUtil.wrapString(styleSheet)}" type="text/css"/> |
<#list
<#list layoutSettings.javaScripts as |
javaScript> <script javaScript>
<script type="text/javascript" src="${StringUtil.wrapString(javaScript)}"></ |
script> </head>
<body
</head>
<body data-offset="125"> |
<h4
<h4 align="center"> ==================Page PreBody Starts From Decorator Screen========================= </ |
h4> <div h4>
<div class="container menus" id="container"> |
<div <div <ul
<ul id="page-title" class="breadcrumb"> |
<li>
<a
<li>
<a href="<@ofbizUrl>main</@ofbizUrl>">Main</ |
a> </li>
<li a>
</li>
<li class="active" |
><span ><span class="flipper-title">${StringUtil.wrapString(uiLabelMap[titleProperty])}</ |
span></li> <li span></li>
<li class="pull-right"> |
<a href="<@ofbizUrl>logout<
<a href="<@ofbizUrl>logout</@ofbizUrl>" title="${uiLabelMap.CommonLogout}">logout</ |
i></a> </li>
</ul>
</div>
</div>
<div i></a>
</li>
</ul>
</div>
</div>
<div class="row"> |
<div
<div class="col-lg-12 header-col"> |
<div <h4 align=
<h4 align="center"> ==================Page PreBody Ends From Decorator Screen=========================</ |
h4> <h4 h4>
<h4 align="center"> ==================Page Body starts From Screen=========================</ |
h4>
...
|
<#-- Close the tags opened in the PreBody section --> |
</div>
</div>
</div>
</div>
<h4
</div>
</div>
</div>
</div>
<h4 align="center"> ==================Page PostBody and Page body in general ends here from Decorator Screen=========================</ |
h4> body>html>
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:
| Code Block |
|---|
| language | xml |
|---|
| title | CommonScreens.xml |
|---|
|
<screen <screen name="OfbizDemoCommonDecorator"> |
<section>
<actions>
<property-map
<section>
<actions>
<property-map resource="OfbizDemoUiLabels" map-name="uiLabelMap" global="true"/> |
<property
<property-map resource="CommonUiLabels" map-name="uiLabelMap" global="true"/> |
<set
<set field="layoutSettings.companyName" |
from-field="uiLabelMap.OfbizDemoCompanyName" |
<!-- Including custom CSS Styles that you want to use in your application view. [] in field can be used |
to
<set to
set the order of loading CSS files to load if there are multiple -->
<set field="layoutSettings.styleSheets[]" value="/ofbizDemo/css/bootstrap.min.css"/> |
<!-- Including custom JS that you want to use in your application view. [] in field can be used |
to
<set to
set the order of loading of JS files to load if there are multiple -->
<set field="layoutSettings.javaScripts[+0]" value="/ofbizDemo/js/bootstrap.min.js" global="true"/> |
</actions>
<widgets>
<section>
<condition>
<if-has-permission permission="OFBIZDEMO" action="_VIEW"/>
</condition>
<widgets>
<platform-specific><html><html-template
</actions>
<widgets>
<section>
<condition>
<if-has-permission permission="OFBIZDEMO" action="_VIEW"/>
</condition>
<widgets>
<platform-specific><html><html-template location="component://ofbizDemo/webapp/ofbizDemo/includes/PreBody.ftl"/></ |
html><specific> <decoratorspecific>
<decorator-section-include name="pre-body"/> |
<decorator
<decorator-section-include name="body"/> |
<platform-specific><html><html-template
<platform-specific><html><html-template location="component://ofbizDemo/webapp/ofbizDemo/includes/PostBody.ftl"/></ |
html><specific> </widgets>
<fail-widgets>
<label specific>
</widgets>
<fail-widgets>
<label style="h3">${uiLabelMap.OfbizDemoViewPermissionError}</ |
label> widgets> </section>
</widgets>
</section>
</screen>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:
<screen | Code Block |
|---|
| language | xml |
|---|
| title | OfbizDemoScreens.xml |
|---|
|
<screen name="AddOfbizDemoFtl"> |
<section>
<actions>
<set field="titleProperty"
<section>
<actions>
<set field="titleProperty" value="OfbizDemoAddOfbizDemoFtl"/> |
<set
<set field="headerItem" value="addOfbizDemoFtl"/> |
<script
<script location="component://ofbizDemo/webapp/ofbizDemo/WEB-INF/actions/crud/ListOfbizDemo.groovy"/> |
</actions>
<widgets>
<decorator-screen
</actions>
<widgets>
<decorator-screen name="OfbizDemoCommonDecorator" location="${parameters.mainDecoratorLocation}"> |
<decorator-section
<decorator-section name="body"> |
<label
<label style="h4" text="${uiLabelMap.OfbizDemoListOfbizDemos}"/> |
<platform-specific>
<html><html-template
<platform-specific>
<html><html-template location="component://ofbizDemo/webapp/ofbizDemo/crud/ListOfbizDemo.ftl"/></ |
html> </platform-specific>
<label style="h4" text="html>
</platform-specific>
<label style="h4" text="${uiLabelMap.OfbizDemoAddOfbizDemoFtl}"/> |
<platform-specific>
<html><html-template
<platform-specific>
<html><html-template location="component://ofbizDemo/webapp/ofbizDemo/crud/AddOfbizDemo.ftl"/></ |
html> </platform-specific>
</decorator-section>
</decorator-screen>
</widgets>
</section>
</screen>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:
| Code Block |
|---|
| language | xml |
|---|
| title | AddOfbizDemo.ftl |
|---|
|
<form <form method="post" action="<@ofbizUrl>createOfbizDemoEventFtl</@ofbizUrl>" name="createOfbizDemoEvent" class="form-horizontal"> |
<div
<div class="control-group"> |
<label
<label class="control-label" for="ofbizDemoTypeId">${uiLabelMap.OfbizDemoType}</ |
label> <div label>
<div class="controls"> |
<select
<select id="ofbizDemoTypeId" name="ofbizDemoTypeId"> |
<#list ofbizDemoTypes as demoType>
<option value='
<#list ofbizDemoTypes as demoType>
<option value='${demoType.ofbizDemoTypeId}'>${demoType.description}</ |
option> </select>
</div>
</div>
<div
</select>
</div>
</div>
<div class="control-group"> |
<label
<label class="control-label" for="firstName">${uiLabelMap.OfbizDemoFirstName}</ |
label> <div label>
<div class="controls"> |
<input
<input type="text" id="firstName" name="firstName" |
required> </div>
</div>
<div required>
</div>
</div>
<div class="control-group"> |
<label
<label class="control-label" for="lastName">${uiLabelMap.OfbizDemoLastName}</ |
label> <div label>
<div class="controls"> |
<input
<input type="text" id="lastName" name="lastName" |
required> </div>
</div>
<div required>
</div>
</div>
<div class="control-group"> |
<label
<label class="control-label" for="comments">${uiLabelMap.OfbizDemoComment}</ |
label> <div label>
<div class="controls"> |
<input
<input type="text" id="comments" name="comments"> |
</div>
</div>
<div
</div>
</div>
<div class="control-group"> |
<div <button
<button type="submit" class="btn">${uiLabelMap.CommonAdd}</ |
button> </div>
</div>
</form>
button>
</div>
</div>
</form> |
<table
<table class="table table-bordered table-striped table-hover"> |
<thead>
<tr>
<th>$
<thead>
<tr>
<th>${uiLabelMap.OfbizDemoId}</ |
th> <th>$th>
<th>${uiLabelMap.OfbizDemoType}</ |
th> <th>$th>
<th>${uiLabelMap.OfbizDemoFirstName}</ |
th> <th>$th>
<th>${uiLabelMap.OfbizDemoLastName}</ |
th> <th>$th>
<th>${uiLabelMap.OfbizDemoComment}</ |
th> </tr>
</thead>
<tbody>
<#list ofbizDemoList as ofbizDemo>
<tr>
<td>$th>
</tr>
</thead>
<tbody>
<#list ofbizDemoList as ofbizDemo>
<tr>
<td>${ofbizDemo.ofbizDemoId}</ |
td> <td>$td>
<td>${ofbizDemo.getRelatedOne("OfbizDemoType").get("description", locale)}</ |
td> <td>$td>
<td>${ofbizDemo.firstName?default("NA")}</ |
td> <td>$td>
<td>${ofbizDemo.lastName?default("NA")}</ |
td> <td>$td>
<td>${ofbizDemo.comments!}</ |
td> </tr>
</#list>
</tbody>
</table> 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:
...