人人IT網

人人IT網

當前位置: 主頁 > 服務器軟件 > Websphere >

使用 IBM Worklight 開發 iPad 應用

時間:2012-11-30 00:02來源:Internet 作者:Internet 點擊:
免費下載:IBM® Worklight Mobile Platform下載更多的 IBM 軟件試用版,並加入 IBM 軟件下載與技術交流群組,参與在線交流。 Worklight 概覽
免費下載:IBM® Worklight Mobile Platform
下載更多的 IBM 軟件試用版,並加入 IBM 軟件下載與技術交流群組,参與在線交流。

Worklight 概覽

IBM Worklight 为智能手機和平板電腦提供了一個開放的、全面的和先進的移動應用平台。通過使用基於標准的技術和工具、專門針對移動設備而進行優化過的中間件、各種安全機制,以及集成的管理和分析功能,它能夠幫助各大企業有效地開發、運行和管理 HTML5、混合式(Hybird) 及本機(Native)應用。

借助 IBM Worklight ,您無需使用代碼翻譯、專用解釋程序或不受歡迎的腳本語言,就可以創建豐富的跨平台應用程序。這样,不僅加快了產品的上市速度,降低了成本和開發的复雜性,還为廣大用戶提供了一個更好的跨各種移動設備的使用體驗。


開發環境介紹


圖 1. 開發環境示意圖
圖 1. 開發環境示意圖

Worklight 服務器

我們使用 Windows 系統作为 IBM Worklight Server 的操作系統,並且安裝 IBM Worklight Server 和 MySQL。

  • MySQL:

    它是 Worklight Server 的後台數據庫,用於存儲 Worklight Server 基本信息、它所管理的應用程序信息和适配器信息等。

  • IBM Worklight Server:

    它是一個基於 java 的服務器,相當於應用程序與企業後台系統或服務之間的網關,同時提供了安全的連接、多數據源讀寫、認證、Web 與混合模式的應用更新、分析和應用程序管理等功能。

開發機

開發機我們使用 Apple 的 Mac 機器,並且在 Mac OS X 的系統中安裝 Xcode 和 IBM Worklight Studio。

  • Xcode:

    它是蘋果公司向開發人員提供的集成開發環境,用於開發和編譯 Mac、iPhone 以及 iPad 的應用程序。

  • IBM Worklight Studio:

它是一個基於 Eclipse 的集成開發環境,開發者可以根據具體需求編碼和集成後台業務系統。

iPad 設備

用於真機調試,檢驗開發出的軟件功能及運行效果。

後台系統服務

为應用程序提供支撐的認證服務、數據服務、郵件服務等各類系統的服務。


iPad 平台的 Hybird 應用開發

Hybrid 開發方法結合了 Native 開發和 Web 技術。借助這種方法,開發者就能使用跨平台 Web 技術,開發應用程序的大部分代碼,又可以在需要時直接訪問 Native API。這裏通過實例着重介紹基於适配器認證方法,如何通過 Web 和 Native 兩種方式調用 Worklight 适配器。

Worklight 服務器基本配置

我們采用基於适配器的認證方式,在 Worklight 服務器中需要修改 WORKLIGHT_HOME\server\conf\authenticationConfig.xml 文件。


清單 1. 在 <realms> 節點中加入新的認證域 DemoLoginRealm:
				  
 <realm name="DemoLoginRealm" loginModule="DemoLoginModule"> 
 <className>com.worklight.integration.auth.AdapterAuthenticator</className> 
 <parameter name="login-function" value="DemoLoginAdapter.onAuthRequired" /> 
 <parameter name="logout-function" value="DemoLoginAdapter.onLogout" /> 
 </realm> 

  • 當 Worklight 認證模塊檢測到試圖訪問受保護的适配器時,則會自動調用 login-function;
  • 當 Worklight 認證模塊檢測到用戶正在 logout 或是 session 超時時,則會自動調用 logout-function;

清單 2. 在 <loginModules> 節點中加入 DemoLoginModule:
				  
 <loginModule name="DemoLoginModule" 
 canBeResourceLogin="true" 
 isIdentityAssociationKey="false"> 
 <className>com.worklight.auth.ext.NonValidatingLoginModule</className> 
 </loginModule> 

創建 Worklight 工程

打開 Worklight Studio,點擊 File-> New -> Project -> Worklight -> Worklight Project

輸入工程名稱:DemoProject,點擊“Finish”,完成工程創建。

點擊 File-> New -> Other -> Worklight ->Worklight Application

輸入應用名稱:Portal,點擊“Finish”,完成 Worklight 應用的創建。


圖 2. Worklight 項目目錄示意圖
圖 2. Worklight 項目目錄示意圖

