内容


在 iPhone 解决方案中集成 WebSphere CloudBurst 功能,第 2 部分

定义和开发 iPhone 应用程序

Comments

系列内容:

此内容是该系列 # 部分中的第 # 部分: 在 iPhone 解决方案中集成 WebSphere CloudBurst 功能,第 2 部分

敬请期待该系列的后续内容。

此内容是该系列的一部分:在 iPhone 解决方案中集成 WebSphere CloudBurst 功能,第 2 部分

敬请期待该系列的后续内容。

先决条件

设计和创建应用程序是 Web 2.0 应用程序开发的下一步,将一个 IBM WebSphere CloudBurst Appliance 和一个 Apple iPhone 设备整合到一起。但是,在开始之前,您应该了解一些先决条件。

本系列文章假定您对 Web 2.0 技术,包括 Rest、ATOM、JSON 和 Objective-C 有一个大致了解。这些文章中描述的示例应用程序是通过 Objective-C 中的 “模型-视图-控制器(MVC)” 模式,使用 Apple iPhone SDK 3.x 实现的,并将在一台安装了 3.x 固件的 iPhone(或 iPod Touch)设备上运行。因此,这个开发假定您基本了解 C 编程语言(Object-C 继承了所有 C 的特性)。而且,理解基本的面向对象概念(如继承、类、接口等)也很重要。

此外,这个练习使用了 Cocoa 框架,它是由一组 API、程序库和组成 iPhone SDK 开发层的运行时代码所构成的。Cocoa 是用 Object-C 实现的,并使用 MVC 模式来封装视图、应用程序数据、控制器和实现管理逻辑的类。

最后,要完成本文所介绍的步骤和运行例子,您需要在计算机上安装 Apple SDK 3.0 或以上版本,运行一个 Mac OS 兼容版本。您还需要运行在您环境中的 WebSphere CloudBurst Appliance 的访问权限。

设计您的应用程序

这里介绍的示例应用程序的设计有三个窗口,分别用来管理、查询和显示从 WebSphere CloudBurst Appliance 获得的数据。如图 1 所示,这三个应用程序窗口从左到右是:

  • Start 窗口中,您要输入 WebSphere ClourBurst 服务器地址和 WebSphere CloudBurst 的访问用户 ID。设备的所有访问都是通过使用用户 ID 和密码的 HTTPS 基本身份验证管理的。在指定用户 ID 和密码之后,List 窗口就会打开。
  • List 窗口显示了在您执行 WebSphere ClourBurst 连接(和数据查询)时设备所管理的云清单。当您从清单选择一个云时,Detail 窗口就会打开。(其中有一个后退操作可返回 Start 窗口。)
  • Detail 窗口会显示您所选择的云的详细信息。(其中有一个后退操作可返回 List 窗口。)
图 1. 应用程序启动窗口
图 1. 应用程序启动窗口
图 1. 应用程序启动窗口

应用程序模板

iPhone SDK 提供了几个框架模板,您可以用它们来实现您的应用程序(图 2)。以下是最常用的模板:

  • View-based Application 模板是用在单个视图应用程序模型中的。有一个简单的视图控制器管理主视图。通过这个模板,您可以创建一个没有任何导航的简单应用程序。如果您的应用程序需要使用导航访问多个视图,您可以使用基于导航的模板。
  • Navigation-based Application 模板是用来创建具有多个视图并需要在它们之间导航的应用程序。视图的导航是由一个 Views 堆管理的。您可以在任何视图中使用 Back 按钮浏览您的堆栈视图。
  • Tab Bar Application 模板提供了一个特殊控制器,它会在底部显示一个导航条。这个模型在 iPhone 或 iPod 设备上是很有用的,因为按钮选项卡可以提供一系列应用程序快捷键来访问应用程序功能。
图 2. 可用的 SDK 应用程序模板
图 2. 可用的 SDK 应用程序模板
图 2. 可用的 SDK 应用程序模板

对于这里描述的示例应用程序,您可以使用 Tab Bar Application 模板。这个模板创建了一个选项卡导航条和两个关联视图。Start 窗口将作为第一个视图。您可以使用第二个视图来实现其他功能。

创建项目

