A <mobile:ObjectList> control has a rich feature set for presenting lists of items with multiple commands associated with them. Much of the work of building screens is built into the control. This control can only be used with data binding; literal list values cannot be set. A general format showing a subset of the properties available is shown below.
Control Binding
In the following example selected fields from the Products table of the eCommerce.mdb database are bound to the control. With only minor coding a pair of screens are produced.
<SCRIPT runat="server"> Dim DBConnection As OleDbConnection Dim DBCommand As OleDbCommand Dim DBReader As OleDbDataReader Dim SQLString As String Sub Page_Load If Not Page.IsPostBack Then DBConnection = New OleDbConnection( _ "Provider=Microsoft.Jet.OLEDB.4.0;" & _ "Data Source=d:\eCommerce\Databases\eCommerce.mdb") DBConnection.Open() SQLString = "SELECT ItemNumber, ItemName, ItemPrice FROM Products " & _ "WHERE ItemType='Graphics' ORDER BY ItemName" DBCommand = New OleDbCommand(SQLString, DBConnection) DBReader = DBCommand.ExecuteReader() ProductList.DataSource = DBReader ProductList.LabelField = "ItemName" ProductList.DataBind() DBReader.Close() DBConnection.Close() End If End Sub </SCRIPT> <mobile:Form id="Form1" runat="server"> <mobile:ObjectList id="ProductList" runat="server" OnItemCommand="List_Click"> <Command Name="Reserve" Text="Reserve"/> <Command Name="Buy" Text="Buy"/> </mobile:ObjectList> </mobile:Form>
The original screen displays, by default, a list of the first of the fields contained in the bound recordset. You can select a different field for display by assigning the control's LabelField property. This is done in the current example with the script statement ProductList.LabelField = "ItemName", using the product name in the list. Notice that the field name from the database table ( ItemName) is used automatically as the header for the list.
When the list of items is formatted for display, each is made into a link to a second screen. This second screen does not need to be created; it is produced automatically by the <mobile:ObjectList> control. The screen uses the selected list item as the header for the screen, and it automatically displays all retrieved field names and values associated with the selected item.
By default, a [Back] link is provided for returning to the opening screen. You can, in addition, define your own command links by including <Command> controls as part of the ObjectList. In the current example the command links
<Command Name="Reserve" Text="Reserve"/> <Command Name="Buy" Text="Buy"/>
are added to the screen along side the default [Back] link. All command links call the List_Click subprogram since the OnItemCommand property of the <mobile:ObjectList> control identifies this subprogram as the target for all command links.
Control Scripting
The List_Click subprogram is called in response to multiple link clicks. Therefore, it needs to sort out which link did the calling and what to do about it. Below is shown the subprogram along with the two additional <mobile:Form> controls that are activated.
Sub List1_Click(Src As Object, Args As ObjectListCommandEventArgs) If Args.CommandName = "Reserve" Then ReserveName.Text = ProductList.Selection("ItemName") ReservePrice.Text = ProductList.Selection("ItemPrice") ActiveForm = Form2 ElseIf Args.CommandName = "Buy" BuyName.Text = ProductList.Selection("ItemName") BuyPrice.Text = ProductList.Selection("ItemPrice") ActiveForm = Form3 End If End Sub ... <mobile:Form id="Form2" runat="server"> <mobile:Label Font-Bold="True" Alignment="Center" runat="server" Text="-- Reserve Product --"/><br/> <br/> <mobile:Label id="ReserveName" BreakAfter="False" runat="server"/> - $ <mobile:Label id="ReservePrice" runat="server"/><br/> <br/> <mobile:Link Text="Back" NavigateURL="#Form1" runat="server"/> </mobile:Form> <mobile:Form id="Form3" runat="server"> <mobile:Label Font-Bold="True" Alignment="Center" runat="server" Text="-- Buy Product --"/><br/> <br/> <mobile:Label id="BuyName" BreakAfter="False" runat="server"/> - $ <mobile:Label id="BuyPrice" runat="server"/><br/> <br/> <mobile:Link Text="Back" NavigateURL="#Form1" runat="server"/> </mobile:Form>
The subroutine signature includes an Args As ObjectListCommandEventArgs argument for compatibility with a call through an ObjectList's OnItemCommand. The Name property of the <Command> control that made the call is given by Args.CommandName. This value is used to take different actions on different link clicks. In this case the action is to reveal the appropriate next screen, either Form2 or Form3. An example of Form3 (the "Buy" link is clicked) is shown below.
Notice that there are two Labels which display the product name and price. These values need to match those of the product which was selected from the list of items. The ObjectList's Selection property keeps track of an item selected from the list and can be used to reference any of the data fields corresponding to the selection. The format is
Therefore, prior to revealing the next screen, the script assigns the ItemName and ItemPrice data values for the selected item to display Labels on the destination screen.
BuyName.Text = ProductList.Selection("ItemName") BuyPrice.Text = ProductList.Selection("ItemPrice") ActiveForm = Form3
The activated form shows purchasing information for the chosen product.
Pagination
When displayed on cell phone screens, lengthy lists of items should be broken up into separate screens rather than displaying as a single long list. This ability to "paginate" a list is built into the <mobile:List> and <mobile:ObjectList> controls. All that is required is addition of the Paginate="True" property for the <mobile:Form> control that displays the list.
The previous example is recoded for pagination. In this case, all Product records are retrieved, and the ItemNumber field is used as the label field to shorten the length of text displayed on a single line (product names word wrap on a phone screen). To prepare the list for pagination the initial form is given the property setting Pagination="True". No other additions or changes are required.
<mobile:Form id="Form1" Pagination="True" runat="server"> <mobile:ObjectList id="ProductList" runat="server" OnItemCommand="List_Click"> <Command Name="Reserve" Text="Reserve"/> <Command Name="Buy" Text="Buy"/> </mobile:ObjectList> </mobile:Form>
The first screen is displayed as shown in the accompanying illustration. The first seven item numbers are shown along with a "Next" choice to display the next seven items. This screen format continues to the end of the list. On second and subsequent screens a "Previous" choice is given for returning to the previous screen.
(In this phone emulator there is minor scrolling necessary to get to the bottom of a screen list. Seven items are displayed per screen with only six items showning at a time. The illustration shows the portion of the list below the screen.)
Displaying Tabular Data
Often times you wish just to display a table of information without the need for a second detail screen and links between them. The <mobile:ObjectList> control can be used for this purpose. An example of a "table" with three columns of information is shown in the example below along with control coding and the script to bind the control.
... DBConnection = New OleDbConnection( _ "Provider=Microsoft.Jet.OLEDB.4.0;" & _ "Data Source=d:\eCommerce\Databases\eCommerce.mdb") DBConnection.Open() SQLString = "SELECT ItemNumber, ItemName, ItemPrice, ItemQuantity " & _ "FROM Products ORDER BY ItemName" DBCommand = New OleDbCommand(SQLString, DBConnection) DBReader = DBCommand.ExecuteReader() ProductList.DataSource = DBReader ProductList.DataBind() DBReader.Close() DBConnection.Close() ProductList.LabelStyle = StyleSheet1("HeaderStyle") ... <mobile:StyleSheet id="StyleSheet1" runat="server"> <Style Name="HeaderStyle" Font-Size="Small" Font-Bold="True" Wrapping="Wrap"/> </mobile:StyleSheet> <mobile:Form id="Form1" runat="server"> <mobile:Label Text="Product List" runat="server" Font-Size="Large" Font-Name="Arial" Font-Bold="True" Alignment="Center"/> <mobile:ObjectList runat="server" id="ProductList" AutoGenerateFields="False" TableFields="ItemNumber;ItemName;ItemPrice"> <Field Title="No." DataField="ItemNumber"/> <Field Title="Name" DataField="ItemName"/> <Field Title="Price" DataField="ItemPrice"/> </mobile:ObjectList> </mobile:Form>
The <mobile:ObjectList> control includes AutoGenerateFields="False" in order to override the default setting that selects the first field for display and links it to a detail screen. The TableFields attribute lists the fields to be displayed as columns of data. This listing must be delimited with semicolons with no embedded spaces.
Associated with each named field is a <Field> tag specifying a Title and the DataField name for display in that column. The order of display is given in the TableFields attribute; <Field> tags can appear in any order.
Column headers cannot be styled in the control (there are no controls specifically identifying the column headers). Therefore, styling for these headers, if wanted, must be scripted. This is the reason for the <mobile:StyleSheet> control. This style is applied in the script with the statement
ProductList.LabelStyle = StyleSheet1("HeaderStyle")
which assigns the HeaderStyle in StyleSheet1 to the LabelStyle property of the <mobile:ObjectList> control.
Using the <mobile:ObjectList> control to display a simple table of information is a little bit awkward and artificial. However, there are no mobile controls that permit this type of common, tabular information display.
The above code is pertinent to browser-based devices only. When displayed on a phone screen, the output is formatted into its normal menu/detail screens.