Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

New component: Vaadin Touch

Marcus Hellberg
1 decade ago Feb 19, 2010 2:34pm

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.

Last updated on Feb, 19th 2010
+2
Joonas Lehtinen
1 decade ago Feb 19, 2010 4:56pm

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

Marcus Hellberg
1 decade ago Feb 19, 2010 6:55pm

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

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

Last updated on Feb, 19th 2010
Kim Leppänen
1 decade ago Feb 19, 2010 8:59pm

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

Marcus Hellberg
1 decade ago Feb 22, 2010 6:16am

Thanks for reporting. I've already figured out where it's coming from, but still need to figure out how to fix it :) 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.

Joonas Lehtinen
1 decade ago Apr 04, 2010 11:02am

I recorded a quick demo of TouchKit on iPad simulator

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

Christopher Brind
1 decade ago Jun 07, 2010 2:22pm

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

Risto Yrjänä
1 decade ago Jun 07, 2010 2:26pm

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?

Christopher Brind
1 decade ago Jul 15, 2010 4:12pm

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

Jouni Koivuviita
1 decade ago Jul 20, 2010 12:04pm

Christopher Brind: 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?

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.

Christopher Brind
1 decade ago Jul 29, 2010 8:31pm

Jouni Koivuviita:

Christopher Brind: 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?

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.

Christopher Brind
1 decade ago Aug 26, 2010 2:48pm

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

+2