Layout or how to build modern web application with NatJet ?

We saw in the previous post, that NatJet allows to build web applications similar in interactivity to classic Windows applications.

NatJet could allow to build classic MDI applications that runs in a browser : title bar, menu bar and drop down menus and popup windows… This will simulate the kind of windows application we used to have back in Windows 95.

Introducing Layout

Notice, that current native Windows applications do not use anymore this kind of behavior : Outlook, Eclipse… They all prefer avoiding opening popup windows. They split the screen in several zones : menu, toolbar, navigation (usually the left zone) and a main central zone (that display the main information).

If you look at advanced web application like GMAIL, Y! Mail or SalesForce you will find the same kind of layout. Web App tends also to avoid drop down menu.

When we’ve started NatJet we found out that customer tends to pick up the latest kind of screen organization. If you look at deeper this kind of application, you will notice that they have usually 3 zones :

• Top Status zone that displays connection and general information
• Left Navigation bar that contains a list of links
• A main zone that display data

The first two zones do not change a lot and when they do, this is mostly a specific data (a label, a link…).

The main zone changes a lot : it can display a list of mails, then a detail of a mail, then another list. Data, Structure of data and type of data can change.

Usually, when you want to change this part of the screen, you need to load a new pages reloading the two zones that haven’t changed.

Furthermore, at development time you need to rely on template of pages (HTML, JSP or JSF) to keep consistent layout, but you need to duplicate import declarations in each pages even if you do not duplicate the code. The page you’ve built is not independent of the layout : if you change the layout, you will need to change the import declaration of all the pages.

Designing Layout in NatJet

Layout in NatJet allows a simple organization of the browser’s client area. With a graphical designer you split this area in several zones. By default, NatJet provides you with a layout composed of 3 panels.

In the upper screen copy, you can see

• splitters : horizontal and vertical lines
• containers : empty areas

You can design with the graphical designer complex layout : Have a look to the following prototype with 9 containers.

Container cannot contain controls : Controls have to be included in panels. A container, is just an empty zone that can contain a panel. Panel can change during the execution of the NatJet application. When NatJet replaces a panel by another one, it doesn’t send back all other panels. This is much more efficient.

Furthermore, if you look at development time, a panel doesn’t need to know where it will be displayed. If you decide to change the structure of your layout, you do not need to change your panel. The same panel can be displayed in different containers or in different layout.

How to have invisible splitter in NatJet

In the upper layout all splitter are visible. Sometimes, designer splits logically the browser area but doesn’t show the limit of each zone (this gives a more smooth layout)

In the upper layout, there are 3 panels :

• top
• left, with the “Recherche” zone
• main

But, the designer doesn’t want to show the separation between the left and main panel.

Open the Layout3Panels.xml resources in its graphical editor.

You need to select the Splitter : this is very difficult in the graphical editor, I prefer to use the Outline : expand node Layout3Panels, than expand RootMainContainer, than TopHorizontal than, TopHorizontalSecond. At this point you should have a SplitLayout1.

If you select it, you should see in the Properties view that it is a Component of type SplitLayout (this is the technical name of a Splitter in NatJet).

The best way to render invisible a splitter is to :

• set Separable Movable to false : this means you won’t be able to change the position of the splitter at execution time which can sound rational if it is no more visible.
• set Separator width = 0

It can be safe to select the same Separate Color (the color of the splitter) as the one of your NsContentPane background (222,222,221 by default)

Chaining Layout in NatJet

A layout is a kind of organization of your screen. in some apps you may need several organizations of your screen : you may start with a very simple layout with just one panel (for login by example) than move to a more traditional 3 panels layout.

To illustrate the end of this post, we will create a new NatJet Project : NatJetLayout.

1. Just select in menu File –> Project Wizard.
2. Then input in the Project name : NatJetLayout
3. Then press the “Finish” button.

This will create your NatJet project.

Creating a new layout

The first step will be creating a new layout. This is fairly simple :

1. Select in the Package Explorer, the node WebContent –> resources –> NatJetLayout of your NatJetLayout project. This part is important to let know at NatJet where it should add the new resource.
2. Select menu File –> New –> Form Wizard. The “New Form” dialog box pops up.
3. Enter the Form name : SimpleLayout
4. Select the Radio button : Layout
5. Press the “Finish” button

