Andreas Hocevar
478 lines
15 KiB
HTML
478 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
Copyright 2010 The Closure Library Authors. All Rights Reserved.
|
|
|
|
Use of this source code is governed by the Apache License, Version 2.0.
|
|
See the COPYING file for details.
|
|
-->
|
|
<head>
|
|
<title>goog.ui.Control Demo</title>
|
|
<script src="../base.js"></script>
|
|
<script>
|
|
goog.require('goog.array');
|
|
goog.require('goog.debug.DivConsole');
|
|
goog.require('goog.debug.LogManager');
|
|
goog.require('goog.events');
|
|
goog.require('goog.events.EventType');
|
|
goog.require('goog.log');
|
|
goog.require('goog.object');
|
|
goog.require('goog.ui.Control');
|
|
goog.require('goog.ui.ControlRenderer');
|
|
goog.require('goog.ui.decorate');
|
|
goog.require('goog.ui.registry');
|
|
</script>
|
|
<link rel="stylesheet" href="css/demo.css">
|
|
<style>
|
|
/* Demo styles for goog.ui.Control. */
|
|
.goog-control {
|
|
position: relative;
|
|
width: 20ex;
|
|
margin: 2px;
|
|
border: 2px solid #036;
|
|
padding: 2px;
|
|
font: normal 9pt "Trebuchet MS", Tahoma, Arial, sans-serif;
|
|
color: #036;
|
|
background-color:#69c;
|
|
cursor: pointer;
|
|
outline: none;
|
|
-moz-outline: none;
|
|
}
|
|
|
|
.goog-control-disabled {
|
|
border-color: #888;
|
|
color: #888;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.goog-control-hover {
|
|
border-color: #369;
|
|
color: #369;
|
|
background-color: #9cf;
|
|
}
|
|
|
|
.goog-control-active,
|
|
.goog-control-selected,
|
|
.goog-control-checked {
|
|
border-color: #9cf;
|
|
color: #9cf;
|
|
background-color: #369;
|
|
}
|
|
|
|
.goog-control-focused {
|
|
border-color: orange;
|
|
}
|
|
|
|
/* Custom control styles. */
|
|
.goog-custom-control {
|
|
position: relative;
|
|
width: 25ex;
|
|
margin: 4px 0;
|
|
border: 2px solid #eee;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
outline: none;
|
|
-moz-outline: none;
|
|
}
|
|
|
|
.goog-custom-control-outer-box {
|
|
position: relative;
|
|
margin: 0;
|
|
border: 2px solid #ddd;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.goog-custom-control-inner-box {
|
|
position: relative;
|
|
margin: 0;
|
|
border: 2px solid #ccc;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.goog-custom-control-content {
|
|
position: relative;
|
|
margin: 0;
|
|
border: 2px solid #bbb;
|
|
padding: 4px;
|
|
font-family: Georgia, Times, serif;
|
|
color: #ddd;
|
|
background-color: #aaa;
|
|
}
|
|
|
|
.goog-custom-control-hover {
|
|
border-color: #eef;
|
|
}
|
|
|
|
.goog-custom-control-hover .goog-custom-control-outer-box {
|
|
border-color: #ddf;
|
|
}
|
|
|
|
.goog-custom-control-hover .goog-custom-control-inner-box {
|
|
border-color: #ccf;
|
|
}
|
|
|
|
.goog-custom-control-hover .goog-custom-control-content {
|
|
border-color: #bbf;
|
|
background-color: #aaf;
|
|
}
|
|
|
|
.goog-custom-control-active .goog-custom-control-content {
|
|
color: #fff;
|
|
}
|
|
|
|
.goog-custom-control-focused {
|
|
border-style: dashed;
|
|
border-color: orange;
|
|
}
|
|
|
|
/* "Insert" button styles. */
|
|
.goog-edit-insert-icon {
|
|
height: 16px;
|
|
width: 16px;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
background: url(../images/toolbar_icons.gif) no-repeat -80px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.goog-edit-insert-caption {
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0 2px;
|
|
vertical-align: middle;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Extra CSS styles. */
|
|
.extra-red {
|
|
border: 1px solid red;
|
|
background-color: #fcc;
|
|
}
|
|
|
|
.extra-blue {
|
|
border: 1px solid blue;
|
|
background-color: #ccf;
|
|
}
|
|
|
|
.extra-thick-border {
|
|
border-width: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>goog.ui.Control</h1>
|
|
<table border="0" cellpadding="0" cellspacing="4" width="100%">
|
|
<tbody>
|
|
<tr valign="top">
|
|
<td width="67%">
|
|
<!-- Left pane -->
|
|
<fieldset>
|
|
<legend>This control was created programmatically: </legend>
|
|
<div id="c1"></div>
|
|
<br/>
|
|
This control dispatches ENTER, LEAVE, and ACTION events on
|
|
mouseover, mouseout, and mouseup, respectively. It supports
|
|
keyboard focus.
|
|
</fieldset>
|
|
<br/>
|
|
<fieldset>
|
|
<legend>This was created by decorating a SPAN: </legend>
|
|
<span id="c2"
|
|
class="goog-inline-block goog-control goog-control-disabled"
|
|
style="vertical-align:middle;">
|
|
Decorated Example
|
|
</span>
|
|
<br/>
|
|
<span id="hint" class="hint">
|
|
You need to enable this component first.
|
|
</span>
|
|
<br/>
|
|
<br/>
|
|
This control is configured to dispatch state transition events in
|
|
addition to ENTER, LEAVE, and ACTION. It also supports keyboard
|
|
focus. Watch the event log as you interact with this component.
|
|
<br/>
|
|
<br/>
|
|
<label>
|
|
Click here to toggle the component's enabled status:
|
|
<input type="checkbox" id="enable"/>
|
|
</label>
|
|
<br/>
|
|
<label>
|
|
Click here to toggle the component's visiblity:
|
|
<input type="checkbox" id="visible" checked/>
|
|
</label>
|
|
</fieldset>
|
|
<br/>
|
|
<h3>Custom Renderers</h3>
|
|
<fieldset>
|
|
<legend>
|
|
This control was created using a custom renderer:
|
|
</legend>
|
|
<div id="c3"></div>
|
|
</fieldset>
|
|
<br/>
|
|
<fieldset>
|
|
<legend>
|
|
This was created by decorating a DIV via a custom renderer:
|
|
</legend>
|
|
<div id="c4" class="goog-custom-control">
|
|
<span class="goog-inline-block goog-edit-insert-icon">
|
|
|
|
</span>
|
|
<span class="goog-inline-block goog-edit-insert-caption">
|
|
Insert Picture
|
|
</span>
|
|
</div>
|
|
</fieldset>
|
|
<br/>
|
|
<h3>Extra CSS Styling</h3>
|
|
<fieldset>
|
|
<legend>
|
|
These controls have extra CSS classes applied:
|
|
</legend>
|
|
<div id="c5"></div>
|
|
<div id="c6"></div>
|
|
<br/>
|
|
Use the <b>addClassName</b> API to add additional CSS class names
|
|
to controls, before or after they're rendered or decorated.
|
|
</fieldset>
|
|
<br/>
|
|
<h3>Right-to-Left Rendering</h3>
|
|
<fieldset>
|
|
<legend>
|
|
These controls are rendered right-to-left:
|
|
</legend>
|
|
<p>These right-to-left controls were progammatically created:</p>
|
|
<div id="bidi" style="position:relative;background-color:#ccc;"
|
|
dir="rtl"></div>
|
|
<p>These right-to-left controls were decorated:</p>
|
|
<div style="position:relative;background-color:#ccc;" dir="rtl">
|
|
<div id="c9" class="goog-inline-block goog-control">
|
|
Hello, world
|
|
</div><div id="c10" class="goog-inline-block goog-control">
|
|
Sample control
|
|
</div>
|
|
</div>
|
|
<p class="hint">
|
|
On pre-FF3 Gecko, <b>margin-left</b> and <b>margin-right</b> are
|
|
ignored, so controls render right next to each other.
|
|
A workaround is to include some <b>&nbsp;</b>s in between
|
|
controls.
|
|
</p>
|
|
</fieldset>
|
|
</td>
|
|
<td width="33%">
|
|
<!-- Event log. -->
|
|
<fieldset class="goog-debug-panel">
|
|
<legend>Event Log</legend>
|
|
<div id="log"></div>
|
|
</fieldset>
|
|
<br/>
|
|
<span class="hint">
|
|
The control with the
|
|
<span style="font-weight:bold;color:orange;">orange outline</span>
|
|
has keyboard focus.
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div id="perf"></div>
|
|
<script>
|
|
var timer = goog.now();
|
|
|
|
// Set up a logger.
|
|
goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL);
|
|
var logger = goog.log.getLogger('demo');
|
|
var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
|
|
logconsole.setCapturing(true);
|
|
|
|
var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
|
|
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
|
|
|
function logEvent(e) {
|
|
goog.log.info(logger, '"' + e.target.getCaption() + '" dispatched: ' + e.type);
|
|
}
|
|
|
|
// Create the first control programmatically, and make it focusable.
|
|
var c1 = new goog.ui.Control(
|
|
goog.dom.createDom('span', null, 'Hello, ',
|
|
goog.dom.createDom('b', null, 'world'),
|
|
'!'));
|
|
c1.render(goog.dom.getElement('c1'));
|
|
goog.events.listen(c1, EVENTS, logEvent);
|
|
|
|
// Create the second control by decorating an existing element. We can
|
|
// use goog.ui.decorate to get a Control instance and have it
|
|
// decorate the element, since the element to be decorated has the
|
|
// appropriate "marker" class name.
|
|
var c2 = goog.ui.decorate(goog.dom.getElement('c2'));
|
|
c2.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
|
goog.events.listen(c2, EVENTS, logEvent);
|
|
|
|
// Define a simple custom renderer for the third control.
|
|
function SampleCustomRenderer() {
|
|
goog.ui.ControlRenderer.call(this);
|
|
}
|
|
goog.inherits(SampleCustomRenderer, goog.ui.ControlRenderer);
|
|
|
|
// See goog.ui.ControlRenderer#createDom for documentation.
|
|
SampleCustomRenderer.prototype.createDom = function(control) {
|
|
var baseClass = this.getCssClass();
|
|
var classNames = this.getClassNamesForState(control.getState());
|
|
var dom = control.dom_;
|
|
return dom.createDom('div', classNames.join(' '),
|
|
dom.createDom('div', baseClass + '-outer-box',
|
|
dom.createDom('div', baseClass + '-inner-box',
|
|
dom.createDom('div', baseClass + '-content',
|
|
control.getContent()))));
|
|
};
|
|
|
|
// See goog.ui.ControlRenderer#decorate for documentation.
|
|
SampleCustomRenderer.prototype.decorate = function(control, element) {
|
|
var baseClass = this.getCssClass();
|
|
var dom = control.dom_;
|
|
element.appendChild(
|
|
dom.createDom('div', baseClass + '-outer-box',
|
|
dom.createDom('div', baseClass + '-inner-box',
|
|
dom.createDom('div', baseClass + '-content',
|
|
element.childNodes))));
|
|
return SampleCustomRenderer.superClass_.decorate.call(this, control,
|
|
element);
|
|
};
|
|
|
|
// See goog.ui.ControlRenderer#getContent for documentation.
|
|
SampleCustomRenderer.prototype.getContent = function(element) {
|
|
if (element) {
|
|
return SampleCustomRenderer.superClass_.getContent.call(this,
|
|
goog.dom.getElementsByTagNameAndClass('div',
|
|
this.getCssClass() + '-content', element)[0]);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// See goog.ui.ControlRenderer#setContent for documentation.
|
|
SampleCustomRenderer.prototype.setContent = function(element, content) {
|
|
if (element) {
|
|
return SampleCustomRenderer.superClass_.setContent.call(this,
|
|
goog.dom.getElementsByTagNameAndClass('div',
|
|
this.getCssClass() + '-content', element)[0],
|
|
content);
|
|
}
|
|
};
|
|
|
|
// See goog.ui.ControlRenderer#getCssClass for documentation.
|
|
SampleCustomRenderer.prototype.getCssClass = function() {
|
|
return 'goog-custom-control';
|
|
};
|
|
|
|
// Create the singleton instance of our custom renderer.
|
|
var customRenderer = new SampleCustomRenderer();
|
|
|
|
// Create the third control using the custom renderer.
|
|
var c3 = new goog.ui.Control('Custom Renderer', customRenderer);
|
|
c3.render(goog.dom.getElement('c3'));
|
|
goog.events.listen(c3, EVENTS, logEvent);
|
|
|
|
// Register a decorator factory function for controls to be decorated using
|
|
// our custom renderer.
|
|
goog.ui.registry.setDecoratorByClassName('goog-custom-control', function() {
|
|
// Elements that have the 'goog-custom-control' marker class will be
|
|
// decorated by instances of goog.ui.Control using our custom renderer.
|
|
return new goog.ui.Control(null, customRenderer);
|
|
});
|
|
|
|
// Create the fourth control by decorating a DIV.
|
|
var customElem = goog.dom.getElement('c4');
|
|
// getDecorator will use the decorator factory function registered above to
|
|
// create a control to decorate our element.
|
|
var c4 = goog.ui.registry.getDecorator(customElem);
|
|
c4.addClassName('extra-red');
|
|
c4.addClassName('extra-thick-border');
|
|
c4.decorate(customElem);
|
|
goog.events.listen(c4, EVENTS, logEvent);
|
|
|
|
var c5 = new goog.ui.Control('Custom Red');
|
|
c5.addClassName('extra-red');
|
|
c5.render(goog.dom.getElement('c5'));
|
|
goog.events.listen(c5, EVENTS, logEvent);
|
|
|
|
var c6 = new goog.ui.Control('Custom Blue');
|
|
c6.addClassName('extra-blue');
|
|
c6.render(goog.dom.getElement('c6'));
|
|
c6.addClassName('extra-thick-border');
|
|
goog.events.listen(c6, EVENTS, logEvent);
|
|
|
|
// BiDi examples:
|
|
var c7 = new goog.ui.Control('Hello, world');
|
|
c7.addClassName('goog-inline-block');
|
|
c7.render(goog.dom.getElement('bidi'));
|
|
goog.events.listen(c7, EVENTS, logEvent);
|
|
|
|
var c8 = new goog.ui.Control('Sample control');
|
|
c8.addClassName('goog-inline-block');
|
|
c8.render(goog.dom.getElement('bidi'));
|
|
goog.events.listen(c8, EVENTS, logEvent);
|
|
|
|
var c9 = goog.ui.decorate(goog.dom.getElement('c9'));
|
|
goog.events.listen(c9, EVENTS, logEvent);
|
|
|
|
var c10 = goog.ui.decorate(goog.dom.getElement('c10'));
|
|
goog.events.listen(c10, EVENTS, logEvent);
|
|
|
|
// Add some event handling to the second control, which dispatches state
|
|
// transition events.
|
|
|
|
goog.events.listen(c2, goog.ui.Component.EventType.HIGHLIGHT,
|
|
function(e) {
|
|
goog.dom.setTextContent(goog.dom.getElement('hint'),
|
|
'Click to activate.');
|
|
});
|
|
|
|
goog.events.listen(c2, [goog.ui.Component.EventType.ENABLE,
|
|
goog.ui.Component.EventType.UNHIGHLIGHT],
|
|
function(e) {
|
|
goog.dom.setTextContent(goog.dom.getElement('hint'),
|
|
'Mouse over for instructions.');
|
|
});
|
|
|
|
goog.events.listen(c2, goog.ui.Component.EventType.DISABLE,
|
|
function(e) {
|
|
goog.dom.setTextContent(goog.dom.getElement('hint'),
|
|
'You need to enable this component first.');
|
|
});
|
|
|
|
goog.events.listen(c2, goog.ui.Component.EventType.ACTIVATE,
|
|
function(e) {
|
|
goog.dom.setTextContent(goog.dom.getElement('hint'),
|
|
'Release the mouse button to deactivate.');
|
|
});
|
|
|
|
goog.events.listen(c2, goog.ui.Component.EventType.DEACTIVATE,
|
|
function(e) {
|
|
goog.dom.setTextContent(goog.dom.getElement('hint'), 'You got it!');
|
|
});
|
|
|
|
goog.events.listen(goog.dom.getElement('enable'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
c2.setEnabled(e.target.checked);
|
|
});
|
|
|
|
goog.events.listen(goog.dom.getElement('visible'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
c2.setVisible(e.target.checked);
|
|
});
|
|
|
|
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
|
(goog.now() - timer) + 'ms');
|
|
</script>
|
|
</body>
|
|
</html>
|