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

友情提示：380元/半年，儿童学编程，就上码丁实验室。

github地址

官方教学指南

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

集成方式：

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

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. };
15. @NonNull
16. @Override
17. protected List<String> getBlockDefinitionsJsonPaths() {
18. List<String> assetPaths = new ArrayList<>(DefaultBlocks.getAllBlockDefinitions());
19. // 在此添加我们自己在资产目录创建的块.
20. return assetPaths;
21. }
23. @NonNull
24. @Override
25. protected String getToolboxContentsXmlPath() {
26. return “default/toolbox.xml”;
27. }
29. @NonNull
30. @Override
31. protected List<String> getGeneratorsJsPaths() {
32. return JAVASCRIPT_GENERATORS;
33. }
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>

运行后如下图所示：