3. GenticsPortlet and ViewPortlet Examples

3.1. SimpleTemplateExample

The SimpleTemplateExample is implemented as an AbstractGenticsPortlet, and renders a very basic Velocity template. The template processor is provided with the template's id to be loaded, and renders the template whilst taking the portal's dictionaries into account. Take a peek into SimpleTemplateExample.java to get to know how the template processor is used! 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

3.2. SimpleViewExample

This chapter will lead you through the process of creating a simple ViewPortlet using two views.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

The cheatsheet New ViewPortlet guides you through all steps to create a new ViewPortlet. These include

  1. Opening the wizard New View Portlet
  2. Choosing the Portlet Application Project, for which the new portlet shall be created.
  3. Choosing the name of the portlet and of the default view.
  4. Creating an entity of the new portlet in your portal configuration.
  5. Position the new portlet entity in one of your portal pages.


Launch New ViewPortlet cheat sheet.
Launch New ViewPortlet cheat sheet.

The xml code of the first view edit.xml is listed below:

Example 4.3.  SimpleViewExample - edit.xml

<view id="edit">
  <textcomponent id="name">
    <label>Name</label> 
									1
									
  </textcomponent>
  <buttoncomponent>
    <label>OK</label>
    <actions>
      <action class="GeneralViewAction">
        <parameters>
          <parameter id="set">views.show.components.info.data=
	        view.components.name.data</parameter> 2
									
          <parameter id="showview">show</parameter>
        </parameters>
      </action>
    </actions>
  </buttoncomponent>
</view>
				
1

Defines a simple TextComponent which prompts the user for his name.

2

This sets the value of the textcomponent of id info in the view with the id show to the specified value. (In this case the value of the component name of the current view.)

This will create a simple view with only two components. An input field for your name and a button to confirm it.

With the help of the wizard Gentics Portal.Node View, you can then create the second view.

Figure 4.1.  Select "New|Gentics Portal.Node View"

Select "New|Gentics Portal.Node View"

Create the view show.xml with the following contents:

Example 4.4. SimpleViewExample - show.xml

<view id="show">
  <informationcomponent id="infolbl">
    <label>Your Name</label>
    <reference>info</reference> 
							1
							
  </informationcomponent>
  <textcomponent id="info">
    <label>name</label>
    <visible>false</visible> 
							2
							
  </textcomponent>
  <buttoncomponent>
    <label>Back</label>
    <actions>
      <action class="GeneralViewAction">
        <parameters>
          <parameter id="showview">edit</parameter> 
							3
							
        </parameters>
      </action>
    </actions>
  </buttoncomponent>
</view>
					
1

Displays the value of the referenced TextComponent .

2

Holds the value displayed by the informationcomponent.

3

A simple button which will get the user back to the input form to enter his name.

3.3. RenderTemplateActionExample

This Viewportlet profits of the RenderTemplateAction. It also uses the scriptEngine JavaScript. You have two Textcomponents that allow processing of input text by using the scriptEngien feature. Every single letter of the input text is going to be checked if there is a 1337 Counterpart and if necessary changed to 1337-Speech. The most common 1337 letters are used here. 1 stands for 'i', 3 for 'e', 4 for 'a', 7 for 't' and 0 for 'o'. 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

3.4. Component Examples

