Preview of YUI3 Treeview

YUI3 Treeview YUICONF 2010 Gonzalo Cordero

The history of the story

The history of the story It all happened one night over at JSConf...

The History of the story

The History of the story I was teasing Adam about some of parts of YUI2 treeview...

History of the story

History of the story Then he responded with...

History of the story How about you write Treeview for YUI3 Mr. smarty pants?

History of the story How about you write Treeview for YUI3 Mr. smarty pants? Bring it On!

History of the story Sure! but...

Bring it on!

YUI3 Treeview

YUI3 Treeview • We started thinking about how to build the next generation of Treeview.

YUI3 Treeview • We started thinking about how to build the next generation of Treeview. • Fantastic Gallery Treeviews out there!

YUI3 Treeview • We started thinking about how to build the next generation of Treeview. • Fantastic Gallery Treeviews out there! • Treeview === Parent/Child guinea pig

How to make it better

How to make it better • It needs to do more with less

How to make it better • It needs to do more with less • It needs to be fast

How to make it better • It needs to do more with less • It needs to be fast • It needs to be flexible

How to make it better • It needs to do more with less • It needs to be fast • It needs to be flexible • It needs to be extensible

How to make it better • It needs to do more with less • It needs to be fast • It needs to be flexible • It needs to be extensible • It needs to be accesible

What we’ve learnt Parent/Child is going to be the base for any hierarchy style module.

Parent/Child APIs

Parent/Child APIs • Parent APIs:

Parent/Child APIs • Parent APIs: - add

Parent/Child APIs • Parent APIs: - add - remove

Parent/Child APIs • Parent APIs: - add - remove - removeAll

Parent/Child APIs • Parent APIs: - add - remove - removeAll - selectChild

Parent/Child APIs • Parent APIs: - add - remove - removeAll - selectChild - selectAll

Parent/Child APIs • Parent APIs: - add - remove - removeAll - selectChild - selectAll http://developer.yahoo.com/yui/3/api/ WidgetParent.html

Parent/Child APIs

Parent/Child APIs • Child APIs

Parent/Child APIs • Child APIs - ancestor

Parent/Child APIs • Child APIs - ancestor - isRoot

Parent/Child APIs • Child APIs - ancestor - isRoot - next

Parent/Child APIs • Child APIs - ancestor - isRoot - next - previous

Parent/Child APIs • Child APIs - ancestor - isRoot - next - previous http://developer.yahoo.com/yui/3/api/

Parent/Child APIs • Child APIs - ancestor - isRoot - next - previous http://developer.yahoo.com/yui/3/api/ WidgetChild.html

Lessons learnt

Lessons learnt YUI3 Widget is very robust.

What would happen if...

YUI3 Treeview

YUI3 Treeview This is a side view of Treeview: It’s the thinnest treeview ever

YUI3 Treeview

YUI3 Treeview • Top view

YUI3 Treeview Ok, ok...here it is

So what’s new?

So what’s new? • Very light weight semantic markup.

So what’s new? • Very light weight semantic markup. • Two default views available now.

So what’s new? • Very light weight semantic markup. • Two default views available now. • Flexible: No need to specify node type.

So what’s new? • Very light weight semantic markup. • Two default views available now. • Flexible: No need to specify node type. • Accessible right out of the box

How do I create a tree?

How do I create a tree? • There are three ways you can create a Treeview widget:

How do I create a tree? • There are three ways you can create a Treeview widget: - Provide your own markup

How do I create a tree? • There are three ways you can create a Treeview widget: - Provide your own markup - Provide a constructor object

How do I create a tree? • There are three ways you can create a Treeview widget: - Provide your own markup - Provide a constructor object - Load on demand

Provide your own markup <ul id=”myTree"> <li> <a href="progressive.html">Label</a> </li> <li> <a href="progressive.html">Label2</a> <ul> <li> <span>I'm a tree leaf</span> </li> </ul> </li> </ul>

Provide your own markup YUI().use("treeview", function(Y){ var treeview = new Y.TreeView({ srcNode: '#mytree', contentBox: '#mytree', boundingBox: '#mytree', type : "TreeView" }); treeview.render(); });

Creating via a constructor <ul id=”mytree”></ul> var myTree = new Y.TreeView({ srcNode: '#mytree', type: "TreeView", children: [ { label: "level1-1", type: "TreeView", children: [ {label: "level2-1"}, {label: "level2-2"} ] }, {label : "level1-2"} ] });

TreeViewDataSource • DataSource Plugin • Supports for io/get/local • Exposes custom events you can listen to.

Loading on demand treeview.plug(Y.Plugin.TreeviewDatasource,{ source : "getTree.php", sourceMethod : "io", dataSchemaJSON : { resultListLocator : "ResultSet.Result" } }); treeview.on("treeview:click", Y.bind(function (e) { treeview.ds.makeRequest(e.target); } }),this); treeview.render();

Interesting moments

Interesting moments • The usual suspects...

Interesting moments • The usual suspects... • TreeView events

Interesting moments • The usual suspects... • TreeView events • TreeLeaf events

Interesting moments • The usual suspects... • TreeView events • TreeLeaf events • TreeViewDataSource events

Interesting moments • The usual suspects... • TreeView events • TreeLeaf events • TreeViewDataSource events • Treeviews clicks, Treeleafs clicks, expand/collapse events, etc.

Interesting moments myTreeview.on("treeleaf:click",function (e) { alert(e.target.get(“label”)); } }); myTreeview.render();

Demo time! Loading on demand!

All of this is...

All of this is... Available today!

All of this is... Available today! Two different treeview skins

All of this is... Available today! Two different treeview skins DataSource Plugin

What’s ahead

What’s ahead • Match all YUI2 existent functionality

What’s ahead • Match all YUI2 existent functionality • Incorporate user feedback

What’s ahead • Match all YUI2 existent functionality • Incorporate user feedback • Make it even faster!

Thank you! Questions? You can find me @goonieiam (bring cupcakes)

Preview of YUI3 Treeview

by Gonzalo Cordero on Nov 10, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Preview of YUI3 Treeview — Presentation Transcript