Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Widget View (gallery-widget-view)

Last Updated: 02/9/11

+ 0 -

Caridy Patino

YUI Contributor

See 11 more by this user.

Created: 01/29/11
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

Overview

This Widget extension adds a default content for the widget (innerHTML for contentBox), and on top of that, supports binding regular attributes to specific node into the view to facilitate the use of different views for a particular widget.

Usage

You can mix a widget with a "Y.WidgetView", and the widget will automatically support views.

After the mix, the widget will support 2 new attributes:

view: HTML fragment used as the widget content before the render process.
viewName: string used to prefix the classname of every attribute associated to the view. Usually you don't need to change it.

Here is an example:

  // Creating another instance of the widget, this time using a custom view:

  new Y.MyWidget({

      boundingBox: '#demo',

      attr1: 'Yui'

      view: '<p><span class="view-attr1"></span></p>',

      render: true

  });

In theory, the attribute with name "attr1" will be automatically sync up in the template (represented by the "view" attribute) every time the value of it changes. Of course, the owner of the widget will have to associate the attribute with the template upfront. Usually we can do that during the initialization process. Here is an example:



initializer: function() {

          // linking attributes with the view

          this.addViewAttrs(['attr1', 'another_attribute']);

}

Examples

TBD

Tests

TBD

CHANGELOG

Check the latest changes in this module.

http://github.com/caridy/yui3-gallery/tree/master/src/gallery-widget-view/

Tags:
caridy

- Defining a new widget with View support under Y.Baby.
- Creating an instance of Y.Baby and rendering the widget using the default view.
- Creating another instance of the widget, this time using a custom view.

Code Sample

YUI().use('gallery-widget-view', function(Y) {
 
  // Defining a new widget with View support
  Y.MyWidget = Y.Base.create('widget-MyWidget', Y.Widget, [Y.WidgetView], {
      initializer: function() {
          // linking attributes with the view
          this.addViewAttrs([
          'firstname',
          'lastname',
          {
              name: 'birthday',
              /* defining a custom sync method for this attribute */
              sync: this._birthdaySyncUI
          }
          ]);
      },
      // a custom formatter for the timestamp attribute
      _dateSyncUI: function(node, value) {
          var birthday = new Date(value).toString();
          node.set('innerHTML', birthday);
      }
  },
  {
      ATTRS: {
          /* default view attribute */
          view: {
              value: '<p>' +
                        '<span class="view-lastname"></span>, ' +
                        '<span class="view-firstname"></span>' + 
                     '</p>' +
                     '<p>Birthday: <span class="view-birthday"></span></p>'
          },
          firstname: {
              value: 'John'
          },
          firstname: {
              value: 'John'
          },
          /* timestamp attribute that requires a custom sync for the view */
          birthday: {
              validator: isNumber
          }
      }
  });
 
  // Creating an instance of the widget, and rendering the widget using
  // the default view:
  new Y.MyWidget({
      boundingBox: '#demo1',
      firstname: 'Yui',
      lasname: 'Rocks',
      birthday: 1295970600000,
      render: true
  });
 
  // Creating another instance of the widget, this time using a custom view:
  new Y.MyWidget({
      boundingBox: '#demo2',
      firstname: 'Yui',
      lasname: 'Rocks',
      birthday: 1295970600000,
      view: '<li>' +
              '<span class="view-firstname"></span> <span class="view-lastname">' +
              ' (<span class="view-birthday"></span>)' +
            '</li>',
      render: true
  });
 
});

YUI().use('gallery-widget-view', function(Y) {

// Defining a new widget with View support
 Y.MyWidget = Y.Base.create('widget-MyWidget', Y.Widget, [Y.WidgetView], {
 initializer: function() {
 // linking attributes with the view
 this.addViewAttrs([
 'firstname',
 'lastname',
 {
 name: 'birthday',
 /* defining a custom sync method for this attribute */
 sync: this._birthdaySyncUI
 }
 ]);
 },
 // a custom formatter for the timestamp attribute
 _dateSyncUI: function(node, value) {
 var birthday = new Date(value).toString();
 node.set('innerHTML', birthday);
 }
 },
 {
 ATTRS: {
 /* default view attribute */
 view: {
 value: '' +
 ', ' +
 '' + 
 '' +
 'Birthday: '
 },
 firstname: {
 value: 'John'
 },
 firstname: {
 value: 'John'
 },
 /* timestamp attribute that requires a custom sync for the view */
 birthday: {
 validator: isNumber
 }
 }
 });

// Creating an instance of the widget, and rendering the widget using
  // the default view:
  new Y.MyWidget({
      boundingBox: '#demo1',
      firstname: 'Yui',
      lasname: 'Rocks',
      birthday: 1295970600000,
      render: true
  });

// Creating another instance of the widget, this time using a custom view:
 new Y.MyWidget({
 boundingBox: '#demo2',
 firstname: 'Yui',
 lasname: 'Rocks',
 birthday: 1295970600000,
 view: '<li>' +
 ' ' +
 ' ()' +
 '</li>',
 render: true
 });

});

Forum Posts

No forum posts for this module.