Blockly Editor
Adds a new editor based on Google Blockly |
Type | XAR |
Category | Application |
Developed by | |
Rating | |
License | GNU Lesser General Public License 2.1 |
Bundled With | XWiki Standard |
Compatibility | 9.11.3 |
Table of contents
Description
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.
Usage
To edit a document using the Blockly editor, please follow the steps given below:
- Make sure you're logged in
- Go to the page you want to edit (for example: /xwiki/bin/view/test/testChild/testGChild/)
- Click on the edit page icon, and choose Blockly from the dropdown menu.
Selecting Blockly editor to edit the page - 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:
Combining blocks appropriately - To delete any of the blocks, drag and drop the blocks into the bin.
- 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.
Blocks with the generated JS code - To run this code, click on the Run JavaScript button. You should get an alert box, as shown in the image below.
Blockly generated code on being run - Save the code using either the "Save and View", or the "Save and Continue" buttons.
The code gets saved - 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
Inserting Code at Cursor Position
Features
- A default toolbox containing tools for if-else conditions, loops, print statements, assignment, comparison statements etc.
The default Blockly toolbox
- A bin for deleting unnecessary blocks
- 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 )
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:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- 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.1):
- org.xwiki.platform:xwiki-platform-webjars-api 9.11
- org.webjars:blockly 7679d22