当前位置: 首页 > 工具软件 > Worklight > 使用案例 >

IBM Worklight

徐嘉勋
2023-12-01

App用HTML,CSS和Javascript写成,之后被扩展成桌面的(Windows,Mac,Linux),互联网的(Facebook等),本地移动设备上的(iOS,Android,RIM和Windows Phone)应用程序。开发者还能把一些流行的Javascript构架如jQuery Mobile,Sencha和Dojo整合到Worklight中。而且App的本地运行时也能用本地代码来编写和修改。

安装和设置

  • 安装 eclipse : 解压 eclipse-standard-kepler-SR1-win32-x86_64_001.zip
  • 安装 Worklight打开Eclipse -> help -> Intrall New Software -> ADD -> Name (填写: Worklight Studio) -> Location (选择iws_update_site_wde.6.1.0.zip 包) -> IBM Worklight Studio Development Tools -> Next
  • 安装 Android SDK 步骤同上, Name 填写 ADT Plugin -> Location 选择 ADT-21.0.1.zip 包 -> Developer Tools -> Next
  • 关联 AVD Manager : 解压 android-sdk_r21-windows.zip -> Windows -> Preferences -> Android -> SDK Location 选择之前解压的文件的文件夹 C:\Users\IBM_ADMIN\Documents\LiuFei\software\worklight\android-sdk-windows -> OK
  • 打开之前解压文件的 SDK Manager 下载 Android 4.0.3 , Android 2.2 , Android SDK Platform-tools
  • 开始在 Eclipse 安装中创建项目和工作之 前,请选择 Window -> Preferences -> General -> Workspace -> Text file encoding -> Other -> ,将文本文件编码 更改 为 UTF - 8 。
  • Body 元素必须有 id = "content" 属性
  • initOptions.js 文件包含 Worklight 框架初始化设置
  • 运行 Run As -> Build All and Deploy
  • 添加android 环境之后, 新生成的工程会有一个叉, 在新工程的地方右键 -> Preferences -> android -> 选择一个 Android 4.0.3

建立程序

过程

  • 创建项目 : Configure JavaScript Libraries -> Add jQuery Mobile (这个是个框架) -> 选择路径 (C:\Users\IBM_ADMIN\Documents\LiuFei\software\worklight\jquery_mobile\jquery.mobile-1.4.2)-> 选择 image, jquery.mobile-1.4.2.css,jquery.mobile-1.4.2.js
  • 发布到 WL server : 到app 的文件夹 run as 选第一个 run on worklight Development server , 之后点击该链接浏览
    这块我们在本地的测试的时候不用再次发布(run),直接点击save 之后 就可以在本地预览了
  • 创建运行环境:Android, IOS 等, 要在你的 App 的名字的文件夹右键,新建环境 -- (添加安卓环境之后 它会有一个 叉 此时在安卓程序下面 右键 属性 android 选择一个 SDK (4.0.3))
  • 添加 Adapter : 在Adapter 文件夹点击右键 新建Adapter
    Adapter type 选择 http adapter (这个是目前最常用的);
    随便器一个Adapter的名字,下面的复选框先不用选
    Adapter 的作用 : 1帮助我们跨域请求资源,跨域就是不同网站之间的数据的抓取 2.安全, 由于我们的Adapter 的配置文件时在服务器上的, 所以在用户端查看源码的时候只能看到Adapter 的名字, 具体的它里面的数据源是什么, 在那里, 都是在服务器端的 用户是看不到的, 除非是有服务器的管理员权限, 并且还要反编译 才能看到具体的 Adapter 里面的配置的情况
  • 找数据资源在百度搜索 163 rss 或者其他的 rss 去订阅一个网站
  • 配置Adapter (测试 -> 先run 第一个 再run 第三个)
  • 前端取数据
  • Run as Android app 就会在手机上测试
     news-impl.js
        function getStories(interest) {
        path = getPath(interest);
        
        var input = {
            method : 'get',
            returnedContentType : 'xml',
            path : path
        };
        
        
        return WL.Server.invokeHttp(input);
    }
    
    function getStoriesFiltered(interest) {
        path = getPath(interest);
        
        var input = {
            method : 'get',
            returnedContentType : 'xml',
            path : path,
            transformation : {
                type : 'xslFile',
                xslFile : 'filtered.xsl'
            }
        };
        
        return WL.Server.invokeHttp(input);
    }
    
    
    
    function getPath(interest) {
        if (interest == undefined || interest == '') {
            interest = 'gn';
        }
        return '/special/00011K6L/rss_' + interest + '.xml';
    }
    
        
        
    News.xml
        
        <connectionPolicy xsi:type="http:HTTPConnectionPolicyType">
                <protocol>http</protocol>
                <domain>news.163.com</domain>
                <port>80</port> 
                <!-- Following properties used by adapter's key manager for choosing specific certificate from key store  
                <sslCertificateAlias></sslCertificateAlias> 
                <sslCertificatePassword></sslCertificatePassword>
                -->     
            </connectionPolicy>
    
    index.html<ul id="news" data-role="listview">
                
                </ul>
    
                main.js
                var invocationData = {
            adapter : 'news',
            procedure : 'getStoriesFiltered',
            parameters : ['gn']
        };
        
         
         WL.Client.invokeProcedure(invocationData, {  
               onSuccess : getNationListSuccess,  
               onFailure : getNationListFailure  
           });  
    
     function getNationListSuccess(response)
     {
         var items = response.invocationResult.Items;
                              
         
         for (var i = 0; i < items.length; i++)
             {
             $("#news").append('<li><a href="' + items[i].link + '">' + items[i].title + '</a></li>');
             $("#news").listview("refresh");
             }
     }
     
     function getNationListFailure(response)
     {}

    Tips:

  • 手机测试: Window-SDK Manager - 下载 Google USB Driver
  • Window- Customer - 第三个 tab 能添加出来 SDK Manager
  • Error:Failed to deploy the application to Worklight server: please verify that the Worklight server is started and reachable.Connection to - 9.115.28.52:10080 failed. (Connection to http://9.115.28.52:10080 refused)
    FWLPL0010W: "localhost" was detected from the target server configuration. Using the primary IP address of the host machine, 9.115.24.96, to build the Worklight application(s). Consider using a fully qualified hostname (avoid using "localhost") or a valid IP address instead. The value can be modified by opening the configuration editor of Worklight Development Server from the "Servers" view.
    R.java was modified manually! Reverting to generated version!

    点击 project -> clean
  • Icon

    几种大小的图标分别放置在项目的res目录下的几个子目录中,目录和图标大小分别是:

  • drawable-xhdpi 96*96
  • drawable-mdpi 48*48
  • drawable-ldpi 36*36
  • drawable-hdpi 72*72
 类似资料:

相关阅读

相关文章

相关问答