Pages

Showing posts with label Exadel Fiji. Show all posts
Showing posts with label Exadel Fiji. Show all posts

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.

Saturday, September 6, 2008

Use Flex in JSF with Exadel Fiji

Maybe you already saw this news at the serverside or by James Ward but Exadel just released Fiji. With Fiji you can use Flex applications in a JSF page and interact with the other JSF component or backing beans. I already tried this too but Exadel got it working with a lot of great options. You can develop now better looking and richer JSF applications with cool video or charts components. These flex applications can be a part of the jsf application without using blazeds or lifecycle. And of course you can use Flex to build complex parts of your jsf page ( like Charts, Drag and Drop, Video or Trees) and you can do it a lot faster and it is easier.

Here can you see the exadel jsf flex demos or read more about Fiji at the Exadel product page .

Fiji options
1) use f:param to pass values to the flex application
2) use HTTPService to retrieve any value of a backing bean method.
3) use DataService to retrieve the result using AMF format.
4) Invoking Ajax Request to send events to other parts of the jsf page.
5) Access to the flex api from the jsf page
6) New Flex Charts components in JSF without making a flex application

A little example
You can pass parameters to the flex application. Just use f:param and el

<fiji:swf src="/simpleHello/simpleHello.swf" id="simpleHello"
bgcolor="#FFFFFF" width="320" height="180">
<f:param name="userName" value="#{bean.simpleHelloUserName}" />
</fiji:swf>

And retrieve the parameters in Flex just use Application.application.parameters.userName

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Form x="22" y="10" width="280">
<mx:Label id="userName" styleName="text" text="{Application.application.parameters.userName}" />
</mx:Form>
</mx:Application>