RaphaelMarkup - XML syntax for great drawing Javascript API

My new pet project is http://code.google.com/p/raphaelmarkup/, let me present it to you:


Some links:

feature examples: http://cancerbero.vacau.com/raphaelmarkup/src/doc/examples.html

different ways of including raphael XML in HTML documents:
http://cancerbero.vacau.com/raphaelmarkup/src/doc/usage.html

documented raphael XML document definition in XML Schema:
http://cancerbero.vacau.com/raphaelmarkup/src/raphael.xsd




resume:

Write and validate your raphael drawings in xml, stylize with CSS like
syntax. Access any raphael paper instances in an XML DOM using jquery.
Use CSS 3 selectors for locating your shapes in the raphael DOM.

long description:

raphaël javascript library has a portable and nice API for drawing
vector graphics with javascript. This project, RaphaelMarkup, try to
bring declarative parts of raphaël API to XML so you can draw with XML
and CSS. Some important things that raphaelmarkup supports:

* RaphaelMarkup define a XML document type for writing raphaël in
XML. A XML Schema document definition is provided so users can
validate their xml drawings.
* It contains a javascript renderer for easily render xml drawings
in your HTML documents.
Provides several ways of including XML drawings in HTML documents,
like embedding code, ajax, XSL stylesheets, etc.
* Creates an XML DOM that can be manipulated programatically with
tools like jquery. and then easily update the drawing with the changes
in the DOM
* CSS like syntax for raphaël shapes attributes. Raphael elements
support id and class attributes, and CSS3 selectors are supported.
Note that this is not CSS, some cascading rules are different and
raphael attributes are not valid CSS.
* Easy scripting for rendered documents.
* Utilities for easy export any raphael paper to XML drawing code.

RaphaelMarkup depends on raphael and jquery libraries. jquery is used
for XML parsing and XML DOM Manipulation.

The project just started, many things still need revision and some
parts of raphaeljs api still need works. Expect improvements soon! I'm
announcing it here for feedback so please if you have any suggestions.
Expect project inprovements soon!

jQuery: accessing XML doms created with $.parseXML and problems with append(string)

In the project raphaelmarkup I'm exploiting jquery API for loading and manipulating XML. First I parse the XML sources and then I can use jquery API for accessing and manipulating it. A documented example:

//some xml string example. the XML must not have any <!doctype definition
var xmlStr = '<p><o><b></b></o><b></b></p>';

//create a jquery dom object for that xml document.
var xmldoc1 = $.parseXML(xmlStr); //the native XMLDocument object
var dom = $(xmldoc1); //the jquery DOM object that we will use fopr accessing

//finds some element and sets attributes using the jquery API
dom.find("p>o").attr("attr1", "val1");

This has some advantages: its uses the internal XML browser parser, the jquery API is a portable way of accessing the XML DOM.

Now I want to document a problem that I had with this using jquery's append(String) method.
In the previous example, dom.find("p").append("hello) won't work. This is mainly because append(String) method will create the new elements using the global html document (the global "document variable) instead or using our XML document object. So we must do the following for appending an element :

var g1 = $(xmldoc1.createElement("g"));
dom.find("p>o").append(g1);
g1.test("hello");

the complete example based on qunit (ok() is an assertEquals()) :

var xmlStr = '
'
var dom = $($.parseXML(xmlStr));

ok(dom.find("b").size()==2, "jquery xml dom 1"); //OK

//set attribute and check -
dom.find("p").attr("attr1", "val1");
ok(dom.find("p").attr("attr1")=="val1", "jquery xml dom 12");
ok($("p", dom).size()==1, "13");//OK 

/*  a bug, using dom.find("p").append('<d>hello</d>') won't work. it seems 
jquery won't let creation of non HTML valid code. */

dom.find("p").append('<d>hello</d>'); //this doesn't work
ok(dom.find("d").size()==1, "jquery xml dom 2"); //FAIL!

/* but this way works. Don't use append(string) but create the element
manually, and pass the dom object to append() */

var c1 = $(dom.get(0).createElement("c")); //make sure new el is created in our xml doc
dom.find("p").append(c1);
ok($("c", dom).size()==1, "14"); //OK

A function for creation of arbitrary xml elements :

/**
 * create a new element in raphael XML dom
 * @param parent an html dom or jquery selector or object 
 * where to append the created child.
 * @return the created jquery dom element 
 */
createElement: function(parent, tagName, attrs) {
 parent=$(parent);
 var xmldoc = null;
 //if they send us a document, we append it on the documentElement
 
 if(rm.isDocument(parent)) {
  parent=$(parent.prop("documentElement"));
 } 
 xmldoc=parent.prop("ownerDocument");
 
 var e = $(xmldoc.createElement(tagName));
 if(attrs)
  e.attr(attrs);
 
 parent.append(e);
 
 return e;
},

