Tagged: Seam

JavaFX with JBoss Seam

This is an introductory post that shows how to use JavaFX with JBoss Seam. Communication between JavaFX and server (Seam) is done via Flamingo RIA framework. Flamingo, not only provides Flex to server communications like Granite DS and Blaze DS, but also provides JavaFX to server communications.

screenshot01.png

JavaFX:

package com.exadel.flamingo.javafx;
 
 
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.TextOrigin;
import javafx.ext.swing.SwingButton;
import javafx.scene.layout.VBox;
import javafx.scene.control.TextBox;
 
import com.exadel.flamingo.javafx.samples.helloworld.javafx.HelloworldClient;
 
class Hello {
    public var name:String;
    public var str:String;
}
var helloModel = new Hello();
 
HelloworldClient.setServerUrl(FX.getArgument('uri') as java.lang.String);
 
var helloText: TextBox = TextBox {
    text: bind helloModel.name with inverse
    columns: 7
    selectOnFocus:true
}
 
var helloLabel = Text{
    y:8
    font: Font { name:"sansserif", size: 12 }
    fill: Color.BLACK
    content: bind "Server says: {helloModel.str}"
    textOrigin: TextOrigin.TOP
}
 
var helloButton = SwingButton  {
    text:"Say Hello!"
    action: function(){
        helloModel.str = HelloworldClient.CLIENT.hello(helloModel.name);
    }
}
 
Stage {
    title: "Helloworld Sample"
    width: 200
    height: 150
    scene: Scene {
        content: VBox {
            translateX: 5
            translateY: 5
            spacing: 10
            content: [                
                HBox {
                    content: helloText
                    spacing: 10
                },
                HBox {
                    content: helloButton
                    spacing: 10
            	},
                HBox {
                    content: helloLabel
                    spacing: 10
            }]
 
        }
    }
}

HelloAction interface:

package com.exadel.flamingo.javafx.samples;
 
import org.jboss.seam.annotations.remoting.WebRemote;
 
public interface IHelloAction {
 
    @WebRemote
    public String hello(String name);
}

HelloAction (Seam component):

package com.exadel.flamingo.javafx.samples;
 
import org.jboss.seam.ScopeType;
import org.jboss.seam.annotations.Name;
import org.jboss.seam.annotations.Scope;
import org.jboss.seam.annotations.remoting.WebRemote;
 
@Scope(ScopeType.STATELESS)
@Name("helloAction")
public class HelloAction implements IHelloAction {
 
    @WebRemote 
    public String hello(String name) {
        return "Hello, " + name;
    }
}

Helloworld client:

package com.exadel.flamingo.javafx.samples.javafx;
 
import com.caucho.hessian.client.HessianProxyFactory;
import com.exadel.flamingo.javafx.samples.IHelloAction;
import java.net.MalformedURLException;
 
public class HelloworldClient {
 
    public static HelloworldClient CLIENT;    
    private IHelloAction _service;    
    private String _url;
 
    private HelloworldClient(String string) {
        _url = string;
    }
    public static void setServerUrl(String url) {
        CLIENT = new HelloworldClient(url);
    }
    private IHelloAction getService() {
        if (_service == null) {
            try {
                HessianProxyFactory factory = new HessianProxyFactory();
                _service = (IHelloAction) factory.create(IHelloAction.class, _url);
            } catch (MalformedURLException ex) {
                System.out.println(ex);
            }
        }
        return _service;
    }
    public String hello(String s) {
        return getService().hello(s);
    }
}

JSP file:

<%
String uri = request.getScheme() + "://" + 
request.getServerName() + ":" +
request.getServerPort() + 
request.getContextPath();
%>
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Helloworld</title>
</head>
<body>
<h2>JavaFX with Seam!</h2>   
	<script src="http://dl.javafx.com/1.1/dtfx.js"></script>
	<script>
	    javafx(
	        {
	              archive: "jnlp/helloworld-client-javafx.jar",
	              draggable: true,
	              width: 600,
	              height: 560,
	              code: "com.exadel.flamingo.javafx.MainFrame",
	              name: "Helloworld",
		      	uri:'<%= uri + "/seam/resource/hessian/helloAction" %>'
	        }
	    );
	</script>
