使用java的browser+html+js编写简易版excel桌面应用程序（一）

前言：java是能够开发桌面应用程序的，如swing，可是由于界面并不美观且老是为控件大小坐标操心。不搞事不舒服司机就要改造车。怎么改进swing巨丑的界面，而且能够更简单，用更少的时间。html+js这对搭档无疑是一个很好的选择，可是html+js只能在浏览器里使用，那么就要祭出一个法宝swt的browser控件，这是什么东东呢，简单来讲就是内嵌浏览器。这样一来其实开发出来的东西就是一款定制版的浏览器。

首先准备一份数据

设计一个界面

第三步将这个页面放进browser里让他看起来像一个桌面应用程序

package min;

import java.io.*;
import java.net.HttpURLConnection;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.Properties;
import org.eclipse.swt.SWT;
import org.eclipse.swt.browser.Browser;
import org.eclipse.swt.browser.BrowserFunction;
import org.eclipse.swt.layout.FormAttachment;
import org.eclipse.swt.layout.FormData;
import org.eclipse.swt.layout.FormLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Combo;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
 * This class implements a web browser
 */
public class client {


    private Button button;
    private Combo url;
    private Browser browser;
    private static HttpURLConnection conn = null;
    /**
     * Runs the application
     *
     * the initial location to display
     */
    public void run() {

        Display display = new Display();
        Shell shell = new Shell(display);
        shell.setText("bgammn v1.0");
        createContents(shell);
        shell.open();
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) {
                display.sleep();
            }
        }
        display.dispose();
    }

    /**
     * Creates the main window's contents
     *
     * @param shell
     * the main window

     * the initial location
     */
    public void createContents(Shell shell) {
        shell.setLayout(new FormLayout());

       /* Composite controls = new Composite(shell, SWT.NONE);*/
        FormData data = new FormData();
        browser = new Browser(shell, SWT.BORDER);
        data.top = new FormAttachment(0,0);
        data.left = new FormAttachment(0, 0);
        data.right = new FormAttachment(100, 0);
        data.bottom = new FormAttachment(100, 0);
        browser.setLayoutData(data);

      /*  controls.setLayout(new GridLayout(7, false));*/

       /* url = new Combo(controls, SWT.ARROW_DOWN);*/
       /* url.setLayoutData(new GridData(496, SWT.DEFAULT));
        url.setFocus();*/
        browser.setUrl(client.class.getResource("")+"index.html");
     

    }

    public static void main(String[] args) {
        new client().run();

    }
}

运行，一个界面优美的桌面应用就新鲜出炉了

but还有一个重要的地方如何交互？好比界面显示的数据如何从java传递给js，用户作出的动做js如何传递给java处理？

新建一个properties

java读取到这个值如何传递给界面显示出来

新建读取properties工具类

class toolProperties {
        private Properties pro;
        private String path;
        public toolProperties(String path){
            this.path=path;
            Properties pro=new Properties();
            try {
                InputStream is = new BufferedInputStream(new FileInputStream(path));
                BufferedReader in = new BufferedReader(new InputStreamReader(is,"UTF-8"));
                pro.load(in);
                this.pro=pro;
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        public String getNode(String nodeName){
            return pro.getProperty(nodeName);
        }
        public int saveNode(String nodeName,String nodeVale){
            pro.setProperty(nodeName,nodeVale);
            try {
                FileOutputStream fre=new FileOutputStream(path);
                pro.store(fre,"success");
                fre.close();
                return 1;
            } catch (IOException e) {
                return 0;
            }
        }
        public Map<String,String> getAllNodes(){
            Map<String,String> nodes=new LinkedHashMap<String, String>();
            for(String key:pro.stringPropertyNames()){
                nodes.put(key,pro.getProperty(key));
            }
            return nodes;
        }
    }

读取

new BrowserFunction(browser, "load"){
            @Override
            public Object function(Object[] arguments) {
                System.out.println(1);
                String table=new client().new toolProperties(tablePath).getNode("tableName");
                browser.execute("var option=new Array()");
                for(String opt:table.split("~")){
                    browser.execute("option.push('"+opt+"')");
                }
                return super.function(arguments);
            }

        };

new BrowserFunction怎么用呢，第一个参数是browser控件，第二个是暴露给js调用的函数名，browser.execute是执行一段js代码。这样在html界面调用load()函数后就会在js里生成一个option参数，里面存放的就是读取的peoperties

能够

下一节将设计所需的数据结构