讲义-2编程基础-ver31.doc

第二章 编程基础22.1 App Inventor 程序的结构与程序编写步骤22.2 App Inventor 开发环境配置42.2.1配置计算机42.2.2 配置Android手机52.3 编写第一个App Inventor 程序：会问好的企鹅62.3.1 创建一个新项目62.3.2设计组件62.3.3为组件添加行为72.3.3运行程序92.3.4 进一步改进：让企鹅说话的时候张开口102.3.5 再进一步的改进：让企鹅相应手机甩动122.4 App Inventor 程序打包成安装文件122.5 App Inventor源代码的共享132.6小结13习题14参考文献14第二章 编程基础2.1 App Inventor 程序的结构与程序编写步骤 App Inventor 程序由两部分组成:程序的组件(用户界面)和程序的行为的描述。程序的组件包括用户界面组件和不可见组件。用户界面由一组可见的组件构成。每一个组件都有自己的属性。App Inventor采用事件触发的编程方式。当一个事件发生时，程序会的调用并执行预先编写好的与该事件相对应的操作序列。比如用户点击了一个按钮，可以触发一个按钮的点击事件，程序会自动执行该点击事件中程序代码。App Inventor的事件主要分为四类：用户触发事件、初始化事件、计时器事件和外部事件。因此，App Inventor的编程过程也主要分为三个步骤：第一步：程序组件（用户界面）设计，使用App Inventor Designer（设计器） 选择应用程序所需的组件，设置组件的属性，完成程序用户界面设计。在Designer 中Viewer区主要用于展示所设计程序界面、Palette显示可以被选择的组件列表、Components区显示已被选中的程序组件列表、Media区显示程序使用的多媒体文件列表。首先，在Palette区选择所需要的组件，将其拖到Viewer区； 然后在Viewer区或Component区选中需要修改属性的组件，这时候Properties区会相应地显示被选中的组件的属性列表； 在Properties区的中选择需要修改的属性进行编辑。第二步：程序行为设计，使用App Inventor Blocks Editor (块编辑器) 定义组件的行为。在Blocks Editor的左侧列表中找到需要编写响应的组件；点击它，在它的右侧会产生该组件可以创建的事件列表类型；选择一种需要的事件块并拖到右边的工作区；为事件编写相应的内容。图2-1 App Inventor Designer(设计器) 界面图2-2 App Inventor Blocks Editor（块编辑器） 界面第三步：程序运行，使用emulator（或者使用手机）运行程序。运行程序一般有两种方法：方法一：点击Blocks Editor上方的New emulator（模拟器），然后点击Blocks Editor上方的Connect to Devices，在下来菜单中选择emulator，即可使用模拟器来运行程序。方法二：将手机用USB线连接到计算机，点击Blocks Editor上方的Connect to Devices，在下拉菜单中选择手机设备，使用手机运行程序。 图2-3 App Inventor emulator（模拟器） 界面2.2 App Inventor 开发环境配置App Inventor编程环境的配置主要包括计算机的设置和Android手机的设置两部分，详细的设置流程1如下：2.2.1配置计算机第一步：检查计算机操作系统系统是否符合App Inventor运行的要求。App Inventor编程环境运行可以在以下的操作系统中运行：Macintosh (with Intel processor): Mac OS X 10.5, 10.6 、Windows: Windows XP, Windows Vista, Windows 7和GNU/Linux: Ubuntu 8+, Debian 5+ 。第二步：检查所使用的浏览器是否符合App Inventor运行的要求。App Inventor编程环境运行可以运行在以下版本的浏览器上：Mozilla Firefox 3.6 或者更高的版本、Apple Safari 5.0或者更高的版本、Google Chrome 4.0或者更高的版本和Microsoft Internet Explorer 7或者更高的版本。第三步：安装Java环境并测试Java环境是否符合App Inventor运行的要求。Java安装包下载地址：；Java环境测试地址：/learn/setup/misc/JWSTest/AppInvJWSTest.html第四步: 安装App Inventor 软件。首先，下载App Inventor安装文件，然后，运行App Inventor安装文件，按照安装程序的指引进行操作，注意在安装的过程中不要改变软件的安装目录。App Inventor 软件下载地址：/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe（windows版本）/appinventor/installers/mac/AppInventor_Setup_v_1.1.dmg（Mac版本）/dl/appinventor/installers/linux/appinventor-setup_1.1_all.deb（Linux版本）第五步：安装Android手机驱动程序。App Inventor编程环境集成了以下型号手机的驱动程序,使用其他手机则需要另外安装相应的驱动程序:T-Mobile G1* / ADP1 、T-Mobile myTouch 3G* / Google Ion / ADP2 、Verizon Droid (not Droid X) 、Nexus One 、Nexus S。手机驱动程序安装主要有两种方法：方法1： 首先安装手机助手软件（360手机助手、91手机助手等）；然后将手机用USB线连接到计算机上，手机助手软件将自动为手机下载并安装驱动程序。方法2：下载手机驱动程序到计算机上；然后将手机用USB线连接到计算机上；在计算机上依次进入管理、设备管理器、其他设备界面，找到带感叹号的手机设备，安装已下载的驱动程序。配置及下载的相关信息请关注本课程网站的更新信息。2.2.2 配置Android手机为了让App Inventor可以访问手机，需要继续做以下设置：找到手机“设定”程序，依次进入设定/应用程序/开发, 找到“USB调试”选项，确认该选项打勾。为了让新开发的程序可以安装到手机上，需要继续做以下设置：找到手机“设定”程序，依次进入设定/应用程序, 找到“未知来源”选项，确认该选项打勾。2.3 编写第一个App Inventor 程序：会问好的企鹅学习某一语言的编程常常是从编写一个简单的小程序HelloWorld开始的，接下来本文将通过编写一个简单的手机程序，让初学者熟悉App Inventor程序编写的主要步骤，更好地理解App Inventor程序的基本结构。但将要编写的这个程序相比以往其他的HelloWorld具备更有趣的功能。本节案例参考了MIT Center for Mobile Learning学习教程中的HelloPurr1 ，并在该基础上做了改进（范例源代码及程序中所用的媒体资源通过在本课程网站下载HelloPenguin.zip文件获得）。本章节要求设计这样一个程序：在手机屏幕上显示小企鹅的形象；当用手抚摸屏幕上的小企鹅，小企鹅会和大家打招呼：“您好，我是企鹅！”。2.3.1 创建一个新项目首先，使用浏览器打开 使用谷歌账号登录系统，进入App Inventor开发环境的Designer界面；在Designer界面的左上方，选择My Projects 进入项目页面；在项目页面的左上方，选择New, 新建一个项目，并命名为“helloPenguin”。或者登录学校内部的服务器：服务器1地址为（建议学号尾数为单号的学生使用）；服务器2地址为（建议学号尾数为双号的学生使用）。2.3.2设计组件程序要显示一个企鹅的照片，并希望这个照片可以对手指触摸的动作做出反应。因为Button（按钮）组件既可以响应手指点击的动作，也可以显示图片，所以我们把一个Button组件加入到程序里，并将企鹅的照片显示在Button组件的表面。具体步骤如下：1.在Palette区的Basic栏找到button控件，拖到Viewer区，得到一个名字为Button1的组件；2. 把Button1的Properties区中的Text改为“Pet Me”， Width栏修改为Fill Parent，Heigth栏改为400；3. 点击Components区的Screen1, 然后在Properties区找到Title项，并改为“HelloPenguin”；4. 在Media区点击Add,将企鹅照片和企鹅的声音文件添加到项目中；5. 选取Button1（按钮），然后在Properties区点击Image栏，选中企鹅的照片(penguin1.jpg)。图2-4添加一个按钮组件，并显示企鹅的照片程序中的企鹅是可以发出声音的，所以需要为程序加入一个能够发声的组件。具体步骤如下：1. 在Palette区点击Media展开该栏，找到Sound组件，将其拖到Viewer区；2. 在Viewer下端的Non-visible Component区看到Sound控件；3. 然后，点击Sound控件，在Properties区找到Source栏，设置该栏为之前已经下载的企鹅的声音文件（hello1.mp3）。2.3.3为组件添加行为接下来，需要为组件添加行为，使得程序能够对一些行为（比如说触摸屏幕）做出反应（如发出声音）。在Designer界面的右上角，点击Open Blocks Editor可以进入Blocks Editor界面，开始组建行为的设计。首先，为Button1创建一个Click事件，当触摸屏幕上的企鹅的时候，Button1.Click事件会被触发。步骤如下：1.点击Block Editors界面（见图2-5）左侧的My Blocks选项卡；2.选择Buton1；3.在紧靠的Button1右方的列表中选择Button1.Click，并拖曳屏幕到右边空白区域。图2-5 在Block Editor中为Button1创建一个Click事件处理器进一步，要实现让企鹅叫的功能，需要为Button1.Click事件处理器添加响应内容。步骤为：1.点击Block Editors界面左侧的My Blocks选项卡；2.选择Sound1；3.在Sound1右方的列表中选择Sound1.Play并拖曳到Button1.Click block的槽口处（见图2-6）。 以上步骤的含义是：当Button被点击，程序执行播放Sound1（企鹅声音）的操作。图2-6 编写Button1.Click事件响应的内容：播放企鹅的声音2.3.3运行程序接下来，我们要运行一下所编写的程序。运行程序有两种方式：模拟器方式和手机方式。模拟器运行方式步骤如下：1. 点击Blocks Editor上方的New emulator；2. 等屏幕上的模拟器初始化完毕（见图2-8），点击Blocks Editor上方的Connect to Devices，在下拉菜单中选择中emulator；3. 模拟器连接成功后，可以在模拟器上运行程序（图2-9）。 图2-8模拟器 图2-9 HelloPenguin程序在模拟器上运行的界面HelloPenguin程序的在模拟器上运行的界面见图2-9，当点击企鹅的时候，企鹅会向大家问好。如果选择用手机运行程序，需要按以下的步骤进行：1.将手机用USB线连接到计算机；2.点击Blocks Editor上方的Connect to Devices，在下拉菜单中选择手机设备；3.手机设备连接成功后，可以在手机上运行程序。2.3.4 进一步改进：让企鹅说话的时候张开口我们已经实现了一个会说您好的企鹅，但这个企鹅在说话的时候是闭着嘴的，能不能让企鹅不说话的时候闭着嘴，说话的时候张开嘴，说完话又闭上嘴呢。那就需要对上面的程序进行改进。我们需要完成以下的步骤：1. 点击企鹅时，把企鹅闭嘴的图片改为企鹅张嘴的图片：在Button1.Click的代码中加入将Button1.Image修改为penguin2.jpg，（penguin2.jpg是另一张张着嘴的企鹅图片）；2. 要实现企鹅说完话，闭上嘴，则需要在企鹅说完话后把张嘴企鹅的图片（penguin2.jpg）改为闭嘴企鹅的图片(penguin1.jpg)，但如何知道企鹅说完话了呢，可以在程序中加入一个定时器，该定时器可以用来计算企鹅说话的时间（3秒），并在企鹅说完话后触发修改图片的动作：在Designer的Palette面板的Basic栏中选中Clock, 拖曳到Viewer, 现在我们得到一个定时器Clock1；3. 设置定时器Clock1的属性：令TimerInterval的值为3000（3秒后触发动作），去掉TimerEnabled的选择框（程序刚开始的时候Clock1没有工作）；4. 产生定时器Clock1.Timer事件：在BlockEditor左侧中找到My Blocks中找到Clock1, 点击Clock1找到Clock1.Timer块，产生一个Clock1.Timer事件，这样当Clock1运行的时候，每隔TimerInterval的时间（本例子中是3000毫秒，即3秒）就会运行Clock1.Timer事件中的代码；5. 定时器Clock1计时3秒钟到（企鹅说完话了），把企鹅张嘴的图片恢复为闭嘴的图片，并终止定时器计时：在Clock1.Timer中把Button1.Image修改为penguin1.jpg（闭嘴企鹅的图片），将Clock1.TimerEnabled修改为True（见图2-10右侧代码）；6. 点击企鹅的时候（企鹅要开始说话了），启动定时器Clock1计时动作：在之前的Button1.Click的中加入这样一行操作，把Clock1.TimerEnabled修改为True（见图2-10左侧代码）。图2-10 改进后的代码：实现企鹅开口说话 图2-11 没有说话状态下闭嘴的企鹅 图2-12 说话状态下张嘴的企鹅通过改进，我们得到更逼真的程序，当企鹅没有说话的时候是闭着嘴的（见图2-11），当我们点击屏幕上的企鹅，企鹅的真正地张开嘴说话（见图2-12）。2.3.5 再进一步的改进：让企鹅相应手机甩动我们还可以更进一步实现有趣的功能：当甩一甩手机的时候，企鹅也会开口说话。要实现这个功能，需要让程序能够感受到甩动手机的动作，组件AccelerometerSensor可以方便的实现这个功能。1. 在Designer（设计器）的Palette区点击Sensors栏找到AccelerometerSensor并将其拖到Viewer区；2. 在Blocks编辑器的MyBlocks中找到AccelerometerSensor1, 打开并找到AccelerometerSensor1.Shaking,将其拖到右边空白区域，创建一个能够响应Shaking的事件处理器；3. 模仿Button1.Click中代码，编写AccelerometerSensor1.Shaking的代码。最终得到的图2-13中的结果。图2-13 添加相应手机甩动的代码2.4 App Inventor 程序打包成安装文件利用App Inventor编程环境编写的Android程序将自动地保存在网络服务器上。在App Inventor编程环境中，可以利用选择Blocks Editor中emulator（模拟器）运行程序，也可以将手机用USB线连接到计算机，并点击Blocks Editor上方的Connect to Devices，选择该手机设备，使用手机运行程序。但当断开手机与计算机的连接，程序无法保留在手机上。如果希望把所编写的程序从网络服务器下载来并安装到不同的手机上，这就需要用到介绍的程序打包功能。具体步骤如下：1.在Designer界面的右上侧，找到Package for Phone，点击下拉菜单可以看到Download to Computer和Download to Connected Phone的选项。 2.有两种选