The Component Example covers all display and input components available in Gentics Portal.Node (the VersioningComponent won't be functional because of missing versioning capability of the default datasource). Each component is implemented within a single view. It will help you to understand how to use them in your views. More detailed information about each component can be found within the SDK Reference: (Reference -> Implementation -> Plugins -> View Plugin -> Components)

If you're curious to know what a certain parameter does this is the place to give it a try!

Overview of all Component Examples:

ButtonComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

CheckboxComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

DatasourceSelectComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

DateComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

FileUploadComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

NumberComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

PasswordComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

SelectComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

TextAreaComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

TextComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

DatasourceListComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

DatasourceTreeComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

DownloadComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

FeedbackComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

LabelComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

ListComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

NestedFormComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

TabComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

VersionInformationComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

VersioningComponent Example 
Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

3.5. DatasourceListExample

This Example contains a simple View which utilises a DatasourceListComponent. It demonstrates how to "overload" a component template, the usage of a datasource (listing the contents of an objecttype) as well as how to define a custom view if the pnode is rendered in "normal" windowstate ("teaserview").

A DatasourceListComponent is used to display a list of objects which are retrieved from a datasource. If you open your sdk sample portal and click "Object Management" -> Datasource: "sample" -> "Choose Datasource", you will see the object type "datasourcetest" which is used in this example. (It is referenced in the View by its type id 1001).

In the Gentics Portlet-Descriptor of the SamplePortletapplication you can see how this example renders a custom view for a specific window state as well as overloads DatasourceListComponent.vm to provide a proper formatting of the date column.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

Example 4.5.  DatasourceListExample - Define custom view for a specific window state

<classes>
  <class id="plugin">ViewPlugin</class>
  <class id="windowstate">normal</class> 
					1
					
</classes>
<source><![CDATA[ $views.teaserviewlist
					2
					]]></source>
				
1

Specifies a custom template to be rendered by ViewPlugin on windowstate 'normal'

2

Renders the view with the id 'teaserview'.

3.6. CalculatorActionExample

This example covers a simple View, with a calculator PluggableAction. It demonstrates how the business logic of portlets can be implemented by programming own PluggableActions, like the SimpleCalculateAction in this example.

The form is rendered using the ViewPortlet. The calculation is done by a calculator PluggableAction. The View contains two input fields and a text-field which is used to display the result. The Buttons trigger the SimpleCalculateAction and a setter action which writes the result back into the output field.

The input values of the action are read from the view’s fieldvalues by using parameter mapping. The operation is given as a parameter. The SimpleCalculateAction calculates the result and stores it into the parameter ‘value’, which is then written back into the view using the GeneralViewAction.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

3.7. CalculatorModule

This example uses a calculator module which does the actual calculations in a plugin-event handler. The form is generated again with a view like in the CalculatorActionExample, but instead of using a specific PluggableAction, the generic TriggerEventAction is used to trigger the onPluginEvent handler in GenticsCalculatorModule.

The eventhandler routine loads the input values directly from its viewplugin. It expects the view to be named ‘calc’, the input fields must be named ‘input1’ and ‘input2’ and the output is stored into the field ‘output’ by the module. The operation which is calculated is given as a parameter to the event.

The values are read from and set to the view using a resolver and a setter. If a number conversion error occurs, an error message is set to the view.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

3.8. HistoryModule

Covers events and communication between modules through session and parameters.

The GenticsHistoryModule displays a history of all strings which has been send to the module as parameter or as session.

The CalculatorActionExample sends each expression to the history using the GenericViewAction. After the result has been set to the view’s output field, the expression provided by the calculator action is written to the ‘data’ parameter of the ‘history’-instance of the GenticsHistoryModule. The history module is notified every time the parameter is set.

The CalculatorModule uses a session attribute to send its expressions to the history module. It uses a list to store the expression strings into the session to prevent overwriting old expression strings which has not yet been fetched by the history module. If the list does not exist in the session, the calculator module creates a new one. The list is fetched by the history module every time the history module is rendered.

The history module stores its history list in the session. If a parameter is changed, the method onParameterChanged is called, where the module checks, if the data parameter has been set and adds the data into its history.

When the module is rendered, it loads the data list from the session and adds its values to the history, if it has any.

The output of the module is rendered using a template processor. An action link is generated to allow the user to clear the history.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

3.9. ImpsUsageExample

This Example demonstrates a few easy usages of Imps.

Imps are small helpers, providing different functionality an implementer can use in portlets, supporting TemplateEngine2. For more information see the Gentics Portal.Node Reference Documentation.

Since Imps are only used in templates, the interesting parts of this example are in the template files located in SamplePortletapplication/WEB-INF/templates/modules/ImpsUsageExample/ . Each of these files are template files which render a LabelComponent.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

The following examples are given:

  1. Date - Shows how to format the current date.

  2. Number - Shows how to convert a number into a human readable filesize string.

  3. String - Shows how to trim a long string.

  4. RuleMatcher - Shows how to match a given Rule and output if it matches or doesn't.

  5. DatasourceQuery - Shows how to retrieve data from a Datasource using a QueryImp

  6. Calculator - Shows how to perform easy calculations.

To develop custom imps, take a look at the sample imp L33tImp, which is included in the source folder of the SamplePortletapplication. Since imps must be loaded by the applicationserver's classloader, you need to move imps into a seperate "Simple Java Project" and compile them into shared/classes directory of your portal servers configuration path. Refer to the L33tImp's inline and Gentics Infoportal documentation for further information.


Show the L33tImp source code.
Show the L33tImp source code.

3.10. ResolvableDatasourceExample

This Example demonstrates the usage of the ResolvableDatasource and custom Javabean classes for integration of custom data sources (databases) into Gentics Portal.Node views.

Implemented as an AbstractGenticsPortlet a new ResolvableDatasource object is instantiated and prefilled with two UserBeans. After prefilling it the ResolvableDatasource is put inside the portlet session. Rendering is handed over to Gentics Portal.Node's ViewPlugin, which renders a very basic list view, and refers to the ResolvabeDatasource created before from the portlet session. So all the listed and editable content displayed in the ResolvableDatasourceExample was generated on the fly, without any database engines being used.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

3.11. AdvancedViewExample

Covers an advanced view.

See how it all fits together with our advanced AdvancedViewExample, which totally focuses on how components would be arranged in an real-life example by demoing an in-depth human resource management usecase. There is no whatsoever functionality included so far, but this complex view should be able to give you a feeling of what can be accomplished using those powerful tools Gentics Portal.Node provides you with.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

3.12. GoogleSearchExample

Covers integration of an abitrary web service, using Google search for this example.

This example uses Google's API to implement a search portlet. When viewing the portlet a simple search view is rendered via the ViewPlugin, which just displays an input field four your search term along with a submit button. Hitting this button will finally trigger a PluginEvent keyed "search" which is handled by the portlet's onPluginEvent method, and finally queries Google for the search result. Query results are displayed in a maximized view of the portlet, rendered via Google's autogenerated classes.

After filling in all the information asked for in the form, the AdvancedViewExample renders it's content using a basic velocity template, to give you an overview of the data provided. This is the point where you come into play, turning our example into an all decked-out web application.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

3.13. RSSDisplay

Demonstrates how to use a simple XSLT in combination with URLLoaderActions, XSLTRenderAction and CreateResolvablesAction to show a RSS feed in a default DatasourceListComponent.

To display an information from an RSS stream, the contents obviously have to be loaded from the web, and transformed into a kind of object, which Gentics Portal.Node is able to handle, thus making Resolvables our choice. Here is how it works:

First a RSS stream is loaded from an URL using the URLLoaderAction along with a XSLT stylesheet. In the next step those contents are transformed using a XSLTRenderAction incorporating both the RSS file and the XSLT stylesheet, resulting in XML output which is handed over to the CreateResolvablesAction. In the last step the items from the RSS feed are displayed by setting them to a DatasourceListComponent using a GeneralViewAction. As these steps may sound confusing in textual form be sure to check out the according view file "rsslist.xml", which should give you an idea on how things work.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK

3.14. ViewWizard

Covers an example on how views generated from the sample datasource objects look like. If you want to try the ViewWizard yourself head over to the AdministrationPortlet's Object Management dialouge, select some objects and hit "Generate View". Enter "ViewWizard" in the "Portlet ID" field and look how the ViewWizard's navigation view updates right after your overwrite confirmation. Clicking one of the navigation buttons will take you to the list view, where you can create, delete or browse objects.

For detailed information on how to use the ViewWizard read the corresponding section from the Gentics Portal.Node Reference.


Show example in
Gentics Portal.Node SDK
Show example in Gentics Portal.Node SDK