Use Dojo to develop custom business space Widgets, part 3rd

Use Dojo to develop custom business space Widgets, part 3rd: Using multiple templates in IWidget and inheriting from basic widgets

Brief introduction

The custom widgets we developed for this series are based on the Dojo version that is included with the WebSphere V7.0 supported Business Space (hereinafter referred to as Business space), which has been tested in Mozilla Firefox 3.0.11. It's just that the common framework concept we develop can even be applied to applications that use Dojo, but not to Business space. Learning this series requires a basic knowledge of the DOJO and iWidget frameworks.

We will discuss topics that are frequently encountered in Dojo based applications. This series is divided into the following sections:

Part 1th: Generate DOJO markup using a generic markup handler

Part 2nd: Create a Dojo DataGrid component with paging functionality with a common grid handler

Part 3rd: Using multiple templates in IWidget and inheriting from basic widgets

Part 4: Use a common rest handler to emit a configurable rest call from IWidget

In the 3rd part, we'll show you how to use a basic widget to make your entire user interface look and feel alike. All iWidgets can use this basic template to keep the interface consistent, including the head, footer, and main content area.

In addition to this basic template, each iWidget uses a widget-specific template to display information about the part.

This article also shows you how all the IWidgets in an application inherits from a basic widget. Basic widgets prevent code rewriting by providing iWidgets common methods.

The following files are available for download in Part3samplecode.zip:

Base_iwidget.js: The base part that inherits from all widgets.

Base-widget-template.html: Basic widget template HTML file.

Basewidgettemplate.js: Basic Widget template Javascript file.

Resources_iwidgets.js:NLS property file.

Testwidget.xml: Widget XML file.

Testloader.js: Widget loading file.

Testwidget.js: Widget JavaScript class.

Test.html: A widget-specific HTML template.

Testmarkuphandler.json: A JSON file used to generate widget content.

STYLESHEET.CSS: Style sheet file for the interface.

We also provide a complete sample code for the work, Fullworkingcode.zip, for the entire series.