~bac/juju-gui/trunkcopy

<p>The <a href="attribute-basic.html">"Basic Attribute Configuration" example</a> shows how you can add attributes to a host class, and set up default values for them using the attribute configuration object. This example explores how you can configure <code>setter</code>, <code>getter</code> and <code>validator</code> functions for individual attributes, which can be used to modify or normalize attribute values during get and set invocations, and prevent invalid values from being stored.</p>

</div>

<div class="header">Enter new values and click the "Set" buttons</div>

100

101

<li>Try entering valid and invalid values for x, y; or values which attempt to position the box outside it's parent (parent box co-ordinates are displayed next to the text box).</li>

102

<li>Try entering rgb, hex or keyword color values [ <code>rgb(255,0,0)</code>, <code>#ff0000</code>, <code>red</code> ].</li>

103

</ul>

104

105

<p>

106

107

108

109

110

111

</form>

112

</p>

113

<p>

114

115

116

117

118

119

</form>

120

</p>

121

<p>

122

123

<label for="color">color:</label>

124

125

126

</form>

127

</p>

128

</div>

129

</div>

130

131

132

133

134

</div>

135

</div>

136

137

138

139

140

// Get a new YUI instance

141

YUI().use("node", "attribute", function(Y) {

142

143

var boxParent = Y.one("#boxParent");

144

145

// Setup a custom class with attribute support

146

function Box(cfg) {

147

this._createNode(cfg);

148

149

// Attribute configuration

150

var attrs = {

151

152

"parent" : {

153

value: null

154

155

156

"x" : {

157

setter: function(val, name) {

158

// Pass through x value to xy

159

this.set("xy", [parseInt(val), this.get("y")]);

160

161

162

getter: function(val, name) {

163

// Get x value from xy

164

return this.get("xy")[0];

165

}

166

167

168

"y" : {

169

setter: function(val, name) {

170

// Pass through y value to xy

171

this.set("xy", [this.get("x"), parseInt(val)]);

172

173

174

getter: function() {

175

// Get y value from xy

176

return this.get("xy")[1];

177

}

178

179

180

"xy" : {

181

// Actual stored xy co-ordinates

182

value: [0, 0],

183

184

setter: function(val, name) {

185

// Constrain XY value to the parent element.

186

187

// Returns the constrained xy value, which will

188

// be the final value stored.

189

return this.constrain(val);

190

191

192

validator: function(val, name) {

193

// Ensure we only store a valid data value

194

return (Y.Lang.isArray(val) && val.length == 2 && Y.Lang.isNumber(val[0]) && Y.Lang.isNumber(val[1]));

195

}

196

197

198

"color" : {

199

value: "olive",

200

201

getter: function(val, name) {

202

// Always normalize the returned value to

203

// a hex color value, even if the stored

204

// value is a keyword, or an rgb value.

205

if (val) {

206

return Y.Color.toHex(val);

207

} else {

208

return null;

209

}

210

211

212

validator: function(val, name) {

213

// Ensure we only store rgb, hex or keyword values.

214

return (Y.Color.re_RGB.test(val) || Y.Color.re_hex.test(val) || Y.Color.KEYWORDS[val]);

215

}

216

}

217

};

218

219

this.addAttrs(attrs, cfg);

220

221

this._sync();

222

this._bind();

223

}

224

225

Box.BUFFER = 5;

226

227

// Create the box node

228

Box.prototype._createNode = function() {

229

this._node = Y.Node.create('<div class="yui3-box"><p>Positioned Box</p><p class="coord"></p><p class="color">None</p></div>');

230

};

231

232

// Update rendered state to match the attribute state

233

Box.prototype._sync = function() {

234

this._syncParent();

235

this._syncXY();

236

this._syncColor();

237

};

238

239

Box.prototype._syncParent = function() {

240

this.get("parent").appendChild(this._node);

241

};

242

243

Box.prototype._syncXY = function() {

244

this._node.setXY(this.get("xy"));

245

this._node.one("p.coord").set("innerHTML", "[" + this.get("x") + "," + this.get("y") + "]");

246

};

247

248

Box.prototype._syncColor = function() {

249

this._node.setStyle("backgroundColor", this.get("color"));

250

this._node.one("p.color").set("innerHTML", this.get("color"));

251

};

252

253

// Bind listeners for attribute change events

254

Box.prototype._bind = function() {

255

256

// Reflect any changes in xy, to the rendered Node

257

this.after("xyChange", this._syncXY);

258

259

// Reflect any changes in color, to the rendered Node

260

// and output the color value received from get

261

this.after("colorChange", this._syncColor);

262

263

// Append the rendered node to the parent provided

264

this.after("parentChange", this._syncParent);

265

266

};

267

268

// Get min, max unconstrained values for X. Using Math.round to handle FF3's sub-pixel region values

269

Box.prototype.getXConstraints = function() {

270

var parentRegion = this.get("parent").get("region");

271

return [Math.round(parentRegion.left + Box.BUFFER), Math.round(parentRegion.right - this._node.get("offsetWidth") - Box.BUFFER)];

272

};

273

274

// Get min, max unconstrained values for Y. Using Math.round to handle FF3's sub-pixel region values

275

Box.prototype.getYConstraints = function() {

276

var parentRegion = this.get("parent").get("region");

277

return [Math.round(parentRegion.top + Box.BUFFER), Math.round(parentRegion.bottom - this._node.get("offsetHeight") - Box.BUFFER)];

278

};

279

280

// Constrain the x,y value provided

281

Box.prototype.constrain = function(val) {

282

283

// If the X value places the box outside it's parent,

284

// modify it's value to place the box inside it's parent.

285

286

var xConstraints = this.getXConstraints();

287

288

if (val[0] < xConstraints[0]) {

289

val[0] = xConstraints[0];

290

} else {

291

if (val[0] > xConstraints[1]) {

292

val[0] = xConstraints[1];

293

}

294

}

295

296

// If the Y value places the box outside it's parent,

297

// modify it's value to place the box inside it's parent.

298

299

var yConstraints = this.getYConstraints();

300

301

if (val[1] < yConstraints[0]) {

302

val[1] = yConstraints[0];

303

} else {

304

if (val[1] > yConstraints[1]) {

305

val[1] = yConstraints[1];

306

}

307

}

308

309

return val;

310

};

311

312

313

Y.augment(Box, Y.Attribute);

314

315

// ------

316

317

// Create a new instance of Box

318

var box = new Box({

319

parent : boxParent

320

});

321

322

// Set references to form controls

323

var xTxt = Y.one("#x");

324

var yTxt = Y.one("#y");

325

var colorTxt = Y.one("#color");

326

327

var xHint = Y.one("#xhint");

328

var yHint = Y.one("#yhint");

329

330

function getAll() {

331

xTxt.set("value", box.get("x"));

332

yTxt.set("value", box.get("y"));

333

colorTxt.set("value", box.get("color"));

334

}

335

336

// Use event delegation for the action button clicks, and form submissions

337

Y.delegate("click", function(e) {

338

339

// Get Node target from the event object

340

341

// We already know it's a button which has an action because

342

// of our selector (button.action), so all we need to do is

343

// route it based on the id.

344

var id = e.currentTarget.get("id");

345

346

switch (id) {

347

case "setXY":

348

box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);

349

break;

350

case "setAll":

351

box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);

352

box.set("color", Y.Lang.trim(colorTxt.get("value")));

353

break;

354

case "getAll":

355

getAll();

356

break;

357

default:

358

break;

359

}

360

361

}, "#attrs", "button.action");

362

363

Y.all("#attrs form.action").on("submit", function(e) {

364

365

e.preventDefault();

366

367

// Get Node target from the event object

368

369

// We already know it's a button which has an action because

370

// of our selector (button.action), so all we need to do is

371

// route it based on the id.

372

var id = e.currentTarget.get("id");

373

374

switch (id) {

375

case "setX":

376

box.set("x", parseInt(xTxt.get("value")));

377

break;

378

case "setY":

379

box.set("y", parseInt(yTxt.get("value")));

380

break;

381

case "setColor":

382

box.set("color", Y.Lang.trim(colorTxt.get("value")));

383

break;

384

default:

385

break;

386

}

387

});

388

389

// Bind listeners to provide min, max unconstrained value hints for x, y

390

// (focus/blur doesn't bubble, so bind individual listeners)

391

Y.on("focus", function() {

392

var minmax = box.getXConstraints();

393

xHint.set("innerHTML", "Valid values: " + minmax[0] + " to " + minmax[1]);

394

}, xTxt);

395

396

Y.on("focus", function() {

397

var minmax = box.getYConstraints();

398

yHint.set("innerHTML", "Valid values: " + minmax[0] + " to " + minmax[1]);

399

}, yTxt);

400

401

Y.on("blur", function() {

402

xHint.set("innerHTML", "");

403

}, xTxt);

404

405

Y.on("blur", function() {

406

yHint.set("innerHTML", "");

407

}, yTxt);

408

409

getAll();

410

});

411

</script>

412

413

</div>

414

415

<h2>Getter, Setter And Validator Functions</h2>

416

417

<p>Attribute lets you configure <code>getter</code> and <code>setter</code> functions for each attribute. These functions are invoked when the user calls Attribute's <code>get</code> and <code>set</code> methods, and provide a way to modify the value returned or the value stored respectively.</p>

418

419

<p>You can also define a <code>validator</code> function for each attribute, which is used to validate the final value before it gets stored.</p>

420

421

<p>All these functions receive the value and name of the attribute being set or retrieved, as shown in the example code below. The name is not used in this example, but is provided to support use cases where you may wish to share the same function between different attributes.</p>

422

423

<h3>Creating The Box Class - The X, Y And XY Attributes</h3>

424

425

<p>In this example, we'll set up a custom <code>Box</code> class representing a positionable element, with <code>x</code>, <code>y</code> and <code>xy</code> attributes.</p>

426

427

<p>Only the <code>xy</code> attribute will actually store the page co-ordinate position of the box. The <code>x</code> and <code>y</code> attributes provide the user a convenient way to set only one of the co-ordinates.

428

However we don't want to store the actual values in the <code>x</code> and <code>y</code> attributes, to avoid having to constantly synchronize all three.

429

430

The <code>getter</code> and <code>setter</code> functions provide us with an easy way to achieve this. We'll define <code>getter</code> and <code>setter</code> functions for both the <code>x</code> and <code>y</code> attributes, which simply pass through to the <code>xy</code> attribute to store and retrieve values:</p>

431

432

<pre class="code prettyprint">// Setup a custom class with attribute support

433

function Box(cfg) {

434

435

...

436

437

// Attribute configuration

438

var attrs = {

439

440

"parent" : {

441

value: null

442

443

444

"x" : {

445

setter: function(val, name) {

446

// Pass through x value to xy

447

this.set("xy", [parseInt(val), this.get("y")]);

448

449

450

getter: function(val, name) {

451

// Get x value from xy

452

return this.get("xy")[0];

453

}

454

455

456

"y" : {

457

setter: function(val, name) {

458

// Pass through y value to xy

459

this.set("xy", [this.get("x"), parseInt(val)]);

460

461

462

getter: function() {

463

// Get y value from xy

464

return this.get("xy")[1];

465

}

466

467

468

"xy" : {

469

// Actual stored xy co-ordinates

470

value: [0, 0],

471

472

setter: function(val, name) {

473

// Constrain XY value to the parent element.

474

475

// Returns the constrained xy value, which will

476

// be the final value stored.

477

return this.constrain(val);

478

479

480

validator: function(val, name) {

481

// Ensure we only store a valid data value

482

return (Y.Lang.isArray(val) &&

483

val.length == 2 &&

484

Y.Lang.isNumber(val[0]) && Y.Lang.isNumber(val[1]));

485

}

486

487

488

...

489

490

this.addAttrs(attrs, cfg);

491

492

...

493

}</pre>

494

495

496

<p>The <code>validator</code> function for <code>xy</code> ensures that only valid values finally end up being stored.</p>

497

498

<p>The <code>xy</code> attribute also has a <code>setter</code> function configured, which makes sure that the box is always constrained to it's parent element. The <code>constrain</code> method which it delegates to, takes the xy value the user is trying to set and returns a constrained value if the x or y values fall outside the parent box. The value which is returned by the <code>setter</code> is the value which is ultimately stored for the <code>xy</code> attribute:</p>

499

500

<pre class="code prettyprint">// Get min, max unconstrained values for X.

501

// Using Math.round to handle FF3's sub-pixel region values

502

Box.prototype.getXConstraints = function() {

503

var parentRegion = this.get("parent").get("region");

504

return [Math.round(parentRegion.left + Box.BUFFER),

505

Math.round(parentRegion.right - this._node.get("offsetWidth") - Box.BUFFER)];

506

};

507

508

// Get min, max unconstrained values for Y.

509

// Using Math.round to handle FF3's sub-pixel region values

510

Box.prototype.getYConstraints = function() {

511

var parentRegion = this.get("parent").get("region");

512

return [Math.round(parentRegion.top + Box.BUFFER),

513

Math.round(parentRegion.bottom - this._node.get("offsetHeight") - Box.BUFFER)];

514

};

515

516

// Constrains given x,y values

517

Box.prototype.constrain = function(val) {

518

519

// If the X value places the box outside it's parent,

520

// modify it's value to place the box inside it's parent.

521

522

var xConstraints = this.getXConstraints();

523

524

if (val[0] < xConstraints[0]) {

525

val[0] = xConstraints[0];

526

} else {

527

if (val[0] > xConstraints[1]) {

528

val[0] = xConstraints[1];

529

}

530

}

531

532

// If the Y value places the box outside it's parent,

533

// modify it's value to place the box inside it's parent.

534

535

var yConstraints = this.getYConstraints();

536

537

if (val[1] < yConstraints[0]) {

538

val[1] = yConstraints[0];

539

} else {

540

if (val[1] > yConstraints[1]) {

541

val[1] = yConstraints[1];

542

}

543

}

544

545

return val;

546

};</pre>

547

548

549

<p>The <code>setter</code>, <code>getter</code> and <code>validator</code> functions are invoked with the host object as the context, so that they can refer to the host object using "<code>this</code>", as we see in the <code>setter</code> function for <code>xy</code>.</p>

550

551

<h3>The Color Attribute - Normalizing Stored Values Through Get</h3>

552

553

<p>The <code>Box</code> class also has a <code>color</code> attribute which also has a <code>getter</code> and <code>validator</code> functions defined:</p>

554

555

<pre class="code prettyprint">...

556

"color" : {

557

value: "olive",

558

559

getter: function(val, name) {

560

if (val) {

561

return Y.Color.toHex(val);

562

} else {

563

return null;

564

}

565

566

567

validator: function(val, name) {

568

return (Y.Color.re_RGB.test(val) || Y.Color.re_hex.test(val)

569

|| Y.Color.KEYWORDS[val]);

570

}

571

}

572

...</pre>

573

574

575

<p>The role of the <code>getter</code> handler in this case is to normalize the actual stored value of the <code>color</code> attribute, so that users always receive the hex value, regardless of the actual value stored, which maybe a color keyword (e.g. <code>"red"</code>), an rgb value (e.g.<code>rbg(255,0,0)</code>), or a hex value (<code>#ff0000</code>). The <code>validator</code> ensures the the stored value is one of these three formats.</p>

576

577

<h3>Syncing Changes Using Attribute Change Events</h3>

578

579

<p>Another interesting aspect of this example, is it's use of attribute change events to listen for changes to the attribute values. <code>Box</code>'s <code>_bind</code> method configures a set of attribute change event listeners which monitor changes to the <code>xy</code>, <code>color</code> and <code>parent</code> attributes and update the rendered DOM for the Box in response:</p>

580

581

<pre class="code prettyprint">// Bind listeners for attribute change events

582

Box.prototype._bind = function() {

583

584

// Reflect any changes in xy, to the rendered Node

585

this.after("xyChange", this._syncXY);

586

587

// Reflect any changes in color, to the rendered Node

588

// and output the color value received from get

589

this.after("colorChange", this._syncColor);

590

591

// Append the rendered node to the parent provided

592

this.after("parentChange", this._syncParent);

593

594

};</pre>

595

596

597

<p>Since only <code>xy</code> stores the final co-ordinates, we don't need to monitor the <code>x</code> and <code>y</code> attributes individually for changes.</p>

598

599

<h3>DOM Event Listeners And Delegation</h3>

600

601

<p>Although not an integral part of the example, it's worth highlighting the code which is used to setup the DOM event listeners for the form elements used by the example:</p>

602

603

<pre class="code prettyprint">// Set references to form controls

604

var xTxt = Y.one("#x");

605

var yTxt = Y.one("#y");

606

var colorTxt = Y.one("#color");

607

608

// Use event delegation for the action button clicks, and form submissions

609

Y.delegate("click", function(e) {

610

611

// Get Node target from the event object

612

613

// We already know it's a button which has an action because

614

// of our selector (button.action), so all we need to do is

615

// route it based on the id.

616

var id = e.currentTarget.get("id");

617

618

switch (id) {

619

case "setXY":

620

box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);

621

break;

622

case "setAll":

623

box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);

624

box.set("color", Y.Lang.trim(colorTxt.get("value")));

625

break;

626

case "getAll":

627

getAll();

628

break;

629

default:

630

break;

631

}

632

633

}, "#attrs", "button.action");</pre>

634

635

<p>Rather than attach individual listeners to each button, the above code uses YUI 3's <code>delegate</code> support, to listen for <code>click</code> from buttons, with an <code>action</code> class which bubble up to the <code>attrs</code> element.</p>

636

<p>The delegate listener uses the <a href="http://yuilibrary.com/yui/docs/api/DOMEventFacade.html">Event Facade</a> which normalizes cross-browser access to DOM event properties, such as <code>currentTarget</code>, to route to the appropriate button handler. Note the use of selector syntax when we specify the elements for the listener (e.g. <code>#attrs</code>, <code>button.actions</code>) and the use of the <a href="http://yuilibrary.com/yui/docs/api/Node.html">Node</a> facade when dealing with references to HTML elements (e.g. <code>xTxt, yTxt, colorTxt</code>).</p>

637

638

<h2>Complete Example Source</h2>

639

640

641

<div class="header">Enter new values and click the "Set" buttons</div>

642

643

644

<li>Try entering valid and invalid values for x, y; or values which attempt to position the box outside it's parent (parent box co-ordinates are displayed next to the text box).</li>

645

<li>Try entering rgb, hex or keyword color values [ <code>rgb(255,0,0)</code>, <code>#ff0000</code>, <code>red</code> ].</li>

646

</ul>

647

648

<p>

649

650

651

652

653

654

</form>

655

</p>

656

<p>

657

658

659

660

661

662

</form>

663

</p>

664

<p>

665

666

<label for="color">color:</label>

667

668

669

</form>

670

</p>

671

</div>

672

</div>

673

674

675

676

677

</div>

678

</div>

679

680

681

682

683

// Get a new YUI instance

684

YUI().use("node", "attribute", function(Y) {

685

686

var boxParent = Y.one("#boxParent");

687

688

// Setup a custom class with attribute support

689

function Box(cfg) {

690

this._createNode(cfg);

691

692

// Attribute configuration

693

var attrs = {

694

695

"parent" : {

696

value: null

697

698

699

"x" : {

700

setter: function(val, name) {

701

// Pass through x value to xy

702

this.set("xy", [parseInt(val), this.get("y")]);

703

704

705

getter: function(val, name) {

706

// Get x value from xy

707

return this.get("xy")[0];

708

}

709

710

711

"y" : {

712

setter: function(val, name) {

713

// Pass through y value to xy

714

this.set("xy", [this.get("x"), parseInt(val)]);

715

716

717

getter: function() {

718

// Get y value from xy

719

return this.get("xy")[1];

720

}

721

722

723

"xy" : {

724

// Actual stored xy co-ordinates

725

value: [0, 0],

726

727

setter: function(val, name) {

728

// Constrain XY value to the parent element.

729

730

// Returns the constrained xy value, which will

731

// be the final value stored.

732

return this.constrain(val);

733

734

735

validator: function(val, name) {

736

// Ensure we only store a valid data value

737

return (Y.Lang.isArray(val) && val.length == 2 && Y.Lang.isNumber(val[0]) && Y.Lang.isNumber(val[1]));

738

}

739

740

741

"color" : {

742

value: "olive",

743

744

getter: function(val, name) {

745

// Always normalize the returned value to

746

// a hex color value, even if the stored

747

// value is a keyword, or an rgb value.

748

if (val) {

749

return Y.Color.toHex(val);

750

} else {

751

return null;

752

}

753

754

755

validator: function(val, name) {

756

// Ensure we only store rgb, hex or keyword values.

757

return (Y.Color.re_RGB.test(val) || Y.Color.re_hex.test(val) || Y.Color.KEYWORDS[val]);

758

}

759

}

760

};

761

762

this.addAttrs(attrs, cfg);

763

764

this._sync();

765

this._bind();

766

}

767

768

Box.BUFFER = 5;

769

770

// Create the box node

771

Box.prototype._createNode = function() {

772

this._node = Y.Node.create('<div class="yui3-box"><p>Positioned Box</p><p class="coord"></p><p class="color">None</p></div>');

773

};

774

775

// Update rendered state to match the attribute state

776

Box.prototype._sync = function() {

777

this._syncParent();

778

this._syncXY();

779

this._syncColor();

780

};

781

782

Box.prototype._syncParent = function() {

783

this.get("parent").appendChild(this._node);

784

};

785

786

Box.prototype._syncXY = function() {

787

this._node.setXY(this.get("xy"));

788

this._node.one("p.coord").set("innerHTML", "[" + this.get("x") + "," + this.get("y") + "]");

789

};

790

791

Box.prototype._syncColor = function() {

792

this._node.setStyle("backgroundColor", this.get("color"));

793

this._node.one("p.color").set("innerHTML", this.get("color"));

794

};

795

796

// Bind listeners for attribute change events

797

Box.prototype._bind = function() {

798

799

// Reflect any changes in xy, to the rendered Node

800

this.after("xyChange", this._syncXY);

801

802

// Reflect any changes in color, to the rendered Node

803

// and output the color value received from get

804

this.after("colorChange", this._syncColor);

805

806

// Append the rendered node to the parent provided

807

this.after("parentChange", this._syncParent);

808

809

};

810

811

// Get min, max unconstrained values for X. Using Math.round to handle FF3's sub-pixel region values

812

Box.prototype.getXConstraints = function() {

813

var parentRegion = this.get("parent").get("region");

814

return [Math.round(parentRegion.left + Box.BUFFER), Math.round(parentRegion.right - this._node.get("offsetWidth") - Box.BUFFER)];

815

};

816

817

// Get min, max unconstrained values for Y. Using Math.round to handle FF3's sub-pixel region values

818

Box.prototype.getYConstraints = function() {

819

var parentRegion = this.get("parent").get("region");

820

return [Math.round(parentRegion.top + Box.BUFFER), Math.round(parentRegion.bottom - this._node.get("offsetHeight") - Box.BUFFER)];

821

};

822

823

// Constrain the x,y value provided

824

Box.prototype.constrain = function(val) {

825

826

// If the X value places the box outside it's parent,

827

// modify it's value to place the box inside it's parent.

828

829

var xConstraints = this.getXConstraints();

830

831

if (val[0] < xConstraints[0]) {

832

val[0] = xConstraints[0];

833

} else {

834

if (val[0] > xConstraints[1]) {

835

val[0] = xConstraints[1];

836

}

837

}

838

839

// If the Y value places the box outside it's parent,

840

// modify it's value to place the box inside it's parent.

841

842

var yConstraints = this.getYConstraints();

843

844

if (val[1] < yConstraints[0]) {

845

val[1] = yConstraints[0];

846

} else {

847

if (val[1] > yConstraints[1]) {

848

val[1] = yConstraints[1];

849

}

850

}

851

852

return val;

853

};

854

855

856

Y.augment(Box, Y.Attribute);

857

858

// ------

859

860

// Create a new instance of Box

861

var box = new Box({

862

parent : boxParent

863

});

864

865

// Set references to form controls

866

var xTxt = Y.one("#x");

867

var yTxt = Y.one("#y");

868

var colorTxt = Y.one("#color");

869

870

var xHint = Y.one("#xhint");

871

var yHint = Y.one("#yhint");

872

873

function getAll() {

874

xTxt.set("value", box.get("x"));

875

yTxt.set("value", box.get("y"));

876

colorTxt.set("value", box.get("color"));

877

}

878

879

// Use event delegation for the action button clicks, and form submissions

880

Y.delegate("click", function(e) {

881

882

// Get Node target from the event object

883

884

// We already know it's a button which has an action because

885

// of our selector (button.action), so all we need to do is

886

// route it based on the id.

887

var id = e.currentTarget.get("id");

888

889

switch (id) {

890

case "setXY":

891

box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);

892

break;

893

case "setAll":

894

box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);

895

box.set("color", Y.Lang.trim(colorTxt.get("value")));

896

break;

897

case "getAll":

898

getAll();

899

break;

900

default:

901

break;

902

}

903

904

}, "#attrs", "button.action");

905

906

Y.all("#attrs form.action").on("submit", function(e) {

907

908

e.preventDefault();

909

910

// Get Node target from the event object

911

912

// We already know it's a button which has an action because

913

// of our selector (button.action), so all we need to do is

914

// route it based on the id.

915

var id = e.currentTarget.get("id");

916

917

switch (id) {

918

case "setX":

919

box.set("x", parseInt(xTxt.get("value")));

920

break;

921

case "setY":

922

box.set("y", parseInt(yTxt.get("value")));

923

break;

924

case "setColor":

925

box.set("color", Y.Lang.trim(colorTxt.get("value")));

926

break;

927

default:

928

break;

929

}

930

});

931

932

// Bind listeners to provide min, max unconstrained value hints for x, y

933

// (focus/blur doesn't bubble, so bind individual listeners)

934

Y.on("focus", function() {

935

var minmax = box.getXConstraints();

936

xHint.set("innerHTML", "Valid values: " + minmax[0] + " to " + minmax[1]);

937

}, xTxt);

938

939

Y.on("focus", function() {

940

var minmax = box.getYConstraints();

941

yHint.set("innerHTML", "Valid values: " + minmax[0] + " to " + minmax[1]);

942

}, yTxt);

943

944

Y.on("blur", function() {

945

xHint.set("innerHTML", "");

946

}, xTxt);

947

948

Y.on("blur", function() {

949

yHint.set("innerHTML", "");

950

}, yTxt);

951

952

getAll();

953

});

954

</script></pre>

955

956

</div>

957

</div>

958

</div>

959

960

961

962

963

964

965

966

967

<h2 class="no-toc">Examples</h2>

968

</div>

969

970

971

972

973

974

975

<a href="attribute-basic.html">Basic Attribute Configuration</a>

976

</li>

977

978

979

980

981

<a href="attribute-rw.html">Read-Only and Write-Once Attributes</a>

982

</li>

983

984

985

986

987

<a href="attribute-event.html">Attribute Change Events</a>

988

</li>

989

990

991

992

993

<a href="attribute-basic-speeddate.html">Attribute Based Speed Dating</a>

994

</li>

995

996

997

998

999

<a href="attribute-event-speeddate.html">Attribute Event Based Speed Dating</a>

1000

</li>

1001

1002

1003

1004

1005

<a href="attribute-getset.html">Attribute Getters, Setters and Validators</a>

1006

</li>

1007

1008

1009

</ul>

1010

</div>

1011

</div>

1012

1013

1014

1015

</div>

1016

</div>

1017

</div>

1018

</div>

1019

1020

1021

1022

1023

</body>

1024

</html>

Older »