blockly-android模块化/可视化编程工具

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

集成方式：

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

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

getBlockDefinitionsJsonPaths() 用于获取 定义块数据的json文件的路径，返回值是文件在资产目录中的路径集合。

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

@Override

protected String getToolboxContentsXmlPath() {

    return "default/toolbox.xml";

}

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

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

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

);

@Override

protected List<String> getGeneratorsJsPaths() {

    return JAVASCRIPT_GENERATORS;

}

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

    private final CodeGenerationRequest.CodeGeneratorCallback mCodeGeneratorCallback =

            new CodeGenerationRequest.CodeGeneratorCallback() {

                @Override

                public void onFinishCodeGeneration(final String generatedCode) {

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

                    Log.e(TAG, "generatedCode: " + generatedCode);

                }

            };

    @NonNull

    @Override

    protected CodeGenerationRequest.CodeGeneratorCallback getCodeGenerationCallback() {

        return mCodeGeneratorCallback;

    }

简单举例的完整Activity代码：

public class MainActivity extends AbstractBlocklyActivity {

    private static final String TAG = "MainActivity";

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

            "generators.js"

    });

    private final CodeGenerationRequest.CodeGeneratorCallback mCodeGeneratorCallback =

            new CodeGenerationRequest.CodeGeneratorCallback() {

                @Override

                public void onFinishCodeGeneration(final String generatedCode) {

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

                    Log.e(TAG, "generatedCode: " + generatedCode);

                }

            };

    @NonNull

    @Override

    protected List<String> getBlockDefinitionsJsonPaths() {

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

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

        return assetPaths;

    }

    @NonNull

    @Override

    protected String getToolboxContentsXmlPath() {

        return "default/toolbox.xml";

    }

    @NonNull

    @Override

    protected List<String> getGeneratorsJsPaths() {

        return JAVASCRIPT_GENERATORS;

    }

    @NonNull

    @Override

    protected CodeGenerationRequest.CodeGeneratorCallback getCodeGenerationCallback() {

        return mCodeGeneratorCallback;

    }

}

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

android:windowSoftInputMode="stateHidden|adjustPan"

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

android:screenOrientation="landscape"

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

<style name="AppTheme" parent="BlocklyVerticalTheme">

    <!-- Customize your theme here. -->

    ...

</style>

可视化开发工具推荐

千语创想 Studio3可视化开发工具秉承低代码的设计理念，让开发者可以通过拖拽搭建积木的方式，所见即所得地快速构建生成应用静态页面，并支持同步实时生成AVM跨端代码；工具内置丰富的UI样式组件，节省开发者大量的页面构建时间，让开发者能够更加专注于应用业务逻辑的开发，进一步帮助企业降本增效。

立即免费在线制作一个APP，新手注册即送开发大礼包