Introducing ListView

The ListView component can represent data of bound Dataset object like Grid component does. The Grid component expresses data based on Row, Column, but in the ListView component, you can freely place data within the Body or Detail band area and express it in the desired format.

The Body band is displayed by default and the Detail band can be set to be displayed by the user by clicking the button or by other events.

Example

The image below is an introduction design for a restaurant menu used on a mobile device. Instead of simply listing the list, the image is placed on the left and the description of the image (menu) is placed on the right. In the case of the Grid component, it is not easy to highlight specific data, but because the ListView component processes individual data in each cell, you can display it by changing the font color or changing the font size to the desired format.

Creating ListView

Select ListView from the toolbar and drag it to an appropriate size on the form to create it. Select the component and click on the form to create it in the default size.

Create the data to be displayed on the screen in the Dataset object and bind it to the ListView component. Dataset object is set as follows.

Select the created Dataset object and drag it with the mouse to bring it to the ListView component. When binding is complete, the default layout is set as shown below.

Even if it is displayed as-is, it can still convey information to the user, but let us organize the data more neatly.

Double-clicking the ListView component runs ListView Contents Editor. Increase the font size of the "No" item and place it on the left, and display the title in red on the right. Select [Edit Body] from the upper toolbar to switch to the body band edit mode.

Delete all unnecessary cells. Delete everything except the "bind:No", "bind:Detail" items. Select and delete cells in the same way as editing components on Form.

For the part that displays the "No" item, set the font-size to 40 and the textAlign property to "center" in the font property value. For the part that displays the "Title" item, set the font-size to 25 and the color property to "red" in the font property value. Then, adjust the size and position of the cells appropriately.

When you are finished editing the cell, press Enter key or select the [Exit Editor] menu to switch to the default edit mode.

Select the [Append Detail] item in the upper toolbar and add the Detail band. After selecting the [Edit Detail] item, edit the content to be displayed in the Detail band.

Select the [Cell] item to add the cell, and modify the text property value and Position-related properties. When you are finished editing the cell, press the Enter key or select the [Exit Editor] menu to switch to the default edit mode.

Select the Body band and set the expandbartype property value to true in the property window.

Run QuickView and see how the set values are displayed. If you click the button displayed on the right, then you can set the Detail band area to be visible and then invisible.

Expressing Basic & Detailed Data

Let us take a look at the basic functions of the ListView component, how to express basic and detailed data, and the differences according to detailed properties. The rough configuration of the screen is as follows.

Example

The album information is displayed. Clicking the right button displays the songs in the album. When the Radio component is selected, the bandexpandtype property value is changed, and when the number of the Spin component is changed, it is reflected as the bandindentsize property value.

sample_listview_01.xfdl

Core features used in the example

bandexpandtype

If you set the value of the expandbartype property to true in the Body band settings, then the button to control the Detail band area is displayed on the right side of the list. At this time, you can specify how to display the Detail band area in the bandexpandtype property. If the property value is set to "expand", "accordion", it looks like it is operated similarly. If it is set to "accordion", then only one Detail band is displayed at a time. For example, if the Detail band of the first item is open and you expand the Detail band of the second item, then the Detail band of the first item is automatically closed.

bandindentsize

When the Detail band is expanded, the left margin is created as much as the specified property value. If the bandexpandtype property value is "popup", then the Detail band may be displayed outside the area of the ListView component.

How to implement an example

Place the ListView component and the Radio, Spin components as shown in the example screen. Set the width, height property values of the ListView component to 500. Create the Dataset object and set it as follows. Drag the Dataset object from the screen and bind it to the ListView component.

Depending on the value of the Dataset object, the column id and column data are automatically set as the cell of the ListView component. However, in the example, since the screen will be configured in a different way, switch to the Body band edit mode and delete all set cells. Then, place 3 cells as shown below.

Set the value of the expandbartype property of the Body band to true and the value of the height property to 160.

Select the [Append Detail] item in the toolbar at the top of ListView Contents Editor and add the Detail band. Set the height property value of the Detail band to 250 and switch to the Detail band edit mode. Add the cell and set the cell properties as shown below.

Close the ListView Contents Editor window and set the bandinitstatus property value of the ListView component to "collapse". After running it with QuickView (Ctrl + F6), check that the album information is displayed on the screen and the track information is displayed when right-clicked.

In the example, the bandexpandtype property value can be set in the Radio component so that the bandexpandtype property value can be changed. Set "expand", "accordion", "popup" as the innerdataset item values and write the onitemchanged event function as follows.

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.ListView00.set_bandexpandtype(e.postvalue);
};

Write the onchanged event function as follows so that the value set in the Spin component can be specified as the bandindentsize property value.

this.Spin00_onchanged = function(obj:nexacro.Spin,e:nexacro.ChangeEventInfo)
{
	this.ListView00.set_bandindentsize(e.postvalue);
};

Run it with QuickView (Ctrl + F6) and change the bandexpandtype, bandindentsize property values to check how the screen is displayed.

Representing Data in Different Formats by Width

Even the same data can be represented in different formats depending on the device used. When expressing images and texts, images and texts can be expressed in one column side by side, or in two or more columns if the width is a little larger. If the width is narrow enough to display the text together, then you can also choose the format to display the text over the image.

Example

Selecting the width value in the Radio component displays the data in the format appropriate for the width.

sample_listview_02.xfdl

Core features used in the example

formatid

When you want to express data in a different format according to conditions, you can apply it by changing the formatid property value. In the case of the Grid component, limited use such as changing the order of columns or changing the number of columns expressed can be used, but in the ListView component, it can be placed in a freer form.

How to implement an example

