1.4.2　Designer界面设计

Designer界面设计步骤：首先，在Palette区选择所需要的控件，将其拖到Viewer区；然后，在Viewer区或Component区选中需要修改属性的组件，这时候Properties区会相应地显示被选中的组件的属性列表；最后，在Properties区对选中组件的属性进行编辑。

本章Designer界面设计思路：在屏幕上方显示一个熄灭灯泡的图案，当手指触摸它时，熄灭灯泡的图案换成点亮灯泡的图案。在屏幕下方有两个按钮，一个是“搜索蓝牙”，一个是“连接蓝牙”。大家需要事先从网上找到并下载一个熄灭灯泡的图案（light1.png）和一个点亮灯泡的图案（light2.png）。如果没有找到png格式的图案，也可以使用jpg格式的图案。

因为Button（按钮）组件既可以响应手指点击的动作，也可以显示图片，所以把一个Button控件拖入Viewer区，并将熄灭灯泡的图案显示在Button组件的表面。具体步骤如下：

1）在Palette区的User Interface栏中找到Button控件，拖到Viewer区，得到一个名为Button1的组件。

2）把Button1的Properties区中的Text内容删除，将Width栏修改为200，Heigth栏修改为300。

3）点击Components区的Screen1，然后在Properties区把Title项改为LightControl，AlignHorizontal栏修改为Center。

4）在Media区单击Upload File，将事先下载好的熄灭灯泡的图案（light1.png）和点亮灯泡的图案（light2.png）文件添加到项目中。

5）选取Button1（按钮），然后在Properties区单击Image栏，选中熄灭灯泡的图案（light1.png），如图1.19所示。

手机和主控板使用蓝牙通信，所以需要为程序加入蓝牙组件。具体步骤如下：

图1.19　Designer界面设计

1）在Palette区选择Connectivity栏，找到BluetoothClient控件；在User Interface栏找到Notifier（警示窗口）控件，将其拖到Viewer区。这两个控件是不可见的，显示在模拟器下面。

2）在Palette区选择Layout栏，找到HorizontalArrangement水平安排控件，将其拖到Viewer区。使用HorizontalArrangement控件目的是把接下来放置的按钮、ListPicker等控件排列整齐。

3）在Palette区的User Interface栏找到ListPicker控件，拖到Viewer区Horizontal-Arrangement框内，得到一个名为ListPicker1的组件；把Properties区中的Text内容修改为“搜索蓝牙”，FontSize栏改为18。

4）在Palette区的User Interface栏找到Button控件，拖到Viewer区Horizontal-Arrangement框内，得到一个名为Button2的组件。把Properties区中的Text内容修改为“连接蓝牙”，FontSize栏改为18。