Cross-Site Embedding Vaadin Applications

I've been recently testing the embedding of Vaadin applications.
Here's the Vaadin Sampler embedded:

Well, the application isn't made for this narrow columns, but it works, and runs on a completely different server. And isn't in an iframe.

Essentially, all you need to embed an app is:

    <script src="http://demo.vaadin.com/xsembed/getEmbedJs" type="text/javascript"></script>

However, if the app has 100% vertical size, you must put it in an element with a defined height. You may also want to set the width in some cases, such as in the example above:

<div style="height: 600px; width: 400px; overflow: auto;">
  <div style="height: 500px; width: 800px;">
    <script src="http://demo.vaadin.com/xsembed/getEmbedJs" type="text/javascript"></script>
  </div>
</div>

Vaadin Refcard updated

I made a few minor corrections and additions to the Vaadin Refcard, which was released last week at DZone. If you already downloaded it, you might to get the new version.

• Vaadin is available under Apache License 2.0
• For Item editors, such as the Form component, you can set the item data source with setItemDataSource()
• For Container editors, such as the Table or Tree components, you can set the container data source with setContainerDataSource()
• The book cover on the last page was updated - the cover for Vaadin 6.2 edition is blue
• The text in the last page was reordered to be more correct

The refcard could be updated next after Vaadin 6.3 is released in the late spring. The major features are use of GWT 2.0 for the client-side, drag'n'drop, and support for portlet flat mode.

Vaadin Refcard is out!

The Vaadin Refcard is finally out at DZone. Download yours now or browse the card on-line.

If you're a newcomer to Vaadin or interested in finding out what it is, the Refcard offers a great introduction to Vaadin. Much of the reference material should be also useful to those already familiar with Vaadin.


The six pages of the Refcard present a well thought summary of the most essential features of Vaadin, which are covered in detail in the Book of Vaadin. Much of the reference information is presented in tightly packed diagrams; just look at them for a moment and I hope you'll see the genius of Vaadin as I do.

The contents are:

• Creating an Application
• Components
• Layout Components
• Themes
• Data Binding
• Creating New Components

As Vaadin is developing fast, I hope to make updates to the card occasionally. So, especially after update releases (Vaadin 6.3 is coming next), please look out for an update of the card.

More Information:

• The Vaadin Refcard at DZone
• Vaadin Homepage
• Book of Vaadin On-Line

Client-Side Validation for Vaadin

I recently created a new component for Vaadin, the CSValidationTextField (suggestions for a better name are welcome), which is an extension of the regular TextField. It can validate the input with a regular expression and/or a JavaScript program.

Of course, you can't trust the client-side code for validation, so you need to validate the input on the server-side as well. For regular expression validation, you can use the same expression for the server-side RegexpValidator. For example:

// The Finnish Social Security Number
final CSValidatedTextField ssn = new CSValidatedTextField("SSN");
String ssn_regexp = "[0-9]{6}[+-A][0-9]{3}[0-9a-zA-Z]";

// The client-side validation
ssn.setRegExp(ssn_regexp, "000000-000A");
ssn.setAllowInvalid(false); // Prevent typing invalid values

// The server-side validation
ssn.addValidator(new RegexpValidator(ssn_regexp, "Invalid SSN"));
ssn.setRequired(true);
ssn.setRequiredError("SSN is required");

form.addField("ssn", ssn);

Matching partially filled values has some problems currently. If you disallow typing invalid input, as in the example above, the regexp validation currently needs an "example" and is restricted to only fixed-length fields. I'll have to look if the JS regexp matching can somehow report if there's a partial match. If you allow invalid input, there are no restrictions and the fixed-length example is not needed.

You can validate with JavaScript just as easily:

CSValidatedTextField postcode = new CSValidatedTextField("Postal Code");
postcode.setJavaScript("if (value >= 0 && value < 10000)" +
" \"partial\";" +
"else if (value >= 10000 && value <= 99999)" +
" null;" +
"else" +
" \"Postal Code must be a 5-digit number between 10000 and 99999\";");
layout.addComponent(postcode);

The server-side validation needs separate Java code though, unless you use some JavaScript execution library.

