GWT reusable components in JSP web pages

This is a small demonstration of how GWT client side widgets can be used in JSP web pages:
http://gwtjsp.lehelsipos.cloudbees.net/ 

EJB-GWT and Netbeans IDE

Accessing EJB from GWT using the Netbeans IDE

I was curious to see how does it work the GWT(google web toolkit) technology, together with EJB-session beans, moreover how the Netbeans development environment uses it's wizards, to ease the development.

I created a MySql table with a simple architecture to demonstrate the functionality, having an ID and a Name field:

My short demonstration is about to visualize the content of the “Name” field by a given record ID.

Netbeans gives us some useful wizards to create entity and session beans to achieve the MySql table's content. Entity beans are a type of Enterprise JavaBean(EJB), a server-side J2EE component, that represents persistent data maintained in a database. Session Beans implements a business task using entity beans. Both are hosted by an EJB container, like the Glassfish server.

To access EJB from a GWT web application, we must create remote session beans. Using the Netbeans Ide, we can achieve this, in following way:

• first I created a java class library project, remote.jar. This jar file will contain the necessary entity bean for the session bean. Right clicking on this project I added an entity bean with a wizard connecting to the above mentioned MySql table. Additional packages to this project were the EclipseLink JPA 2.1 and Java EE 6 Api Library.
• in the next step, I created a new project an EJB module. The remote.jar was added to this module as an additional library. Right clicking also on this project, we can call a wizard to create a remote session bean for the entity class. This step, is also generates automatically the remote session bean into the remote.jar file
• I built both projects and deployed the EJB module using Glassfish 4.
• To create a GWT web application with Netbeans it is necessary to add the GWT plugin to the IDE from it's menu: Tools-Plugins-Available Plugins or Downloaded Plugins if you have downloaded this plugin from Netbeans' official site. After this, you can create the java web application adding to it the GWT framework, at the end of the wizard.

How to configure the GWT web application to use enterprise java beans

We can do this by the remote.jar package created in the steps above mentioned. After the GWT web application was created, I added the remote.jar package to this web project, with the entity and remote session bean created in it. I don't want to enter in too much details, I suppose that you are familiar with GTW-RPC technology, because this is necessary to reach server-side data. So, after creating the necessary java files to the GWT-RPC(you can use here, also wizards), my server-side implementation of a simple ejb call, looks like the following:

GWT-RPC sends server-side data across the network through serialized objects, therefore one important thing I would like to mention here, that we must create a wrapper class, to send ejb data, across the wire, to the client. An entity record with a given id, is found by the session bean finder method.
The wrapper class implements the Serializable object, gets the entity data as input data into it's constructor, and associates their value to it's local fields, accessed by getter and setter methods.

DIA - Engineering diagrams

1. Dia is an application for creating technical diagrams. Its interface and features are loosely patterned after the Windows program Visio. Features of Dia include multiple-page printing, export to many formats (EPS, SVG, CGM and PNG), and the ability to use custom shapes created by the user as simple XML descriptions for generating the desired code. Dia is useful for drawing UML diagrams, flowcharts, database diagrams, network maps, electrical circuits and many others. 
You can download for free:
http://projects.gnome.org/dia/



2. BlueJ is an integrated Java environment specifically designed for introductory teaching. BlueJ supports:

• fully integrated environment
• graphical class structure display
• graphical and textual editing
• built-in editor, compiler, virtual machine, debugger, etc.
• easy-to-use interface, ideal for beginners
• interactive object creation
• interactive object calls
• interactive testing
• incremental application development 

Downloadable from:
http://www.bluej.org/download/download.html 

GWT-MGWT from a single source code

   I just write a simple web page rpc-application, that recognizes the platform on which it is run, and has a different UI for mobile and for desktop.
