Laying out the iPhone GUI
In this part 2 of the tutorial series, we will build a GUI for the iPhone, which connects to the Sybase Unwired Platform. We will use the Storyboard that was introduced in iOS 5.
But before we start, we need to add more FrameWorks to our SUP101 target.
Click SUP101 target, “Build Phases”, and expand the “Link Binary With Libraries” switch.
Click the + button, and add the frameworks and dynamic libraries as shown in the picture below.
Click on “MainStoryboard_iPhone.storyboard” in Xcode. There is just one ViewController object in the storyboard. Click it, and select Editor->Embed In->Navigation Controller. This adds the Navigation Controller bar to the top of the view, and makes it easy to navigate if we later needs to segue to another view.
We will add a button to the view, to connect to the Sybase Unwired Platform (SUP) server we have deployed on Amazon Web Services (AWS).
Select “Controls” from the lower right popup button in Xcode, and drag a “Round Rect Button” into the “View Controller”.
With the button selected, give it the Default title “Synchronize” and the Disabled title “Not Connected”. Also tick off the “Enabled” switch. You need to scroll down to see the Enabled switch.
With this done, the view should look like the following picture. The button should show “Not Connected”, because it is disabled.
Add code to SUP101ViewController
We need to add code to SUP101ViewController, so it can connect to SUP. The source is attached in the zip file to this document. Paste the text directly into the SUP101ViewController.m file, the header file doesn’t need to be changed.
Before we are done with the file, we need to add an outlet and action to the button.
Click MainStoryboard_iPhone.storyboard file in Xcode, select the View Controller, and then click on the “Assistant Editor” button on the top right of the Xcode window. Now the Xcode view should split in two, with the storyboard file in the left view, and the SUP101ViewController on the right view. Make sure that it is the implementation (.m) file that is on the right, and not the header file. This can easily be changed with the top popup-button.
If you have a small display, it can be a little tricky to see both well, but try to have the storyboard in the view such that you can see the button we added earlier. Right-click the button, and drag to the right until you have entered the SUP101ViewController, like in the picture below.
When you let go, a small view will pop up where we can fill in the name of the outlet. Then click Connect.
The result will be like this:
Do the same again, right-click the button, and drag into the just before the @end, and let go. But now we add an Action, with name “buttonPressed”.
Fill in this into the action method:
The last thing we do to this file is to enable the button when a successful login is performed.
Menu List View Controller
We need a view controller for the menu we will build, which will enable us to navigate to the customer list and view details about the customers.
The first thing we do is to click the storyboard for the iPhone in Xcode, and then drag a Table View Controller from the Object Library into the storyboard.
Click the menu Editor->Embed In->Navigation Controller like we did previously (with the Table View Controller selected).
Click on the new Navigation Controller, then click on Identity Inspector, and write “MENULISTVIEWCONTROLLERIDENTIFIER” into the “Storyboard ID” field of the inspector. This enables us to jump to this view controller in the code when we successfully connect to the SUP server.
Open the zip file, and drag in the two MenuListViewController files into Xcode.
Make sure that “Copy items into destination group’s folder…” is ticked, and that the target is SUP101.
Click on the new Table View Controller we dragged in previously, and select the Identity inspector. Change the class from UITableViewController to MenuListViewController.
Click on the Navigation Controller, select the Identity inspector, and set the Storyboard ID to “MENULISTVIEWVIEWCONTROLLERIDENTIFIER”.
Double-click the navigation bar at the top of the view controller, and change the name to “Menu”.
Click on the Attributes inspector, and then inside the view controller (where the text says “Table View Prototype Content”).
Change the Content popup button at the top of Attributes inspector from “Dynamic Cells” to “Static Cells”, Sections from 1 to 3, and Style to “Grouped.
We now have 3 sections in the Table View Controller named Section-1, Section-2 and Section-3. Under each section there are 3 rows. We only need 1 row, so delete the 3 extra rows so there is only 1 row in each section.
Double-click on each of the section names and rename them “List of Customers”, “Create new Customer”, and “Search by primary key”.
Click on the cell beneath the section name, and change the Style in “Attributes” inspector from “Custom” to “Basic”, and the “Accessory” in the same inspector from “None” to “Disclosure Indicator”.
Do this for all 3 cells. Also double-click the “Title” text in the cells, and change them to “Customers”, “New” and “Search”.
Customer List View Controller
When we click on one of the cells in the Menu List View Controller, we want to jump to a new table list view controller. For this we need 3 more Table View Controllers.
We will start with dragging 1 Table View Controller into the storyboard from the Object Library.
Move it to the right of the existing View Controller. Move the CustomerListViewController from the zip file into Xcode in the same way you did with MenuListViewController file, and set the new Table View Controller to be a MenuListViewController via the Identity inspector.
Right-click on the Customers cell in the Menu List View Controller, and drag into the new View Controller.
Select Push from the Selection Segue menu that pops up when you let go.
Double-click the navigation bar of the new view controller, and give it the name “Customer List”.
Click in the prototype cell area of Customer List, and click the Attributes inspector. Select Style “Subtitle”, Identifier “CustomerListCell”, and Accessory “Disclosure Indicator”.
Detail List View Controller
Drag another Table View Controller into the storyboard area, to the right of the previous view controller. Drag DetailListViewController files from the zip archive into Xcode like you did previously, and give the new view controller the DetailListViewController class.
The table view have to be static, like we did for the Menu List View Controller, with style “Grouped”, and 3 sections.
Make it like the following picture.
Drag in a Text Field from the Object Library, and drop it inside each cell.
Resize the Text Field so it covers the whole cell, and choose a border style to make the border invisible in the Attributes inspector. Do this for all three cells.
Click the Assistant editor in Xcode, to have the Xcode view split in two, with storyboard on the left, and DetailListViewController.m on the right.
Then right-click on the invisible Text Field in the cell, and drag into DetailListViewController.m, like we did previously. Give each outlet the names firstNameTextField, lastNameTextField, phoneTextField.
The last thing to do is to right-click on the cell in Customer List and drag it to the Detail List View Controller, and select Push in the Segue menu.
Click the Storyboard segue icon (on the arrow between the two View Controllers, and write “ShowDetail” as the identifier in the Attributes inspector.
Running the SUP101 app on your iPhone
Start the SUP EC2 instance on Amazon, and connect to it as outlined in SyBooks Online
Register the application as shown in “Registering the Applicstion Connection in Sybase Control Center”.
Connect the iPhone to the Xcode machine with an USB cable.
Click the Build and run button in Xcode, and you will get the following dialog when you run it the first time:
Go into Preferences, and fill out the information that you provided with Sybase Control Center above.
When you restart the SUP101 app, you will now have the following dialog presented:
Write 123 as the PIN, and your supAdmin password. Now you will have the button changed to “Synchronize”.
By pressing the Synchronize button, you will start synchronizing the Customer database from the MBO with the internal database on your iPhone.
The menu screen is shown, and clicking on the Customers line, all the customers will be shown in a list.
Selecting one of the customers will show the details of the customer.