• Introduction
• A simple Example
• Launch the Application
• Conclusion

Introduction

A very annoying point in GWT is to write the (same) code to create Widgets and set the Properties. Most lines are filled with these boilerplate code. GWT 2.0 has a solution for this, it is called Generators. Generators are classes that are invoked by the GWT compiler to generate a Java implementation of a class during compilation. Instead of writing:

TextBox myTextBox = new TextBox();
myTextBox.setText("Hello World TextBox");
myTextBox.setName("blablubb");
myTextBox.setStyleName("ihatethis");
...

You can write this:

@FormField(styleName = "GWTstyleTextBox", parentAccessor = "verticalPanel", defaultText= "Hello World TextBox")
TextBox nameField;

What has happened? The boilerplate code was replaced by an Annotation. First the Generator translates the Annotation into a Java class and after that the compiler creates the corresponding JavaScript-Code (very crazy i know). You can use Annotations for nearly everything, but this blog shows you how to create TextBox and Label -fields.

A simple Example

First, take a look at MyPanel.java, where you can see the @FormField-Annotation in action, which generates code for a TextBox (nameField) and a Label (labelField). This is only working when the deferred binding mechanism GWT.create() is encountered while compiling.

MyPanel.java

package eu.jdevelop.gwt.anno.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import eu.jdevelop.gwt.anno.client.ui.forms.FormBinder;
import eu.jdevelop.gwt.anno.client.ui.forms.FormField;

/**
 * Component which contains an annotated TextField and LabelField
 *
 * @author Siegfried Bolz
 * @since 09.01.2010
 */
public class MyPanel {

	// Create this in every annotated class to support Field-Annotations
	interface InternalFormBinder extends FormBinder<MyPanel> {}
	private static final InternalFormBinder formBinder = GWT.create(InternalFormBinder.class);

	// Parent (Store) for the annotated Fields
	final VerticalPanel verticalPanel = new VerticalPanel();

	// Create a LabelField
	@FormField(styleName = "GWTstyleLabel", parentAccessor = "verticalPanel", defaultText= "Hello World Label")
	Label labelField;

	// Create a TextField
	@FormField(styleName = "GWTstyleTextBox", parentAccessor = "verticalPanel", defaultText= "Hello World TextBox")
	TextBox nameField;

	public MyPanel() {
		// Bind this instance to the FormBinder
		formBinder.bind(this);
	}

	public VerticalPanel getPanel() {
		return verticalPanel;
	}
}

The FormField-Annotation has only 3 parameters, which are set on every Field. If you want specific parameters you can create more Annotations or enhance this one with an intelligent system to activate them.

FormField.java

package eu.jdevelop.gwt.anno.client.ui.forms;

import java.lang.annotation.*;

/**
 * Annotation for all Field-Types
 *
 * @author Siegfried Bolz
 * @since 09.01.2010
 */
@Documented
@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.FIELD})
public @interface FormField {
  String styleName() default "";
  String parentAccessor();
  String defaultText() default "";
}

The FormBinder-Interface is used for the deferred binding operation, the parameter can be accessed in the FormBinderGenerator-class.

FormBinder.java

package eu.jdevelop.gwt.anno.client.ui.forms;

import eu.jdevelop.gwt.anno.client.MyPanel;

/**
 * Simple Interface for binding operations
 *
 * @author Siegfried Bolz
 * @since 09.01.2010
 */
public interface FormBinder<T> {

  // Make "bind" generic to support more components
  void bind(MyPanel component);
}

The Generators are creating the Java-files. I have splitted this operation in three main and two sub files. BaseGenerator is used to create an empty File with imports, FormBinderGenerator adds some default actions like Field instantiation, setStyleName.. and implementations of FieldGenerator adds Field specific operations.

BaseGenerator.java

package eu.jdevelop.gwt.anno.ui;

import com.google.gwt.core.ext.Generator;
import com.google.gwt.core.ext.GeneratorContext;
import com.google.gwt.core.ext.TreeLogger;
import com.google.gwt.core.ext.UnableToCompleteException;
import com.google.gwt.core.ext.typeinfo.JClassType;
import com.google.gwt.core.ext.typeinfo.JParameter;
import com.google.gwt.core.ext.typeinfo.NotFoundException;
import com.google.gwt.core.ext.typeinfo.TypeOracle;
import com.google.gwt.uibinder.rebind.IndentedWriter;

