Version 8.2 (2013-03-18)
 —  Working with Pages  —

Example

The example that will be built in this section produces the following output:

graphics/image166.png

When selecting a customer on the left, the customer detail screen is displayed on the right:

graphics/image167.png

When the user selects another record on the left, the screen on the right is updated accordingly.

This document covers the following topics:


The Multi Frame Page Around

First let us have a look at the multi frame page itself. The layout definition is as follows:

<mfpage separation="rows" sizing="70,*">
    <mfhtmlframe target="HEADER" 
                 url="../HTMLBasedGUI/workplace/welcome.html" 
                 resizable="true" 
                 withborder="false" 
                 scrolling="false" 
                 framestyle="border: 1px #808080 solid">
    </mfhtmlframe>
    <mfframeset target="AROUND" 
                separation="cols" 
                sizing="200,*">
        <mfcisframe target="INNERLEFT" 
                   cisurl="/cisdemos/25_mfinnerleft.html" 
                   framestyle="border-right: 1px solid #808080; 
                   border-bottom: 1px solid #808080">
        </mfcisframe>
        <mfcisframe target="INNERRIGHT" 
                     cisurl="/HTMLBasedGUI/empty.html" 
                     framestyle="border: 1px solid #808080">
        </mfcisframe>
    </mfframeset>
</mfpage

The page is subdivided into three frames: "HEADER", "INNERLEFT" and "INNERRIGHT". Two of them are Application Designer frames, one is an HTML frame. Every frame is pointing to a certain page.

Top of page

The Left Frame

The INNERLEFT frame's page displays a text grid and lets the user select from the list of items. The layout definition is:

<page model="MFInnerLeftAdapter">
    <pagebody horizdist="false" takefullheight="true">
        <itr height="100%" fixlayout="true" width="100%">
            <textgrid2 griddataprop="customers" width="100%" height="100%" selectprop="selected" 
                       singleselect="true" hscroll="true" directselectmethod="onSelect" 
                       directselectevent="onclick">
                <column name="Id" property="id" width="100">
                </column>
                <column name="Name" property="name" width="400">
                </column>
            </textgrid2>
        </itr>
    </pagebody>
</page>

The adapter implementation is done in the following way:

import com.softwareag.cis.server.Adapter;
import com.softwareag.cis.server.ServerLog;
import com.softwareag.cis.server.util.TEXTGRIDCollection;

public class MFInnerLeftAdapter 
	extends Adapter
{
	// ------------------------------------------------------------------------
	// inner classes
	// ------------------------------------------------------------------------
	
	public class CustomerInfo
	{
            boolean m_selected;
            String m_id;
            String m_name;
            public String getId() { return m_id; }
            public String getName() { return m_name; }
            public boolean getSelected() { return m_selected; }
            public void setId(String string) { m_id = string; }
            public void setName(String string) { m_name = string; }
            public void setSelected(boolean b) { m_selected = b; }
	}
	// ------------------------------------------------------------------------
	// members
	// ------------------------------------------------------------------------

	TEXTGRIDCollection m_customers = new TEXTGRIDCollection();
	
	// ------------------------------------------------------------------------
	// property access
	// ------------------------------------------------------------------------

	public TEXTGRIDCollection getCustomers() { return m_customers; }
	
	// ------------------------------------------------------------------------
	// public methods
	// ------------------------------------------------------------------------
	
	public void init()
	{
		super.init();
		for (int i=0; i<40; i++)
		{
			CustomerInfo info = new CustomerInfo();
			ci.setId(""+i);
			ci.setName("Customer " + i);
			m_customers.add(ci);
		}
	}
	
	public void onSelect()
	{
		try
		{
			CustomerInfo info = (CustomerInfo)m_customers.findLastSelectedItem();
			// prepare adapter of right frame
			MFInnerRightAdapter mfira = 
                        (MFInnerRightAdapter)findAdapter(MFInnerRightAdapter.class);
			mfira.prepare(ci.getId());
			// preload adapter so that only one request is executed
			includeAdapterInResponse("../_DevelopersGuide/mfinnerright.html",false);
			// refersh target
			refreshTarget("INNERRIGHT");
		}
		catch (Throwable t) { ServerLog.appendException(t); }
	}
}

The class contains the following:

The "critical" lines of code are inside the onSelect() method. Inside the method

Top of page

The Right Frame

The right frame is loaded with /HTMLBasedGUI/empty.html first. With the first selection in the text grid, the detail page is opened inside the right frame. Afterwards, the detail page is refreshed to update its content.

Top of page