Field Text transformation methods (#2930)

* Add field text transform methods for converting from text to value and vice versa.
2026-01-06 16:40:07 +01:00 · 2019-08-30 17:00:31 -07:00
parent 6050456bcf
commit dd9257e1b0
21 changed files with 664 additions and 197 deletions
--- a/demos/custom-fields/turtle/index.html
+++ b/demos/custom-fields/turtle/index.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Blockly Demo: Custom Turtle Field</title>
+    <script src="../../../blockly_compressed.js"></script>
+    <script src="blocks.js"></script>
+    <script src="field_turtle.js"></script>
+    <script src="../../../msg/js/en.js"></script>
+    <link rel="stylesheet" type="text/css" href="turtle.css">
+  </head>
+  <body onload="start()">
+    <h1>
+      <a href="https://developers.google.com/blockly/">Blockly</a> &gt;
+      <a href="../../index.html">Demos</a> &gt;
+      <a href="../index.html">Custom Fields</a> &gt; Turtle Field</h1>
+
+
+    <p>This is a demo of creating custom block fields. In this case the field
+      is used to define a turtle.
+    </p>
+
+    <p>All of the custom field implementation is in
+     demos/custom-fields/turtle/field_turtle.js, including comments on each required
+     function.
+    </p>
+
+    <p>Click on the blocks' comment icons to learn what they are demonstrating.
+      Use the buttons below to see how the fields react to changes.
+    </p>
+
+    <p>
+      <input type="button" value="set random style" onclick="setRandomStyle()">
+      <input type="button" value="toggle shadow" onclick="toggleShadow()">
+      <input type="button" value="toggle enabled" onclick="toggleEnabled()">
+      <input type="button" value="toggle editable" onclick="toggleEditable()">
+      <input type="button" value="toggle collapsed" onclick="toggleCollapsed()">
+    </p>
+
+    <p>
+      <input type="button" value="Export to XML" onclick="toXml()">
+      <input type="button" value="Import from XML" onclick="fromXml()">
+    </p>
+
+    <table>
+      <tr>
+        <td>
+          <textarea id="importExport"
+                    style="width: 200px; height: 480px;"
+                    onchange="textAreaChange();"
+                    onkeyup="textAreaChange()"></textarea>
+        </td>
+        <td>
+          <div id="blocklyDiv" style="width: 600px; height: 480px;"></div>
+        </td>
+      </tr>
+    </table>
+
+    <script>
+      function toXml() {
+        var output = document.getElementById('importExport');
+        var xml = Blockly.Xml.workspaceToDom(workspace);
+        output.value = Blockly.Xml.domToPrettyText(xml);
+        output.focus();
+        output.select();
+      }
+
+      function fromXml() {
+        var input = document.getElementById('importExport');
+        var xml = Blockly.Xml.textToDom(input.value);
+        Blockly.Xml.domToWorkspace(xml, workspace);
+      }
+
+      function setRandomStyle() {
+        var blocks = workspace.getAllBlocks();
+        var styles = Object.keys(Blockly.getTheme().getAllBlockStyles());
+        styles.splice(styles.indexOf(blocks[0].getStyleName()), 1);
+        var style = styles[Math.floor(Math.random() * styles.length)];
+        for(var i = 0, block; block = blocks[i]; i++) {
+          block.setStyle(style);
+        }
+      }
+
+      function toggleShadow() {
+        var blocks = workspace.getAllBlocks();
+        for(var i = 0, block; block = blocks[i]; i++) {
+          block.setShadow(!block.isShadow());
+        }
+      }
+
+      function toggleEnabled() {
+        var blocks = workspace.getAllBlocks();
+        for(var i = 0, block; block = blocks[i]; i++) {
+          block.setEnabled(!block.isEnabled());
+        }
+      }
+
+      function toggleEditable() {
+        var blocks = workspace.getAllBlocks();
+        for(var i = 0, block; block = blocks[i]; i++) {
+          block.setEditable(!block.isEditable());
+        }
+      }
+
+      function toggleCollapsed() {
+        var blocks = workspace.getAllBlocks();
+        for(var i = 0, block; block = blocks[i]; i++) {
+          block.setCollapsed(!block.isCollapsed());
+        }
+      }
+
+      function appendDom() {
+        var blocks = document.getElementById('workspace-blocks');
+        if (blocks.firstElementChild) {
+          Blockly.Xml.appendDomToWorkspace(blocks, workspace);
+        }
+      }
+
+      function start() {
+        workspace = Blockly.inject('blocklyDiv', options);
+        appendDom();
+        workspace.scrollCenter();
+      }
+
+      var options = {
+        media: '../../../media/',
+        grid: {
+          spacing: 25,
+          length: 3,
+          colour: '#ccc'
+        },
+        move: {
+          scrollbars: true,
+          drag: true,
+          wheel: true,
+        },
+        zoom: {
+          controls: true,
+          startScale: 1.0,
+          maxScale: 4,
+          minScale: 0.25,
+          scaleSpeed: 1.1
+        }
+        /*toolbox: document.getElementById('toolbox')*/
+      }
+
+    </script>
+
+    <xml xmlns="https://developers.google.com/blockly/xml" id="workspace-blocks" style="display: none">
+      <block type="turtle_basic"></block>
+      <block type="turtle_nullifier" y="120"></block>
+      <block type="turtle_changer" y="230"></block>
+    </xml>
+  </body>
+</html>