viernes, 20 de julio de 2012

Eclipse Java Code Templates for GWT related code automation

I often develop GWT libraries that port an existing javascript library like for example the raphael4gwt project that ports the javascript drawing library raphael to GWT / Java. I uses a lot of GWT Overlay types for dealing with native javascript objects from Java code.
GWT overlay types are not common java objects, in fact, at runtime, they "overlay" a native javascript object created outside GWT for example a DOM node. In my libraries I discovered that a good way to work with overlay types from java is like the following code.
Suppose I need to overlay a simple javascript object like the following in a java overlay type:
{
  color: "#ededed", 
  dashStyle: "none"
}
(this is an example taken from a real javascript library, YUI 3 - http://yuilibrary.com/yui/docs/api/classes/Circle.html#attr_stroke)
Now wuppose I want to create a GWT overlay type for this Stroke objects. In my experience I would like to define the overlay type, so I can create the same previous javascript object using the following java :
Stroke stroke1 = Stroke.create().
  color("#ededed").
  dashStyle("none");
The overlay type must be something like the following java class:
package org.sgx.yui4gwt.yui.graphic;

import com.google.gwt.core.client.JavaScriptObject;

/**GWT Overlay type for yui graphic stroke objects - 
 * http://yuilibrary.com/yui/docs/api/classes/Circle.html#attr_stroke
 * @author sg
 */
public class Stroke extends JavaScriptObject {

 protected Stroke() {}

 public static final String LINECAP_BUTT = "butt",
   LINECAP_SQUARE = "square", LINECAP_ROUND = "round";
 
 public static final String DASHSTYPE_NONE = "none",
   DASHSTYPE_TODO = "..."; 

 /** static constructor */
 public static final native Stroke create()/*-{
  return {}; 
 }-*/;
 
 /**
  * The color of the stroke.
  * 
  * @return
  */
 public native final String color() /*-{
  return this.color;
 }-*/;

 /**
  * The color of the stroke.
  * 
  * @param val
  * @return this - for setter chaining
  */
 public native final Stroke color(String val) /*-{
  this.color = val;
  return this;
 }-*/;

 /**
  * Number that indicates the width of the stroke.
  * 
  * @return
  */
 public native final double weight() /*-{
  return this.weight;
 }-*/;

 /**
  * Number that indicates the width of the stroke.
  * 
  * @param val
  * @return this - for setter chaining
  */
 public native final Stroke weight(double val) /*-{
  this.weight = val;
  return this;
 }-*/;

 /**
  * Number between 0 and 1 that indicates the opacity of the stroke. The
  * default value is 1.
  * 
  * @return
  */
 public native final double opacity() /*-{
  return this.opacity;
 }-*/;

 /**
  * 
  * @param val
  * @return this - for setter chaining
  */
 public native final Stroke opacity(double val) /*-{
  this.opacity = val;
  return this;
 }-*/;

 /**
  * 
  * @return
  */
 public native final String dashStyle() /*-{
  return this.dashStyle;
 }-*/;

 /**
  * 
  * @param val
  * @return this - for setter chaining
  */
 public native final Stroke dashStyle(String val) /*-{
  this.dashStyle = val; 
  return this; 
 }-*/;
}
And now the fun part. Writing more and more of this kind of overlay types I discovered that I can automate the work with eclipse java code templates. Just create an eclipse java code template going to Preferences->Java->Editor->Templates, and create a new template called "gwtOverlay1" with the following body:
/**
 * 
 * @return
 */
public native final ${attributeType} ${attributeName}() /*-{
 return this.${attributeName}; 
}-*/;
/**
 * 
 * @param val
 * @return this - for setter chaining
 */
public native final ${enclosing_type} ${attributeName}(${attributeType} val) /*-{
 this.${attributeName} = val; 
 return this; 
}-*/;
this way, when you need editing your overlay types in the eclipse java editor, to add another property to your overlay type, just use this template. type "gwt" and press ctrl+space. Choose "gwtOverlay1" and press enter. The template code will generated, and you can refactor the property type and property name.

yuigwt java code templates

In http://code.google.com/p/yuigwt/, where I work 100% with these kind of overlay types, I'm automatizing the Java definition of YUI attributes using getters/setters methods created with Java code templates. This is the template for those cases.
/**
 * 
 * @return
 */
public native final ${type} ${name}() /*-{
return this.get("${name}"); 
}-*/;

/**
 * 
 * @param val
 * @return this - for method chaining
 */
public native final ${enclosing_type} ${name}(${type} val) /*-{
this.set("${name}", val); 
return this; 
}-*/;

UIBinder @UIFactory

When writing YUIGWT with UIBinder (as documented in TODO LINK), if we reference a "YUIBinded" in another "YUIBinded" because "YUIBinded" required to pass a YUIContext as a constructor parameter, it is useful to autogenerate the @UIFactory method. This is a very personal note since I dot think anybody is working with this tech besides me. This is the template:

/**
 * Will be used for creating ${T} instances of this UIBinder widget. 
 * @return a new ${T}
 */
@UiFactory 
public ${T} make${T}() {
 return new ${T}(y); 
}

HTML Minimizator

I had to develop my own HTML code minimization application for my own specific needs, and here I would like to share the experience with the public.I called HTML minimizator and it is available online at htmlminimizator online web page.

A little background - while developing javascvript toolkits porting to Java GWT or to Java2Script frameworks I often need to copy javascript documentation to my javadocs classes comments for documenting java methods or classes that correspond to some javascript function or object.

For this I can copy the HTML sources of the javascript toolkit's documentation,
and paste it directly into the javadoc and it will look the same in generated html javadocs. This is really usefull and let me copy directly from the javascript toolkit documentation htmls.

For this, I want the javadoc size to be the minimun as possible and also I need to erase ALL html attributes like ids, hrefs, etc. Also I would like to eliminate any empty elements

That is what this little application HTML Minimizator try to do. It is a small GWT appilcation that let you paste XML valid code fragment, configure a little options and then get the minimified HTML.

I know there are a lot of HTML minimizators on the web, but none of them do an acceptable work for me, most of all because they won't eliminate attributes.

The project is hosted at https://code.google.com/p/gwteditors/ svn, since it uses my project gwteditors and it is very little for its own project.

For example, for default configuration, an html code like this:

< p>< code>Shape< /code> has the following implementations based on browser capability.< /p>

< ul id="yui_3_5_1_1_1342815626205_173">
    < li>< a href="SVGShape.html">< code>SVGShape< /code>< /a>< /li>
    < li id="yui_3_5_1_1_1342815626205_172">< a id="yui_3_5_1_1_1342815626205_171" href="VMLShape.html">< code>VMLShape< /code>< /a>< /li>
    < li>< a href="CanvasShape.html">< code>CanvasShape< /code>< /a>< /li>
< /ul>
will be minimized to the following html code:
< p>< code>Shape< /code> has the following implementations based on browser capability.< /p>< ul>< li>< a>< 
code>SVGShape< /code>< /a>< /li>< li>< a>< code>VMLShape< /code>< /a>< /li>< li>< a><
 code>CanvasShape< /code>< /a>< /li>< /ul>

lunes, 2 de julio de 2012

Disable all but one html element with jquery

They asked me to be able to disable all the html document but a single html element. Have done this with jquery like the following html snippet. The idea is to add 4 absolute positioned boxed "around" the given element, with big z-index with some transparency:

< !doctype html>
< html lang="es-UY">

< head>
< title>test< /title>
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">< /script>
< /head>
< body>

< script>
/**
 * disablingFocus - disable all the document instead a single element - put 4 masks around the given element
 so it appear that all except that element is disabled. */
var lib = {
 maskStyle: { 
  zIndex: 9998, 
  position: "absolute", 
  display: "block", 
  opacity: 0.5, 
  backgroundColor: "#111111" 
 },  
 mask: null, 
 disableAllBut: function(el) {
  if(!lib.masks) {
   lib.masks=[]; 
   for(var i = 0; i< 4; i++) {
    var maskEl = document.createElement("div"); 
    document.body.appendChild(maskEl); 
    $(maskEl).attr({id: "disableAllButMask"+i});
    $(maskEl).css(lib.maskStyle); 
    lib.masks.push(maskEl)
   }
  }
  var x = $(el).offset().left, 
   y = $(el).offset().top, 
   w = $(el).width(), 
   h = $(el).height(); 
  var maxWidth = 3333, //$(document.body).offset().width, 
   maxHeight = 3333; //$(document.body).offset().height; 
  $(lib.masks[0]).css({
   "left": "0px", "top": "0px", "height": y+"px", "width": maxWidth+"px"
  });
  $(lib.masks[1]).css({
   "left": "0px", "top": (y+h)+"px", "height": maxHeight+"px", "width": maxWidth+"px"
  }); 
  $(lib.masks[2]).css({
   "left": 0+"px", "top": (y)+"px", "height": h+"px", "width": x+"px"
  }); 
  $(lib.masks[3]).css({
   "left": (x+w)+"px", "top": (y)+"px", "height": h+"px", "width": maxWidth+"px"
  })
 }, 
 "":""
}; 
window.disabler=lib; 
window.disableAllBut=lib.disableAllBut; 
< /script>
< style type="text/css">
< /style>

< div class="apagado">
 hola 1
 < table>
  < tr>< td>hola hola< /td>
      < td>
   < div class="prendido">
   hola 2< p>hhhhh< a href="">hshshs< /a>< /p>
   < /div>
      < /td>
  < /tr>
  < tr>
   < div id='div3'>
   hola 3 asd < span id="div4">asd< /span> as d
   < /div>
  < /tr>
 < /table>
< /div>

< button onclick="disableAllBut(document.getElementById('div4'))">click me for the disabling< /button>



< /html>