APPInventor实例及讲解

APPInventor实例及解说APPInventor实例及解说APPInventor实例及解说第1章HelloPurr本章将开启你的创立应用之旅。这里介绍了AppInventor的要点要素——组件设计器及块编写器，并手把手地引导读者创立第一个应用：HelloPurr。在达成本章的学习今后，就能够开始创立自己的应用了。每当搭建了新的开发环境，平常运转的第一个程序就是显示“HelloWorld，”来证明系统已经就绪。这个传统能够追忆到20世纪70年月，从BrianKernighan在贝尔实验室使用C语言开始（Brian此刻是谷歌AppInventor团队的接见学者！）。使用AppInventor，即即是创立最简单的应用，也能够实现声音的播放以及对屏幕触摸的响应，而不但是显示文字。想想都令人感觉愉悦，那么，让我们马上开始吧。第一个应用是“HelloPurr（”如图1-1），当你触摸这只猫时，它会发出“喵呜”声；当你摇摆它时，则将发出嘟嘟的震颤。图1-1HelloPurr应用学习要点本章用到了以下组件和看法：选择组件来创立应用：决定了应用的外观；为组件设定行为：做什么以及何时做；使用组件设计器选择组件，在Android设施上，有些组件能够显示，有些则不可以见；从当地计算机加载媒体文件（声音或图像），并增加到应用中；用块编写器来组装程序块，以此来设定组件行为；用AppInventor的功能用行。你能够一建用，一在手机上看到它外以及运转情况；将用打包并下到Android上。AppInventor的开发环境AppInventor的程境包括以下三个重要成部分，如1-2所示：如1-2A所示，件器运转在器中，建用程中，用它来行件的，并行属性置；如1-2B所示，像件器一，器也在器中运转，用于建件的行；：在开用程中，能够用Android用行同步的运转与；假如你手没有Android，你能够使用系中集成的Android模器来用。1-2A件器1-2B器Startnewproject⋯”建一个目，入“HelloPurr作”目名称（注意不空格），此后OK。翻开的第一个窗口是件器（Designer），你能够窗口右上角的Blocks按来切到器。在Project右的Connect下拉菜中有三个可（三），如1-3所示。1-3“Connect”并“AICompanion”（用开伴，或称AI伴）假如手边的Android设施能够经过WIFI接见互联网，用该设施接见谷歌Play，找寻MIT的AICompanion，下载、安装并启动它。此后在“Connect下”拉菜单中选择“AICompanion”，并依照弹出窗口以及AI伴侣中的提示进行操作。除此之外，也能够使用Android模拟器来测试应用，选择“ConnectEmulator”来加载Android模拟器，大概要等30秒钟。设计组件我们使用的第一个工具就是（也只能是）组件设计器。组件是你用来创立应用的基本元素，就像菜谱中的原料。有些组件特别简单，如“Label（”标签）组件，它用于在屏幕上显示文字；或许如“Button（”按钮）组件，轻按它则引起一个动作。其他组件则要更复杂：一个绘图的“Canvas”（画布）组件能够容纳静止图像或动画；“accelerometerSensor（”加快度传感器）组件是一种运动传感器，它的工作原理近似于Wii控制器，它能够检测到设施的挪动或摇摆；还有的组件用于编写并发送短信、播放音乐和视频以及从网站获守信息等等。当你翻开Designer时，其外观如插图1-4所示。图1-4AppInventor的组件设计器Designer被区分为以下几个地区：中部的白色地区称为预览窗口（Viewer），用于搁置应用中所需的组件，你能够依照自己的喜好来安排这些组件。预览窗口只能大概地显示应用的外观，比方，与测试设施中的应用比较，在预览窗口中，一行文字可能会在不一样样的地方换行。假如想看到应用的实质外观，能够将应用下载到测试设施上（稍后我们会在“打包应用程序并下载”的部分详尽介绍），或许下载AppInventor自带的模拟器。预览窗口的左侧是组件面板（Palette），其中包括了可供选择的各种组件。该面板按种类区分为几个部分，默认情况下，只适用户界面（UserInterface）组件可见，能够经过点击其他类其他标题，如Media（媒体）等，来查察其他组件。预览窗口的右侧是组件列表（Components），显示了项目中的所有组件，拖动到预览窗口中的任何组件都将显示在该列表中。目前，该项目中只有一个组件：Screen1，它代表设施的屏幕。组件列表下方是媒体列表（Media），显示项目中的所有媒体资源（图像和声音）。本项目中还没有增加任何媒体资源，但是很快就会增加。最右侧的部分用于显示组件的属性（Properties），在预览窗口中单击某个组件，将在Properties下方看到该组件的一系列属性。属性描绘了组件的详尽信息（如，单击Label组件能够看到它的颜色、文字内容、字体的属性。），能够改正属性值。目前显示的是屏幕（名为Screen1）的属性，包括背景颜色、背景图像及标题等。HelloPurr应用中需要两个可视组件（能够理解为应用中的确可见的组件）：Label组件显示文字“宠物小猫”，而Button组件中有一张猫的图片；还需要一个非可视的Sound（声音）组件，用来播放声音，如猫喊声；还有一个AccelerometerSensor（加快度传感器）组件，用于检测设施的挪动或摇摆。不用担忧，我们将按一步一步地教你使用这些组件。创立一个Label（标签）增加的第一个组件是Label：转到组件面板（Palette），单击Label（列表中的第五个），并将其拖动到预览窗口（Viewer）中。你会看到一个矩形框出此刻预览窗口中，框里写着TextforLabel1。看组件设计器右侧的Properties（属性）框，它显示了Label的属性。在中间地点有一个Text属性，下面是Label中显示的文字。将文字改为“宠物小猫”并按回车键。你会看到在预览窗口中的文字也改变了。单击BackgroundColor（背风景）下面的方框来改变Label的背风景，目前属性值为None（无背风景），从显示的颜色列表中选择蓝色，并将Label的TextColor（文字颜色）属性改为黄色。最后将FontSize（字号）属性改为20。Designer的外观如图1-5所示：图1-5应用中有了一个Label（标签）要保证Android测试设施或模拟器处于连结状态。在设计器中增加的Label会在测试设施上显示出来。在AppInventor中，在设计器中为应用增加组件，等同于在设施上建立应用。这样一来，你能够随时看到应用的外观，这就是所谓的实时测试，你很快就会看到，这样的测试也相同合用于在块编写器中为组件增加行为。增加Button（按钮）组件HelloPurr应用中的猫咪用Button组件来实现：创立一个一般Button，此后将Button的图像改正为猫咪。在组件设计器（Designer）的组件面板（Patatte）中单击Button（在列表的顶部），将它拖到预览窗口（Viewer）中，置于Label下方。你会看到一个矩形按钮出此刻预览窗口中。几秒钟后，该按钮就会出此刻Android设施上。试着轻击设施上的按钮，有什么反响吗？不会的，由于应用没有向Button布命令。是理解AppInventor的第一个要点：增加到器中的件，必在器中建相的程序，才能使件生某种行（在器中增加一个件今后要做件事）。我希望当点个Button，它会出猫喊声，但我希望个button开起来相隔小猫，而不是一个一般的方，所以需要button置片：1.第一，需要下的小猫的片，并保存在你的上。从kitty.png下名kitty.png的片文件（png是与jpg、gif等似的准像，在AppInventor中，所有些都是有效的文件型，与常用的准声音文件.mpg或.mp3一），同从meow.mp3下声音文件（“网另存”来保存声音文件）。2.在窗口中点按，属性框中将示其属性。点中部Image属性（在示的是None）。示“UploadFile⋯”按。3.点“UploadFile⋯”，再出窗口中的按“文件”按，并之前下的文件kitty.png，此后确定。几秒今后，kitty.png被列Button的Image属性的，“OK”。与此同，ketty.png也出在器窗口件列表下面的Media地区中。在中，也将示猫咪的片，此按看起来像一只小猫咪。注意到猫咪的片上示文字“TextforButton1，我”不希望在用中看到些，所以将Button1的Text属性改“物小猫”一的文字，或许干脆除所有文字。在器看起来如1-6。1-6用中的一个Label和一个示像的Button增加猫喊声我们希望当点击按钮时，应用会发出猫喊声。为此需要增加猫叫的声音文件，并经过设定Button的行为来实现这一功能：假如meow.mp3文件还没有下载，此刻点击链接meow.mp3下载；在左侧的组件面板中，单击Media类的标题翻开Media组件列表。向预览窗口中拖放一个Sound组件。不论你把它放在哪里，它都会出此刻预览窗口的底部，并被标记为“Non-visiblecomponents（非可视组件）”。非可视组件在应用中发挥特定作用，但不会显示在用户界面中；点击Sound1以显示其属性。设置其Source属性为meow.mp3。同猫咪图片相同，需要从电脑中加载这个声音文件。加载达成后，Media列表中将出现kitty.png与meow.mp3两个文件。表1-1中列出了现有的组件。表1-1HelloPurr中的组件组件种类面板中分组命名作用ButtonUserInterfaceButton1点击发出猫喊声LabelUserInterfaceLabel1显示文本“宠物小猫”SoundMediaSound1播放猫喊声undefined增加组件行为刚才增加了Button、Label、以及Sound组件来建立我们的第一个应用，此刻使用块编写器来实现点击Button产生猫喊声的功能。单击设计器右上角的“Blocks”按钮切换到块编写器。在块编写器窗口中，能够为组件设定行为：做什么以及何时做。此处是让小猫按钮在用户点击它时播放声音。假如把组件比作菜谱中的原料，那么块（Blocks）则相当于烹饪过程说明。发出猫喊声在块编写器窗口的左侧，“Blocks标”题下面，能够看到很多分属不一样样类其他按钮，其中包括了我们在设计器中创立的所有组件：Screen1、Button1、Label1以及Sound1，点击它们就像翻开抽屉，将看到一组合用于该组件的可选程序块（Blocks）。点击Button1翻开抽屉，显示了与Button相关的程序块，能够用它们来设置Button的行为，最上面的Block就是Button1.Click，如图1-7所示。图1-7点击Button1时显示合用于Button组件的程序块（Blacks）单击标有Button1.Click的块并将其拖到工作区。注意，Button1.Click这个块上包括了when。凡是包括when的块都被称为事件办理程序，用来定义当组件上发生了某种特定事件时，应用该做什么。在本例中，当用户点击猫咪（实质上是按钮）时发生了风趣的事情，如图1-8所示。下面我们将在程序中增加一些块，来响应发生的事件。图1-8定义“Button.Click块”来响应用户的点击事件在块编写器中点击Sound1翻开抽屉，拖出“callSound1.Play块（”以前将Sound1的Source属性设置为meow.pm3）。注意，块“callSound1.Play的”形状恰巧能够嵌入Button1.Click块中标有“do的”缺口。AppInventor的这类设置，保证只有特定的块能够组合在一同，这样保证了连在一同的块能够共同工作。标有call的块用来定义组件的行为。在本例中，这两个块联合在一同，构成一个单元，如图1-9，两个块连结到一同时，你会听到“啪”的一声。图1-9点击按钮将播放猫喊声不一样样于传统的程序代码（平常像纷乱的“天书”一般），在AppInventor中，Blocks拼出了行为。在本例中，我们等于说，“嘿，AppInventor，当有人点击小猫时，播放猫喊声。”测试：让我们经过检查来保证所有正常——每当向应用中增加了新东西，就要进行测试，这特别重要。在测试设施上点击该按钮（或在模拟器上单击它）。你应该听到猫喊声。恭贺你，你的第一个应用跑起来了！。增加震动见效当点击按钮时，让猫咪发出“Purr声”和“meow”声，这里用手机的振动来模拟“Purr”声。这听起来很难，其实特别简单，由于播放“meow”声音组件也能够使设施产生振动。AppInventor能够帮助你发掘设施的核心功能，而无需考虑它们如何实现振动。此刻只要要向“Button1.click块内”增加第二个行为：进入块编写器，单击Sound1翻开抽屉；2.选择callSound1.Vibrate块，将其拖动到whenButton1.Click块内，置于callSound1.Play块下，恰巧与原来的块吻合；假如不吻合，可试一试拖动它，使callSound1.Vibrate块顶部的凹陷恰巧与callSound1.Play块底部的突出相对。图1-10Click事件引起了播放声音及振动注意：在callSound1.Vibrate块的右下角写着millisecs（毫秒）。块上的开放插槽表示需要插入其他块，来设定行为的详尽方式。本例中，需要设定callSound1.Vibrate块的振动时长。以毫秒（千分之一秒）为单位输入时长，毫秒是多半编程语言中惯用的时长单位。假如想让设施振动半秒钟，需要输入数字块“500。”翻开Math（数学）抽屉，其中的第一个块是“0，”这就是数字块，如图1-11所示。图1-11翻开Math抽屉4.点击“0块”，蓝色的“0块”留在了工作区，如图1-12所示。图11-12选择一个数字块（0为默认值）点击数字0，输入新值“500，”如图1-13所示。图11-13将默认值0改为5006.将“500数”字块插入callSound1.Vibrate块右侧的插槽内，如图1-14所示。图1-14将数字块500插入插槽测试：试一试吧！点击设施上的按钮，你会感觉到半秒钟的嘟嘟声（震动）。摇摆手机此刻来增加最后一项，在Android设施上实现一个很酷的功能：摇摆设施时发出猫喊声。为此要用到AccelerometerSensor（加快度传感器）组件，它能够检测到设施的摇摆或挪动。在设计器中，张开组件面板中的传感器（Sensors）分类，拖出一个AccelerometerSensor（加快度传感器）组件。不用介怀把它放到哪里，像任何非可视化组件相同，不论你把它放在预览窗口的什么地方，它都会落到预览窗口底部的“非可视组件”地区。摇摆设施的事件需要与单击按钮事件分创立理。这意味着需要一个新的事件办理程序。进入块编写器，翻开AccelerometerSensor1抽屉，拖出AccelerometerSensor1.Shaking块。像点击按钮时播放声音相同，将Sound1.Play块插入AccelerometerSensor1.Shaking插槽，摇动设施试一试看。图1-15显示了完满的HelloPurr应用中所用的块。图1-15HelloPurr应用中的块将应用打包以供下载AppInventor是一种云计算工具，这意味着你用谷歌的在线服务器储蓄你的应用。所以当封闭AppInventor，再从头返回时，你的应用还在；你不用在个人电脑上保存任何东西，像Word文件或音乐文件那样。其他，假如连结了测试设施，无需向设施下载任何文件，就能够轻松地测试应用（称为及时测试）；但问题是，假如设施与AppInventor断开连结，那么应用将停止运转。由于从未在设施上安装过应用，所以无从找到应用的图标。能够将应用下载并安装到Android设施上，以便在不连结计算机时，应用也能运行。第一，保证设施赞同从AndroidMarket之外的地方下载应用。详尽做法是：在设施上选择“设置→安全”，并勾选UnknownSource（未知根源）一项。此后回到AppInventor设计器中，单击BuildApp（provideQRcodefor.apk），此时窗口中出现一个进度条，这个过程大概需要一分钟。进度消失后，几秒钟后，会显示打包应用的QR码。用条码扫描软件获得QR码今后，设施会提示输入谷歌帐户的密码（假如设施以前登岸过谷歌账户，此步骤不会出现）；密码输入后，应用被下载到设施上。假如你的设施中没有条码扫描软件，去谷歌Play找寻并下载安装一个。下载达成后，会咨询你能否安装，请单击安装。（假如设备上已经安装了MITAI2Companion，用其中的条码扫描功能，能够顺利实现应用的下载安装。）安装达成后，设施上出现HelloPurr应用的图标——这就是我们刚才创立的应用，点击让它开始运转。（请保证运转的是新安装的应用，而不是以前与AppInventor连结的应用。）此刻，你能够断开连结甚至从头启动设施，并删除AppInventor中的所有应用，而新应用依旧存在。认识这一点很重要：打包的应用已经与AppInventor中的项目分别。你还可以够够像以前相同，连续在AppInventor中完满你的应用，并在测试设施上使用AI伴侣做及时测试，但这些都不会改变已经安装在设施上的应用。假如在AppInventor中对应用进行了改正，那么改正结果必定从头打包，并下载安装新版本来代替设施上的原有版本。马上用Android设施下载安装HelloPurr应用吧，这样，你就能够与家人和朋友一同分享了！分享应用有两种方式能够分享应用：第一，分享可运转的应用。在AppInventor项目中单击BuildApp（save.apktomycomputer），此操作将扩展名为apk的文件保存到电脑。将apk文件上传到web上，让其他人能够下载并安装。需要重申的是，设施的安全设置中“未知根源”一项必定选中，才能安装根源于AndroidMarket之外的应用。第二，与其他AppInventor开发者共享应用的代码块：点击ProjectMyProjects，选中要共享的应用（本例中是HelloPurr），选择project→Exportselectedproject(.aia)tomycomputer。此操作将扩展名为aia的文件（HelloPurr.aia）保存到电脑上默认的下载文件夹中。能够用电子邮件把文件发给其他人，他们翻开AppInventor，选择Project→Importproject，并选择.aia文件。这样，使用者获得了该应用的完满备份，对此备份的任何改正，都不会影响原有版本。改良此刻，应用已经达成，并能够随时运转它（或许还可以够下载与人分享），或许还会感觉什么地方有些欠缺。来看看下面的问题，并思虑如何解决它们。跟着学习的进展你会发现，平常是先创立一个应用，今后想法改良、完满它，并从头回到程序中来实现你的新想法。不用担忧，这很好，这正是一名优异开发者的必经之路！当摇摆设施时，猫的喊声听起来有点儿奇异，忧若有回声。这是由于在1秒钟内，加快度传感器多次触发摇动事件，所以猫喊声是重叠的。你会发现Sound组件有一个属性Minimuminterval（最小间隔），它决定了两次声音播放之间的时间间隔。目前设置为400毫秒（约半秒钟），这个间隔小于单次猫叫的连续时间（500毫秒）。经过改变播放的最小间隔，能够改变声音的重叠。假如你带着安装了应用的手机各处走动，每当你突然挪动时，设施就会发出猫喊声，这可能让你感觉难堪。平常Android应用会保持在运转状态，即使你不去管它们，应用程序与加快度传感器之间的通信也不会中断，所以猫喊声也会接踵传来。要想真实退出程序，需要呼出HelloPurr应用并按下设施上的菜单按钮，会呼出两个选项，其中stopthisapplication用来停止并完满封闭应用。小结以下是本章中涵盖的内容：创立应用的过程：在组件设计器中选择组件，并在块编写器中设定它们的行为——做什么及何时做；有些组件是可见的，有些则不可以见。可见组件会出此刻应用的用户界面中；不可以见组件履行像播放声音这类的事情；经过在块编写器中组装“块”来定义组件的行为。先拖出一个像whenButton1.doClick这样的事件办理程序，此后将callSound.Play这样的命令块嵌入其中。这样，当用户点击该按钮时，块Button1.Click中的所有块（命令）都将被履行；有些块（命令）需要附加特定信息才能起作用。比方震动就必定设定振动的毫秒数。这些值被称为参数。数字块用来表示数字。你能够将这些数字块插入到需要参数的命令块中。AppInventor供应传感器组件，加快度传感器(AccelerometerSensor)能够检测到设施的挪动。你能够将创立达成的应用打包并下载得手机上，它们将独立于AppInventor而运转。第2章油漆桶本章介绍Canvas组件，用它来生成简单的二维（2D）图形，目标是创立一个PaintPot（油漆桶）应用，让用户在手机屏幕上绘制图画，并让用户用手机给自己拍照，此后在自己的照片上绘图。回首历史，早在20世纪70年月，PaintPot是最早运转在个人电脑上的应用之一，目的是为了证明个人电脑的潜力。那时候，开发这样一款简单的绘图应用是一项极其复杂的工作，而且绘图见效也略显粗拙。但此刻，使用AppInventor，任何人都能够迅速地创立一个风趣的绘图应用，这也是创立2D游戏的起点。如图2-1，油漆桶应用将实现以下目标：用手指点取颜色并绘图；用手指在手机屏幕上画线；用手指触碰手机屏幕画圆点；点击按钮来擦净屏幕；点击按钮来改变绘制圆点的大小；用相机拍摄照片，并在照片上绘图。图2-1油漆桶应用学习内容本章涵盖了以下内容：使用Canvas组件来绘制图画；办理屏幕上的触摸及拖拽事件；使用arrangement组件来控制屏幕的外观；使用带有参数的事件办理程序；定义变量，来保存某些状态，如用户绘制的圆点的大小。准备开始第一检查测试用的Android设施能否已经为使用AppInventor做好了准备：Android设施中已经安装了“AI伴侣”；手机的WiFi连结已经翻开；再接见AppInventor网站。新建项目“PaintPot，”点击“Connect->AICompanion”，并依照提示操作，连结测试设施。在正式开始以前，在组件设计器右侧的“属性”面板中，将“Screen1的”“Title属”性改正为“油漆桶”。在测试设施上能够马上看到这一改变：应用的标题栏将显示“油漆桶”。这样做能否会混杂了项目名称与屏幕标题呢(在英文版书中，将Title改为“PaintPot，”与项目同名，所以才有此疑问，对中文读者来说不存在这个疑问。——译者注)？别担忧！在AppInventor中有三个特别重要名称：项目名称：同时也是应用宣告时所使用的名称。提示：想改正项目名称，能够点击Project->Saveprojectas，能够将原有项目恩赐新的名称，同时原有项目依旧得以保存；组件名称：一般的组件名称都能够改正，但Screen1例外，在目前版本中不可以够改正它的名称；屏幕标题：出此刻设施的标题栏中，是Screen组件的Title属性，默认值是Screen1，如第一章HelloPurr中所见，能够任意改正它，如我们刚才将其改为“油漆桶”。设计组件创立“油漆桶”应用需要以下组件：三个Button组件：用来选择画笔颜色：红、蓝或绿，放在HorizontalArrangement组件中；一个Button组件用来充任橡皮；其他两个Button组件用来改变画笔的大小；一个Canvas组件，充任画布。Canvas拥有BackgroundImage属性，我们将其设置为第一章HelloPurr中的kitty.png，稍后还可以够够将背景图片设置为用户拍摄的照片。创立颜色按钮第一依照以下提示创立三个颜色按钮：1.拖一个Button组件到预览窗口，设置其Text属性为“红”，BackgroundColor属性设为红色；在组件列表中选中Button1（可能已经被选中），点击Rename按钮将组件名称改为RedButton。注意组件名称中不一样样意有空格，所以平常将组件名称中每个单词的首字母大写。3.相同，创立其他两个按钮，分别命名为BlueButton和GreenButton，将它们垂直地放在RedButton下方。比较图2-2，检查一下你的操作结果。图2-2创立了3个按钮的预览窗口注意：在项目中，建议为组建起一个存心义的名称，而不是像第一章那样采用默认名称。存心义的名称增加了程序的可读性，特别是在切换到块编写器时，将有助于区分不一样样的组件。本书中，采用惯用的骆驼命名法（如RedButton），即多单词无空格的首字母大写命名方式。测试：假如你还没有点击“Connect来”连结测试设施，那么做好连结，此后检查一下应用在设施（假如已经连结）上的表现。使用Arrangement组件改良布局此刻三个按钮排成一列纵队，我们希望它们能排成一行，如图2-3所示，使用HorizontalArrangement组件来实现组件的水平排列：1.在组件面板的Layout类中拖出HorizontalArrangement组件，放在按钮下方；2.在属性面板中，设置HorizontalArrangement的width属性为“FillParent（充”满父容器），以便在水平方向上占满整个屏幕；将三个按钮挪动到HorizontalArrangement中。注意，当你拖拽按钮时，会看到一条蓝色竖线，提示按钮将会被搁置在什么地方。图2-3在水平布局组件内的三个按钮此时查察组件列表，你会发现三个按钮缩进排列在HorizontalArrangement项下，以显示它们此刻是次一级的组件。同时注意到所有组件都缩进排在Screen1项下。测试：在测试设施的屏幕上，你会看到三个按钮排列成一行，尽管看起来与预览窗口中略有不一样样。如，在预览窗口中可见的HorizontalArrangement周围的轮廓线，在测试设施上则不可以见。平常采用布局组件来创立简单的垂直、水平或表格布局，也能够经过逐级插入（或嵌套）布局组件来创立更为复杂的布局。增加Canvas（画布）Canvas像一块画布，用户能够在上面绘画（画圆、画等）。增加一个Canvas，并用第一章中的kitty.png作它的背景图片（设置BackgroundImage属性），详尽步骤以下：翻开组件面板中的DrawingandAmination（绘画与动画）类，将Canvas组件拖到预览窗口中，更名为DrawingCanvas，Width设为“Fillparent，Height”设为300pixels；假如你已经达成了第一章的课程，那么文件kitty.png已经下载；假如没有，请在这里下载kitty.png。3.将DrawingCanvas的BackgroundImage设置为kitty.png：在设计器的属性面板中，BackgroundImage的默认值为None，点击None及UploadFile来增加kitty.png文件；将DrawingCanvas的PaintColor属性设置为red，以便当用户刚启动应用但还没有点击颜色按钮时，画笔为红色。比较图2-4检查一下你的操作。图2-4背景图片设为kitty.png的DrawingCanvas组件设置底部按钮及照相机组件从组件面板中拖出第二个HorizontalArrangement，放在canvas下方，再拖两个Button并置于屏幕底部的HorizontalArrangement中；将第一个按钮更名为TakePictureButton，Text属性设为“拍照”；第二个按钮更名为WipeButton，Text属性设为“除掉”；再拖两个Button组件到HorizontalArrangement中，放在“除掉”按钮后边；两个Button分别命名为BigButton、SmallButton，Text属性分别设为“大圆”、“小圆”；从组件的Media类中拖出一个Camera组件放在预览窗口中，它将落在非可视组件区。到此为止，应用外观已经设置达成，如图2-5所示。图2-5油漆桶应用的完满用户界面测试：在设施上检查一下应用，猫的图片能否在顶部的一行按钮的下方？底部的按钮能否正常显示？为组建增加行为下一步将定义组件的行为。编写一个绘画程序的难度忧如是难以想象的，但无疑AppInventor已经肩负了大部分深重的工作：这里有易于使用的块语言，不但可以办理用户的触摸及拖拽事件，也能够实现绘画及拍照功能。Canvas组件拥有Touched及Dragged事件，你能够针对DrawingCanvas.Touched（触碰）事件编程，并调用DrawingCanvas.DrawCircle（画圆）程序；也能够对DrawingCanvas.Dragged（拖拽）事件编程来调用DrawingCanvas.DrawLine（画线）程序。此后对按钮编程，来设置DrawingCanvas.PaintColor（画笔颜色）属性、除掉DrawingCanvas，以及将DrawingCanvas的背景图片改正为照相机拍摄的图片。增加触摸事件，绘制一个圆点第一设置触碰行为：当用户触碰DrawingCanvas时，在接触点绘制一个圆点：图2-6带有接触点地点信息的Toughed事件在块编写器中，翻开DrawingCanvas抽屉拖出DrawingCanvas.Touched块，该块有三个参数x、y及touchedSprite，如图2-6所示。这些参数供应了接触点的地点信息；提示：在第一章HelloPurr应用中已经熟悉了Button.Click事件，但对Canvas事件还很陌生。Button.Click事件的发生很简单，不附加任何其他信息；但有些事件则否则，它们附加了与事件相关的“参数”信息。DrawingCanvas.Touched事件中的x、y代表接触点在DrawingCanvas中的坐标，而touchedSprite代表接触点所碰到的DrawingCanvas中的对象（在AppInventor中称作sprite—精灵），但在第三章以前我们不会用到它。我们将利用接触点的xy坐标来绘制圆点。2.从DrawingCanvas抽屉中拖出DrawingCanvas.DrawCircle命令块，放在DrawingCanvas.Touched事件办理程序中，如图2-7所示；图2-7用户触摸画布时，应用绘制一个圆点在DrawingCanvas.DrawCircle块的右侧有三个插槽，需要填入三个参数：x、y、r。其中x、y用于指定绘制圆形的地点，r用于指定圆的半径。在屏幕左下角带痛惜号的黄色警示显示数字“1，”表示需要填满这些插槽。从图中看到，有两组xy，这里要区分清楚：DrawingCanvas.Touched事件中的xy表示接触点地点（已知）；而DrawingCanvas.DrawCircle命令块的xy插槽，用于设定绘制圆形的地点（待定）。我们恰巧要在用户的接触点绘制圆形，所以DrawingCanvas.Touched事件中的xy值，能够作为DrawingCanvas.DrawCircle的x、y参数，插入到插槽中。提示：能够从“when”块中提取事件的参数值，将鼠标悬停在参数上，将呼出“get”及“set块”。能够将“getx块”拖出并插到x插槽中，作为DrawCircle命令的x值。如图2-8所示。图2-8读取事件参数：从DrawingCanvas.Touched事件中拖出“getx块”将鼠标悬停在x、y参数上能够唤出“get块”，将“get块”插入到DrawingCanvas.DrawCircle的插槽中，如图2-8、2-9所示；图2-9已经设定了圆的地点（x,y），还没有指定圆的大小图2-10当用户触碰DrawingCanvas时，将在(x,y)点绘制一个半径为5的圆形下面来设定圆的半径r。长度的单位是pixel（像素），是屏幕上能够绘制的最小的点。设r=5：点击屏幕的空白地区，输入5此后回车（自动创立数字块“5）”并将其插入插槽r中。再看屏幕左下角的黄色三角形，数字由1变成0，由于所有插槽都被填满了。图2-10显示了DrawingCanvas.Touched事件办理程序最终的样子。提示：在块编写器中输入5此后回车，这类操作叫做输入块（typeblocking）。块编写器会依照你输入的字符，显示与该字符相般配的一系列块；假如输入的是数字，那么将创立一个数字块。测试：看看测试设施上都有什么。触碰DrawingCanvas，手指碰过的地方会留下一个圆点。假如在设计器中将DrawingCanvas.PaintColor属性设置为红色，那么圆点也是红色（否则应当是默认的黑色）。增加画线的拖拽事件下面增加拖拽事件办理程序，先看一下触碰（Toughed）事件与拖拽（Dragged）事件的差异：触碰事件：手指在DrawingCanvas（画布）上放下再抬起，此间手指没有挪动。拖拽事件：手指在DrawingCanvas（画布）上放下，手指与屏幕保持接触并挪动。在绘图程序中，手指在屏幕上拖动，沿着手指挪动的路径，将绘制出一条巨大的曲线，由于这条曲线实质上由数百个渺小的线段构成：手指每次渺小的挪动，都将绘制一个渺小的线段。1.从DrawingCanvas抽屉中拖出DrawingCanvas.Dragged事件办理程序块，如图2-11所示；DrawingCanvas.Dragged事件携带了以下参数：StartX、StartY：手指开始拖动时所在的地点（整个曲线的起点）；currentX、currentY：手指的目前地点（渺小线段的终点）；prevX、prevY：手指的上一个地点（渺小线段的起点）；draggedSprite：布尔值，假如用户直接拖动一个图片，则其值为真。本章不会用到这个参数。图2-11比起Toughed事件，Dragged事件携带了更多参数2.从DrawingCanvas抽屉中拖出DrawingCanvas.DrawLine块，插入DrawingCanvas.Dragged块中，如图2-12所示。图2-12增加画线功能DrawingCanvas.DrawLine块有四个参数，两点确定一线：设（X1，Y1）为起点，（X2，Y2）为终点。你能确定每个参数中需要插入什么值吗？记着，当手指在DrawingCanvas上拖动时，拖动事件将被调用很多次：在应用中，手指的每次挪动都会绘制出一个渺小线段，从（Prevx,prevy）到（currentX,currentY）。此刻把它们填入DrawingCanvas.DrawLine块。拖出“get块”来充任画线的参数。将getprevX与getprevY分别插入到x1和y1插槽；而getcurrentX与getcurrentY插入到x2和y2插槽，如图2-13所示。图2-13用户在屏幕上拖着手指，应用就在前一地点与目前地点之间画一条渺小线段测试：在设施上测试一试看刚才设定的行为：在屏幕上任意拖着手指，画出线段及曲线；触碰屏幕画出一个圆点。增加按钮事件办理程序应用已经实现了画线功能，但此刻只能画红线。下面增加颜色按钮的事件办理程序，用户能够改变画笔的颜色；相同设置除掉按钮WipeButton，以便用户能够除掉画面并从头开始。在块编写器中：张开左侧块的（Blocks）列表；翻开RedButton抽屉，拖出RedButton.Click块；3.翻开DrawingCanvas抽屉。拖出setDrawingCanvas.PaintColor块（可能需要转动块的列表以便在抽屉里找到它），并把它放在RedButton.Click块“do的”位置；4.翻开Colors抽屉，拖出红色块，将其插入setDrawingCanvas.PaintColor块的插槽；重复步骤2-4，设置蓝色和绿色按钮；最后设置WipeButton按钮。从WipeButton抽屉中拖出WipeButton.Click块。再从DrawingCanvas抽屉里拖出DrawingCanvas.Clear块，并将其放在WipeButton.Click块中。确认所有块显示如图2-14所示。图2-14单击颜色按钮改变DrawingCanvas的画笔颜色；单击除掉按钮清空屏幕让用户摄电影AppInventor应用能够与Android设施的兴盛功能进行交互，包括相机功能。为了增加应用的兴趣性，用户能够将绘图背景设置为他们用相机拍摄的照片。Camera组件有两个要点的块：Camera.TakePicture块用来启动设施上的拍照程序；拍照达成将触发Camera.AfterPicture事件。在Camera.AfterPicture事件办理程序中，能够将刚才拍摄的照片设置为DrawingCanvas.BackgroundImage。翻开TakePictureButton抽屉并拖出TakePictureButton.Click事件办理程序；2.从Camera1抽屉拖出Camera1.TakePicture放在TakePictureButton.Click事件办理程序中；3.从Camera1的抽屉中拖出Camera1.AfterPicture事件办理程序；4.从DrawingCanvas抽屉拖出setDrawingCanvas.BackgroundImage块放在Camera1.AfterPicture事件办理程序中；Camera1.AfterPicture事件有一个名为image的参数，代表刚才拍摄的照片，将从Camera1.AfterPicture块中获得的getimage块插入DrawingCanvas.BackgroundImage块。所有的块如图2-15所示。图2-15拍完的照片被设置为DrawingCanvas的背景图片测试：在设施上点击“拍照”按钮并拍摄照片，猫的图片变成了你拍的照片。你能够在自己的照片进步行绘画。（用Wolber教授的照片绘画是学生们的一大乐事，如图2-16。）（Wolber教授是本书的作者之一。）改变画笔大小图2-16带有Wolber教授涂鸦照片的PaintPot应用在DrawingCanvas上画圆点，其大小由DrawingCanvas.DrawCircle块中参数r决定。改变r值能够改变圆点的大小。试一试看将5改为10，此后在测试设施上查察结果。另一个问题是，不论开发者如何设置参数r，用户都只能用这个固定的尺寸。如何让用户来改变圆点的大小呢？为此我们来改正程序：当用户点击“大圆”按钮时，圆点半径设为8，当点击“小圆”时半径设为2。我们要用不一样样的半径画圆，但应用怎么知道我们要用哪个值呢？必定通知应用我们选定的值，而应用必定以某种方式记着（或保存）这个值，这样才能在需要的时候使用它。以前我们所使用的值，要么设定为属性（如画笔颜色），要么用固定的数字块（如画笔大小），此刻应用需要记着一些属性之外的、不是固定不变的东西，这就需要定义一个变量。变量是一个储蓄单元，能够把它想象成一个容器，里面储蓄着可变的数据，如画笔的大小（相关变量的详尽信息，请拜会AppInventor指南第16章）。让我们先来定义一个变量dotSize：1.在块编写器中，从Variables（变量）抽屉中拖出一个initializeglobalnameto块。将“name”改为“dotSize；”2.请注意，initializeglobaldotSizeto块有一个开放的插槽，能够在这里设定变量的初始值，或许说是应用启动时的默认值（编程术语称为“初始化变量”）。在本应用中，用数字块2来初始化变量dotSize，（创立块“2的”方法有两种：在空白区直接输入“2然”后回车；或从Math抽屉中拖出“0块”，将0改为2。）将其插到initializeglobaldotSizeto块的插槽中，如图2-17所示。图2-17将dotSize变量的初始值设为2使用变量下一步，我们要改正DrawingCanvas.Touched事件办理程序，将其中DrawingCanvas.DrawCircle块的参数r的固定值用变量dotSize来代替。（我们先将dotSize的初始值设定为“固定”的2，但稍后我们将改变dotSize的值，并同时改变画笔的大小。）1.从initializeglobaldotSizeto块中拖出一个getglobaldotSize块，用它来供应变量的值；转到DrawingCanvas.Touched事件办理程序，将数字块“5拖”出插槽并扔进垃圾桶，用getglobaldotSize块来代替（见图2-18）。当用户触摸到DrawingCanvas时，应用将依照dotSize的大小来确定圆点的半径。图2-18画笔的大小取决于变量dotSize中保存的值改正变量值此刻变量魔法登场，变量dotSize赞同用户选择画笔的大小，而事件办理程序也将以dotSize为半径来画圆。经过设计SmallButton.Click和BigButton.Click的事件办理程序来实现此功能：从SmallButton抽屉中拖出SmallButton.Click事件办理程序；再从Variables抽屉中拖出一个“set块”，下拉选择globaldotSize，并将其插入SmallButton.Click块；最后，创立一个数字块“2，”并将其插入setglobaldotSize块。创立另一个近似的BigButton.Click事件办理程序，设置画笔大小为8。这两个事件办理程序显示在块编写器中，如图2-19所示。提示：get/setglobaldotSize之中的“global（”全局）指的是该变量合用于程序中所有的事件办理程序（全局）。与global相对的是“local（”局部）变量，合用于程序的特定部分；AppInventor2中增加了此项功能，第12章首次使用。图2-19点击SmallButton及BigButton按钮改变画笔大小，今后将以该尺寸绘制图形测试：试一试单击“大圆”、“小圆”按钮，此后在DrawingCanvas上触碰，所绘圆点的大小能否不一样样？画线呢？线没有变化，由于只有DrawingCanvas.DrawCircle块使用了变量dotSize。在此基础上，考虑改正块的设置，以使画笔的大小，对画线也相同有效。注意：DrawingCanvas有一个“LineWidth（线宽）”的属性。油漆桶的完满应用图2-20中显示了完满的油漆桶应用。图2-20油漆桶应用中块的最后设置改良能够考虑做以下改良：用户界面中没有显示目前的状态信息（如画笔大小或颜色），只能经过绘图来得悉这些信息。改正应用，向用户显示目前的状态信息；2.让用户在TextBox组件内输入画笔的尺寸，这样一来，除了2和8之外，他还能够将其改正为其他数值。相关TextBox组件的详尽信息，请参阅第4章。小结本章涵盖了以下内容：DrawingCanvas组件：用于在其中绘画，也能够感知触摸及拖动事件，能够利用这些事件来实现绘图功能；使用布局组件（HorizontalAarrangement），使多个组件的布局条理化，而不是摞在一同；有些事件办理程序附加了与事件相关的信息，比方Toughed事件中附加了触摸点的坐标，这些信息用参数来表示。在使用带参数的事件办理程序时，AppInventor以块的方式生成“get及”“set项”，来获得这些参数的引用；创立变量能够使用Variables抽屉中的initializeglobalnameto块，变量能够让应用记着那些没有被储蓄成组件属性的信息，如画笔的大小；对于定义的每一个变量，AppInventor供应了变量的读写方法：getglobalvariable用来获得变量的值（读），而setglobalvariable用来设置/改正变量的值（写）。能够从变量初始化块的变量名中拖出“get或”“set块”。本章介绍了DrawingCanvas组件如何应用于绘画程序。也能够用它来编写某些2D游戏中的动画，更多信息请拜会第5章“瓢虫快跑”游戏，以及第17章中对于动画的谈论。第12章遥控机器人本章将创立一个应用，将Android手机变成LEGOMINDSTORMSNXT机器人的遥控器。应用顶用按钮来控制机器人前后挪动、左右转动和停止，假如机器人碰到阻拦物，它还会自动停止。应用中使用拥有蓝牙功能的手机与机器人通信。LEGOMINDSTORMS机器人不但是玩具，更是教具。After-schoolprogram使用机器人来教小学和初中的孩子们掌握解决问题的能力，并引导他们认识工程和计算机编程。NXT机器人也用于FIRSTLEGOLeague机器人竞赛，这项竞赛赞同9-14岁的孩子参加。NXT可编程机器人套件中有一个“NXT智能积木”主单元，它能够控制三个电机及四个输入传感器。你能够用乐高的结构元件、齿轮、车轮、电机和传感器来组装机器人。该套件自带的软件能够对机器人进行编程，但此刻我们将用AppInventor来创立Android应用，经过蓝牙连结来控制NXT机器人。应用中参加协作的机器人拥有超声波传感器以及用于挪动的车轮，如Shooterbot机器人。图中所示，这款机器人平常是人们利用LEGOMINDSTORMSNXT2.0套件建筑的第一个机器人。它的左车轮与输出端口C相连，右车轮与输出端口B相连，颜色传感器与输入端口3相连，超声波传感器与输入端口4相连。学习要点本章用到了以下组件和看法：BluetoothClient组件：用于建立Android设施与NXT机器人之间的蓝牙连结；ListPicker组件：为用户供应机器人选择列表，选中后开始建立机器人到Android的连结；NxtDrive组件：用于驱动机器人的轮子；NxtUltrasonicSensor组件：利用机器人的超声波传感器探测阻拦物；Notifier组件：显示错误信息。准备开始本章的应用需要Android2.0或以上版本。其他，出于安全原因，蓝牙设施必定第一配对才能互相连通。在开始建立应用以前，需要按以下步骤使Android设施与NXT机器人配对：1.在NXT上单击向右箭头，直到显示“Bluetooth，”此后按下橙色方块；点击向右的箭头，直到显示“Visibility，此后”按下橙色方块；假如“Visibility值已设”定为可见，连续步骤4；假如不可以见，请单击向左或向右箭头设置其值为可见；在Android设施上，进入设置→无线与网络；保证翻开蓝牙功能；点击“蓝牙”；在“可用设施”中查找名为“NXT”的设施；假如机器人名字下显示“已配对但未连结”字样，则配对成功！否则，连续履行步骤9；假如机器人名字下显示“与此设施配对”，则点击它；10.在NXT上，要求输入密码，按下橙色方块接受1234为密码；在Android上，也会要求输入PIN码，输入1234，此后按确定；此刻应当看到“已配对但未连结。”，说明配对成功！注意：假如你以前修悔过机器人的名字，则找寻机器人此刻的名字，而非“NXT”。连结到AppInventor网站，创立新项目“NXTRemoteControl”，将设置屏幕的标题为“遥控机器人”，并连结测试手机。设计组件在这个应用中，我们需要分别创立可见组件及不可以见组件，并分别定义它们的行为。不可以见组件在创立用户界面以前，先来创立表12-1中的不可以见组件，如图12-1所示，用来控制NXT。表表12-1NXT“机器人遥控”应用中的不可以见组件组件种类面板中分组命名作用BluetoothClientConnectivityBluetoothClient1建立Android与NXT的连结