Question

在我的GWT应用程序中，我使用Javascript库为用户提供SQL Where字符串构建器功能 - 用于支持“高级搜索”。

javascript源目前只提供日期的简单html文本字段。如果我使用纯JS，我会使用许多第三方日期选择器库中的一个。

但是，我已经在客户端获得了GWT日期编辑器（以支持其他UI功能）。

有人可以推荐在我的旧版javascript中加入GWT弹出编辑器的策略吗？由于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的东西）可以更容易地做到这一点。

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

1 个答案: