How AppInventor Populates Component Blocks

In App Inventor blocks editor there is component tree clicking on each item shows a flyout for each component with its associated blocks, I tried to read the code base but its so huge and complex, If anyone can help me point out the files for the basic workflow of how the component java files gets converted in blocks and populated in the each item in component tree in the blocks editor.

1 Like

The high level sketch is as follows:

  1. The annotation processors are compiled by the build scripts into AnnotationProcessors.jar
  2. The Java compiler is run on the files in components/.../runtime with the annotation processors loaded. This allows ComponentDescriptorGenerator to process the annotations and produce simple_components.json
  3. simple_components.json is then bundled into the GWT output created when the appengine module is compiled
  4. When a BlocklyPanel instance is created by YaBlocksEditor, it populates the component database object with the definitions of all of the components in simple_components.json.
  5. When you select a component instance in the source structure explorer, it calls through to showComponent of the drawer defined in drawer.js, which grabs the definition of the components type from the component database and then converts it into an XML representation neede by Blockly to build the flyout.
1 Like

Thank you so much for your reply