import java.io.PrintWriter;

/**
 * Create the Implementation-Class and add a basic header data for ALL
 * generated Annotations.
 *
 * @author Siegfried Bolz
 * @since 09.01.2010
 */
public abstract class BaseGenerator extends Generator {
  protected static final String IMPORT = "import %1$s;";
  protected static final String PACKAGE = "package %s;";

  protected JClassType interfaceType(TypeOracle oracle, String s, TreeLogger treeLogger) throws UnableToCompleteException {
    JClassType interfaceType;
    try {
      interfaceType = oracle.getType(s);
    } catch (NotFoundException e) {
      treeLogger.log(TreeLogger.ERROR, String.format("%s: Could not find the interface [%s]. %s", e.getClass().getName(), s, e.getMessage()));
      throw new UnableToCompleteException();
    }
    return interfaceType;
  }

  @Override
  public String generate(TreeLogger treeLogger, GeneratorContext generatorContext, String s) throws UnableToCompleteException {
    JClassType interfaceType = interfaceType(generatorContext.getTypeOracle(), s, treeLogger);

    String packageName = interfaceType.getPackage().getName();
    PrintWriterManager writers = new PrintWriterManager(generatorContext, treeLogger, packageName);
    String implName = interfaceType.getName().replace(".", "_") + "Impl";
    PrintWriter printWriter = writers.tryToMakePrintWriterFor(implName);
    if (printWriter != null) {
      IndentedWriter writer = new IndentedWriter(printWriter);
      writer.write(String.format(PACKAGE, packageName));
      writer.newline();
      doGenerate(interfaceType, implName, writer);
      writers.commit();
    }
    return packageName + "." + implName;
  }

  protected abstract void doGenerate(JClassType interfaceType, String implName, IndentedWriter writer);

  protected void writeClassIntro(JClassType interfaceType, String implName, IndentedWriter writer) {
    writer.write("public class %1$s implements %2$s {", implName, interfaceType.getName());
    writer.indent();
    writer.newline();
  }

  protected JParameter[] extractInterfaceMethodParams(JClassType interfaceType) {
    return interfaceType.getImplementedInterfaces()[0].getMethods()[0].getParameters();
  }

  protected void writeOutro(IndentedWriter writer) {
    writer.outdent();
    writer.write("}");
    writer.outdent();
    writer.write("}");
  }
}

FormBinderGenerator.java

package eu.jdevelop.gwt.anno.ui.forms.generator;

import com.google.gwt.core.client.GWT;
import com.google.gwt.core.ext.typeinfo.JClassType;
import com.google.gwt.core.ext.typeinfo.JField;
import com.google.gwt.core.ext.typeinfo.JParameter;
import com.google.gwt.uibinder.rebind.IndentedWriter;
import eu.jdevelop.gwt.anno.client.ui.forms.FormField;
import eu.jdevelop.gwt.anno.ui.BaseGenerator;

/**
 * Generate the Class-Framework for all Annotations
 * which are implementing the FormBinder-interface.
 *
 * @author Siegfried Bolz
 * @since 09.01.2010
 */
public class FormBinderGenerator extends BaseGenerator {

  @Override
  protected void doGenerate(JClassType interfaceType, String implName, IndentedWriter writer) {
    JParameter[] methodParams = extractInterfaceMethodParams(interfaceType);
    writeImports(writer, methodParams);
    writeClassIntro(interfaceType, implName, writer);
    writeFieldsIntro(writer);
    writeMethodIntro(writer, methodParams);
    writeFieldsBinding(interfaceType, writer);
    writeOutro(writer);
  }

  /**
   * Generate default code for all generated Components
   *
   * @param interfaceType
   * @param writer
   */
  private void writeFieldsBinding(JClassType interfaceType, IndentedWriter writer) {
    for (JField jField : interfaceType.getEnclosingType().getFields()) {
      FormField annotation = jField.getAnnotation(FormField.class);
      if(annotation != null) {
        writer.write("component.%1$s = new %2$s();", jField.getName(), jField.getType().getQualifiedSourceName());
        writer.write("component.%1$s.setStyleName("%2$s");", jField.getName(), annotation.styleName());
        writer.write("GWT.log("Adding Field: %1$s of Type: %2$s to: %3$s",null);", jField.getName(), jField.getType().getQualifiedSourceName(), annotation.parentAccessor());
        writer.write("component.%1$s.add(component.%2$s);", annotation.parentAccessor(), jField.getName());
        FieldGeneratorFactory.getInstance().createFor(jField).write(jField, annotation, writer);
      }
    }
  }