如本系列文章的第 1 部分所介绍,您现在需要创建一个新的项目:

  1. 从您的 iPhone SDK 启动Xcode(默认位于 /Developer/Application)。
  2. 在 Product 弹出菜单中,一定要选中 iPhone,然后选择 File > New Project。单击 Tab Bar Application 图标(图 2)。这个模板为您的应用程序提供了一个起点。
  3. 单击 Choose
  4. 填入您的项目名称,如 WCA001,然后单击 Save
  5. 选择 Build > Build and Go
  6. 这个工具将会在 iPhone 模拟器中编译并安装您的应用程序。iPhone 模拟器会自动启动您的应用程序。您应该会看到类似于图 3 所示的一个面板。
图 3. 第一个视图
图 3. 第一个视图
图 3. 第一个视图

在您的框架搭建好之后,您现在可以创建您的应用程序了。

创建一个工作窗口

如之前所述,您的应用程序是基于 MVC 模式开发的。当您选择一个应用程序模板时,这个工具会自动生成一个应用程序代表(WCA000AppDelegate.m)和虚拟窗口(MainWindows.xibSecondWindow.xib)。您会发现这些窗口位于 NIB Files 组之中。对于每一个窗口,您可以使用以下命名规范创建一个视图和关联控制器:xxxViewxxxViewController。因此,您可以调用一个窗口视图 OneView 和它的控制器 OneViewController

创建您的第一个视图

  1. 在 iPhone SDK 中,选择 File > New File
  2. 选择 User Interface,然后是 View XIB 图标(图 4)。
    图 4. 创建视图
    图 4. 创建视图
    图 4. 创建视图
  3. 单击 Next
  4. 插入 NIB 文件名,OneView
  5. 单击 Finish

创建您的第一个视图控制器

  1. 选择 File > New File
  2. 选择 Cocoa Touch Class 和e UIViewController subclass 图标(图 5)。
    图 5. 创建视图控制器类
    图 5. 创建视图控制器类
    图 5. 创建视图控制器类
  3. 保持 With XIB for user interface 未选中。单击 Next
  4. 输入控制器文件名 OneViewControler。保证选中 Also create "xxx.h" ;您将需要创建 myFile.mmyFile.h 文件。
  5. 单击 Finish

在完成上术步骤之后,您就会在文件库中看到新的类文件 OneViewControler.h 及其 OneViewControler.h

将视图连接到控制器

在 MVC 模式中,每一个视图都有一个控制器类。当视图中发生一个事件时,Cocoa 框架将会调用这个控制器。您将输入管理控制器中事件的所有逻辑代码。您必须为所有定义的窗口定义控制器。

双击 OneView.xib 视图文件,打开 Interface Builder(图 6)。Interface Builder 是由 4 个面板构成的:

  • View 面板包含了显示的对象。
  • View identity 面板包含了视图特征。
  • Library 是一组 Cocoa 对象,您可用于改进视图体验。
  • View component 负责处理视图组件和它与控制器的连接。
图 6. Interface Builder 桌面
图 6. Interface Builder 桌面
图 6. Interface Builder 桌面
  1. 单击该视图。
  2. 选择 View Component 面板的 File's Owner 元素(图 7)。
    图 7. View Component 中的 file's Owner
    图 7. View Component 中的 file's Owner
    图 7. View Component 中的 file's Owner
  3. 在 View Identity 面板中,选择 Info 选项卡(图 8)。在 Class 下拉列表中,选择您的视图控制器类 OneViewController
    图 8. Class 下拉列表
    图 8. Class 下拉列表
    图 8. Class 下拉列表

最后,您可以在 View Component 中看到您视图的视图控制器类管理器(图 9)。

图 9. 所选视图的视图控制器
图 9. 所选视图的视图控制器
图 9. 所选视图的视图控制器

实现这些视图

如之前所述,您必须为每一个应用程序窗口创建一个视图 NIB 文件和视图控制器,并将视图关联到正确的视图控制器类上。要做到这一点,您必须为每个应用程序组件视图重复 创建工作窗口 中的步骤。这里描述的示例解决方案具有三个窗口。表 1 显示了每一个窗口的名称及其视图控制器类。

表 1. 应用程序窗口
窗口名称视图 NIB 文件(*.xib)视图控制器类(*.m,*.h)
Start 窗口OneView OneViewController
List 窗口ListElementViewListElementController
Detail 窗口DetailSystemView DetailSystemViewController

创建 Start 窗口

