Develop a simple mobile web app

The simplest way to develop a mobile web app is to show a UIWebView in the iOS screen. The app itself will remain it's process in the web server. In short, you can't avoid developing the application functionality. Instead, you may roll out the implementation faster.

By using this design, you may hardcode the web server URL into the mobile web app so that your user does not have to remember what is your URL. The other advantage is that it is able to handle the Push Notification from the server.

The following article provides all the necessary sample codes on how to implement it.

http://developer.apple.com/library/ios/#DOCUMENTATION/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/DisplayWebContent/DisplayWebContent.html

Things that you may try out

• Drag a text field, a button and a WebView to the iOS screen.
• The UIWebView is referencing by "browser_ctl".
• The button is referencing by "go_btn".
• The text field is referencing by "url_txt".
• Finally, link the button click event to the following method:

- (IBAction)ongo_click:(id)sender {
    NSString *fullURL = self.url_txt.text;
    NSURL *url = [NSURL URLWithString:fullURL];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
    [self.browser_ctl loadRequest:requestObj];
}

How to install the certifcates?

To distribute iOS app, you need all the necessary certificates generated by the iOS Provisional Portal. You will have a login ID and password after you have registered successfully with Apple.

To start the distribution or testing the app in any iOS devices, you need this:

1. provisioning certificate - this can be generated automatically by xCode.
2. app ID - this can be generated automatically by xCode.
3. distribution certificate - you need to manually do it.

The easiest way to generate the provisioning certificate is through your xCode 4.2 IDE. Run xCode and open any project. Click on the "Organizer" button located at the top right corner and you will get the following screen. Right click on Developer Profile and follow the options as shown below.

In the iOS Provision Portal, ensure that you have created the Development certificate and also the Distribution under Certificates section.

For the App IDs, it supports wildcard characters. So, it's upto you whether you want to create a new App ID or continue with the one that was generated by the xCode.

In the Provisioning section, you will see Development and Distribution as well. For the Development provisioning, the xCode will handle it. For the Distribution provisioning, you will have to generate it manually (after you have visited Certificates \ Distribution option as highlighted in the above).

Another thing is to import the certificates that you have downloaded from the portal (in case you want to create the certificate with your preferred name). Below is the steps to call out the Keychain program to install the certificates into your computer:

This is the Keychain program:

If you double click the certificate in the Finder, you will receive a warning because those certificate requires admin permission to get install. The proper way to do this is run the Keychain program, select File \ Import Items. Then, choose the certificate that you want to import. You need to key in your user name and password so that it can be installed.

Please take note that once you have installed the certificate manually, the xCode will pick it up automatically (but, you might have to refresh the list by selecting different node).

As for the "xxx.mobileprovision" certificate, you may double click on it and it will get install into xCode. Since there is no changes in the system, there will be no prompt for the admin password.

StoryBoard and screen flow

At first, I was struggling with StoryBoard and wonder how to jump from one screen to another. After some research in the web, I found out that it is quite straight forward. But, you might be very confuse if you were came from Microsoft .Net which has different way to handle the screen flow. Let's try it out.

First, you need to create a new project in XCode and add a few view controllers as shown below:

Then, design the main view as shown below. Two buttons and one segment control.

Below is the code that handle the on click event for a button which will navigate to another screen. The "auto flow over" button does not handle the click event.

- (IBAction)manual_push_onclick:(id)sender {
  
    NSInteger i = [self.view_selection selectedSegmentIndex];
    if (i == 0)
    {  //show view 1
        [self performSegueWithIdentifier:@"manualSegue" sender:self];
    }
    else if (i == 1) {
        // show  view 2
        [self performSegueWithIdentifier:@"manualSegue2" sender:self];
    }
    else if (i == 2)
    {
        // jump 1 level down (in segue) to another view.
        // goto 'View Controller' in storyBoard -> then set the 'Identifier'.
        CAnotherViewController* vc = [self.storyboard instantiateViewControllerWithIdentifier:@"anotherSegueViewId"];
        [self.navigationController pushViewController:vc animated:NO];
       
     }
    else
    {
        // goto 'View Controller' in storyBoard -> then set the 'Identifier'.
        // this view does not have any link with the main view controller.
        CFloatingViewController* vc = [self.storyboard instantiateViewControllerWithIdentifier:@"floatingViewId"];
        [self.navigationController presentModalViewController:vc animated:NO];
    }
}

31-May-2013
If you are wondering where to set the "anotherSegueViewId", attached with the screen snapshot. You need to open the storyboard and then select your view controller. Then, goto "Custom Class" and look for "Identity" section. Key in the storyboard ID.

To set the segue ID:

Password field in iOS

Drag a Text Field on the screen, tick the "Secure" option. This will hide the character type by the user.

Note: please take note that the last character typed by the user will become hidden after a few seconds. That is the iOS behavior.

How to load an image from resource file

It is very simple and straight forward to do in iOS:

    UIImage *overlayImage = [UIImage imageNamed:@"bookmark.png"];

Designing the screen flow in iOS 5

After you have created the project which relies on the StoryBoard, you will have something looks like below.

To design the screen flow, first, you need to have a Tab Bar Controller. Then, you need two Navigation Controller-s which links to the first screen. After that, you may link it with details or table view controller.

To create the "link" between the controller, click on the Tab Bar Controller. Hold down Control key and drag your pointer to the Navigation Controller. Then, choose Relationship segue.