Being a great tool for parsing and accessing xml documents in xhtml documents, It is a shame that jquery don't let to use arbitrary xml markup strings in methods like append, prepend, etc. :( But it seems that it is a thing we can live without

Advance gnome configuration with gconf

In gnome you can configure a lot of advanced stuff using gconf that are not available in GUI programs like gnome-control-center. For example, in default gnomes it is common that new application windows steal the focus of current window. In my case, I launch eclipse (that takes some time to show the window) and a console. While writing on the console, when the eclipse window appears it steals the focus to the console and this is very annoying.

There is no option in visual tools like gnome-control-center for configuring this, but using the gconftool command line program we can check the state of the configuration property that controls the "new windows focus", like this:

gconftool-2 --get /apps/metacity/general/focus_new_windows

or can change its value to "strict" that will prevent focus stealing:

gconftool-2 --set /apps/metacity/general/focus_new_windows --type string strict

More, using the application gconf-editor one can inspect all available properties and edit them. Note that "metacity" is just another gnome application, in this case the window manager (the program that administer windows). The new windows focus policy is a responsability of metacity.

Example on how easily a javascript native component can be embedded natively in an gwt widget

I needed to use a wysiwyg editor in my gwt application. Tried some sollutions, but none worked, so I decided to develop a gwt widget with ckeditor inside, and with support for gwt editor framework.

In the following example, I will create an html file that loads ckeditor javascript before the gwt application javascript is loaded:

<!doctype html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <title>Web Application Starter Project</title>
    
     <script type="text/javascript" language="javascript" 
     src="js/ckeditor/ckeditor.js"></script>
     
  </head>

  <body>  
  
    <script type="text/javascript" language="javascript" 
     src="circulares2/circulares2.nocache.js"></script>

 <div id="uniqueID"></div>
 
  </body>
</html>

Then the following is the code for the ckeditor gwt widget, with support for gwt editor framework:

package com.beeblos.portlet.circulares2.gwt.client.util;

import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Style.Display;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.dom.client.TextAreaElement;
import com.google.gwt.editor.client.LeafValueEditor;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.TextArea;

/**
 * ckeditor.js must be already loaded, put it in .
 * @author sg
 *
 */
public class CKEditor extends SimplePanel implements LeafValueEditor {

 String _id=null;
 private String text;
 private TextAreaElement ta;
 static Integer idCounter=0;
 
 public CKEditor(String text) {
  idCounter++;
  _id="ckEditorWidget_"+idCounter;
  this.text=text;

  initGui();
 }
 
 private void initGui() {  
  ta = Document.get().createTextAreaElement();
  ta.getStyle().setWidth(100, Unit.PCT);
  ta.getStyle().setHeight(100, Unit.PCT);
  ta.setId(_id);
  getElement().appendChild(ta);
 }

 @Override
 public void setValue(String value) {
  this.text=value;  
  this._setText(_id, value);
 }
 @Override
 public String getValue() {
  return _getText(_id)+"";
 }
 protected native void _setText(String id, String value)/*-{
  if($wnd.CKEDITOR && $wnd.CKEDITOR.instances && $wnd.CKEDITOR.instances[id])
     $wnd.CKEDITOR.instances[id].setData(value);
 }-*/;
 protected native Object _getText(String id) /*-{
  if(!$wnd.CKEDITOR || !$wnd.CKEDITOR.instances || !$wnd.CKEDITOR.instances[id])
   return "";
    else
     return $wnd.CKEDITOR.instances[id].getData();
 }-*/;

 @Override
 protected void onLoad() {
  super.onLoad();
  _loadCKEditor(_id, getCkEditorConfig());
  ta.getStyle().setDisplay(Display.NONE);
  if(Util.notNull(text))
   this._setText(_id, text);  
 }

 protected native Object getCkEditorConfig() /*-{
    return {
      toolbar : 'Basic',
      uiColor : '#9AB8F3'
  };
 }-*/;

 private static native void _loadCKEditor(String id, Object config) /*-{
  $wnd.CKEDITOR.replace(id, config);
 }-*/;
}

Note how I use the gwt widget's onLoad for loading native ckeditor inside the widget, because I need gwt to be fully loaded before adding native ckeditor. Also, note that you can extend this class for indicating a custom ckeditor configuration, for example:

public class CkEditorNormal extends CKEditor {
 public CkEditorNormal(String text) {
  super(text);
 }

 protected native Object getCkEditorConfig() /*-{
    return {};
 }-*/;
}

Hope this helps somebody to develop / integrate its own javascript toolkits as gwt widgets or in gwt projects.

gwt editor framework, 100% java example

I'm learning gwt, and found gwt editor framework and it seems very promising technology for doing gui. Nevertheless, there are little documentation available for gwt begginers, and all the examples uses gwt UIBinder, which I'm not.