如圖 2 所示,Worklight 項目包括以下文件夾 :

  • adapters: 項目裏所有的适配器
  • apps: 項目裏所有的應用
  • bin: 項目編譯後的交付物
  • lib: 項目所包含的第三方庫

清單 3. 修改 application-description.xml
				  
 <usage requireAuthentication="onDemand"> 
 <realm name="DemoLoginRealm"/> 
 </usage> 
 <worklightRootURL>http://192.168.1.5:8080</worklightRootURL> 

設置認證方式和 worklightRootURL。

Worklight 适配器開發

創建适配器

創建一個認證适配器:

點擊 File-> New -> Other -> Worklight -> Worklight Adapter

選擇工程名:DemoProject,适配器類型:HTTP Adapter,輸入适配器名稱:DemoLoginAdapter,點擊“Finish”,完成 HTTP 适配器創建。


圖 3. Worklight 适配器目錄
圖 3. Worklight 适配器目錄

如圖 3 所示,HTTP 适配器包括以下文件 :

  • DemoLoginAdapter.xml: 定義适配器的連接参數和對外的接口
  • DemoLoginAdapter-impl.js: 定義對外接口的內部邏輯

清單 4. 修改 DemoLoginAdapter.xml
				  
 <?xml version="1.0" encoding="UTF-8"?> 
 <wl:adapter name="DemoLoginAdapter"
	 authenticationRealm="DemoLoginRealm"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	 xmlns:wl="http://www.worklight.com/integration"
	 xmlns:http="http://www.worklight.com/integration/http"> 
	 <displayName>DemoLoginAdapter</displayName> 
	 <description>DemoLoginAdapter</description> 
	 <connectivity> 
		 <connectionPolicy xsi:type="http:HTTPConnectionPolicyType"> 
			 <protocol>http</protocol> 
			 <domain>192.168.1.10</domain> 
			 <port>80</port> 			
		 </connectionPolicy> 
		 <loadConstraints maxConcurrentConnectionsPerNode="20" /> 
	 </connectivity> 

 <procedure name="submitLogin" requiresAuthentication="false"/> 
 <procedure name="
		 getFriendData " requiresAuthentication="true" /> 
 </wl:adapter> 

在這個 xml 文件中,适配器名稱 DemoLoginAdapter,認證域为 DemoLoginRealm,設置企業後台系統服務的訪問協議(http)、訪問地址(192.168.1.10)及端口(80);定義了登錄(submitLogin)和取得用戶好友信息(getFriendData)兩個過程。


清單 5. 編輯 DemoLoginAdapter-impl.js
				  
 function getUserInfo(username,password) { 
	 path = getLoginPath(username,password); 
	 var input = { 
	    method : 'get', 
	    returnedContentType : 'xml', 
	    path : path 
	 }; 
	 return WL.Server.invokeHttp(input); 
 } 
 function submitLogin(username,password){ 
	 userInfo = getUserInfo(username,password); 	
	 if (userInfo.UserResponse!=undefined){ 
		
		 userIdentity = { 
				 userId: username, 
				 displayName: userInfo.UserResponse.name, 
				 attributes: {} 
		 }; 

		 WL.Server.setActiveUser("DemoLoginRealm", userIdentity); 
		 return { 
 authRequired: false 
		 }; 
	 }else{ 
 return onAuthRequired(null,"1","您輸入的認證信息有誤"); 
	 } 
 } 

 function onAuthRequired(headers, errorCode, errorMessage){ 
	 errorCode = errorCode ? errorCode : "0"; 
	 errorMessage = errorMessage ? errorMessage : null; 
	 return { 
		 authRequired: true, 
		 errorMessage: errorMessage, 
 errorCode: errorCode 
	 }; 
 } 

 function onLogout(){ 
	 WL.Logger.debug("Logged out"); 
 } 

 function getFriendData(friendId) 
 { 
 path = getFriendDataPath(friendId); 
	 var input = { 
	    method : 'get', 
	    returnedContentType : 'xml', 
	    path : path 
	 }; 
	 return WL.Server.invokeHttp(input); 
 } 

在這個 js 文件中,實現了登錄和取得好友數據的邏輯,通過調用 WL.Server.invokeHttp 方法完成對後台服務數據的請求,在它的参數中可以根據後台系統的要求設定相應的参數。

部署适配器

選擇 DemoLoginAdapter 适配器,點擊右鍵 Run As > Deploy Worklight Adapter


圖 4. Worklight 适配器部署
圖 4. Worklight 适配器部署

圖 5. Worklight Console 中查看适配器
圖 5. Worklight Console 中查看适配器

在 Worklight 控制台上可以看到部署上的适配器。

iPad 端開發

創建 Worklight 的 iPad 環境

