1. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com Part R: Thin-client SVG GUI forms Ronan Oger – SVG Open 2003 SVG GUI Workshop

2. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com Minimize client-side functional requirements Keep business logic on the server Facilitate functional extension Require planing and vision Thin-client applications

3. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com Now: HTML-Style form process model –Render->modify->submit –Familar with users. (Possibly) Later: XFORMS support in SVG –Embedded form content within the XML vocabulary. –Problem: Not in 1.2. Not finalized. No processing model. –Too complex. Never worked with it... Forms Processing in SVG

4. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com HTML: –declarative form processing –Must submit all values and refresh page SVG: –No support for declarative information processing –Use Script-assisted processing HTML-Style Forms

5. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com HTML-Style Architecture Concept Keep the widget a black box Wiget changes modify a text field Maintain state at server Use commit event to update state

6. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com Examples Rotary control Sliding control Pull-down menu Text field

7. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com script components Do_set_string: Assign the interface values Do_process_form: Submit the form

8. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com do_set_string() // set a string function do_set_string(Doc, id, string) { Doc.getElementById(id).getFirstChild.setData(string); } Provides a single method for assigning values to the form interface. Required due to a shortcoming in SMIL which does not support declarative animation on text elements.

9. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com do_process_form() // submit the form for processing function do_process_form(IDArray,ValueArray) { var url = 'GISMax.cgi?edit=;act=processform;'; for (var i=0; i<IDArray.length; i++) { url = url + eval("'"+IDArray[i]+"'") + "= + getFormFieldValue(evt,eval("'"+ValueArray[i]+"'"))+';'; } getURL(url+';uid='+uid,show_callback); setCommand(evt,''); } Form handler for submit. Required due to a shortcoming in SMIL which does not support declarative animation on text elements.

10. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com How this works... Commit button Do_process_form getURL (postURL) Callback_method – rendering commands. –Old: delete by id –New: append to the workspace –Message: server messages for the user

11. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com XML snippet result <rect width="100" y="20" fill="yellow" stroke="blue" x="10" height="60" /> Hey... you said: dog Script function Do_process_form causes a query to be called by getURL and to be parsed by parsXML Result of pulldown.svg server query

12. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com Why this is good Keep the client-side functionality simple No large javascript downloads Obfuscates code base – some people like this

13. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com Why this is not so good Must stay connected to the server – no standalone apps. Bandwidth. Server load – Requires powerful hardware