接下来,您必须在视图上添加 Cocoa 视图对象。SDK 中的 Interface Builder 使这个操作变得很简单。当您双击打开一个视图时(例如,OneView.xib 文件),SDK 就会打开 Interface Builder。

您现在可以将背景位图图像加载到对象了。PNG 文件是最适合此用途的图像,但是您也可以选择使用任何 JPG 图像。要注意图像大小。这个例子使用的图像文件是 WCALogon.png(320x367 像素)。在您的项目中组织图像的最好方法是为您的所有图像创建一个特定的组:

  1. 右键单击 Group & Files
  2. 选择 Add > New Group
  3. 将组名设置为 Images
  4. 右键单击 Images 组。
  5. 选择 Add > Existing Files..
  6. 浏览您希望添加到视图的图像,然后单击 Add
  7. 一定要选中 Copy items into destination group's folder

您的图像现在将导入到项目组中。记住您必须为项目所需要的所有图像或其他文件执行相同的操作。现在正是执行这些操作的时候。

Start 窗口由以下组件构成:

  • Image 视图:您的背景位图(UIImageView 类)。
  • Server 文本框:IP 地址输入域(UITextField 类)。
  • Userid 文本框:管理员 WebSphere CloudBurst ID 域(UITextField 类)。
  • Load 按钮:执行 WebSphere CloudBurst 数据查询操作的按钮(UIButton 类)。
  • Test 按钮:用于在 “为插接” 模式下测试应用程序(UIButton 类)。
  • Next 按钮:用于执行下一步操作(UIButton 类)。

这些显示组件位于 Library 窗口。您可以拖放必要的项目到您视图适当的位置。编辑器可以帮助您调整视图中的组件位置。您的视图组件清单和位置会显示在 View 组件中。

  1. 为了给您的组件设置一个具体值(标签、图像等),您可以使用 View Identity 设置分配给 UIImageView 对象的图像。选择视图上您的对象。在 View Identity Attrubutes 窗口中,选择您希望分配给视图对象的 PNG 文件(图 10)。
    图 10. UIImageView Identity Attributes
    图 10. UIImageView Identity Attributes
    图 10. UIImageView Identity Attributes
  2. 在同一个窗口中,您可以设置其他的图像属性。图 11 显示了视图及其组件清单(组件视图)。
    图 11. OneView 的结构
    图 11. OneView 的结构
    图 11. OneView 的结构
  3. 在保存 OneWindow 之前,您要检查以保证 Simulated User Interface Element 的布局是正确的。在 View Identity 中,一定保证这些值与图 12 保持一致。
    图 12. OneView 布局
    图 12. OneView 布局
    图 12. OneView 布局

您现在可以通过选择 File > Save 来保存您的视图。

创建 List 窗口

List 窗口是由一个表格视图构成的,这是您的云清单(UITableView 类),如图 13 所示。

图 13. ListElementView 的结构
图 13. ListElementView 结构
图 13. ListElementView 结构

采用与 Start 窗口相同的方式插入视图组件。

创建 Detail 窗口

Detail 窗口由以下组件构成:

  • Image View:显示了云的状态(UIImageView 类)。
  • Label:静态文本,Status:(UILabel 类)。
  • Label:状态字符描述,从 WebSphere CloudBurst 检索的文本(UILabel 类)。
  • Label:创建的静态文本:(UILabel 类)。
  • Label:创建字符描述文本,从 WebSphere CloudBurst 检索的(UILabel 类)。
  • Label:静态文本 Owner:(UILabel 类)。
  • Label:所有者字符描述本文,从 WebSphere CloudBurst 检索的(UILabel 类)。
  • Label:name 字符描述文本,从 WebSphere CloudBurst 检索的(UILabel 类)。
  • Text View:currentmessage_text 字符描述文本,从 WebSphere CloudBurst 检索的(UITextView 类)。
图 14. DetailSystemView 的结构
图 14. DetailSystemView 结构
图 14. DetailSystemView 结构

记住要采用与分配 PNG 文件作为 OneView 背景图像的相同方式使用 Identity 窗口将正确的值分配给静态标签。

定义控制器类

在您创建 NIB 文件之后,您还需要为每个视图创建控制器类。每当用户在视图上执行一个操作时,每一个视图控制器就会接收到这个操作。框架会自动创建类的基本结构,但是您必须完成类的其他部分代码。具体地,您需要为您在视图上定义的每一个动态组件创建一个实例变量。您还需要创建一个接口来拦截视图操作,从而实现您在浏览不同视图时的数据传输。

