Forneça uma Experiência de Web Móvel Excepcional Utilizando o WebSphere Portal e o IBM Worklight, Parte 2: Integrando suporte a vários dispositivos às páginas do WebSphere Portal

IBM® WebSphere® Portal e as soluções Exceptional Web Experience da IBM lideram o mercado de experiência na web há mais de uma década. O IBM Worklight™ é uma plataforma de aplicativos corporativos nova e completa para entregar aplicativos nativos, híbridos e da web. Este artigo explica como habilitar o suporte para aplicativos Android e iOS durante a ativação da integração do WebSphere Portal e do Worklight. Esse exercício aumenta a amostra apresentada na Parte 1 demonstra como criar um aplicativo iOS e incluir dinamicamente os recursos adequados do Worklight.

Jonathan Lidaka, WebSphere Portal Front-end Engineer, IBM

author photo: Jonathan LidakaJon Lidaka é engenheiro de frontend e trabalha no Laboratório de Desenvolvimento Research Triangle da IBM. Durante o tempo em que participou do desenvolvimento do Portal, contribuiu principalmente para o desenvolvimento de temas, focando na acessibilidade e globalização, e com vários componentes, como os portlets de administração e o integrador de aplicativos da web. Atualmente, é líder da missão de desenvolvimento remoto para o Portal. Jon foi palestrante em diversas conferências da IBM, tratando do design de interfaces com o usuário e otimização de temas do Portal para dispositivos móveis.



26/Nov/2013

Introdução

Obtenha o Worklight agora

Faça o download do IBM Worklight Developer Edition 6.0 agora gratuitamente e sem data de expiração!

A plataforma do IBM Worklight permite a criação de aplicativos para diversos ambientes de dispositivos, incluindo iOS, Android e Blackberry. Com o uso de tecnologias como Apache Cordova, usada e enviada pelo Worklight, é possível chamar recursos nativos por meio de JavaScript™ com a marcação da web.

Este artigo orienta o processo de criação de um a aplicativo iOS híbrido que integra com o IBM WebSphere Portal. Ele discute o processo para determinar o dispositivo que acessou o portal e incluir os recursos adequados (para iOS ou Android) para habilitar o suporte para recursos nativos no aplicativo.

Pré-requisitos

Este artigo aumenta as informações apresentadas na Parte 1 desta série. Conclua a solução amostra da Parte 1 antes de continuar as etapas detalhadas aqui.

Além dos pré-requisitos definidos na Parte 1, é necessário ter Apple Xcode instalado para criar os aplicativos híbridos descritos aqui. Este artigo trata do aplicativo híbrido do Worklight com suporte para Apple iPhone. Essa amostra foi testada com o Apple Xcode versão 4.4.1 e só está disponível para Apple OS X.


Crie o ambiente iOS no Worklight

  1. Para criar um novo ambiente para o iPhone no Worklight, abra o Explorador de Projetos e clique com o botão direito em WLPortalApp na pasta de aplicativos e, em seguida, selecione New > Worklight Environment (Figura 1).
    Figura 1. Crie um novo ambiente Worklight
  2. O painel New Worklight Environment é exibido (Figura 2). Para essa amostra específica, selecione iPhone. Se for necessário criar ambientes para outros dispositivos iOS, como iPad, especifique as opções adicionais nesse painel. Clique no link Finish.
    Figura 2. Ambiente do Worklight exibido no Eclipse
  3. O Worklight Studio atualiza o projeto com um aplicativo nativo para dispositivos iPhone (Figura 3).
    Figura 3. O aplicativo nativo iPhone é adicionado ao projeto
  4. Depois, abra o arquivo de classe principal para o aplicativo nativo do iOS (Figura 4). Ele está localizado em \WLPortal\apps\WLPortalApp\iPhone\native\classes\WLPortalApp.m. Esse é o arquivo que será modificado, de forma semelhante ao arquivo WLPortalApp.java na Parte 1. Todos os aplicativos iOS são escritos em Objective-C (consulte Recursos ).
    Figura 4. O arquivo de classe principal para o aplicativo nativo do iOS
  5. Para exibir o portal no aplicativo iOS, o método ativador deve ser modificado para carregar a URL do portal URL. O método no Worklight versão 5.0.5 que será modificado é chamado didFinishLaunchingWithOptions (Listagem 1a), e na versão 5.0.6 é chamado didFinishWLNativeInit (Listagem 1b). Basicamente, o método ativa um arquivo HTML interno que é criado por padrão.
    Listagem 1a. didFinishLaunchingWithOptions method in WLPortalApp.m with Worklight version 5.0.5
    /**
     * This is main kick off after the app inits, the views and Settings are setup here.
     */
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
    (NSDictionary *)launchOptions
    {
        BOOL ret = [super application:application didFinishLaunchingWithOptions:
    launchOptions];
    
        /*
         * If you need to do any extra app-specific initialization, you can do it here.
         **/
        
        return ret;
        }
    Listagem 1b. didFinishLaunchingWithOptions method in WLPortalApp.m with Worklight version 5.0.6
    /**
     * This is main kick off after the app inits, the views and Settings are setup here.
     */
    -(void) didFinishWLNativeInit:(NSNotification *)notification {
        /*
         * If you need to do any extra app-specific initialization, you can do it here.
         * Note: At this point webview is available.
         **/
    }
  6. Substitua o bloco de código na Listagem 1 com o código das Listagens 2a e 2b. O novo código ativará o aplicativo automaticamente em uma visualização da web direcionada ao portal.
    Listagem 2a. didFinishLaunchingWithOptions method directing application to Portal URL in Worklight version 5.0.5
    -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
    (NSDictionary *)launchOptions
    {
        BOOL superResult = [super application:application didFinishLaunchingWithOptions:
    launchOptions];
        NSURL* remoteURL = [NSURL URLWithString:@"http://9.99.999.999:10039/wps/portal”];
        NSURLRequest* request = [NSURLRequest requestWithURL:remoteURL];
        [self.viewController.webView loadRequest:request];
        return superResult;
        }
    Listagem 2b. didFinishLaunchingWithOptions method directing application to Portal URL in Worklight version 5.0.6
    /**
     * This is main kick off after the app inits, the views and Settings are setup here.
     */
    -(void) didFinishWLNativeInit:(NSNotification *)notification {
        NSURL* remoteURL = [NSURL URLWithString:@"http://9.99.999.999:10039/wps/portal"];
        NSURLRequest* request = [NSURLRequest requestWithURL:remoteURL];
        [self.viewController.webView loadRequest:request];
    }

    O endereço IP neste exemplo deve ser o endereço do servidor do WebSphere Portal que você quer renderizar no aplicativo híbrido.
  7. Abra o arquivo Cordova.plist (para o Worklight versão 5.0.5) ou worklight.plist (para o Worklight versão 5.0.6) localizado em \WLPortal\apps\WLPortalApp\iphone\native.
  8. Localize a chave de atributo chamada OpenAllWhitelistURLsInWebView e defina-a como “true” (Listagem 3).
    Listagem 3. OpenAllWhitelistURLsInWebView configurado como true
    <key>OpenAllWhitelistURLsInWebView</key>
    <true/>
  9. Agora que o aplicativo foi configurado, verifique se ele foi criado e implementado. Como é possível ver na Figura 5, o comando Build All and Deploy indica que os aplicativos nativos serão reimplementados com base nas alterações do aplicativo da web. Execute o comando Build All and Deploy clicando com o botão direito no aplicativo e selecionando Run As > Build All and Deploy.
    Figura 5. Selecionando build and deploy
  10. Quando o processo de desenvolvimento começa, é possível ver o progresso no banner de status no canto inferior direito do Eclipse. Quando o processo concluir, você deverá ver a mensagem Application 'YourApp' deployed successfully with all environments no console do Worklight. Aplicativos iOS e Android foram atualizados.
  11. A seguir, visualize o aplicativo no simulador iOS. Para isso, clique com o botão direito em iphone , no projeto no Eclipse, e selecione Run as > Xcode project (Figura 6). Isso ativará o Xcode, e o aplicativo será exibido no console (Figura 7).
    Figura 6. Executando o aplicativo como projeto Xcode
    Figura 7. O aplicativo exibido no Xcode
  12. Depois de criar o aplicativo para dispositivos iPhone, altere o simulador para iPhone clicando na seta para baixo, próxima ao ícone Run, na parte superior esquerda do console, e selecione iPhone 5.1 Simulator (Figura 8).
    Figura 8. Alteração do simulador para iPhone
  13. Selecione o ícone Run na parte superior esquerda (Figura 9). O simulador ativará o aplicativo (Figura 10).
    Figura 9. O botão Run no Xcode
    Figura 10. O aplicativo em execução no simulador do iPhone

Atualize o tema do WebSphere Portal para iOS e Android

Agora, o tema do WebSphere Portal exige uma atualização para identificar o sistema operacional do dispositivo móvel e incluir o conjunto de arquivos correto para realizar o pull nos recursos do Worklight. A identificação do sistema operacional de dispositivos móveis será determinada pelo mecanismo de classe do dispositivo no WebSphere Portal. Os clientes de smartphone prontos para uso para Android e iOS são combinados em uma classe de dispositivo chamada smartphone. É necessário separar os clientes para carregar os recursos com base no sistema operacional.

  1. Para atualizar o cliente para iPhone para que não seja identificado como Android, execute o script xmlaccess na Listagem 4.
    Listagem 4. Script XMLAccess para alterar a classe de dispositivo para iPhone e Android Mobile
    <?xml version="1.0" encoding="UTF-8"?>
    <request type="update"
    		 version="8.0.0.0"
    		 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    		 xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
        <portal action="locate">
            <client action="update" domain="rel" manufacturer="Apple" markup="html"
    uniquename="wps.client.iphone">
                <useragent-pattern>.*iPhone.*</useragent-pattern>
    	<client-capability update="remove">com.ibm.portal.devicesupport.deviceclass=
    smartphone</client-capability>
    	<client-capability update="set">com.ibm.portal.devicesupport.deviceclass=
    smartphone-ios</client-capability>     	
                <client-capability update="set">HTML_4_0</client-capability>
            </client>
        </portal>
    </request>

    Se antes você estava usando a classe de dispositivo smartphone, será necessário atualizar qualquer modelo lógico ou estático customizado para usar a nova classe smartphone-ios.
  2. Na Parte 1, criamos um tema customizado, e parte disso foi a criação de um novo aplicativo da web EAR que incluía recursos dinâmicos customizados. Abra o arquivo head.jsp , localizado em /<wp_profile>/installedApps/<node>/<custom_ear>/<custom_war>/themes/html/dynamicSpots/. No final do arquivo head.jsp file, adicione o código na Listagem 5, que recuperará a classe do dispositivo e a configurará como uma variável JSP.
    Listagem 5. Recuperação da classe do dispositivo
    <c:set var="deviceClass" scope="request" value="${wp.clientProfile['DeviceClass']}"
    />
  3. Depois da linha de código para recuperar a classe do dispositivo, use as informações recuperadas para verificar dispositivos smartphone iOS ou Android (Listagem 6).
    Listagem 6. Lógica para verificar smartphones iOS ou Android
    <c:if test="${deviceClass == 'smartphone'}">
    <!--android devices -->
    <c:if test="${deviceClass == 'smartphone-ios'}">
    <!--ios devices -->
    </c:if>
  4. Agora que o tema está pronto para determinar o dispositivo que acessa o portal, é possível mover os arquivos iOS específicos do Worklight para o WebSphere Portal. Muitos arquivos usados na Parte 1 serão os mesmos entre os dispositivos, mas os que não serão compartilhados incluem o namespace ios. O arquivo que define o JavaScript que deve ser incluído ao WebSphere Portal é WLPortalApp.html, localizado em \WLPortal\apps\WLPortalApp\iphone\native\www\default\.
  5. O primeiro arquivo a ser criado especificamente para iPhone é o arquivo de propriedades estáticas. As propriedades estáticas são definidas na parte superior do arquivo HTML (Listagem 7).
    Listagem 7. Propriedades estáticas para dispositivos iPhone
    	var WL = WL ? WL : {};
    
    	/**
    	 * WLClient configuration variables.
    	 * Values are injected by the deployer that packs the gadget.
    	 */
    
    	 WL.StaticAppProps = {
    	"APP_DISPLAY_NAME": "WLPortalApp",
    	"APP_SERVICES_URL": "\/apps\/services\/",
    	"APP_VERSION": "1.0",
    	"ENVIRONMENT": "iphone",
    	"LOGIN_DISPLAY_TYPE": "embedded",
    	"WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/WLPortalApp\/iphone\/"
    };
  6. Pegue o JavaScript desse arquivo HTML (Listagem 7) e o inclua em uma forma utilizável e um novo arquivo JavaScript chamado staticprops.ios.js. Coloque o novo arquivo nesse local: fs-type1:themes/<customTheme>/worklight/common/js/ (Figura 11).
    Figura 11. O novo arquivo staticprops.ios.js é criado
  7. Outro arquivo que deve ser renomeado e copiado para a pasta comum do JavaScript é wlcommon.js, localizado em: \WLPortal\apps\WLPortalApp\iphone\native\www\default\common\js\.
    Figura 12. wlcommon.js renomeado para ser específico para iOS
  8. O próximo conjunto de arquivos que deve ser copiado do Worklight para o Portal está localizado na pasta wlclient. Esses arquivos devem ser renomeados com o namespace “ios”:
    • checksum.js
    • cordova.js
    Esses arquivos, localizados em: \WLPortal\apps\WLPortalApp\iphone\native\www\default\wlclient\js\, podem ser copiados no estado em que se encontram:
    • json2.js
    • wpgap.ios.js
    Depois de concluir a renomeação, copie os quatro arquivos para o WebSphere nesse local:fs-type1:themes/<customTheme>/worklight/wlclient/js/.
    Figura 13. Os novos arquivos na pasta wlclient JavaScript
  9. Agora, todos os arquivos necessários para a API do Worklight estão no local e devem ser incluídos à página, com base no dispositivo que acessa o WebSphere Portal. O JavaScript que deve ser incluído para Android pode ser obtido diretamente do módulo wl_client criado na Parte 1. A adição do script adequado inclui elementos em head.jsp para dispositivos móveis Android (Listagem 8).
    Listagem 8. JavaScript para dispositivos móveis Android adicionados a head.jsp
    <c:if test="${deviceClass == 'smartphone'}">
    <!--android devices -->
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/staticprops.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/cordova.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wljq.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/base.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/messages.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wlcommon.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/diagnosticDialog.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/deviceAuthentication.js"
    allowRelativeURL="true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/window.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/worklight.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlclient.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlfragments.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/encryptedcache.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/checksum.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlgap.android.js" allowRelativeURL="
    true" mode="download" lateBinding="false"/>'></script>
    </c:if>
  10. A seguir, adicione o JavaScript adequado para dispositivos iOS a head.jsp. Essa é, basicamente, a mesma listagem que a de dispositivos móveis Android, que pode ser verificada com base na inclusão de dispositivos definida em WLPortalApp.html, localizada em \WLPortal\apps\WLPortalApp\iphone\native\www\default\. Entretanto, os arquivos com o namespace “ios” são substituídos por arquivos Android correspondentes, e json2.js foi adicionado (Listagem 9).
    Listagem 9. Javascript para dispositivos móveis iOS adicionados a head.jsp
    <c:if test="${deviceClass == 'smartphone-ios'}">
    <!-- ios devices -->
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/staticprops.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/cordova.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wljq.js" allowRelativeURL="true" mode=
    "download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/base.js" allowRelativeURL="true" mode=
    "download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/messages.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wlcommon.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/diagnosticDialog.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/deviceAuthentication.js"
    allowRelativeURL="true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/window.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/worklight.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlclient.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlfragments.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/encryptedcache.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/checksum.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/json2.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlgap.ios.js" allowRelativeURL="true"
    mode="download" lateBinding="false"/>'></script>
    </c:if>

    Ao partir para a produção, seria útil criar camadas de JavaScript para cada conjunto de arquivos específico de dispositivo. Isso reduziria as solicitações na renderização da página a ajudaria a melhorar o desempenho.
  11. Agora que os arquivos JavaScript para Android foram incluídos por meio do arquivo head.jsp, é necessário remover o módulo wl_client do arquivo profile_worklight.json , localizado em fs-type1:themes/<customTheme>/profiles/.
    Listagem 10. Conjunto de módulos profile_worklight.json originais
    	"moduleIDs": [
    		"wp_theme_portal_80",
    		"wp_portlet_css",
    		"wp_one_ui",
    		"wp_one_ui_dijit",
    		"wp_legacy_layouts",
    		"wp_client_ext",
    		"wp_status_bar",
    		"wp_theme_menus",
    		"wp_theme_skin_region",
    		"wp_theme_high_contrast",
    		"wp_layout_windowstates",
    		"wl_client",
    		"wl_init"
    	],
    Listagem 11. O arquivo profile_worklight.json depois da remoção de wlclient
    	"moduleIDs": [
    		"wp_theme_portal_80",
    		"wp_portlet_css",
    		"wp_one_ui",
    		"wp_one_ui_dijit",
    		"wp_legacy_layouts",
    		"wp_client_ext",
    		"wp_status_bar",
    		"wp_theme_menus",
    		"wp_theme_skin_region",
    		"wp_theme_high_contrast",
    		"wp_layout_windowstates",
    		"wl_init"
    	],
  12. Como o módulo wl_client foi removido do perfil, é necessário remover o pré-requisito do módulo wl_init. Para isso, abra o arquivo de contribuição worklight.json e remova a definição prereq, localizada em fs-type1:themes/<customTheme>/contributions.
    Listagem 12. Definição de módulo wl_init module original
    {
    	"id":"wl_init",
    	"prereqs":[{
    		"id":"wl_client"
    	},{
    		"id":"wp_client_main"
    	},{
    		"id":"wp_client_ext"
    	}],
    	"contributions":[{
    		"type":"config",
    		"sub-contributions":[{
    			"type":"js",
    			"uris":[{
    				"value":"/worklight/common/js/init.js"
    			}]
    		}]
    	}]
    }
    Listagem 13. O módulo wl_init com o prereq wl_client removido
    {
    		"id":"wl_init",
    		"prereqs":[
    		{
    			"id":"wp_client_main"
    		},{
    			"id":"wp_client_ext"
    		}],
    		"contributions":[{
    			"type":"config",
    			"sub-contributions":[{
    				"type":"js",
    				"uris":[{
    					"value":"/worklight/common/js/init.js"
    				}
    				]
    			}]
    		}]
    	}

Tudo está no lugar para que o portal detecte o dispositivo que acessa o WebSphere Portal e inclua o conjunto de arquivos necessários para integrar corretamente com o Worklight.


Teste o aplicativo

Como esse exercício é uma continuação da Parte 1, já há uma amostra pronta para testar a API do Worklight. Ela exibirá o nome e a versão do dispositivo na parte superior da página. O teste confirmará se essas informações são exibidas corretamente para o emulador Android e o simulador iOS.

  1. Mais uma vez, desenvolva e implemente o aplicativo clicando com o botão direito no aplicativo e selecionando Build All and Deploy. É possível ver o progresso no banner de status no canto inferior direito do Eclipse.
  2. Quando o processo estiver concluído, clique com o botão direito em WLPortalWLPortalAppAndroid e selecione Run As... > Android Application. Isso ativará o emulador Android, e o aplicativo exibirá o WebSphere Portal.
  3. Depois que o aplicativo renderizar aplicativo do WebSphere Portal, acesse a página na qual o tema customizado e o perfil do Worklight foram aplicados. Se ela não tiver acesso anônimo, faça o login e acesse-a. Leva alguns minutos para carregar as configurações do dispositivo, mas elas aparecerão na parte superior da página, como mostra a Figura 14.
    Figura 14. O emulador Android exibido no Portal com a amostra da API do Worklight
  4. Clique com o botão direito em iphone , em WLPortalApp, e selecione Run As > Xcode project. Isso ativará o aplicativo Xcode. Será necessário executá-lo no simulador iOS. Depois de executá-lo, o aplicativo exibirá o WebSphere Portal.
  5. Depois que o aplicativo renderizar aplicativo do WebSphere Portal, mais uma vez, acesse a página na qual o tema customizado e o perfil do Worklight foram aplicados. O nome do dispositivo e da versão serão exibidos na parte superior da página, como mostra a Figura 15.
    Figura 15. Simulador iOS exibindo o WebSphere Portal com a API do Worklight

Conclusão

O IBM WebSphere Portal facilita a customização de recursos de dispositivos nativos disponíveis para aplicativos da web de diversos canais. O shell do Worklight criado para Android e iOS também pode ser empacotado em de forma distribuível para que possa ser publicado na app store ou implementado pelo MDM, se necessário. Como resultado, obtêm-se recursos de gerenciamento de website de diversos canais estendidos para incluir serviços de dispositivos nativos customizados para diversos dispositivos. Os próximos artigos da série discutirão a configuração para autenticação de conexão única e integração do Worklight e da Web Exeperience Factory, respectivamente.


Download

DescriçãoNomeTamanho
Sample applicationPart2-sample_files.zip9 KB

Recursos

Aprender

Obter produtos e tecnologias

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Rational, Desenvolvimento móvel
ArticleID=848567
ArticleTitle=Forneça uma Experiência de Web Móvel Excepcional Utilizando o WebSphere Portal e o IBM Worklight, Parte 2: Integrando suporte a vários dispositivos às páginas do WebSphere Portal
publish-date=11262013