Gwt stands for browsers and Mgwt for m. webkit, and I tried to use a proper arhitecture to load the right GUI.
If you test this on a desktop machine use firefox for desktop and google chrome to emulate mobile appearance(with http://ipad-emulator.org/).

So, this is:
http://lehelsipos-gwt4.appspot.com/

And if you would like to download the source code:
http://siposlehel.atw.hu/

SmartGWT.Mobile

Mobile world and web approach solutions – SmartGWT.Mobile

As the demands increase for applications to mobile phones, tablets and smart phones I would like to, go through at existing web solutions for mobiles, among native applications, and analyzing a little bit, and emphasizing one of them, the SmartGWT.Mobile product.

The first thing that comes in my mind, of course is html, javascript, css3, html5. The mobile web is growing up quickly, and tons of great HTML5 features are already supported on modern mobile browsers. Web developers can use the same set of technologies they know and love to build rich web applications that work across different device types. HTML5 allows us to use efficiently local storage, multimedia introducing new audio-video types like: MP4, WebM, Ogg and offers a canvas for graphics. Supports mouse and touch together.

If you are not satisfied with simple web pages or applications, you might think forward using technologies, that offers us, server side communications too. HTML5 can be paired with server side solutions like PHP or JSP. And then, you can enter into Java world, because there are plenty of possibilities which says that you can write all the code, the server side and even the client side program, all in java. When you are ready with programming, you just translate or compile your program to javascript and html5. And more, because your output will be a more efficient html5 and ajax code, than one written manually. You don't have to worry about browser's compatibility and of course the server side code will run on a java web server. Thanks for GWT-GoogleWebToolkit, such solutions are the following, let's see a few of them:

MGWT; GWT-Phonegap

mgwt is a library for developing mobile apps and mobile websites with GWT from one code base. mgwt provides native looking widgets for many platforms, animations and many other things that are needed for writing mobile apps. gwt-phonegap enables GWT apps to use Phonegap. With Phonegap HTML5 apps can access the same device features that native apps can use from Javascript, such as the file system or contacts.
With mgwt and gwt-phonegap you can deploy your GWT apps into any app store or let your users use them as a website.
Both projects are available under apache 2.0 license from maven central.

mgwt provides mobile widgets that are compatible with UIBinder and the Editor Framework. mgwt integrates touch events and animation events with its own DOM implementation and provides gesture recognizers on top of that.
There are themes for iPhone, iPad, android phones, android tablets and blackberry. For going offline there is an automatically generated HTML5 offline manifest.
In dev mode gwt-phonegap can emulate the Phonegap API so that developing of Phonegap apps can happen inside GWT dev mode. gwt-phonegap also provides utilities to make GWT RPC work in a Phonegap environment. Personally, I think that the one disadvantage of this solution, is that for GWT PRC server side communications, you must use the GWT-Phonegap library too, among the mgwt package.

Emitrom products:

emitrom – comes with a set of product for different kind of applications like: Flash4J, Lienzo, Titanium4JMobile, Touch4J. They are very modern and interesting, is worthy to see and try. Develop slick mobile web apps that will look and feel like native iOS, Android and BlackBerry using the Secha Touch API but do it in the language you know with the tools you already know in Java. So sounds good, but one thing brothers me a little bit, for the functionality, you have to add additional packages to your emitrom project, like Sencha Touch Javascript library, or Phonegap.

SmartGWT.Mobile:

The smartclient  platform makes is simple to build powerful, high-productivity web applications on pure web standards. SmartGWT is coding in java, and getting the power of the SmartClient framework.

Smart GWT combines the industry's richest set of GWT UI components with a Java server framework to provide an end-to-end solution for building business web applications. Provides all the power of true Ajax, deep server integration, rich enterprise ui components, and mobile support without a rewrite. Even if you know nothing about mobile development, your Smart GWT application supports mobile. Finger taps and gestures arrive as normal mouse events, so your event handlers just work — users can even trigger context menus and hovers via touch-and-hold, and drag and drop via finger slides. Device-aware components automatically switch appearance and behavior to mimic typical mobile UIs.

Want more control? Gesture & orientation change events, as well as native functions like phone dialing are all there to let you fully tune the mobile experience.
In plus, SmartGWT offers us a new product family named SmartGWT.Mobile.

When should I use SmartGWT.mobile vs Smart GWT?

In a nutshell, if your application:
1. primarily targets phones and tablets: use SmartGWT.mobile only
2. primarily targets desktops and tablets: use Smart GWT only
3. targets desktops, tablets and phones: consider using both; however, depending on devices and requirements you may use just one or the other.

I would like to present a short application written in java with SmartGWT.Mobile which has a server side RPC communication, getting data from a server, and showing into a TableView mobile component. There is no need of additional packages like, phonegap or sencha to run this program. I put this running code on a free java server to demonstrate the functionality. If you test this in a desktop pc, you should us the google chrome explorer, because this explorer handles dialog boxes for mobiles. Google Application Engine offers us a web server for java applications, and it has also a free but limited storage.

You can find the link of my mobile applications on my site

My personal conclusion is that, you may use any of these technologies, if you want a web solution on your mobile, and as you see, these technologies are making effort also, to achieve a native appearance or sometimes even native functionalities too. It is ok! but for example, I don't consider a server side communication, being just a native functionality, it is also a web programming pretension. 
Web pages, I think, never will transform to real, true native applications. And don't have to. At the end you will always deal with javascript and html as a result of your work. Is not a problem, it is in order.  And again, my personal opinion, is that, for a real native application use the right tool or programming language, because there are also many solutions, even in java, like Codename One. For web pages, sites and web applications the above mentioned technologies are the best :) 

Java swing with JavaFx

Enhance a Java swing frame with JavaFx componets or functionality

My purpose with this short blog to present a very simple example of how I was understood the use Java swing components together with Javafx components on a Java Frame form. So, I just was curios to see how can I improve a swing form with the new modern JavaFx componets or technology. Having this idea in my mind I have looked for technical documents at oracle javafx blog site, and I found the following 2 interesting articles:

JavaFX for Swing Developers

JavaFX Interoperability with SWT

More about javafx on: Oracle's site

Firs let me show you to picture about my running application, that tells you all, about my short example.

Image 1:

Image 2:

Now as you see above, just a short demonstration of how can we use together a javafx and a swing button on a JFrame form. With Netbeans IDE, the steps are easy primitve, but of course you can use your favorite IDE to try this also. I packed all the application in a zip file, so you can even download for free, if you want to look over.

Downlaod the application

First I created an empty, new JavaFx project, called javafxswingapplication1. Then you may wonder, but I created a new java file, not a javafx unit. This was an empty JFrame form, and I just put on it a swing button, a swing text field and also a JPanel swing container. The JPanel will hold the javafx components, designed on a JFXPanel. The “birdge” between the swing and javafx, is the JFXPanel javafx container, which can be added to the JPanel. The swing part of the form was designed with the swing designer from the Netbeans IDE, and the javafx code I added manually to the form.

All the javafx code is wrapped into a single method and is called from the constructor of the Jframe form, after the call of initcomponents() swing initialization method. The javafx project is set to start this frame at running the application. This can be done at project properties, run – main class.

So the key point is the javafx method, let's see how does it look. I was called this method: createSceneAndAddToSwing

private void createSceneAndAddToSwing() {

PlatformImpl.startup(new Runnable() {

public void run() {

jfxPanel = new JFXPanel();

Group mainPanel = new Group();

Scene scene = new Scene(mainPanel,300,150);

Button btn = new Button();

btn.setText("From JavaFX");

btn.setOnAction(new EventHandler<ActionEvent>() {

@Override

public void handle(ActionEvent event) {

jTextField1.setText("It was pushed a JavaFX button!");

}

});

mainPanel.getChildren().add(btn);

btn.setLayoutX(50);

btn.setLayoutY(100);

jfxPanel.setScene(scene);

//add this "javafx" to the swing jframe's jpanel

jPanel1.setLayout(new BorderLayout());

jfxPanel.setPreferredSize(new Dimension(PANEL_WIDTH_INT, PANEL_HEIGHT_INT));

jPanel1.add(jfxPanel, BorderLayout.CENTER);

jPanel1.revalidate();

jPanel1.repaint();

}

});

}

So that's it, for a more complex javafx functionality in a swing frame, I would firstly create a standalone javafx project to wirte and test the desired javafx and then to embed it onto a jpanel container using the JFXPanel as a bridge.

NetBeans 7.3 Contribution

Today I got this response to my NetBeans 7.3 contribution. I am very happy now :)

 

