<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Attribute Configuration</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.example-out .myclass-attrs {
font-family:courier;
margin-top:2px;
}
.example-out .myclass-title {
font-weight:bold;
font-family:arial;
color:#8dd5e7;
margin-top:5px;
margin-bottom:3px;
}
.example-out {
overflow:auto;
border:1px solid #000;
color:#ffffff;
background-color:#004C6D;
margin:5px;
height:8em;
padding:2px 2px 2px 5px;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Attribute Configuration</h1>
<div class="exampleIntro">
<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>
<p>
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="http://developer.yahoo.com/yui/3/base/index.html"><code>Base</code></a> class when you need managed attribute support,
instead of augmenting Attribute directly, especially if you expect your class to be extended. <a href="http://developer.yahoo.com/yui/3/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.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="createo1">
<button type="button" class="do">Create First Instance</button> Construct o1, with default attribute values
<div class="example-out"></div>
</div>
<div id="updateo1">
<button type="button" class="do">Update First Instance</button> Update the first instance, using set
<div class="example-out"></div>
</div>
<div id="createo2">
<button type="button" class="do">Create Second Instance</button> Create the second instance, passing initial values to the constructor
<div class="example-out"></div>
</div>
<script type="text/javascript">
// Get a new instance of YUI and
// load it with the required set of modules
YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", function(Y) {
// Setup custom class which we want to
// add managed attribute support to
function MyClass(cfg) {
// When constructed, setup the initial attributes for the instance, by calling the addAttrs method.
var attrs = {
// Add 3 attributes, foo, bar and foobar
"foo" : {
value:5
},
"bar" : {
value:"Hello World!"
},
"foobar" : {
value:true
}
};
this.addAttrs(attrs, cfg);
}
// Augment custom class with Attribute
Y.augment(MyClass, Y.Attribute);
function displayValues(o, title, node) {
var str =
'<div class="myclass"><div class="myclass-title">'
+ title +
'</div><ul class="myclass-attrs"><li>foo: '
+ o.get("foo")
+ '</li><li>bar: '
+ o.get("bar")
+ '</li><li>foobar: '
+ o.get("foobar")
+ '</li></ul></div>';
Y.one(node).set("innerHTML", str);
}
Y.on("click", function() {
// Create a new instance, but don't provide any initial attribute values.
var o1 = new MyClass();
// Display current values
displayValues(o1, "o1 with default values, set during construction", "#createo1 .example-out");
Y.on("click", function() {
// Update values, using the "set" method
o1.set("foo", 10);
o1.set("bar", "Hello New World!");
o1.set("foobar", false);
displayValues(o1, "o1 values updated using set, after construction", "#updateo1 .example-out");
}, "#updateo1 .do");
}, "#createo1 .do");
Y.on("click", function() {
var o2 = new MyClass({
foo: 7,
bar: "Aloha World!",
foobar: false
});
displayValues(o2, "o2 values set during construction", "#createo2 .example-out");
}, "#createo2 .do");
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>