Friday, 30 December 2011

GWT meets Flex: gwt4flex

2011 was definitely not the year of Flex. With the rise of the mobile devices including tablets, Adobe decided to step back instead of striking back.

Lately most of the web UI work I have been doing has moved to gwt from flex. I still feel flex is a great platform and enjoy coding in actionscript but have really doubts about its future. 

While I go deeper in GWT, I found out a very interesting project by Alain Ekambi. I downloaded and gave a test drive. Honestly what I had in mind was different from Alain's aim. I was expecting to find an easy integration of flex from gwt but what Alain had achieved was much more complex, building a Flex application (compiled swf) from gwt style code which is pure java.

I had been teaching and coding flex since version 2 beta, thus I feel very comfortable with actionscipt, mxml and event oriented programming. However not everyone feel that way and that was what Alain tried to achieve with gwt4flex which lets you to code in in GWT but compiles swf files offering a easier learning curve for Java developers.

I emailed Alain to see if I can achieve what I had in my mind, using flex components partially in GWT applications as if they were GWT components. Surprisingly Alain was kind and fast enough to implement what I wanted and sent me a beta jar in several hours.

GWT4Flex can be dowloaded on this link. The live demo shows a nice looking flex application, however, if you click the view source button what you will find out will be GWT style source code which does a client side pdf creation.

  1. public class Gwt4FlexExplorer extends  FlexEntryPoint {  
  2.    @Override  
  3.     public void onLoad() {  
  4.                 final Panel panel = Panel.newInstance("Gwt4Flex and AlivePDF");  
  5.                 panel.setPercentSize(70);  
  6.                 panel.setCenter(0);  
  7.                   
  8.                 final RichTextEditor richTextEditor = RichTextEditor.newInstance();  
  9.                 richTextEditor.setPercenSize(100);  
  10.                 panel.addElement(richTextEditor);  
  11.                 Application.get().addElement(panel);  
  12.   
  13.                 ControlBar controlBar = ControlBar.newInstance();  
  14.                 Button pdfButton = Button.newInstance("Export text to PDF""demo/pdf.png");  
  15.                 pdfButton.addEventListener(MouseEvent.CLICK, new FlashEventListener<Event>() {  
  16.                     @Override  
  17.                     protected void onFlashEvent(Event event) {  
  18.                         if (richTextEditor.getText() == null || richTextEditor.getText().isEmpty()) {  
  19.                             Alert.show("Please enter a text in the RichTextEditorControl");  
  20.                         } else {  
  21.                             PDF pdf = PDF.newInstance();  
  22.                             pdf.addPage();  
  23.                             pdf.writeFlashHtmlText(richTextEditor.getHtmlText());  
  24.                             Application.get().saveFile( pdf.save(), "Generated.pdf");  
  25.                         }  
  26.   
  27.                     }  
  28.                 });  
  29.                 pdfButton.setHeight(40);  
  30.                 controlBar.addElement(pdfButton);  
  31.   
  32.                 Spacer spacer = Spacer.newInstance();  
  33.                 spacer.setPercentWidth(100);  
  34.                 controlBar.addElement(spacer);  
  35.   
  36.                 Button sourceButton = Button.newInstance("View Source","demo/code.png");  
  37.                 sourceButton.addEventListener(MouseEvent.CLICK, new FlashEventListener<Event>() {  
  38.                     @Override  
  39.                     protected void onFlashEvent(Event event) {  
  40.                         FLEX.navigateToURL(SourceCodeController.getSourceFor("RichTextEditor"));  
  41.                     }  
  42.                 });  
  43.                 controlBar.addElement(sourceButton);  
  44.                 panel.addElement(controlBar);  
  45.             }  
  46. }  

If you check Emitrom's website actually they offer much more such as GWT4Touch which lets you code in GWT style Java and use Sencha Touch in the background! 

Although I do encourage everyone to learn new languages, similar to Google's approach of compiling javascript from well known Java, Emitron's tools offer the most easy path for a Java developer to produce Flex or Sencha apps.  

Great work Alain!