blockly-android模块化/可视化编程（一）——简单集成

github地址

官方教学指南

在安卓中集成Blockly，我们可以实现如下图所示类似的可拖拽模块化/可视化编程,并可以自动生成JavaScript代码

集成方式：

    1.将Github中的blocklylib-core和blocklylib-vertical添加到我们项目的依赖中

    2.创建Activity继承AbstractBlocklyActivity并实现至少以下四个方法：

            getBlockDefinitionsJsonPaths() 用于获取定义块数据的json文件的路径，返回值是文件在资产目录中的路径集合。例如下代码是导入Blockly库提供的默认块，也可以自己创建：

1. @Override

2. protected List<String> getBlockDefinitionsJsonPaths() {

3. List<String> assetPaths = new ArrayList<>(DefaultBlocks.getAllBlockDefinitions());

4. // 在此添加我们自己在资产目录创建的块.

5. return assetPaths;

6. }

            getToolboxContentsXmlPath() 用于获取工具箱toolbox数据的xml文件路径，返回值是文件在资产目录中的路径。例加载默认toolbox.xml：

1. @Override

2. protected String getToolboxContentsXmlPath() {

3. return “default/toolbox.xml”;

4. }

        getGeneratorsJsPaths() 用于获取块生成代码的生成器js文件路径，返回值是文件在资产目录中的路径集合。

1. private static final List<String> JAVASCRIPT_GENERATORS = Arrays.asList(

2. // 添加自己定义的生成器，默认块的生成器已经包含不需要我们填写

3. );

4. @Override

5. protected List<String> getGeneratorsJsPaths() {

6. return JAVASCRIPT_GENERATORS;

7. }

   getCodeGenerationCallback() 用于当运行/播放按钮被点击，代码生成后的回调，返回值是回调对象CodeGenerationRequest.CodeGeneratorCallback()，在其重写方法onFinishCodeGeneration中对代码进行需要的操作。如：

1. private final CodeGenerationRequest.CodeGeneratorCallback mCodeGeneratorCallback =

2. new CodeGenerationRequest.CodeGeneratorCallback() {

3. @Override

4. public void onFinishCodeGeneration(final String generatedCode) {

5. Toast.makeText(MainActivity.this, generatedCode, Toast.LENGTH_LONG).show();

6. Log.e(TAG, “generatedCode:\n” + generatedCode);

7. }

8. };

9. @NonNull

10. @Override

11. protected CodeGenerationRequest.CodeGeneratorCallback getCodeGenerationCallback() {

12. return mCodeGeneratorCallback;

13. }

简单举例的完整Activity代码：

1. public class MainActivity extends AbstractBlocklyActivity {

2. private static final String TAG = “MainActivity”;

3. private static final List<String> JAVASCRIPT_GENERATORS = Arrays.asList(new String[]{

4. “generators.js”

5. });

6. private final CodeGenerationRequest.CodeGeneratorCallback mCodeGeneratorCallback =

7. new CodeGenerationRequest.CodeGeneratorCallback() {

8. @Override

9. public void onFinishCodeGeneration(final String generatedCode) {

10. Toast.makeText(MainActivity.this, generatedCode, Toast.LENGTH_LONG).show();

11. Log.e(TAG, “generatedCode:\n” + generatedCode);

12. }

13. };

14.  

15. @NonNull

16. @Override

17. protected List<String> getBlockDefinitionsJsonPaths() {

18. List<String> assetPaths = new ArrayList<>(DefaultBlocks.getAllBlockDefinitions());

19. // 在此添加我们自己在资产目录创建的块.

20. return assetPaths;

21. }

22.  

23. @NonNull

24. @Override

25. protected String getToolboxContentsXmlPath() {

26. return “default/toolbox.xml”;

27. }

28.  

29. @NonNull

30. @Override

31. protected List<String> getGeneratorsJsPaths() {

32. return JAVASCRIPT_GENERATORS;

33. }

34.  

35. @NonNull

36. @Override

37. protected CodeGenerationRequest.CodeGeneratorCallback getCodeGenerationCallback() {

38. return mCodeGeneratorCallback;

39. }

40. }

        3.在清单文件中，在该Activity的节点中增加如下属性：

android:windowSoftInputMode="stateHidden|adjustPan"

        如果需要横屏显示，还可添加横屏属性：

android:screenOrientation="landscape"

        4.更改values/styles.xml中AppTheme的父类Style为 BlocklyVerticalTheme

1. <style name=“AppTheme” parent=“BlocklyVerticalTheme”>

2. <!– Customize your theme here. –>

3. …

4. </style>

运行后如下图所示：