Changes for page Blockly Editor

Last modified by Admin on 2022/02/21 00:26

<
From version < 30.1 >
edited by Vivek Iyer
on 2018/06/12 22:46
To version < 31.1 >
edited by Vivek Iyer
on 2018/06/12 23:11
>
Change comment: There is no comment for this version

Summary

Details

ExtensionCode.ExtensionClass[0]
Description
... ... @@ -1,40 +1,42 @@
1 -This extension adds the Google Blockly Editor to XWiki, to make programming easier for users who have little/no previous experience of programming. Currently, this editor provides support for generating Javascript code, using the minimalistic default toolbox provided by Google, editing a document using this generated code and saving it.
1 +This extension adds the Google Blockly Template to XWiki, to make programming easier for users who have little/no previous experience of programming, by allowing the creation of Blockly templated documents. Currently, this template provides support for combining the blocks from the default toolbox provided by Google, viewing the source code for the same, editing a document using these blocks and saving it.
2 2  
3 3  
4 4  == Usage ==
5 5  
6 6  
7 -To edit a document using the Blockly editor, please follow the steps given below:
7 +To create a document using the Blockly template, please follow the steps given below:
8 8  
9 9  1. Make sure you're logged in
10 -1. Go to the page you want to edit (for example: ##/xwiki/bin/view/test/testChild/testGChild/)##
11 -1. Click on the edit page icon, and choose Blockly from the dropdown menu.
12 -{{image reference="SelectingBlocklyEditor.png" |alt="Selecting Blockly editor to edit the page" width="650" height="388"}}{{/image}}
10 +1. Click on create page at the top right corner, and choose the "Blockly" template in the create page document.
11 +{{image reference="CreateBlocklyTemplateDoc.png" ||alt="Creating a Blockly template" width="650" height="445"}}{{/image}}
13 13  //Selecting Blockly editor to edit the page//
14 -1. This should take you to the editor page. Drag and drop the blocks from the toolbox onto the adjacent div and combine them like puzzle pieces, as desired. For example:{{image reference="BlocksExample.png" |alt="Combining blocks appropriately" width="650" height="450"}}{{/image}}
13 +1. This should take you to the Blockly template page. Drag and drop the blocks from the toolbox onto the adjacent div and combine them like puzzle pieces, as desired. For example:
14 +{{image reference="image:PuzzleBlocksCombined.png"||alt="Combining the Blockly blocks" width="650" height="494"}}{{/image}}
15 15  //Combining blocks appropriately//
16 16  1. To delete any of the blocks, drag and drop the blocks into the bin.
17 -1. Once you are done with generating the blocks, to generate JS code for these blocks, click on the Show JavaScript button. The code is shown in the textarea.{{image reference="BlocksWithCode.png" |alt="Blocks with the generated JS code" width="650" height="456"}}{{/image}}
18 -//Blocks with the generated JS code//
19 -1. To run this code, click on the Run JavaScript button. You should get an alert box, as shown in the image below.{{image reference="RunningGeneratedCode.png" |alt="Blockly generated code on being run" width="650" height="449"}}{{/image}}
20 -//Blockly generated code on being run//
21 -1. Save the code using either the "Save and View", or the "Save and Continue" buttons.{{image reference="SavedCode.png" |alt="The code gets saved" width="650" height="261"}}{{/image}}
22 -//The code gets saved//
23 -1. Now on refreshing the page, the generated code which got saved, is shown in the textarea. In case you want to further edit the content of the page, take the cursor to the position where you want the code to be inserted, combine the blocks as described in Step 4 and click on Show JavaScript, and the code gets inserted at the cursor position :){{image reference="InsertingCodeAtCursorPosition.png" |alt="Inserting Code at Cursor Position" width="650" height="456"}}{{/image}}
24 -//Inserting Code at Cursor Position//
17 +1. To view the source code for the blocks generated in the figure, click on the Source tab.
18 +{{image reference="BlocklySourceCode.png"||alt="Source Code View" width="650" height="493"}}{{/image}}
19 +//Source Code View//
20 +1. Save the code using either the "Save and View", or the "Save and Continue" buttons.
21 +1. If you want to view the code you generated and/or execute it, go to the View Page. It looks like this:
22 +{{image reference="BlocklyView.png"||alt="Blockly View Mode" width="650" height="310"}}{{/image}}
23 +//View Code//
24 +1. To run the code, click on "Run Code".
25 +{{image reference="RunBlocklyCode.png"||alt="Running the generated code" width="650" height="349"}}
26 +//Running the blockly code
27 +1. In case you want to edit the page, click on the edit button once again and all the Blockly blocks are loaded as they should be :)
25 25  
26 26  == Features ==
27 27  
28 28  
29 -* A default toolbox containing tools for if-else conditions, loops, print statements, assignment, comparison statements etc.{{image reference="Toolbox.png" |alt="The default Blockly toolbox" width="650" height="617"}}{{/image}}
32 +* A default toolbox containing tools for if-else conditions, loops, print statements, assignment, comparison statements etc.
33 +{{image reference="Toolbox.png" |alt="The default Blockly toolbox" width="650" height="617"}}{{/image}}
30 30  //The default Blockly toolbox//
31 -
32 -* A bin for deleting unnecessary blocks
33 -
35 +* A bin for deleting unnecessary blocks, and features for creating duplicate blocks, adding comments etc by right-clicking on a block
36 +{{image reference="RightHandBlocklyMenu.png"||alt="Right hand menu" width="650" height="669"}}{{/image}}
37 +//Right clicking on Blockly blocks generates this menu//
34 34  * Converting this generated code into Javascript and running it as well
35 -
36 36  * Displaying the generated code in the textarea, wherein the code gets inserted at cursor position
37 -
38 38  * Saving the code to the page
39 39  
40 40  (For screenshots and more information on how to use these features, please check the Usage section given above :))
... ... @@ -44,3 +44,4 @@
44 44  
45 45  
46 46  Refer [[the Blockly design page>>design:Google-Blockly-Editor.WebHome]] for further details.
49 +

Get Connected