The new Get Tree from Page example demonstrates how a tree data object can be created by analyzing the occurrence of different CSS classes for section headings at different depths of a document.

In this example, the Uize.Node.Tree.getTreeFromPage static method of the Uize.Node.Tree module is being used to build a tree data object respresenting the structure of the document, by analyzing the occurrence of different CSS classes for section headings at different depths of the document (in this case, the CSS classes level1Header, level2Header, and level3Header). A tree data object like this can be supplied to a tree menu widget, or can otherwise be used to build UI for navigating to different sections of the document (a contents tree, for example).

CHECK IT OUT

The new Get Tree from List example demonstrates how a tree data object can be generated by analyzing the structure and contents of a nested list defined by an HTML ul (unordered list) tag.

In this example, the Uize.Node.Tree.getTreeFromList static method of the Uize.Node.Tree module is being used to build a tree data object by analyzing the structure of a nested list defined by an HTML ul tag. A tree data object like this can be supplied to a tree menu widget, or can otherwise be used to build UI for navigating to different sections of the document (a contents tree, for example).

CHECK IT OUT

The new Uize.Node.Tree module provides convenience methods for generating a tree data object by analyzing HTML on a page.

A tree data object is an array, where each element of the array is a Tree Item. Because a Tree Item may itself contain a child Tree Data Object, specified by its items property, a Tree Data Object can be used to represent an arbitrarily complex, hierarchical structure for information. A Tree Data Object can be used in any number of ways, but is commonly used for building tree-based user interface elements such as contents lists, structured dropdown menus, etc. A number of widget class support data in the Tree Data Object format, such as the Uize.Widget.Tree.List, Uize.Widget.Tree.Menu, and Uize.Widget.Tree.Select classes. Outside of widgets, tree data objects can be used to drive the generation of HTML, in build scripts or Web applications, using JavaScript Templates.

LEARN MORE

A number of instance and static methods of the Uize.Widget.Tree module have been deprecated and migrated into the new Uize.Node.Tree module.

The getTreeFromList and getTreeFromPage instance methods, along with the Uize.Widget.Tree.getTreeFromList and Uize.Widget.Tree.getTreeFromPage static methods, have been deprecated and migrated into the Uize.Node.Tree module as Uize.Node.Tree.getTreeFromList and Uize.Node.Tree.getTreeFromPage.

MIGRATED

myTreeWidget.getTreeFromList (...)      >> BECOMES >>  Uize.Node.Tree.getTreeFromList (...)
Uize.Widget.Tree.getTreeFromList (...)  >> BECOMES >>  Uize.Node.Tree.getTreeFromList (...)
myTreeWidget.getTreeFromPage (...)      >> BECOMES >>  Uize.Node.Tree.getTreeFromPage (...)
Uize.Widget.Tree.getTreeFromPage (...)  >> BECOMES >>  Uize.Node.Tree.getTreeFromPage (...)

4.1. Reasons for this Change

4.2. Deprecated Methods Still Supported

The Uize.Population module has been migrated to under the Uize.Widget namespace as Uize.Widget.Population.

MIGRATED

Uize.Population  >> BECOMES >>  Uize.Widget.Population

WHAT'S CHANGED

For the most part, the interface is entirely the same and compatible with the old interface, with some very minor differences. As a widget class now, instances of the Uize.Widget.Population class must be wired (by calling the wireUi instance method) before changing the value of the items set-get property will result in an update of the contents of the instance's DOM node. Also, as a true widget class, instances of the Uize.Widget.Population class can be added as child widgets of other widget instances. Finally, the DOM node into which generated HTML is injeted can now be specified with either of the idPrefix, node, or container set-get properties. This change, which is not backwards compatible, has the benefit of further cleaning up the Uize root namespace.

UPDATING YOUR CODE

The two examples that were previously using the now defunct Uize.Population class, Populating Photo Details and Structured Record Population, have been updated to use the new Uize.Widget.Population class. If you were previously using the Uize.Population class, then you can use these two example pages as a reference when updating your own code.

