在Javascript算法中重用GWT DatePicker的策略

Question

在我的GWT应用程序中，我使用Javascript库为用户提供了SQL Where string builder功能-用于支持“高级搜索”。

javascript源代码目前只提供了日期的纯html文本字段。如果我是在纯JS中，我会整合许多第三方日期选择器库中的一个。

但是，我已经在客户机中提供了GWT日期编辑器(以支持其他UI功能)。

有没有人能推荐一种将GWT弹出窗口编辑器整合到我的遗留javascript中的策略？由于GWT编译器的混淆，我认为我不能可靠地预测GWT日期编辑器组件类的名称。

我认为这是从GWT中推送配置，还是从javascript源代码中拉出之间的平衡。

干杯，伊恩

Answer 1

首先，在html中创建日期选择器所在的位置，如下所示：

<span id="dateBox"/>

创建一个新的入口点，称为Integration之类的东西

package com.example.integration.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.datepicker.client.DateBox;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */

public class Integration implements EntryPoint {

   @Override
   public void onModuleLoad() {

    //create date box
    DateBox dateBox = new DateBox();

    //set the value for the form submit
    dateBox.getTextBox().getElement().setId("dateValueField");

    //we need to override the default format
    dateBox.setFormat(new DateBox.DefaultFormat() {

        private DateTimeFormat dtf = DateTimeFormat.getFormat("MM/dd/yyyy");

        @Override
        public void reset(DateBox dateBox, boolean abandon) {
            super.reset(dateBox, abandon);
        }

        @Override
        public Date parse(DateBox dateBox, String text, boolean reportError) {
            return super.parse(dateBox, text, reportError); 
        }

        @Override
        public String format(DateBox dateBox, Date date) {
            if(date == null) return "";
            return this.dtf.format(date);
        }
    });

    //add to the span
    RootPanel.get("dateBox").add(dateBox);
   }
}

您可能应该将其放在一个新的模块中，比如com.example.integration.Integration.gwt.xml。

  <module rename-to='integration'>
    <!-- Inherit the core Web Toolkit stuff.                        -->
    <inherits name='com.google.gwt.user.User'/>

    <inherits name='com.google.gwt.user.theme.clean.Clean'/>

    <!-- Specify the app entry point class.                         -->
    <entry-point class='com.example.integration.client.Integration'/>

    <!-- Specify the paths for translatable code                    -->
    <source path='client'/>
    <source path='shared'/>
  </module>

现在您已经完成了这项工作，接下来需要执行标准的GWT操作，将编译后的代码添加到HTML中。最终的HTML应该如下所示：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="Integration.css">
   <title>Web Application Starter Project</title>

    <script type="text/javascript" language="javascript" src="integration/integration.nocache.js"></script>
  </head>

   <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <form id="form">
        <!-- old style date including formatting javascript and all the old cruft -->
        Old Style Date:<input type="text" id="sometext" value="MM/DD/YYYY"/><br/>

        <!-- new style.  substitute your own styles and whatnot to make it not strange -->
        New Hotness:<span id="dateBox"/>

        <!-- you can submit this form as it is and it will just work (tm) -->
    </form>
  </body>
</html>

现在您的表单中将有一个id为“dateValueField”的表单项目(文本输入框)。这将会像一个常规的表单元素一样提交。

因此，这些建议中的一些应该能够让你上路。祝好运。

注意，有一些更小、更简单的javascript库(包括一些jQuery的东西)可以更容易地做到这一点。