Clicky

GWT and Flex Integration with Flash4j



Before getting started see what we are talking about in this real world demo.

When it comes to Rich Internet Applications the Apache Flex Framework (formerly Adobe Flex) is one of the best(if not the best) on the market. Because Flex applications run inside the Flash player they are guaranteed to behave the same no matter the platform as long as Flash is installed. Despite all the critics Flash still does a lot of things(Graphics, clientside IO, etc..) better and more efficient than HTML5.

But let's get real. HTML5 is catching up ! Fast! Really fast!
Things that were only possible with a browser plugin are now possible with pure HTML/CSS/JS. Our Lienzo library is an example of what s capable today with native browser capabilities.

A lot of companies have legacy Flex applications that they want to slowly move to HTML5. A complete rewrite is sometimes impossible so people are looking for an easy and intuitive way to integrate existing Flash based applications in the new JS/HTML/CSS ecosystem.

If you ever wrote Flex applications in ActionScript/MXML then you must know that integrating Flex in an existing HTML based web application is painful. One must manually hack Externalnterface, ending up with a big and difficult to maintain mix of ActionScript/MXML/HTML/CSS/JS.

Flash4j to the rescue

A couple of weeks ago we introduced version 3.1 of Flash4j, our Java API for the Flash Platform. As we stated in the release announcement the goal of Flash4j is to help developers combine HTML5 and Flash technologies in an unique way to create awesome experiences.

With Flash4j one can create amazing Flex applications all in Java. No need to learn ActionScript/MXML. Another powerful capability of Flash4j is the ability to easely integrate existing Flex application. With existing applications we mean application that were written in ActionScript/MXML. Let s see how this works.

A Simple Example

For this blog post we will be using a really simple Flex application.

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:bridge="bridge.*" > <fx:Declarations> <bridge:FABridge /> </fx:Declarations> <fx:Script> <![CDATA[ import mx.controls.Alert; public function sayHello():void { Alert.show("GWT and Flex for the win!","Emitrom"); } ]]> </fx:Script> <mx:Button label="Hello World from Flex" x="10" y="10" id="myButton" /> <mx:Panel x="159" y="65" width="437" height="247" status="Emitrom" title="Flash4j" layout="absolute" id="myPanel"> </mx:Panel> </s:Application>

GWT Integration

Using the generated SWF file inside a GWT application is straightforward with Flash4j. public class GwtFlex implements EntryPoint { /** * This is the entry point method. */ public void onModuleLoad() { //Path to the SWF file String swfPath = GWT.getHostPageBaseURL() + "flex/HelloFlex.swf"; SimplePanel flexPanel = new SimplePanel(); // styling the panel flexPanel.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); flexPanel.getElement().getStyle().setBorderColor("gray"); flexPanel.getElement().getStyle().setBorderWidth(3, Unit.PX); // size and add the Flex swf flexPanel.setPixelSize(800, 500); flexPanel.add(FLEX.inject(swfPath, 800, 500)); RootPanel.get("flexContainer").add(flexPanel); } }
That s it. Here we add the Flex SWF file in a GWT SimplePanel.

GWT to Flex communication

Communication with the Flex application is also seamless and intuitive. Button bgButton = new Button("Change Flex bgColor"); bgButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { FLEX.getRootPanel().setBackgroundColor(getBgColor()); } }); RootPanel.get("bgButton").add(bgButton);

bgButton is a regular GWT button and on line 5 we change the background color of the Flex application. Easy is'nt it ?

Flex to GWT communication

Flash4j also offers the ability to call GWT methods from existing Flex applications. Again your application MUST NOT be written with Flash4j !
ProxyObject buttonPeer = FLEX.getRootPanel().getObject("myButton"); com.emitrom.flash4j.flex.client.ui.mx.Button flexButton = com.emitrom.flash4j.flex.client.ui.mx.Button.wrap(buttonPeer); flexButton.addEventHandler(MouseEvent.CLICK, new EventHandler() { @Override public void onEvent(Event event) { RootPanel.getBodyElement().getStyle().setBackgroundColor(getBgColor()); } });

In the code above we get an existing button with the id 'myButton', add a ClickHandler to it. The ClickHandler then modifies the background color of the entire page.

Calling existing ActionScript methods from your GWT code is also possible with Flash4j. Button callButton = new Button("Call method in Flex"); callButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { FLEX.getRootPanel().invokeVoidMethod("sayHello"); } }); RootPanel.get("callButton").add(callButton);

The code above will invoke the 'sayHello' method declared in the existing Flex app.

A real world example of GWT-Flex Integration at work can be seen here and below is the Source code of the app. As we said before: Seamless Integration !

