This is a snippet of text from Working with windows in chrome code:

In case of <browser type="content-primary" />, you can use the content shortcut property to access the Window object of the content document. You can use content.document in a browser.xul overlay to access the web page in the selected tab in a Firefox window. For example:

//alerts selected text in the main content
alert(content.window.getSelection());
// alerts the title of the document displayed in the content-primary widget
alert(content.document.title);

There is no shortcut for accessing document in the sidebar. You need to use

document.getElementById(“sidebar”).contentDocument

or

.contentWindow

,

like when Accessing content documents

Works in Firefox 3.5.5.

Today i played around a little bit with XUL. After updating my first XUL-Side multiple times i got very annoyed of the builtin caching – Whenever i changed my XUL-File i had to restart firefox. Otherwise the file was not reloaded.

After searching the web, i found a way to disable the cache (German Firefox-Wiki-Entry)

1. Open about:config in your firefox.
2. Right click and select “New -> Boolean”.
3. Add a variable “nglayout.debug.disable_xul_cache”.
4. Change its value to true via double click.
5. Restart firefox.

Now the cache for XUL-Resources is disabled. That means whenever you refresh an XUL-File (e.g. when pressing F5) the new version of the file is loaded.

Check it out world — an on time release (although this blog post isn’t)!

There isn’t much new, but I plan to make up for it with some pretty cool stuff for 0.3.
So after the first release, the feedback I got suggested less UI, so that was what I tried to work towards in terms of achievement.

This release seems very scrawny in comparison to the amazing progress being accomplished by other students of my class, mainly the Processing.js crew. But check it out–here are some of the goals I have set up for my 0.3 milestone:

1. Code a function to disable next/prev button if current message is last/first
2. Code a function to allow seeing a short
3. Code a function to allow skipping spam using navigation
4. Test extension’s display flow on a netbook
5. Navigation buttons that look nice
6. Consult other netbook users and seek review on basic UI left available

This release point is the result of one four-hour and one three-hour sessions in my office, where all I need to test front end code between edits is a lightning quick firing up of Thunderbird. These two days of work resulted in a total of +7 -2 lines of code, but I find victory in the fact that that is 7 hours of material I don’t have to learn again. I moved forward from understanding how to add elements to nodes (in layman’s terms: to insert a new control with its own attributes and programmability into item groups used in the base code of Thunderbird) and got comfortable with a new set of different controls and attributes.
My first aim was to get rid of the top toolbar to free up a good chunk of vertical space for the message content portion, so my plan of attack was to ask if element removal is possible in the #extdev channel. I was hooked up with two attributes to choose from, removeelement and hidden.
Removeelement sounded like a bucket of fun, so I gave that a try on the whole mail-toolbox toolbox. That actually ended up being kinda volatile, as the fs window would no longer recognize any selected message, and simply show a blank white inner space. So I dug one level deeper into the node and removed the two toolbar elements individually, one at a time, and found that it was the top [File, Edit, View, etc...] that shouldn’t be removed. Ever.
But even with one toolbar taken down, it still doesn’t look seamless. So the out-in-the-open answer became hidden. mail-toolbox hidden=”true”, that is. Great success!

Next thing to do was add a Prev & Next button for navigating through emails with the mouse. It took me about almost two hours and several different placements to get the feng shui just right and make sure that they wouldn’t warp or displace themselves like this:

but the two young buttons seem satisfied in their new home behind a spacer. Their auto-fitting with the vertical space was fixed by simply removing the align=”end” attribute I put in. Now they just need funky arrow icons to express their adolescent creativity, and stuff.

Oh yeah and I fixed the minimum version of Thunderbird problem. I set it to 2.9.*, since it seems the safest bet any 3.0pre build.

Also along this road I tried some other attributes that ended up not being necessary, but still cool tools to understand. The first is observes, which I noticed was on a most of the toolbox items, and insertbefore/insertafter. observes is like a radio to a broadcast tower, a broadcaster, sending the signal to adhere to any changed default attributes in the broadcaster. There’s a better explanation here. And have a XUL element reference also for good measure.

And along this road a few more cool feature ideas popped into my head;
People might like to be able to see or know if the next or previous message is junk and would prefer to skip it.
Perhaps add an easy way to zoom the size of text, both in and out to accommodate many different display settings.
A drop down list of message folders (inbox, sent, deleted, etc), with folder change going to the latest non-junk message, but I’m not dead set on keeping this idea if testers don’t feel it necessary.

Will keep you updated.

Well, it is no state secret that I am a Firefox fan. It is definite the best Web Browser.

This is such a handy tool for Web developers, especially if you make Themes and Extensions (Add-Ons). You can install it from here. One can inspect in a two page pane the DOM (Document Object Model) of any Web page or XUL (XML User Interface Language – pronounced zool ) window. In other words the structure and the properties of a page or window.

Screenshot:

DOM – Document Object Model
This is the API (application programming interface) for valid HTML and well-formed XML documents. In other all the tags,e.g.<html> ,<div>, <script>, etc. So the DOM specifies how XML and HTML documents are represented as objects, which enables us to use them in object oriented programs.

XUL – XML User Interface Language
This is is Mozilla’s XML-based language that lets you build applications. Although it is not a an official standard, it relies on the existing Web Standards like CSS, Javascript and DOM. This make it quite easy for Web developers to learn. Read more here at Mozilla’s XUL site.

Another Add-On you can also consider is XPather.

Happy Coding

In these days the net is populated by blog posts about the .NET Framework Assistant plugin for Firefox, its disabling and the fact Firefox does not warn user when a plugin installs itself without explicit permission.

Well, this is a old problem at least for me, indeed I discovered it some time ago when my Firefox crashed (apparently) without reason, discovering after a couple of days that Microsoft Office 2003 plugin fought with Foxit Reader and Google update plugins.

The problem was that I never installed Office plugin!

Disabling Office plugin Firefox stopped to crash.

After that experience I decided to write a simple (very simple) extension that at every Firefox startup checks if there are new plugins installed.

Nothing so cool, only a quick and dirty solution implemented in a few of hours.

Waiting Mozilla implements a better solution than mine you can install PluginChecker.

If you expect to find PluginChecker innovative or the “I-can-live-without-it” extension you are on the wrong place, if you expect a not intrusive and simple solution to unattended plugins installation than you can take a look at it.

You can download PluginChecker from SourceForge.

En este post presento TDOM (Tomato:Document Object Model), una librería que permite simplificar el proceso de leer, analizar, modificar o crear archivos XML-based de distintos tipos usando una API simplificada y utilitaria.

Aunque esta librería tiene ya bastante tiempo conmigo (a menos más de un año desde que la hice); un “re-factoring” para hacerla más compatible con PHP > 5.3 y la posibilidad de tener una interfaz basada en “plugins” que permiten extender sus capacidades agregando nuevos tipos de documentos XML y además de crearle un proyecto libre en Google Code; es lo que me hace escribir el articulo.

• La página oficial del proyecto en Google Code está acá: [TDOM Google Code]
• La página para phpclasses.org está acá.

El proyecto nace bajo licencia GPL v.3 y está en fase alpha, versión 0.1.2; permite crear documentos y archivos en:

• XML
• DocBook
• SVG
• (x)HTML estricto
• Interfaces XUL remote

Espera incorporar próximamente (ya estoy programando en ello):

• XMPP (Paquetes del protocolo XMPP que usan Jabber/Gtalk)
• RSS (Sindicación de manera fácil)
• RDF (Resource Description es base de muchos tipos de archivos, como FOAF: relaciones amigo-amigo descritas semánticamente usando RDF)
• ATOM
• ODF

TDOM forma parte de la capa de creación y vistas de Tomates Framework, que se encuentra en un proceso final de adaptación y re-invención; lo importante de TDOM es que permite crear interfaces XUL, combinado con Jquery+REST sería el primer framework completamente operativo sobre PHP (el otro es Cyclone en perl) que permitiría crear aplicaciones XUL:Remote (que correrían como una aplicación desktop usando XULRunner) en implementar completamente Interfaces XUL de Mozilla.

Creando una Interface XUL

Está claro que el código dentro de poco será más simplificado cuando todos los widgets UI (toolbars, menu, tabbers, botones) estén incorporados en la clase; pero este es un ejemplo escribiendo solo PHP:

$xml = $dom->type('xul');
#un tabbox
$tabbox = $xml->create('tabbox');
$tabbox->orient('vertical')->flex('1');
$tabs = $tabbox->create('tabs');
$tabpanel = $tabbox->create('tabpanels');
$tabpanel->flex('1');
#adjunto las pestañas:
$tabs->create('tab')->label('Google');
$tabs->create('tab')->label('PHP.net');
$tabs->create('tab')->label('DEVEL');
#y el contenido de las pestañas
$tabpanel->create('browser')->src('http://www.google.co.ve/');
$tabpanel->create('browser')->src('http://www.php.net/');
$tabpanel->create('browser')->src('http://www.devel.com.ve/');
$xml->title('Prueba de XUL');
$dom->render(); 

Output:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="xulWindow" persist="screenX screenY width height sizemode" xmlns:html="http://www.w3.org/1999/xhtml" title="Prueba de XUL">
  <tabbox orient="vertical" flex="1">
    <tabs>
      <tab label="Google"/>
      <tab label="PHP.net"/>
      <tab label="DEVEL"/>
    </tabs>
    <tabpanels flex="1">
      <browser src="http://www.google.co.ve/"/>
      <browser src="http://www.php.net/"/>
      <browser src="http://www.devel.com.ve/"/>
    </tabpanels>
  </tabbox>
</window>

Proximamente subiré una demo de como se ve esta interfaz XUL.

Creando un archivo (x)HTML estricto

Un ejemplo de como el código puede ser simplificado, es tener todo un cuerpo XHMTL 1.0 estricto teniendo solo 3 líneas de código; esto gracias a que todas las etiquetas son necesarias para la descripción de un archivo según la norma de la W3c; estas 3 líneas:

$html = $dom->type('html'); 
$html->setTitle('.: Titulo de la Pagina Web :.');
$dom->render();

