第二章One and One——组件入门
本章概要
本章将通过引导创建OneAndOne、HappyBox、HappyDay的课程实例，熟悉组件的基本应用，了解Block编程的风格，学会测试和调试自己的App。在界面设计和可视化块编程有一个应用的实践，达到入门级的熟悉状态，可以真正步入自己创建应用的起点。
第1节个人专属App就这么简单
本节概要：
学会启动App Inventor 的工作界面，熟悉各个界面布局，和各个工具栏相应位置和相应方式，通过OneAndOne的课程例子引导，开始学生对App Inventor 的启程之旅。
学习要点
app接口测试工具●启动离线App Inventor、熟悉相应流程
●用户组件Label和Button的使用
●如何利用简单级组件创设有趣的应用
实例探究：OneAndOne
OneAndOne 的定义：一个组件加一个组件，这样的前提下可以做出什么样的应用？
我们可以通过这个课程实例的应用，来实践验证一下：点击应用中的按钮之后Label标签跳出设置好的名字。
图2-1-1：程序界面图2-1-2：运行结果
离线环境的启动
离线环境的启动，打开前文所提资源列表中离线服务器包，启动的
AIServer 和
Bulidserver 两个，如果App Inventor 客户端没有打开的话也一并打开，机房里我把这三个快捷方式放在
一起，合并成启动三项。
图组2-1-3启动各项服务命令并提示成功启动
Tip ：离线版本有可能会出现无法正常使用的时候，在都启动的时候无法正常进入。一般只需右键Google 浏览器重新加载即可。如果不行，也只需关闭再打开，基本都能解决问题。
界面设计与组件构成：
组件的拖放和设置
图2-1-5 Label 标签和Button 按钮的设置
组件重命名
在用户组件区（C 区）选择组件，点击rename （重命名）(图2-1-6)
图表2-1-7：
提问思考：组件为什么需要重命名？
从用户组件区拖曳组件到视图设计，并修改相应属性，课例所用组件属性修改如下（表2-1-8）：
例子——文本框label 截图如下：
图2-1-9：组件对应属性栏
Block 块编程拼接搭建
切换到blocks 界面，观察发现组件设计界面与左侧blocks 下组件相互对应
图组2-1-10
可以发现design界面和
block界面关于 screen1
下的组件是一一对应的
具体操作如下图所示
○1点击BtnGetName按钮拖曳一个click事件框
图2-1-11
○2点击labName的设置text属性框与click框相接（接口正匹配）
图2-1-12
Tip：在下图2-1-13操作中，从Built-in处选择text 拖入一个空白文本模块拼接后键入字符，也可以先键入字符再拼接，此处无影响，即模块以最后形状为准，中途没有先后操作关系。
图组2-1-13
代码解读
该模块比较简单，就是按钮的一个click 事件，让标签显示文本。
程序测试模拟
接下来我们就进入测试App 阶段，这次选择以模拟器测试，也是对于机房教学比较常用的方法，图
2-1-14如下：
耐心等待，在进入程序测试，启动模拟器需要花费一定的时间，未结束之前过程不要点击cancel 。
图2-1-15
图2-1-15
图2-1-16
Tip ：进入调试时，Block 代码模块和UI 界面可以即时修改，不用重新启动模拟器，下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。