Vaddin Project feasibility

Hi,
I am currently planning the creation of a Myusic Label homepage with integrated Instant Download Shop System (something like beatport) and Radiostation.
Before I dive deeper into Vaddin I have some question if the following is possible:

Design visually single GUI “Pages” with Vaddin Designer and combine them (on demand) into a Master page
Create Visual Transitions (fade in/out)
Visually design (layout) Table rows , include playbuttons , images etc
include HTML5 Audio Player (either create one in Vaddin or use jPlayer)
include Picture Gallery (any suggestions are welcome)
create sticky header/footer in vaddin ? (http://ryanfait.com/sticky-footer/)
What about Deeplinks and SEO (could we integrate the new
HTML5 Session History API
or the from Google
suggested method
)
Center whole application

thats the most interesting more to follow :slight_smile:

I have never used the visual designer so I will let more knowledgeable Vaadin users answer those questions.

  • I think the designer outputs either a Layout or a Component. You should be able to mix and reuse them as freely as you want.
  • There is no automatic transition handling in core Vaadin, there is
    the animator addon
    to handle some animations (including fading). You can also you CSS transitions (CSS3 compatible browsers only which shouldn’t be a problem if you are aiming HTML5 browsers) if you want or use GWT to handle any transition effects (be sure to make it as an add-on for other to play with :wink: )
  • I can not answer on the visual editor and tables, as you can put any Vaadin component into any cell of a table, you will have no problem putting play/pause/rating/… buttons into it. But I don’t know if you can do it directly from the visual editor or will need some coding.
  • Vaadin has HTML5 audio in core, which translates in HTML5
  • It depends on your needs, you can set your pictures in a lazily loaded scrolling list (pure core vaadin), you can use
    this addon
    , you can use a flash component, a GWT widget, an SVG solution…
  • Sticky header and footers are super easy to do in Vaadin and I guess even more easy with the visual editor
  • Vaadin can handle URI using it’s
    fragment
    part (so you can do URLs the Google way) for the HTML5 version, I don’t think it is in current version, maybe it will be in Vaadin 7. It also depends on how the GWT libraries gets updated as Vaadin relies on them for this kind of thing. As for SEO, it comes from time to time on the forum, do a quick search to find some info on it.
  • As for centering application… I don’t quite understand your question. If you mean a fixed width content centered in the browser window (like this forum), then yes.

You may also be interested in looking into that non function
demo
. It was made to show the power of themes in vaadin and not meant to be usable but it shows lazy loaded lists of songs, mixed content in table rows (the combo box), sticky header, …

I hope that answers some of your questions.

Hello,
thank you for your answer! I am going to have a look on the Audio Feature, probably I can create my own player.

I assume that I can call my own JS function from Vaddin, no?

[EDIT]
Found myself: http://demo.vaadin.com/sampler/#JSApi
So i could just use this to implement my own HTML5 Session History
Thank you for your Time !
Marc

Hi!
Please post to the Vaadin community f the approach described below worked for you:
http://stackoverflow.com/questions/6051837/vaadin-javascript
http://dev.vaadin.com/ticket/3589

TIA :slight_smile:

Regarding SEO.

something should work either:

All Vaddin Links should contain a regular URL like this: http://myurl.tld/page/state

Client Visit homepage

Browser check is
performed
( check if IE9 since it does not support the session history api and check if JS is enabled )

If
JS is enabled
and client is
not IE9
than ignore default behaviour (block follow normal link)
and set url (HTML5 Session History API) and load content with help of JS (Vaddin AJAX)

If
JS is disabled
just follow link, interprete URL with Vaddin and render content

That should work ? No ?
In my opinion this appraoch is much cleaner than unsing those those hashes (#!) ?

Here is a HTML5 SEO experiment using PHP and Flex which I have created a while ago:
http://flex-seo.de/

Its not taking care of the IE9 tho

Do I understand it
correct
that I cannot get the duration and the current position ?

I have done some research on Audio /GWT:


gwt-sound

Looks promising

Hi!

Looks like javascript depending redirection is discussed over here: https://vaadin.com/forum/-/message_boards/view_message/750890

HTH

This sound also interesting:
http://vaadin.com/directory#addon/navigator7

I will try it out as far as I know enough , I definately getting started with Vaddin now.