src/cm/media/js/lib/yui/yui_3.10.3/docs/attribute/attribute-basic.html
author Yves-Marie Haussonne <ymh.work+github@gmail.com>
Fri, 09 May 2014 18:35:26 +0200
changeset 656 a84519031134
parent 525 89ef5ed3c48b
permissions -rw-r--r--
add link to "privacy policy" in the header test
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
525
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     1
<!DOCTYPE html>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     2
<html lang="en">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     3
<head>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     4
    <meta charset="utf-8">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     5
    <title>Example: Basic Attribute Configuration</title>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     6
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     7
    <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     8
    <link rel="stylesheet" href="../assets/css/main.css">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     9
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    10
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    11
    <script src="../../build/yui/yui-min.js"></script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    12
    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    13
</head>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    14
<body>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    15
<!--
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    16
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    17
-->
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    18
<div id="doc">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    19
    <div id="hd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    20
        <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    21
    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    22
    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    23
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    24
            <h1>Example: Basic Attribute Configuration</h1>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    25
    <div class="yui3-g">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    26
        <div class="yui3-u-3-4">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    27
            <div id="main">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    28
                <div class="content"><style type="text/css" scoped>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    29
    .example-out .myclass-attrs {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    30
        font-family:courier;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    31
        margin-top:2px;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    32
    }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    33
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    34
    .example-out .myclass-title {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    35
        font-weight:bold;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    36
        font-family:arial;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    37
        color:#8dd5e7;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    38
        margin-top:5px;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    39
        margin-bottom:3px;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    40
    }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    41
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    42
    .example-out {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    43
        overflow:auto;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    44
        border:1px solid #000;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    45
        color:#ffffff;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    46
        background-color:#004C6D;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    47
        margin:5px;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    48
        height:8em;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    49
        padding:2px 2px 2px 5px;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    50
    }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    51
</style>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    52
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    53
<div class="intro">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    54
    <p>This example provides an introduction to the Attribute utility, showing how you can use it to add attribute support to your own custom classes.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    55
    <p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    56
    It is geared towards users who want to create their own classes from scratch and add Attribute support. In most cases you should consider extending the <a href="../base/index.html"><code>Base</code></a> class when you need managed attribute support, 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    57
    instead of augmenting Attribute directly, especially if you expect your class to be extended. <a href="../base/index.html"><code>Base</code></a> does the work described in this example for you, in addition to making it easier for users to extend you class.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    58
    </p>    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    59
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    60
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    61
<div class="example">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    62
    <div id="createo1">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    63
    <button type="button" class="do">Create First Instance</button> Construct o1, with default attribute values
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    64
    <div class="example-out"></div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    65
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    66
<div id="updateo1">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    67
    <button type="button" class="do">Update First Instance</button> Update the first instance, using set
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    68
    <div class="example-out"></div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    69
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    70
<div id="createo2">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    71
    <button type="button" class="do">Create Second Instance</button> Create the second instance, passing initial values to the constructor
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    72
    <div class="example-out"></div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    73
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    74
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    75
<script type="text/javascript">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    76
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    77
// Get a new instance of YUI and 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    78
// load it with the required set of modules
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    79
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    80
YUI().use("node", "attribute", function(Y) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    81
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    82
    // Setup custom class which we want to 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    83
    // add managed attribute support to
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    84
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    85
    function MyClass(cfg) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    86
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    87
        // When constructed, setup the initial attributes for the instance, by calling the addAttrs method.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    88
        var attrs = {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    89
            // Add 3 attributes, foo, bar and foobar
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    90
            "foo" : {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    91
                value:5
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    92
            },
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    93
     
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    94
            "bar" : {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    95
                value:"Hello World!"
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    96
            },
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    97
    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    98
            "foobar" : {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    99
                value:true
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   100
            }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   101
        };
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   102
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   103
        this.addAttrs(attrs, cfg);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   104
    }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   105
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   106
    // Augment custom class with Attribute
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   107
    Y.augment(MyClass, Y.Attribute);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   108
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   109
    function displayValues(o, title, node) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   110
        var str = 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   111
            '<div class="myclass"><div class="myclass-title">' 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   112
            + title + 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   113
            '</div><ul class="myclass-attrs"><li>foo: ' 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   114
            + o.get("foo") 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   115
            + '</li><li>bar: '
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   116
            + o.get("bar")
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   117
            + '</li><li>foobar: '
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   118
            + o.get("foobar")
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   119
            + '</li></ul></div>';
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   120
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   121
        Y.one(node).set("innerHTML", str);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   122
    }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   123
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   124
    Y.on("click", function() {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   125
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   126
        // Create a new instance, but don't provide any initial attribute values.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   127
        var o1 = new MyClass();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   128
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   129
        // Display current values
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   130
        displayValues(o1, "o1 with default values, set during construction", "#createo1 .example-out");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   131
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   132
        Y.on("click", function() {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   133
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   134
            // Update values, using the "set" method
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   135
            o1.set("foo", 10);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   136
            o1.set("bar", "Hello New World!");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   137
            o1.set("foobar", false);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   138
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   139
            displayValues(o1, "o1 values updated using set, after construction", "#updateo1 .example-out");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   140
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   141
        }, "#updateo1 .do");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   142
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   143
    }, "#createo1 .do");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   144
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   145
    Y.on("click", function() {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   146
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   147
        var o2 = new MyClass({
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   148
            foo: 7,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   149
            bar: "Aloha World!",
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   150
            foobar: false
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   151
        });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   152
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   153
        displayValues(o2, "o2 values set during construction", "#createo2 .example-out");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   154
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   155
    }, "#createo2 .do");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   156
});
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   157
</script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   158
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   159
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   160
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   161
<h2>Setting Up Your Own Class To Use Attribute</h2>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   162
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   163
<p>In this example, we'll show how you can use the Attribute utility to add managed attributes to your own object classes. Later examples will show how you can configure more advanced attribute properties, and work with attribute change events.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   164
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   165
<h3>Creating A YUI Instance</h3>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   166
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   167
<p>Before we get into attribute, a quick note on how we set up the instance of YUI we'll use for the examples. For all of the attribute examples, we'll setup our own instance of the YUI object and download the files we require on demand using the code pattern shown below:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   168
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   169
<pre class="code prettyprint">&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   170
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   171
    &#x2F;&#x2F; Create our local YUI instance, to avoid
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   172
    &#x2F;&#x2F; modifying the global YUI object
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   173
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   174
    YUI({...}).use(&quot;attribute&quot;, &quot;node&quot;, function(Y) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   175
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   176
        &#x2F;&#x2F; Example code is written inside this function,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   177
        &#x2F;&#x2F; which gets passed our own YUI instance, Y, loaded
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   178
        &#x2F;&#x2F; with the modules we asked for - &quot;attribute&quot; and &quot;node&quot;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   179
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   180
    });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   181
