voyent
New icefaces mobile List component  XML
Forum Index -> Contributor's Corner
Author Message
michelle2

Joined: 14/Nov/2007 00:00:00
Messages: 449
Offline


We just put up a beta of our custom component that simulates an iphone style list.

We will put up a demo in a few weeks. meantime the source is available in our svn at www.mooncatventures.com and a war of a little demo is attached here.

There is actually a lot going on in this demo if you study it. including call javascript from a backing bean, icefaces dash code integration and a lot more.

Enjoy.
http://web.me.com/cannonwc/Site_5/Photos.html


[Thumb - Picture 2.png]
 Filename Picture 2.png [Disk] Download
 Description screenprint of the main list screen
 Filesize 1266 Kbytes
 Downloaded:  5535 time(s)

 Filename selectListPOC3.war [Disk] Download
 Description demo war
 Filesize 15618 Kbytes
 Downloaded:  182 time(s)

[Email]
michelle2

Joined: 14/Nov/2007 00:00:00
Messages: 449
Offline


Now that its not the wee hours of the morning... I posted that last post around 2:00am, I wanted to make a few more comments on both the demo and the components.

The components are encapsulated in the mcv-comps.jar, to include these components in your own application all that is necessary is to include this jar.

Javadoc is coming soon, but you can pick up a lot by looking at the source at http://99.139.107.194/svn/test/ (userid and password is test).
you will need to unpack the jar to get the component source, for now I just included it with the class files.

The only interesting property on the Stackcontainer is styleClass , Stackcontainer just creates a UL, not a whole lot you can do with it.

SelectList on the other hand is also a container component, you can include other icefaces and html components here. the component is dash code aware (it loads an empty parts-extras.js file. for which you can substitute you own parts js file. Much of the css in the little demo was just copied straight from dashcode. I usually keep daschcode and eclipse open side by side and cut and paste code. Dashcode is a real nice css editor too.

SelectList does take a few properties, the tld does not have reference to last minute added properties but they are available.

These are all the properties you may be interested in.

styleClass - go crazy with css, dashcode and webkit

label - if hideLabel is false this will be the label iteration generated on the <LI>.

imagePath - the path to a custom activityIndicator image, this is a webkit animation that gets fired upon click of a list item. imagePath is mostly needed because in the SWF implementation of this demo the images are under the web-inf path otherwise they are under webroot.

HideLabel - don't generate a label on the LI , this assumes you are building the li with other icefaces components or dashcode parts.

ActionListener , the component will return the selectedIndex of the list row.

Now lets take a quick look at the backingBean for the demo, there are some intersting techniques.


First notice its not very big.
just one method, the actionListener

public class ArtshowBean {

private List data = new ArrayList();
private List<String> images = new ArrayList<String>();
private ArtShowDAO artShowDAO = new ArtShowDAO();
private int selectedIndex=0;
private String selectedImage;
private String artist;


/**
* @return the artist
*/
public String getArtist() {
return artist;
}



/**
* @param artist the artist to set
*/
public void setArtist(String artist) {
this.artist = artist;
}

FacesContext facesContext = FacesContext.getCurrentInstance();
public void actionListener(ActionEvent e){
SelectList component = (SelectList) e.getSource();

// get the index from the component

selectedIndex = component.getSelectedIndex();
ArtShowItem item = (ArtShowItem) data.get(selectedIndex);

//This is the image for view 2

selectedImage =
"./images/100044/"+images.get(selectedIndex)+"/medium.jpg";

System.out.println("Row [" + selectedImage + "]");

//get the artist name

artist = item.getArtist();

// call javacript dashcode method to fip the view.

JavascriptContext.addJavascriptCall(facesContext, "goToView2(event)");

}

[Email]
 
Forum Index -> Contributor's Corner
Go to:   
Powered by JForum 2.1.7ice © JForum Team