最新消息:

初涉Android-blockly

Blockly 少儿编程 1736浏览 0评论

Blockly 是 Google开发的一款图形化编程语言。使用拼图代表语句,来完成编写。最小SDK版本是16,在创建项目的时候记得更改一下版本号。

官网给出的项目:Github上下载

 下载地址

代码分为4个部分。

-Blocklydemo 样例代码
-core 包括模型、控制器、基础的视图类
-vertical包括垂直块试图
-test 测试代码


第一步:
创建一个新的项目,创建一个empty activity。
layout文件使用的是Blockly库里面的布局。[一开始没看懂,后来明白过来了,这步步需要做啥]


第二步:
在新的activity中间的配置文件(AndroidManifest)中加入属性:

android:windowSoftInputMode=”stateHidden|adjustPan”

这将会使得键盘在启动的时候是关闭状态,

It will also make sure the workspace pans to show such fields when the keyboard (or other IME) opens.[没看懂]



第三步:

导入下面位置的4个arr文件。
MyBlocklyApp/blocklylib-core-debug/blocklylib-core-debug.aar
MyBlocklyApp/blocklylib-core-release/blocklylib-core-release.aar
MyBlocklyApp/blocklylib-vertical-debug/blocklylib-vertical-debug.aar
MyBlocklyApp/blocklylib-vertical-release/blocklylib-vertical-release.aar


导入方式:

File | Project Structure| 左上角的‘+’按钮|”Import .JAR/.AAR Package” | 在对应位置选择好.arr文件。

加入以后,还在这个Project Structure|界面选择Modules下的 app ,点击右侧‘+’按钮把四个module都加进来。这样点击完成,这四个模块就都在工程下面了。


一定要记得把这四个在dependency界面当中的scope属性都改成对应的debug和release模式,否则的话编译会出现错误:Error: more than one library with package name



—————————————————正式开发分界线————————————————


最简单的开发方法是继承虚拟blockly类: AbstractBlocklyActivity,


[https://github.com/google/blockly-android/blob/master/blocklylib-core/src/main/java/com/google/blockly/android/AbstractBlocklyActivity.java]


下面是一些简单的方法使用介绍,有的类需要override一下。有的还需要加@not null。


1、getToolboxContentsXmlPath()

这个函数返回的是xml文件的地址,就是你配置的界面的地址。

@Override
protected String getToolboxContentsXmlPath() {
    return “default/toolbox.xml”;
}

Toolbox

工具箱是一个侧菜单,用户可以在里面创建新的代码块。toolbox.xml文件当中就可以定义侧菜单的风格、内容。toolbox.xml文件放在刚return的目录下。

[中间路径发现竟然没有asset文件,而且类文件报错,发现有些东西因为还不存在,先把代码调整一下,调到没错误为止,然后再src/main中右击加入assets文件,如果你发现assets文件加不进来就google一下。assets文件下创建default目录,把toolbox.xml文件创建起来。]


1.1 如何编辑toolbox


2、获得代码块定义json文件


返回代码段定义的json路径

@Override
protected List<String> getBlockDefinitionsJsonPaths() {
    return Arrays.asList(new String[] {
        “default/loop_blocks.json”,
        “default/math_blocks.json”,
        “default/variable_blocks.json”,
        “default/colour_blocks.json”
    });
}
2.1可以添加定制代码块


3、获取GENERATORS的地址。
getGeneratorsJsPaths()
返回 assets/目录下的generator.js文件,这个文件中定义了代码块的接口,现在的接口默认javaScript


private static final List<String> JAVASCRIPT_GENERATORS = Arrays.asList(new String[] {
    // Custom block generators go here. Default blocks are already included.
});


@Override
protected List<String> getGeneratorsJsPaths() {
    return JAVASCRIPT_GENERATORS;
}
3.1 详细的定制模块generator
Note: Learn more about generators in Use Custom Generators.


4、获得代码generation回掉


getCodeGenerationCallback()
用户按下run/play按钮之后,将生成的代码回掉到app中,


CodeGenerationRequest.CodeGeneratorCallback mCodeGeneratorCallback =
        new LoggingCodeGeneratorCallback(this, “LoggingTag”);


@Override
protected CodeGenerationRequest.CodeGeneratorCallback getCodeGenerationCallback() {
    // Uses the same callback for every generation call.
    return mCodeGeneratorCallback;
}


5、初始化空白工作区


onInitBlankWorkspace()


While not an abstract method, onInitBlankWorkspace() is currently required to 


define the available variables if your app includes 


default/variable_blocks.json. Variable support is currently in development.


@Override
protected void onInitBlankWorkspace() {
    // Initialize available variable names.
    getController().addVariable(“item”);
}


6、使用Blockly style


最后一步:
在manifest文件中加入代码:
<application …
    android:theme=”@style/BlocklyTheme”
    />
会报错,在style文件中加入
    <style name=”BlocklyAppTheme” parent=”BlocklyVerticalTheme”>
        <!– Customize your theme here. –>
        <item name=”colorPrimary”>@color/colorPrimary</item>
        <item name=”colorPrimaryDark”>@color/colorPrimaryDark</item>
        <item name=”colorAccent”>@color/colorAccent</item>


        <item name=”blockTextSize”>20sp</item>
    </style>
如果不做这一步的话,会报一个错误,闪退,调了一天才发现是这个问题。官网也是坑人啊


,文档还是不够详细。

您必须 登录 才能发表评论!