在 MVC 框架中,您要为每个视图定义一个视图控制器。您还可以创建一个类来管理数据对象,这个对象包含您从 JSON 文件查询得到的所有信息。(JSON 文件中关于数据传输的细节超出本文范围。目前有几个开源 JSON 解析器。您可以使用最适合您的解析器,将它包含在您的开发过程中。)根据本练习的目的,下面这个语句将插入到类中指示加入 JSON 解析器的位置(这行代码会根据您使用的解析器不同而不同):

#import "JSON/JSON.h"

同样是出于本文章的撰写目的,Cocoa 框架定义也采取同样的方式使用(IBOutlet)。(关于 Cocoa 框架的详细信息也超出本文范围。更多信息,见 参考资料。)

测试模式的 OneView 控制器

在 OneViewController 类中,您定义了一个用来在 “未连接” 模式中测试应用程序的对象。当您插入这些管理 HTTP 连接的代码时,您将需要删除它。这是唯一需要修改的类;因为其他代码并没有执行任何的网络通信,它们不需要修改。

首先,插入 IBOutlet 定义,以便管理 OneViewController.h 文件中的视图组件(清单 1)。对于操作,您将使用 -(IBAction) 定义。此外,我们还需要定义一些常量来改进代码的可读性。

清单 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

您现在可以通过选择 File > Save 保存这个文件。

ListElementView 控制器

添加管理 ListElementView.h 文件(清单 2)的视图组件的定义,然后保存这个文件。

清单 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 控制器

添加如清单 3 所示的定义到 DetailSystemView.h(清单 3),然后保存这个文件。

清单 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

定义数据对象

您的应用程序需要管理一个云清单。这个应用程序将会从 WebSphere CloudBurst 查询这个清单(采用 JSON 格式)。如我们在第 1 部分讨论的,从 JSON 格式到 Object-C 数据的转换是通过一个 JSON 开源解析器执行的。一般情况下,这段代码会获得一个 Dictionary(NSMutableDictionary 类) 对象。您应该创建一个类来包含表示解析器所得数据的对象实例。VirtualSystems 类(清单 4 和 5)实现了返回所有必要值的方法,并封装了字典对象。对于行为,您只需要定义 get 消息。这个对象是通过使用这个构造函数创建的:

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

表 2 列出了 VirtualSystems 类的行为。

表 2. VirtualSystems 行为
行为JSON 标签 说明
getName@"name" 与这个虚拟系统关联的名称
getId@"id"这个虚拟系统的 ID
getCurrentStatus@"getcurrentstatus" 指定一个表示虚拟系统当前状态的字符串
getCurrentStatusText@"getcurrentstatus_text"指定 currentstatus 的文本表示
getOwner@"owner"指定拥有这个虚拟系统的用户 URI
getCurrentmessage@"currentmessage_text"指定 currentmessage 的文本表示
getCreated@"created"指定这个虚拟系统的创建时间
清单 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
清单 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

进行未插接模式的文件测试

要在未插接模式下测试应用程序,您需要使用项目内存储的一个 JSON 静态文件。您可以使用如清单 5 所示的示例文件,或者您可以直接从您的 WebSphere CloudBurst Appliance 下载一个 JSON 文件。(要将它存储在项目中,您需要使用与上传图像到项目时使用的相同命令。)

清单 6. example.sql 文件
[
   {
      "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"
   }

保存与测试

保存您的所有文件。选择 Build > Build and Go,编译和运行应用程序,从而测试您的代码。如果有错误发生,进行必要的修改,然后重新编译项目并重新测试。

结束语

本系列文章第 2 部分介绍了如何给一个 iPhone 应用程序整合 WebSphere CloudBurst 功能,以便访问和显示后台数据。本文讨论了用于开始示例应用程序的模型-视图-控制器的视图组件开发模式。第 3 部分将继续介绍应用程序的控制器组件。


下载资源


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=WebSphere, Cloud computing, Web development
ArticleID=643311
ArticleTitle=在 iPhone 解决方案中集成 WebSphere CloudBurst 功能,第 2 部分: 定义和开发 iPhone 应用程序
publish-date=03282011