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.