最近两个月以来工作之余一直在做一件事情，就是把现在的产品移植到各主流移动平台上。其实需求很简单，就是想让现有的产品能在各大移动平台上有个端，让客户能移动办公。这个需求大概也是个大众化普遍的需求，于是乎就饶有兴趣地把它当作一个主题比较深入地研究了一下。两个时间自己没事儿就倒腾一下，做了一个像模像样的产品，并覆盖到IOS、Andriod、WebOS、Chrome和Windows Phone(还在开发中)，基本上把跨平台的移动开发这条路探明了一下，这几天就以blog的方式把这两个月的心得和收获总结一下。

移动平台和服务器端的开发还真有很大的差别，现在还没有像Java那样解决服务器端跨平台问题的解决移动端跨平台的方案，但这个跨平台的需求比服务器端更强烈，现在数得出来的主流平台就IOS、Android和WP三条技术路线，并且势均力敌，导致移动产品都起码得覆盖这三个平台。另外传统的B/S优势在移动端不明显，C/S依然是移动端的主流，这必然导致移动开发人员负担很重，Java、C#、Objective-C、C++......，横跨这么多技术路线不是所有人都做得到的。现在看来，比较靠谱的跨平台开发语言就是Javascript，也就只有这个语言是各个平台都原生态支持的。于是乎，Javascript最近几年火爆地不行，市面上也有各种基于Javascript的跨平台方案。总体考察下来，Phonegap+HTML5的组合是一个比较成熟，并且行得通的方案。我这两个月，就是基于这样的总体路线做到了能覆盖几大平台的产品。

但Phonegap+HTML5不是万能的，不是所有类型的产品都适合，通过自己的实际体验，只有那种交互性不强，以信息获取为主的产品比较适合采用这种技术路线。关键问题就是，它没有native来得直接，为了跨品台所带来的性能损耗比较大，无法做出交互性很强，非常流畅高效的应用。因此，别奢望用它来开发很炫的游戏。那些基于HTML5做移动网页游戏的公司，比如UCWeb，做出的东西实在没法和native的游戏相比，限制太多。但用它开发一些信息类应用或企业级向移动端移植的产品是没问题的。因此，这里谈的技术架构和路线也是基于这样的前提，如果是开发游戏类产品，那应该是另外的景象。

废话说了好多，下面来看看如何开始跨平台的移动开发。

撇开产品设计和需求分析不谈，就开发而言，主要要解决两个问题，一是开发平台的搭建。二是解决主要的技术障碍。

开发平台的搭建：

• IOS：Mac+Xcode
• Android：Eclipse+Android SDK
• WP：.net studio
• WebOS：Eclipse+WebOS SDK+VirtualBox
• Chrome：Chrome开发者工具
  
• HTML5：各平台的编辑和调试器

主要的技术障碍及：

• UI：JQuery Mobile等UI组件
• Native化：Phonegap+各平台对HTML5的支持
• 服务器端数据通信：Jetty(HTTP)+Netty(Websocket)
• 移动端数据通信：Ajax(客户端到服务端请求)+Websocket(服务器端向客户端推送)
• 移动端存储：HTML5(Localstorge)+文件系统访问
• 与其他移动产品的整合
• 各平台上产品的包装和项目结构
  
• 安全
• 效率

依旧采用NetBean作为开发IDE，创建一个LwuitGISEngineTutorial项目，将引路蜂地图开发包libgisengine.jar 和LWUIT开发包 LWUIT.jar复制到lib子目录下，并作为外部Jar库文件添加到项目中。将LWUITTheme.res 和 Licence文件guidebee.lic 放在res 子目录下，并将res目录添加到项目中。

为避免重复，就示例共用的代码设计一个基类，MapDemoLWUIT，并从LWUIT库的Form派生一个子类MapCanvas用来显示地图

//------------------------------------------
//                         COPYRIGHT 2011 GUIDEBEE
//                           ALL RIGHTS RESERVED.
//                     GUIDEBEE CONFIDENTIAL PROPRIETARY
///////////////////////////////////// REVISIONS ////////////////////////////////
// Date       Name                 Tracking #         Description
// ---------  -------------------  ----------         --------------------------
// 11FEB2011  James Shen                 	      Initial Creation
////////////////////////////////////////////////////////////////////////////////
//--------------------------------- PACKAGE ------------------------------------
package com.pstreets.gisengine.demo;

//--------------------------------- IMPORTS ------------------------------------
import java.io.IOException;
import javax.microedition.midlet.MIDlet;

import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Image;
import com.sun.lwuit.plaf.UIManager;
import com.sun.lwuit.util.Resources;
import com.sun.lwuit.Graphics;

import com.mapdigit.gis.MapLayer;
import com.mapdigit.gis.drawing.IGraphics;
import com.mapdigit.gis.drawing.IImage;
import com.mapdigit.gis.raster.IMapDrawingListener;
import com.mapdigit.gis.raster.IReaderListener;
import com.mapdigit.gis.raster.MapClient;
import com.mapdigit.gis.raster.MapTileDownloadManager;
import com.mapdigit.licence.LicenceManager;

import com.pstreets.gisengine.demo.lwuit.drawing.LWUITGraphicsFactory;
import com.sun.lwuit.Painter;
import com.sun.lwuit.geom.Rectangle;


