Skip to Content

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.

/wp-content/uploads/2013/01/suptut1_171076.png

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”.

/wp-content/uploads/2013/01/suptut2_171080.png

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.

/wp-content/uploads/2013/01/suptut3_171081.png

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.

/wp-content/uploads/2013/01/suptut4_171082.png

When you let go, a small view will pop up where we can fill in the name of the outlet. Then click Connect.

/wp-content/uploads/2013/01/suptut5_171083.png

The result will be like this:

/wp-content/uploads/2013/01/suptut6_171084.png

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”.

/wp-content/uploads/2013/01/suptut7_171085.png

Fill in this into the action method:

/wp-content/uploads/2013/01/suptut8_171086.png

The last thing we do to this file is to enable the button when a successful login is performed.

/wp-content/uploads/2013/01/suptut9_171087.png

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.

/wp-content/uploads/2013/01/suptut10_171088.png

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”.

/wp-content/uploads/2013/01/suptut11_171089.png

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”.

/wp-content/uploads/2013/01/suptut12_171090.png

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.

/wp-content/uploads/2013/01/suptut13_171091.png

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”.

/wp-content/uploads/2013/01/suptut14_171092.png

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.

/wp-content/uploads/2013/01/suptut15_171093.png

Drag in a Text Field from the Object Library, and drop it inside each cell.

/wp-content/uploads/2013/01/suptut16_171094.png

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.

/wp-content/uploads/2013/01/suptut17_171095.png

/wp-content/uploads/2013/01/suptut18_171096.png

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:

/wp-content/uploads/2013/01/suptut19_171097.png

Go into Preferences, and fill out the information that you provided with Sybase Control Center above.

/wp-content/uploads/2013/01/suptut20_171098.png

When you restart the SUP101 app, you will now have the following dialog presented:

/wp-content/uploads/2013/01/suptut21_171099.png

Write 123 as the PIN, and your supAdmin password. Now you will have the button changed to “Synchronize”.

/wp-content/uploads/2013/01/suptut22_171100.png

By pressing the Synchronize button, you will start synchronizing the Customer database from the MBO with the internal database on your iPhone.

/wp-content/uploads/2013/01/suptut23_171101.png

The menu screen is shown, and clicking on the Customers line, all the customers will be shown in a list.

/wp-content/uploads/2013/01/suptut24_171102.png

Selecting one of the customers will show the details of the customer.

/wp-content/uploads/2013/01/suptut25_171103.png

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Mark Teichmann

    Many thanks for this nice tutorial.

    Many of the steps I had to figure out by myself learning it the hard way. I bet this is a huge help for many ABAPers out there who are struggling with Objective-C and XCode 😀

    (0) 
  2. Vinoo Martin

    Many thanks for the tutorial.

    I am using Xcode 4.6 and ios 6.1. I am getting an error when i compile SUP101ViewController.m file

    @synthesize of ‘weak’ property is only allowed in ARC or GC mode.

    (0) 
    1. Ivan C Myrvold Post author

      It looks like you have a project without using ARC (Automatic Reference Counting). If you change to ARC, this error will go away. ARC is a good thing in Objective-C 2.0, in that you have automatic garbage collection, instead of that you have to remember to retain and release objects yourself in the code.

      (0) 
      1. Vinoo Martin

        I followed your steps. Project is ARC enabled and have the flag set for SUP101ViewController with ‘-fno-objc-arc’. I am getting the error on this file

        (0) 
          1. Vinoo Martin

            Thanks. I fixed that one. Now i am getting 69 linker errors

            Undefined symbols for architecture i386:

              “_OBJC_CLASS_$_MBOLogger”, referenced from:

                  objc-class-ref in SUP101ViewController.o

                  objc-class-ref in CallbackHandler.o

              “_OBJC_CLASS_$_MessagingClientLib”, referenced from:

                  objc-class-ref in SUP101ViewController.o

              “_OBJC_CLASS_$_SUPAbstractDBRBS”, referenced from:

                  _OBJC_CLASS_$_SUP101SUP101DB in libgeneratedcode_lib.a(SUP101SUP101DB.o)

              “_OBJC_CLASS_$_SUPAbstractEntityRBS”, referenced from:

            (0) 
  3. Michael Paredes

    Thanks for the tutorial.

    The connection work perfectly, but i have a problem, the method

    #pragma mark – SUPSyncStatusListener delegate methods

    -(void) x:(SUPSyncStatusInfo*)info

    it is never called, i tried to follow the code but i cant find where it is called, I put a breakpoint and I saw that it is never called.

    This method is in the following class “SUP101ViewController,m”

    Thanks for any help.

    (0) 

Leave a Reply