  private void writeMethodIntro(IndentedWriter writer, JParameter[] parameters) {
    writer.write("public void bind(%1$s component) {", parameters[0].getType().getQualifiedSourceName());
    writer.indent();
  }

  private void writeFieldsIntro(IndentedWriter writer) {
    // nothing to do now
    writer.newline();
  }

  private void writeImports(IndentedWriter writer, JParameter[] parameters) {
    writer.write(IMPORT, GWT.class.getName());
    //writer.write(IMPORT, parameters[1].getType().getQualifiedSourceName());
    writer.newline();
  }

}

FieldGenerator.java

package eu.jdevelop.gwt.anno.ui.forms.generator;

import com.google.gwt.core.ext.typeinfo.JField;
import com.google.gwt.uibinder.rebind.IndentedWriter;
import eu.jdevelop.gwt.anno.client.ui.forms.FormField;

/**
 * Extend this abstract class to create a FieldGenerator.
 *
 * @author Siegfried Bolz
 * @since 09.01.2010
 */
public abstract class FieldGenerator {
  public abstract void write(JField jField, FormField annotation, IndentedWriter writer);

}

In this class i am adding a specific operation only for the TextBox.

TextFieldGenerator.java

package eu.jdevelop.gwt.anno.ui.forms.generator;

import com.google.gwt.core.ext.typeinfo.JField;
import com.google.gwt.uibinder.rebind.IndentedWriter;
import eu.jdevelop.gwt.anno.client.ui.forms.FormField;

/**
 * Generates additional Code only for the TextBox
 *
 * @author Siegfried Bolz
 * @since 09.01.2010
 */
public class TextFieldGenerator extends FieldGenerator {

  @Override
  public void write(JField jField, FormField annotation, IndentedWriter writer) {
    writer.write("component.%1$s.setEnabled(true);", jField.getName());
    writer.write("component.%1$s.setText("%2$s");", jField.getName(), annotation.defaultText());
    writer.write("component.%1$s.setName("%1$s");", jField.getName());
  }

  private boolean isInstanceOf(JField jField, final Class<?> aClass) {
    try {
      return aClass.isAssignableFrom(Class.forName(jField.getType().getQualifiedSourceName(), false, this.getClass().getClassLoader()));
    } catch (ClassNotFoundException e) {
      throw new RuntimeException(e);
    }
  }
}

In this class i am adding a specific operation only for the Label.

LabelFieldGenerator.java

package eu.jdevelop.gwt.anno.ui.forms.generator;

import com.google.gwt.core.ext.typeinfo.JField;
import com.google.gwt.uibinder.rebind.IndentedWriter;

import eu.jdevelop.gwt.anno.client.ui.forms.FormField;

/**
 * Generates additional Code only for the Label
 *
 * @author Siegfried Bolz
 * @since 09.01.2010
 */
public class LabelFieldGenerator extends FieldGenerator {

	@Override
	public void write(JField jField, FormField annotation, IndentedWriter writer) {
		writer.write("component.%1$s.setText("%2$s");", jField.getName(), annotation.defaultText());
	}

	private boolean isInstanceOf(JField jField, final Class<?> aClass) {
		try {
			return aClass.isAssignableFrom(Class.forName(jField.getType()
					.getQualifiedSourceName(), false, this.getClass().getClassLoader()));
		} catch (ClassNotFoundException e) {
			throw new RuntimeException(e);
		}
	}
}

To create a relation between the Fields and the Generators, i am using the FieldGeneratorFactory.

FieldGeneratorFactory.java

package eu.jdevelop.gwt.anno.ui.forms.generator;

import com.google.gwt.core.ext.typeinfo.JField;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;

import java.util.HashMap;
import java.util.Map;

/**
 * Register all Generators.
 *
 * @author Siegfried Bolz
 * @since 09.01.2010
 */

public class FieldGeneratorFactory {
  private static final FieldGeneratorFactory INSTANCE = new FieldGeneratorFactory();
  private static final Map<String, FieldGenerator> generators = new HashMap<String, FieldGenerator>();
  static {
    generators.put(TextBox.class.getName(), new TextFieldGenerator());
    generators.put(Label.class.getName(), new LabelFieldGenerator());
  }

