Archive for the ‘Components’ Category

* QUnit Server

Posted on March 1st, 2010 by Dave Johnson. Filed under Components, JavaScript, Testing.


QUnit is a great little JavaScript test framework written by none other than John Resig of jQuery fame.

I love how easy it is to write tests, especially asynchronous ones, with QUnit and so was quick to start using it for my JavaScript tests.

The one thing that I found it lacked was support for continuous integration products like Hudson, CruiseControl or Continuum. So I figured that I would change that.

For a long time I have been using JsUnit along with JsUnit Server to merge in client side JavaScript test results with a server side test integration workflow. Essentially, JsUnit Server is a Jetty server and JsUnit posts back a form with test results to that server, which logs the results to standard JUnit formatted test results files. Those files can then be read by most continuous integration products and included in their reporting.

What I decided to do was hack QUnit so that it too could submit test results back to the JsUnit Server in the same format that JsUnit submits results and could therefore continue using the same JsUnit Server workflow and simply change the client JavaScript test framework to QUnit. It worked like a charm!

I wrote a couple of simple function that in the background dynamically create an HTML form in the QUnit test page and add the results to the form as each test is run. When the tests are complete the page submits back to the JsUnit Server and the test results are logged as they were when I was using JsUnit.

It is some pretty simple changes but does make using QUnit that much better, especially if you were hesitant to switch just because the continuous integration support was not there for QUnit.

Check it out on GitHub.

Tags: , , , .



* Rails Timezones

Posted on October 5th, 2008 by Dave Johnson. Filed under AJAX, Components, Flex, Uncategorized, Web.


In my spare time I have been working on a geo-location application that runs on a BlackBerry mobile phone connecting to a Rails server where the geo data is stored.

If you happen to still be using Rails < 2.1 then this may be interesting, however, with the recent release of 2.1 timezones have been fixed up pretty well. Of course I wanted to get something that worked for my application in pre 2.1 days so I rolled together a few different libraries that seems to work pretty well. Having said that, the JavaScript will help you determine a users timezone no matter what version of Rails you are using.

The particular use case that I want to hit is that people can login to the web application from wherever they want and the application will automagically display the times in the timezone of the user viewing the site - not the timezone of the user that created the geo data and not the timezone of the server.

The general approach taken is to get the users timezone offset through JavaScript in the browser, then save that in the users profile, and then have a helper method to convert any times that are saved in the servers timezone to the users local zone.

Prerequisites

Gems: tzinfo (0.3.9, 0.3.8), tztime (0.1.0)

Plugins, tzinfo_timezone, tztime

Now for the code

So how do we figure out the users timezone? Through JavaScript of course! In application.js put the following script at the top - don’t put it on the onload event since it should set as soon as a user hits the page:


Cookie.set("tz", (new Date()).getTimezoneOffset());

This sets a cookie in the browsr to be the JavaScript timezone offset, which we will use later on the server. Note that this is using a simple cookie abstraction.

Now in application.rb we need some magic that will take that timezone offset from the cookie and update the users profile with their current timezone. This will be achieved with an around_filter (damn I love around filters) like so:


around_filter :set_timezone

def set_timezone
  if logged_in? && browser_timezone && (browser_timezone.name != current_user.time_zone || current_user.time_zone.nil?)
    current_user.update_attribute(:time_zone, browser_timezone.name)
  end
  TzTime.zone = logged_in? ? current_user.time_zone : browser_timezone
  yield
  TzTime.reset!
end

def browser_timezone
  return nil if cookies[:tz].blank?
  @browser_timezone ||= begin
    min = cookies[:tz].to_i
    TimeZone[-min/60]
  end
end

That takes care of getting the users current timezone. Now all we have left is to make it accessible to the application with a simple function in the application_helper.rb as follows:


def local_time(time_at)
  TimeZone[TzTime.zone].utc_to_local(time_at.utc)
end

Finally, we can just call local_time from anywhere passing in a time that is in the servers timezone from the database:


local_time(location.updated_at)

So if you are stuck on Rails < 2.1 that is a good approach to getting timezones working.

.



* Complete UI Q3 Released

