Listings for "Using Adobe Flex and JavaFX with JavaServer Faces 2.0," Java Magazine, Premiere Issue.

Listing 1

<!-- Change me to your Flex SDK installation location --> 
<property name="FLEX_HOME" value="C:/Programs/Adobe/flex_sdk/4.1"/> 

Listing 2

<?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"
               styleName="plain"
               width="500" height="500">
    <mx:PieChart x="50" y="40" id="piechart"
       dataProvider="{getChartData()}" itemClick="onItemClick(event)" >
       <mx:series>
           <mx:PieSeries
               field="rank"
               nameField="flavor"
               labelField="flavor"
               labelPosition="callout"
            />
       </mx:series>
    </mx:PieChart>

    <s:Label x="64" y="448" id="message"
        text="Click to choose your favorite flavor."/>

    <fx:Script>
      <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.charts.events.ChartItemEvent;

       private function getChartData() : ArrayCollection {
            return new ArrayCollection ([
                {flavor: "Vanilla",    rank: 60},
                {flavor: "Chocolate",  rank: 30},
                {flavor: "Strawberry", rank: 10}
              ]);
        }
       private function onItemClick(event : ChartItemEvent) : void {
            var flavor : String = event.hitData.chartItem.item.flavor;
            message.text = "You chose " + flavor + ".";
          }
        ]]>
    </fx:Script> 
</s:Application> 

Listing 3

<?xml version='1.0' encoding='UTF-8' ?>
<!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:cc="http://java.sun.com/jsf/composite"
      xmlns:h="http://java.sun.com/jsf/html">

      <!-- INTERFACE -->
      <cc:interface>
      </cc:interface>

      <!-- IMPLEMENTATION -->
      <cc:implementation>
         <h:outputScript name="swfobject.js" library="demochart" target="head" />
         <script type="text/javascript">
             (function(){
                 var swfUrl = "${facesContext.externalContext.requestContextPath}
                      + /resources/demochart/SampleChartFlex.swf";
                 var replaceElementId = "${cc.clientId}:chart";
                 swfobject.embedSWF(swfUrl, replaceElementId,
                      "500", "500", "10.0.0");
             })();
         </script>

         <div id="${cc.clientId}:chart" />
      </cc:implementation> 
</html> 

Listing 4

<?xml version='1.0' encoding='UTF-8' ?> 
<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:demo="http://java.sun.com/jsf/composite/demo">
     <h:head>
         <title>Spice up your JSF Pages</title>
     </h:head>
     <h:body>
         <f:view>
             <h1> Spice Up Your JSF Pages </h1>
             <demo:chart />
         </f:view>
     </h:body> 
</html> 

Listing 5

package demo.data;

import java.util.HashMap;
import java.util.Map; 
import javax.faces.bean.ManagedBean;

@ManagedBean 
public class IceCreamSurvey {
     public Map<String, Integer> getResult() {
         Map<String, Integer> result = new HashMap<String, Integer>();
         result.put("Vanilla",    Integer.valueOf(60));
         result.put("Chocolate",  Integer.valueOf(30));
         result.put("Strawberry", Integer.valueOf(10));
         return result;
     } 
} 

Listing 6
<!-- INTERFACE -->
<cc:interface>
    <cc:attribute name="data" />
</cc:interface>

<!-- IMPLEMENTATION -->
<cc:implementation>
    <h:outputScript name="swfobject.js" library="demochart" target="head" />
    <script type="text/javascript">
       (function(){
            var swfUrl = "${facesContext.externalContext.requestContextPath}
                + /resources/demochart/SampleChartFlex.swf";
            var replaceElementId = "${cc.clientId}:chart";
            var expressInstall = "";
            var flashVars = {data: "${cc.attrs.data}"};
            swfobject.embedSWF(swfUrl, replaceElementId,
               "500", "500", "10.0.0", expressInstall, flashVars);
        })();
</cc:implementation> 

Listing 7