A new resource has been added to your NatJetLayout node : SimpleLayout.xml. If you double click on it, it will be opened in the NatJet graphical designer.

The default Layout is composed of just the container corresponding to the full client area browser : RootMainContainer (Notes this is a new default in NatJet 4.0, it may be slightly different in NatJet 3.0).

A container (the NatJet technical name is LayoutContainer) can get either a pane or a SplitLayout. The pane allows the attachment of a panel and the SplitLayout allow to split the container in two new containers.

As we are just interested in chaining layout, we will just add a pane and set its Pane property to the MainPanel. For this :

1. drag and drop from the Palette view, the Pane resource.
2. Select the Pane resource you’ve just added
3. In the Properties view, click on the Pane property. A button with 3 dots (“…”) shows up
4. Click on the button “…”, a dialog box “Chosse a content pane” is opened
5. Type MainPanel, it will present you with the ressource “MainPanel – fr.natsystem.natjet.app.NatJetLayout.ui”
6. Select it and press “OK” to validate your choice

You’ve just attached a default panel to this container. Now, when the layout will be built at execution time, it will pick up this panel to fill the container. You can change by programming this panel, but if you don’t do anything it will pick up this one.

Changing the browser Title bar in NatJet

When you run the default NatJet application, you will get a title bar of your browser showing : Layout3Panels or any name you choose for the name of your layout.

To change it, this is very easy : when your layout is opened, select in the Outline view the first node, in our case the SimpleLayout node. This actualizes the Properties view.

At its bottom, you have a Caption property which is by default empty. You can enter anything you want, like : My first layout in NatJet.

You can save and close the layout SimpleLayout.

Start your NatJet application on a new Layout

By default, a NatJet application start with the Layout3Panels it creates when it creates a new project.

In our case, we want it to start on the SimpleLayout layout. To do this, we need to change the spring bean “mainLayout” that is used to create the first layout.

In NatJet 4.0, this bean is defined in the file natjetInstanceContext.xml of the node WebContent –> WEB-INF. To open it, click right on it and select Open with –> Text editor.

In the file, change Layout3Panels by SimpleLayout. Be careful to specify the complete name with the correct package.

 

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">
    <!-- <bean/> definitions here -->
    <import resource="ContextBean/emptyContextBean.xml" />
    <bean id="applicationInstance" class="fr.natsystem.natjet.app.NatJetLayout.NatJetLayout"
        scope="prototype">
        <property name="context">
            <ref bean="natjetSessionContext" />
        </property>
    </bean>
    <bean id="mainLayout" class="fr.natsystem.natjet.app.NatJetLayout.ui.SimpleLayout"
        scope="prototype">
    </bean>
</beans>

Save your file.

If you run the NatJet application, you will have a simple layout with a title bar of the browser saying : “My first layout in NatJet”

Display a new Layout

We want from the first layout (SimpleLayout) to allow the user to trigger an action that will display the second layout (Layout3Panels).

The layout SimpleLayout displays only the panel MainPanel. We are going to edit it to add a pushbutton.

1. Double click on MainPanel.xml to edit it in the NatJet designer.
2. Drag & drop a PushButton, and change the following properties :
   • name : displayLayout3PanelsPB
   • caption : Display 3 panels
3. Drag & Drop a second PushButton and change the following properties :
   • name : displaySimpleLayoutPB
   • caption : Display Simple Layout
4. You can change its width to allow it to display the full caption.

Its times to code : click on the event Executed of one of the two button, the button “->” shows up. Click on it, validate the message to save the panel.

You can go, on the class definition in the java code and click left on the error (the small red circle with a cross), select “Add unimplemented method”, this will add all method corresponding to Executed action on your pushbutton.

Then complete the code as following :

@Override
public void displaySimpleLayoutPB_ExecutedEvent(NsExecutedEvent arg0){
    NsRootLayout.getRootWindow().getLayoutContainer().display(0, SimpleLayout.class, null);
}

@Override
public void displayLayout3PanelsPB_ExecutedEvent(NsExecutedEvent arg0) {
    NsRootLayout.getRootWindow().getLayoutContainer().display(0, Layout3Panels.class, null);
}

The main function used :

