blockly-android模塊化/可視化編程（一）——簡單集成

github地址

官方教學指南

在安卓中集成Blockly，我們可以實現如下圖所示類似的可拖拽模塊化/可視化編程,並可以自動生成JavaScript代碼

集成方式：

    1.將Github中的blocklylib-core和blocklylib-vertical添加到我們項目的依賴中

    2.創建Activity繼承AbstractBlocklyActivity並實現至少以下四個方法：

            getBlockDefinitionsJsonPaths() 用於獲取定義塊數據的json文件的路徑，返回值是文件在資產目錄中的路徑集合。例如下代碼是導入Blockly庫提供的默認塊，也可以自己創建：

@Override
protected List<String> getBlockDefinitionsJsonPaths() {
    List<String> assetPaths = new ArrayList<>(DefaultBlocks.getAllBlockDefinitions());
    // 在此添加我們自己在資產目錄創建的塊.
    return assetPaths;
}

            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:\n" + 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:\n" + 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>

運行後如下圖所示：