发表日期: 2021-04-09 11:08:15 浏览次数:195
华容小程序制作【华容企业邮箱】华容网站外包、华容微信商城开发、华容网店美工、华容淘宝设计
华容,在我国,表示三个地区都有“华容”的简称。湖南省岳阳市华容县、湖北省鄂州市华容区、湖北省鄂州市华容区华容镇。
“掌上书店”应用的用户界面比较简单:一个用于输入搜索词或ISBN的文本框,一个用于启动搜索(关键字或ISBN)的按钮,另一个启动扫描书的条码的按钮(稍后会用到),一个搜索结果标题的label,另一个显示搜索结果的label,还有两个非可视组件:TinyWebDB和条码扫描仪。表13-1列出了图13-5中所示的所有组件,对照检查你的结果。

图 13-5 组件设计器中“亚马逊掌上书店”的用户界面
表13-1 “亚马逊掌上书店”应用的组件列表
组件类型 | 面板中分组 | 命名 | 作用 |
|---|---|---|---|
Textbox | User Interface | SearchTextBox | 用户在此输入关键字或ISBN |
HorizontalArrangement | Layout | HorizontalArrangement1 | 将按钮放置在同一行内 |
Button | User Interface | SearchButton | 点击启动关键字或ISBN搜索 |
Button | User Interface | ScanButton | 点击开始扫描书的ISBN条码 |
Label | User Interface | Label1 | 搜索结果的标题 |
Label | User Interface | ResultLabel | 显示搜索结果 |
TinyWebDB | Storage | TinyWebDB1 | 与Amazon.com交互 |
BarcodeScanner | Sensors | BarcodeScanner1 | 扫描条码 |
组件的属性设置如下:
1. 设置SearchTextBox的Hint属性为“输入关键字或ISBN”;
2. 设置Button及Label的Text属性:如图13-5所示;
3. 设置TinyWebDB组件的serviceURL属性为http://aiamazonapi.appspot.com/ 。
在块编辑器中设定下列行为:
按关键字搜索:用户输入关键字并点击SearchButton来调用Amazon搜索。通过调用TinyWebDB.GetValue来实现这一点;
按ISBN搜索:用户输入一个ISBN并点击SearchButton;
条码扫描:用户点击ScanButton启动扫描仪,扫描ISBN完成后将启动Amazon搜索;
处理图书列表:首先采用默认方式显示Amazon返回的数据。稍后再加以修改,采用有组织的方式来显示每本书的书名、售价及ISBN。
用户点击SearchButton时,从SearchTextbox中获取搜索内容,并以此为tag,使用TinyWebDB.GetValue块向Amazon API请求搜索数据。
当Amazon返回结果时,将触发TinyWebDB.GotValue事件。现在用ResultsLabel直接显示返回结果,如图13-6所示,当见到这些真实的数据后,可以采取更为复杂的方式来显示数据。

图 13-6 向API发送搜索请求,并将结果显示在ResultsLabel中
当点击SearchButton时,TinyWebDB1.GetValue开始向API发出请求。随请求一同发送的tag正是用户在 SearchTextBox中输入的内容。
从第十章“出题”应用中得知,TinyWebDB.GetValue发出的请求并不能立即获得结果,而是在收到从API返回的数据时,触发TinyWebDB1.GotValue事件。在GotValue块中,首先检查返回值是否为列表,如果是,则数据被写入ResultsLabel。(如果Amazon API离线或搜索的关键字不存在,将没有数据返回。)再输入ISBN“1118717376”试试看。

图 13-7 搜索“Android”返回的结果
测试:在输入框中输入搜索词,如“Android”,然后点击“搜索”按钮。你将得到类似于图13-7的结果。注意:手机上返回的结果与网页上的结果略有不同:方括号变成了圆括号。(这个界面看起来很糟糕,稍后我们会处理。)