Generan todo este bloque de código que es sintácticamente válido con XHTML 1.0 estricto; lo interesante es que podemos cargarle contenido al BODY con TDOM y este será normalizado para ser XHTML 1.0 estricto; básta de aplicaciones inválidas.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://localhost/proyectos/tomates/tomates/include/tdom/tomates/tdom/include/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>.: Titulo de la Pagina Web :.</title>
    <base href="http://localhost/proyectos/tomates/" />
<!--Aqui comienzan las etiquetas meta-->
    <meta name="author" content="" />
    <meta name="generator" content="Tomates Framework" />
    <meta name="description" content="" />
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="robots" content="all" />
    <meta http-equiv="Content-Language" content="en_US" />
    <meta name="keywords" content="" />
    <meta name="Revised" content=": Sep 18 2009" />
<!--Aqui terminan las etiquetas meta-->
    <link rel="shortcut icon" href="http://localhost/proyectos/tomates/application/assets/images/favicon.ico" type="image/x-icon" />
    <link rel="start" href="http://localhost/proyectos/tomates/" />
    <link rel="index" href="http://localhost/proyectos/tomates/" />
  </head>
  <body></body>
</html>

                $html = $dom->type('html');
                $html->createHead();
                $html->setTitle('.: Titulo de la Pagina Web :.');
                $dom->render();

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://localhost/proyectos/tomates/tomates/include/tdom/tomates/tdom/include/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>.: Titulo de la Pagina Web :.</title>
    <base href="http://localhost/proyectos/tomates/" />
<!--Aqui comienzan las etiquetas meta-->
    <meta name="author" content="" />
    <meta name="generator" content="Tomates Framework" />
    <meta name="description" content="" />
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="robots" content="all" />
    <meta http-equiv="Content-Language" content="en_US" />
    <meta name="keywords" content="" />
    <meta name="Revised" content=": Sep 18 2009" />
<!--Aqui terminan las etiquetas meta-->
    <link rel="shortcut icon" href="http://localhost/proyectos/tomates/application/assets/images/favicon.ico" type="image/x-icon" />
    <link rel="start" href="http://localhost/proyectos/tomates/" />
    <link rel="index" href="http://localhost/proyectos/tomates/" />
  </head>
  <body></body>
</html>

Finally after almost a year I release a new version of Table2Clipboard, one of twelve extensions that won in 2008 the Firefox 2 Contest in the section Runners Up.

What’s new

Until now Table2Clipboard has pasted to clipboard the structure of HTML tables without the styles (colors, borders, fonts) but many users have asked me that the behavior was much more similar to that of Internet Explorer (IE) which indeed maintains many details.

Well, the version 1.0 preserves the styles and in certain cases the result is better than that obtained with IE.

IE inserts also the DOM elements declared “not visible”, for example the table shown in Figure 1  is pasted in Excel as shown in Figure 2.

Figure 1

Table selection on Internet Explorer

Figure 2

Copy from Internet Explorer paste to Microsoft Excel

Table2Clipboard discards hidden DOM elements as shown in Figure 3, this makes more sense for me.

Figure 3

Copy from Firefox with Table2Clipboard paste to Microsoft Excel

Other little improvements

Now web links are copied and user can choose to copy images (tag IMG), too.
All defaults settings can be modified from configuration dialog.

The copy of styles on OpenOffice doesn’t work as well as the one on Microsoft products.
The “Paste Special” feature available on OpenOffice doesn’t recognize CSS styles but only deprecated tags like FONT.

I will add support for OpenOffice soon but I prefer the “release early release often” (after a year??? ) approach so this version has poor styles support on the popular open source office automation suite.

Compatibility issues with Thunderbird 3.x are now fixed.

Table2Clipboard can be installed from AMO or from the project site on dafizilla.

Introduction

Tilghman Island

This is the final part in a five part series of entries creating a proof of concept for a JavaFX forms framework.  Here, I will conclude with some thoughts relating to using JavaFX to build a forms framework. If you are here for the first time I recommend going to the beginning: Part 1 “What is a Forms Framework?“.  By now we should know why it is very important to understand the MVC architectural pattern and how it applies when building applications (especially form type applications). The forms framework helps provide manageable code and clear boundaries for both the designer role and developer role. This allows a designer to focus on the usability (look and feel) of the application meanwhile allowing the developer to focus on the service components and business logic. Next, I want to talk about the popular and ambiguous acronym ‘RIA’ (better known as rich internet application).  You are probably wondering what does RIA have anything to do with a MVC forms framework?  Well, let me try to explain. To some people ‘RIA’ is a buzzword and to some people its actually a tangible software development platform. I have a hunch that some people are not convinced they should jump on the bandwagon or not.  But whatever you choose to agree with, I believe as we slowly become convinced what RIA is and how it fits into our domain an MVC forms framework should always be considered when building larger scale forms based applications. I want to begin by discussing RIA from a Swing/Web/Enterprise developer point of view (considering that’s my background).

Swing/Web/Enterprise Developer

Like most of us who had previously come from an enterprise background noticed the Web 2.0 looking applications getting lots of attention.  Whenever I hear the word RIA, I really think that it should be called  “Rich Applications” and drop the ‘I‘ because all clients should look and feel great regardless if they were connected to the Internet or not. So, usability is key to making client side applications connect with users. This year I was fortunate to go to JavaOne 2009 and experience all things rich client (some enterprise) and one of my last sessions was about Craftsmanship in Software from Ben Galbraith. He mentions “the most important aspect of software creation: crafting an amazing user experience.” This makes me realize that as applications become richer, consumers will demand richer content (a vicious cycle).  But,  I still believe enterprise-y looking applications (not so flashy)  using Swing will still have its place in the world of rich client. When developing rich clients I’ve found Swing GUI development to be quite pleasant to work with, however at times certain things  seem pretty hard to do such as animation, binding, and validation.

Martin Jet Pack

JavaFX

If you are like me who enjoys software development will learn over time some good proverbs and principles that surface. One saying I’ve heard was “Letting Go of Your Bananas”, which can be applied to your life and not just software. In terms of software I feel its OK to let go of some things and embrace other things. So, it’s healthy to be early adopters, but always keeping in the back of your mind past concepts that are tried and true.  An example would be “Swing/Web Frameworks” where everyone created their own or used the vast number of open-source libraries out there.

Rocket man - melbourne show (Fir0002/Flagstaffotos)

Conclusion

As the JavaFX community matures I believe forms based frameworks, GUI tools and application frameworks should start appearing, making many developers’ jobs much easier. I think there will be a day where Java developers around the world will not think ‘Swing is Hard‘, but say ‘JavaFX is extremely Easy‘. I encourage you as the reader to explore and learn as much as you can about JavaFX because it’s not every day that you can start from the beginning to learn a soon-to-be-popular language. Enjoy!

Introduction

(Updated)** Added JavaFX Script code to represent a display panel mapping instead of the XML format example in the ‘User of the API (Application Developer)’ section.

(Thanks! Andres Almiray)

This is the forth installment of a series of blog entries relating to a proof of concept for a JavaFX Forms Framework.

Chairman and Co-Founder, Sun Microsystems. (person on the left)

If you missed the beginning of the series you may go to Part 1, Part 2 and Part 3. Before we discuss this section I want to recap for those who have been following along. Part 1 explains “What is a Form based framework?” and a demo application. Part 2 describes the requirements and design. Part 3 are the implementation details. As we near the end of the series in Part 4 we will discuss enhancements that could be added to improve the FXForms framework. Below is a summary of the features from two user perspectives, first being the ‘User of the API’ and secondly the ‘User of the application’. I will only explain in detail the ‘User of the API‘ perspective.

Features

User of the API (Application Developer)

• Mapping files (forms to beans)
• GUI Component factory – make use of other controls

User of the application (User experience)

• Icon error, warn, info indicators overlay

1. Override images to load and position when validation occurs.
2. Error / Exceptions / Global errors
3. Tooltips

• Transitions to forms (fading, sliding, etc)
  
• Focus Policy
  
• User feedback (block gui visually) busy, indeterminate state.
• Skinning and Themes for Forms
• Context sensitive help
• Sound effects

User of the API (Application Developer)

The goal here is to make life easier for the Application developer developing JavaFX Forms.

The features are as follows:

• Mapping Files – This provides custom bindings to field elements and bean properties. Also provides mappings for actions and controls.
• GUI Component factories – Display panel managers (form manager) to assemble and wrap components to provide presentation model pattern behavior.

1) Mapping files (forms to beans) – Display panels (forms) will be mapped to a particular Java Bean class. Each field will be mapped based on the bean property ‘name’ and the GUI widget’s ‘id’ attribute. When defining a display panel in XML it is a good idea to create a DTD or Schema, but for brevity I will not create them, and I will describe each XML element in detail such as default values, enumerated types, etc. an object representing fields and their corresponding bindings and actions will be called a ‘Display Panel Metadata’ object.

When mapping fields and controls here are situations you will encounter:

• Nested properties – Nested objects ie: Person references an object Address with a property called city. (use  ‘address.city‘)
• Mapping bean properties with different GUI component ids. ie: Person bean property is ‘fName‘ and the TextBox’s id is ‘firstName‘
• Custom bindings (list models single select, multi-select and contains all). ie: ListBox containing all objects in a collection owned by Person.
• Action mappings to events and controls. ie: Buttons are mapped to functions in modules (script level functions).

Below is an example of an XML mapping file might look like:

Please skip this mapping file and go to JavaFX script code right after it. XML mapping file is replaced by JavaFX script code.

<displayPanels>
  <!--
  *************************************************************************
  **** NO LONGER IN USE, DEPRECATED,                                  *****
  **** Please DISREGARD.
  **** REPLACED WITH JavaFX DisplayPanelMetadata class                *****
  *************************************************************************
  --------------------------------
  - Full Name Form Display Panel -
  --------------------------------
  This describes all gui widgets and actions.
    * Text control bound to a different named bean property 'fName'
    * Radio buttons bound to bean property 'likesFood'
    * Spinner control bound to bean property 'dateOfBirth'
    * Spinner control bound to bean property 'shoeSize'
    * List or combo control bound to nested bean property 'address.state'
    * List box control bound to nested bean property 'contacts' (collection)
    * List box control bound to nested bean property 'relatives' (collection)
    * Button control bound to action handler 
  -->
  <displayPanel id="FullNameForm" 
    className="com.company.forms.FullNameForm" 
    beanClass="com.company.domain.model.PersonBean" 
    presentationModel="com.company.domain.model.personpresentationmodel.EditPersonPM" 
    reuseForm=”true”>

    <!--First Name Field -->
    <textControl id="firstName" name="fName"/>

    <!-- Likes Food (yes or no)-->
    <radioButton id=”no”
      name=”likesFood”
      selectedValue=”true”
      bindingType=”BOOLEAN_TYPE”/>
    <radioButton id=”yes”
      name=”likesFood”
      selectedValue=”false”
      bindingType=”BOOLEAN_TYPE”/>

    <!--Date of Birth Spinner control-->
    <spinner id=”dob”
      name=”dateOfBirth”
      defaultValue=”null”
      bindingType=”DATE_TYPE”/>

    <!--Shoe Size Spinner control-->
    <spinner id=”shoeSize”
      name=”shoeSize”
      defaultValue=”5”
      minimumValue=”2”
      maxValue=”18”
      stepValue=”1”
      bindingType=”NUMBER” />

    <!--US State Drop Down List control-->
    <listModel id="address.state" 
      uniqueElementProperty="code" 
      displayName="${name}" />

    <!--Contacts List Box control-->
    <listModel id="contacts" 
      uniqueElementProperty="id" 
      displayName="${firstName} ${lastName} – (${id})" 
      bindingType="MULTIPLE_SELECT" />

    <!--Relatives List Box control-->
    <listModel id="relatives"
      name="relatives" 
      uniqueElementProperty="id"
      displayName="${firstName} ${lastName} – (${id})" 
      bindingType="CONTAINS_ALL" />

    <!--Save Button control-->
    <action id=”saveAction” 
      name="saveAction" 
      module="com.company.domain.forms.personactions" 
      function="updatePerson" 
      listener="java.awt.event.ActionListener"/>

  </displayPanel>
</displayPanels>

Line 15-19 Defines a form or display panel.

Line 22 Maps a text field when a bean property and GUI control are named differently. Framework should assume if the name and id are the same and at text control developer doesn’t need to map. This keeps the XML mapping file smaller.

Line 24-32 Custom binding for radio controls. Other scenarios exist, but for a simple boolean value selection the ‘BOOLEAN_TYPE’

Line 34-38 Custom binding for a JSpinner. The bean property is a java.util.Date.

Line 41-47 Custom binding for a JSpinner. The bean property is an int.

Line 49-52 Custom binding for a dropdown list. The bean property is a java.lang.String. Notice the nested properties. When a form displays a nested property on the same form.

Line 54-58 Custom binding for a List box. This is not bound to a bean property but a populated list allowing the user to select multiple items.

Line 60-65 Custom binding for a List box. This is bound to a bean property referencing a collection of objects. Notice the “CONTAINS_ALL” which means all items in the list box are synchronized inside the collection.

Line 67-72 Action mapping for a button on the form. They are named so actions can be reused such as menu or toolbar.

Disregard the XML mapping file above. The same representation is below in JavaFX script code defining a display panel.

**IMPORTANT NOTE: Since JavaFX is a declarative language which can achieve the same thing as a mapping file, I have re done the XML in JavaFX below:

var displayPanelMetadata:DisplayPanelMetadata =  DisplayPanelMetadata {
  id: "FullNameForm"
  className: "com.company.forms.FullNameForm"
  reuseForm: true

  // Custom bindings to field elements
  customBindings: [
    // First Name Field 
    TextControlMetadata{
        id: "firstName"
        name: "fName"
    },

    // Likes Food (yes or no)
    RadioButtonMetadata {
        id: "no"
        name: "likesFood"
        selectedValue: "false"
        bindingType:"BOOLEAN_TYPE"
    },

    RadioButtonMetadata {
        id: "yes"
        name: "likesFood"
        selectedValue: "true"
        bindingType:"BOOLEAN_TYPE"
    },

    // Date of Birth Spinner control
    SpinnerMetadata {
        id: "dob"
        name: "dateOfBirth"
        defaultValue:"null"
        bindingType: "DATE_TYPE"
    },

    // shoe size
    SpinnerMetadata {
        id: "shoeSize"
        name: "shoeSize"
        defaultValue: "5"
        minimumValue: "2"
        maxValue: "18"
        stepValue: "1"
        bindingType: "NUMBER_TYPE"
    },

    // state selection
    ListModelMetadata {
        id: "address.state"
        uniqueElementProperty:"code"
        displayName:"${name}"
    },

    // contacts List Box control (not bound to bean)
    ListModelMetadata {
        id: "contacts"
        uniqueElementProperty:"id"
        displayName: "${firstName} ${lastName} – (${id})"
        bindingType: "MULTIPLE_SELECT"
    },

    // relatives(family) List Box control
    ListModelMetadata {
        id: "relatives"
        name: "relatives"
        uniqueElementProperty:"id"
        displayName: "${firstName} ${lastName} – (${id})"
        bindingType: "CONTAINS_ALL"
    }
  ] // custom bindings sequence

  // Save Button control
  actions:[
      ActionMetaData {
      name: "saveAction"
      module: "com.company.domain.forms.personactions"
      functionReference: "updatePerson"
    }

    ] // actions

} //displayPanel

Line 0-3 Defines a form or display panel.

Line 8-11 Maps a text field when a bean property and GUI control are named differently. Framework should assume if the name and id are the same and at text control developer doesn’t need to map. This keeps the metadata mapping info smaller.

Line 14-19 Custom binding for radio controls. Other scenarios exist, but for a simple boolean value selection the ‘BOOLEAN_TYPE’

Line 29-34 Custom binding for a JSpinner. The bean property is a java.util.Date.

Line 37-45 Custom binding for a JSpinner. The bean property is an int.

Line 48-52 Custom binding for a dropdown list. The bean property is a java.lang.String. Notice the nested properties. When a form displays a nested property on the same form.

Line 55-60 Custom binding for a List box. This is not bound to a bean property but a populated list allowing the user to select multiple items.

Line 63-69 Custom binding for a List box. This is bound to a bean property referencing a collection of objects. Notice the “CONTAINS_ALL” which means all items in the list box are synchronized inside the collection.

Line 74-77 Action mapping for a button on the form. They are named so actions can be reused such as menu or toolbar.

2) GUI Component factory – make use of other controls

Forms can be retrieved and populated using convenient factory functions. When assembling a form and mapping properties the underlying implementation may have a configuration file to have modular ways to specify what controls will be used for binding controls.

var personForm = FormManager.retrieveForm(personBean, 'FullNameForm');


Conclusion

While some features of the ‘User of the Application‘ perspective may seem debatable, I believe a forms framework should at least have all the features described in the ‘User of the APIs‘ perspective. As a framework implementer one should design a plug-able architecture for custom components. Components should be wrapped and registered when assembling a form. I’m sure there are many features I have not mentioned.  As JavaFX matures I believe GUI builders providing WYSIWYG development will eventually allow third party GUI controls to be added to their control palette. Next, I will discuss Part 5 Concluding thoughts.

Like always, any comments are welcome!

Introduction

Matthew 7:13-14

This is the third installment of a series of blog entries relating to a proof of concept for a JavaFX Forms Framework. If you missed the beginning of the series you may go to Part 1 and Part 2. We will take a look at code snippets relating to how the FXForms Framework was implemented. If you want to jump right into the code you may download it here or browse the source code here from the JFXtras Samples area. To those who are following the series will notice similarities to JGoodies Bindings and Validation libraries, it is because of those libraries and presentations which basically inspired me to create this MVC forms framework in JavaFX.

Disclaimer: Most of the code snippets will deal with the user of the API’s perspective as opposed to the implementer of the API’s perspective in order to keep the blog entry short. I will try my best to touch on areas regarding the framework’s underlying implementation. I advise people to check the code project out, review it and run it.

A thing I’d like to bring to your attention is that I decided to refactor the code a little and add a new feature to the FXForms Framework. I refactored the form to reference an instance of a presentation model instead of inheriting from it. As I mentioned in Part 2 the form will be independent of the presentation model. This provides different validation contexts while reusing the same form. An example of this situation is when a user uses a form to ‘Add’ information versus an ‘Edit’ of the form information. The new feature added is the ability to validate a field as the user is typing into the text box and positions an icon to indicate an error, warning or information to the user. Another feature might be to add tool tips when the mouse hovers over the icon similar to JGoodies’ IconFeedbackPanel behavior in Java Swing. Before going further into the implementation details you may want to launch the demo to get a feel for the behavior of the entry form with validation and icon indicators.

Demo

Instructions:

• Enter numbers or symbols into the first, last and middle name field.
• Click on the check box to swap the JavaBean for the form.
• Observe the underlying bean values changing.

Next are the steps on how to develop the demo using the FXForms Framework.

Developer Steps

1. Create a JavaBean representing a domain object.
2. Create a Presentation Model with validation for a Form.
3. Create a Form
4. Associate a Presentation Model to Form
5. Use the Form in an application

Detailed Steps

Step 1. Create a JavaBean representing a domain object.

// Java
public class PersonBean extends DomainModel{
    public static final String FIRST_NAME_PROPERTY = "firstName";
    public static final String MIDDLE_NAME_PROPERTY = "middleName";
... // more strings naming properties
    private String firstName;
    private String middleName;
... // more attributes

    /**
     * Returns first name of the person.
     * @return
     */
    public String getFirstName() {
        return firstName;
    }

    /**
     * Sets the first name of the person.
     * @param firstName
     */
    public void setFirstName(String firstName) {
        String old = this.firstName;
        this.firstName = firstName;
        firePropertyChange(FIRST_NAME_PROPERTY, old, firstName);
    }
... // the rest of the methods.
}

PersonBean.java - A domain object containing property change support.

DomainModel.java – Abstract base class containing property change support.

Step 2. Create a Presentation Model with validation for a Form

As I mentioned earlier about reusing the same form with different presentation models. Below you will see an ‘Add Form’ with validation on the Last Name field. The error icon indicates that the last name may not contain symbols and numbers, but allowing letters, apostrophe or hyphen in the name. You will notice the red error icon beside the ‘last name’ text field.

Add Form validation on last name field.

    // JavaFX
    var personForm:NameForm = NameForm{
        presentationModel:domain.model.personpresentationmodel.AddPersonPM{}
    };
    personForm.presentationModel.jBean = new PersonBean();

Next, you will see an ‘Edit Form’ with no validation on the ‘Last Name’ field. But, there is validation on the ‘First Name’ field. The warning icon indicates that the first name can contain symbols and numbers, letters, apostrophe or hyphen, but isn’t recommended. You will notice the yellow warning icon beside the ‘first name‘ field.

Edit Form no validation for Last Name field

    // JavaFX
    personForm.presentationModel = domain.model.personpresentationmodel.EditPersonPM{}
    personForm.presentationModel.jBean = personBean2;

*Note: The examples above are two hypothetical use cases, I mocked up those forms to help illustrate different validation contexts. The demo app uses an edit presentation model that does validate on the ‘last name‘ field.

Edit Person Presentation Model w/Validation

// JavaFX
public class EditPersonPM extends fxforms.model.model.PresentationModel {

   /** Validate the first name field */
   var validateFirstName =  Validator{
       id:PersonBean.FIRST_NAME_PROPERTY
       public override function validate(value:Object){
           return validateName(value, PersonBean.FIRST_NAME_PROPERTY, "Warning");
       }
   };
... // more validators
   postinit {
       addValidator(validateLastName);
       addValidator(validateFirstName);
       addValidator(validateMiddleName);
   }
}
// Script level function
/**
 * Using regular expression allow letters, apostrophe, hyphen
 */
function validateName(value:Object, propName:String, messageType:String){ // use friendly names, short names, etc.
    var results = ValidationResult{};
    var strValue:String = value as String;
    var found:Boolean = Pattern.matches("^[a-zA-Z,'.\\-\\s]*$", strValue);
    if (not found) {
        var message:FieldMessage = FieldMessage{
            id:propName
            messageType:messageType
            errorId:"123"
            errorMessage:"No symbols in names except - or ' (apostrophe)"
        }
        results.addMessage(message);
    }
    return results;
}

Line 01: Class EditPersonPM extends fxforms.model.model.PresentationModel
Line 04: var validateFirstName is an instance of a Validator
Line 12: Adds all Validators to the presentation model
Line 21: Script level function to be used in each validator
Line 24: Regular expression to allow letters, apostrophe and hyphen characters only.
Line 26: Creation of the message when Validator validates.

personpresentationmodel.fx – The edit presentation model for a person name form.

model.fx - Contains presentation model and value model implementation.

validation.fx – Contains the validator, message, result classes.

Step 3. Create a Form

Edit Person Form (Screen mockup)

0 full name panel
+-1------------------------+ // VBox with 3 things
! +-2--------------------+ ! // HBox with 2 things
! ! [ 3 ] [ 4           ]! ! // Label(section) and Label(title)
! +----------------------+ !
! +-5--------------------+ ! // HBox with 2 things
! ! [ 6 ] [ 7  ]         ! ! // Label(spacer} and Text(instructions)
! !                      ! ! // wrapping text abilities
! +----------------------+ !
! +-8--------------------+ ! // HBox with 2 things
! ! +-9---+ +-10-------+ ! ! // VBox_9(labels) Vbox_10(textbox)
! ! ![11] ! ! [15]     ! ! ! // Label(lastname) TextBox()
! ! ![12] ! ! [16]     ! ! ! // Label(firstName) TextBox()
! ! ![13] ! ! [17]     ! ! ! // Label(mi)  TextBox()
! ! ![14] ! ! [18]     ! ! ! // Label(suffix)  TextBox()
! ! +-----+ +----------+ ! !
! +----------------------+ !
+--------------------------+

NameForm inherits from Form
Form inherits from CustomNode

// JavaFX
public class NameForm extends fxforms.ui.form.Form {
   public override function create():Node{
        // 0 main panel
        var mainPanel:Panel = Panel{
            content:[]
        }
        ... // more layouts and widgets

        var firstLabel:Label = Label {
            text: "First Name"
            hpos:HPos.RIGHT
            font : Font {
                size: 18
            }
            layoutInfo: LayoutInfo { minWidth: 100 width: 150 maxWidth: 200 }
        };
        ... // more code
        var lastNameTextBox:TextBox = fxforms.ui.controls.MyTextBox {
            id:"lastName"
            columns:20
        };
        var miNameTextBox:TextBox = fxforms.ui.controls.MyTextBox {
            id:"middleName"
            columns:20
        };
        ... // more fields

        // *** NOTE: This is for easy lookup. And relating to Scene.lookup(id) bug in 1.2.
        guiFields = [lastNameTextBox, firstNameTextBox, miNameTextBox, suffixNameTextBox];
        presentationModel.addGuiFields(guiFields);
        return mainPanel;
    } // create()
} // NameForm

NameForm.fx - This represents a Form containing a person’s name information.

form.fx – This is the base class which contains the presentation model for forms binding behavior.

controls.fx – This contains all registered GUI controls for observing value model value changes. Currently only one control exists the TextBox control.

*Note: The ideal way to build forms is using the JFXtras MigLayout library. To learn more take a look at Dean Iverson’s blog entry called “MigLayout for JavaFX Reloaded“.

Step 4. Associate a Presentation Model to Form

// JavaFX
var personForm:NameForm = NameForm{
    presentationModel:domain.model.personpresentationmodel.EditPersonPM{}
    translateX: bind slideFormX
};
var personBean2:domain.model.PersonBean = new domain.model.PersonBean();
personBean2.setFirstName("Squidward");
personBean2.setLastName("Tentacles");
personBean2.setMiddleName("Nickelodeon");
personBean2.setSuffixName("Sr.");

// set presentation model with domain object
personForm.presentationModel.jBean = personBean2;

Line 02: Associate presentation model to form
Line 05: Create an instance of a JavaBean
Line 12: Bind bean to presentation model and form

Once the presentation model and form are assembled binding an existing Java object is a snap. In part 4 on enhancing this process would be to create a factory to obtain meta information of the form to retrieve nested properties within a POJO/JavaBean off of the JavaFX main thread (desktop profile is the EDT). This effort will help alleviate from the dreaded Hibernate lazy init exception when using detached objects. So, making sure you don’t block the GUI thread is a big deal when it comes to user experience.

Step 5. Use the Form in an application

    var switchPersonButton:CheckBox = CheckBox {
            text: bind personToSwitchText
            width: 100
            translateX: 5
            translateY: bind mainScene.height - switchPersonButton.height - 5
            allowTriState: false
            selected: false
            override var onMouseReleased = function(e:MouseEvent):Void {
                if (selected){
                   personToSwitchText = "Sponge Bob";
                   personForm.presentationModel.jBean = personBean1;
                } else {
                   personToSwitchText = "Squidward";
                   personForm.presentationModel.jBean = personBean2;
                }
            }
        };

    var mainScene:Scene = Scene {
        fill: LinearGradient {
                    startX: 0
                    startY: 0
                    endX: 0
                    endY: 1
                    stops: [
                        Stop { offset: 0.1 color: Color.ORANGE },
                        Stop { offset: 1.0 color: Color.YELLOW },
                    ]
                }
        content: [personForm, switchPersonButton, backButton, nextButton]
    };

Main.fx - The main application file to launch the application

Value Model

The ‘Value Model‘ is probably the most important aspect of how the Forms binding works. The value model is a model that holds a single value that notifies registered listeners that a value has changed. Registered listeners will likely be GUI controls and JavaBean properties. Bidirectional binding occurs when a bean property value changes, which notifies the value model which updates the  GUI control value. This holds true when going in the other direction too, such as the user changes the value of the GUI control which notifies the value model which updates the JavaBean property value.

model.fx – Contains presentation model and value model implementations.

Conclusion

I feel the implementation of the fxforms framework using JavaFX was extremely easy and is a lot less code compared to a Java equivalent of a Swing/SWT forms framework, also carrying additional overhead using 3rd party libraries for binding and validation. As JavaFX matures with more controls the forms framework would need to be flexible enough to add any controls to handle custom bindings such as list models.  Next we will look at Part 4 Enhancements . As always any feedback is welcome!

References

Validation presentation by Karsten Lentzsch – http://www.jgoodies.com/articles/validation.pdf

JGoodies: http://www.jgoodies.com/

JGoodies Support: http://www.jgoodies.com/products/purchase.html

The Unknown JavaBean by Richard Bair – http://weblogs.java.net/blog/rbair/archive/2006/05/the_unknown_jav.html

JavaFX – JMS Unexpected Null Pointer Exception http://blogs.sun.com/clarkeman/entry/javafx_jms_unexpected_null_pointer

JFXtras Community Site – http://jfxtras.org/portal/home

]]> http://discoduro.wordpress.com/2009/08/19/thunderbird-2-herramientas-de-oficina-gestor-de-correo/ Wed, 19 Aug 2009 22:45:39 +0000 kikovf http://discoduro.wordpress.com/2009/08/19/thunderbird-2-herramientas-de-oficina-gestor-de-correo/ http://carlfx.wordpress.com/2009/08/03/javafx-forms-framework-part-2/ Mon, 03 Aug 2009 18:36:02 +0000 carldea http://carlfx.wordpress.com/2009/08/03/javafx-forms-framework-part-2/

Full Name Form with Validation

Introduction