Dear NetBeans User,
In the past you have taken the time to report issues that you encountered while using NetBeans software. A new version (NetBeans 7.3) has just been released,and we'd like to inform you that the following issue(s) you reported have been addressed in the new release:

217446	AssertionError at org.openide.loaders.TemplateWizard.updateState
217701	NumberFormatException: For input string: ",193715"
218240	AssertionError at org.netbeans.modules.j2ee.ejbjarproject.EjbJarProjectOperations.notifyDeleting
218766	ClassCastException: org.netbeans.modules.refactoring.api.RenameRefactoring cannot be cast to org.netbeans.modules.refactoring.api.MoveRefactoring
219131	Creating Master/Detail Form Hangs During Creation
221017	IllegalStateException: Too many org.netbeans.modules.web.project.ui.customizer.WebProjectProperties$5 (3) in shared RequestProcessor; create your own
221126	NullPointerException at org.netbeans.api.project.ProjectUtils$BasicInformation.getDisplayName
221267	NullPointerException at org.netbeans.modules.profiler.stp.SelectProfilingTask.selectAttachProfilerTask
221279	100% cpu with Lazy Node Children: Too many repetitions in getNodes(true). Giving up.
222614	'Add from' Palette Manager buttons does not work as expected
222759	NullPointerException at org.netbeans.modules.autoupdate.ui.PluginManagerUI.decorateTabTitle
223759	NullPointerException at org.netbeans.modules.debugger.jpda.ui.ConnectPanel.getEditedArgs
224410	AssertionError at org.tmatesoft.svn.core.internal.wc17.db.SVNWCDbRoot.

