From version < 58.1 >
edited by Vivek Iyer
on 2018/08/02 19:14
To version < 59.1 >
edited by Vivek Iyer
on 2018/08/02 19:21
< >
Change comment: There is no comment for this version

Summary

Details

ExtensionCode.ExtensionClass[0]
Description
... ... @@ -12,8 +12,10 @@
12 12  //Selecting Blockly editor to edit the page//
13 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 14  For example:
15 -{{image reference="BlocksView.png" ||alt="Combining the blocks appropriately" width="650" height="484"}}{{/image}}
15 +
16 +{{image reference="BlocksView.png" ||alt="Combining the blocks appropriately" width="650" height="497"}}{{/image}}
16 16  //Combining blocks appropriately//
18 +
17 17  1. To delete any of the blocks, drag and drop the blocks into the bin.
18 18  1. To view the source code for the blocks generated in the figure, click on the Source tab.
19 19  {{image reference="SourceView.png" ||alt="Source Code View" width="650" height="492"}}{{/image}}
... ... @@ -30,9 +30,9 @@
30 30  == Features ==
31 31  
32 32  
33 -* A default toolbox containing tools for if-else conditions, loops, print statements, assignment, comparison statements etc.
34 -{{image reference="Toolbox.png" |alt="The default Blockly toolbox" width="650" height="617"}}{{/image}}
35 -//The default Blockly toolbox//
35 +* A toolbox containing the default categories for loops, logic statements, variables, macros, math, text etc and the customly added categories for XWiki Script bindings and XWQL queries.
36 +{{image reference="BlocklyToolbox.png" |alt="The default Blockly toolbox" width="150" height="553"}}{{/image}}
37 +//The Blockly toolbox//
36 36  * A bin for deleting unnecessary blocks, and features for creating duplicate blocks, adding comments etc by right-clicking on a block
37 37  {{image reference="RightHandBlocklyMenu.png" ||alt="Right hand menu" width="650" height="669"}}{{/image}}
38 38  //Right clicking on Blockly blocks generates this menu//
cogAdds a new document template based on Google Blockly
TypeXAR
CategoryApplication
Developed by

Vivek Iyer

Active Installs4
Rating
Rate!
0 Votes
LicenseGNU Lesser General Public License 2.1
Bundled With

XWiki Standard

Installable with the Extension Manager

Description

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.

Usage

To create a document using the Blockly template, please follow the steps given below:

  1. Make sure you're logged in
  2. Click on create page at the top right corner, and choose the "Blockly" template in the create page document.
    CreateBlocklyTemplateDoc.png
    Selecting Blockly editor to edit the page
  3. 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:
    For example:

BlocksView.png
Combining blocks appropriately

  1. Make sure you're logged in
  2. Click on create page at the top right corner, and choose the "Blockly" template in the create page document.
    CreateBlocklyTemplateDoc.png
    Selecting Blockly editor to edit the page
  3. 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:
    For example:
    BlocksView.png
    Combining blocks appropriately
  4. To delete any of the blocks, drag and drop the blocks into the bin.
  5. To view the source code for the blocks generated in the figure, click on the Source tab.
    SourceView.png
    Source Code View
  6. Save the code using either the "Save and View", or the "Save and Continue" buttons.
  7. If you want to view the code you generated and/or execute it, go to the View Page. It looks like this:
    GenCodeView.png
    Viewing the Generated Code
  8. To run the code, click on "Run Code". Now after the code has been run, to view the original code again, click on "View Code".
    ExecCode.png
    The code executed
  9. 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 emoticon_smile

Features

  • A default toolbox containing tools for if-else conditions, loops, print statements, assignment, comparison statements etc.
    Toolbox.png
    The default Blockly toolbox
  • A toolbox containing the default categories for loops, logic statements, variables, macros, math, text etc and the customly added categories for XWiki Script bindings and XWQL queries.
    Toolbox.png
    The Blockly toolbox
  • A bin for deleting unnecessary blocks, and features for creating duplicate blocks, adding comments etc by right-clicking on a block
    RightHandBlocklyMenu.png
    Right clicking on Blockly blocks generates this menu
  • Converting this generated code into Javascript and running it as well
  • Displaying the generated code in the textarea, wherein the code gets inserted at cursor position
  • Saving the code to the page

(For screenshots and more information on how to use these features, please check the Usage section given above emoticon_smile)

Future

Refer the Blockly design page for further details.

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Dependencies

Dependencies for this extension (org.xwiki.contrib:application-blockly-ui 0.9):

Get Connected