• NsRootLayout.getRootWindow() : this static method retrieves the client area of the browser. This is the root of the display of a NatJet web application.
• getLayoutContainer : gives you the Container in which the layout is displayed : the empty container corresponding to the browser client area.
• display() : this is the method to display a layout

Save your file.

You can run your web application and use the two buttons to move from one layout to the other.

Conclusion

Layout in NatJet is an interesting feature :

• It allows to keep a consistent look through a complete application.
• This optimizes exchanges between browser and server.
• Layout eases application development : once the layout is done, developer can focus on panels

Layout does not prevent you from using popup windows. In our case we tend to limit them to simple dialog box with a little information to input (less than 5 fields).

Introducing NatJet a 4GL to build Rich Interface Application

This first post will, through a simple Hello World tutorial, give a quick presentation of NatJet.
NatJet is a a 4GL to build Ajax Applications in which you code in Java. This means basically 3 things :

• Your only programming language is Java
  
• 4GL means that you will get a productivity close to the one’s of Visual Basic.
  
• This is a web application that will give your interface the interactivity of a traditional Windows application

Notes that though this is an unofficial blog that does not reflect the official position of Nat System (Editor of NatJet), as product manager of NatJet I may have some times a bias position about it. Nevertheless I will always try to be objective and technically precise and impartial.

NatJet as Eclipse Plug-In : Create a new project

NatJet is a plug-in of Eclipse. NatJet 3.0 is based on Eclipse Ganymede (3.4.2) and NatJet 4.0 will be probably based on Eclipse (3.5.1).
This plug-in extend WST : This means that any NatJet project will be a Dynamic Web Project with the same file structure :

• src : this repository will contains Java sources, properties files used for internationalization and the xml file used to define style.
  
• build : where class files are generated when java classes are compiled
  
• javadoc : where you will find the NatJet Javadoc
  
• lib : this repository contains jar files used only in development stage useless in the production stage as Junit.
  
• WebContent : this repository contains the jar files that constitute the NatJet runtime, the web.xml file, the xml files used by Spring and the xml files used by NatJet to store page descriptions.

A dynamic web project, is a web project that runs behind a Java Application server that allow to build html pages dynamically (to be opposed to static html pages) that can display data accordingly to user input.
A project based on Servlet, JSP, JSF… are dynamic web projects.

Select NatJet Perspective

The first step after NatJet installation (just double click on the NatJet msi) is to select the NatJet perspective :
Select menu : Window –> Open Perspective –> Other…
In the “Open Perspective” dialog, select NatJet and press OK.

Create a Server

Dynamic Web Projects rely on a web server. The first step will be to create a Server definition in Eclipse.
Select menu : File –> New –> Other…
In the “New” dialog box, select folder Server and then node Server. Press button “Next”.
In the “New server” box, you select the folder “Apache” and then “Tomcat V 6.0 Sever”. When you install NatJet a folder Thirdparty is installed as subfolder of your NatJet repository. In this folder you will find another folder “apache-tomcat-6.0.18” that contains a Tomcat install that you will be able to use.
Press “Next >” button, you will need to browse the Tomcat installation directory.
Note that you can used any other server already installed on your computer.

Create a NatJet Project

Now that the NatJet perspective is open, you will be able to use some NatJet menu.
Select menu : File –> New –> Project Wizard.
In the “New Dynamic Web Project” dialog you can enter the project name : NatJetHelloWorld

You have to pick up as Target Runtime, the server you want to use and that you’ve hopefully created in the previous step “Create a Server”
You can press Finish. The project has been created.

Run the application

You can click right on the project node in the “Package Explorer” and select in the popup menu “Run As” –> “Run on server”.
This menu, is part of the JEE version of Eclipse, it deploys the corresponding war of your project on the server and start the server (in our case, an Apache server), then it start the embedded browser of Eclipse (this browser behaves like a Internet Eclipse 7.0) on your application.

Be careful, the page it calls, depends on the node on which your click. If you want to call the right NatJet page, you need either to be on the Project Node or in the index.html page in the WebContent node of your project.
You will get the standard 3 panels layout NatJet created as starting point of a project.

NatJet an Eclipse plug-in : conclusion

This first part has shown that a NatJet project is a WST Eclipse project : you will be able to use the same function as any WST project like :

