Blogs

I was just going over the Calendar component when I found some useful functionality that was all tucked away, obscured from prying eyes. But the time has come to unleash it upon you all!

1. Formatting

There’s a method, DatePicker#getFormattedDate that will return the selected date as a string in the ubiquitous ISO8601 format (YYYY-MM-DD HH:MM:SS).

What’s better still, you can customize the format returned by getFormattedDate by using the formatter attribute on the Calendar declaration to specify a custom formatting function.

The Function
Let’s say I want the Calendar to format dates like this: MM/DD/YYYY.

function customFormatter(date)
{
if (nitobi.base.DateMath.invalid(date)) return "";
return nitobi.lang.padZeros(date.getMonth() + 1) + "/" + nitobi.lang.padZeros(date.getDate()) + "/" + date.getFullYear();
};


A couple things to note here:

• First, it’s very important we ensure the date is valid.
• Second, we use a helper method nitobi.lang.padZeros to ensure single digits get padded correctly (e.g. “1″ will become “01″, but “10″ will remain “10″).
• Third, the argument is a Javascript Date object.

The Declaration
Next, we change our Calendar declaration and specify this custom function as the formatter:

<ntb:datepicker id="cal1" formatter="customFormatter"></ntb:datepicker>


Now when we call #getFormattedDate we’ll get a string of the form MM/DD/YYYY.

2. Hidden Inputs
Another useful tidbit is the Calendar renders with a hidden input field that will store the formatted date which makes using it in a form pretty simple. For a Calendar with an id of “calendar1″, the hidden input will have an id of “calendar1.value”.

Go figure!

We just put out the latest release of Complete UI and it includes, among other things, the new Nitobi Dreamweaver Extensions! I’ve been working on them for a little while and they’ve changed quite a bit since I last wrote about them a few months back.

Insert Bar Objects
The preview release I blogged about earlier had a really simple interface for adding components to a page. We opted to defer customization of the component until after its declaration has been inserted into the page. Well, after some deep thought, and a couple chats with the friendly folk at WebAssist, we decided to expose more options before the component is inserted. For example, in the Tree insert form, we can create the entire tree structure before the Tree is inserted:

Rendered Tree:

Callout and Spotlight
I really like the additions made for Callout and Spotlight in the final release of the extensions. I sort of neglected these components in the preview release opting to simply insert a sample Callout panel and a sample Spotlight tour. The final version gives these components the sweet, gentle lovin’ they deserve.

Other cool beans
I can’t remember if the preview release had DW 8 support, but we’ve got it in the final version. We also added better support for templates and added items in the insert menu bar.

Well, I hope y’all enjoy them. We’ve got bunch of articles up in our knowledgebase and I made some video tutorials too. Check ‘em out at http://www.nitobi.com/kb/?catid=96

I’d love to hear feedback from anyone with the time to give some. Feel free to email me at mike.han@nitobi.com

Here’s a quick screencast of the extensions, as promised. I was going to do the whole thing in a bad Arnold Schwarzenegger accent, but instead you get my nervous voice and awkward inflection. Enjoy!

For the last little while we’ve been working on Dreamweaver extensions for our components and we’ll be releasing a beta very soon. In the meantime, I thought I’d provide a little preview of what’s to come.

Insert Bar
We’ve add objects in the Insert Bar which allows for quick insertion of components.

Inserting a component via the Insert Bar will automatically copy the required assets to your site and add the requisite script and stylesheet includes to your page.

Design Time Preview
When you have a Nitobi component in your page, you’ll get a nice preview in the design view.

The preview Grid matches the declaration as closely as possible . For example, the columns of the declaration are shown in the preview. If you set toolbarenabled to false, the toolbar will vanish. Changing the mode from standard to livescrolling will remove the paging icons from the toolbar. Yada, yada, yada.

Property Inspector
Each component has its own custom property inspector that allows you to quickly change a number of its attributes.

Databinding Wizard
One of the areas that causes some strife with new customers is how to set up our databound components. So we’ve created a little wizard that will hopefully help out. I’ll try to post a screencast later today (my mangled prose won’t do it justice).

Amidst all the excitement surrounding the Q2 release of Complete UI, it seems this little nugget was shunned like a ragged, Dickensian chimney-sweep: ComboBox and Grid now work in standards mode. A boon, hopefully, for our standards compliant customers.

So as promised, here is some more Java love in the form of an Eclipse plugin and a Struts 2 plugin.

Files
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)

Eclipse Plugin
This plugin is built on top of WTP (1.5.3) extension points and provides some custom project facets when creating a new Dynamic Web Project. It will copy over the needed script and style files to resources/nitobi/script and resources/nitobi/style in the root of your web content directory. It’ll also copy over the Nitobi Taglib and Nitobi Server Library jars to your project build path.

We’ve also added some contributions to the Snippet palette. Dragging a snippet to an open editor will insert a small, demonstrative declaration that will usually render without modification. I say “usually” because of course you’ll need to do some lifting of your own if you want to have the component bound to remote data.

Struts 2 Plugin
I put up a knowledgebase article on using Grid in Struts 2 and I realised while writing it that we could help simplify the process. So I put together a simple, but hopefully useful plugin which provides a Nitobi result type.

To use the result type, you need to declare a package in your struts.xml file that extends “nitobi-default” and your get handler action needs to specify a result type of “nitobi”. Par example:

<struts>
  <package name="grid" extends="nitobi-default">
    <action name="gethandler" class="example.GetHandlerAction">
      <result name="success" type="nitobi">
        <param name="encoding">UTF-8</param>
        <param name="handlername">gethandler</param>
      </result>
    </action>
  </package>
</struts>

Note that the result can take two optional parameters: encoding and handlername. The encoding attribute is used to set the encoding of the response. The handlername attribute is the name of your Action’s GenericGetHandler/GenericSaveHandler member variable that the Result will look for in the Value Stack. So, if in your Action you have a GenericGetHandler declared as such:

// You also need to declare a public getter for this member
// to make it available to the Result on the Value Stack.
GenericGetHandler monHandler;

You need to specify this using the handlername parameter. By default, encoding will be set to UTF-8 and handlername is set to handler.

There may be some kinks yet to work out so bear with me! We’ve got some improvements to the server library on tap and hopefully a NetBeans module too. Again, any feedback on this stuff would be most appreciated and will be reciprocated with a virtual, yet vigorous, high-five.

I just wanted to quickly point out a small difference between the new taglib we introduced last week and our regular, non-jsp tags. Most of the tags look the same, but for unbound Grids and ComboBoxes, the data elements are a bit different. For the taglib, instead of specifying data as attributes, there is a single data attribute that takes a JSON object. For example, the <e> element looks like this in the taglib:

<n:e data="{'xi' : '0',
             'a' : 'Mick Jones',
             'b' : 'Topper Headon',
             'c' : 'Joe Strummer',
             'd' : 'Paul Simonon'}"></n:e>

And for those who are interested, there are new articles in the KB describing how to set up a databound Grid in Struts 1 and Struts 2.