Google Web Toolkit搭建Web扫描应用

小鱼儿 2022-01-14 18:03 415阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

GWT （Google Web Toolkit）帮助开发者使用Java来开发复杂的JavaScript应用。很多出色的产品，如Google AdSense，Google AdWords等都是使用GWT开发的。这里介绍下如何创建第一个GWT应用,以及如何通过GWT来创建一个简单的Web扫描应用。

![17150809\_z5u5.png][17150809_z5u5.png]

参考原文：[Building Web Scanning Applications with GWT][]

## GWT下载安装    ##

使用[Eclipse][]\+GWT插件来搭建开发环境。请确认系统是否安装了[JDK 7][]。

*  Eclipse 4.4 (Luna) > https://dl.google.com/eclipse/plugin/4.4  
    
 *  Eclipse 4.3 (Kepler) > https://dl.google.com/eclipse/plugin/4.3
 *  Eclipse 3.8/4.2 (Juno) > https://dl.google.com/eclipse/plugin/4.2

插件安装方法：

1.  运行Eclipse  
    
2.  点击**Help > Install New Software…**
3.  点击**Add…**，添加地址**http://dl.google.com/eclipse/plugin/4.4**
4.  选择**Google plugin for Eclipse**, **GWT Designer for GPE，****SDKs![17150811\_txgV.png][17150811_txgV.png]**

## 创建第一个GWT应用    ##

点击插件按钮，创建一个工程**WebTwainDemo**：

![17150812\_dkXb.png][17150812_dkXb.png]

输入包名**com.dynamsoft.sample.WebTwainDemo**：

![17150812\_UGOP.png][17150812_UGOP.png]

现在运行应用。在第一次运行的时候，会看到Chrome需要安装插件：

![17150812\_xHrb.png][17150812_xHrb.png]

安装之后刷新页面，程序可以正常运行了：

![17150813\_q4oe.png][17150813_q4oe.png]

## 使用GWT和DWT创建Web扫描应用    ##

找到Dynamic Web TWAIN的安装目录**\{Dynamic Web TWAIN Installation Path\}\\Dynamic Web TWAIN SDK 10.1.1 Trial\\Samples\\Getting Started**。拷贝Resources目录到工程的war目录下。接下来做一些代码修改。

### WebTwainDemo.html ###

包含两个js资源文件：

添加DWT容器：

<div id="dwtcontrolContainer"></div>

添加按钮容器：

<div id="scanButtonContainer"></div>

比较代码可以发现。使用GWT开发，HTML文件中不需要添加按钮元素和JS代码。

### WebTwainDemo.java ###

找到入口函数**onModuleLoad()**，创建一个按钮实例：

final Button scanButton = new Button("Scan");
    scanButton.addStyleName("scanButton");
    RootPanel.get("scanButtonContainer").add(scanButton);
     
    class TwainHandler implements ClickHandler {
     
                public void onClick(ClickEvent event) {
                    acquireImage();
                }
     
                private void acquireImage() {
                    nativeAcquireImage();
                }
            }
     
    TwainHandler twainHandler = new TwainHandler();
    scanButton.addClickHandler(twainHandler);

通过[JSNI][]，使用Java调用JavaScript代码：

public static native void nativeAcquireImage() /*-{
            var DWObject = $wnd.Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'.
            DWObject.IfDisableSourceAfterAcquire = true; // Source will be closed automatically after acquisition.
            DWObject.SelectSource(); // Select a Data Source (a device like scanner) from the Data Source Manager.            
            DWObject.OpenSource(); // Open the source. You can set resolution, pixel type, etc. after this method. Please refer to the sample 'Scan' -> 'Custom Scan' for more info.
            DWObject.AcquireImage(); // Acquire image(s) from the Data Source. Please NOTE this is a asynchronous method. In other words, it doesn't wait for the Data Source to come back. 
        }-*/;

现在刷新一下测试页面，扫描应用已经可以运行了。

## 视频    ##

## 源码 ##

[https://github.com/DynamsoftRD/DWT-with-Web-App-Framework/tree/master/gwt][https_github.com_DynamsoftRD_DWT-with-Web-App-Framework_tree_master_gwt]

git clone https://github.com/DynamsoftRD/DWT-with-Web-App-Framework.git

转载于:https://my.oschina.net/yushulx/blog/387972

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/35e7130975da4b3995106b218b4bd2a3.png
[17150809_z5u5.png]: /images/20220114/157e62c1a0df49b6aa02b6e35e073c51.png
[Building Web Scanning Applications with GWT]: http://www.codepool.biz/twain/web-scanning-applications-with-gwt.html
[Eclipse]: http://www.eclipse.org/downloads/
[JDK 7]: https://www.java.com/en/download/
[17150811_txgV.png]: /images/20220114/5128bb8d820c436db7cc0723379972e0.png
[17150812_dkXb.png]: /images/20220114/1e2d82603bf44638afb712023022dd7b.png
[17150812_UGOP.png]: /images/20220114/89d5882882cb43b48bb68cc6c212ffc3.png
[17150812_xHrb.png]: /images/20220114/abfb7a6f79224ed290ec8dc6ddfd87ef.png
[17150813_q4oe.png]: /images/20220114/a97bcbadf3c5458bb3857f4c6a0e04cd.png
[JSNI]: http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html
[https_github.com_DynamsoftRD_DWT-with-Web-App-Framework_tree_master_gwt]: https://github.com/DynamsoftRD/DWT-with-Web-App-Framework/tree/master/gwt