1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
|
<!DOCTYPE html>
<html>
<!--
Copyright 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.Button and goog.ui.ToggleButton</title>
<script src="../base.js"></script>
<script>
goog.require('goog.array');
goog.require('goog.debug.DivConsole');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.log');
goog.require('goog.object');
goog.require('goog.ui.Button');
goog.require('goog.ui.ButtonRenderer');
goog.require('goog.ui.ButtonSide');
goog.require('goog.ui.CustomButton');
goog.require('goog.ui.CustomButtonRenderer');
goog.require('goog.ui.FlatButtonRenderer');
goog.require('goog.ui.LinkButtonRenderer');
goog.require('goog.ui.ToggleButton');
goog.require('goog.ui.decorate');
goog.require('goog.dom.TagName');
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/button.css">
<link rel="stylesheet" href="../css/custombutton.css">
<link rel="stylesheet" href="../css/flatbutton.css">
<link rel="stylesheet" href="../css/linkbutton.css">
<style>
/* Base class for all icon elements. */
.icon {
height: 16px;
width: 16px;
margin: 0 1px;
background-image: url(../images/toolbar_icons.gif);
background-repeat: no-repeat;
vertical-align: middle;
}
/* "Highlight" icon. */
.highlight-icon{
background-position: -64px;
}
/* "Insert Image" icon. */
.insert-image-icon {
background-position: -80px;
}
/* Custom style for the "default" button. */
.default-button {
font-weight: bold;
}
</style>
</head>
<body>
<h1>goog.ui.Button</h1>
<fieldset>
<legend>
The first <strong>Button</strong> was created programmatically,
the second by decorating an <strong><input></strong> element:
</legend>
<div id="b1"></div>
<label>
Enable button:<input type="checkbox" id="b1_enable" checked/>
</label>
<br/>
<br/>
<input type="button" id="b2" title="Tooltip extracted from title"
value="My Button" disabled="true"/><br/>
<label>Enable button:<input type="checkbox" id="b2_enable"/></label>
<br/>
</fieldset>
<br/>
<h2>goog.ui.FlatButtonRenderer</h2>
<fieldset>
<legend>
Buttons made with <strong><div></strong>'s instead of
<strong><input></strong>'s or <strong><button></strong>'s
The first rendered, the second decorated:
</legend>
<div id="fb1"></div>
<label>
Enable button:<input type="checkbox" id="fb1_enable" checked/>
</label>
<br/>
<br/>
<div id="fb2" class="goog-flat-button goog-flat-button-disabled"
title="Tooltip extracted from title">My Flat Button</div><br/>
<label>Enable button:<input type="checkbox" id="fb2_enable"/></label>
<br/>
<br/>
<div id="fb3" class="goog-flat-button goog-flat-button-collapse-right">
Combined
</div><div id="fb4" class="goog-flat-button goog-flat-button-collapse-left">
Buttons
</div>
<br/>
</fieldset>
<br/>
<h2>goog.ui.LinkButtonRenderer</h2>
<fieldset>
<legend>
Like FlatButtonRenderer, except the style makes the button appear to be a
link.
</legend>
<div id="lb"></div>
<label>
Enable button:<input type="checkbox" id="lb_enable" checked/>
</label>
</fieldset>
<h2>goog.ui.CustomButton & goog.ui.ToggleButton</h2>
<fieldset>
<legend>
These buttons were rendered using <strong>goog.ui.CustomButton</strong>:
</legend>
<br/>
These buttons were created programmatically:<br/>
<div id="cb1"></div>
<br/>
These buttons were created by decorating some DIVs, and they dispatch
state transition events (watch the event log):<br/>
<div id="cb2">
<!-- On FF2, if you don't enclose the contents of the button in a SPAN,
the bold element isn't rendered. Works on every other browser. -->
<div id="foo" class="goog-custom-button" title="Title specified in HTML">
<span>Decorated <b>Button</b>, yay!</span>
</div>
<div id="bar" class="goog-custom-button goog-custom-button-disabled"
title="Initialized to DISABLED in HTML...">Decorated Disabled</div>
<div id="fee" class="goog-custom-button">Another Button</div>
<div id="btn1"
class="goog-custom-button goog-custom-button-collapse-right">
Archive
</div><div id="btn2" class="goog-custom-button goog-custom-button-collapse-right goog-custom-button-collapse-left">
Delete
</div><div id="btn3"
class="goog-custom-button goog-custom-button-collapse-left">
Report Spam
</div>
</div>
<br/>
Use these <strong>ToggleButton</strong>s to hide/show and enable/disable
the middle button:<br/>
<div id="toggleEnable" class="goog-toggle-button"
title="Click here to enable/disable the button above">Enable</div>
<div id="hideShow"
class="goog-toggle-button goog-custom-button-checked"
title="Click here to hide/show the button above">Show</div>
<br/><br/>
Combined toggle buttons:<br/>
<div id="btn4" class="goog-toggle-button goog-custom-button-collapse-right">
Bold
</div><div id="btn5" class="goog-toggle-button goog-custom-button-collapse-right goog-custom-button-collapse-left">
Italics
</div><div id="btn6" class="goog-toggle-button goog-custom-button-collapse-left goog-custom-button-checked">
Underlined
</div>
<br/>
<br/>
These buttons have icons, and the second one has an extra CSS class:<br/>
<div id="iconbuttons"></div>
<br/>
<span class="hint">
The button with the <span style="font-weight:bold;color:orange;">orange
outline</span> has keyboard focus. Hit Enter to activate focused buttons.
</span>
</fieldset>
<br/>
<div id="perf"></div>
<!-- Event log. -->
<fieldset class="goog-debug-panel">
<legend>Event Log</legend>
<div id="log"></div>
</fieldset>
<script type="text/javascript">
var timer = goog.now();
// Set up a logger.
goog.log.setLevel(goog.log.getRootLogger(), 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 button programmatically.
var b1 = new goog.ui.Button('Hello!');
b1.render(goog.dom.getElement('b1'));
b1.setTooltip('I changed the tooltip using setTooltip() ' +
'after the button was rendered.');
goog.events.listen(b1, EVENTS, logEvent);
goog.events.listen(goog.dom.getElement('b1_enable'),
goog.events.EventType.CLICK,
function(e) {
b1.setEnabled(e.target.checked);
});
goog.events.listen(b1, goog.ui.Component.EventType.ACTION,
function(e) {
var newCaption = window.prompt('Enter new caption for button:');
b1.setCaption(newCaption || 'Empty');
});
// Create the second button by decorating an element.
var b2 = new goog.ui.Button();
b2.decorate(goog.dom.getElement('b2'));
goog.events.listen(b2, EVENTS, logEvent);
goog.events.listen(goog.dom.getElement('b2_enable'),
goog.events.EventType.CLICK,
function(e) {
b2.setEnabled(e.target.checked);
});
goog.events.listen(b2, goog.ui.Component.EventType.ACTION,
function(e) {
alert('The value of the button is: ' + b2.getValue());
});
// Create flat buttons that use divs instead of button or input elements.
// Render 1st flat button.
var fb1 = new goog.ui.Button('Hello!',
goog.ui.FlatButtonRenderer.getInstance());
fb1.render(goog.dom.getElement('fb1'));
fb1.setTooltip('I changed the tooltip using setTooltip() ' +
'after the button was rendered.');
goog.events.listen(fb1, EVENTS, logEvent);
goog.events.listen(goog.dom.getElement('fb1_enable'),
goog.events.EventType.CLICK,
function(e) {
fb1.setEnabled(e.target.checked);
});
goog.events.listen(fb1, goog.ui.Component.EventType.ACTION,
function(e) {
var newCaption = window.prompt('Enter new caption for button:');
fb1.setCaption(newCaption || 'Empty');
});
// Decorate 2nd flat button.
var fb2 = goog.ui.decorate(goog.dom.getElement('fb2'));
goog.events.listen(fb2, EVENTS, logEvent);
goog.events.listen(goog.dom.getElement('fb2_enable'),
goog.events.EventType.CLICK,
function(e) {
fb2.setEnabled(e.target.checked);
});
goog.events.listen(fb2, goog.ui.Component.EventType.ACTION,
function(e) {
alert('The caption of the button is: ' + fb2.getCaption());
});
// Decorate 3rd and 4th flat buttons.
goog.ui.decorate(goog.dom.getElement('fb3'));
goog.ui.decorate(goog.dom.getElement('fb4'));
// Create buttons that look like links.
var lb = new goog.ui.Button('Hello!',
goog.ui.LinkButtonRenderer.getInstance());
lb.render(goog.dom.getElement('lb'));
lb.setTooltip('I changed the tooltip using setTooltip() ' +
'after the button was rendered.');
goog.events.listen(lb, EVENTS, logEvent);
goog.events.listen(goog.dom.getElement('lb_enable'),
goog.events.EventType.CLICK,
function(e) {
lb.setEnabled(e.target.checked);
});
goog.events.listen(lb, goog.ui.Component.EventType.ACTION,
function(e) {
var newCaption = window.prompt('Enter new caption for button:');
lb.setCaption(newCaption || 'Empty');
});
// Create some custom buttons.
var disabledButton, leftButton, centerButton, rightButton;
var customButtons = [
new goog.ui.CustomButton('Button'),
new goog.ui.CustomButton('Another Button'),
disabledButton = new goog.ui.CustomButton('Disabled Button'),
new goog.ui.CustomButton('Yet Another Button'),
leftButton = new goog.ui.CustomButton('Left'),
centerButton = new goog.ui.CustomButton('Center'),
rightButton = new goog.ui.CustomButton('Right'),
];
disabledButton.setEnabled(false);
leftButton.setCollapsed(goog.ui.ButtonSide.END);
centerButton.setCollapsed(goog.ui.ButtonSide.BOTH);
rightButton.setCollapsed(goog.ui.ButtonSide.START);
goog.array.forEach(customButtons, function(b) {
b.render(goog.dom.getElement('cb1'));
goog.events.listen(b, goog.ui.Component.EventType.ACTION,
function(e) {
var newCaption = window.prompt('Enter new caption for button:');
b.setCaption(newCaption || 'Empty');
});
goog.events.listen(b, EVENTS, logEvent);
});
// Decorate some custom buttons.
var cb2 = [];
var decoratedButtons = goog.array.map(
['foo', 'bar', 'fee', 'btn1', 'btn2', 'btn3'],
goog.dom.getElement);
goog.array.forEach(decoratedButtons, function(element) {
// Since the elements to be decorated each have the correct "marker" CSS
// class ("goog-custom-button"), we can use the renderer registry to get
// the appropriate control instance to decorate them.
var button = goog.ui.decorate(element);
button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
cb2.push(button);
goog.events.listen(button, EVENTS, logEvent);
});
// Decorate toggle buttons.
var toggleEnableElem = goog.dom.getElement('toggleEnable');
var toggleEnable = goog.ui.decorate(toggleEnableElem);
toggleEnable.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
goog.events.listen(toggleEnable, EVENTS, logEvent);
goog.events.listen(toggleEnable, goog.ui.Component.EventType.ACTION,
function(e) {
cb2[1].setEnabled(e.target.isChecked());
});
var hideShowElem = goog.dom.getElement('hideShow');
var hideShow = new goog.ui.decorate(hideShowElem);
hideShow.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
goog.events.listen(hideShow, EVENTS, logEvent);
goog.events.listen(hideShow, goog.ui.Component.EventType.ACTION,
function(e) {
cb2[1].setVisible(e.target.isChecked());
});
// Decorate combined toggle buttons.
var cb3 = [];
var combinedButtons = goog.array.map(['btn4', 'btn5', 'btn6'],
goog.dom.getElement);
goog.array.forEach(combinedButtons, function(element) {
var button = goog.ui.decorate(element);
button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
cb3.push(button);
goog.events.listen(button, EVENTS, logEvent);
});
// Use a DIV with a background image as the icon, and a SPAN as the caption.
var iconbutton1 = new goog.ui.ToggleButton([
goog.dom.createDom(goog.dom.TagName.DIV, 'icon insert-image-icon goog-inline-block'),
goog.dom.createDom(goog.dom.TagName.SPAN, {'style': 'vertical-align:middle'},
'Insert Image')
]);
iconbutton1.render(goog.dom.getElement('iconbuttons'));
goog.events.listen(iconbutton1, EVENTS, logEvent);
// Add a custom style, too.
var iconbutton2 = new goog.ui.ToggleButton([
goog.dom.createDom(goog.dom.TagName.DIV, 'icon highlight-icon goog-inline-block'),
goog.dom.createDom(goog.dom.TagName.SPAN, {'style': 'vertical-align:middle'},
'Highlight Text')
]);
iconbutton2.addClassName('default-button');
iconbutton2.render(goog.dom.getElement('iconbuttons'));
goog.events.listen(iconbutton2, EVENTS, logEvent);
goog.dom.setTextContent(goog.dom.getElement('perf'),
(goog.now() - timer) + 'ms');
</script>
</body>
</html>
|