Please visit the netbeans.org website to download NetBeans 7.3 and to learn more about the new release.
We appreciate your contribution to our efforts to make NetBeans software and features better for all users. And as always, we look forward to your feedback on how we can continue to improve NetBeans.Thank you.The NetBeans Team

 

Reusable GWT components in java library packages

Using the Google Web Toolkit technology we have a set of widgets for enhance our web client interface. You can find the list of these java ui components with a short description on Gwt’s website: GWT widgets

In this blog I would like to present an easy way of developing new reusable widgets to our gwt web application. The new gwt widget can be packed into a java library package, in this way making it reusable for other web projects too. During my work, I use the Netbeans IDE but you are free to follow the steps in your favorite java editor.

I advice to plan always your web application with a multi-tier architecture, having separate modules for servers and client side programming.

In first step I will show you, how to create GWT widget library and then how to use it in a test web project.

1. Creating a reusable gwt widget library
   In Netbeans Ide just choose File-New Project and Java-Java Class Library. Name your project for example: GwtComponents
   In project properties we must add the google web toolkit sdk library GWT2.5.0, which should contain at least the gwt-user.jar file
   Structure your library project to have 3 folders:

• a directory for the gwt.xml file: gwtcomponents
• a directory for java files, where we place the new gwt component: gwtcomponents.client
• a directory for resource files, like css, image files: gwtcomponents.public

So, we almost are ready, but let's see how to create a new component. First we need an xml file, because this package, will be a gwt reusable library package. Create an xml file and name it, Main.gwt.xml and put it, into your main directory, gwtcomponents. Your xml file should contain the following lines:

<?xml version="1.0" encoding="UTF-8"?>

<module>

<!-- including the gwt module into the library -->

<inherits name="com.google.gwt.user.User"/>

<!-- declaring css file for styling our widget components -->

<stylesheet src="mystyle.css"/>

<!-- folder which contains the widget component -->

<source path="client"/>

</module>

To create a gwt widget, just create a java file that extends a gwt existing component. In my example I extend my java file with a HorizontalPanel, and I put on it a gwt label and an edit component. In this way, I will call my new gwt widget, LabeledEdit. Let's see how does it look:

package gwtcomponents.client;

/**

*

* GWT component: LabeledEdit - in constructor gets the argument for the text of the label

*

*/

import com.google.gwt.user.client.ui.HasHorizontalAlignment;

import com.google.gwt.user.client.ui.HasVerticalAlignment;

import com.google.gwt.user.client.ui.HorizontalPanel;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.TextBox;

public class LabeledEdit extends HorizontalPanel {

public TextBox txtField;

public Label lblField;

public LabeledEdit(String label) {

//base horizontal panel settings:

setStyleName("comp1-hpanel");

//the label

lblField = new Label(label);

lblField.setStyleName("comp1-label");

add(lblField);

//the field

txtField = new TextBox();

add(txtField);

}

}

My stylesheet file under the public directory, is the follwing:

/*

LabeledEdit

*/

.comp1-hpanel {

background-color: #C3D9FF;

border: 1px solid blue;

}

.comp1-label {

border: 1px solid black;

background-color: orange;

font-weight: bold;

text-align: center;

}

So, that's it, in the next step, after building and creating the jar file from this project, I will test it in a gwt web project:

2. Using the newly created gwt library
   In my gwt web project I just added the jar file – GwtComponents.jar - created above to my gwt web application. The main gwt.xml file of the web project must contain the following line to use the library in the test project:
   <inherits name="gwtcomponents.Main"/>
        And your main module:

LabeledEdit labelwithedit;

public void onModuleLoad() {

  labelwithedit = new LabeledEdit("Reuseable GWT library: ");

  //you can also redesign your gwt component here, if you want

  //labelwithedit.setStyleName("newstyle_in_this_project");

  RootPanel.get().add(labelwithedit);

}

These are all the necessary steps to do, for creating your own gwt reusable package. You can download my gwt library for free, it is written under Netbeans.

Examples

And also you will find a link there, to test a running web project which use this library.