1.3.2　App Inventor结构

下面进入App Inventor开发页面。打开网页http://appinventor.mit.edu/，单击右上角桔黄色Creat按钮，进入Google账户登录页面。输入事先申请的Google账号，单击“确认”按钮后进入App Inventor开发环境的Designer设计界面。如果是第一次使用App Inventor，会看到一个空白工作页，如图1.16所示。

图1.16　空白工作页

App Inventor由两部分构成：Designer设计界面和Blocks Editor块编辑界面（右上角是两个界面切换按键）。在Designer设计界面中你需要完成如添加按钮、文本框等程序外观的设计，设计界面实质是一个网页；在Blocks Editor块编辑界面中才真正进行代码编辑，块编辑界面是一个Java应用。

Designer设计界面横向可以分成4部分，分别是Palette（调色板）、Viewer（浏览器）、Components（组件）、Properties（属性）。

❑ Palette：所有将要用到的控件。

❑ Viewer：Android模拟器面板，可拖放控件至此（有些控件可见地显示在模拟器内，有些控件是不可见地显示在模拟器外）。

❑ Components：在Viewer中添加的控件都会在此显示其控件名称。

❑ Properties：当某个控件处于编辑状态时，显示其编辑属性。

在Components组件部分下面还有一个Media多媒体部分，用于显示程序使用的多媒体文件列表。

在设计界面单击右上角的Blocks按钮，就进入了块编辑界面，如图1.17所示。

Blocks Editor块编辑界面分成左右两部分，左边是“事件块”，由3个指令列表组成，分别是Built-In（嵌入）、Screen1（我的组件）、Any component（共性组件）；右边是“编辑区”。

图1.17　Blocks Editor界面

❑ Built-In：用于逻辑控制、参数设置等功能。

❑ Screen1：列出了所有已经添加的组件。

❑ Any component：用于已添加组件共性参数设置。

从左侧事件块的列表中拖出必要的块到编辑区空白处。在编辑区内通过逻辑装配各个事件块的位置，使得它们能按照我们的思路去实现预期的功能。这种图形化的编程方式相比复杂凌乱的程序代码，降低了对专业编程基础知识的要求，减轻了设计者的工作量，同时提高了设计者的兴趣。

在编辑器的右下角有个垃圾箱图标，它的作用是：在进行事件块编辑过程中，可能会由于对各组件间动作关联的不确定，而拖出一个不正确的程序块，此时软件会出现报错提示。出现报错提示时，我们就应该立即将这个不合适的程序块删除，以免出现更多的错误。在Blocks Editor界面中，看不到删除键，可以将那些不需要的程序块直接拖到垃圾箱内，即删除此程序块，这样非常形象、便捷。