  private FieldGeneratorFactory() {
  }

  public static FieldGeneratorFactory getInstance() {
    return INSTANCE;
  }

  public FieldGenerator createFor(JField jField) {
    String className = jField.getType().getQualifiedSourceName();
    FieldGenerator generator = generators.get(className);
    if(generator == null) {
      throw new IllegalArgumentException("Did not find any generator for the [" + className +"].");
    }
    return generator;
  }

}

The last class is used to write the Java-Files.

PrintWriterManager.java

package eu.jdevelop.gwt.anno.ui;

import com.google.gwt.core.ext.GeneratorContext;
import com.google.gwt.core.ext.TreeLogger;

import java.io.PrintWriter;
import java.util.HashSet;
import java.util.Set;

/**
 * Write the generated Java files.
 *
 * @author Siegfried Bolz
 * @since 09.01.2010
 */
public class PrintWriterManager {
  private final GeneratorContext genCtx;
  private final String packageName;
  private final TreeLogger logger;
  private final Set<PrintWriter> writers = new HashSet<PrintWriter>();

  public PrintWriterManager(GeneratorContext genCtx, TreeLogger logger,
      String packageName) {
    this.genCtx = genCtx;
    this.packageName = packageName;
    this.logger = logger;
  }

  /**
   * Commit all writers we have vended.
   */
  public void commit() {
    for (PrintWriter writer : writers) {
      genCtx.commit(logger, writer);
    }
  }

  /**
   * @param name classname
   * @return the printwriter
   * @throws RuntimeException if this class has already been written
   */
  public PrintWriter makePrintWriterFor(String name) {
    PrintWriter writer = tryToMakePrintWriterFor(name);
    if (writer == null) {
      throw new RuntimeException(String.format("Tried to write %s.%s twice.", packageName, name));
    }
    return writer;
  }

  /**
   * @param name classname
   * @return the printwriter, or null if this class has already been written
   */
  public PrintWriter tryToMakePrintWriterFor(String name) {
    PrintWriter writer = genCtx.tryCreate(logger, packageName, name);
    if (writer != null) {
      writers.add(writer);
    }
    return writer;
  }
}

The last thing to do, is to create the module-file FormBinder.gwt.xml and insert it into the project module file GwtAnnotations.gwt.xml

FormBinder.gwt.xml

<module>
    <inherits name="com.google.gwt.resources.Resources" />

    <generate-with class="eu.jdevelop.gwt.anno.ui.forms.generator.FormBinderGenerator">
        <when-type-assignable class="eu.jdevelop.gwt.anno.client.ui.forms.FormBinder" />
    </generate-with>
</module>

Here you can see the whole project opened in Eclipse.

Open Eclipse Project

Launched Application in Chrome

Debug Window

package eu.jdevelop.gwt.anno.client;

import com.google.gwt.core.client.GWT;

public class MyPanel_InternalFormBinderImpl implements MyPanel.InternalFormBinder {

  public void bind(eu.jdevelop.gwt.anno.client.MyPanel component) {
    component.labelField = new com.google.gwt.user.client.ui.Label();
    component.labelField.setStyleName("GWTstyleLabel");
    GWT.log("Adding Field: labelField of Type: com.google.gwt.user.client.ui.Label to: verticalPanel",null);
    component.verticalPanel.add(component.labelField);
    component.labelField.setText("Hello World Label");
    component.nameField = new com.google.gwt.user.client.ui.TextBox();
    component.nameField.setStyleName("GWTstyleTextBox");
    GWT.log("Adding Field: nameField of Type: com.google.gwt.user.client.ui.TextBox to: verticalPanel",null);
    component.verticalPanel.add(component.nameField);
    component.nameField.setEnabled(true);
    component.nameField.setText("Hello World TextBox");
    component.nameField.setName("nameField");
  }
}

Conclusion

Using Generators can help you to clean up your code by getting rid of boilerplate code. Don’t waste time by writing the same stuff, just generate it. One positive aspect is, that you have one point to make changes and don’t have to refactor the whole project. Ok you could use a factory with static methods (like WidgetsCreatorHelper.createLabelField(String name, String styleName) ), but this is old school and not so beautiful like Annotations.

Technorati Tags: annotation, boilerplate code, eclipse, field, generate, generators, gwt 2.0, Java, label, labelfieldgenerator, printwriter, textbox, textfieldgenerator

