Demo 5 Project (Table Icons)

In this demo, you will learn how to add icons to table type controllers.

What you will see

This project is similar to the Demo1 Project except this time we added an icon for each fruit.

Launch Demo5.exe. Enter the Demo5 URL (see Demo1 example if you need help) into the iQuipment iPhone App. You should see a view as shown above.

How to add icons?

There are two table types controller: table.dynamic controller (for section.dynamic) and default controller (for section). You can add icons to either type; the procedure is very similar. In this demo, We will demonstrate an example for the section.dynamic type.

First open Demo5.xml file on iQuipment PC. Identify the "Section.dynamic" node (1, above), then right click the "array.icon" (2, a sub-node of table.dynamic). A popup lets you select one of the exposed variables from the pull down. It is set to "icon array" (an exposed variable from Demo4.exe).

Launch Demo5 Visual Studio project from the SDK

Open Form1.cs and locate the lines below:

private void textBox_icons_TextChanged(object sender, EventArgs e)
{
INFOMATO.WCF.DataExchangeService.servicePostData(myViewName, dataName_iconArray,textBox_icons.Text); //exposed and update variable dataName_rowArray;
}

Here the array.icon (the exposed variable to iOS device) is linked to the second textbox ( textBox_icons) on Demo5.exe. The following line sets the three icon URLs (separated by semicolon) for the fruits:

textBox_icons.Text = "http://www.iphonewindows.com/SDK/SampleCodes/icons/apple.png; http://www.iphonewindows.com/SDK/SampleCodes/icons/orange.png; http://www.iphonewindows.com/SDK/SampleCodes/icons/plum.png";

You can replace the URL with you own to test it out.

To server photos from iQuipment PC

You can server the icon files right from iQuipment PC. Click the iQuipment PC "File Server" menu and select "Setup and Test" menu item. Follow the instruction to pick an IP address (1) and a port number (2). Press the "Apply Changes" button (3) to take affect. Click the "Open" button (4) to drop photo files. If everything goes as wish, you should be able to find a photo url by clicking the "Select a File" button to select on of the files you have just dropped off. The photo URL will be shown in textbox (5) and copied into the clipboard. You can test the photo URL by clicking the link on the textBox (5) or paste the link into a browser. You should see the image on the browser.

Set icon for (static) section, default controller

It is now used in Demo5. But you can easily test it out. Right click the "view" node and select "add section." Select a "default" controller for this section. Identify the "icon" sub node. Enter an icon file URL into the popup. On your iOS device, tap the "refresh" button (upper right corner) to see the update.

Previous Lesson: Demo 4 Project (View Auto Refresh) Table of Contents Next Lesson: Demo 6 Project (Multiple Devices Handling)