New component: Vaadin Touch

Hi

I’ve been working on a component for creating applications that look and feel like iPhone applications using only Vaadin. The component is still very rough around the edges and doesn’t have a lot of functionality yet, so consider the current version a tech preview. I’m working hard on improving the component, so be sure to check back on progress.

The source code can be found
here
.

A live preview of the component can be found
here

Hope you like it!

//Marcus

Edit: I forgot to mention that you should check out the demo on an iPhone/iPod Touch to view all the animations. I’m working on getting animations working on other browsers as well.

Looks really cool.

Noticed a bug/limitation: When using the demo with a (desktop) browser (Safari 4 in this case), buttons and labels are only as wide as the widest text. For example open sample one and make your browser wider.

I know that this is not supposed to work with desktop safari, but I hope that I will be able to use this with an iPad in not so distant future :slight_smile:

Yes, this among many other things are on my todo-list for the component. So I can promise you that it’s going to get a lot better with time :slight_smile:

My objective is to have the component working in both WebKit and Gecko based browsers when finished, to make sure that the component will work in a wide variety of mobile browsers. The component should also work in desktop browsers (even though the usability of finger-optimized applications in a desktop environment is debatable).

I got an “out of sync” error when I tried the demo. Unfortunately, I was unable to reproduce the problem :-/

Thanks for reporting. I’ve already figured out where it’s coming from, but still need to figure out how to fix it :slight_smile: I’ll see if I’ll see if I could move my issue tracker to a publicly accessible location so everyone can see which issues I’m working on.

I recorded a quick demo of TouchKit on iPad simulator

http://www.youtube.com/watch?v=pNSa-FuOp9w

Hi,

The WIKI page says this:
“TouchKit is still under development, so I don’t recommend it yet for production environments.”

Is this still the case?

Thanks,
Chris

Since the wiki page has been updated, it seems that the component has been declared stable:
http://vaadin.com/directory#addon/102
. Does someone else know otherwise?

Couple more questions about this…

  1. Is it possible to arrange the UI components such that it would be possible to create something like the SplitViewController in the iPad SDK?

  2. It would be really neat if we could handle orientation changes in the iPad browser. Any ideas about if that’s possible and how?

  3. The only thing that seems to be missing (IMHO) that would make the iPad experience complete is a PopoverController … is there any plans to add this and possible more to TouchKit? i.e. especially iPad specific controls?

Thanks in advance.

Cheers,
Chris

I think this is totally doable. It just requires a custom component, both server and client side.

The iOS should publish some JavaScript API so you can listen to orientation changes. Just listen for those events and the send an event back to the Vaadin servlet and act accordingly. On the client side (GWT) you’ll need to use JSNI methods, but that’s just a minor technicality.

Thanks Jouni - wouldn’t know where to start with that right now though. I’ll see if I can figure it out when I have more time.

Few things:

  1. The jar file isn’t packed correctly, a copy of the classes appear under the build folder

  2. The live demo is no longer working

  3. If you use the TouchPanel in a popup window (see code below) when the window closes the drop shadow from the window remains and stops items behind from receiving events

  4. The TouchMenu shows the menu as a group of items. The default behaviour should not have this grouping, but I can’t see how to change that. In the iOS SDK this is you can specify a number of sections and number of items per section.

  5. Does not appear to be any way to add custom items to the touch menu.

  6. How do you show and set the text for the right button item (if there even is one)?

Would I be right in saying that this is based solely on how a few iPhone apps appear work rather than the actual iOS SDK?

I was hoping for something considerably more detailed and wouldn’t consider this production quality or worth $750 I’m afraid.

Cheers
Chris