You must validate the input on the server-side as well, as the client-side validation does not actually prevent inputting invalid values (unless you set setAllowInvalid(false), but that's a bit restricted at the moment).

See the example source codes (link below) for more examples.

See:

• The Demo (editors, some validation examples)
• API Documentation
• Source Repository
• Example Souce Code

Included are also handy interactive editors for the regular expressions and JavaScript validators, as you can see in the demos.

The component is not packaged yet, so using it may require some effort. I'll have to look into the packaging.

Playing in Order

I've been fighting with my E90 for a few hours to get it play the MP3s of the Lord of the Rings audio books in proper order. It's not so easy.

First, I had to set proper track and disk information in the MP3s. This was easy enough with the Amarok music player for KDE. It allows easily editing the metadata, also in a group of files. There was some hand work to edit the track numbers, which took about half an hour for the 20-disk set.

Another and a more strange problem was that my E90 orders the MP3s to play in the directory order. The directory order is a low-level technical order in which files are stored in a directory (folder), and is not necessarily the same as the alphabetical order. Apparently, in FAT, the directory order is the order in which the files are written. In Linux, however, the directory order can be about anything, depending on the file system. In the EXT3 filesystem, the order seems pretty random and is probably the order of some hash table.

Unfortunately, every copy program, such as Konqueror, scp, or the command line "cp", copies the files in the directory order, so it's not possible to trivially copy files to a phone or MP3 player in alphabetical order. One solution is to use a specially ordered copy operation from command-line.

In my case, I had the MPs of the 20 CD audio book ordered under per-disk directories, so I had to use the following somewhat complex copy command:

for dir in `ls /home/magi/data/mp3/Sormuksen\ ritarit/`; do
    echo `ls -Q /home/magi/data/mp3/Sormuksen\ ritarit/$dir/*.mp3` "/media/Magi\ 2G\ u1/Sounds/Digital/Sormuksen\ ritarit/$dir/" | xargs cp -v
done

An alternative would be to first write everything to the player in any order and then use the "mv" command to move the files to a temporary directory, and then remove the original directory and rename the temporary directory as the original.

Moreover, if you have earlier written the MP3s to E90 in one order, it remembers the order even if you rewrite the files in another order. You first have to remove them from the player application, then write them again in the proper order, and only then you can play them properly.

References
Some other solutions in Linux Forum: Change the order of files in a directory.

Vaadin Cheat Sheets

I designed the Vaadin Cheat Sheet last summer. I really like it, especially its style that follows the Vaadin graphical style.

During the last few weeks, the demand for the cheat sheets has been growing. There's one on display at the ICT building in Turku, where you can get a free copy of Book of Vaadin. This week, I got some more lamination pockets to make more laminated cards. The new pockets with matt finish are nice, you can even write on them with a pencil.

I somewhat enjoy laminating the cards. Even though it's purely manual labour, it's quite relaxing to work manually by a routine for a change and not have to think or design anything. This also means that I can't make the cards by the thousands, like the books. Nevertheless, I try to make enough for IT Mill customers, some community members, and for special promotion purposes.

Just today, I corrected a small error: the CSS style class of the ComboBox component is v-filterselect, not v-combobox. There might be other similar errors.

N900 vs iPhone

Hi, I collected a rough list of some features. The list is not exhaustive and there may be some important features in software and interoperability that are not covered. Please comment and I'll add new notes.

	N900	iPhone 3GS
Basic stuff
Size	111x60x18mm	116x62x12mm
Weight	181 g	133 g
Screen Size	3.5 inch	3.5 inch
Screen Resolution	800x480	320x480
Screen Colors	65536 colors?	262144 colors
Screen material	plastic?	glass
Touchscreen tech	resistive	capacitive
Touchscreen fingers	one	two
Built-in keyboard	yes	no
Screen keyboard	yes	yes
Computing
Processor	ARM Cortex A8	ARM Cortex A8
Processor speed	600 MHz	600 MHz
Graphics accelerator	PowerVR SGX	PowerVR SGX
RAM	256 MB	256 MB
Virtual memory	768 MB	none
SSD storage, internal	32 GB	16/32 GB
External storage	up to 16 GB (MicroSD)	none
Software
Operating system	Linux-based	Darwin-based
Web Browser	Mozilla-based	Safari
Zooming	yes, one-finger	yes, two-finger
Adobe Flash support	Flash 9.4	none
Java	possibly	none
Skype	yes	no
Video formats	mp4, .avi, .wmv, .3gp	mp4, m4v, mov?
Video codecs	H.264, MPEG-4, Xvid, WMV, H.263	H.264, MPEG-4?
Music formats	.wav, .mp3, .AAC, .eAAC, .wma, .m4a	m4a, ...?
Open application development	yes	no
Music/software store	Nokia Ovi	iTunes, App Store
Operator lock	no	yes
Misc hardware
Camera	5 Mpix	3 Mpix
Video recording	yes, 16:9	yes
Video size and rate	848x480 @ 25fps	640x480 @ 30fps
Microphone	stereo	mono?
Geotagging	yes	yes
GPS	A-GPS	A-GPS
Cell-based navigation	yes	yes
Accelometer	yes	yes
Wireless network	802.11 b/g	802.11 b/g
Video out	yes (PAL/NTSC, WLAN/UPnP)	yes
FM transmitter	yes	no
Headphone connector	3.5 mm	3.5 mm
Compass	no	yes
Replaceable battery	yes	no
Other
Designed in Finland	yes	no
Jesus uses it	no	yes