• Compilation time
• API changes
• Startup time of the new Development Mode
• Problems with other libraries

My enterprise project currently needs 66 seconds to build 8 permutations and is using this technologies:

• GWT 1.7.1
• GXT 2.1.0
• GIN 1.0 (with Guice 2.0)
• GWT-Presenter 1.0.0
• GWT-Log 2.6.2
• gwtrpc-spring 1.01
• Spring Framework 2.5.6
• Spring Security 2.0.5
• Hibernate Libs 3.x (core, annotation, validator…)

GWT 2.0

After i have replaced the old gwt-jar files with the new files, cleaned the project, i started the build target and launched the application. Here are the results:

Compilation time
Without compiler optimization the build need 107 seconds for 8 permutations. Using the draftCompile parameter the build needs “only” 82 seconds. These are not the results i have awaited.

API changes
Due to the fact that my build runs through without any errors or warnings, i think the major switch from listener to handler was done with the migration vom GWT 1.5 to 1.6 . So i think there aren’t any critical showstoppers waiting for me.

Startup time of the new Development Mode
Changing from com.google.gwt.dev.HostedMode to com.google.gwt.dev.DevMode was a great speedup! Using any browser you want, instead of this old Hosted Mode-Browser is a useful improvement. I can strongly recommend google Chrome 4 with the new Speed Tracer for development.

Problems with other libraries
In the technology-list above you can see that i use a wide range of gwt-technologies. I had some doubts about GXT, because i am using many widgets from it like the TabPanel, Drag and Drop, special Layouts, TreePanels, Accordion Window, Grids… , but i did not noticed any errors! I launched my Selenium-Tests many times and every result was green. The people from GXT have done a good job with the recently released version 2.1.0 .


Conclusion
Overall i think that migration could be possible with less effort if you have implemented an extensive test-suite. I see the most problems in Widget libraries like GXT, SmartGwt.. which are using listeners from API 1.5 .

If you have any comments, drop a line below.

Technorati Tags: compilation time, draftcompile, experience, gin, Google Web Toolkit, Guice, gwt 1.7.1, gwt 2.0, gwt-log, gxt, migrating, presenter

Plugins-Directory

IDEA 9 Settings

Enable incremental compilation

Plugin Example

Technorati Tags: bug fixed, eclipse mode, EclipseMode, incremental compilation, intellij idea 9, plugin

Table of contents

• Create the Project-files
• Using Eclipse
• Using NetBeans
• Using IntelliJ IDEA

Create the Project-files

During my growing experience with GWT i learned that it is better to create the project from scratch and import it into the IDE rather then using a IDE-wizard which often creates not all files you need. So let’s start bei downloading the Google Web Toolkit Archive and extract it. Open a shell (Windows-User run “cmd“) and navigate to the directory where you have extracted the GWT-archive. Run the following commands:

• webAppCreator.cmd -out MyProjectDirectory eu.jdevelop.gwt.MyApp
• i18nCreator.cmd -eclipse MyGwtProject -createMessages -out MyProjectDirectory eu.jdevelop.gwt.client.constants.i18n.MyLanguageConstants

So what have you done? You have created a GWT-Project and added support for Eclipse and internationalization (i18n).

Create the Project

• ant build
• ant hosted

Running Ant targets

Hosted Mode

Eclipse Plugin

Import GWT Project

Import project

Eclipse with GWT-Project

Project properties

Launch the application

Install the NetBeans Plugin

Web Application

Directory

Server

GWT Framework

GWT4NB Project

Running in Tomcat

App in Chrome

Change the directory

Original build.xml

Changed build.xml

Search and replace

new ant targets

Copied content

Edit the i18n-file

Hosted mode in NetBeans

IDEA Project

Import project

Select Eclipse

Eclipse directory

Choose project

Use the same directory

Created IDEA project

Tomcat Server

Fix the problem

Launched Tomcat

Tomcat and Chrome 4

hosted mode target

Technorati Tags: create project, eclipse, Google Web Toolkit, gwt, i18n, import, intellij idea, NetBeans

Circular reference problem

public class Server {
  private final Client client;

  public Server(Client client) {
  	this.client = client;
  }
}

Client.java

public class Client {
  private final Server server;

  public Client(Server server) {
  	this.server = server;
  }
}

Both Server and Client refer to the same instances of each other, using Constructor-Injection. Server refers to Client, which refers back to Server in a circle.


The solution for Spring

