Re: [ANN] Tutorial: Searching Flickr with XForms

Mark & all,

Great example! It is now slightly modified for the OPS XForms engine,
and running online (no install required, it's Ajax-based, and works
with IE and Mozilla/Firefox):

   http://www.orbeon.com/ops/goto-example/xforms-flickr-resize

Besides converting from HTML to XHTML, we had to make these changes:

o Updated XPath expression to use XPath 2.0 if() (if only the XForms
   Working Group had *not* named its function "if").

o OPS does not as of yet support the xforms\:something notation in
   CSS, but uses classes of the form .xforms-something.

Minor changes, mainly for usability / appearance:

o Put default "flower" value as tags.

o Set minimum slider value to 10 instead of 1.

o More explicit labels, some descriptive text, and updates to layout
   and style.

o Submission can be done also by pressing "enter" in the input field
   (DOMActivate runs xforms:send).

o Added xforms:output to display the current value of the slider, as
   the OPS slider does not show the numerical value.

o Put hidden <span> in repeat so that IE flows the images correctly.

The resulting source code is here:

   http://www.orbeon.com/ops/goto-source/xforms-flickr-resize/view.xhtml

Enjoy,

-Erik

PS : Note that I am not sure about the license of the initial source
code: we just followed the tutorial and made changes. For now I put a
note saying that the code was written following your tutorial, but let
me know, Mark, what's the proper way of giving credit.

Mark Birbeck wrote:
 > Hi everyone,
 >
 > The "Introduction to XForms" tutorial that I posted a short while ago has
 > been extended to include a 'how to' on searching Flickr. The resulting
 > application shows how complex tasks can easily be performed with XForms
 > mark-up. If you want to see a video of the application in action, you 
can go
 > here:
 >
 >   <http://www.youtube.com/watch?v=KcNN9u4Z_Yw>
 >
 > Highlights of the application include:
 >
 >   * animated display when the search results
 >     are returned, using only CSS rules;
 >
 >   * a range control that controls the size of
 >     the images returned. The images resize
 >     immediately thanks to the use of
 >     @incremental;
 >
 >   * tying of switch and case to submissions events
 >     so that the form has different sections for
 >     'in progress' and 'complete'.
 >
 > Some background on why we chose Flickr is here:
 >
 >   <http://skimstone.x-port.net/index.php?q=node/90>
 >
 > The tutorial itself is here:
 >
 >   <http://skimstone.x-port.net/index.php?q=node/89>
 >
 > Regards,
 >
 > Mark
 >
 >
 > Mark Birbeck
 > CEO
 > x-port.net Ltd.
 >
 > e: Mark.Birbeck@x-port.net
 > t: +44 (0) 20 7689 9232
 > b: http://internet-apps.blogspot.com/
 > w: http://www.formsPlayer.com/
 >
 > Download our XForms processor from
 > http://www.formsPlayer.com/
 >
 >
 >

Received on Monday, 20 February 2006 14:42:30 UTC