如何解决在Javascript算法中重用GWT DatePicker的策略
|| 在我的GWT应用程序中,我使用Javascript库为用户提供了sql Where字符串生成器功能-用于支持“高级搜索”。 javascript源当前仅提供纯HTML文本字段作为日期。如果我使用纯JS,则将合并许多第三方日期选择器库之一。 但是,我已经在客户端中有了GWT日期编辑器(以支持其他UI功能)。 谁能推荐将GWT弹出式编辑器合并到我的旧版javascript中的策略?由于存在GWT编译器的混淆,我认为我无法可靠地预测GWT日期编辑器组件类的名称。 我想这是在从GWT推送配置或从javascript源提取配置之间的平衡。 干杯, 伊恩解决方法
首先,在html中创建您希望日期选择器运行的位置,如下所示:
<span id=\"dateBox\"/>
创建一个新的入口点,称为集成
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东西)可以使此操作更加容易。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。