Building next-generation Web Apps with WebSocket and HTML5 from JAX TV on Vimeo.

In meinem Fall habe ich mich für das Grails-UI Plugin entschieden. Dieses Plugin bietet eine schöne Integration von YUI und YUI wiederum bietet ein umfangreiches Set an Rich UI Komponenten.

Das Plugin war schnell installiert und die Integration in Grails war auch relativ leicht umzusetzen. Vor allem das Tag <gui:dataTable> kam bei mir stark zum Einsatz. Irgendwann allerdings kam ich zu dem Punkt, wo ich mich mit Internationalisierung auseinandersetzen musste und dieses Problem war leider nur sehr dürftig beschrieben. Aus diesem Grund will ich heute kurz aufzeigen was man hierfür alles tun muss.

i18n für YUI

Um YUI zu internationalisieren muss man ein wenig in der offiziellen Doku suchen. Leider habe ich kein durchgängiges Konzept erkennen können. Teilweise müssen einfach statische JS Variablen umdefiniert werden, teilweise muss eine Variable im prototype überschrieben werden und teilweise müssen sog. Data Formatter definiert werden, die z.B. eine Datumszelle entsprechend formatieren.

  YAHOO.widget.Calendar.DEFAULT_CONFIG.NAV.value = true;
  YAHOO.widget.Calendar.DEFAULT_CONFIG.CLOSE.value = "Schlie\u00DFen"

  // Correct formats for Germany: dd.mm.yyyy, dd.mm, mm.yyyy
  YAHOO.widget.Calendar.DEFAULT_CONFIG.DATE_FIELD_DELIMITER.value = ".";

  YAHOO.widget.Calendar.DEFAULT_CONFIG.MDY_DAY_POSITION.value = 1;
  YAHOO.widget.Calendar.DEFAULT_CONFIG.MDY_MONTH_POSITION.value = 2;
  YAHOO.widget.Calendar.DEFAULT_CONFIG.MDY_YEAR_POSITION.value = 3;

  YAHOO.widget.Calendar.DEFAULT_CONFIG.MD_DAY_POSITION.value = 1;
  YAHOO.widget.Calendar.DEFAULT_CONFIG.MD_MONTH_POSITION.value = 2;

  // Date labels for German locale
  YAHOO.widget.Calendar.DEFAULT_CONFIG.MONTHS_SHORT.value = ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
  YAHOO.widget.Calendar.DEFAULT_CONFIG.MONTHS_LONG.value = ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
  YAHOO.widget.Calendar.DEFAULT_CONFIG.WEEKDAYS_1CHAR.value = ["S", "M", "D", "M", "D", "F", "S"];
  YAHOO.widget.Calendar.DEFAULT_CONFIG.WEEKDAYS_SHORT.value = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
  YAHOO.widget.Calendar.DEFAULT_CONFIG.WEEKDAYS_MEDIUM.value = ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"];
  YAHOO.widget.Calendar.DEFAULT_CONFIG.WEEKDAYS_LONG.value = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];

  // Start the week on a Monday (Sunday == 0)
  YAHOO.widget.Calendar.DEFAULT_CONFIG.START_WEEKDAY.value = 1;

  //CalendarNavigator show up if clicked on the current month
  YAHOO.widget.CalendarNavigator.DEFAULT_CONFIG.strings.submit = "OK"
  YAHOO.widget.CalendarNavigator.DEFAULT_CONFIG.strings.cancel = "Abbr."
  YAHOO.widget.CalendarNavigator.DEFAULT_CONFIG.strings.invalidYear = "Das Jahr muss eine Zahl sein."
  YAHOO.widget.CalendarNavigator.DEFAULT_CONFIG.strings.month = "Monat"
  YAHOO.widget.CalendarNavigator.DEFAULT_CONFIG.strings.year = "Jahr"

    YAHOO.widget.BaseCellEditor.prototype.LABEL_SAVE = "OK"
    YAHOO.widget.BaseCellEditor.prototype.LABEL_CANCEL = "Abbr."

    /*
     * BUGFIX for YUI < 2.9
     * If a date cell contains a null value the cell editor calendar does not show up.
     * Till we're not using YUI 2.9 and above this is the fix for it.
     *
     * http://yuilibrary.com/projects/yui2/ticket/2529117
     */
    YAHOO.widget.DateCellEditor.prototype.resetForm = function() {
      var value = this.value || new Date();
      var selectedValue = (value.getMonth()+1)+"/"+value.getDate()+"/"+value.getFullYear();
      this.calendar.cfg.setProperty("selected",selectedValue,false);
      this.calendar.render();
    };

    YAHOO.widget.DataTable.Formatter.date = function(elCell, oRecord, oColumn, oData) {
      var oDate = oData;
      if(oDate instanceof Date) {
        elCell.innerHTML = YAHOO.util.Date.format(oDate, { format: "%d.%m.%Y"});
      } else {
        elCell.innerHTML = '';
      }
    };