</body>
</html>

Updating training materials

Started to update my training materials for JSF and RichFaces and shortly Seam. Right now I have slides, going to convert them to a short training booklet. Why am I doing this? Well, I have realized that training is not a presentation, so slides is not the best way to do it. Plus, it’s going to save lots of paper. I used to print 2-slides per page and all the space around them wasted. The short booklet will also allow to include more details and examples.

How to delete a row in JSF

There is more than one way to delete a row from data UI component in JSF. If you use RichFaces and Seam, there even more ways.

All the cases will use the following setup:

data1.png

JSF view:

<h:form>
   <h:dataTable id="table" value="#{wonderBean.wonders}" var="wonder" border="1" >
      <f:facet name="header">Seven New Wonders of the World</f:facet>
      <h:column>
         <f:facet name="header">Action</f:facet>
         <h:commandButton value="Delete" />
      </h:column>
      <h:column>
         <f:facet name="header">Name</f:facet>
  	 <h:outputText value="#{wonder.name}" />
      </h:column>
      <h:column>
         <f:facet name="header">Location</f:facet>
  	 <h:outputText value="#{wonder.location}" />
      </h:column>
      <h:column>
         <f:facet name="header">Location</f:facet>
  	 <h:graphicImage value="#{wonder.imageUrl}" height="40" width="40"/>
      </h:column>
   </h:dataTable>
</h:form>

WonderService.java:

public class WonderService {
 