As you can see, you can’t directly use constructor wiring to make circular referents point to one another. To break the circularity without affecting the overall semantic of interdependence, is to introduce a proxy. First you have to decouple the Server and Client with interfaces.


Server.java

public interface Server{
}

Client.java

public interface Client {
}

ServerImpl.java

public class ServerImpl implements Server {
  private final Client client;

  public ServerImpl(Client client) {
  	this.client = client;
  }
}

ClientImpl.java

public class ClientImpl implements Client {
  private final Server server;

  public ClientImpl(Server server) {
  	this.server = server;
  }
}

The dependencies of ServerImpl and ClientImpl are now on a contract (interface) of each other, rather than a concrete class. This is where the proxy comes in:

ServerProxy.java

public class ServerProxy implements Server {
  private Server delegate;

  public void setDelegate(Server delegate) {
    this.delegate = delegate;
}

The ServerProxy is wired with setter injection, allowing ServerImpl and ClientImpl to declare their fields immutable and use constructor injection.


This is the corresponding Spring-Configuration:

applicationContext.xml

<beans>
		<bean id="serverProxy" class="ServerProxy">
				<property name="delegate" ref="host" />
	  </bean>

	  <bean id="server" class="ServerImpl">
				<constructor-arg ref="client"/>
	  </bean>

	  <bean id="client" class="ClientImpl">
				<constructor-arg ref="serverProxy"/>
	  </bean>
</beans>

The solution for Guice

Solving the circular reference problem with Guice is similar to Spring. All you need is to configure your bindings.

MyModule.java

public class MyModule extends AbstractModule {

  @Override
  public void configure() {
    bind(Server.class).to(ServerImpl.class).in(Singleton.class);
    bind(Client.class).to(ClientImpl.class).in(Singleton.class);
  }
}

The Guice injector automatically provides the proxy so that the correct order of the construction would be guaranteed.

That’s it

Technorati Tags: circular reference dependencies, google guice, Java, Spring

• NetBeans.org
• http://blogs.sun.com/theaquarium/

Now you can read the latest infos when you are on the road


This application has the following functionalities:

• Read the message-description inside the application
• Open the message-url inside the application or with the safari browser
• The possibility to the change the two Feed-URLs

You can download this application for free  


Here are some screenshots

Program Icon

The NetBeans-Feed

Read the Message Description

Loading News inside the app

News loaded inside the app

The Aquarium Feed

The Settings View

Change Feed-URL

Restore default Settings

About View

Technorati Tags: app store, free app, glassfish feed, iPhone, netbeans feed, rss reader

Normally you need an Apple Mac with the Leopard Operating System to program iPhone applications, but it is possible to do this with a Windows or Linux PC. All you need is to install Mac OS X 10.5.x in a Virtual Machine (i used VMware) and install there the iPhone SDK

iPhone SDK

VMware Settings

Launching Mac OS X

VMware running in Fullscreen (1440x900)

Safari Browser

Launching XCode 3.1

The Interface Builder for iPhone apps

Opened XCode Project 'NetBeans RSS Reader'

iPhone Simulator with running app

Technorati Tags: apple, apps, developer, interface builder, iPhone, leopard, mac, os x, sdk, settings, simulator, virtual machine, vista, VMware, windows, xcode

package eu.jdevelop.blog.jsfandflex
{
	import flash.external.ExternalInterface;
	import flash.utils.Proxy;
	import flash.utils.flash_proxy;

	public dynamic class JavascriptVariableProxy extends Proxy
	{

		/**
		 * The method that's invoked when a property is set on this object. Passes the variable through
		 * to the javascript environment.
		 *
		 * @private
		 */
		override flash_proxy function setProperty(name:*, value:*):void
		{
			ExternalInterface.call("function() { " + name + " = '" + value.toString() + "'; }");
		}

	}
}

You can call the function like this:

JSFandFlex.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
	JSF and FLEX
	@author Siegfried Bolz
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" color="#FFFFFF" layout="absolute" borderColor="#FDFEFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#205CF6, #01013D]" width="400" height="242">

	<mx:Script>
		<![CDATA[
			import eu.jdevelop.blog.jsfandflex.JavascriptVariableProxy;

			/**
			 * Write content from TextField into JavaScript-Variable which can be
			 * accessed by JSF.
			 */
			private function writeJavascriptVariable(jVariable:String, text:String):void
			{
				var proxy : JavascriptVariableProxy = new JavascriptVariableProxy();
				proxy[jVariable] = text;
			}
		]]>
	</mx:Script>	

