Integrating WebSphere CloudBurst capabilities in an iPhone solution, Part 2: Defining and building the iPhone application

This series of articles walks you through the process of creating a full client application for an Apple iPhone device that collaborates with an IBM® WebSphere® CloudBurst™ Appliance using a REST API. WebSphere CloudBurst is a new class of hardware that dispenses IBM WebSphere Application Server topologies into a cloud of virtualized hardware. Using the vast REST-based APIs provided, WebSphere CloudBurst offers many integration opportunities for a Web 2.0 environment, such as with a smartphone. Part 1 of this article series provided a high level introduction to help you prepare your development environment for creating this integrated solution. Part 2 takes the next steps toward building the sample application using the iPhone SDK, and defines the data elements that will be used for retrieving and displaying JSON data from the back end.. This content is part of the IBM WebSphere Developer Technical Journal.

Share:

Luca Amato (lucaamato@it.ibm.com), Senior IT Architect, IBM

Author photoLuca Amato is an IBM certified architect who has more than 15 years experience in software development. He has participated as a consultant and project leader in many projects based on web technology. Luca holds a degree in Information Technology from the University of Pisa, Italy, and teaches a language theory course at the University of Pavia for the Informatic department. Luca is an integration solution architect for WebSphere at IBM Italy in Milan, Italy. He works in the WebSphere group with many years of experience in SOA-based solutions. He is also a member of the OpenSource community in IBM.



Alessandro Bartoli (alessandro.bartoli@it.ibm.com), IT Consultant, IBM

Author photoAlessandro Bartoli is an IBM consultant with several years of experience in Software Development. He has worked as a consultant on some IT Governance Management projects and has four certifications in ITIL v3 (Information Tecnology Infrastructure Library). In the past, he also worked as an IT Architect for WebSphere Application Server, WebSphere Portal, and WebSphere Process Server environments. Alessandro holds a Master's degree in Information Technology Engineering from the Politecnico of Milano.



02 February 2011

Also available in

Prerequisites

Designing and creating the application is the next step in the development of a Web 2.0 application that integrates an IBM WebSphere CloudBurst Appliance with an Apple iPhone device. Before beginning, though, you should be aware of some prerequisites.