Place the ListView component and the Radio component as shown in the example screen. Before placing the ListView component, place the Div component and place the ListView component inside it. Set the width, height property values of the Div component to 320, and set the left, top, right, bottom property values of the ListView component so that the width value can be changed when the width value of the Div component is changed. Create the Dataset object and set it as follows. Drag the Dataset object from the screen and bind it to the ListView component.

Depending on the value of the Dataset object, the column id and column data are automatically set as the cell of the ListView component. However, in the example, since the screen will be configured in a different way, switch to the Body band edit mode, delete the cell representing the column id, and use only the cell representing the remaining 2 column data.

The cell that displays the album title can have longer text, so the wordWrap property has been applied. Then, apply the PositionBase property so that it can be located right next to the album image.

The applied results are as follows. The data is displayed in one column.

There is no concept of the column in the ListView component. Depending on the width of the ListView component and the width of the Body band, it automatically determines how much data to display in one Row. For example, if the width of the Body band is set to 50%, then 2 data points are displayed in one Row.

Run ListView Contents Editor, right-click on the default format item, and select [Copy & Add Format]. Modify Format id to "format00".

Select the Body band and change the width property value to 50%.

The applied results are as follows. Displays data in two columns. If the width property value is set to 30%, then data is displayed in three columns.

Run ListView Contents Editor, right-click on the default format item, and select [Copy & Add Format]. Modify Format id to "format00". Enter the Body band edit mode and move the location of the cell displaying the album title over the cell displaying the album cover.

Set the width property value to 150, the same as the cell that displays the album cover, and modify the background, color, opacity property values.

The applied results are as follows. Express the album title text on top of the album image with a slightly transparent background.

Set the width of the div component to be configured in the Radio component. Set "180", "320", "640" as the innerdataset item values and write the onitemchanged event function as follows.

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.Div00.set_width(e.postvalue);
	if(e.postvalue == 640)
	{
		this.Div00.form.ListView00.set_formatid("format00");
	}
	else if(e.postvalue == 180)
	{
		this.Div00.form.ListView00.set_formatid("format01");
	}
	else
	{
		this.Div00.form.ListView00.set_formatid("default");
	}
};

Run it with QuickView (Ctrl + F6) to check that formatid is changed according to the width property value and the format in which the data is expressed changes.

Processing Button Click Event

Each item displayed in the ListView component is processed as the cell. Place the image button and see how it processes the desired action when clicked.

Example

When clicking the [-], [+] buttons under each item, the number changes, and the total amount is displayed in the right Grid component.

sample_listview_03.xfdl

Core features used in the example

cellid

This is one of the properties of the EventInfo object of the ListView component. cellid can have the same property value depending on the bandid. For example, you might have a cell called "Cell00" in the Body band and have another cell called "Cell00" in the Detail band. Therefore, if you have the Detail band, you need to check cellid and bandid together so that you can check exactly in which cell the event occurred.

How to implement an example

Place the ListView component and the Grid component as shown in the example screen. Bind to the ListView component and the Grid component. Create the Dataset object and set it as follows. Drag the Dataset object from the screen and bind it to the ListView component and the Grid component.

Depending on the value of the Dataset object, the column id and column data are automatically set as the cell of the ListView component. However, in the example, since the screen will be configured in a different way, switch to the Body band edit mode, delete the cell representing the column id, and use only the cell representing the remaining 4 column data.

In addition to 4 column data, add 2 cells to function as buttons. Set the displaytype property value to "imagecontrol" and specify the image path to be displayed in the text property value. In the example, the image from the theme was used. In order to process the event when the user clicks the cell, you need to know the cell id value. You can select the cell and check or modify the id property value in the property window.

Write the oncellclick event function of the ListView component. When the user clicks the [-] or [+] button, the value of the Dataset object is updated.

this.ListView00_oncellclick = function(obj:nexacro.ListView,e:nexacro.ListViewClickEventInfo)
{
		var cur_amount = this.Dataset00.getColumn(e.row, "amount");
		if(e.cellid == 'Cell04')
		{
			if(cur_amount != 0)
			{
				this.Dataset00.setColumn(e.row, "amount", --cur_amount);
			}
		}
		else if(e.cellid == 'Cell02')
		{
			this.Dataset00.setColumn(e.row, "amount", ++cur_amount);
		}
};

Run it with QuickView (Ctrl + F6) and click the button to change the number of albums in the shopping cart. Check whether the changed value is reflected in the Grid component.

Expressing Detailed Data when Clicking body Band Area

Let us take a look at the function to expand or collapse detailed data when clicking on the body, detail areas without setting the expandbartype property of the ListView component.

Example

The album information is displayed. Clicking on the body area displays the songs included in the album (detailed data). Clicking the body area again or clicking the detail area hides the detail data display area.

sample_listview_04.xfdl

Core features used in the example

getBandExpandStatus

Returns whether to show the Detail band of a specific item. If the index value (rowposition of the Dataset object) of the item is specified, it returns whether the corresponding Detail band is being displayed.

showDetailBand, hideDetailBand

This is the method that is used to expand or collapse the Detail band.

How to implement an example

Depending on the value of the Dataset object, the column id and column data are automatically set as the cell of the ListView component. However, in the example, since the screen will be configured in a different way, switch to the Body band edit mode and delete all set cells. After setting the height property value to 160, place 3 cells as shown below.

Select the [Append Detail] item in the toolbar at the top of ListView Contents Editor and add the Detail band. Set the height property value of the Detail band to 250 and switch to the Detail band edit mode. Add the cell and set the cell properties as shown below.

this.ListView00_oncellclick = function(obj:nexacro.ListView,e:nexacro.ListViewClickEventInfo)
{
	if(obj.getBandExpandStatus(e.row))
	{
		obj.hideDetailBand(e.row);
	}
	else
	{
		obj.showDetailBand(e.row);
	}
};