Pages

Tuesday, September 9, 2008

Using Exadel Fiji for Flex in JDeveloper 11g

With Exadel Fiji you can use Flex in a JSF page. For more infomations see my previous blog. This blog will show you how you use fiji & flex in JDeveloper 11g. This will not work in jdeveloper 10.1.3.
The first step is to download Fiji from http://exadel.com. To make this work in JDeveloper, we need to disable the trinidad code and configure Exadel Richfaces and Ajax4jsf. We need to add the fiji taglib to the project. To do this, Go to the project options / jsp tag libraries and press Add, click user and press the New button. Now we can select the fiji-ui-1.0.0.jar. We need to remove all other taglibs except jsf-core and jsf-html.

Now we can add the right libraries to the project. We can use the following libraries of JDeveloper 11G Facelets runtime, commons-logging, common-digester and common-beanutils. The rest of libraries comes from the fiji lib folder. See the picture for all the used fiji libs. Don't use the commons-digester of JDeveloper. Use version 1.8 of fiji download.


This is how the web.xml look like. You can better make this file readonly else JDeveloper 11g will try to add the Trinidad filters.

<?xml version = '1.0' encoding = 'windows-1252'?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5" xmlns="http://java.sun.com/xml/ns/javaee">
<description>Empty web.xml file for Web Application</description>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<filter>
<display-name>Ajax4jsf Filter</display-name>
<filter-name>ajax4jsf</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
<init-param>
<param-name>createTempFiles</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>maxRequestSize</param-name>
<param-value>100000</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>FORWARD</dispatcher>
<dispatcher>REQUEST</dispatcher>
<dispatcher>INCLUDE</dispatcher>
<dispatcher>ERROR</dispatcher>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>35</session-timeout>
</session-config>
</web-app>


We had to remove the oracle default render kit from the faces-config.xml and add FaceletViewHandler for Ajax4jsf. Make this file readonly else JDeveloper will try to add the default render kit.

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee">
<managed-bean>
<managed-bean-name>Test</managed-bean-name>
<managed-bean-class>nl.ordina.fiji.backing.TestBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
</faces-config>


The backing bean code with the retrieveWelcomeText method which I use in the remote object (Flex).

package nl.ordina.fiji.backing;
import java.util.Date;

public class TestBean {
public TestBean() {
}

private String welcomeText = "Hello Flex in JSF";


public void setWelcomeText(String welcomeText) {
this.welcomeText = welcomeText;
}

public String getWelcomeText() {
return welcomeText;
}

public String retrieveWelcomeText(Object obj) {
this.welcomeText = "Hello Flex in JSF" + new Date().toString();
return this.welcomeText;
}

}


jsf xhtml page with the fiji:swf component. This element has two sub elements the first is a simple param component which pass its values to flex as a parameter. The second component is a endpoint and this is used by the remoteobject.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:fiji="http://exadel.com/fiji">

<ui:composition>
<p>
<h:form></h:form>
<fiji:swf src="/Flex_fiji.swf" id="simpleFlex"
bgcolor="#FFFFFF" width="450" height="250" >
<f:param name="welcomeText" value="#{Test.welcomeText}" />
<fiji:endpoint name="endpoint2" binary="true" service="#{Test.retrieveWelcomeText}"/>
</fiji:swf>
</p>
</ui:composition>
</html>


Here is the flex code where we use Application.application.parameters to retrieve the parameter value or a reference url for the remoteobject.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="onCreationComplete();">

<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;

private function refresh():void {
myService.getWelcomeObject();
}

public function handleResult(event:ResultEvent):void {
welcome.text = event.result as String;
}

public function onCreationComplete():void{
Alert.show(Application.application.parameters.endpoint2);
myService.endpoint = Application.application.parameters.endpoint2;
}
]]>
</mx:Script>
<mx:RemoteObject id="myService" destination="bean"
result="handleResult(event)" />
<mx:Form x="22" y="10" width="280">
<mx:TextInput id="welcome" styleName="text"
text="{Application.application.parameters.welcomeText}" />
<mx:Button label="Refresh"
click="refresh()"/>
</mx:Form>
</mx:Application>

That's all. Here you can download the JDeveloper 11g project.

No comments:

Post a Comment