This is the second installment of a series of blog entries relating to a proof of concept for a JavaFX Forms Framework. Before I specify the requirements and a simple design of the FXForms Framework, I want to follow-up on comments about tough issues relating to enterprise application development and JavaFX. If you recall in Part 1 we discussed about MVC form based technologies. I listed many technologies that may only provide a means to separate content from presentation, but they don’t necessarily deal with real plumbing problems such as Threading, Binding, Validation and Transactions.  I believe these issues are one of the most important areas that must be understood in the JavaFX world, thus positioning itself as a premiere enterprise development platform (not just rich client a hint to Oracle).  As Richard Obaldeston mentions in the comments regarding enterprise level support for JavaFX controls similar to Swinglabs / SwingX. I cannot speak of the future concerning Swing & Swinglabs, but I believe the JavaFX teams are well aware of them, (very much so) due to the fact that the same project owners of the SwingX-WS are leads on the JavaFX teams (I don’t mean to put them on the spot).  Many of these difficult issues are mostly solved in the Browser based Web Application Development world and can also be done in the JavaFX world (Check out Exadel). Of course I can’t answer all the hurdles faced in just one blog entry especially because every enterprise application has varied types of architectures such as (Corba, RMI, EJB, Soap, RESTful, JSON, Jini, JMS, DAO, JDO, JDBC, JNI, etc). It would literally take a book or two. But, I will try to address some of them later in this blog as we discuss JavaFX and Java interoperability. One should always re-evaluate one’s architecture to adhere to best practices or industry standards and conventions. However, some standards seem to stall or are slow to be accepted (JSR-296 or JSR-295) with many reasons of course. It is often the nature of the beast when it comes to new technology solutions and refactoring that subsequently boils down to when and how you want to pick your battles. As readers of this blog for the first time who might be new to JavaFX or Java Swing I strongly encouraged you to explore and learn about the pitfalls of thread safety, asynchronous behaviors, best practices, and UI concepts like (UI blocking, disabling, progress bar, etc.) . So, let’s get started with requirements and the analysis phase of our FXForms Framework.

Requirements

My main goal of these series of blog entries are to share with others my experience with creating an application called iSF86 which hopefully will end up in the Java App Store and make tons of cash so I can quit my day job like Ethan (wishful thinking). iSF86 is an application which contains many form elements to capture a person’s information to apply for a job doing classified work for the United States Government. When dealing with so many forms I thought of building a mini Forms Framework where domain objects can be mapped to forms. The application will save a person’s SF86 information locally as an XML file. This is purely a client-side application which doesn’t involve any server-side communications. Each form would be bound to domain objects in a bi-directional way. A domain object that is bound to an existing form can be swapped out with a different domain object, thus making the old bean ready to be garbage collected and unbound to the form. Important Note: One requirement is that the domain objects will be JavaBeans (see disclaimer below).

Disclaimer: For brevity, the requirements are for JavaBeans (change support) and not POJOs (there is a difference)! Yes, I know I said POJOs in Part 1, because I wanted to tackle the problem using byte code engineering for boiler plate code for property change support on POJOs, but it would be beyond the scope of the blog series’ goal. So, this tutorial is really geared for people migrating Swing/SWT applications to JavaFX applications.

FX Forms Framework Requirements:

1. It shall bind JavaFX Forms to JavaBeans as domain objects
2. It shall enable JavaBeans to be swapped in a JavaFX Form
3. It shall provide validation on property values
4. It shall provide Action bindings to controls

To keep the framework simple shown below is a list of features that the framework does not provide.  Interesting features will later be discussed in Part 4 Enhancements.

What the FX Forms Framework does NOT provide:

• Application Framework Features (like JSR-296)
  • Application Lifecycle
  • Resource injection
  • Task Monitoring
  • Saved Preferences
  • Thread Pool
• Forms Building
• RCP Features
  • Window Docking
  • Menu bar
  • Etc.

Design

Before going into the design I want to mention other technologies which provide beans to forms binding or RIA MVC capable. The mentioned technologies are primarily Java based. Some of my classes will use similar names because I’ve taken a lot of ideas from these frameworks in the past.  Here are just a few that come to mind:

• Griffon – A Grails-like Rich Internet Framework
• MetaWidget (thanks to Andres Almiray an author of Griffon in Action for mentioning it to me)
• Exadel, JavaFX/Spring/Seam RIA development platform
• JGoodies Swing Bindings and Validation
• Seam – Ajax/JSF RIA platform.
• Spring Rich Client – Swing / SWT Application framework, Forms binding and validation
• Eclipse RCP –
• Beans Bindings (JSR 295)
• Apache Cocoon – Form based binding
• JavaBuilders -

As a reminder regarding rapid application development that there are two main areas on building applications quickly ‘Forms building’ and ‘Forms binding’. We will only focus on ‘Forms binding’. Ok, already! Let’s get to the designing.

User of the API

At times when it comes to API development I’m a fan of user driven design and the user of the API is who I’m targeting. So, I pretend the FXForms Framework is ready to be used. Below is the developer obtaining a JavaBean and setting it into some Form.

// normally loaded from external source
var personBean1:PersonBean = new PersonBean(); // change support enabled
personBean1.setFirstName("SpongeBob");
.
.
.

// generate a form and bind to bean. Req #1
var personForm:NameForm = NameForm{
jBean:personBean1
};

// subsequent time another domain object is loaded Req #2
var personBean2:PersonBean = … // loaded from external source.
personForm.jBean = personBean2; // old person bean is no longer attached