//[------------------------------ MAIN CLASS ----------------------------------]
//--------------------------------- REVISIONS ----------------------------------
// Date       Name                 Tracking #         Description
// --------   -------------------  -------------      --------------------------
// 11FEB2011  James Shen                 	      Initial Creation
////////////////////////////////////////////////////////////////////////////////
/**
 * Base class for all Map Demos on LWUIT.
 * <hr><b>© Copyright 2011 Guidebee, Inc. All Rights Reserved.</b>
 * @version     1.00, 11/02/11
 * @author      Guidebee Pty Ltd.
 */
public abstract class MapDemoLWUIT extends MIDlet implements IReaderListener,
        IMapDrawingListener {

    protected MapClient map;
    protected MapTileDownloadManager mapTileDownloadManager;
    protected IImage mapImage;
    protected IGraphics mapGraphics;
    protected MapCanvas canvas;

    public MapDemoLWUIT() {
        try {
            LicenceManager licenceManager = LicenceManager.getInstance();
            long keys[] = {0x34ba283b8daeb659L, -0x53c811f9da86e998L,
            -0x34ba25c3c581521eL, 0xf15df9fc7e45628L, 0x6a4ece44296c0287L,
            0x4ab0cff532902b1cL,};
            licenceManager.addLicence("GuidebeeMap_JavaME", keys);
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

    protected void init() {
        Display.init(this);
        try {
            Resources r = Resources.open("/javaTheme.res");
            UIManager.getInstance().setThemeProps(
                    r.getTheme(r.getThemeResourceNames()[0]));
        } catch (IOException ex) {
            ex.printStackTrace();
        }
        //set the graphics factory
        MapLayer.setAbstractGraphicsFactory(LWUITGraphicsFactory.getInstance());
        mapImage = MapLayer.getAbstractGraphicsFactory()
                .createImage(Display.getInstance().getDisplayWidth(),
                Display.getInstance().getDisplayHeight());
        mapGraphics = mapImage.getGraphics();
        //Create the Digital Map objects.
        mapTileDownloadManager = new MapTileDownloadManager(this);
        map = new MapClient(1024, 1024, mapTileDownloadManager);
        map.setScreenSize(Display.getInstance().getDisplayWidth(),
                Display.getInstance().getDisplayHeight());
        map.start();
        map.setMapDrawingListener(this);
        //Creat the main form.
        canvas = new MapCanvas("Hello world");

    }

    ////////////////////////////////////////////////////////////////////////////
    //--------------------------------- REVISIONS ------------------------------
    // Date       Name                 Tracking #         Description
    // ---------  -------------------  -------------      ----------------------
    // 11FEB2011  James Shen                 	          Initial Creation
    ////////////////////////////////////////////////////////////////////////////
    /**
     * Used instead of using the Resources API to allow us to fetch locally
     * downloaded
     * resources
     *
     * @param name the name of the resource
     * @return a resources object
     */
    public Resources getResource(String name) throws IOException {
        return Resources.open("/" + name + ".res");
    }

    public void pauseApp() {
    }

    public void destroyApp(boolean unconditional) {
        map.stop();
    }

    public void readProgress(int arg0, int arg1) {
        System.out.println(arg0 + "/" + arg1);
    }

    public void done() {
        if (canvas != null) {
            canvas.repaint();
        }
    }

    /**
     * Map canvas class ,a sub class of Form.
     */
    protected class MapCanvas extends Form {


        MapCanvas(String title) {
            super(title);
           
        }

        public void paintBackground(Graphics g){
             map.paint(mapGraphics);
                g.drawImage((Image) mapImage.getNativeImage(), 0,
                    0);
        }

        private void panMap(float x, float y) {
            float dx = x - oldX;
            float dy = y - oldY;
            if (!(dx == 0 && dy == 0)) {
                map.panDirection((int) dx, (int) dy);
            }

        }
        boolean isPan = false;
        private float oldX = -1;
        private float oldY = -1;


        public void pointerDragged(int x, int y) {
            if (isPan) {
                panMap(x, y);
                oldX = x;
                oldY = y;
            }
        }

        public void pointerPressed(int x, int y) {
            oldX = x;
            oldY = y;
            isPan = true;
        }

        public void pointerReleased(int x, int y) {
            oldX = x;
            oldY = y;
            isPan = false;
        }
    }
}

基类MapDemoLWUIT正确设置引路蜂License，并创建RasterMap地图。有了这些基类，第一个地图应用就非常简单，下面的例子显示中国南京地图。地图类型为Bing中国地图，缩放级别为13级。

package com.pstreets.gisengine.demo.lwuit;

//--------------------------------- IMPORTS ------------------------------------
import com.mapdigit.gis.geometry.GeoLatLng;
import com.mapdigit.gis.raster.MapType;
import com.pstreets.gisengine.demo.MapDemoLWUIT;

public class HelloWorldLWUIT extends MapDemoLWUIT {

    public void startApp() {
        init();
        canvas.show();
        GeoLatLng center = new  GeoLatLng(32.0616667, 118.7777778);
        map.setCenter(center, 13, MapType.MICROSOFTCHINA);
    }
   
}

LWUIT 引路蜂地图开发包Ver2.1下载