• deploying and executing your project on the web server of your choice
• debugging on the web server

You will also be able to use other Eclipse plug-in like CVS or SVN for source management or any other functionality as far they are compatible with a JEE Eclipse version.
NatJet has it own perspective that adds some useful menus and views to work with.
To finish, you have to know that the NatJet plug-in is the folder : C:\NatJet3.0.2\eclipse\plugins\fr.natsystem.natjet.graphicaldesigner_3.0.2.20100304a.
All you need is this folder in the Eclipse\plugins folder to add NatJet functionality to any Eclipse.
Starting with version 4 and over, there will be probably several folders fr.natsystem.natjet in the plugins folder.

NatJet Hello World Tutorial

Usually I’m not fond of Hello World tutorial as they don’t show any interesting feature that will be really useful in the real life.
Nevertheless I will bend myself to the request to show 2 important behavior of NatJet :

1. absolute positioning of graphical control
2. high interaction of the TextField control

In the HelloWorld project created in the previous chapter we will add a TextField control and a PushButton.

Layout Layout3Panels.xml

All graphical resources (we call them Layout or Panels in NatJet) are in the subfolder resources of the WebContent folder.
You should have there a NatJetHelloWorld folder with a Layout3Panels.xml file inside (with other xml files).
NatJet organizes graphical resources in folders that it calls Module. You can create as many modules you want.
When you create a new project, NatJet creates for you a default module with the name of your project (in our case NatJetHelloWorld). In this module, it adds several NatJet resources to give you a starting point for your project.
One of this resource is a basic layout : a layout is for NatJet a basic organization of the browser page. You can subdivide a page in as many subpart you want. By default, NatJet provide you with a typical layout in 3 parts :

• top status bar
• left navigation bar
• main part that will show data

This layout is the Layout3Panels.xml you can find in the NatJetHelloWorld folder. If you double click on it, it will open in the NatJet Layout Editor

In the image, you can see the 2 splitters : one horizontal and one vertical and the 3 zones.
Zones are called in NatJet : container. They contain Panel. The panel is the graphical object in which we can add controls as TextField and PushButton.
In the editor, you can move the splitter, you can add new splitter, you can use the properties view to modify some of the properties.
Note, in our case, you don’t need to do anything : it was just to illustrate the two notions of layout and panel.
Close the Layout.

Edit MainPanel.xml

In the NatJetHelloWorld folder, we are going to edit the panel MainPanel.xml. Double click on the file.
The Panel editor opens the file and shows an empty panel. You should have on the right part of eclipse a Palette view. This view will allow you to add controls by drag & drop on your panel.
We will add :

• a Label
• a TextField
• a PushButton

Select the Label1 control by clicking on it. Then select the view Properties on the left part of Eclipse.
You should have a Caption property, in which you can enter the new caption you want to see : “Please, enter your name”

As you press Enter, the Label1 in the graphical editor is replaced by your new text. If your text goes over the textfield, you can grab the text or the textfield to move it.

TextField basic properties

Now we going to define the behavior of the input textfield. Select the control TextField in the graphical editor, the Properties view shows its properties.
You can grab one side of the TextField to reduce its width by drag and drop.
You can alternatively use the width property of the editor.
We’re going to precise the following properties :

• Name=nameTF : we give the control a meaningful name to be able to manipulate it by programming later.
• Regex Type=alphabetical : this is a very interesting behavior of NatJet TextField : This is a quite complex set of characters that are allowed as input. Any other characters won’t be input. We don’t means that the control will show an error, we mean that the input will be rejected. This is what I call maximum interaction with the user : if the character is forbidden, it won’t be even allow to enter it. This is a quite basic functionality on Windows application. In the case of the alphabetical set, is a complex set of characters that should correspond to what you need to enter a name : Upper and lower case, accented characters (yes ! we are French), single quote, space and dot. I believe this feature to be very helpful : Most of text input will be fine with this rule and will prevent intrusion of dangerous characters.
• Upper case mode=true : this will force the input in uppercase. I’m aware that this feature may not be very useful in a Hell World, but this kind of feature that allows a careful controlled and calibrated input of some important information (like name) is very important in real life application

PushButton and action

