Yahoo! User Interface Blog (YUIBlog)

In the Wild for September 1, 2009

Here are some of the things we’ve noticed in the YUI newstream of late. Did we miss something important? Let us know in the comments.

• Thomas Kjeldahl Nilsson’s ThoughtMuse, a YUI-based Mindmapping Application: Thomas Kjeldahl Nilsson wrote in to tell us about his latest project, ThoughtMuse, which is a web-based mindmapping editor built with extensive use of YUI.  According to Thomas, “The ThoughtMuse mindmap editor leverages the YUI connection manager, drag and drop and JSON utilities, and a wide range of widgets (button, color picker, overlay, panel, dialog, menu). Also, while developing any javascript I always use the YUI Test Utility and Logging Control for automated unit- and integration testing.”  Thomas’s screencast introductiont to ThoughtMuse gives you a good idea of how the interface works:

• Matt Snider, “Comparing Widget in YUI2 Versus YUI3″: “I have been wanting to do a YUI 2 versus YUI 3 comparison for some time, and it took a while to design a simple example that was complex enough to be meaningful. Anyway, for this comparison I wrote a simple CheckboxList widget, that renders a list of checkboxes and labels from a JSON object. Both versions will require only a DOM node to instantiate, they will include two custom events onCheck and onBeforeCheck, and they will have these public functions: ‘clear’, ‘hide’, ‘render’, ’serialize’, ’show’. The ‘hide’ and ’show’ methods will apply “display:none” and “display:block” to the root node, respectively. The ‘clear’ method will remove the content of the root node and then call ‘hide’. The ‘render’ method will build the HTML from a JSON object and then call ’show’. Lastly, the ’serialize’ method returns the values of the checkbox as an AJAX ready query string.”  Check out the blog post for the results of Matt’s exploration.
  
• Christian Heilmann, “Converting a Data Table on the Web to an Autocomplete Translator W/YQL & YUI”: Chris put up a nice tutorial on how to use YQL to convert tabular data from an arbitrary third party web site into a live datasource for the YUI AutoComplete widget.
• New NatGeo Maps Database Built with YUI: More than 80,000 maps and reports from 370 publishers are available in the National Geographic Map Database Portal, a rich visual UI built with extensive YUI 2.7.0 integration. (Original source.)
  
• YUI Among the JS Libraries in Professional JavaScript Frameworks from Wrox: Ara Pehlivanian wrote the YUI section in the new Wrox book Professional JavaScript Frameworks: Prototype, YUI, Ext JS, Dojo and MooTools.  Thanks to Ara for his hard work on the YUI parts, and congratulations to his coauthors Leslie Orchard, Scott Koon, and Harley Jones for an excellent new tome.
• Matt Snider, “YUI3 Tab Key Managed Widget”: Matt (of Mint.com, and a YUI contributor) writes about a widget he’s updated for YUI3: “The TabKeyManagedWidget was originally a widget I wrote in YUI 2 for the popups on Mint.com. I have changed it a lot sense then, especially in its conversion to YUI 3. The problem we solved, is that sometimes, especially when using in-page popups, one must prevent users from being able to tab through the entire page. So we bound the end-user to a tabbing context, such as a popup or form, preventing the browser from executing its default behavior.”
  
• Salih Gedik (@salihgedik), “How to Create Simple Tabs Using YUI”: A nice intro to the YUI TabView Control.  From the “about the author” box: “[Salih] is a 14 years young programmer from Istanbul. He started programming with JavaScript since he was 10. He is experienced in PHP, ASP, Python, C/++, Basic and beginner level 80X86, JAVA. You can follow him at @salihgedik.”
• Peter Thomas, “Wicket Tutorial: YUI AutoComplete Using JSON and Ajax”: Writes Peter: “Getting an AutoComplete JavaScript widget to work with a server-side framework involves a few more steps and integration points than what it would take for e.g. a simple date-picker widget. It makes for an interesting example that shows off the strengths of Apache Wicket when it comes to creating custom components – especially when Ajax and integrating third-party JavaScript and CSS is involved.”
• MLA Citation Helper from Pras Sarkar: If you’ve ever slogged through the creation of a bibliography in MLA format, you’ll appreciate this Citation Helper from Yahoo engineer Pras Sarkar.  It’s based on YUI 3 and the source code is available on GitHub.
  
• YUI-Shed on Using Prototype.js with YUI: Writes YUI-Shed: “There are many reasons why you might use prototype.js with yui. You may be moving to Yahoo User Interface, or vice versa, or you may just prefer some flexibility. Whatever the reason, there are some good points to using the two together. I have pointed out several times on this blog and Practical Prototype that I personally prefer this method. I use YUI for the widgets, and use prototype for setting up classes, events, and other low level organization.”
• Jim Driscoll, “Making a YUI Calendar Component in JSF2″: Jim follows up on his recent YUI Calendar/JSF article with a new piece that focuses on moving the implementation into a JSF component.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!