使用 Worklight Studio 在 Worklight 應用中創建 iPad 環境

點擊 File-> New -> Other -> Worklight ->Worklight Environment

輸入應用名稱:Portal,點擊“Finish”,完成 Worklight 應用的創建。

選擇工程名:DemoProject,選擇應用:Protal,選擇 iPad,點擊“Finish”,完成 Worklight 環境的創建。

實現基於适配器的登錄功能


圖 6. Worklight 應用目錄
圖 6. Worklight 應用目錄

如圖 6 所示,其中:

  • Protal.html 是應用的首頁,可以之間在首頁中加入登錄視圖。
  • auth.js 是 Worklight 提供的認證腳本文件,實現內部的方法來完成認證邏輯。

清單 6. 在 Protal.html 中加入登錄頁面
				  
 <table class="enterinfo"> 
 <tr><td> 
 <input type="text" id="usernameInputField" class="loginInput" /> 
 </td></tr> 
 <tr><td> 
 <input type="password" id="passwordInputField" class="loginInput" /> 
 <br/></td> 
 </tr> 
 <tr><td> 
 <input type="button" value="Login" id="loginButton"/> 
 <input type="button" value="Logout" 
 onclick="Authenticator.isAuthenticated
   =false;WL.Client.logout('DemoLoginRealm');" /> 
 </td> 
 </tr> 
 </table> 


清單 7. 在 auth.js 中實現認證邏輯
				  
 /* Authenticator skeleton; Uncomment and implement if your */ 
 /* application requires authentication. */ 

 var Authenticator = function () { 
    var USERNAME_INPUT_ID = 'usernameInputField'; 
    var PASSWORD_INPUT_ID = 'passwordInputField'; 
    var LOGIN_BUTTON_ID   = 'loginButton';  
 var isAuthenticated = false; 

    function onFormSubmit() { 
  	 var invocationData = { 
		 adapter : "DemoLoginAdapter", 
		 procedure : "submitLogin", 
		 parameters : [$F(USERNAME_INPUT_ID),$F(PASSWORD_INPUT_ID)] 
 }; 
	 WL.Client.invokeProcedure(invocationData, {}); 
    } 

    function backFromNativePage(data){ 

    } 
    
 return { 
    init : function () { 
            $(LOGIN_BUTTON_ID).observe('click', onFormSubmit); 
    		 isAuthenticated = false; 
        }, 

        isLoginFormResponse : function (response) { 
 if (!response || !response.responseJSON|| response.responseText === null) { 
		 return false; 
    } 

 if(response.responseJSON.authRequired
 ==undefined||response.responseJSON.authRequired==true){ 
    return true; 

    }else{ 
    isAuthenticated = true; 
    } 

        return false; 
        }, 
        
        onBeforeLogin : function (response, username, onSubmit, onCancel) { 

            onSubmitCallback = onSubmit; 
            onCancelCallback = onCancel;            
            if (!Object.isUndefined(username) && username != null){ 
                $(USERNAME_INPUT_ID).value = username; 
            } 
            else { 
                $(USERNAME_INPUT_ID).value = ''; 
            } 
            $(PASSWORD_INPUT_ID).value = ''; 
        }, 

       onShowLogin: function() { 

       }, 
        
       onHideLogin: function(){ 
    	   if(isAuthenticated){ 
 var params = {nameParam : $(USERNAME_INPUT_ID).value}; 
             WL.NativePage.show('MainViewController', backFromNativePage, params); 
    	   } 
       } 

    }; 
 }(); 

在 auth.js 中通過調用 DemoLoginAdapter 适配器去驗證用戶信息,登錄驗證成功後會由 Web 頁面跳轉到 Native 的 MainViewController 的頁面。

切換到 Xcode 開發環境

我們知道 Worklight Studio 是不支持 iOS Native 開發的,但它可以借助 Xcode 來完成。


圖 7. 調用 Xcode 打開項目
圖 7. 調用 Xcode 打開項目

在 iPad 的圖標節點上,點擊右鍵,Run As > Xcode project,Worklight Studio 會自動幫我們打開 Xcode。


圖 8. Xcode 中項目設置
圖 8. Xcode 中項目設置

在 Xcode 中根據實際項目情況來設置標識、版本、部署的系統等等信息。


圖 9. worklight.plist
圖 9. worklight.plist

在 worklight.plist 中設置 Worklight Server 的地址及端口。

Objective-C 調用 Worklight 适配器

在 Xcode 中創建 WLClientManager 和 WLClientInitDelegate 兩個類,用來初始化 WLClient 和調用适配器。


