1.派生mobl界面模块

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

module ui
mixin mobl::ui::generic

回到tipcalculator.mobl文件,现在可以把里面引用mobl::ui::generic的那句改成引用ui了。

//import mobl::ui::generic
import ui

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

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

style $baseColor = $baseColoRed

当然我们也可以使用mobl::ui::generic里的rgb函数,比如这样整个界面就变成灰的了。这里有关于具体模块内功能的描述,但是似乎文档还不太全面。

style $baseColor = rgb(100, 100, 100)

3.使用自定义css样式表

我们也可以定义新的样式变量,语法是css的扩展,据说是借鉴了scss的很多特性。
下面定义了两个新的样式变量,相信用过css的应该都能看懂。
但是有一点我没明白,为什么这些变量不再以$开头了呢?而且我换成$还编译不通过。

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);
}

现在再打开tipcalculator.mobl文件,把里面的按钮使用我们新定义的样式变量。代码如下,效果见后面的图。

		button(_("Click me"), style=myButtonStyle,
                   pushedStyle=myButtonPushedStyle, onclick={
		  alert(_("You clicked me!"));
		})

运行效果可以看这里.

相关文章

    共享到: