QListBox
Custom list box example
The custom list box application demonstrates the usage of custom list box layouts.
A layout is defined as a set of columns and rows where each row is assigned a slot ID, and will typically contain one of the following component types:
QIK_LISTBOX_ICON_TYPEQIK_LISTBOX_THUMBNAIL_TYPEQIK_LISTBOX_TEXT_TYPE
If the list item is intended to support content swapping the layout will contain the following component types:
QIK_LISTBOX_LEFT_ARROW_TYPEQIK_LISTBOX_RIGHT_ARROW_TYPE
If a row or column does not contain one of the component types above but contains other elements, for example a row may contain columns and no content, and a column may contain rows and no content, this element is called a parent element:
QIK_LISTBOX_PARENT_TYPE
The standard normal layout and standard highlight layouts are composed of the above elements and component types. For a full list of standard layouts see TQikListBoxStandardLayout in QikListBoxStandardLayouts.hrh.
While most often standard layouts may provide an appropriate layout, there will always be an instance that this is not the case and a custom layout will be needed.
The List box custom application contains one multi page view. Each page contains a list box with at least one custom layout:
- The first page contains a custom grid based view layout. The normal layout is customized to contain a medium sized icon and text string below. The highlight layout is customized to simply display a large icon.
- The second page contains a custom row based view layout. The normal layout is a standard layout
EQikListBoxIconLine, but the highlight layout is a custom layout which displays a large icon and three lines of text. All three lines of text have the same text alignment and font size however the first line of text has its style set to bold.
Class summary
CListBoxApplication is the entry point to the application.
CListBoxDocument represents the document in the application.
CListBoxAppUi is responsible for creating the view.
CListBoxView presents a multi page view each of which contains a list box with a custom layout.
Content swapping list box example
Description
The list box swap application demonstrates the usage of content swapping within a list box item.
The term "content swapping" describes the behavior of a control that replaces the data it holds by cycling through data than can be displayed. The user controls content swapping by activating arrows displayed in the view item either by tapping on the screen in a touch screen UI configuration or by pressing the left/right hardware key.
List box swap application is identical to the List box easy application in most respects and contains a single list view with a list box. The list is populated when the application starts and no new entries can be added. The standard layout is identical to the List box easy application.
List box swap differs from List box easy by providing a custom highlight layout. The custom highlight layout displays two rows of information. The first row continues to display the text within EQikListBoxSlotText1.
The second row contains a left content swapping arrow, followed by a small icon in EQikListBoxSlotLeftSmallIcon1, text in slot EQikListBoxSlotText2, and finally a right content swapping arrow.
The two content swapping items are provided an array of slot id's to cycle through:
QIK_LISTBOX_LEFT_ARROW_TYPE
{
slots_to_swap =
{
EQikListBoxSlotLeftSmallIcon1,
EQikListBoxSlotText2
};
};
QIK_LISTBOX_RIGHT_ARROW_TYPE
{
slots_to_swap =
{
EQikListBoxSlotLeftSmallIcon1,
EQikListBoxSlotText2
};
};All that remains is to provide data to cycle through. When adding data to any slot, the first addition is given an index value of 0. Each subsequent addition is given a consecutive index value. When the list box items are populated at application startup each both EQikListBoxSlotLeftSmallIcon1 and EQikListBoxSlotText2 are provided several values to cycle through.
Class summary
CListBoxApplication is the entry point to the application.
CListBoxDocument represents the document in the application.
CListBoxAppUi is responsible for creating the view.
CListBoxView presents ten list box items. The custom highlight layout for the item contains content swapping arrows to allow the content of the item to be cycled.
Usage
First, run bldmake from the projects group directory where the bld.inf file is located:
This creates a batch file, called abld.bat, which you use in the next step. To build the project, you call abld build which will build the project for all default targets in both release and debug variants. To build for a particular target and variant, use abld build target-name variant, for example,
builds the project for the debug variant of WINSCW only. To run it, choose the application name from the Launcher.
UI configuration
This example supports the reference UI Configurations that are supported in the UIQ 3 SDK. For development purposes, UiqEnv allows to change the UI Configuration in the emulator in order to develop and test the application with varying phone styles.
Changes in this version
Version 1.1 2006-12-28
Minor documentation changes.
Version 1.0 2006-11-23
First release.
Download:
QListBoxCustom
You need to be a registered member of the UIQ Developer Community and logged in to be able to download this file.