NaturalONE Version 8.3.7
 —  Natural for Ajax  —

Developing Customized Logon and Disconnect Pages

This document covers the following topics:


General Information

In a production environment, a Natural for Ajax application starts with a logon page and ends with a disconnect page. Many applications do not show these pages directly. For more information, see Client Configuration in the documentation for the standalone version of Natural for Ajax, and especially the following topics:

See also Creating Your Own Workplace Application later in this documentation.

If you prefer that your applications are to show the logon or disconnect page directly, you will most likely customize the page layouts of these pages in order to adapt the rendering, the images, the style and/or the shown information. Natural for Ajax provides the following page layouts:

The topics below describe how to customize these page layouts.

Top of page

Adding the NatLogon and/or NatDisconnect Page Layout to a NaturalONE Project

If you want to customize the logon and/or disconnect page, you have to copy cisnatural/cisnatural/xml/NatLogon.xml and/or cisnatural/cisnatural/xml/NatDisconnect.xml from your Eclipse workplace into your NaturalONE project. Place the copied file(s) into the xml subfolder of a user interface component.

Now you can customize the NatLogon and/or NatDisconnect page layout with the Layout Painter in the usual way, but you must follow the rules described below.

Top of page

What Can be Customized?

You can customize rendering and styling. For example, you can modify style settings and rendering properties such as the height and width. You can rearrange the existing controls. You can add, modify and remove images. You can also add your own controls if they do not have data bindings to Natural.

For example, if you want to add your own application image to the page, you can define the ICON control as follows:

<icon image="../my_ui/images/MyImage.png" ></icon>

Top of page

What Cannot be Customized?

You must leave all data bindings of the *prop properties as they are. You must not remove any bindings.

You cannot add your own custom data bindings. For example, you cannot add your own FIELD, TEXTOUT or other controls with properties bound to Natural data.

You cannot add your own events. This means, you cannot trigger your own Natural events on the server.

Top of page

Advanced Customizations

The NatDisconnect page layout, for example, contains the following control:

<textout valueprop="disconnectMessage" fgcolorprop="colorProp">
</textout>

Often, applications do not want to show the disconnect message. As stated above, you cannot remove the data bindings "disconnectMessage" and "colorProp". But you can do the following: Add XCIDATADEF controls and move the data bindings from the TEXTOUT control to the XCIDATADEF controls:

<xcidatadef dataprop="disconnectMessage"></xcidatadef>
<xcidatadef dataprop="colorProp"></xcidatadef>

The XCIDATADEF control is not visible in a rendered HTML page. Therefore, the corresponding message is no longer visible. The data binding, however, has not changed. This way you can remove controls from the NatLogon and NatDisconnect pages without changing the data bindings.

If you use a customized NatDisconnect page with SUBCISPAGE controls, we recommend that you remove all code which triggers the onLogon event (for buttons, hot keys, etc.). For example: The original NatDisconnect page contains a hot key to navigate to the NatLogon page on pressing ENTER:

<natpage hotkeys="13;onLogon" ...>

You can simply remove the hot key definition. This will prevent the navigation to the NatLogon page from within a SUBCISPAGE:

<natpage ...>

Top of page

Deployment

When you generate a WAR deployment file (the default name is wardeploy.xml) for your project, this file will automatically contain all required rules for deploying your customized NatLogon and NatDisconnect page layouts. You not need edit the WAR deployment file manually and you need not copy any additional files to your production environment. For more information on the WAR deployment file, see Deploying the Application.

Top of page