	<mx:Label x="149" y="24" text="JSF and Flex" fontSize="14" fontWeight="bold"/>
	<mx:Label x="31" y="79" text="Insert some data" fontWeight="bold" fontSize="11"/>
	<mx:Label x="31" y="109" text="City" fontWeight="bold"/>
	<mx:TextInput x="31" y="125" id="txtCity" change="writeJavascriptVariable('city',txtCity.text)" color="#000000"/>
	<mx:Label x="31" y="167" text="Country" fontWeight="bold"/>
	<mx:TextInput x="31" y="184" id="txtCountry" change="writeJavascriptVariable('country',txtCountry.text)" color="#000000"/>

</mx:Application>

In Java, insert the whole Flex Code into the JSF file, add some JavaScript-Variables (city and country) and map them to the ActionScript-Code. Don’t forget to write the content of these Variables into the hidden inputFields when the submit is executed.

As you can see, it is possible to create JSF-Projects which are using the advantages of the Flex Technology. Try it and design astounding Web-GUIs with Adobe Flex and use the power of JSF (or something else) in the backend.

Technorati Tags: actionscript, adobe flex, connect, javascript, javaserver faces, jsf, NetBeans

• Introduction
• FlexBean Plugin
• Create the Flex Application
• Java Servlet
• Start the Application
• Downloads

Introduction

In this “proof-of-concept” you will create a Flex Application which sends Login-Data to a Java-Servlet (also created with NetBeans 6.5). The Servlet returns an answer which will be interpreted by the Flex Application. It is a very simple Application, you should only see how easy it is to go productive with FlexBean.


FlexBean Plugin

Before you can create Flex Applications with NetBeans, you have to install the FlexBean Plugin. Follow the Instructions for the Installation.


Create the Flex Application

Create a new “Flex Application”-Project.




Name the Project “SimpleFlexApp” and hit “Finish“.




You see now the new Project with the opened MXML-File.




Replace the Content of “Main.mxml” with this Code:


Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple Flex App which sends login-data to a Servlet
	 located at: http://localhost:8084//simplelogin/loginservlet

	 @author Siegfried Bolz
-->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="" color="#FFFFFF" layout="absolute" borderColor="#FDFEFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#205CF6, #01013D]" width="400" height="300">

	<mx:Script>
		<![CDATA[

			import mx.events.ValidationResultEvent;
			import mx.controls.Alert;
 			import mx.rpc.events.FaultEvent;
         	import mx.rpc.events.ResultEvent;

			private function validateID(event:MouseEvent):Boolean{
				 if (idValidator.validate().type == ValidationResultEvent.VALID) {
				 	return true;
			     } else{
				 	Alert.show("Please insert an ID !");
				 	return false;
				 }
			}

			private function validatePassword(event:MouseEvent):Boolean {
				 if (passValidator.validate().type == ValidationResultEvent.VALID){
				 	return true;
			     } else{
				 	Alert.show("Please insert a Password !");
				 	return false;
				 }
			}

			private function checkLoginData(event:MouseEvent):void {
			     if (validateID(event)==true && validatePassword(event)==true) {
			 		submitLoginData(txtID.text,txtPassword.text);
			 	 }
			}

			private function submitLoginData(id:String, password:String):void {
				lblError.visible = false;
				var login:LoginVO = new LoginVO(id,password);
				loginService.cancel();
				loginService.send(login);
			}

			private function onResult(event:ResultEvent):void{
				var resultObj:Object = event.result;
			 	var result:String = resultObj.message;

			 	if (result=="true") {
			 		Alert.show('Login successful!');
			 	} else {
			 		Alert.show('Login denied!');
			 	}

			}

	        private function serverFault(evt:FaultEvent):void {
				lblError.visible = true;
	        }

		]]>
	</mx:Script>

    <!-- Connection to the Server -->
    <mx:HTTPService id="loginService" useProxy="false" method="POST" resultFormat="object"
    	url="http://localhost:8084//simplelogin/loginservlet" result="onResult(event)"
    	fault="serverFault(event);" />

   	<!-- Validators -->
    <mx:StringValidator id="idValidator" source="{txtID}" property="text" triggerEvent=""/>
    <mx:StringValidator id="passValidator" source="{txtPassword}" property="text" triggerEvent=""/>