// set property to an invalid value. Req #3
personBean2.setFirstName(“#$”);
// validator will fire to output error message

// create navigation panel area Req #4
var mainButtonForm:PresentationModel = MainButtonForm {
jBean:personBean2
};
var nextButton:Button = mainButtonForm.getControl(‘nextButton’);
// simulate a mouse press to test action binding

Let’s step through the code to see what is happening and what the FXForms Framework will provide.

Line 1: Creating domain object or loading from external source. Notice the new on the PersonBean (Java Object).

Line 8: Instantiating a Form to use the current JavaBean loaded. All the properties will be bound to form elements bi-directionally. Changes in the GUI will affect properties and changes to the bean properties will change the GUI fields. (Requirement #1)

Line 14: Swapping a domain object with the existing form. Old bean is disconnected from the form and replaced with new bean. Presentation Model Pattern (Requirement #2)

Line 17: Validation of a property when set with invalid data. The user can type into the textbox to fire the validator code. ValueModel updated (Requirement #3)

Line 20-25: A button panel form has buttons mapped to actions. Command Pattern. Yes, this is strange but I will explain later. (Requirement #4)

You will notice the comment on line 25 where you could test a control such as obtaining a button independent of the application being launched (testing individual forms).  This brings up a good point when using MVC Frameworks.  In  the Swing world I highly recommend using FEST Swing a tool to test Swing applications with ease. Also, the team is working on FEST for JavaFX with a joint effort with the JFXtras team.

JavaFX and Java Interoperability

While the user of the API appears simple, it is the behind-the-scenes work that some may consider unorthodox when using a combination of Triggers, Bindings, Reflection, Threading, etc. Until the JavaFX teams expose (with JavaFX blessed code) better interoperability against Java and JavaFX, I will resort to techniques that are known and official. When using triggers on properties this enables us to follow the basic proxy pattern: where a property is changed you will have an opportunity to intercept the change and update value models, which also updates GUI widgets mapped to them. One concern is that object-based memory leaks could occur with inverse bind (Maybe we need a unbind keyword). Another problem is properly populating a form on or off the JavaFX’s main process thread (EDT on the desktop environment) without blocking the GUI thread or causing some race condition.  What follows are the necessary classes to implement the FXForms framework.

Class Design

// Java
DomainModel <abstract Java class>
pcs:PropertyChangeSupport

// Java
PersonBean extends DomainModel <JavaBean>
firstName:String
middleName:String
lastName:String
suffixName:String

// JavaFX
FieldSetter <mixin class> Adapter
valueModel:ValueModel
boundValue:String

// JavaFX
MyTextBox extends TextBox, FieldSetter
updateField(obj:Object):Void

// JavaFX
ValueModel <adapter class>
propertyName:String
guiControls:FieldSetter[]
boundValue:Object
jBean:Object

// JavaFX
PresentationModel extends PropertyChangeListener <mixin class>
propertyValues: Map <String, ValueModel>
propertyValidatorMap: Map <String, List<Validator>
jBean: DomainModel // java class javabean inherit
getModel(propertyName:String):ValueModel
getControl(propertyName:String):Control
propertyChange(changeEvent: PropertyChangeEvent):Void

//JavaFX
Form
guiControls:[] // Scene.lookup(id) is currently a bug in jfx 1.2
presentationModel:PresentationModel

// JavaFX
NameForm extends CustomNode, Form, PresentationModel <JavaFX node>

// JavaFX
Validator
validate():ValidationResult

// JavaFX
ValidationResult
messages:[]
getMessages():Message

// JavaFX
Message
key:String
propertyName:String
errorType:[“warn”,”err”]
text:String

You will notice the NameForm inherits the PresentationModel mixin class which provides the controller functionality mixed in with the view. I’ve done this to make the example short Sometimes I’m not a big fan of inheritance especially in this case and decided to refactor in order to separate the “Presentation Model” from the “View Form” for form reuse.  There are situations such as reusing the same GUI form for “Adding” and “Editing“, but the validation of the form data is different. Developers may also create a concrete presentation model that inherits from the mixin class to be independent of the view so that it decouples the Form and the Presentation Model. An EditPresentationModel and an AddPresentationModel should be created to have two different validations using the same GUI form.  Again for a slim down version I’ve omitted the ability to consume an XML file detailing the form metadata and mappings such as actions, mandatory fields, validators, and custom bindings; the named property is the same name as the ‘id’ attribute on the JavaFX GUI form element (TextBox). I will discuss in Part 4 Enhancements. Relating to validation at some point I would like to provide a way to display warnings and error icons beside fields whenever a Validation Result is updated. The validation results will contain the error messages to be displayed. One last thing to mention is GUI component factories aren’t in the design. You will also notice when creating a TextBox I needed additional behavior, so I simply created a MyTextBox instead of something like var field1 = WidgetFactory.create(valueModel, “TextBox”) to wrap, return and put it into form.

Conclusion

This is surely not a thorough or complete design, but an attempt to demonstrate how to make a simple forms framework from scratch. Hopefully, I’ve captured the requirements and articulated the object relationships within the textual design (No UML sorry). Next, we will look into how to implement the FXForms Framework in Part 3. Please be advised that this design is subject to change as any development shop would.

Personal Note: Sometimes I wonder if Sun had focused on finishing the often highly controversial JSR 295 Beans Binding and Java Properties before JavaFX would it render this blog entry totally useless.

Any comments are welcome. Thanks!

-Carl

References

JavaFX w/JMS 307-311 JavaFX RIA book Server Call Back- James Clarke updates code for JavaFX – Developing RIA book regarding Code Recipe for JMS pages 307-3011 http://tinyurl.com/lzej5x

Best practices: http://www.greggbolinger.com/blog/2008/11/11/1226423940000.html

Fuse http://weblogs.java.net/blog/joconner/archive/2007/11/index.html

Exadel, http://mkblog.exadel.com/ria/javafx-and-spring-crud/

Swing worker / swing/ http://java.sun.com/javase/6/docs/api/javax/swing/SwingWorker.html

Beans Binding: https://beansbinding.dev.java.net/

RESTful : http://jnb.ociweb.com/jnb/jnbAug2009.html

jfxtras JFXWorker http://jfxtras.googlecode.com/svn/site/javadoc/release-0.5/org.jfxtras.async/org.jfxtras.async.JFXWorker.html

Java Properties: http://tech.puredanger.com/java7#property

Fxbuilder: http://www.jroller.com/aalmiray/entry/griffon_gfxbuilder_fxbuilder_side_by

Disable Swing Container:http://weblogs.java.net/blog/alexfromsun/archive/2007/06/_enablingdisabl_1.html

Java Properties without Getters and Setters: http://www.artima.com/forums/flat.jsp?forum=270&thread=247837

Beans Binding (JSR 295) & Properties on JDK7: http://www.javalobby.org/java/forums/t101998.html

JSR 295: http://jcp.org/en/jsr/detail?id=295

RCP Spring rich- http://spring-rich-c.sourceforge.net/1.0.0/index.html

SAF:https://appframework.dev.java.net/intro/index.html

Oracle buys Sun : http://www.oracle.com/us/corporate/press/018363

Many users asked to me to add to the extension Table2Clipboard (T2C for friends) the ability to preserve web links and maintain the styles during tables copy.

Preserving links and other HTML tags was a very easy task, I’ve written the code very quickly and both OpenOffice Calc and Microsoft Excel have handled correctly the pasted content.

When I started to support style preservation I discovered different and ugly results on the two popular office suites making harder to write cross platform XUL code.

Actually T2C pastes to clipboard inserting data in two different formats (flavors), unicode plain text and HTML format.
When users do “Paste Special” the HTML format is pasted and applications (Excel or Calc) render inside the data sheet.

Both Excel and Calc handle only the deprecated FONT tag and a subset of TABLE tag attributes and this represents a great limitation for style preservation from T2C.

If you try to paste from Microsoft Explorer to Microsoft Excel you discover everything is copied, the styles are totally preserved but if you paste from Explorer to OpenOffice Calc all style are lost!!!

Well, Explorer inserts to clipboard also RTF formatted text and Excel works very fine with the barely public RTF file format.

Clipboard application interoperability goes to hell, HTML is not fully supported by the “Paste Special” feature available on both suites, and as usual Microsoft uses semi proprietary data formats to exchange informations between applications.

I think at least OpenOffice should improve its “Paste” feature simply adding support for HTML style attribute.

T2C can preserve correctly styles only implementing platform specific code for OpenOffice and Microsoft Office and I really hate write specific platform.

I’m considering other alternatives but I see only the darkness of C++, OLE and core dump…

Full Name Form with Validation

Introduction

Software developers creating form based applications will inevitably stumble across the single most important architectural design pattern “Model View Controller” or “MVC“ in short. This concept has paved the way for many frameworks which provide true separation of concerns. The main idea of these MVC frameworks are to separate content from presentation. In layman’s terms I call them “Forms Framework“. When building enterprise applications with a forms framework the ability to achieve rapid application development and developer productivity will increase greatly. I would like to create a series of blog entries (five parts) detailing a simple proof of concept of a mini forms framework. Below is a brief summary of the five part series:

Part 1 - What is a Forms Framework? Also a quick demo of a simple form application.
Part 2 - Requirements and design
Part 3 - Implementation details
Part 4 - Enhancements
Part 5 - Concluding thoughts

Other Form based technologies

• Mozilla – XUL – Browser based development platform
• Adobe -  XML Forms Architecture (XFA) – PDF based
• W3C – XForms - Next generation browsers would support a standard
• Apache – Struts – A Java Web based framework
• SwingML – A Java Swing based application framework
• SWIXML – A Java Swing based UI framework
• Thinlet – A Java Applet based UI framework
• WPF XAML/InfoPath – Microsoft .Net Forms architecture

Although the form based technologies listed above use vastly different ways to build form based applications, they all are basically using the MVC based architectural pattern. My intent is reuse existing Java domain objects POJOs while using JavaFX as a front-end thus providing a return on investment on legacy system domain models. While mature Java technologies like JAXB, EJB and Hibernate still dominate the Java enterprise the idea is to reuse what we already have.  JavaFX was developed from the ground up with MVC in mind such as the “Designer-Developer Workflow“. So, with a forms framework a Java Bean would bind to a Presentation Model and a JavaFX Form. I will call the mini forms framework “FXForms” framework throughout the series.

Demo

A form containing JavaFX textbox components to capture a person’s full name.

Instructions:

• Check Box to toggle two people using the same form
• Type and change information in fields, thus changing the underlying bean
• Click on Next for a transition to next form.
• Click on Back to return to form

Click here to run demo

Conclusion

Many who have already read my entry regarding JavaFX Presentation Model Pattern Using Binding. Here, I have decided to kick it up a notch and actually develop a mini forms framework to make forms development easier than ever.  JavaFX is an excellent choice to create nice looking GUI forms that will easily bind to your domain model. Next Part 2, we will take a look at requirements for a forms framework.

I am developing an API written in JavaScript for a project which requires the ability to copy data to, and retrieve data from, a clipboard within a web browser. A simple/common problem definition – but due to tight browser security, finding a solution is a bit of a nightmare. This article outlines and discusses a number of approaches for implementing a clipboard feature into your JavaScript applications.

The Ideal JavaScript Clipboard Interface

The concept of the “clipboard” is simple; it is essentially a place for storing and retrieving a single unit/piece of cloned data. The code snippet below describes this clipboard concept in terms of a JavaScript interface.

Clipboard = {
    copy : function(data) {
        //... implemention …
    },
     getData : function() {
        // … implementation …
     }
};

A simple concept, a self explanatory interface. However, the description above is vague; it does not state where “the clipboard” resides, nor does it mention if there can be more than one clipboard.

Multiple Clipboards

Unfortunately there can be more than one clipboard present. There is one “System clipboard” present when a user is logged into their profile/account (some strange people might install/configure some features on their OS to support multiple system clipboards). Ideally, all applications should use the system clipboard when copying and pasting so its users can copy and paste between all applications. However this is not always the case. For example, Cygwin uses its own clipboard for Cygwin applications and unless the user explicitly turns on a clipboard integration option, the user cannot copy and paste between Cygwin applications and non-Cygwin applications.

The Web’s Sandbox Environment

Web applications run in a sandbox environment to prevent malicious scripts from infecting a visitor’s computer. The sandbox environment restricts access to system resources, such as the file system, and unfortunately, the system clipboard. Check out this article for one example why the system clipboard is a restricted resource. Fortunately restrictions for accessing the system clipboard can be overcome. There are many approaches for accessing the system clipboard – each approach has its own trade-offs.

Internet Explorer’s clipboardData Object

Microsoft’s Internet Explorer family makes life very easy to access the system clipboard. To set the system clipboard’s text, just use the clipboardData object. Here is an example:

var didSucceed = window.clipboardData.setData('Text', 'text to copy');

To access the system’s clipboard data (in a textual format) you simply invoke:

var clipText = window.clipboardData.getData('Text');

The first time the clipboardData object is accessed IE will prompt the user to allow the script to access the system clipboard (note: if you run the script locally IE does not bother with the confirmation and automatically allows it). IE version 6 and below will not bother asking the users (unless they have some non-default security features set to a “high level”). We cannot assume that users will choose to allow the script to access the system clipboard. If they decline, the clipboardData.setData method returns false. Unfortunately the clipboardData.getData method is vague: as it returns an empty string if the user chooses to decline. This is ambiguous since the system clipboard’s contents could actually be empty! Ideally it would return null. You could either always assume that empty string is a signal for failure to access the clipboard and try use a different method (read on), or you could attempt to verify that it was a failure:

var clipText = window.clipboardData.getData('Text');
if (clipText == “”) { // Could be empty, or failed
	// Verify failure
	if (!window.clipboardData.setData('Text', clipText))
		clipText = null;
}

Note: the verification method will not display two prompts, since the first prompt will be remembered for the session.

A Sketchy Work-around: The Flash Copy Hack

Jeffrey Larson came up with a nifty solution using Adobe Flash. To copy text to the system clipboard a small flash object is embedded into the document by manipulating the DOM, and the text to be copied is passed as a parameter to the embedded object. The Flash program then takes this text and copies it to the system clipboard via the Flash API. This was a security hole in Flash up-to and including versions 9, and was patched in version 10 so that unsolicited access to the system clipboard is denied. That is, Flash requires users to physically trigger the ActionScript clipboard code via a mouse click in order to grant access.

There still exists a workaround using that is supported by Flash 9 and 10. A small JavaScript library called ZeroClipboard exploits Flash, and fools the users, by placing invisible Flash movies over button elements. Whenever a user clicks on these invisible flash movies, ZeroClipboard successfully copies text to the system clipboard since the access is technically not “unsolicited.” This is a bit cheeky, some people are calling this process “click jacking.” It could be seen as a security flaw, and later Flash releases might put an end to this clipboard exploitation mayhem once and for all – who knows.

Using ZeroClipboard will only allow copying of text to the system clipboard on mouse-clicks. It does not allow access in any other contexts, such as timers, or CTRL+C keyboard events. It is a specific solution intended for Copy buttons.

One drawback is that this option does require the browsers to have the adobe flash plugin installed. So detection of Flash support is essential. Adobe has released a simple-to-use detection kit which would do the trick. Another simple one can be found here.

Flash version 9 has a bug in Linux systems where Web browsers are unable to support transparency for embedded Flash movies. Thus ZeroClipboard is not suitable on clients with this setup.

ZeroClipboard should be named ZeroSysCopy or something similar since it only provide unidirectional access to the system clipboard. I attempted to pursue a bidirectional implementation, but the ActionScript API does not provide any way of clipboard retrieval due to security risks. Adobe’s ActionScript API for the Flex environment does provide ways of getting to the system clipboard, but only on paste events from a paste button click on a context menu, or paste commands like CTRL+V.

Using Java Applets

Jeffrey Larson’s Flash copy hack got me thinking: what about taking a similar approach using Java applets instead of Flash movies. The beauty of Java is that it can communicate directly with JavaScript, thus can support both copy and paste operations. This is possible via a technology called Liveconnect. This solution has some pricey trade-offs though.

Liveconnect

Netscape developed an API called NP API (Netscape Plugin API) which is a cross browser plugin architecture supported by all major browsers except IE today (although some IE browsers do support it – IE’s equivalent is ActiveX). Liveconnect is one way to implement NP API-based plugins using JavaScript and Java. It was first supported in Netscape 4. A plugin could implement and return an instance to a Java class. The public methods exposed by this class was the scriptable interface for the plugin. The class could be called from JavaScript and even from other Java applets running within the page with the browser marshalling the calls between the various contexts. (see http://en.wikipedia.org/wiki/NPAPI#LiveConnect). The technology has matured since then and is still supported by Mozilla browsers, and Opera. Webkit does not seem to support it anymore.

Some browsers, such as Firefox, do not ship with a Java Virtual Machine plugin, since it “bloats” the browsers download size. So like the Flash hack, it depends on a plugin, which is a bit of a concern since the JVM plugins are relatively large to download.

Sun has respecified and reimplemented the Liveconnect technology as of version 6 update 10, which to my understandings just means that it is faster, more reliable and contains a bunch of extra features not needed for the purposes of some simple clipboard code.

Implementation

There are many issues and quirks with this technology. Luckily the code will be very small and simple for the clipboard. Most browsers support the ability to directly use Java inside of JavaScript, but some browsers have issues with some things such as creating new class instances. A more reliable approach would be to store the Java clipboard code into an applet.

Try the demo here. Click here for the applet source. Note that it only works on some browsers, and most probably not on IE.

Hopefully the demo code is self-explanatory. In order to break out of the JVM sandbox environment java.security.AccessController.doPrivileged is used. Unfortunately that is not enough; after running a small test – the clipboard was found to be sandboxed. In order to access the system clipboard, the script must be digitally signed. You can sign the applet privately for free to get it running on your machine, but this is probably not practical for you. To digitally sign your applet publicly, you have to go somewhere like Verisign and purchase a certificate for your applet. This currently costs $500 (US) for one year.

Another implication worth noting is that on the first time the JavaScript talks to the Java applet, it will take a little while to load the JVM (several seconds). Once the JVM is loaded it runs smoothly.

Using Silverlight?

To the point: None of the Silverlight versions (currently up to version 3) does not provide system clipboard access. This is a shame because it interacts well with JavaScript and is supported by all the common browsers (even on Linux via Moonlight).

Mozilla’s XUL Approach

Mozilla has this inbuilt plugin called “clipboard helper” which can be accessed with JavaScript using the XUL API. Dion Almaer explored this approach, click here for a demo (try downloading it and viewing it locally on your machine).

The XUL approach has some issues, as pointed out by Dion. If you run the script locally an ugly dialog pops up containing a vague (and scary) message warning the user about the possibility of malicious code being executed. The user’s decision can be remembered. However it fails to access the clipboard when not running script from a local file. This can be overcome: One option is to set some obscure user preferences for Mozilla to allow access. This might not be practical, especially if you are planning to use the script on public sites. Another option is to digitally sign the JavaScript containing the XUL clipboard code – which of coarse is a pricey option.

Making use of execCommand

The execCommand JavaScript function is supported by all major browsers. The browsers all support the “Copy” and “Paste” commands. All browsers except for IE only expose the execCommand function for documents with design-mode turned on (for wizzywig editing).

Webkit does not protect the copy command, I wrote a post about this security hole. In both Chrome 2 and Safari 4 (on windows and mac) I managed to copy text to the system clipboard without any security warnings/promptings what-so-ever via execCommand. My assumption is that this will be the same for older versions of Webkit. This is very concerning. Mozilla throws security exceptions which can be only avoided via setting the user preferences or signing the JavaScript code. Opera and Konqueror just does not work. For IE it is possible to use this approach, as well as other approaches with MicrosoftTextRange objects, but it has no benefits over using the clipboardData object since it safeguards the copy and paste operations in the same way.

Implementation

Try it out here. The first time the copy operation is invoked, an inline document in design mode is dynamically created and appended to the main document – thus exposing the execCommand. The inline document contains an textarea and is always hidden from the user. So to copy text to the system clipboard, the textarea’s value is set to the text to be copied, then the textarea is displayed, focused and selected, and finally the execCommand("copy") method is invoked. The textarea will never be rendered (i.e. the user will not see a random flash on the page) because it is hidden straight after the copy command has executed (the UI will not refresh until after the script finishes executing).

The demo does have a scrolling issue: since the textarea is selected and focused the scrollbars will change if the iframe is not in view. You can easily overcome this behavior this by placing the iframe in a float (see below regarding keyboard events).

This script will work in IE, the first time the copy operation is executed a dialog will pop up asking the user for the script for permission to access the clipboard. Unfortunately there is no way of telling whether the user allowed or denied access. The MSDN docs specifies that execCommand returns true of false depending if the command succeeds or fails, however it will always return true even if the user denies access. Furthermore, while the prompt is displayed the users will see the internal frame rendered which might be confusing for the user (although this could be better concealed by using floats). The window.clipboardData object would be a better option, even if the user denies access via window.clipboardData, you probably would not want to blast them with any more security-risk dialogs.

Fabricating DOM Events

This is merely an idea, which is a similar approach to the execCommand approach. If it were possible to manually fire CTRL+C and CTRL+V events such that the browsers execute their “default” handlers, then by using similar trickery used with the execCommand implementation on demand access to the clipboard would be possible. However, the Web’s sandbox environment does not let JavaScript simulate user interactions (that would be very bad!). Just a thought.

Clipboard Events

IE, Webkit and FF 3+ supports up to six different clipboard events which can be invoked from context menus or key-commands like CTRL+C:

• onbeforecut
  • FF does not support this.
  • IE raises this event before a context menu is displayed and something in the document is selected.
  • IE only raises these on editable elements.
• oncut
  • IE only raises these on editable elements.
• onbeforecopy
  • FF does not support this.
  • IE and Safari raises this event before a context menu is displayed and something in the document is selected.
• oncopy
  • Only executed when about to copy something in the default handler.
  • Webkit exposes clipboardData on the event object.
• onbeforepaste
  • FF does not support this.
  • IE raises this event before a context menu is displayed and something in the document is selected.
• onpaste
  • IE only raises these on editable elements.

Webkit exposes the clipboardData object in clipboard events by attaching it to the event objects. Webkit’s clipboardData object is implemented in the same way as IE’s clipboardData object.

In order to get text from the clipboard, clipboardData.getData can only be accessed in the onpaste event. This is nice and simple:

		document.body.onpaste = function(e) {
			alert(e.clipboardData.getData("Text"));
			e.preventDefault();
		}

Note: preventing the default behavior is necessary if you are planning to handle the event, but if your code is just sniffing, then exclude the e.preventDefault() call.

Ideally the code would be similar for setting the clipboard data upon copy events. Unfortunately Webkit has a bug where you cannot set clipboard data in any of the clipboard events! You can use a work-around by using the same approach in the following section.

Using Keyboard Events

In most Web applications you do not have to worry about setting/getting the system clipboard data via key presses like CTRL+C, all browsers implement this for you. However, my API needs to get/set system clipboard data whenever the user presses clipboard key combinations like CTRL+C, on an non-editable document. Specifically: on CTRL/CMD+C/X keystrokes, the text to be copied is not the selected text in the document. And, on CTRL/CMD+V keystrokes, no matter where the focus is, the API must be able to retrieve the system clipboard text.

Webkit and FF3+ browsers’ default handlers for copying, cutting and pasting occur in the oncopy, oncut and onpaste events respectively. Browsers which do not use clipboard events execute their copy and paste code in their keydown/keypress default handlers.

Click here for the demo. Whenever a clipboard command is raised from a keyboard stroke, a textarea appears and is selected/focused. The browser’s default handler then executes its clipboard command on the selected textarea. A timer event is scheduled with no delay so that once the browsers default handler has executed its clipboard command, the timer event is queued afterward – where it then hides the textarea from view.

This approach was inspired from Webkit’s lack of support for using clipboardData.setData, I started with a solution which used the oncopy event, which was then generalized to use keyboard events. You may want to use oncopy/onpaste in Webkit/FF3+ browsers instead of keyboard commands – however there is no real benefit from this except for Chrome: Chrome’s copy button in its window’s context menu is clickable, even if nothing in the document is selected (which raises the oncopy event).

The textarea element is very small and usually displayed outside of the view-port. If the vertical and horizontal scrollbars are not at the hard top or left of the document then the textarea is briefly flashed at the top right section of the window. If for example, the float is positioned at an absolute left position of -100 (out of viewport) but the horozontial scrollbars are scrolled to 40 pixels, the scrollbars would scroll to zero (hard left) whenever the textarea is selected/focused. (Note: restoring them to their original values will just create an ugly scrollbar jolting effect).

Originally I developed a bulky solution without floats, but I stumbled across a blog that had happened to use this same approach but instead using floats (many thanks to Dion).

It is important to avoid race conditions while showing and hiding the textarea before and after the browsers’ default handlers for clipboard operations. Clipboard events are guaranteed to work. Opera queues a settimeout with zero delay after all events in the current event batch – onkeydown, onkeypress, onkeyup event sequence is seen as an event batch (see timing-and-synchronization-in-javascript) – so it is safe to use onkeydown in Opera. From my own experiments, my observations are that Firefox’s clipboard operations are executed on keypress events. IE and Webkit can only use keydown since clipboard key combinations do not get keypress events. There was no luck with getting Konqureror to work with this approach – KHTML has problems with selecting and focusing on an input element (it works sometimes).

Summary

Go here to see a summary of the explored approaches and their demos (sorry about the external link but my blog layout does not handle large tables!).

Conclusion

The “ideal interface” previously discussed is not possible: there are different contexts in which you may want to copy and retrieve data to and from the clipboard, so packaging up a universal clipboard solution is not realistic.

There is a lot of (hacky) code to get cut, copy and paste in a JavaScript application. Is it really worth the time and effort to support copy and paste? I think so. Copy and paste is extremely useful, especially for some type of web-page editor. Microsoft found that paste was the most commonly used operation in their Word application, and copy was the third most common (see http://blogs.msdn.com/jensenh/archive/2005/11/07/489864.aspx and most-used-features-commands-in-microsoft-word-and-a-few-design-lessons).

Please post feedback… don’t be shy!

Other Helpful Links/References

• http://ajaxian.com/archives/seeding-the-clipboard-in-flash10-with-zero-clipboard
• http://srp.stanford.edu/demo/
• http://trephine.org/t/index.php?title=Understanding_LiveConnectExplorer
• http://blog.pengoworks.com/index.cfm/2008/2/19/Accessing-privileged-methods-in-a-Java-Applet-via-JavaScript
• http://imagingexperts.typepad.com/imaging_experts/2006/10/javascripting_i.html

August 24th 09: SORRY BUT ALL DEMO LINKS HAVE BEEN BROKEN! All my wordpress files have been lost on my University web server! GRRRR!

Pre-emptive strike on Jupiter brings solar system to the brink of interplanetary war!

Take that, Jupiter!

Mars and Venus are monitoring the situation with bated breath.
:-O

Exactly 15 years after Shoemaker-Levy 9!

Isn’t there speculation that Jupiter serves a sort of protective function for the Earth? Incoming threats like comets and asteroids will tend to get caught in Jupiter’s gravity well, before reaching the Earth?

Maybe not:

Jupiter Both an Impact Source and Shield for Earth

Jupiter both protects and endangers us

Jupiter increases risk of comet strike on Earth

Whether they find life there or not, I think Jupiter should be called an enemy planet.

– Classic Jack Handey quote

Europa Strike, by Ian Douglas (a nom de plume of William H. Keith, Jr.)

This is the third book of the Heritage Trilogy, which in turn is the first of a trilogy of trilogies (a meta-trilogy?) about the adventures of the U.S. Marines in space. The last book of the last trilogy, Semper Human, was published only this past May. This is an example of the sub-genre of science fiction called “military SF”.

Maybe the dreaded Xul (Hunters of the Dawn) detected a nascent civilization on Jupiter, and decided to drop an asteroid on it!

Today’s Wallpaper:

This wallpaper is by DeviantArt’s RomaneAR. Check out some more of his (or her, I’m not sure) work at RomaneAR.Deviantart.com.

Have you heard about the Extend Firefox competition? For the upcoming release of Firefox 3.5 (RC1 was released yesterday) there’s a competition for development of new (or updated w/ significant improvement) addons for 3.5. There are some tight prizes, including some awesome software and a new 15” MACBOOK (I am drooling at the thought). Also some 13” ones for subcategories. Check out the details at the prior link. I know I am entering (once I teach myself how to script XUL and Javascript that is)- possibly twice even.

]]> http://calvinjnr.wordpress.com/2009/06/08/tech-director-london-upto-70k/ Mon, 08 Jun 2009 16:59:41 +0000 calvinjnr http://calvinjnr.wordpress.com/2009/06/08/tech-director-london-upto-70k/

Reporting to the CEO and founder, you will design, implement and manage the key processes for managing all technical, operational, support and maintenance functions of the enterprise in all markets, starting with the US launch, the UK, Scandinavian, German, Swiss and Spanish markets planned for the latter part of this year, and other international markets in the following years.

RESPONSIBILITIES:

Upgrade, implement, and continually refine the internal technical processes of the company including;

* Production environment

- Hardware Architecture design (Including network components)

- Service Management

- Change Control Management

* Program/Project Management

- Technical Planning

- Operational Planning

* Software & Applications

- Product development

~ Internal and or External Resourcing

~ Server development using PHP, Perl, & Java  on Linux, Apache, MYSQL Architectures

~ Client development using Javascript (Mootools & Jquery libraries) with Ajax, Java, Flash with Red5

~ Xul and Jetpack based browser development

~ Specialized libraries: Mencoder & Ffmpeg, JaxCapture in Java

~ Bespin of Mozilla Labs & Netbeans

~ Interface, Functional & Database Design on Server Side

~ Client browser adaptation, creation and innovation

- Continuous innovation and adaptation on software architecture Code Maintenance

- Documentation

* Quality Assurance

- Requirement Definitions

- User and Test Cases

- White & Black Box Testing

* Reporting

- Financial, Operational and Technical Metrics

- Efficiency Matrix on Business Objectives

* Overall IT Functions

- Corporate Network

- PC and Telephony

REQUIREMENTS:

* Between 3-5 years in a similar role;

* In depth expertise and experience in programming in the following languages: PHP, Perl, Java, Java Script;

* Expertise in Ajax, Flash, Xul & Jetpack;

* Vast experience with client browsers, their capabilities and interoperability with different Web Servers;

* In depth understanding of the configuration potentials of the main web servers IIS; Apache etc;

* Mathematically inclined;

* Excellent Business Analysis skills;

* Expertise and experience in the SQL language, optimal SQL performance, database modeling and data storage:

* Experience managing or being part of a Q&A team;

* Excellent scheduling & project management skills;

* Extreme commitment to meeting time & cost schedules;

* Highly motivated by a start-up environment;

* Excellent communication skills;

* Detail oriented and analytical thinker;

* Pro-active personality;

* Excellent English. Additional language abilities a plus;

* Usability experience and expertise a plus;

* Willingness to relocate to Madrid, Spain for a minimum initial period (6-12 months)

Neil Clements

neil@majorplayers.co.uk

Edited on 9 June 2009 Mozilla guys decided to add a getter for imageURL so no extension will be affected by new property mediaURL replacement, you can read the full story at bug 497098.

Another time Mozilla community demonstrates its strength, why nobody considered the impact before modification is another story

–

Today a ViewSourceWith user filed a bug about a regression on Firefox 3.5b4, causing VSW to no more open images

After dressing the debug uniform I started to investigate the problem.

I’ve realized the object gContextMenu doesn’t more contain the property imageURL used by VSW and maybe many other extensions.

The imageURL property has been renamed/refactored to mediaURL.

Honestly the new name fits better its new usage and maybe the imageURL property is not intended for usage from extensions.

The poor gContextMenu documentation doesn’t describe imageURL so maybe I abused its usage.

I think gContextMenu need a better documentation because its usage is so sexy inside extensions.

The workaround

A string find/replace inside code fixed the bug, to maintain compatibility with FF 3.0.x I’ve modified the code as shown below

var imageURL = gContextMenu.imageURL || gContextMenu.mediaURL;

Well its been a long time coming, a lot of research, and a ton of learning, but here it is.  XRap version 1.0.  You can now successfully create a Windows Installer(msi) if you are working on Windows, a tarred bunzip2 (tar.bz2) archive if you are working on Linux, and an Apple Disk Image (dmg) if you are working on a Mac.  I have worked out the bugs which I am aware of, but will definately still be working on any new ones that come up.  

Here are the steps for each platform:

Windows:

1. Open up XRap, and select the root of your XULRunner application directory, and click next.
2. Select the type of License you would like to attach to your application from the drop-down list of available licenses.  You can optionally select your own license, or no license at all. Once you have selected your license option, click next
3. You must now select the type of installer you would like your end-user to have.
   • Automatic Installer – Will automatically install your application on to the end-user computer, with no wizard.
   • Wizard Installer – Will start the Windows Installer wizard, showing your license agreement on a single page, and giving the option for the end-user to install your application to a custom path.
   • Minimal Wizard Installer – Will start the Windows Installer wizard, using only one page, which shows the license agreement, then installs your application to the default directory.
4. Once your have selected the type of installer you want, click next, and XRap will package your application
5. When successfully completed, XRap will go to the last page where you can open the directory of where your new msi will be located, and your can close XRap.

Linux

1. Open up XRap, and select the root of your XULRunner application directory, and click next.
2. Select the type of License you would like to attach to your application from the drop-down list of available licenses.  You can optionally select your own license, or no license at all. Once you have selected your license option, click next
3. You can optionally select to create a zip file of your application for distribution on Windows.  Click next to continue.
4. XRap will now package your application into a tar.bz2, and optionally a zip file if selected.
5. When successfully completed, XRap will go to the last page where you can open the directory of where your tar.bz2 file will be located, and your can close XRap.

Mac

1. Open up XRap, and select where your XULRunner application (with the .app extension) is located, and click next.
2. Select the type of License you would like to attach to your application from the drop-down list of available licenses.  You can optionally select your own license, or no license at all. Once you have selected your license option, click next
3. XRap will now package your application into a dmg.
4. When successfully completed, XRap will go to the last page where you can open the directory of where your dmg file will be located, and your can close XRap.

I hope to release an updated version where you can create simple packages for different platforms.  Similar to how you can create a zip file on Linux for distribution on Windows.  My current plans are:

Windows:

1. Create a zip file for release on Linux
2. Create a zip file for release on Mac, I will have to refactor the directory structure so that it aligns with the Mac model

Linux

1. Create a zip file for release on Mac, I will have to refactor the directory structure so that it aligns with the Mac model

Mac

1. Create a zip file for release on both Windows and Linux

I plan to work on it over the summer, and hope to be compeleted within the next couple months.  Please post any new bugs found on xrap.sourceforge.net.

Enjoy!

XRap Version 1.0