OFBiz Tutorial – Introduction to OFBiz Widgets

OFBiz is a broadly-scoped, powerful tool for open source ERP and e-commerce.  Whether your project is a simple e-commerce shopping cart or a complex ERP implementation that includes custom order management, multi-channel integrations, and accounting, ease-of-use for the developers implementing your system translates directly to your bottom line.

The following OFBiz tutorial is technical in nature.  If you are a developer, enjoy!  If you are a manager, suggest that your developers have a look.  The OFBiz Widget goes a long way in saving you time — and money — in your open source e-commerce and ERP projects.

And remember: HotWax Media provides a complete set of OFBiz services, from business analysis through system design, UI design, and complete implementation.  So feel free to contact us today and leave the heavy lifting to us!

The OFBiz Widget is one of the core components of the OFBiz framework, its main goal is the definition and rendering of the OFBiz user interfaces.

Each widget represents a reusable user interface element, that can be included and extended by different applications.

The widgets allow to define, using a simple xml language, user interfaces elements like screen, menus, forms, trees in a platform and output independent format; the widgets are also tightly integrated with other key components of the OFBiz framework, like the “content”, “service” and “entity” engines, so that data preparation logic programming is greatly simplified and consistent with the rest of the framework.

At runtime, when a widget is to be rendered, its widget definition (in xml) is passed to the proper widget renderer that transforms it in the right output format: an html document, a PDF document, a comma separated value file etc…

Various renderers are available in OFBiz including the html, pdf, xml, text and now the csv renderer. The html renderer is widely used to render each and every screen of the applications, the pdf renderer is used for PDF documents, bar codes and PDF email attachments, the xml renderer is used to generate Microsoft Excel compliant xml exports, the csv is for exporting comma separated values files.

In the past, each renderer was implemented by a complex set of Java classes and the output code was embedded in its methods; this layout had some relevant cons: the code was difficult to maintain and customize because html/xml/xsl-fo code was embedded in Java methods, building new renderers was a complex task.

As a consequence very few OFBiz  committers were able to fix and enhance the widget code in the framework and the html layout of the output was not very good because web designers had a hard time dealing with the html code embedded in Java classes.

For these reasons, recently, all the complex, difficult to maintain and customize code of the renderers in OFBiz has been refactored by HotWax Media, by introducing the concept of a generic Macro Widget Renderer: a unified renderer that delegates the actual implementation of the output to a set of Freemarker macro calls. Now all the output depended code is in easy to modify/extend/customize Freemarker templates: web designers can edit the templates for a given output and see the results real time without the need to recompile or even restart the OFBiz instance. It is also incredibly easy to implement new special purpose renderers, to get new types of output/export for the widgets: in fact we expect that in the future the set of output formats available for the widgets will grow.

The CSV renderer is a good example of the new breed of lightweight renderers: it took few hours to implement and with it now virtually any widget form that represents tabular data can be exported in CSV format.

In short, here are the few steps we followed to implement the new CSV output:

  1. add to framework/widget/config/widget.properties a new section for the renderer
    # csv output
  2. implement the Freemarker macros for the new renderer by copying and modifying the ones of an existing renderer in framework/widget/templates: csvScreenMacroLibrary.ftl, csvFormMacroLibrary.ftl,csvMenuMacroLibrary.ftl, csvTreeMacroLibrary.ftl
  3. add a new entry for the renderer in framework/common/webcommon/WEB-INF/common-controller.xml <handler name=”screencsv” type=”view” class=”org.ofbiz.widget.screen.MacroScreenViewHandler”/>

After this you are ready to use the new renderer by associating, in a controller.xml file, the screen definition with the renderer:

view-map name="IncomeStatementListCsv" type="screencsv"
content-type="text/csv" encoding="none"

In one of my next posts we will illustrate an example of how the same form can be used to render html code and csv data.

– Jacopo

DATE: Nov 13, 2009
AUTHOR: Jacopo Cappellato
OFBiz, OFBiz Tutorials, , ,

Leave a Reply

Your email address will not be published. Required fields are marked *