清單 8. WLClientManager.m
				  
 #import "WLClientManager.h"
 #import "WLClientInitDelegate.h"
 @implementation WLClientManager 
 static WLClient * sharedClient; 
 +(WLClient *)sharedWLClient 
 { 
    @synchronized(self){ 
        if (sharedClient == nil) { 
            sharedClient = [[[WLClient alloc]init] autorelease]; 
        } 
        return sharedClient; 
    } 
 } 

 +(void) invokeProcedure:(WLProcedureInvocationData *) 
 invocationData withWLCookieExtractor:(WLCookieExtractor *)cookieExtractor 
  withDelegate:(id <WLDelegate>)delegate 
 { 
    WLClientInitDelegate *wlClientInitDelegate 
    = [[WLClientInitDelegate alloc]initWithInvokeProcedure:invocationData 
    withInvokeProcedureDelegate:delegate];    
    [[WLClientManager sharedWLClient] 
    wlConnectWithDelegate:wlClientInitDelegate cookieExtractor:cookieExtractor];    
    [wlClientInitDelegate release]; 
 } 
 @end 


清單 9. WLClientInitDelegate.m
				  
 -(id) initWithInvokeProcedure:(WLProcedureInvocationData *) 
 invocationData withInvokeProcedureDelegate:(id <WLDelegate>)delegate 
 { 
    self = [super init]; 
    if (self) { 
        // Initialization code. 
        self._invocationData = invocationData; 
        self._delegate = delegate; 
    } 
    return self; 
 } 
 -(void)onSuccess:(WLResponse *)response{ 
    [[WLClientManager sharedWLClient] 
    invokeProcedure:_invocationData withDelegate:_delegate]; 
 } 
 -(void)onFailure:(WLFailResponse *)response{ 
    if([_delegate respondsToSelector: @selector(onFailure:)]){ 
        
        [_delegate onFailure:response]; 
    } 
 } 


清單 10. 調用 DemoLoginAdapter 适配器
				  
 MyAppDelegate *_appDelegate 
    = (MyAppDelegate *)[[UIApplication sharedApplication] delegate]; 
 WLCookieExtractor *cookieExtractor 
  = [[WLCookieExtractor alloc]initWithWebView:[_appDelegate getWebView]]; 
 WLProcedureInvocationData *invocationData 
     = [[WLProcedureInvocationData alloc] initWithAdapterName:@"DemoLoginAdapter"
       procedureName:@"getFriendData"]; 
 NSArray *parameters = [NSArray arrayWithObject:friendId]; 
 [invocationData setParameters:parameters]; 
 [WLClientManager invokeProcedure:invocationData 
 withWLCookieExtractor: cookieExtractor withDelegate:self ]; 
 [invocationData release]; 

需要注意的是,Objective-C 初始化的 WLClient 需要與登錄驗證時 WLClient 的 Seesion 保持一致,才能夠正常調用被保護的 getFriendData 過程。通過代碼可以看出來是通過登錄頁面的 Cookie 來確保 WLClient 的 Session 一致的。


清單 11. 接收适配器返回的數據
				  
 -(void)onSuccess:(WLResponse *)response{ 
    NSLog(@"DemoLoginAdapter ProcedureInvocationDelegate >> onSuccess"); 
    // 在 response 中存有返回的數據,可以根據具體需求使用這些數據。
 } 

 -(void)onFailure:(WLFailResponse *)response{ 
 NSLog(@"DemoLoginAdapter ProcedureInvocationDelegate >> onFailure"); 
 // 調用過程異常,這裏實現異常的處理
 } 

實現 WLDelegate 中的 onSuccess 和 onFailure,接收适配器返回的數據。


部署應用程序

部署程序到 Worklight Server 上


圖 10. 編譯和部署
圖 10. 編譯和部署

在 Protal 節點上,點擊右鍵,Run As > Build All and Deploy,Worklight Studio 把應用編譯部署到 Worklight Server 上。


圖 11. Worklight Console 中查看 Protal
圖 11. Worklight Console 中查看 Protal

通過 Worklight 控制台可以查看應用是否已經正確部署到 Worklight Server 上。

部署應用程序到 iPad 上

通過 Xcode 將 iPad 程序發布到蘋果應用商店或企業自有應用商店,供任意 iPad 購買安裝,或是直接安裝到與開發者账號绑定的 iPad 上。


圖 12. iPad 自定義 Worklight Server URL
圖 12. iPad 自定義 Worklight Server URL

Worklight 提供了在程序設置裏面更改 Worklight Server URL 方法,當 Worklight Server 地址或端口有變動時可以方便用戶修改。


結束語

關於使用 IBM Worklight 開發 iPad 應用的介紹到此就結束了,希望本篇文章能夠對您的了解 IBM Worklight 的開發有所幫助和启發。


頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發表評論
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
評價:
表情:
驗證碼:點擊我更換圖片
欄目列表
推薦內容