&lt;&#x2F;script&gt;</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   182
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   183
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   184
<p>The call to <code>YUI()</code> will create and return a new instance of the global YUI object for us to use. However this instance does not yet have all the modules we need for the examples.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   185
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   186
<p>To load the modules, we invoke <code>use()</code> and pass it the list of modules we'd like populated on our new YUI instance - in this case, <code>attribute</code> and <code>node</code>.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   187
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   188
The YUI instance will pull down the source files for modules if they don't already exist on the page, plus any or their dependencies.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   189
When the source files are done downloading, the callback function which we pass in as the 3rd argument to <code>use()</code>, is invoked. Our custom YUI instance, <code>Y</code>, is passed to the callback, populated with the classes which make up the requested modules.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   190
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   191
<p>This callback function is where we'll write all our example code. By working inside the callback function, we don't pollute the global namespace and we're also able to download the files we need on demand, rather than have them be on the page up front.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   192
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   193
<p>The configuration object passed to <code>YUI()</code> when creating the instance is used to specify how (<em>combined, separate, debug, min etc.</em>) we want the files downloaded, and from where. The API documentation for the <a href="http://yuilibrary.com/yui/docs/api/YUI.html">YUI object</a>, provides more information about the configuration options available.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   194
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   195
<h3>Defining Your Custom Class</h3>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   196
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   197
<p>The first step in the example is to create the constructor function for our new class, to which we want to add attribute support. In our example, this class is called <code>MyClass</code>.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   198
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   199
We then augment <code>MyClass</code> with <code>Y.Attribute</code>, so that it receives all of <code>Attribute&#x27;s</code> methods:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   200
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   201
<pre class="code prettyprint">function MyClass(cfg) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   202
    ...
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   203
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   204
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   205
Y.augment(MyClass, Y.Attribute);</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   206
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   207
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   208
<h3>Adding Attributes</h3>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   209
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   210
<p>We can now set up any attributes we need for <code>MyClass</code> using the <code>addAttrs</code> method. For the basic example we add 3 attributes - <code>foo</code>,<code>bar</code>, and <code>foobar</code>, and provide an initial <code>value</code> for each. 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   211
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   212
The same object literal we use to provide the initial value for the attribute will also be used in the other examples to configure attribute properties such as <code>readOnly</code> or <code>writeOnce</code>, and define <code>getter</code>, <code>setter</code> and <code>validator</code> methods for the attribute.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   213
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   214
<p>In this example, the default set of attributes which <code>MyClass</code> will support gets passed to <code>addAttrs</code> to set up the attributes for each instance during construction.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   215
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   216
The complete definition for <code>MyClass</code> is shown below:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   217
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   218
<pre class="code prettyprint">&#x2F;&#x2F; Setup custom class which we want to add managed attribute support to
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   219
function MyClass(cfg) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   220
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   221
    &#x2F;&#x2F; When constructed, setup the initial attributes for the 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   222
    &#x2F;&#x2F; instance, by calling the addAttrs method.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   223
    var attrs = {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   224
        &#x2F;&#x2F; Add 3 attributes, foo, bar and foobar
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   225
        &quot;foo&quot; : {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   226
            value:5
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   227
        },
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   228
 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   229
        &quot;bar&quot; : {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   230
            value:&quot;Hello World!&quot;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   231
        },
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   232
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   233
        &quot;foobar&quot; : {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   234
            value:true
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   235
        }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   236
    };
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   237
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   238
    this.addAttrs(attrs, cfg);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   239
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   240
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   241
&#x2F;&#x2F; Augment custom class with Attribute 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   242
Y.augment(MyClass, Y.Attribute);</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   243
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   244
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   245
<p>The <code>addAttrs</code> method, in addition to the default attribute configuration, also accepts an object literal (associative array) of name/value pairs which can be used to over-ride the default initial values of the attributes. This is useful for classes which wish to allow the user to set the value of attributes as part of object construction, as shown by the use of the <code>cfg</code> argument above.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   246
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   247
<p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   248
As mentioned previously, if you expect your class to be extended, <a href="../base/index.html">Base</a> provides a more convenient way for you to define the same attribute configuration statically for your class, so that it can be easily modified by extended classes. Base will take care of isolating the static configuration, so that it isn't modified across instances. 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   249
</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   250
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   251
<h3>Using Attributes</h3>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   252
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   253
<p>Now that we have <code>MyClass</code> defined with a set of attributes it supports, users can get and set attribute values on instances of <code>MyClass</code>:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   254
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   255
<p>We construct the first instance, <code>o1</code>, without setting any initial attribute values in the constructor, but use Attribute's <code>set()</code> method to set values after construction:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   256
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   257
<pre class="code prettyprint">&#x2F;&#x2F; Create a new instance, but don&#x27;t provide any initial attribute values.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   258
var o1 = new MyClass();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   259
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   260
&#x2F;&#x2F; Display current values
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   261
displayValues(o1, &quot;o1 with default values, set during construction&quot;, 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   262
                &quot;#createo1 .example-out&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   263
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   264
...
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   265
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   266
&#x2F;&#x2F; Update values, using the &quot;set&quot; method
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   267
o1.set(&quot;foo&quot;, 10);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   268
o1.set(&quot;bar&quot;, &quot;Hello New World!&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   269
o1.set(&quot;foobar&quot;, false);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   270
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   271
displayValues(o1, &quot;o1 values updated using set, after construction&quot;, 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   272
                &quot;#updateo1 .example-out&quot;);</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   273
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   274
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   275
<p>For the second instance that, <code>o2</code> we set the initial values of the attributes, using the constructor configuration argument:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   276
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   277
<pre class="code prettyprint">var o2 = new MyClass({
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   278
    foo: 7,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   279
    bar: &quot;Aloha World!&quot;,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   280
    foobar: false
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   281
});</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   282
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   283
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   284
<p>The <code>displayValues()</code> method uses Attribute's <code>get()</code> method to retrieve the current values of the attributes, to display:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   285
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   286
<pre class="code prettyprint">function displayValues(o, title, node) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   287
    var str = 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   288
        &#x27;&lt;div class=&quot;myclass&quot;&gt;&lt;div class=&quot;myclass-title&quot;&gt;&#x27; 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   289
        + title + 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   290
        &#x27;:&lt;&#x2F;div&gt;&lt;ul class=&quot;myclass-attrs&quot;&gt;&lt;li&gt;foo:&#x27; 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   291
        + o.get(&quot;foo&quot;) 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   292
        + &#x27;&lt;&#x2F;li&gt;&lt;li&gt;bar:&#x27;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   293
        + o.get(&quot;bar&quot;)
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   294
        + &#x27;&lt;&#x2F;li&gt;&lt;li&gt;foobar:&#x27;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   295
        + o.get(&quot;foobar&quot;)
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   296
        + &#x27;&lt;&#x2F;li&gt;&lt;&#x2F;ul&gt;&lt;&#x2F;div&gt;&#x27;;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   297
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   298
    &#x2F;&#x2F; Use the Y.one() method to get the first element which 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   299
    &#x2F;&#x2F; matches the selector passed in, to output the string to...       
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   300
    Y.one(node).set(&quot;innerHTML&quot;, str);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   301
}</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   302
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   303
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   304
<h2>Complete Example Source</h2>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   305
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   306
<pre class="code prettyprint">&lt;div id=&quot;createo1&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   307
    &lt;button type=&quot;button&quot; class=&quot;do&quot;&gt;Create First Instance&lt;&#x2F;button&gt; Construct o1, with default attribute values
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   308
    &lt;div class=&quot;example-out&quot;&gt;&lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   309
&lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   310
&lt;div id=&quot;updateo1&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   311
    &lt;button type=&quot;button&quot; class=&quot;do&quot;&gt;Update First Instance&lt;&#x2F;button&gt; Update the first instance, using set
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   312
    &lt;div class=&quot;example-out&quot;&gt;&lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   313
&lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   314
&lt;div id=&quot;createo2&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   315
    &lt;button type=&quot;button&quot; class=&quot;do&quot;&gt;Create Second Instance&lt;&#x2F;button&gt; Create the second instance, passing initial values to the constructor
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   316
    &lt;div class=&quot;example-out&quot;&gt;&lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   317
&lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   318
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   319
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   320
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   321
&#x2F;&#x2F; Get a new instance of YUI and 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   322
&#x2F;&#x2F; load it with the required set of modules
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   323
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   324
YUI().use(&quot;node&quot;, &quot;attribute&quot;, function(Y) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   325
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   326
    &#x2F;&#x2F; Setup custom class which we want to 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   327
    &#x2F;&#x2F; add managed attribute support to
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   328
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   329
    function MyClass(cfg) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   330
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   331
        &#x2F;&#x2F; When constructed, setup the initial attributes for the instance, by calling the addAttrs method.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   332
        var attrs = {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   333
            &#x2F;&#x2F; Add 3 attributes, foo, bar and foobar
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   334
            &quot;foo&quot; : {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   335
                value:5
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   336
            },
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   337
     
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   338
            &quot;bar&quot; : {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   339
                value:&quot;Hello World!&quot;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   340
            },
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   341
    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   342
            &quot;foobar&quot; : {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   343
                value:true
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   344
            }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   345
        };
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   346
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   347
        this.addAttrs(attrs, cfg);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   348
    }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   349
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   350
    &#x2F;&#x2F; Augment custom class with Attribute
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   351
    Y.augment(MyClass, Y.Attribute);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   352
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   353
    function displayValues(o, title, node) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   354
        var str = 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   355
            &#x27;&lt;div class=&quot;myclass&quot;&gt;&lt;div class=&quot;myclass-title&quot;&gt;&#x27; 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   356
            + title + 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   357
            &#x27;&lt;&#x2F;div&gt;&lt;ul class=&quot;myclass-attrs&quot;&gt;&lt;li&gt;foo: &#x27; 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   358
            + o.get(&quot;foo&quot;) 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   359
            + &#x27;&lt;&#x2F;li&gt;&lt;li&gt;bar: &#x27;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   360
            + o.get(&quot;bar&quot;)
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   361
            + &#x27;&lt;&#x2F;li&gt;&lt;li&gt;foobar: &#x27;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   362
            + o.get(&quot;foobar&quot;)
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   363
            + &#x27;&lt;&#x2F;li&gt;&lt;&#x2F;ul&gt;&lt;&#x2F;div&gt;&#x27;;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   364
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   365
        Y.one(node).set(&quot;innerHTML&quot;, str);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   366
    }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   367
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   368
    Y.on(&quot;click&quot;, function() {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   369
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   370
        &#x2F;&#x2F; Create a new instance, but don&#x27;t provide any initial attribute values.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   371
        var o1 = new MyClass();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   372
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   373
        &#x2F;&#x2F; Display current values
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   374
        displayValues(o1, &quot;o1 with default values, set during construction&quot;, &quot;#createo1 .example-out&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   375
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   376
        Y.on(&quot;click&quot;, function() {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   377
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   378
            &#x2F;&#x2F; Update values, using the &quot;set&quot; method
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   379
            o1.set(&quot;foo&quot;, 10);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   380
            o1.set(&quot;bar&quot;, &quot;Hello New World!&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   381
            o1.set(&quot;foobar&quot;, false);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   382
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   383
            displayValues(o1, &quot;o1 values updated using set, after construction&quot;, &quot;#updateo1 .example-out&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   384
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   385
        }, &quot;#updateo1 .do&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   386
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   387
    }, &quot;#createo1 .do&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   388
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   389
    Y.on(&quot;click&quot;, function() {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   390
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   391
        var o2 = new MyClass({
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   392
            foo: 7,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   393
            bar: &quot;Aloha World!&quot;,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   394
            foobar: false
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   395
        });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   396
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   397
        displayValues(o2, &quot;o2 values set during construction&quot;, &quot;#createo2 .example-out&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   398
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   399
    }, &quot;#createo2 .do&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   400
});
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   401
&lt;&#x2F;script&gt;</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   402
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   403
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   404
            </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   405
        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   406
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   407
        <div class="yui3-u-1-4">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   408
            <div class="sidebar">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   409
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   410
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   411
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   412
                    <div class="sidebox">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   413
                        <div class="hd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   414
                            <h2 class="no-toc">Examples</h2>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   415
                        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   416
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   417
                        <div class="bd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   418
                            <ul class="examples">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   419
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   420
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   421
                                        <li data-description="Use the Attribute API to define, set and get attribute values.">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   422
                                            <a href="attribute-basic.html">Basic Attribute Configuration</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   423
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   424
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   425
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   426
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   427
                                        <li data-description="Configure attributes to be readOnly or writeOnce.">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   428
                                            <a href="attribute-rw.html">Read-Only and Write-Once Attributes</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   429
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   430
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   431
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   432
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   433
                                        <li data-description="How to listen for changes in attribute values.">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   434
                                            <a href="attribute-event.html">Attribute Change Events</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   435
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   436
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   437
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   438
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   439
                                        <li data-description="Create a basic SpeedDater class, with Attribute support.">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   440
                                            <a href="attribute-basic-speeddate.html">Attribute Based Speed Dating</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   441
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   442
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   443
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   444
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   445
                                        <li data-description="Refactors the basic Speed Dating example, to use attribute change events to update rendered elements, and have two instances react to another.">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   446
                                            <a href="attribute-event-speeddate.html">Attribute Event Based Speed Dating</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   447
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   448
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   449
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   450
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   451
                                        <li data-description="Add custom methods to get and set attribute values and provide validation support.">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   452
                                            <a href="attribute-getset.html">Attribute Getters, Setters and Validators</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   453
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   454
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   455
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   456
                            </ul>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   457
                        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   458
                    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   459
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   460
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   461
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   462
            </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   463
        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   464
    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   465
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   466
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   467
<script src="../assets/vendor/prettify/prettify-min.js"></script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   468
<script>prettyPrint();</script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   469
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   470
<script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   471
YUI.Env.Tests = {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   472
    examples: [],
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   473
    project: '../assets',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   474
    assets: '../assets/attribute',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   475
    name: 'attribute-basic',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   476
    title: 'Basic Attribute Configuration',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   477
    newWindow: '',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   478
    auto:  false 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   479
};
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   480
YUI.Env.Tests.examples.push('attribute-basic');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   481
YUI.Env.Tests.examples.push('attribute-rw');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   482
YUI.Env.Tests.examples.push('attribute-event');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   483
YUI.Env.Tests.examples.push('attribute-basic-speeddate');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   484
YUI.Env.Tests.examples.push('attribute-event-speeddate');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   485
YUI.Env.Tests.examples.push('attribute-getset');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   486
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   487
</script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   488
<script src="../assets/yui/test-runner.js"></script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   489
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   490
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   491
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   492
</body>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   493
</html>