CODEWITHSUNDEEP
javascriptgwt
ianmayo
ianmayo

Reputation: 2402

Strategy for reusing GWT DatePicker in Javascript algorithm

in my GWT application I use a Javascript library to provide users with a SQL Where string builder capability - used to support 'advanced search'.

The javascript sources currently just provide a plain html text field for the date. If I was in pure JS I'd incorporate one of the many 3rd party date selector libraries.

But, I've already got the GWT date-editor there in the client (to support other UI capabilities).

Can anyone recommend a strategy for incorporating the GWT popup editor in my legacy javascript? Because of GWT compiler obfuscation I don't think I can reliably predict the name of the GWT date editor component classes.

I suppose it's a balance between pushing the config from GWT, or pulling from the javascript sources.

cheers, Ian

Upvotes: 4

Views: 1044

Answers (1)

Chris Ruffalo
Chris Ruffalo

Reputation: 1913

First, create in your html the place where you want the date picker to go, like so:

<span id="dateBox"/>

Create a new entry point, called something like 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, something like 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've done this you'll need to do the standard GWT dance to add the compiled code to your HTML. Your final HTML should look something like:

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

There will be a form item (text input box) in your form now with the id of 'dateValueField'. This will submit just like a regular form element.

So, some of this advice should be able to get you on your way. Good luck.

Note, there are some smaller and easier javascript libraries (including some jQuery stuff) that can do this much easier.

Upvotes: 5

Related Questions