Geek Answers Handbook

GWT DatePicker Reuse Strategy in Javascript

in my GWT application, I use the Javascript library to provide users with the SQL Where string builder function used to support advanced search.

Javascript sources currently just provide a simple html text field for the date. If I were in pure JS, I would include one of many third-party date picker libraries.

But I already have a GWT date editor on the client (to support other user interface features).

Can anyone recommend a strategy for including a GWT popup editor in my old javascript? Due to obfuscation of the GWT compiler, I don’t think I can reliably predict the name classes of the components of the GWT date editor.

I believe this is a balance between pushing a configuration from GWT or pulling from javascript sources.

amuses Ian

+4
source share
1 answer

First, create a place in your html where you want the date picker to go, for example:

<span id="dateBox"/>

Create a new entry point called 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); } }

You should probably put this in a new module, for example 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>

Now that you have done this, you will need to do a standard GWT dance to add the compiled code to your HTML. Your last HTML should look something like this:

 <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>

Your form will now have a form element (text input field) with the identifier 'dateValueField'. This will be the same as a regular form element.

So, some of these tips should be able to help you. Good luck.

Please note that there are several smaller and simpler javascript libraries (including some jQuery materials) that can make this a lot easier.

+4
source

More articles:


All Articles