tweakui.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright 2010 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <head>
  9. <title>goog.tweak.TweakUi</title>
  10. <script src="../base.js"></script>
  11. <script>
  12. goog.require('goog.tweak');
  13. goog.require('goog.tweak.TweakUi');
  14. </script>
  15. <link rel="stylesheet" type="text/css" href="../css/common.css">
  16. </head>
  17. <body>
  18. <h1>goog.ui.TweakUi</h1>
  19. The goog.tweak package provides a convenient and flexible way to add
  20. configurable settings to an app. These settings:
  21. <ul>
  22. <li>can be set at compile time
  23. <li>can be set in code (using goog.tweak.overrideDefaultValue)
  24. <li>can be set by query parameters
  25. <li>can be set through the TweakUi interface
  26. </ul>
  27. Tweaks IDs are checked by the compiler and tweaks can be fully removed when
  28. tweakProcessing=STRIP. Tweaks are great for toggling debugging facilities.
  29. <h2>A collapsible menu</h2><div id="menu1"></div>
  30. <h2>An expanded menu</h2><div id="menu2"></div>
  31. <ul>
  32. <li>When "Apply Tweaks" is clicked, all non-default values are encoded into
  33. query parameters and the page is refreshed.
  34. <li>Blue entries are ones where the value of the tweak will change without
  35. clicking apply tweaks (the value of goog.tweak.get*() will change)
  36. </ul>
  37. <script>
  38. var entryCounter = 0;
  39. goog.tweak.registerButton('CreateNewTweak', 'Creates a new tweak. Meant ' +
  40. 'to simulate a tweak being registered in a lazy-loaded module.',
  41. function() {
  42. var registry = goog.tweak.getRegistry();
  43. entryCounter++;
  44. registry.register(new goog.tweak.BooleanSetting('Lazy' + entryCounter,
  45. 'Lazy-loaded tweak ' + entryCounter));
  46. });
  47. goog.tweak.registerButton('CreateNewTweakInNamespace1',
  48. 'Creates a new tweak within a namespace. Meant to simulate a tweak ' +
  49. 'being registered in a lazy-loaded module.', function() {
  50. var registry = goog.tweak.getRegistry();
  51. entryCounter++;
  52. registry.register(new goog.tweak.StringSetting(
  53. 'namespace1.Lazy' + entryCounter, 'Lazy-loaded tweak ' + entryCounter));
  54. });
  55. goog.tweak.registerButton('CreateNewTweakInNamespace2',
  56. 'Creates a new tweak within a namespace. Meant to simulate a tweak ' +
  57. 'being registered in a lazy-loaded module.', function() {
  58. var registry = goog.tweak.getRegistry();
  59. entryCounter++;
  60. var entry = new goog.tweak.NumericSetting(
  61. 'namespace1.subnamespace.Lazy' + entryCounter,
  62. 'Lazy-loaded tweak ' + entryCounter);
  63. entry.setValidValues([1, 2, 3]);
  64. entry.setDefaultValue((entryCounter % 3) + 1);
  65. registry.register(entry);
  66. });
  67. goog.tweak.registerBoolean('Bool1', 'A boolean tweak that defaults to false');
  68. goog.tweak.registerBoolean('Bool2', 'A boolean tweak that defaults to true',
  69. true);
  70. goog.tweak.registerString('Str1', 'A string tweak that defaults to false');
  71. goog.tweak.registerString('Str2', 'A string tweak with a default value',
  72. 'some value');
  73. goog.tweak.registerString('Str3', 'A string tweak with validValues.', '', {
  74. validValues: ['A', 'B', 'C']
  75. });
  76. goog.tweak.registerNumber('Num1', 'A numeric tweak');
  77. goog.tweak.registerNumber('Num2', 'A numeric tweak with default value', 10);
  78. goog.tweak.registerNumber('Num3', 'A numeric tweak with validValues.', 0, {
  79. validValues: [1, 2, 3]
  80. });
  81. goog.tweak.beginBooleanGroup('BooleanGroup', 'A boolean group are boolean ' +
  82. 'tweaks that share a query parameter.');
  83. goog.tweak.registerBoolean('Value1', 'Example 1');
  84. goog.tweak.registerBoolean('Value2', 'Example 2');
  85. goog.tweak.registerBoolean('Value3', 'Example 3 (default on)', true);
  86. goog.tweak.endBooleanGroup();
  87. goog.tweak.registerBoolean('Fancy1', 'A boolean tweak with a callback', false, {
  88. restartRequired: false,
  89. callback: function(entry) {
  90. alert('Tweak value is now ' + entry.getValue());
  91. }
  92. });
  93. goog.tweak.registerBoolean('Fancy2', 'A boolean tweak with a custom query ' +
  94. 'parameter', false, {
  95. paramName: 'WowSoFancy'
  96. });
  97. goog.tweak.registerBoolean('Fancy3', 'A boolean tweak with a custom label.',
  98. false, {
  99. label: 'Relabeled Tweak'
  100. });
  101. goog.tweak.registerBoolean('namespace1.NamespacedTweak',
  102. 'Tweaks are grouped by namespace');
  103. goog.tweak.registerBoolean('namespace1.NamespacedTweak2',
  104. 'Tweaks are grouped by namespace');
  105. goog.tweak.registerBoolean('namespace1.NamespacedTweak3',
  106. 'Tweaks are grouped by namespace');
  107. document.getElementById('menu1').appendChild(
  108. goog.tweak.TweakUi.createCollapsible());
  109. document.getElementById('menu2').appendChild(goog.tweak.TweakUi.create());
  110. </script>
  111. </body>
  112. </html>