This documentation explains how to scroll elements into view, identify parent elements, clear and delete values in screen items, and add actions to screen items.
Scrolling the element Into the Visible Area
Screen Item scroll into view
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_scrollIntoView\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">screenItem</field></block></value></block></xml>"}
This block is used to scroll the specified layout into the visible area.
Parameters: Screen Item
Output: N/A
Sample code:
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>scrollButton</variable><variable>secondChildLayout</variable><variable>firstChildLayout</variable><variable>screenItem</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"Styling_setFlexShorthand\"><field name=\"flexShorthand\">FlexShorthand.Auto</field><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">scrollButton</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Scroll</field></shadow></value></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">scrollButton</field></block></value><statement name=\"HANDLER\"><block type=\"ScreenItem_ScreenItem_scrollIntoView\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">secondChildLayout</field></block></value></block></statement><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">scrollButton</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">firstChildLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"Styling_setHeight\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">firstChildLayout</field></block></value><value name=\"height\"><block type=\"CssValues_createLength\"><field name=\"unit\">CssLengthUnit.PX</field><value name=\"value\"><shadow type=\"math_number\"><field name=\"NUM\">1000</field></shadow></value></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">firstChildLayout</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">secondChildLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">firstChildLayout</field></block></value><next><block type=\"Styling_setHeight\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">secondChildLayout</field></block></value><value name=\"height\"><block type=\"CssValues_createLengthPercentage\"><value name=\"value\"><shadow type=\"math_number\"><field name=\"NUM\">100</field></shadow></value></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">secondChildLayout</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">secondChildLayout</field></block></value></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}
The original output:
After clicking “Scroll” button:
Getting Parent Elements
Screen Item get parent screen item
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_getParent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">screenItem</field></block></value></block></xml>"}
This block uses to get the parent screen item.
Parameters: Screen Item
Output: Screen Item
Sample code:
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>removeChildBtn</variable><variable>removeParentBtn</variable><variable>parent</variable><variable>child</variable><variable>screenItem</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">removeChildBtn</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Remove Child</field></shadow></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">removeParentBtn</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Remove Parent</field></shadow></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">parent</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">child</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"Styling_setFlexShorthand\"><field name=\"flexShorthand\">FlexShorthand.Auto</field><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value></block></value><next><block type=\"Styling_setHeight\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value><value name=\"height\"><block type=\"CssValues_createLength\"><field name=\"unit\">CssLengthUnit.PX</field><value name=\"value\"><shadow type=\"math_number\"><field name=\"NUM\">70</field></shadow></value></block></value><next><block type=\"Styling_setWidth\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value><value name=\"width\"><block type=\"CssValues_createLength\"><field name=\"unit\">CssLengthUnit.PX</field><value name=\"value\"><shadow type=\"math_number\"><field name=\"NUM\">500</field></shadow></value></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value></block></value><next><block type=\"Styling_setHeight\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value><value name=\"height\"><block type=\"CssValues_createLength\"><field name=\"unit\">CssLengthUnit.PX</field><value name=\"value\"><shadow type=\"math_number\"><field name=\"NUM\">40</field></shadow></value></block></value><next><block type=\"Styling_setWidth\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value><value name=\"width\"><block type=\"CssValues_createLength\"><field name=\"unit\">CssLengthUnit.PX</field><value name=\"value\"><shadow type=\"math_number\"><field name=\"NUM\">300</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">removeChildBtn</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">removeParentBtn</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">removeChildBtn</field></block></value><statement name=\"HANDLER\"><block type=\"ScreenItem_ScreenItem_remove\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value></block></statement><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">removeParentBtn</field></block></value><statement name=\"HANDLER\"><block type=\"ScreenItem_ScreenItem_remove\"><value name=\"this\"><block type=\"ScreenItem_ScreenItem_getParent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}
The output:
When clicks “Remove Child” button, the child (blue box) will be removed.
When clicks “Remove Parent” button, the parent (yellow box) and the child (blue box) which within the parent will be removed.
Finding Parent Screen Item
Screen Item has parent screen item
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_hasParent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">screenItem</field></block></value></block></xml>"}
This block is used for checking the variable has parent screen item or not.
Parameters: Screen Item
Output: Boolean (True/False)
Sample code:
Here is using one if condition to remove the screen item.
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"controls_if\"><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"ScreenItem_ScreenItem_hasParent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value></block></value><statement name=\"DO0\"><block type=\"ScreenItem_ScreenItem_remove\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>removeParentBtn</variable><variable>removeChildBtn</variable><variable>parent</variable><variable>child</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">removeParentBtn</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Remove Parent</field></shadow></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">removeChildBtn</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Remove Child</field></shadow></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">parent</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">child</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"Styling_setFlexShorthand\"><field name=\"flexShorthand\">FlexShorthand.Auto</field><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">148</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">211</field></shadow></value></block></value><next><block type=\"Styling_setHeight\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value><value name=\"height\"><block type=\"CssValues_createLength\"><field name=\"unit\">CssLengthUnit.PX</field><value name=\"value\"><shadow type=\"math_number\"><field name=\"NUM\">70</field></shadow></value></block></value><next><block type=\"Styling_setWidth\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value><value name=\"width\"><block type=\"CssValues_createLength\"><field name=\"unit\">CssLengthUnit.PX</field><value name=\"value\"><shadow type=\"math_number\"><field name=\"NUM\">500</field></shadow></value></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">165</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value></block></value><next><block type=\"Styling_setHeight\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value><value name=\"height\"><block type=\"CssValues_createLength\"><field name=\"unit\">CssLengthUnit.PX</field><value name=\"value\"><shadow type=\"math_number\"><field name=\"NUM\">40</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">removeParentBtn</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">removeChildBtn</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">removeParentBtn</field></block></value><statement name=\"HANDLER\"><block type=\"controls_if\"><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"ScreenItem_ScreenItem_hasParent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value></block></value><statement name=\"DO0\"><block type=\"ScreenItem_ScreenItem_remove\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">parent</field></block></value></block></statement></block></statement><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">removeChildBtn</field></block></value><statement name=\"HANDLER\"><block type=\"controls_if\"><value name=\"IF0\"><shadow type=\"logic_boolean\"><field name=\"BOOL\">TRUE</field></shadow><block type=\"ScreenItem_ScreenItem_hasParent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value></block></value><statement name=\"DO0\"><block type=\"ScreenItem_ScreenItem_remove\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">child</field></block></value></block></statement></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}
The original output:
When clicks “Remove Child” button, the child (orange box) will be removed.
When clicks “Remove Parent” button, the parent (purple box) and the child (orange box) which within the parent will be removed.
Taking Off All Values in Screen Item
Remove Screen Item
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_remove\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">screenItem</field></block></value></block></xml>"}
This block is used to remove all the value in the screen.
Parameters: Screen Item
Output: N/A
Sample code:
Here will remove all the value in Screen Item after clicks the button.
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value><statement name=\"HANDLER\"><block type=\"ScreenItem_ScreenItem_remove\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></statement></block></xml>"}
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>button</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">button</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Remove Main Layout</field></shadow></value></block></value><next><block type=\"Styling_setFlexShorthand\"><field name=\"flexShorthand\">FlexShorthand.Auto</field><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">165</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value><statement name=\"HANDLER\"><block type=\"ScreenItem_ScreenItem_remove\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></statement><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">button</field></block></value></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}
The original output:
When clicks “Remove Main Layout” button, the main layout (orange area) will be removed.
Deleting Values in Screen Item
Clear Screen Item
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_getParent\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">screenItem</field></block></value></block></xml>"}
This block is used to clear all the value in the related layout.
Parameters: Screen Item
Output: N/A
Sample code:
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable><variable>removeChildBtn</variable><variable>childLayout</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"Styling_setFlexShorthand\"><field name=\"flexShorthand\">FlexShorthand.Auto</field><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">218</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">185</field></shadow></value></block></value><next><block type=\"variables_set\"><field name=\"VAR\">removeChildBtn</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Control_createButton\"><value name=\"content\"><shadow type=\"text\"><field name=\"TEXT\">Remove content in child layout</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">removeChildBtn</field></block></value><next><block type=\"variables_set\"><field name=\"VAR\">childLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"Styling_setBackgroundColor\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">childLayout</field></block></value><value name=\"color\"><block type=\"CssValues_createColor\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"0\" _input_init=\"false\"></mutation><value name=\"r\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">0</field></shadow></value><value name=\"g\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">255</field></shadow></value><value name=\"b\"><shadow type=\"math_number_minmax\"><mutation min=\"0\" max=\"255\" label=\"Number\" precision=\"0\"/><field name=\"SLIDER\">191</field></shadow></value></block></value><next><block type=\"Styling_setHeight\"><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">childLayout</field></block></value><value name=\"height\"><block type=\"CssValues_createLength\"><field name=\"unit\">CssLengthUnit.PX</field><value name=\"value\"><shadow type=\"math_number\"><field name=\"NUM\">40</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">childLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">Text inside the child layout.</field></shadow></value></block></value><next><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"variables_get\"><field name=\"VAR\">childLayout</field></block></value><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">removeChildBtn</field></block></value><statement name=\"HANDLER\"><block type=\"ScreenItem_ScreenItem_clear\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">childLayout</field></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>"}
The original output:
When clicks “Remove content in child layout” button, the text will be removed.
Adding some Actions with Screen Item
Control click
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"ScreenItem_ScreenItem_click\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></xml>"}
This block is used for setting the specific alignment for the variable or layout.
Parameters: Screen Item
Output: N/A
Sample code:
{"blocks":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><variables><variable>mainLayout</variable><variable>mainScreen</variable></variables><block type=\"pxt-on-start\" x=\"0\" y=\"0\"><statement name=\"HANDLER\"><block type=\"variables_set\"><field name=\"VAR\">mainLayout</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"ScreenItem_createLayout\"/></value><next><block type=\"variables_set\"><field name=\"VAR\">mainScreen</field><value name=\"VALUE\"><shadow type=\"math_number\"><field name=\"NUM\">0</field></shadow><block type=\"Screen_create\"><value name=\"label\"><shadow type=\"text\"><field name=\"TEXT\">Main</field></shadow></value><value name=\"layout\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></value><next><block type=\"Task_runAfter\"><value name=\"ms\"><shadow type=\"math_number\"><field name=\"NUM\">5000</field></shadow></value><value name=\"abortSignal\"><block type=\"Task_createAbortControl\"/></value><statement name=\"HANDLER\"><block type=\"ScreenItem_ScreenItem_click\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value></block></statement><next><block type=\"ScreenItem_ScreenItem_onClick\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><statement name=\"HANDLER\"><block type=\"ScreenItem_Layout_add\"><value name=\"this\"><block type=\"variables_get\"><field name=\"VAR\">mainLayout</field></block></value><value name=\"item\"><block type=\"Control_createTextBlock\"><mutation xmlns=\"http://www.w3.org/1999/xhtml\" _expanded=\"1\" _input_init=\"true\"></mutation><value name=\"text\"><shadow type=\"text\"><field name=\"TEXT\">It clicked main layout after 5 second.</field></shadow></value></block></value></block></statement></block></next></block></next></block></next></block></statement></block></xml>"}
Before clicking the main layout, the output:
After clicking the main layout, the output:
Table of Content