private function getChartData() : ArrayCollection {
       // Retrieve "data" from flashVars,
       // Formatted as Map.toString(), e.g.,
       // {Strawberry=10, Chocolate=30, Vanilla=60}
       var input : String = Application.application.parameters.data;
       var data : Array = input ? input.split(/\W+/) : [];
       var source = [];
       for (var index : int = 1; index < data.length - 1; index += 2) {
            source.push( (flavor: data[index], rank: parseInt(data[index+1])} );
      }
       return new ArrayCollection(source);
} 

Listing 8

private function onItemClick(event : ChartItemEvent) : void {
      var flavor : String = event.hitData.chartItem.item.flavor;
      ExternalInterface.call("demo.ajax.submit", flavor);
} 

Listing 9

<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"
               styleName="plain"
               width="500" height="500" 
               creationComplete="init()" >
...
        private function init() : void {
            ExternalInterface.addCallback("refresh", refresh);
        }

        private function refresh(feedback : String): void {
            message.text = feedback;
        } 

Listing 10

      // namespace: demo
      if (!demo)  var demo = {};

      // namespace: demo.ajax
      if (!demo.ajax) demo.ajax = {};

      demo.ajax.submit =  function(arg) {
         var options = {
             input:   arg,
             render:  "${cc.clientId}:form:out",
             onevent: demo.ajax.onevent
          };
          jsf.ajax.request("${cc.clientId}:form", null, options);
      };

      demo.ajax.onevent =  function(event) {
         if (event.status == "success") {
         var node = document.getElementById("${cc.clientId}:form:out");
         var response = node.textContent || node.innerText;
         var chart = document.getElementById("${cc.clientId}:chart");
         chart.refresh(response);
         }
      }; 

Listing 11

private String selection;

public String getSelection() {
       return selection;
}

public void setSelection(String selection) {
       this.selection = selection;
}

public String getSelectionResponse() {
       return reply(selection);
}

public String reply(String flavor) {
       return "Good choice! Many people also like " + flavor + "!"; } 

Listing 12

<demo:chart data="#{iceCreamSurvey.result}"
     response="#{iceCreamSurvey.reply(param.input)}" /> 

Listing 13

<f:metadata>
   <f:viewParam name="input" value="#{iceCreamSurvey.selection}"/> </f:metadata>
<demo:chart data="#{iceCreamSurvey.result}"
   response="#{iceCreamSurvey.selectionResponse}" /> 

Listing 14

package demo.piechart;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart; 
import javafx.scene.chart.PieChart3D; 
import  javafx.stage.AppletStageExtension;

def piechart = PieChart3D {
   layoutX: 0.0
   layoutY: 11.0
   data:    getChartData()
}  

def message = javafx.scene.control.Label {
   layoutX: 189.0
   layoutY: 340.0
   text:    "Click to choose your favorite flavor"
}  

function run(): Void {
   Stage {
      scene: Scene {
            height: 500
            width: 500
            content: [piechart, message]
      }
   }
}  

Listing 15

function getChartData() : PieChart.Data[]  {
   // Retrieve "data" from the FX argument
   // Formatted as Map.toString(), e.g., 
   //{Strawberry=10, Chocolate=30, Vanilla=60}
   var input = FX.getArgument("data") as String;
   var data = input.split("\\W+");
   for (flavor in data where indexof flavor mod 2 == 1) {
       PieChart.Data {
          label:  flavor
          value:  Integer.parseInt(data[indexof flavor + 1])
          action: function(){
              AppletStageExtension.eval("demo.ajax.submit('{flavor}')")
          }
       }
   } 
}  

// Call-back function to update the message label
// with the server response 
public function refresh (response : String) : Void {
    message.text = response;
} 

Listing 16

<script type="text/javascript"
   src="http://dl.javafx.com/1.3/dtfx.js" target="head"/> 
<script type="text/javascript">
   javafx(
         {
           archive: "${facesContext.externalContext.requestContextPath}
                    + /resources/demochart/SampleChartFX.jar",
           draggable: true,
           width:  500,
           height: 500,
           code: "demo.piechart.Main",
           name: "${cc.clientId}:chart",
           id:   "${cc.clientId}:chart"
          },
          {
           data: "${cc.attrs.data}"
          }
   );
 ... 


©2011, Oracle Corp.