Damit hat man zumindest den reinen YUI DataTable umgestellt. Der große Teil ist hier einfach die Übersetzung der englischen Strings in die jeweilige Zielsprache. Ein kleinerer Teil ist die Verwendung eines speziellen DateFormatters, damit in der Zelle selbst ein deutsches Format verwendet wird, und zum Schluss noch ein Bugfix für YUI selbst, denn das Grails Plugin verwendet momentan noch YUI in der Version 2.8. In dieser Version ist es unmöglich für eine leere Datums Tabellenzelle einen neuen Wert zu definieren. Sollte das Grails Plugin irgendwann YUI die Version 2.9 verwenden entfällt dieser Bugfix.

i18n für Grails

Hat man YUI nun eine andere Sprache beigebracht, muss man sich jetzt noch um den Grails Teil kümmern. Folgender Template Code demonstriert dies kurz.

        <!-- http://jira.grails.org/browse/GPUI-250 -->
        <g:set var="i18nfirstName" value="${message(code: 'user.firstName.label', default: 'First Name')}"/>
        <g:set var="i18nlastName" value="${message(code: 'user.lastName.label', default: 'Last Name')}" />
        <g:set var="i18ndate" value="${message(code: 'user.date.label', default: 'Date')}" />

        <g:set var="i18nfirstPage" value="${message(code: 'disy.paginator.firstPage.label', default: 'First Page')}" />
        <g:set var="i18npreviousPage" value="${message(code: 'disy.paginator.previousPage.label', default: 'Previous Page')}" />
        <g:set var="i18nnextPage" value="${message(code: 'disy.paginator.nextPage.label', default: 'Next Page')}" />
        <g:set var="i18nlastPage" value="${message(code: 'disy.paginator.lastPage.label', default: 'Last Page')}" />

        <gui:dataTable
          id="myList"
          selectionMode="standard"
          draggableColumns="true"
          sortedBy="lastName"
          columnDefs="[
                  [id:'Id',
                   hidden: true ],

                  [lastName: i18nlastName,
                   formatter:  'text' ,
                   editor:[controller:'myController', action:'tableChange', onSuccess:'successCallback', onFailure:'failureCallback'],
                   sortable:true,
                   resizeable: true],

                  [firstName: i18nfirstName,
                   formatter:  'text' ,
                   editor:[controller:'myController', action:'tableChange', onSuccess:'successCallback', onFailure:'failureCallback'],
                   sortable:true,
                   resizeable: true],

                  [date: i18ndate,
                   formatter:  'date',
                   editor:[controller:'myController', action:'tableChange', onSuccess:'successCallback', onFailure:'failureCallback'],
                   sortable:true,
                   resizeable: true]]"
          allowExclusiveSort='true'
          controller="myController" action="listJSON"
          rowsPerPage="30"
          MSG_EMPTY="${message(code: 'dataTable.empty.label', default: 'No records found.')}"
          MSG_ERROR="${message(code: 'dataTable.error.label', default: 'Data error.')}"
          MSG_LOADING="${message(code: 'dataTable.loading.label', default: 'Loading...')}"
          paginatorConfig="[
            firstPageLinkLabel: '&lt;&lt;',
            firstPageLinkTitle: i18nfirstPage,
            previousPageLinkLabel: '&lt;',
            previousPageLinkTitle: i18npreviousPage,
            nextPageLinkLabel: '&gt;',
            nextPageLinkTitle: i18nnextPage,
            lastPageLinkLabel: '&gt;&gt;',
            lastPageLinkTitle: i18nlastPage
          ]" />

HIerbei fällt folgendes auf:

• Der Pager wird als paginatorConfig umdefiniert, damit dieser auch in der gewünschten Zielsprache ist.
• Die Default Texte für einen leeren DataTable (MSG_EMPTY, MSG_ERROR, MSG_LOADING) werden ebenfalls definiert.
• Alle Zellenüberschriften werden zuvor als Grails Variable angelegt und verwendet. Dies ist leider noch ein Feature Request für gui:dataTable und vielleicht wird dies in absehbarer Zeit umgesetzt.

Damit hat man nun einen DataTable, der fast fertig ist. Fast deswegen, weil die übermittelten Werte des YUI DataTable auf Controller Seite noch formatiert werden müssen. Werden neue Datumswerte ausgewählt, dann überträgt YUI dies in einem bestimmten DateFormat, welches wir auf Grails Seite bei einem AJAX Update entsprechend in unser Date parsen müssen.

    //Parse param
    if (params.field == 'date') {
      SimpleDateFormat formatter = new java.text.SimpleDateFormat("E MMM dd yyyy HH:mm:ss ZZZZZZZ", Locale.ROOT);
      myObject."$params.field" = formatter.fomrmat(params.newValue)
    }

Haben wir all diese Schritte entsprechend umgesetzt, sollten wir nun in der Lage sein einen internationalisierten gui:dataTable zu verwenden.

Los gehts!

