home
products
education
support
partners
company

introduction

get started

articles

manual

tutorials

reference docs

case studies

knowledge base

goodies

screenshots

demos

echoes

Carousel zone


SourceForge.net Logo

home

forums

downloads

bugs

mailing list
 XUI Zone - knowledge base

number of ratings 2
average rating 5.00

Rendering a list based on the XModel (Part 1 of 3)

In this article we will look at how to bind a list model, which has been loaded from a static datasource, to an XList component. We will also be setting a new CellRenderer for the list so that the listitems can be styled depending on the model content. The list data which is to be bound to the list is shown in Listing 1.

Listing 1 - The list data

Each of the model nodes has a priority attribute which is used to set the color of the listitem. Now the page declaration can be created as shown in Listing 2.

Listing 2 - The list declared in the page

The page declares a simple list within a scrollpane and uses the net.xoetrope.test.Welcome class to implement it's fuctionality as shown in Listing 3.

Listing 3 - The Welcome class 

public class Welcome extends XPage {

  XList listComp;
  XListModel listModel;
  
  public void pageCreated()
  {
    XBaseModel listMdl = ( XBaseModel )rootModel.get( "lists/testlist" );
    listComp = ( XList )findComponent( "listComp" );
   
    listModel = new XListModel ( "lists/testlist" );
    listComp.setModel( listModel );
    XListCellRenderer renderer = new XListCellRenderer( listMdl, (
 XStyleFactory ) getComponentFactory() );
    listComp.setCellRenderer( renderer );  
  }
}

The pageCreated method retrieves a reference to the declared list component and also retrieves a reference to the lists/testlist model node. A new XListModel is created with the model node passed to the constructor. A new XListCellRenderer is also created which we will look at in a moment. The XListModel is shown in Listing 4.

Listing 4 - The XListModel class 

package net.xoetrope.list;
import net.xoetrope.xui.data.XBaseModel;
import net.xoetrope.xui.XProjectManager;
import javax.swing.ListModel;
import javax.swing.event.ListDataListener;
import net.xoetrope.xui.data.XModel;

public class XListModel implements ListModel {

  XBaseModel mdl;

  public XListModel() {
  mdl = new XBaseModel();
  }

  public XListModel( String path ) {
  mdl = ( XBaseModel ) XProjectManager.getModel().get( path );
  }

  public XListModel( XModel srcMdl ) {
  mdl = ( XBaseModel )srcMdl;
  }

  public void addElement( Object ele )
  {
  mdl.append( ( XBaseModel ) ele );
  }

  public void removeElement( Object ele )
  {
  mdl.remove( ( XBaseModel ) mdl.get( ( ( Integer ) ele ).intValue() ) );
  }
  
  public XBaseModel getModelAt( int i )
  {
  if ( i == -1 )
    return null;
  else
    return ( XBaseModel )mdl.get( i );
  }

  public int getSize()
  {
  return mdl.getNumChildren();
  }

  public Object getElementAt( int i )
  {
  XBaseModel model = ( XBaseModel )mdl.get( i );
  return model.get();
  }

  public void addListDataListener( ListDataListener listener )
  {

  }

  public void removeListDataListener( ListDataListener listener )
  {

  }
}

The constructor receives the path to the XModel which contains the list data and the XModel node is retrived from the projects XModel. The XListModel class implements the ListModel interface and needs to define the its functions. It also defines the addElement and removeElement functions for use by the application.

Without setting the ListRenderer for the List component the application will appear as follows...

The XListCellRenderer which is set in Listing 3 is shown below in Listing 5.

Listing 5 - The XListCellRenderer class 

package net.xoetrope.list;

import java.awt.*;
import javax.swing.DefaultListCellRenderer;
import javax.swing.JList;
import net.xoetrope.optional.data.XModelHelper;
import net.xoetrope.xui.XProjectManager;
import net.xoetrope.xui.data.XBaseModel;
import net.xoetrope.xui.style.XStyleFactory;

public class XListCellRenderer extends DefaultListCellRenderer {
  
  private XBaseModel model;
  private XStyleFactory styleFact;

  public XListCellRenderer( XBaseModel mdl, XStyleFactory styleFactory )
  {
  model = mdl;
  styleFact = styleFactory;
  }

  public Component getListCellRendererComponent( JList list, Object value, int
 index, boolean isSelected, boolean cellHasFocus)
  {
  XBaseModel child = null;
  if ( model.getNumChildren() > index )
    child = ( XBaseModel )model.get( index );
  super.getListCellRendererComponent( list, value, index, isSelected,
 cellHasFocus);
  String style = "list";
  if ( isSelected )
    style += "/selected";
  if ( child != null )
    style += "/" + XModelHelper.getAttrib( child, "priority" );
  styleFact.applyStyle( this, style );
  return this;
  }
}

The constructor receives the XModel being rendered and the stylefactory which will be used to apply styles to the list components. The getListCellRendererComponent retrieves the listitem at the specified index and uses the XStyleFactory to apply the appropriate style. The style name is determined by whether the listitem is selected and then the priority attribute of the selected model node. The stlyes which are being used are defined in the styles.xml file as shown in Listing 6.

Listing 6 - The styles file

To show how the model can be altered we can add a two text components and two buttons which will add items to the model and also set the priority of the list models. The component declarations are shown in Listing 7.

Listing 7 - The Welcome class with model manipulation 

  public void changeModel()
  {
    XListModel mdl = ( XListModel )listComp.getModel();
    int[] idx = listComp.getSelectedIndices();
    for ( int i = 0; i < idx.length; i++ ) {
      XBaseModel child = ( XBaseModel )mdl.getModelAt( idx[i] );
      XModelHelper.setAttrib( child, "priority", indexText.getText() );
    }
    listComp.repaint();    
  }
  
  public void insertItem()
  {
    XModel mdl = XModelHelper.clone( ( XModel ) rootModel.get(
 "template/newitem" ) );
    mdl.set( itemText.getText() );
    mdl.setId( String.valueOf( listModel.getSize() + 1 ) );
    listModel.addElement( mdl );
    listComp.updateUI();
  }

The changeModel method retrieves the XListModel from the list component and sets the priority attribute of the selected items. The template/newitem model which is referred to can be seen in Listing 8.

Listing 8 - The itemtemplate fragment

The final application will appear as follows...

Files

You need to be logged in to download the files for this article

comments

If you were logged in you could rate this article or add a comment.