Tree Table Row Expansion

You are viewing an old version (v. 7) of this page.
The latest version is v. 10, last edited on Jun 18, 2015 (view differences | )
<< View previous version | view page history | view next version >>

This tutorial demonstrates using the ace:dataTable and its row expansion feature to represent a multi-level tree table with different data types for each level of the tree.

The hurdles with this representation that we need to overcome are questions of data representation. How do I represent a tree model? How do I represent a row of different types at each level?

To support each type you intend for the different levels of the table, each of the types must be amalgamated into a common type to design the set of ace:column components around.

In the example, the row common type is called PersonnelRowObject, intended for a tree table representing in a given row either a Person, a City, a Region or an Organization.

public class PersonnelRowObject {
    Person person;
    City city;
    Region region;
    Organization organization;
    public PersonnelRowObject(Person person) {
        this.person = person;
    }
    public PersonnelRowObject(City city) {
        this.city = city;
    }
    public PersonnelRowObject(Region region) {
        this.region = region;
    }
    public PersonnelRowObject(Organization organization) {
        this.organization = organization;
    }
    public Person getPerson() {...}
    public void setPerson(Person person) {...}
    public City getCity() {...}
    public void setCity(City city) {...}
    public Region getRegion() {...}
    public void setRegion(Region region) {...}
    public Organization getOrganization() {...}
    public void setOrganization(Organization organization) {...}
}

The set of ace:column components reference the fields of the PersonnelRowObject:

<ace:dataTable var="row" value="#{backing.data}">
    <ace:column>
        <ace:expansionToggler />
    </ace:column>
    <ace:column>
        #{row.organization.name}
    </ace:column>
    <ace:column>
        #{row.region.name}
    </ace:column>
    <ace:column>
        #{row.city.name}
    </ace:column>
    <ace:column>
        #{row.person.name}
    </ace:column>
    <ace:column>
        #{row.person.phone}
    </ace:column>
    <ace:column>
        <h:outputText value="#{row.person.born}">
            <f:convertDateTime dateStyle="short" type="date" />
        </h:outputText>
    </ace:column>
    <ace:rowExpansion />
</ace:dataTable>

With that representation of a row appropriate for each level of our tree, the final step is to create the POJO tree structure of our data with our new shared type. The required stucture is a list of key->value entries, where the keys are the row objects for a given level, and the values are a list of any children entries that row might have. The following is a sample from the tutorial showing the initalization of the tree model from sample Organization objects which have child Regions objects which have child City objects, etc:

 List<Map.Entry> data = new ArrayList<Map.Entry>() {{
	for (Organization org : orgs) {
		List<Map.Entry> orgChildren = new ArrayList<Map.Entry>(org.getRegionList().size());

		for (Region region : org.getRegionList()) {
			List<Map.Entry> regionChildren = new ArrayList<Map.Entry>(region.getCityList().size());

			for (City city : region.getCityList()) {
				List<Map.Entry> cityChildren = new ArrayList<Map.Entry>(city.getPersonList().size());

				for (Person person : city.getPersonList())
					cityChildren.add(new AbstractMap.SimpleEntry(
							new PersonnelRowObject(person), null));

				regionChildren.add(new AbstractMap.SimpleEntry(
						new PersonnelRowObject(city), cityChildren)
				);
			}
			orgChildren.add(new AbstractMap.SimpleEntry(
					new PersonnelRowObject(region), regionChildren)
			);
		}
		add(new AbstractMap.SimpleEntry(
				new PersonnelRowObject(org), orgChildren)
		);
	}
}};

With the data properly stuctured, the only requrirement for row expansion is to include a "expansionToggle" component in an ace:column and a rowExpansion component as a child of the table, no attributes nessecary.

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2017 ICEsoft Technologies Canada Corp.