第3章第一个AppInventor程序.pptxVIP

第3章 第一个App Inventor程序哈尔滨工程大学 王向辉本章学习目标：了解App Inventor的程序开发流程掌握界面编辑器的使用方法掌握模块编辑器的使用方法前言本章将详细的介绍如何开发第一个App Inventor程序——HelloAppInventor。在第二章的基础上，讲解如何使用App Inventor建立新工程、使用界面设计器开发用户界面、使用模块编辑器开发程序逻辑，以及使用手机或模拟器进行程序调试。 App Inventor程序开发流程3.1 创建新工程HelloAppInventor示例非常的简单，界面如下图所示，用户在界面上点击“请按我”按钮，则会在按钮下方出现“Hello！App Inventor”。3.1 创建新工程进入App Inventor后，在“My Projects”页面中点击“New”按钮，新建一个App Inventor工程。在弹出的对话框“New App Inventor for Android Project”中，“Project Name”后面的输入框中填入新建App Inventor工程的名称，这里填入HelloAppInventor作为工程名称，然后点击“OK”按钮完成工程创建，如右图所示。3.1 创建新工程 工程创建完成后，“Projects”中会显示刚刚创建的工程，如下图所示。工程名称“HelloAppInventor”前面有一个复选框，作用是进行批量删除操作，如果选择这个复选框，“Delete”按钮就会变为可点击的状态。3.2 界面设计 点击新创建的工程名称“HelloAppInventor”，App Inventor会打开界面设计器页面，如左图所示。这样，用户就可以开始进行HelloAppInventor的界面设计。3.2 界面设计App Inventor会自动创建一个屏幕页Screen1，可以在模块区中看到屏幕页Screen1。屏幕页是界面控件的承载体，供用户在其上面摆放各种界面控件。在属性设置区（Properties）中，将Screen1屏幕页的标题（Title）属性从“Screen1”更改为“Hello AppInventor”，设计区（Viewer）中HelloAppInventor示例的标题也会立即更改为“Hello AppInventor”，如右图所示。3.2 界面设计选取界面控件——按钮 首先，从左侧的控件库（Palette）的Basic区域中，将按钮（Button）控件拖拽到屏幕页Screen1上。屏幕页上立即会出现一个按钮，显示的内容是缺省字符串“Text for Button1”，如上图所示。3.2 界面设计控件重命名 选择按钮控件后，模块区也会出现刚刚放置的按钮控件，如右图所示，缺省的名称为“Button1”。为了在后面的逻辑设计中，可以方便的知道这些控件在界面上是做什么用的,可以将控件重命名，例如“Button1”按钮，就可以重新命名为“ButtonClickMe”或是“button_click_me”等。3.2 界面设计设置控件属性值 下面修改属性设定区中Button1按钮的属性，所有的修改内容如上表所示。修改Button1按钮的属性的目的是让按钮看起来更加醒目，且可以显示中文提示“请按我”，使用者就可以轻易的判读出这个控件是一个按钮。属性缺省值修改值BackgroundColorDefaultGreenFontSize14.030TextText for Button1请按我WidthAutomaticFill parent3.2 界面设计设置控件属性值将按钮的背景颜色修改为绿色，修改方法是将BackgroundColor属性由默认的“Default”改为“Green”，如右图所示。Width属性是控制按钮宽度的属性，缺省值是“Automatic”，另一种设置方法是“Fill parent”，这样的设置方法，按钮的宽度会填充满整个父控件，如下图所示。3.2 界面设计设置控件属性值修改Button1按钮的字体大小是通过修改FontSize属性实现的，FontSize属性的缺省值是“14.0”，将其修改为“30”即可。Text属性是控制按钮的显示内容，将其从缺省的“Text for Button1”改为“请按我”。如下图所示。3.2 界面设计设置控件属性值Button1控件的属性设置完成后，设计区中生成的HelloAppInventor界面如左图所示。因为按钮宽度属性设置为“Fill parent”，按钮的宽度达到了最大值。3.2 界面设计选取界面控件——标签接下来选取第二个控件，从控件库的Basic组件区中，将一个标签（Label）控件拖拽到屏幕页中，此时显示的文字为“Text for Label1”，如右图所示。3.2 界面设计控件属性