So, this is a gwt module file, that contains a simple model class, a simple gwt editor for that model class, and a example of using it for displaying and let the user edit the model. No UIBinder, all the GUI was made in java using gwt eclipse editor. Enjoy!

package com.beeblos.portlet.circulares2.gwt.client;

import com.google.gwt.core.client.*;
import com.google.gwt.editor.client.*;
import com.google.gwt.event.dom.client.*;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.*;

/**
 * entry point testing gwt editor framework. 100% java code, no UIBinder...
 * @author: sgurin
 */
public class Circulares2 implements EntryPoint {
 
 
 public static class Person {
  String name;
  Integer age;
  public Person(String name, Integer age) {
   super();
   this.name = name;
   this.age = age;
  }
  public String getName() {
   return name;
  }
  public void setName(String name) {
   this.name = name;
  }
  public Integer getAge() {
   return age;
  }
  public void setAge(Integer age) {
   this.age = age;
  }
 } 
 
 /**
  * the perdon's editor. Note that it has 2 non private attributes with the exact name 
  * as the Person's attributes. 
  * 
  * @author sg
  *
  */
 public class PersonEditor extends SimplePanel implements Editor {
  TextBox name;
  IntegerBox age;

  public PersonEditor() {   
   Grid grid = new Grid(2, 2);
   setWidget(grid);
   grid.setSize("100%", "100%");
   
   Label lblNewLabel = new Label("name");
   grid.setWidget(0, 0, lblNewLabel);
   
   name = new TextBox();
   grid.setWidget(0, 1, name);
   
   Label lblAge = new Label("age");
   grid.setWidget(1, 0, lblAge);
   
   age = new IntegerBox();
   grid.setWidget(1, 1, age);
  }
 }
 
 // Empty interface declaration, similar to UiBinder
 interface Driver extends SimpleBeanEditorDriver {}
  
 
 public void onModuleLoad() {
  
  /* this is the main entry point of our gwt application. 
   * Here we instance the editor (a gwt panel), a sample 
   * instance object (a person) and a editor driver, the 
   * object that will let us link the data with the editor */
    
  RootPanel rootPanel = RootPanel.get("uniqueID");
  
  
    // Create the editor's Driver
    final Driver driver = GWT.create(Driver.class);
  
    //create a sample model object
  Person p = new Person("john", 22);
  
  // PersonEditor is a DialogBox that extends Editor
  PersonEditor editor = new PersonEditor();
     // Initialize the driver with the top-level editor
     driver.initialize(editor);
     // Copy the data in the object into the UI
     driver.edit(p);
     
     //at this point the editor panel is loaded with the person...
  
  VerticalPanel vp = new VerticalPanel();
  vp.setSize("100%", "100%");
  rootPanel.add(vp);
  
  Button editButton = new Button("edit", new ClickHandler() {   
   @Override
   public void onClick(ClickEvent event) {
    //we get the edited person object back
    Person editedPerson = driver.flush();
    Window.alert("edited person name: "+editedPerson.getName());
   }
  });
  vp.add(editor);
  vp.add(editButton);  
 }
}

Load javascript or css dynamically in javascript

If for some reason you need to programatically load some javascript or css stylesheet in the document, here is some code that helped me and seems to work fine in most browsers. Hope that helps somebody




/**
* loads javascript file or css stylesheet in current document.
* Usage Examples:
* loadFile("www.server.com/file1.js", "js", function(){
* alert("file1.js loaded!");
* });
* @param name : the url of the resource to load. I think there is no cross site problems here.
* @param type : "js" or "css". if "js" then a new javascript script will be loaded
* @param listener an optional function that will be called when loading of the resource is ready.
* @author: sgurin
*/
_loadF : function(name, type, listener){
var el=null;
if (type=="js"){
el=document.createElement("script");
el.setAttribute("type","text/javascript");
if(listener) {
el.onreadystatechange = function () {
if (this.readyState == 'complete') listener();
};
el.onload=listener;
}
el.setAttribute("src", name);
}
else if (type=="css"){
el=document.createElement("link");
el.setAttribute("rel", "stylesheet");
el.setAttribute("type", "text/css");
el.setAttribute("href", name);
}
document.body.appendChild(el);
}

Tomcat in windows logging

I work daily with tomcat in linux, and I'm used to read all tomcat logs in file logs/catalina.out. The other day, I had to tun tomcat on a windows machine, launching it from comand line, not as a windows service. To my surprise, there was no logs/catalina.out file with my logs, and any of the other files in logs folder contain useful information.

So, how to launch tomcat from windows command line and make it dump the logs to logs/catalina.out file??

This is the answer:

cd c:\tomcat\bin
call catalina run 1> ../logs/catalina.out 2<&1

this will write all tomcat logs to file c:\tomcat\logs\catalina.out

hope this can help people in the same situation.