   private ArrayList <Wonder> list;
   public ArrayList<Wonder> getList() {
	return list;
   }
   @PostConstruct
   public void init () {
		list = new ArrayList <Wonder>();
		list.add(new Wonder("Chichen Itza", "Mexico", "http://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Chichen-Itza-Castillo-Seen-From-East.JPG/90px-Chichen-Itza-Castillo-Seen-From-East.JPG"));
		list.add(new Wonder("Christ the Redeemer", "Brazil", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/50/CorcovadofotoRJ.jpg/90px-CorcovadofotoRJ.jpg"));
		list.add(new Wonder("Colosseum", "Italy", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Colosseum_in_Rome%2C_Italy_-_April_2007.jpg/90px-Colosseum_in_Rome%2C_Italy_-_April_2007.jpg"));
		list.add(new Wonder("Great Wall of China", "China", "http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/GreatWallNearBeijingWinter.jpg/90px-GreatWallNearBeijingWinter.jpg"));
		list.add(new Wonder("Machu Picchu", "Peru", "http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/90px-Before_Machu_Picchu.jpg"));
		list.add(new Wonder("Petra", "Jordan", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/PetraMonastery.JPG/90px-PetraMonastery.JPG"));
		list.add(new Wonder("Taj Mahal", "India", "http://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Taj_Mahal_in_March_2004.jpg/90px-Taj_Mahal_in_March_2004.jpg"));	
   }
   public WonderService() {}
}

Wonder.java

public class Wonder{
 
   private String name; // setter and getter
   private String location; // setter and getter
   private String imageUrl; // setter and getter
 
   public Wonder(String name, String location, String imageUrl) {
	super();
	this.name = name;
	this.location = location;
	this.imageUrl = imageUrl;
   }
}

WonderBean.java

public class WonderBean {
 
   private WonderService service;
 
   public WonderService getService() {
	return service;
   }
   public void setService(WonderService service) {
	this.service = service;
   }
   public WonderBean() {
	super();
   }
   public ArrayList<Wonder> getWonders() {
	return service.getList();
   }
}

All the code changes are done in WonderBean.java.

JSF

If you are only using plain JSF, one way is to bind to component instance

private UIData table; // getter and setter
<h:dataTable id="table" value="#{wonderBean.wonders}" var="wonder" border="1"
  	binding="#{wonderBean.table}">
   <f:facet name="header">Seven New Wonders of the World</f:facet>
   <h:column>
      <f:facet name="header">Action</f:facet>
      <h:commandButton value="Delete" action="#{wonderBean.delete}"/>
   </h:column>
   ...
</h:dataTable>

Let’s create delete() method:

public void delete() {
  service.getList().remove(table.getRowData());
}

Using UIData.getRowData() method we can retrieve the row data the corresponds to raw clicked in the browser. JSF is smart to wire everything for us automatically.

Instead of using getRowData(), it’s also possible to use getRowIndex() method:

public void delete() {
  service.getList().remove(table.getRowIndex());
}

We can also use f:setPropertyActionListener to help us set the row we want to delete.

private Wonder selected; // setter and getter
<h:dataTable id="table" value="#{wonderBean.wonders}" var="wonder" border="1">
   <f:facet name="header">Seven New Wonders of the World</f:facet>
    <h:column>
    <f:facet name="header">Action</f:facet>
     <h:commandButton value="Delete" action="#{wonderBean.delete}">
        <f:setPropertyActionListener value="#{wonder}" 
  	     target="#{wonderBean.wonder}" />
      </h:commandButton>
    </h:column>
    ... 
</h:dataTable>

setPropertyActionListener takes the current row object #{wonder} and assigns it to #{wonderBean.wonder}.

One more option is to use data modal class such as ListDataModal, bind it directly to the UI component and then wrap the list. Being a more exotic option, I will skip it in this post.

RichFaces

If you are using RichFaces, you get a few more options. Of course you can use everything you saw above.

With rich:dataTable you get access to row key defined by rowKeyVar attribute. We can use this attribute as the index of the row we want to delete.

<rich:dataTable id="table" value="#{wonderBean.wonders}" var="wonder" 
   rowKeyVar="row">
   <f:facet name="header">Seven New Wonders of the World</f:facet>
   <h:column>
      <f:facet name="header">Action</f:facet>
      <a4j:commandButton value="Delete" action="#{wonderBean.delete}" reRender="table">
  	<f:setPropertyActionListener value="#{row}" 
  	    target="#{wonderBean.wonderIndex}" />
      </a4j:commandButton>
   </h:column>
   ...
</rich:dataTable>
private int wonderIndex; // getter and setter
 
public void delete() {
   service.getList().remove(wonderIndex);
}

Using rich:dataTable with ruby skin:

data2.png

Keeping everything the same in the bean, instead of using f:setPropertyActionListener, it’s possible to use a4j:actionparam:

<a4j:commandButton value="Delete" action="#{wonderBean.delete}" reRender="table">
   <a4j:actionparam value="#{row}" assignTo="#{wonderBean.wonderIndex}"/>
</a4j:commandButton>

a4j:actionparam works like f:param but in addition automatically assigns the value (in our case #{row}) to assignTo property (in our case #{wonderBean.wonderIndex}). One thing to remember is that a4j:actionparam renders a request parameter on to the page. If you are trying to pass in a custom object, you need to write a converter.

Seam

Seam makes deleting even simpler. We can use two annotations that will inject the selected data row into a Seam component.

@DataModel
private List<Wonder> wonderList;
 
@DataModelSelection
private Wonder wonder;
...
<pre>
 
<pre lang="xml">
<rich:dataTable id="table" value="#{wonderList}" var="wonder" rowKeyVar="row">
   <f:facet name="header">Seven New Wonders of the World</f:facet>
   <h:column>
	<f:facet name="header">Action</f:facet>
  	<a4j:commandButton value="Delete" action="#{wonderService.delete}"
  		reRender="table"/>
   </h:column>
   ...
</rich:dataTable>

@DataModelSelection will inject the actual row data which was clicked. Or we can @DataModelSelectionIndex which will inject the row index:

@DataModelSelectionIndex
private Integer wonderIndex;

No changes in the page.