Evaluating vaadin: Clarifications needed on dyn. describing ui behavior

General
1

Dear vaadin community members:

As GWT newbie I was led to your excellent (!) and great-looking
vaadin
 framework which I’m currently evaluating for a specific app requirement. As I’m still not sure if vaadin would be appropriate for solving my problem, I’d really need some advice from more experienced vaadin users/developers.

Suppose a

Simple Online App/Form Builder

 with basically 2 modules:

  • ‘Admins’ have secured access to an ‘AdminConsole’ where they dynamically
    compose/edit
     online apps (GWT-style or mimicking traditional web pages) on the client side,
    preview
     them there, and finally
    publish
     the result on the web server under an
    app-specific url
     – “{base-url}/{app-name}”.
  • ‘EndUsers’ visit a published app via its URL and navigate back and forth, possibly submitting some forms – public ones if ‘unauthenticated’, ordering or posting forms if authenticated.

Admins usually describe entities falling into 3 usual layers:


  2. persistent custom types
    : e.g.

    “I’ve an entity type called ‘Product’ having attributes a,b of types c,d and relationships e,f to …”



  3. CRUD ui for each entity
    : e.g.

    “The ‘edit’ form for a ‘Product’ is composed of widget1…widget2…”



  4. controller behavior logic
    :
    [list=1]

  5. ui-to-bean data binding
    : e.g.

    “‘product01’ is backing bean for ‘editProductForm’”

    .


  6. !!!declarative behavior specification for

    :
    [list]


  7. client-side

    :
    [list]


  8. “When user clicks ‘button_a’, show/hide ‘panel_b’ in super panel region ‘top_right’”

    .


  9. “When user activates ‘checkbox_c’, collapse form section ‘sect_02’ and show 'sect_03”

    .

  10. dyn. form field validation rules with corresponding error reporting
    .
  11. …

    [/list]


  12. server-side

    :
    [list]


  13. “When user submits form, 1st check validity server-side AND if all is O.K. store the backing bean values in the backend db, else …”

    .


  14. “When user sebmits form AND value of field ‘xyz’ is provided, then send an email to …”

    .
  15. …
  16. [/list]

    [/list]

    [/list]

(critical issues colored in red)

Obviously a rules-based approach for the client-side controllers would be a good choice, right? – Not knowing if it is easily realizable with
vaadin
.

As far as I saw, in
vaadin
 the hierarchical composition of
ui components
 comparable to my required ‘AppWindow’ (with publication url), ‘Panel’ associated to ‘Layout/Template’ and ‘Theme’, as well as built-in and custom ui widgets, especially ‘Forms’, DON’T pose any problems, right???

…

But what’s with the dynamic specification & instantiation of form/widget bahavior???

 E.g.,

How would I describe a 4-widgets form with ‘checkBox_01’ (unchecked), ‘textField_01’, ‘optionGroup_3opts’ and ‘listSelect_5items’ (invisible) that exposes the following on-client behavior???

  • “IF user activates ‘checkBox_01’ THEN ‘textField_01’ shows text
    CheckBox Pressed!
     AND ‘optionGroup_3opts’ selects its middle option automatically”.
  • “Whenever middle option of ‘optionGroup_3opts’ gets selected AND ‘checkBox_01’ is checked => let the text in ‘textField_01’ be
    Yeah, 2nd cycle processed!
     AND make ‘listSelect_5times’ visible after loading its 5 items from the remote server”.
  1. Which architecture components would be in place for realizing this dyn.-behavior scenario??? (most important question)

Further questions are:

  2. How would I “publish” a main app screen under a specific url on the web server?
  3. Is vaadin appropriate for mimicking traditional web apps, i.e. page-based ones with SEO-friendly links?
    – On the “Add-ons” page I saw one intent to achieve this… But do you already have experiences if it’s practical for production?
  4. How could I best implement the AdminConsole exposing an edit and preview mode (keeping in mind that the preview code would be the one presented to enduser (code reuse))??

I really would need your help in clarifying these topics for a decision … and hopefully in the end no missing feature impedes me to become a new
vaadin
 user :wink:

Thank you very much for your help in advance.

Best regards,
Alessandro

2

All UI in Vaadin is built dynamically in your Java program. Thus you are free to construct the UI on the fly based on whatever definition you use to save your form. Also all wiring is done dynamically by your Java program. Thus you can easily add the rules you described above.

In your application you basically implement the following:

  • YourFormEditor getEditorForForm(form id)
  • editor.saveForm(form id, database…)
  • YourForm getForm(form id)
  • form.saveResults(…)

All of the above is just plain Java. The most challenging design task IMO is to decide on how to store all the form rules to your database. Thus the challenge has nothing to do with UI.

You can use
URI Handlers
, but I would use
Navigator add-on
 to publish
URL:s like this
.

It is practical, but not automatic.

If you would have the hypothetical API i described above, just create a new window and add the result of getForm to that window.

3

Dear Joonas:

First of all, thank you very much for your reply; it clarified a lot, though there is still one – I guess GWT-based – issue that’s unclear to me.

But, how do you instruct your Java prog to put some logic A on the client side (i.e. ui-relevant behavior) and, in contrast, some logic B on the server side (i.e. form processing instructions)??

As I’m new to GWT, could you please show me a solution for realizing a wizard-style form with a logical-AND combined widget controlling rule running on the client side? I suppose that you more experienced users have been dealing with such kind of forms several times, … for me, at the moment, this is still a “big deal”. Thus, a solution snippet would help me a lot … It would be very sufficient to have sth. like the following:

Multi-page form with 2 pages/tabs and corresp. ‘prev’, ‘next’ buttons:

  • on page 1:
    [list]
  • TextField “full-user-name” with
    - required=‘true’ and
    - “pattern field validation rule” (RegExp??), e.g. [A-Za-z]
    +\s[A-Za-z]
    +.
  • CheckBox “cbox-01” (initially unchecked)
  • TextArea “my-text-area” visible when (fullUserName.text == “John Doe” AND cbox-01.value==‘true’).
  • Button 'next-btn-to-page-02" activated when page1 validation is OK.

    [/list]
  • on page 2:
    [list]
  • TextField “text-field-02”
    - only accepts numerical values; initial value=‘10’
    - visible when (full-user-name.text == “Jane Doe” OR cbox-01.value==‘true’).
  • Whenever (text-field-02.value >= ‘20’) my-text-area.setText(“TextField val on page2 >= 20!!!”);
  • Button ‘prev-btn-to-page-01’.
  • Button ‘submit-btn’ activated when validations for page1 and page2 all are OK.

    [/list]

Note: Obviously the form contents don’t have any deeper/realistic meaning, though an example solution would reveal all the GWT/vaadin issues currently obscure to me – basically the event-to-runningCode wiring and simple rules evaluation/execution.

Thank you all very much for any help in advance.

Best regards,
Alessandro

4

All logic (even UI relevant behaviors) is kept on server side.

Only the implementation of new widgets is done on client-side and for those an explicit GWT complication step is required.

Sorry, but do not have time at the moment for the example. Anyone else? In practice it is just matter constructing and configuring the fields in your java code, putting them to a component container (layout) and adding the component containers to a tabsheet.

For a really nice looking dynamic real world form,
see this one
 (seems to be only in Finnish, sorry).