The Uize.Url module has been improved with the introduction of the Uize.Url.from static method (actually, it's existed in the code for a while, but has never been officially documented or fully tested).

The Uize.Url.from static method returns an object, containing properties for the various logical segments of the specified URL string. This method provides a convenient way to get at very precise portions of a URL string, such as the file name without the extension, the file type without the "." (period) character, the query params string without the "?" (question mark) character, the anchor without the "#" (pound / hash) character, etc. Upon parsing a specified URL string, the Uize.Url.from method returns an object with the following structure...

URL SEGMENTS OBJECT

{
  href       : hrefSTR,       //  http://uize.com:80/reference/Uize.html?param=value#anchor
  fullDomain : fullDomainSTR, //  http://uize.com:80
  protocol   : protocolSTR,   //  http:
  host       : hostSTR,       //  uize.com:80
  hostname   : hostnameSTR,   //  uize.com
  port       : portSTR,       //  80
  pathname   : pathnameSTR,   //  /reference/Uize.html
  folderPath : folderPathSTR, //  /reference/
  file       : fileSTR,       //  Uize.html
  fileName   : fileNameSTR,   //  Uize
  extension  : extensionSTR,  //  .html
  fileType   : fileTypeSTR,   //  html
  search     : searchSTR,     //  ?param=value
  query      : querySTR,      //  param=value
  hash       : hashSTR,       //  #anchor
  anchor     : anchorSTR      //  hash
}

The Uize.Url.from method is comprehensively documented and fully tested. Additionally, all static methods of the Uize.Url module are now fully unit tested by the module Uize.Test.Uize.Url.

LEARN MORE

The new Uize.String.Lines module provides methods for working with multi-line strings, supporting indenting, changing linebreaks, modifying lines, etc.

The Uize.String.Lines module lets you easily...

LEARN MORE

The Uize.String module has been improved with the addition of a number of new methods, and has been modified with the migration of some methods into the new Uize.String.Lines module.

8.1. New Methods

8.2. Migrated Methods

Uize.String.indent (...)      >> BECOMES >>  Uize.String.Lines.indent (...)
Uize.String.splitLines (...)  >> BECOMES >>  Uize.String.Lines.split (...)

READ MORE

As an aid to developers of the UIZE JavaScript Framework, the new SOTU (State of the UIZE) page provides an overview of the state of all the modules that make up the framework.

Developers of UIZE modules can use this document as a guide on where work is needed. The table below provides information on various aspects of UIZE modules: things such as estimated code completeness, estimated documentation completeness, unit test completeness, scrunched file size, etc. The table's columns are sortable, so if you want to sort the modules by documentation completeness, you can do so clicking on the "DOC" heading. Or, if you want to see all modules of a certain type, sort by the "MODULE TYPE" column and then scroll to the module type you're interested in - they'll all be clumped together. The "IMPORT." column is a high level assessment of the importance of modules in the grand scheme of things, so this can also inform where effort is invested in writing documentation and tests.

CHECK IT OUT

The new Zooming Collection Item with Image Switching examples demonstrates how the Uize.Widget.CollectionItem.Zooming widget class handles dynamically switching the image that it displays.

In this example, the Uize.Widget.CollectionItem.Zooming widget class is being used to add a JavaScript animation zoom in effect to an image. In contrast to the Zooming Collection Items example, which simply demonstrates this widget applied across multiple images in a grid, this example demonstrates how the value of a single instance's previewUrl set-get property can be changed dynamically, and how the zoom and pan behavior still works as expected after the image URL has been updated.

CHECK IT OUT

The implementation of the Uize.Widget.CollectionItem.Zooming module has been improved to provide a smoother experience in Apple Safari, Google Chrome, and other browsers based on the WebKit project.

With the previous implementation approach, the zoom in effect would be jerky in some browsers the very first time that the zoom in effect was triggered for an instance. In worst case scenarios, there would be no zoom in effect visible at all, and the larger, pannable version of the image would appear abruptly when it had completed loading in. Even in such cases, though, on subsequent triggering the effect would be smooth. The new implementation approach addresses this problem and produces a zoom in effect that is smooth - from the first triggering of the effect for an instance - in Apple Safari, Google Chrome, and other browsers based on the WebKit project, while still remaining smooth in all other browsers.

The new Uize.String.Builder module implements an object to facilitate the building of very large strings, in a way that minimizes performance costs.

Building strings using a traditional incremental concatenation approach using the += (incrementing assignment) operator can be slow in certain JavaScript interpreters when very large strings are being built. One way around this performance issue is to use an array to accumulate all the segments of a large string, and then concatenate all the elements of that array at the end of the string building process using the Array object's join instance method. The Uize.String.Builder object wraps this pattern up neatly into an object that also provides the benefit of String object parity that wouldn't otherwise be available in a manual array building process. In doing so, the Uize.String.Builder object can provide a substantial performance benefit in certain applications. This new module is comprehensively documented and unit tested.

LEARN MORE

The Uize.Scruncher JavaScript scruncher module has been significantly optimized in order to dramatically speed up the scruncher build script, along with all other processes utilizing this module.

The scruncher's algorithm for parsing and compacting JavaScript code has been optimized for speed using a variety of different optimization strategies. The end result is that scrunching a JavaScript file is now many times faster. As an illustration of this improvement, scrunching all the JavaScript modules in the uize.com Web site project (over 180 of them) previously took about 45 seconds on one machine. The exact same process now takes about 11 seconds on that same machine!

The benefits of this performance optimization will be keenly felt in larger Web site projects that have lots of additional proprietary JavaScript modules. And, because the build script for building reference documentation from comments inside JavaScript modules also utilizes the Uize.Scruncher module for extracting SimpleDoc comment, the documentation build script will also run much faster.

The Uize.Data.indexIn and Uize.Data.isIn static methods of the Uize.Data module, that were both deprecated way back in December of 2008, have finally been killed.

The identical functionality provided by the old methods is available in the Uize.indexIn and Uize.isIn static methods of the Uize base class.

KILLED

Uize.Data.indexIn (...)  >> BECOMES >>  Uize.indexIn (...)
Uize.Data.isIn (...)     >> BECOMES >>  Uize.isIn (...)

NEWS FROM EARLIER THIS YEAR