Pages

Saturday, April 26, 2008

Flex or Flash JSF Component

For my goal to have Adobe Flex integrated into JSF, I made a jsf component which display flash and flex in a jsf page. This jsf component detects if the flashplayer is installed and if it is the right version, if not then it display a link to install flashplayer.
This is version 1 where I display the flash client in the jsf page. The next version of this jsf component allows flex to interact with the backing beans. I will provide a guide how to achieve this in Flex. This JSF component is like blazeds but then for JSF. If it all works then I shall donates this to the opensource community
This is how it works. First download the jsf component and then add the jar to the taglibs.

Open the jsf page and add xmlns:od to the jsp:root
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:od="http://www.ordina.nl">

Now we can add od:flex jsf component
<od:flex id="first" height="620" width="333" name="dragtree" source="DragTree-debug/DragTree.swf" scriptaccess="sameDomain"/>
Here is an example jsf page where I also use it in a backing bean

<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces"
xmlns:afh="http://xmlns.oracle.com/adf/faces/html"
xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable"
xmlns:od="http://www.ordina.nl">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<afh:html>
<afh:head title="flex_jsf">
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
</afh:head>
<afh:body>
<h:form>
<af:panelGroup layout="horizontal">
<od:flex id="first"
height="620"
width="333"
name="dragtree"
source="DragTree-debug/DragTree.swf"
scriptaccess="sameDomain"/>

<od:flex id="second" binding="#{flexjsf.binding}"/>

</af:panelGroup>
</h:form>
</afh:body>
</afh:html>
</f:view>
</jsp:root>

Here is the code of the backing bean

package nl.ordina;

import nl.ordina.flex.component.FlexDisplayer;

public class FlexBean {
private FlexDisplayer binding;

public FlexBean() {
}
public void setBinding(FlexDisplayer binding) {
this.binding = binding;
binding.setHeight(500);
binding.setWidth(400);
binding.setName("dragtree");
binding.setScriptaccess("sameDomain");
binding.setSource("DragTree-debug/DragTree.swf");
}
public FlexDisplayer getBinding() {
return binding;
}
}


Please let me know if it works or there is something wrong with it. Good luck. The next version will be more impressive.

8 comments:

  1. Looks impressive so far. Just nitpicking, but shouldn't you use a xml namespace that's a bit more specific than "http://www.ordina.nl". This is probably not the only namespace ever to be defined by Ordina.

    ReplyDelete
  2. You are right, I will change this in the next version

    ReplyDelete
  3. hey man, how can i comunnicate a input text or a button from the flash to the backing bean,
    for example, for a login page made in flex

    ReplyDelete
  4. Hi

    here you have two examples

    http://exadel.com/web/portal/fiji
    I think this is free to use

    or this

    http://gergerconsulting.blogspot.com/2007/02/using-flex-in-adf-jsf-applications.html

    thanks Edwin

    ReplyDelete
  5. Hi can you check the download address?, what you have put on http://biemond.blogspot.com/2008_04_01_archive.html
    exemple Flex or Flash JSF Component
    i check it but it is unavailable to download the .jar file http://www.sbsframes.nl/jdeveloper/flex.jar

    Thanks !!!

    ReplyDelete
  6. Hi, i downloaded and working your example but i have a javascript error in runtime, you can send the completed application (project ADF) of this example?

    I work with JDeveloper 11G version 11.1.1.2.0 and i created a Fusion Web Application (ADF).

    I am doing wrong ...
    Congratulations for your blog and thank's a lot.

    Tony.

    ReplyDelete
  7. Hi,

    I think this is a bit old and there are other better frameworks.
    I have to do some rework and use adf client javascript libraries.

    what is your usecase. just to display flex in a jsf page and interact with this.

    thank Edwin

    ReplyDelete
  8. Hi Edwin, thank you for you answer but i have a doubt, when you insert the object flex in your JSF, as you do?

    You insert the SWF in a layout object "Inline Frame" and interact with this with javascript libraries or you insert the swf otherwise.

    You have any example?
    thank's.

    ReplyDelete