Posted on October 2nd, 2007 by Dave Johnson. Filed under AJAX, Components, Nitobi, Uncategorized, dreamweaver.


This time around we left the major Complete UI release in Beta for a month to give us a bit more time to work out all the quirks with our major new feature - Complete UI Dreamweaver Extensions. Now you can go from a database to an Ajax application in minutes using the awesome Dreamweaver Extensions that allow you drag and drop Nitobi components into your web page and have server CRUD (ASP, PHP, JSP, CFM) generated according to the database that you are connecting to!

Check out a screencast here - very cool stuff!

Also if you are at Adobe MAX in Chicago ping Andre or Alexei who are there representing Nitobi and presented an Inspire session today about AIR and Ajax!

Tags: , .



* IronRuby aka Ruby.NET Pre-Alpha Release

Posted on July 29th, 2007 by Dave Johnson. Filed under Components, Declarative Programming, Uncategorized.


About a week ago Scott G over a MS blogged about the pre-alpha release of IronRuby. Very cool stuff.

For those that don’t know, IronRuby and friends (IronPython, JavaScript, Dynamic VB) is a project that is, like JRuby for Java, enabling Ruby to run on top of the .NET Framework. This means that your dynamic Ruby script can also have access to all the underlying .NET goodness (and badness). It will be very interesting to see how the performance is.

It is also really cool that they are doing Python and JavaScript as well. It’s like Phobos and JRuby all in one neat little package with a dash of python for good measure. Oh have I forgotten one of the languages? I can’t help but laugh when I see Dynamic VB.

Here is a code snippet from Scott’s post with some Ruby script using WPF - pretty cool stuff!

.



* Declarative Ajax and Flex Interop

Posted on July 3rd, 2007 by Dave Johnson. Filed under AJAX, Components, Declarative Programming, FABridge, Flash, Flex, Grid, RIA, Web2.0, XSLT.


This is some code that I wrote about a year ago at the Flex Component Developers Summit (and more recently presented at XTech) to show how declarative Ajax and Flex can work together to create dynamic, rich and compelling Internet applications.

The idea is simple. Take a single declaration - in this case XHTML - of some user-interface component and then use it to build a UI using either Ajax or Flex. All this from just one declaration.

What happens is that we take a single declarative data grid and converts it using XSLT on the client (so it only works Firefox, IE and soon Safari) into a declarative Nitobi Ajax Grid and to a Flex declarative MXML DataGrid. I use the FABridge to get the string of MXML generated from the XSL transformation into a stub Flex application where a Flex DataGrid is instantiated (deserialized) from the MXML declaration. It can an be seen live here (note: create the Flex grid first then the Ajax one - something funny that I can’t be bothered to fix ;)) and the code can be downloaded from here.

So by using a declarative approach and a little XSLT on the client we were able to quickly choose between using a Flex DataGrid or a Nitobi Ajax Grid to display our tabular data in!

Really the most interesting part is the MXML deserialization stuff. The only contents of the Flex application are two functions for performing the deserialization. I have listed the main part of the code that takes an XML document of an MXML DataGrid declaration and actually instantiates a DataGrid according to that declaration. It’s pretty quick and dirty but at least gets the right thing out! Essentially it just looks at each XML element and creates an Object out of it and sets all the properties on it from the XML element attributes and then recurses through the child elements doing the same. There are some special attributes though like datasources that need a little more care.


public function initGrid(html) {
  // setup a tagname to datatype hash - maybe this already exists somewhere
  controls['DataGrid'] = ‘mx.controls.DataGrid’;
  controls['ArrayCollection'] = ‘mx.collections.ArrayCollection’;
  controls['Object'] = ‘Object’;
  controls['columns'] = ‘Array’;
  controls['DataGridColumn'] = ‘mx.controls.dataGridClasses.DataGridColumn’;

  // load the HTML into XML DOM
  var mxml:XML = new XML(’<root>’+html+’</root>’);

  parseXml(AjaxBox, mxml);
}