HTML code <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="HelloFlex.css"> <title>Flex-GWT</title> <script type="text/javascript" src="flexgwt/flexgwt.nocache.js"></script> </head> <body> <h1>GWT and Flex Integration with Flash4j</h1> <table align="center" id="myTable"> <tr> <td colspan="4" id="flexContainer"></td> </tr> <tr> <td id="bgButton"></td> <td id="eventButton"></td> <td id="addButton"></td> <td id="callButton"></td> </tr> </table> </body> </html>
Java Code
package com.emitrom.flexj.hello.client; import com.emitrom.flash4j.core.client.ProxyObject; import com.emitrom.flash4j.core.client.events.Event; import com.emitrom.flash4j.core.client.events.MouseEvent; import com.emitrom.flash4j.core.client.events.handlers.EventHandler; import com.emitrom.flash4j.core.client.utils.Color; import com.emitrom.flash4j.flex.client.core.runtime.FLEX; import com.emitrom.flash4j.flex.client.ui.mx.Panel; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.google.gwt.dom.client.Style.BorderStyle; import com.google.gwt.dom.client.Style.Unit; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.user.client.Random; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.SimplePanel; public class GwtFlex implements EntryPoint { private int position = 10; @Override public void onModuleLoad() { String swfPath = GWT.getHostPageBaseURL() + "flex/HelloFlex.swf"; SimplePanel flexPanel = new SimplePanel(); // styling the panel flexPanel.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); flexPanel.getElement().getStyle().setBorderColor("gray"); flexPanel.getElement().getStyle().setBorderWidth(3, Unit.PX); // size and add the Flex swf flexPanel.setPixelSize(800, 500); flexPanel.add(FLEX.inject(swfPath, 800, 500)); RootPanel.get("flexContainer").add(flexPanel); Button bgButton = new Button("Change Flex bgColor"); bgButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { FLEX.getRootPanel().setBackgroundColor(getBgColor()); } }); RootPanel.get("bgButton").add(bgButton); final Button eventButton = new Button("Add Handler on Flex Button"); eventButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { ProxyObject buttonPeer = FLEX.getRootPanel().getObject("myButton"); com.emitrom.flash4j.flex.client.ui.mx.Button flexButton = com.emitrom.flash4j.flex.client.ui.mx.Button.wrap(buttonPeer); flexButton.addEventHandler(MouseEvent.CLICK, new EventHandler() { @Override public void onEvent(Event event) { RootPanel.getBodyElement().getStyle().setBackgroundColor(getBgColor()); } }); flexButton.setLabel("I was changed from GWT. Click me now."); flexButton.setSize(300, 40); // Disable the GWT button to prevent further clicks eventButton.setEnabled(false); } }); RootPanel.get("eventButton").add(eventButton); final Button addButton = new Button("Add Flex Button"); addButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { if (position >= 160) { addButton.setEnabled(false); } ProxyObject panelPeer = FLEX.getRootPanel().getObject("myPanel"); com.emitrom.flash4j.flex.client.ui.mx.Button b = new com.emitrom.flash4j.flex.client.ui.mx.Button( "Button at x : " + position + " and y : " + position + ". Click me."); b.setXY(position); b.addEventHandler(MouseEvent.CLICK, new EventHandler() { @Override public void onEvent(Event event) { Window.alert("I was created from GWT"); } }); Panel.wrap(panelPeer).addElement(b); //increment position by 30 position += 30; } }); RootPanel.get("addButton").add(addButton); Button callButton = new Button("Call method in Flex"); callButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { FLEX.getRootPanel().invokeVoidMethod("sayHello"); } }); RootPanel.get("callButton").add(callButton); RootPanel.get("myTable").getElement().getStyle().setBorderColor("green"); RootPanel.get("myTable").getElement().getStyle().setBorderStyle(BorderStyle.SOLID); } private String getBgColor() { Color[] colors = { Color.ALICEBLUE, Color.BEIGE, Color.BLUE, Color.YELLOWGREEN, Color.BROWN, Color.CORAL, Color.DARKKHAKI, Color.GREEN, Color.RED }; int index = Random.nextInt(colors.length); return colors[index].getValue(); } }

As you see Integrating Flex and HTML5 has never been this easy.
Go and build amazing stuff.

Happy coding!

The Emitrom Team

Comments

13

The method inject(String, int, int) is undefined for the type FLEX.

I'm using gwt-2.4.0 and flash4j-3.1.0

Regards,

KU

Email: 
l******f@163.com

This is not (yet) part of the community version of Flash4j. Please contact support for more help.

Email: 
a...@emitrom.com

Thanks for building amazing stuff like this.

Email: 
kingbrennryan@gmail.com

A lot of companies have legacy Flex applications that they want to slowly move to HTML5. A complete rewrite is sometimes impossible for so many people. - Lindsay Rosenwald

Email: 
skomb@fammix.com

Interesting topic shown here, i am now working on it regularly here and would say keep the future posts like this continuously.
Apple iphone dealer in Bhubaneswar
Apple Products dealers

Email: 
rodenelee478@gmail.com

I was not much aware of the various apps and services that Apache Flex Framework provided the users. I got to know from the site that it has been being the users with all the web related applications and customers are satisfied with the services. I will soon switch on to be your customers
Omni Tech Scam

Email: 
dipz6490@gmail.com

Nice topic... Thanks for sharing ..
buy real youtube views
buysocialnow.com

Email: 
trishkylou

The academic field moreover the engineering praxis of computer programming are both generally solicitous accompanying discovering besides implementing the most efficient algorithms for a given class of problem.
types of qualitative research designs

Email: 
wiki.wify@gmail.com

Guar protein ffer a wide selection of products for your specific requirements. Established in the year 2008, we are one of the leading Manufacturer, Exporter and Supplier of Compound Guar Protein Meal Feeds and Poultry Feeds.
Guar meal exporter india
Food grade korma
Organic Poultry feed

Email: 
mbhavishya22@gmail.com

I will use your source code for sure, seems to be clean and useful!
minkner.org

Email: 
damions@gmail.com

What a wonderful post. I'd like to say that you've shared a valuable information in which people would get interest to try it out. I also want to try make these things because all were given here from steps to the final output.Thank you then for imparting us your knowledge. -buy soundcloud downloads

Email: 
asuntaderose@mailinator.com

This blog post really grabbed my attention. With that said I am going to subscribe. Therefore I will get more updates on what you have to say. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own blog now. Please keep writing as I want to learn more. Im eying more post and updates in this site in the future.
affordable soundcloud downloads

Email: 
anot8910@outlook.com

Great write-up. I have certainly enjoyed browsing your blog posts.
Paediatric cardiologist in gurgaon
Paediatrics surgeon in gurgaon
Cardiovascular surgery in gurgaon

Email: 
rahejalatest12@yahoo.in