开发教程

MSC开发教程--《MSC从入门到精通》

何为grid界面

grid界面：也就是我们常说的九宫界面。现在大多数手机都有这种界面，例如NOKIA Symbian手机中的功能列表，iphone手机的功能列表，都采用这种方式来作为界面展现，屏幕表现力强，表示功能或应用，如下【图1】所示：


图1

如上两图所示，在MSC中，grid界面分为两种情况，即9宫与4宫，9宫为单行3个元素，4宫为单行2个元素，一般界面用9宫或4宫没有特殊约定，仅个人喜好问题。
下面我们来学习一下，grid界面是如何构造的。

构造一个grid界面

我们现在要构造一个如【图1】左图中的grid界面，界面中的元素，我们定义了：移动邮件、公文流转、通讯录、通知公告、日程管理等几项功能。每一个功能都有各自的图标，点击每个图标可以打开相应的功能。

??
此grid界面代码如下：
<msc type="grid" title="数字天堂MSC" statusbar_caption="演示程序" row="2">
<item icon="mail.png" caption="移动邮件" href="mail.xml" target="_blank"/>
<item icon="workflow.png" caption="公文流转" href="workflow.xml" target="_blank"/>
<item icon="contacts.png" caption="通讯录" href="contacts.xml" target="_blank"/>
<item icon="notice.png" caption="通知公告" href="notice.xml" target="_blank"/>
<item icon="calendar.png" caption="日程管理" href="calendar.xml" target="_blank"/>
</msc>

下面，我们对这个界面的代码进行详细说明：

以上是一个grid的界面的构造，如果当功能选项太多时，整个界面就会变得太长，不太好操作，这时我们可以通过分组的方式来展现。

带分组标签的grid界面

创建分组的grid界面，我们可以使用group来创建分组：
效果如下【图2】所示：

???
图2

带group的grid界面代码如下：
<msc type="grid" title="数字天堂MSC" statusbar_caption="演示程序" row="2">
<group caption="办公">
<item icon="mail.png" caption="移动邮件" href="mail.xml" target="_blank"/>
<item icon="workflow.png" caption="公文流转" href="workflow.xml" target="_blank"/>
<item icon="contacts.png" caption="通讯录" href="contacts.xml" target="_blank"/>
<item icon="notice.png" caption="通知公告" href="notice.xml" target="_blank"/>
<item icon="calendar.png" caption="日程管理" href="calendar.xml" target="_blank"/>
</group>
<group caption="设置">
<item icon="setting.png" caption="设置" href="mail.xml" target="_blank"/>
<item icon="help.png" caption="帮助" href="workflow.xml" target="_blank"/>
<item icon="about.png" caption="关于" href="contacts.xml" target="_blank"/>
</group>
</msc>

可以看到，通过使用group进行分组可以让整个界面变得整齐明了，更易于操作和使用。

好，grid界面的构造就完成了。