美化mobl应用界面

1.派生mobl界面模块

接着上次我的的”小小计算器”程序。为了修改它的界面风格,我们首先派生一个mobl的模块。
新建一个叫ui.mobl的文件,在里面输入下面两行代码。第一句的意思是新建的模块名叫ui,第二句的意思是ui模块导入所有mobl::ui::generic的内容(开始我还以为mixin是中文迷信的拼音呢!搞了半天是mix in。唉英文差害死人)。
[source lang=”js”]
module ui
mixin mobl::ui::generic
[/source]

回到tipcalculator.mobl文件,现在可以把里面引用mobl::ui::generic的那句改成引用ui了。
[source lang=”js”]
//import mobl::ui::generic
import ui
[/source]

2.使用从mobl::ui::generic导入的变量

OK,准备功能完毕。现在在ui.mobl里就可以使用或者重写mobl::ui::generic里定义的变量了。
比如mobl::ui::generic里的样式变量(样式变量都是以$开头的)$baseColor,它代表了当前界面的基础色。另外里面还定义了$baseColor,$baseColorGreen,$baseColorRed, $baseColorRedish等颜色。
为了修改当前界面的基础色,只要输入下面一句,界面基础色就变成红的了。
[source lang=”js”]
style $baseColor = $baseColoRed
[/source]

当然我们也可以使用mobl::ui::generic里的rgb函数,比如这样整个界面就变成灰的了。这里有关于具体模块内功能的描述,但是似乎文档还不太全面。
[source lang=”js”]
style $baseColor = rgb(100, 100, 100)
[/source]

3.使用自定义css样式表

我们也可以定义新的样式变量,语法是css的扩展,据说是借鉴了scss的很多特性。
下面定义了两个新的样式变量,相信用过css的应该都能看懂。
但是有一点我没明白,为什么这些变量不再以$开头了呢?而且我换成$还编译不通过。
[source lang=”js”]
style mixin myButtonStyleMixin($fromColor, $toColor) {
border: 1px solid #000;
padding: 10px;
line-height: 3em;
margin: 5px;
borderRadiusMixin(5px);
backgroundGradientMixin($fromColor, $toColor);
}

style myButtonStyle {
myButtonStyleMixin(#ddd, #bbb);
}

style myButtonPushedStyle {
myButtonStyleMixin(#aaa, #999);
}
[/source]

现在再打开tipcalculator.mobl文件,把里面的按钮使用我们新定义的样式变量。代码如下,效果见后面的图。
[source lang=”js”]
button(_("Click me"), style=myButtonStyle,
pushedStyle=myButtonPushedStyle, onclick={
alert(_("You clicked me!"));
})
[/source]

运行效果可以看这里.

leon

每天进步一点点
Close Menu