public function parseXml(parent, mxml) {
  var item:String;
  // get all the elements in our XML doc - this should of course walk the xml tree recursively
  var itemList:XMLList = mxml.elements(’*');

  for (item in itemList) {
    // get the tag name of the XML node
    var tagName:String = itemList[item].localName();

    // get the class by using getDefinitionByName() method
    var ClassReference:Class = Class(getDefinitionByName(controls[tagName]));

    // create an instance of the class
    var myObject:Object = new ClassReference();

    // get all the attributes and set the properties
    var attrList:XMLList = XML(itemList[item]).attributes();
    for (var attr:String in attrList) {
      myObject[attrList[attr].localName()] = attrList[attr].toString();
    }

    // now parse the children of this node
    parseXml(myObject, itemList[item]);

    if (parent.hasOwnProperty(tagName)) {
      parent[tagName] = myObject;
    } else if (parent.hasOwnProperty(”length”)) {
      if (parent.hasOwnProperty(”source”)) {
        parent.source.push(myObject);
      } else {
        parent.push(myObject);
      }
    } else if (parent.hasOwnProperty(”dataProvider”) && tagName == “ArrayCollection”) {
      // This means we need to create a datasource for the Grid
      parent.dataProvider = myObject;
    } else {
      parent.addChild(DisplayObject(myObject));
    }
  }
}

.



* Grid With AIR and Safari 3

Posted on June 14th, 2007 by Dave Johnson. Filed under AJAX, Components, Nitobi, Web, XSLT, air, apollo, completeui, safari.


With the release of Safari 3 Beta and the recent renaming and Beta release of AIR (formerly Apollo) from Adobe, we have started to work on getting our components running in both of them.

We have run across a few problems - the biggest of which is the lack of any decent debugging tools for either one. I am sure that this will soon change. Currently the best thing around for debugging is Scout.

Grid is being a bit of a challenge given that there is no XSLT support in AIR - though there is in Safari 3. Jake and I got it almost working with a day or so of work / screaming at our computers. Here is a screenshot of what we got so far:

We are pretty happy with the progress and the fact that no one has been hurt - yet ;)
There a few known problems in AIR currently such as CSS opacity not working, table width=0px with colgroups does not work and a few other small things like that. We are certainly happy that Safari 3 and AIR both support addRule and insertRule for working with CSS while a little disappointed in no XSLT support in AIR yet good support in Safari 3.

.



* Complete UI Java Updates - Struts, Eclipse and Taglib

Posted on April 20th, 2007 by Dave Johnson. Filed under AJAX, Components, Eclipse, Nitobi, Uncategorized, java, jsp.


I posted some of our initial JSP taglib support for the Nitobi Complete UI and yesterday we posted some more good stuff!

Mike has been hard at work making a plugin for Eclipse WTP so that you can drag and drop your Nitobi components in the Eclipse IDE. He has also put together a plugin for Stuts 2. And for those that just want plain old JSP support he has also updated the JSP taglib. Go check out Mike’s post for the details of just download it below and give it a go!

Eclipse Plugin 0.8 (This is plugin uses the trial versions of the components)
Struts 2 Plugin 0.8
Nitobi Taglib 0.8 (some small kinks worked out)
Nitobi Server Library 1.0.1 (This updated library (used to be called nitobicomponents.jar) is needed for the Struts 2 plugin)

Tags: , .



* Declarative Google Maps

Posted on April 7th, 2007 by Dave Johnson. Filed under AJAX, Components, Declarative Programming, Google, Map, Web2.0, XML.


We are pretty big fans of the declarative approach to Ajax. Our up and coming Complete UI Ajax component product line is firmly based around declarative programming. The idea behind this is that the developer can use HTML like markup to define the majority of the component functionality while still being able to write a little bit of JavaScript to get the extra 20% of custom functionality that they need.

As an example of this I have put together a declarative Google Map. Currently it only supports a few declarative tags but it at least serves to give you an idea of how a regular JavaScript component could be wrapped declaratively. It could also be simplified quite a bit by building a JavaScript component from the ground up with declarative programming in mind - as the Nitobi framework enables of course :)
If you went about putting a Google Map into a web page imperatively, it would look something like this:


var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(49.290327, -123.11348), 12);
var polyline = new GPolyline([
    new GLatLng(49.265788, -123.069877),
    new GLatLng(49.276988, -123.069534),
    new GLatLng(49.276988, -123.099746),
    new GLatLng(49.278108, -123.112106),
    new GLatLng(49.2949043, -123.136825),
    new GLatLng(49.3029641, -123.145065)
    ], “#ff0000″, 10);
map.addOverlay(polyline);

The result of this is a nice Google Map that shows part of my daily bike ride to work. If you view the source of the web page you will see just that same code.

On the other hand, we could make that same web page declaratively meaning that we don’t have any extra JavaScript code to write but instead define our Google Map through custom HTML markup. This has the advantage, on top of the many advantages (and disadvantages) of declarative programming in general, that most web developers are familiar with HTML markup though might not be as comfortable with writing JavaScript code. So the equivalent declarative Google Map might look like this:


<g:map id="map" width="370px" height="380px" smallmapcontrol="true" maptypecontrol="true">
  <g:center zoom="12">
    <g:point lat="49.2853" lng="-123.11348"></g:point>
  </g:center>
  <g:polyline color="#FF0000" size="10">
    <g:point lat="49.265788" lng="-123.069877"></g:point>
    <g:point lat="49.276988" lng="-123.069534"></g:point>
    <g:point lat="49.276988" lng="-123.099746"></g:point>
    <g:point lat="49.278108" lng="-123.112106"></g:point>
    <g:point lat="49.294904" lng="-123.136825"></g:point>
  </g:polyline>
</g:map>

All the same elements are there as the imperative JavaScript version but there is no code to worry about. And, of course, the result is also the same. Here is a direct link to the source code - the top 1/3 of the code is the only interesting stuff, the rest is just helper functions that poached from the Nitobi Ajax Toolkit.

Take a look at the source code if you are interested in the details. Btw it currently has only been tested in Firefox 1.5 and IE 6/7.

This will be some of what I talk about in my session at XTech.

.



* Complete UI JSP Taglib

Posted on April 5th, 2007 by Dave Johnson. Filed under AJAX, Components, Declarative Programming, Web, completeui, jsp.


We’ve had a number of customers request a JSP Taglib for our components and we can finally say here it is in all its fabulous glory - thanks to the great work of Mike. A nice thing with the taglib is you don’t have to worry about including the required javascript and stylesheet files, which I hope will be a boon for those using templates. The tag will automatically add the needed scripts and styles to your page (but you can use the toolkitjsurl, componentjsurl, and componentcssurl attributes to change where to find them). Plus, you don’t have to worry about forgetting the namespace declaration - shock horror! And of course, in Eclipse (and no doubt other IDEs) you get good ol’ code completion for free. Huzzah.

Like any other taglib, just put the jar file in your WEB-INF/lib and include it in your web.xml file, like so:

<jsp-config>
  <taglib>
    <taglib-uri>http://www.nitobi.com</taglib-uri>
    <taglib-location>/WEB-INF/lib/nitobi-cui-taglib.jar</taglib-location>
  </taglib>
</jsp-config>

Suggestions are, of course, very welcome. So pipe up if you’ve got some in the comments below or on the forum! We’d love any sort of feedback about the taglib and more generally how you think we can improve our components for use in a Java EE environment.

Next in the pipeline is integration with Eclipse and Netbeans and we’ll also have some tutorials detailing how to use our components in Struts and Spring real soon.

.



* Sweet CompleteUI Screencast Goodness!

Posted on April 3rd, 2007 by Dave Johnson. Filed under AJAX, Components, JavaScript, Nitobi, completeui.


So I finally got around to putting together some screencasts of all the components in the CompleteUI Ajax suite we released in March. These are not highly technical, they are meant to highlight the UI features that will benefit the end users so they’re applicable to both a developer and non-geek audience alike. The first one is an overview of all the components (~15min) the rest compiled to show individual components. Andre was even nice enough to edit them all together for me. They’re all at native resolution to make everything as clear as possible so it’ll be nice on a monitor bigger than 1024×768.

  • Nitobi CompleteUI Overview
  • Grid
  • ComboBox
  • Tree
  • TabStrip
  • Fisheye Menu
  • CallOut
  • Ajax Shipment Tracking Application

Enjoy!

.