This is time to display our Hello World message according to the input.
Select the PushButton and enter the following properties :

• Name=displayPB : name of the control. This will ease programming.
• Caption=Say hello : text that will appear on the PushButton

If we click on the property Event –> Executed, an arrow will appear on the right.

If you press the button “->”, you will get a message asking you to save the modification on your file. Answer “Yes”. NatJet, will bring you directly on the java class corresponding to your panel.

Responsibility and separation of concerns in NatJet

When you drag and drop controls in the NatJet Designer, NatJet saves this description in an XML files. This file describes the Presentation layer and only this part. If you press on the Source tab on the bottom of the Graphical Designer, you will find the source of this file and you will not find any Java code. This is pure presentation layer.
From this description, NatJet generates automatically an abstract java class corresponding to this file. This abstract java class (in our case : fr.natsystem.natjet.app.NatJetHelloWorld.ui.api.AbstractMainPanel) contains java code that will build the presentation layer.
NatJet generates also a java class that inherit from the previous abstract class. This java class (in our case fr.natsystem.natjet.app.NatJetHelloWorld.ui.MainPanel) contains methods that will be triggered by NatJet accordingly to the user action.
The developer will code this method to interact with the user. In these methods, the developer will have available all controls as properties of this java class.There is no technical code in this java class. NatJet enforces a clear separation between the generated code (only in the abstract class) and your code (only in the java class).
For example, we will complete the method displayPB_ExecutedEvent (note the name of the PushButton as first part of the method name).

1. In this method we will retrieve the value input by the user : nameTF.getText()
2. And we will use the msgBox service to display a message to the user.

The final code, will be :

package fr.natsystem.natjet.app.NatJetHelloWorld.ui;
import fr.natsystem.natjet.app.NatJetHelloWorld.api.*;

import fr.natsystem.natjet.app.NatJetHelloWorld.ui.*;

import fr.natsystem.natjet.app.NatJetHelloWorld.swt.*;

import fr.natsystem.natjet.app.NatJetHelloWorld.ui.api.*;

import fr.natsystem.natjet.app.NatJetHelloWorld.*;

import fr.natsystem.resource.localization.NatJetHelloWorld.*;

import fr.natsystem.natjet.event.*;

import fr.natsystem.natjet.window.*;

import fr.natsystem.nslogger.NsLogger;

import fr.natsystem.natjet.exception.*;

public class MainPanel extends fr.natsystem.natjet.app.NatJetHelloWorld.ui.api.AbstractMainPanel {

 

    public MainPanel(fr.natsystem.natjet.window.NsLayoutContainer arg0, java.lang.Object arg1) throws fr.natsystem.natjet.exception.ENsUnableToRemoveForm {

     public Object getUserData(){

         return null;

     }

    @Override

     public void setUserData(Object arg0){     }

    @Override

     public void displayPB_ExecutedEvent(NsExecutedEvent arg0){

         msgBox("Hello "+nameTF.getText(), "Message");

     }

}

Positioning and Alignment of controls

We will finish back with the Graphical Designer.
NatJet uses absolute positioning for controls : Each control have x,y coordinates. When you drag & drop a control you move it around changing its coordinates.
This gives you a great freedom and precision to build your display : this point maybe quite useful when building complex display with lot of controls.
You have plenty of option to handle alignment :

1. You can used the Marquee to select several controls with a lasso
2. You cans use in the toolbar the Align Middle button align selected controls

Notice, that you have several different kind of alignment options in the toolbar.

Run the application

If you stopped the server, you can restart it and see the finished application running.
When you enter a name, notice that if you try to input a number nothing happens.

If you type a lower case, it is automatically transform in upper case.
When you press the button, you get a message box.

Conclusion

This is a very quick glance to NatJet possibilities. I’ve tried to stress several points that seems to me very important :
NatJet is a Eclipse plug-in that allows you to enjoy all possibilities and functionalities of Eclipse
With NatJet is very easy to build elaborate and very interactive displays : No Ajax, no Javascript or HTML knowledge are necessary and yet we are able to reject some character or transform input.
NatJet is based on absolute positioning of controls to give developer flexibility
NatJet is like modern development tools for Windows like VB or our former product NS-DK or NatStar : Drag & Drop of controls and a property view to parameterize them.