This article series assumes a general familiarity with Web2.0 technologies including Rest, ATOM, JSON, and Objective-C. The sample application described in these articles is realized using the Model-View-Controller (MVC) pattern in Objective-C using the Apple iPhone SDK 3.x, to be run on an iPhone (or iPod Touch) device with a 3.x firmware. Therefore, this development assumes some basic knowledge of the C programming language (Object-C inherits all of C's features). It is also important that you understand basic object-oriented paradigms, such as inheritance, class, interface, and so on.

This article does not discuss the application pattern or language paradigm in detail. See Resources for additional learning resources.

Also, this exercise uses the Cocoa framework, which consists of a set of APIs, libraries, and run time code that forms the development layer for the iPhone SDK. Cocoa is implemented in Object-C and uses the MVC pattern to encapsulate views, application data, controllers and the class to mediate the management logic.

Finally, to perform the steps and run the examples from this article, you will need a computer with the Apple SDK 3.0 or higher installed, running a compatible version of Mac OS. You also need access to a WebSphere CloudBurst Appliance running in your environment.


Designing your application

The design of the sample application described here will have three windows for managing, retrieving, and displaying the data retrieved from the WebSphere CloudBurst Appliance. From left to right in Figure 1, these three application windows are:

  • In the Start window, you enter the WebSphere ClourBurst server address and the user ID for WebSphere CloudBurst access. All access to the appliance is managed with HTTPS basic authentication using user ID and password. When the user ID and password are specified, the List window will open.
  • The List window displays the list of the clouds managed by the appliance when you perform the WebSphere ClourBurst connection (and data retrieve). When you select a cloud from the list, the Detail window will open. (A back action is available to return in the Start window.)
  • The Detail window displays the details of the cloud you selected. (A back action is available to return in the List window.)
Figure 1. Application starting windows
Figure 1. Application starting windows

Application template

The iPhone SDK provides several skeleton templates you can use for implementing your application (Figure 2). These are the most commonly used:

  • The View-based Application template is for a single view application model. A simple view controller manages the primary view. With this template, you can create a simple application without any navigation. If your application requires navigation through multiple views, you can use the Navigation-based template.
  • The Navigation-based Application template is for creating applications that traverse multiple views and require navigation between them. The navagation in the views is managed by a Views stack. You can use a Back button in any view to navagate inside your stack views.
  • The Tab Bar Application template provides a special controller that displays a bottom navigation bar. This model is useful for an iPhone or iPod device, where a button tab provides a series of shortcuts to reach application functions.
Figure 2. Available SDK application templates
Figure 2. Available SDK application templates

For the sample application described here, you will use the Tab Bar Application template. This template creates a tab navigation bar with two associated views. The Start window will be created as the First View. You can use the second view to implement other functionality.


Create the project

As described in Part 1 of this series, you now need to create a new project:.

  1. Lauch Xcode from your iPhone SDK (located in /Developer/Application by default).
  2. In the Product popup menu, make sure iPhone is selected, then select File > New Project. Click the Tab Bar Application icon (Figure 2). This template provides a starting point for your application.
  3. Click Choose.
  4. Insert your project name, such as WCA001, and then click Save.
  5. Select Build > Build and Go.
  6. The tool will compile and install your application in the iPhone Simulator. The iPhone simulator starts your application automatically. You should see a panel similar to that shown in Figure 3.
Figure 3. First View
Figure 3. First View

With your skeleton now avalable, you are ready to create your application.


Create a working window

As mentioned earlier, your application is built using an MVC paradigm. When you select an application template, the tool automatically generates an application delegate (WCA000AppDelegate.m) and dummy windows (MainWindows.xib and SecondWindow.xib). You can find these windows inside the NIB Files groups. For each window, you will create a view and associated controller using this naming convention: xxxView and xxxViewController. Therefore, you can call the one window view OneView and its controller OneViewController.

Create your first view

  1. In the iPhone SDK, select File > New File.
  2. Select User Interface and then the View XIB icon (Figure 4).
    Figure 4. Create View
    Figure 4. Create View
  3. Click Next.
  4. Insert the NIB file name, OneView.
  5. Click Finish.

Create your first view controller

  1. Select File > New File.
  2. Select Cocoa Touch Class and the UIViewController subclass icon (Figure 5).
    Figure 5. Create view controller class
    Figure 5. Create view controller class
  3. Leave With XIB for user interface unchecked. Click Next
  4. Enter the view controller file name, OneViewControler. Be sure that the Also create "xxx.h" is checked; you will need to create the myFile.m and the myFile.h files
  5. Click Finish.

As a result of the above steps, you will now find your new class files OneViewControler.h and its OneViewControler.h in your file repository.

Connect the view to its controller

In the MVC paradigm, each view has a controller class. When an event happens in the view, the Cocoa framework will call the controller. You will enter all the logic to manage the event inside the controller. You must define the controller for any defined windows.

Double-click on the OneView.xib view file to open the Interface Builder (Figure 6). The Interface Builder is composed of four panels:

  • The View contains the displayed object.
  • View identity contain the view characteristic.
  • Library is a collection of Cocoa objects that you can use to improve the view.
  • View component handles the View component and the connection with its controller.
Figure 6. Interface Builder desktop
Figure 6. Interface Builder desktop
  1. Click on the View.
  2. Select File's Owner element in View Component panel (Figure 7).
    Figure 7. file's Owner in View Component
    Figure 7. file's Owner in View Component
  3. In the View Identity panel, select the Info tab (Figure 8). In the Class drop down list, select your view controller class, OneViewController.
    Figure 8. Class drop down list
    Figure 8. Class drop down list

At the end, you can see the view controller class manager of your View in the View Component (Figure 9).

Figure 9. The View Controller of the selected View
Figure 9. The View Controller of the selected View

Realize the views

As described above, you must create a View NIB file and view controller for each application window to associate any view to the correct view controller class. To do this, you must to repeat the create working windows steps for each application component view. The sample solution described here has three windows. Table 1 shows each window’s name and its view controller class.

Table 1. Application windows
Window nameView NIB file (*.xib)View Controller class (*.m,*.h)
Start windowOneView OneViewController
List windowListElementViewListElementController
Detail windowDetailSystemView DetailSystemViewController

Create Start window

Next, you must add the Cocoa view object on the view. The Interface Builder in the SDK makes this wasy. When you open a view (for example, the OneView.xib file) by double-clicking, the SDK opens the Interface Builder.

You are now ready to load your background bitmap image into the project. PNG files are the best image type to use for this purpose, but you can use any JPG image as an alternative. Be attentive to the image size. This example uses the image file WCALogon.png (320x367 pixels). The best way to organize images inside your project is to create a specific group for all your images:

  1. Right click on Group & Files.
  2. Select Add > New Group.
  3. Set the name of your group to Images.
  4. Right click on the Images group.
  5. Select Add > Existing Files...
  6. Navigate to the image you want to add to your view, then click Add.
  7. Be sure to check Copy items into destination group's folder.

Your image is now imported in the project group. Remember you need to do the same for all the images or other files that you need in your project. Now would be a good time to do this.

The Start window is made up of these components:

  • Image view: your background bitmap (UIImageView class).
  • Server text field: the IP address input field (UITextField class).
  • Userid text field: the administrator WebSphere CloudBurst ID field (UITextField class).
  • Load button: the button to lanch the WebSphere CloudBurst data retrieved action (UIButton class).
  • Test button: used for testing the application in "unplugged" mode (UIButton class).
  • Next button: used to lanch the next action (UIButton class).

The display components are present in the Library windows. You can drag and drop the necessary items into your view in the appropriate locations. The editor helps you align components inside the view. The list and order of your View components is displayed in the View component.

  1. To assign a specific value (tag, image, and so on) to your componet, you can use the View Identity to set the image assigned to your UIImageView object. Select your object on the view. In the View Identity Attrubutes, select the PNG file you wish to assign to the view object (Figure 10).
    Figure 10. UIImageView Identity Attributes
    Figure 10. UIImageView Identity Attributes
  2. In the same window, you can set other image attributes as you wish. Figure 11 shows the view and its components list (Component view).
    Figure 11. The OneView structure
    Figure 11. The OneView structure
  3. Before you save OneWindow, check to make sure the Simulated User Interface Element contains the correct layout. In the View Identity, be sure these values are set as shown in Figure 12.
    Figure 12. OneView layout
    Figure 12. OneView layout

You can now save your view by selecting File > Save.

Create List window

The List Window is made up of a Table view, which is your cloud list (UITableView class), as shown in Figure 13.

Figure 13. ListElementView structure
Figure 13. ListElementView structure

Insert the view component in the same manner as you did for the Start window.

Create Detail window

The Detail window is made up of these components:

  • Image View: shows the cloud status (UIImageView class).
  • Label: static text, Status: (UILabel class).
  • Label: status string description, text retrieved from WebSphere CloudBurst (UILabel class).
  • Label: static text Created: (UILabel class).
  • Label: created string description text, retrieved from WebSphere CloudBurst (UILabel class).
  • Label: a static text Owner: (UILabel class).
  • Label: owner string description text, retrieved from WebSphere CloudBurst (UILabel class).
  • Label: name string description text, retrieved from WebSphere CloudBurst (UILabel class).
  • Text View: currentmessage_text string description text, retrieved from WebSphere CloudBurst (UITextView class).
Figure 14. DetailSystemView structure
Figure 14. DetailSystemView structure

Remember to assign the correct value to the static label using Identity windows in the same manner as you assigned the PNG file for the backgroung image of OneView.


Define class for controller

When you created the NIB file, you also created the controller class for each view. Each view controller receives the action every time the user performs an action on the view. The framework creates the class skeleton automatically, but you must complete the class with your code. Specifically, you need to create an instance variable for each dynamic component that you defined on the view. You also need to create an interface to intercept the view action to transfer information when you navigate between the views.

In the MVC framework, you define one view controller for each view. You can also create a class to manage the data object, which will contain all the information that you retrieved from the JSON file. (Details on the JSON to data transformation are beyond the scope of this article. Several open source JSON parsers are available. You can use the parser that best meets your requirements and include it in your development process.) For the purpose of this exercise, this statement is inserted in the class to indicate where the JSON parser would be included (this line will be different depending on your parser):

#import "JSON/JSON.h"

Also for the purpose of this article, Cocoa framework defintions are used as is (IBOutlet). (Details on the Cocoa framework are beyond the scope of this article. For more information, see Resources.)

OneView controller in test mode

In the OneViewController class, you defined an object to test the application in "unplugged" mode. You will remove this when you insert the code that manages the HTTP syndication. This is the only this class that will be modified; because the others do not perform any network communication, they will not change.

First, insert the IBOutlet definition, for managing the view component into the OneViewController.h file (Listing 1). For the action, you will use the -(IBAction) definition. Also, some constant values are defined to improve the readability of the code.

Listing 1. OneViewController.h
//
//  OneViewController.h
//  WCA000
//
//  Created by Luca Amato on 9/25/10.
//

#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>

#define FILENAMEARCH @"archive"
#define PROTOCOL @"https://"

#define SERVERPSW @"wca_admin_psw"
#define API @"/resources/virtualSystems"
#define USER @"wca_admin_id"

@interface OneViewController : UIViewController {

	IBOutlet UITextField *field1 ;
	IBOutlet UITextField *field2 ;
	IBOutlet UITextView *description;
	
	NSMutableData *receivedData;
	
	NSString *inputString;
	
	NSMutableData *responseData;
}

@property (nonatomic, retain) UITextField *field1 ;
@property (nonatomic, retain) UITextField *field2 ;
@property(nonatomic, retain) NSString *inputString;
@property (nonatomic, retain) IBOutlet UITextView *description;
@property (nonatomic, retain) NSMutableData *receivedData;

-(IBAction) buttonPressedTest;
-(IBAction) buttonDownloadImage;
-(IBAction) buttonNext;

@end

You can now save the file by selecting File > Save.

ListElementView controller

Add the definitions for managing the view component into the ListElementView.h file (Listing 2), and then save the file.

Listing 2. ListElementViewController.h
//
//  ListElementViewController.h
//  WCA000
//
//  Created by Luca Amato on 9/25/10.
//

#import <UIKit/UIKit.h>

#define MAINLABEL_TAG 1
#define SECONDLABEL_TAG 2
#define PHOTO_TAG 3

@interface ListElementViewController : UIViewController {
	NSMutableArray *listElement;
	NSString *descriptionText;
}

@property (nonatomic, retain) NSMutableArray *listElement;

-(IBAction) loadJsonText:(NSString *)str;
- (void)setDescpText:(NSString *)_text;
@end

DetailSystemView controller

Add the definitions shown in Listing 3 to the DetailSystemView.h file (Listing 3), and then save the file.

Listing 3. DetailSystemViewController.h
//
//  DetailSystemViewController.h
//  WCA000
//
//  Created by luca amato on 9/27/10.
//

#import <UIKit/UIKit.h>
#import "VirtualSystems.h"

@interface DetailSystemViewController : UIViewController {
	IBOutlet UILabel *name;
	IBOutlet UILabel *currentStatusText;
	IBOutlet UILabel *created;
	IBOutlet UILabel *owner;
	
	IBOutlet UIImageView *statusImg;
	
	IBOutlet UITextView *currentMessageText;
	
	VirtualSystems *aSystem;
}

@property (nonatomic, retain) VirtualSystems *aSystem;

- (void)setVirtulaSystem:(VirtualSystems *)system;

@end

Define data object

Your application needs to manage a cloud list. The application will retrieve this list from WebSphere CloudBurst (in JSON fomat). As discussed in Part 1, the conversion from JSON format to Object-C data is performed by a JSON open source parser. Typically, this code obtains a Dictionary (NSMutableDictionary class) object. You should create a class that contains an instance of the object that contains the data from the parser. The VirtualSystems class (Listings 4 and 5) implements methods to return all the necessary values, wrapping the dictionary object inside. Regarding behaviours, you need to define only the get message. The object will be created by using this constructor:

-(id)initWithJSON:(NSDictionary *)jsonDict name:(NSString *) n;

Table 2 lists the VirtualSystems class behaviours.

Table 2. VirtualSystems behaviours
BehavioursJSON tagNotes
getName@"name" name associated with this virtual system
getId@"id"the ID of the virtual system
getCurrentStatus@"getcurrentstatus" Specifies a string representing the current status of the virtual system
getCurrentStatusText@"getcurrentstatus_text"Specifies the textual representation of currentstatus
getOwner@"owner"Specifies the URI of the user that owns this virtual system
getCurrentmessage@"currentmessage_text"Specifies the textual representation of currentmessage
getCreated@"created"Specifies the creation time of the virtual system
Listing 4. VirtualSystems.h
//
//  VirtualSystems.h
//  WCA000
//
//  Created by luca amato on 9/27/10.
//

#import <UIKit/UIKit.h>

@interface VirtualSystems : NSObject {
	NSString *name;
	NSDictionary *element;
}

@property (nonatomic, retain) NSDictionary *element;
@property (nonatomic, retain) NSString *name;

-(id)initWithJSON:(NSDictionary *)jsonDict name:(NSString *)n;

@end
Listing 5. VirtualSystems.m
//
//  VirtualSystems.m
//  WCA000
//
//  Created by luca amato on 9/27/10.
//

#import "VirtualSystems.h"

@implementation VirtualSystems

@synthesize element, name;

-(id)initWithJSON:(NSDictionary *)jsonDict name:(NSString *)n {
NSLog(@"VirtualSystems.jsonString:%@",jsonDict);
	self.name = n;
	self.element = jsonDict;
	return self;
}

-(NSObject *)getName {
	NSObject *value=[element objectForKey:@"name"];
	return value;
}

-(NSInteger *)getId {
	NSDecimalNumber *id=[element objectForKey:@"id"];
	NSInteger intId = [id intValue];
	return intId;
}

-(NSString *)getCurrentstatus {
	NSString *status=[element objectForKey:@"currentstatus"];
	return status;
}

-(NSString *)getCurrentstatusText {
	NSString *status=[element objectForKey:@"currentstatus_text"];
	return status;
}

-(NSString *)getOwner {
	NSString *theOwner=[element objectForKey:@"owner"];
	return theOwner;
}

-(NSString *)getCurrentmessage {
	NSString *theCurrentmessage=[element objectForKey:@"currentmessage_text"];
	return theCurrentmessage;
}

-(NSString *)getCreated {
	NSDecimalNumber *theCreated=[element objectForKey:@"created"];
	NSLocale *usLocale = [[NSLocale alloc] initWithLocaleIdentifier:@"en_US"];
	NSString *decimalString = [ theCreated stringValue];
	[usLocale release];
	return decimalString;
}

@end

Test file for unplugged mode

To test the application in uplugged mode, you use a JSON static file stored inside the project. You can use the file shown in Listing 5 as an example, or you can download a JSON file directly from your WebSphere CloudBurst Appliance. (To store it inside the project, use the same command that you used to upload an image into the project.)

Listing 6. example.sql file
[
   {
      "desiredstatus_text": null,
      "currentstatus_text": "Arrestato",
      "created": 1260941860895,
      "name": "Single Server",
      "currentstatus": "RM01011",
      "desiredstatus": null,
      "currentmessage": "RM07153",
      "pattern": "/resources/patterns/1",
      "owner": "/resources/users/6",
      "updated": 1260943821497,
      "id": 51,
      "currentmessage_text": "Stopped"
   },
   {
      "desiredstatus_text": null,
      "currentstatus_text": "Avvio",
      "created": 1263868560454,
      "name": "05WASadmin Cloned Lab Virtual System",
      "currentstatus": "RM01005",
      "desiredstatus": "",
      "currentmessage": "RM07054(\"05WASAdmin+Lab+Application\")",
      "pattern": "/resources/patterns/43",
      "owner": "/resources/users/15",
      "updated": 1263869039755,
      "id": 59,
      "currentmessage_text": "Running"
   },
   {
      "desiredstatus_text": null,
      "currentstatus_text": "Avviato",
      "created": 1263862881511,
      "name": "LucaV",
      "currentstatus": "RM01006",
      "desiredstatus": "",
      "currentmessage": "RM07045",
      "pattern": "/resources/patterns/1",
      "owner": "/resources/users/4",
      "updated": 1263863256864,
      "id": 56,
      "currentmessage_text": "Ready for use"
   }

Save and test

Save all your files. Test your code by selecting Build > Build and Go to compile and run the application. If errors occur, make any necessary modifications and then recompile the project and re-test.


Conclusion

The second installment of this series of articles, describing how to integrate an iPhone application with WebSphere CloudBurst capabilities to access and display back end data, described how to prepare the windows for your sample application and how to create the class to manage the data object. Sample code is included with this article for comparison to supplement your testing. In Part 3, you will see how to manage the data flow and pass the data through the controller to appear in the actual application windows.


Download

DescriptionNameSize
Sample code1102_amato2_WCAsample.zip1.5MB

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere, Cloud computing, Web development
ArticleID=620671
ArticleTitle=Integrating WebSphere CloudBurst capabilities in an iPhone solution, Part 2: Defining and building the iPhone application
publish-date=02022011