Und wenn wir schon beim Thema Android Entwicklung sind. Wenn euch unter dem Stichwort Android Annotations nichts einfällt, dann werft unbedingt auch ein Blick hierauf. Gerade am Anfang erleichtert es einem die App Entwicklung enorm!

Also tut euch und dem DB Admin einen Gefallen und werft einen kurzen Blick auf folgendes Video. Schaden kann es nicht ;)

Optimierung von JPA-Anwendungen from JAX TV on Vimeo.

Umfangreiche Änderungen oder neue Killer Features sucht man leider vergeblich. Allerdings gibt es die ein oder andere Verbesserung, die einem die tägliche Entwicklerarbeit erleichtert. Derjenige, der sich noch nicht mit den neuen Features von Java 7 beschäftigt hat, empfehle ich die zugeschnitten Videos des Java Launch Events. Sie bieten eine kurze Einführung und Übersicht über die neuen Features, wie z.B.:

• Strings in switch
• Multi-Catch
• try-with-resources
• Varargs Warnungen
• Diamond Operatoren

Ganz anders sieht es allerdings aus wenn man das gleiche in JavaScript machen will. JAXB gibt es für JavaScript leider nicht und das parsen von XML in JavaScript ist leider auch nicht wirklich komfortabel. Auch wenn JSON mehr und mehr auf dem Vormarsch ist, kommt man teilweise doch nicht drum herum XML zu verarbeiten. Wie schön wäre es da, wenn man die gleichen komfortablen Mechanismen wie in Java hätte.

Nun, die gibt es. Auf meine Streifzügen durchs Web bin ich heute auf das Projekt Jsonix gestoßen. Dieses Projekt orientiert sich eindeutig am JAXB Paradigma. Es bietet einem die gleichen komfortablen Mechanismen und es nimmt einem die lästige Arbeit ab XML in JavaScript Objekte zu wandeln.

Kleiner Vorgeschmack gefällig?

Mal angenommen wir wollen folgendes XML File in JavaScript einlesen und in JSON verwandeln.

  
    Alice Smith
    123 Maple Street
    Mill Valley
    CA
    90952
  
  
    Robert Smith
    8 Oak Avenue
    Old Town
    PA
    95819
  
  Hurry, my lawn is going wild!
  
    
Lawnmower
      1
      148.95
      Confirm this is electric
    
    
Baby Monitor
      1
      39.98
      1999-05-21
    
  

Um dieses XML File einzulesen müssen wir in Jsonix folgende Zeilen Code schreiben.

var PO = { };
var context = new Jsonix.Context([ PO ]);
var unmarshaller = context.createUnmarshaller();
unmarshaller.unmarshalURL('/org/hisrc/jsonix/samples/po/test/po-0.xml',
  function(result) {
    assertEquals('Alice Smith', result.value.shipTo.name);
    assertEquals('Baby Monitor', result.value.item[1].productName);
  }
);

Sieht gut aus? Stimmt! Der geneigte JAXB User erkennt deutlich die Parallelen. Meiner Meinung nach ist dies eine deutliche Erleichterung um XML mit JavaScript einzulesen. Jsonix hat auf jeden Fall meine Aufmerksamkeit verdient.

Im Java Bereich gab es für mich eigentlich immer nur die JAX, doch als ich vor Monaten das Vortragsprogramm dieser Veranstaltung entdeckte habe ich mich ehrlich gefragt warum dies überhaupt so ist? Gut, die Veranstaltung dauert nur einen Tag, doch dafür ist die Themenauswahl mindestens genauso interessant. Vergleicht man dann noch die Preise dieser beiden Veranstaltung fällt einem die Entscheidung leicht.

Ich bin auf jeden Fall schon sehr gespannt auf die JUG und ich werde darüber natürlich bloggen. Hoffentlich werden meine Erwartungen erfüllt und vielleicht sieht man sich ja dort?

Webinar 1: Starting with RichFaces
This session will cover everything you need to start using RichFaces. You will learn the most important concepts and features in RichFaces. We will start with a simple JSF application and then add AJAX features to it. Topics covered include RichFaces installation, how to send an AJAX request, and how to do partial page rendering. After this session, attendees will be able to use RichFaces in their applications.

Webinar #2: More RichFaces Features and Concepts
The second session includes a quick review “Starting with RichFaces”, then covers more advanced features and concepts such as deciding what to process on the server, using the “a4j:region” tag, and looking at various re-rendering options. More “a4j:” tags will be covered as well.

Webinar #3: RichFaces UI Components
The third session will demonstrate and showcase the various UI components from the “rich:” tag library. This library consists of a large number of out-of-the-box ready-to-use AJAX JSF components.

Webinar #4: RichFaces Skins
The fourth session will cover the “skin-ability” features in RichFaces. Attendees will learn how to use built-in skins, how to change skins, and how to load new skins at runtime. Next, we will learn how to create new skins. In addition, standard component “skin-ability” will be covered.

Video: Jason van Zyl on Maven 3. (52:48)