《APP-Inventor实例及讲解》由会员分享，可在线阅读，更多相关《APP-Inventor实例及讲解（71页珍藏版）》请在金锄头文库上搜索。
1、第1章 Hello Purr本章将开启你的创建应用之旅。这里介绍了App Inventor的关键要素组件设计器及块编辑器，并手把手地引导读者创建第一个应用：HelloPurr。在完成本章的学习之后，就可以开始创建自己的应用了。每当搭建了新的开发环境，通常运行的第一个程序就是显示“Hello World”，来证明系统已经就绪。这个传统可以追溯到20世纪70年代，从Brian Kernighan 在贝尔实验室使用C语言开始（Brian现在是谷歌App Inventor团队的访问学者！）。使用App Inventor，即便是创建最简单的应用，也可以实现声音的播放以及对屏幕触摸的响应，而不只是显示文字
2、。想想都令人感到兴奋，那么，让我们马上开始吧。第一个应用是“HelloPurr”（如图1-1），当你触摸这只猫时，它会发出“喵呜”声；当你摇晃它时，则将发出嘟嘟的震颤。图1-1 HelloPurr应用学习要点本章用到了以下组件和概念： 选择组件来创建应用：决定了应用 的外观； 为组件设定行为：做什么以及何时做； 使用组件设计器选择组件，在Android设备上，有些组件可以显示，有些则不可见； 从本地计算机加载媒体文件（声音或图像），并添加到应用中； 用块编辑器来组装程序块，以此来设定组件行为； 用App Inventor的实时测试功能对应用进行测试。你可以一边创建应用，一边在手机上看到它们外观
3、以及运行情况； 将应用打包并下载到Android设备上。App Inventor的开发环境App Inventor的编程环境包括以下三个重要组成部分，如图1-2所示： 如图1-2A所示，组件设计器运行在浏览器中，创建应用过程中，用它来进行组件的选择，并进行属性设置； 如图1-2B所示，像组件设计器一样，块编辑器也在浏览器中运行，用于创建组件的行为； 测试设备：在开发应用过程中，可以用Android设备对应用进行同步的运行与测试；如果你手边没有Android设备，你可以使用系统中集成的Android模拟器来测试应用。图 1-2A 组件设计器图 1-2B 块编辑器在浏览器中访问ai2.appinv
4、entor.mit.edu即可启动App Inventor。如果你是第一次使用App Inventor，你会看到弹出的项目（Projects）窗口，它多半是空的，因为你还没有创建过任何项目。单击页面左上角的“ProjectStart new project”创建一个项目，输入“HelloPurr”作为项目名称（注意不带空格），然后单击OK。打开的第一个窗口是组件设计器（Designer），你可以单击窗口右上角的Blocks按钮来切换到块编辑器。在Project右侧的Connect下拉菜单中有三个可选项（三类测试设备），如图1-3所示。图1-3 单击“Connect”并选择“AI Compani
5、on”（应用开发伴侣，或简称AI伴侣）如果手边的Android设备可以通过WIFI访问互联网，用该设备访问Google Play，搜索MIT的AICompanion，下载、安装并启动它。然后在“Connect”下拉菜单中选择“AI Companion”，并按照弹出窗口以及AI伴侣中的提示进行操作。除此之外，也可以使用Android模拟器来测试应用，选择“ConnectEmulator”来加载Android模拟器，大约要等30秒钟。如果一切正常，将会看到组件设计器窗口、块编辑器按钮，如果你选择了Emulator选项，你还可以看到模拟器窗口（屏幕上看起来应该像插图1-2A和1-2B，但窗口中大部分
6、是空的）。如果您还有问题，请重温网站http:/ai2.appinventor.mit.edu中的安装说明。设计组件我们使用的第一个工具就是（也只能是）组件设计器。组件是你用来创建应用的基本元素，就像菜谱中的原料。有些组件非常简单，如“Label”（标签）组件，它用于在屏幕上显示文字；或者如“Button”（按钮）组件，轻按它则引起一个动作。其它组件则要更复杂：一个绘图的“Canvas”（画布）组件可以容纳静止图像或动画；“accelerometerSensor”（加速度传感器）组件是一种运动传感器，它的工作原理类似于Wii 控制器，它可以检测到设备的移动或摇晃；还有的组件用于编写并发送短信、
7、播放音乐和视频以及从网站获取信息等等。当你打开Designer时，其外观如插图1-4所示。图1-4 App Inventor的组件设计器Designer被划分为如下几个区域： 中部的白色区域称为预览窗口（Viewer），用于放置应用中所需的组件，你可以按照自己的喜好来安排这些组件。预览窗口只能粗略地显示应用的外观，例如，与测试设备中的应用相比，在预览窗口中，一行文字可能会在不同的地方换行。如果想看到应用的实际外观，可以将应用下载到测试设备上（稍后我们会在“打包应用程序并下载”的部分详细介绍），或者下载App Inventor自带的模拟器。 预览窗口的左侧是组件面板（Palette），其中包含了
8、可供选择的各类组件。该面板按类别划分为几个部分，默认情况下，只有用户界面（User Interface）组件可见，可以通过点击其他类别的标题，如Media（媒体）等，来查看其他组件。 预览窗口的右侧是组件列表（Components），显示了项目中的所有组件，拖动到预览窗口中的任何组件都将显示在该列表中。目前，该项目中只有一个组件：Screen1，它代表设备的屏幕。 组件列表下方是媒体列表（Media），显示项目中的所有媒体资源（图像和声音）。本项目中尚未添加任何媒体资源，不过很快就会添加。最右边的部分用于显示组件的属性（Properties），在预览窗口中单击某个组件，将在Properties
9、下方看到该组件的一系列属性。属性描述了组件的详细信息（如，单击Label组件可以看到它的颜色、文字内容、字体的属性。），可以修改属性值。当前显示的是屏幕（名为Screen1）的属性，包括背景颜色、背景图像及标题等。HelloPurr应用中需要两个可视组件（可以理解为应用中确实可见的组件）：Label组件显示文字“宠物小猫”，而Button组件中有一张猫的图片；还需要一个非可视的Sound（声音）组件，用来播放声音，如猫叫声；还有一个AccelerometerSensor（加速度传感器）组件，用于检测设备的移动或摇晃。不必担心，我们将按一步一步地教你使用这些组件。创建一个Label（标签）添加的
10、第一个组件是Label：1. 转到组件面板（Palette），单击Label（列表中的第五个），并将其拖动到预览窗口（Viewer）中。你会看到一个矩形框出现在预览窗口中，框里写着Text for Label1。2. 看组件设计器右侧的Properties（属性）框，它显示了Label的属性。在中间位置有一个Text属性，下面是Label中显示的文字。将文字改为“宠物小猫”并按回车键。你会看到在预览窗口中的文字也改变了。3. 单击BackgroundColor（背景色）下面的方框来改变Label的背景色，目前属性值为None（无背景色），从显示的颜色列表中选择蓝色，并将Label的TextCo
11、lor（文字颜色）属性改为黄色。最后将FontSize（字号）属性改为20。Designer的外观如图1-5所示：图1-5 应用中有了一个Label（标签）要确保Android测试设备或模拟器处于连接状态。在设计器中添加的Label会在测试设备上显示出来。在App Inventor中，在设计器中为应用添加组件，等同于在设备上构建应用。这样一来，你可以随时看到应用的外观，这就是所谓的实时测试，你很快就会看到，这样的测试也同样适用于在块编辑器中为组件添加行为。添加Button（按钮）组件HelloPurr应用中的猫咪用Button组件来实现：创建一个普通Button，然后将Button的图像更改为
12、猫咪。在组件设计器（Designer）的组件面板（Patatte）中单击Button（在列表的顶部），将它拖到预览窗口（Viewer）中，置于Label下方。你会看到一个矩形按钮出现在预览窗口中。几秒钟后，该按钮就会出现在Android设备上。试着轻击设备上的按钮，有什么反应吗？不会的，因为应用没有向Button发布命令。这是理解App Inventor的第一个要点：添加到设计器中的组件，必须在块编辑器中创建相应的程序，才能使组件产生某种行为（在设计器中添加一个组件之后要做这件事）。我们希望当点击这个Button时，它会发出猫叫声，但我们希望这个button开起来相隔小猫，而不是一个普通的方块
13、，因此需要为button设置图片：1. 首先，需要下载的小猫的图片，并保存在你的电脑上。从kitty.png下载名为kitty.png的图片文件（png是与jpg、gif等类似的标准图像格式，在App Inventor中，所有这些都是有效的文件类型，与常用的标准声音文件.mpg或.mp3一样），同时从meow.mp3下载声音文件（选择“网页另存为”来保存声音文件）。2. 在预览窗口中点击该按钮，属性框中将显示其属性。点击中部Image属性（现在显示的是None）。显示“Upload File”按钮。3. 点击“Upload File”按钮，再单击弹出窗口中的“选择文件”按钮，浏览并选择之前下载
14、的文件kitty.png，然后单击确定。4. 几秒钟之后，kitty.png被列为Button的Image属性的选项，单击“OK”。与此同时，ketty.png也出现在设计器窗口组件列表下面的Media区域中。在测试设备中，也将显示猫咪的图片，此时按钮看起来像一只小猫咪。5. 注意到猫咪的图片上显示文字“Text for Button1”，我们不希望在应用中看到这些，因此将Button1的Text属性改为“宠物小猫”一类的文字，或者干脆删除所有文字。现在设计器看起来如图1-6。图1-6 应用中的一个Label和一个显示为图像的Button添加猫叫声我们希望当点击按钮时，应用会发出猫叫声。为此需
15、要添加猫叫的声音文件，并通过设定Button的行为来实现这一功能：1. 如果meow.mp3文件尚未下载，现在点击链接meow.mp3下载；2. 在左侧的组件面板中，单击Media类的标题打开Media组件列表。向预览窗口中拖放一个Sound组件。无论你把它放在哪里，它都会出现在预览窗口的底部，并被标记为“Non-visible components（非可视组件）”。非可视组件在应用中发挥特定作用，但不会显示在用户界面中；3. 点击Sound1以显示其属性。设置其Source属性为meow.mp3。同猫咪图片一样，需要从电脑中加载这个声音文件。加载完成后，Media列表中将出现kitty.pn
16、g与meow.mp3两个文件。表1-1中列出了现有的组件。表1-1 HelloPurr中的组件组件类型面板中分组命名作用ButtonUserInterfaceButton1点击发出猫叫声LabelUser InterfaceLabel1显示文本“宠物小猫”SoundMediaSound1播放猫叫声undefined添加组件行为刚刚添加了Button、Label、以及Sound组件来构建我们的第一个应用，现在使用块编辑器来实现点击Button产生猫叫声的功能。单击设计器右上角的“Blocks”按钮切换到块编辑器。在块编辑器窗口中，可以为组件设定行为：做什么以及何时做。此处是让小猫按钮在用户点击它时播放声