    <!-- GUI Elements -->
    <mx:Label text="Please insert your Login data" fontWeight="bold" x="122.5" y="32" fontSize="12"/>
    <mx:Label text="ID" x="72" y="71" fontSize="11" fontWeight="bold"/>
    <mx:Label text="Password" x="72" y="129" fontSize="11" fontWeight="bold"/>
    <mx:TextInput x="72" y="87" editable="true" color="#010000" id="txtID"/>
    <mx:TextInput x="72" y="144" color="#020000" displayAsPassword="true" id="txtPassword" editable="true"/>
    <mx:Button x="72" y="195" label="Submit" id="cmdSubmit" click="checkLoginData(event)"/>
    <mx:Label x="72" y="242" text="Error, wrong login data!" width="222" id="lblError" color="#FF0000" fontSize="16" fontWeight="bold" visible="false"/>

</mx:Application>

Create a new ActionScript-File, name it “LoginVO” and paste this code into it:


LoginVO.as

/**
 * Transfer-Object for the HTTPService-call.
 *
 * @author Siegfried Bolz
 */
package
{
	public class LoginVO {

		public var id:String;
		public var password:String;

		// Konstruktor
		public function LoginVO(id:String,password:String) {

			this.id = id;
			this.password = password;

		}

	}
}

Your Project have to look like this:




Build the Project to see that everything is working.




If you get this error: “Error: could not find a JVM“:




your Flex SDK Configuration File is invalid. Open the file “jvm.config” located in your “<SDK>/BIN” -directory and check that the variable “java.home=” is set to a valid Java JRE directory (remove the last slash!). Here is an example:

java.home=C:/Program Files/Java/jre1.6.0_07

Java Servlet

Create a new Java Web Application Project, name it “SimpleLogin” and add a Servlet (LoginServlet.java) with URL-Pattern “/loginservlet“.




Paste this Code into the file:

LoginServlet.java

package eu.jdevelop.blog.flexbean;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Login Servlet
 *
 * @author Siegfried Bolz
 */
public class LoginServlet extends HttpServlet {

    /**
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {

            String id = request.getParameter("id");
            String password = request.getParameter("password");

            System.out.println("received data from the Flex Application: id=" + id + " password=" + password);

            if (id==null || password==null) {
                out.println("<message>false</message>");
            } else {
                out.println("<message>true</message>");
            }

        } catch (Exception x) {
            System.out.println("Error: " + x.getMessage());
        } finally {
            out.close();
        }
    } 

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /**
     * Handles the HTTP <code>GET</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    /**
     * Handles the HTTP <code>POST</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Returns a short description of the servlet.
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

Start the Application

First start the Java Servlet and than the Flex Application.




The Flash Player opens.




Insert some data and click on “Submit” to send the input to the Java Servlet.




If the connection is set up alright (check the HTTPService in “Main.mxml“) you will receive a positive answer.




As you can see, it is possible to work with NetBeans in the Flex Environment, but there are many improvements necessary to replace the Adobe Flex Builder with the FlexBean-Plugin. Arnaud Vincent has enriched the NetBeans-Community with a new way, how NetBeans can be used for the Development today. It shows how flexible the NetBeans-Platform is, to fit the needs of the future.


Downloads

NetBeans 6.5 Flex Project: download
NetBeans 6.5 Java Servlet Project: download
Adobe Flex Builder 3 Project: download

Technorati Tags: adobe, flex, flexbean, Java, NetBeans, servlet

SAP NetWeaver: The Official Guide

Link to SAP Press

All you want to know about SAP NetWeaver can you read in this book, it is a must for beginners. Learn on 4 detailed Customer examples which technologies can be included in NetWeaver. This book is mostly theoretically, there is no difficult program code included. If you want to program stuff for SAP NetWeaver, first read this book to understand what NetWeaver can do.

Developer’s Guide to SAP NetWeaver Portal Applications

Link to SAP Press

Developing Components for SAP NetWeaver Portal is not an easy task. If you want to know how to do this, i recommend this book. For a quick-start head to chapter 10, there are some good examples with many screenshots and good instructions. You learn to work with the SAP NetWeaver Developer Studio, create Components and deploy them to the SAP NetWeaver Portal.


To be continued…

Technorati Tags: abap, adobe flex, books, Java, netweaver, nwds, portal, SAP, sap press, visual composer, web dynpro, xapps