Sunday, 11 September 2022

How to use Block Manager Part 1


Diese Website verwendet Cookies von Google, um Dienste anzubieten und Zugriffe zu analysieren. Deine IP-Adresse und dein User-Agent werden zusammen mit Messwerten zur Leistung und Sicherheit für Google freigegeben. So können Nutzungsstatistiken generiert, Missbrauchsfälle erkannt und behoben und die Qualität des Dienstes gewährleistet werden.

Hello, 
in this lesson you learn to use one of the powerful tools of Sketchware Pro: 
The Block Manager
You can create, update, delete and save palettes and blocks as you want. 

Where to find the Block Manager?
The Block Manager is the first part of the Developer Tools.
In case of there are two ways to open the Developer Tools, there are also two ways to open the Block Manager by open the Developer Tools: 

* First method: When start Sketchware, open the left Drawer and scroll down. There you find the Developer Tools. Click it and the Block Manager is the first entry.

* Second method: When you in a app project and edit one of the events (like onCreate or onClick...) click the right drawer. Here you find Developer Tools on top. Click it and you find the Block Manager.

Create comment blocks 
So far, let's learning by doing a example.
In this example we create comment blocks.

Comments are important to get information to you and other programmer to understand the code/blocks.
Also you can comment several blocks to try another possibilty. If the changes work you can delete the comment. If it doesn't work delete changes and uncomment the blocks to restore it.

That's our plan:
In the first step we create the app with Asd blocks to code the comments.
Then we make in the second step the comment blocks and
replace in the third step the Asd blocks with it.

(For understanding: Asd mean 'add source directly'. You find it at the bottom part of the Operator palette.)

Let's begin with step 1:
Create a new project and in the Main view add 
a TextView textview1 
and a Button button1.

Go to the onClick event of the button.
Add Asd- blocks and 'TextView set text' blocks as shown below.
Set TextView of both blocks to textview1.
Set text of first to "This text will not be shown".
Set text of second to "This text will be shown".
Now fill the Asd blocks as shown below to create comments.
The first Asd is a single line comment.
The second and third Asd comments the first TextView block so only the second TextView block will working. 

💡TIPP: Quickly show the code. 
Click on top to the <\> Button.
Now you see the code you have created.

This can be important to see and understand how the code works. You can also select and copy a part or all of the code. (for example you can copy code for to use it in your blocks.)
The grey colored code shows the comments. You see the first TextView block is grey and commented.
The black / blue colored code will be compiled and working. This will take effect to the second TextView block.

Close it and run the App.

If you click the button the second TextView block will take effect.
Step 2: Create the comment blocks 
Now it's really time to create the blocks. 
Open the Block Manager.
Add a new palette.
💡TIPP: Add palette as place you want.
If you click the '+' fab button the palette will be added at the bottom of the list.
This can be worse if you every time must scroll down the complete list to bottom.
But there is another way:
Find the palette you want to create above and longclick it. Then select 'Insert'. 
Give the palette the name 'comments' and set the color (i set it to dark grey)
Save and the new palette is created.
Click the palette to open it and add a new block.
Set the properties to: 
name: line comment
block type: regular (r)
and the color to dark grey
Under the color entry you find the mask as preview of the block.
Click the texthint 'block spec' and write "comment" then click parameter 'input only'. 
You see now the text
 "comment %s.inputOnly"
%s.inputOnly represent a input field for code text . It is the first parameter in the mask. If you want you can add as many parameter as you want for ex. boolean, string, number, text field, button, list view etc. 
At last we must insert the java code.
"// %1$s"
// stands for a comment
%1$s is the java placeholder for the first parameter you added in the mask,here the code input %s.inputOnly.
click save and you added your first block 👍

Go on and create yet another block.
Properties are:
name: multi line comment
type set: if-block (c)
and color to dark grey
Write "comment" to the mask hint.
Write the code
 "/*
%1$s
*/"
Here the code of the if-like block begins with/* and ends with */ This stands for a multiple line comment.
The placeholder %1$s stands for the code included in the if-like block.
Click save and look the two blocks you created. 👍👍
💡TIPP: Export your blocks to storage
You can export and import blocks. Click the three Dots on the right top side and then 'Export blocks'.
You find now your blocks at the directory:
. sketchware/resources/block/export/comments.json
On same way you can import blocks.

Close the Block Manager and go back to make changes take effect.
It's time to see the blocks in action in step 3:
In your project open the onClick event.
The blocs are shown as before.

Open now the blocks list and add your comment blocks. Enjoy to see your blocks first time 😀
Replace all Asd blocks. Add the text "This is a single line comment" to the line comment block and drag and drop the first TextView block inside the multiple line comment block. 
If you click the </> button to show the code, you see that the code is the same as before.
Run the App and click the button. The result is the same as before: Only the second TextView block will take effect.
Congratulaton 👍
You created your first own blocks and tested it.




No comments:

Post a Comment