|
OperaMasks 如何使用自定义皮肤
1. 概述由于有了<w:chooseSkin>这个组件，在OperaMasks中切换皮肤是一件非常简单的事情。但是官方提供的皮肤毕竟有限， 当有了一套自己的皮肤的时候应该如何才能使用呢，换句话说如何才能让<w:chooseSkin>发现我这套皮肤呢，这些都是接下来要介绍的内容。 一套皮肤其实是由许许多多CSS文件和图片组成的，切换皮肤其实就是下载不同资源然后进行替换而已。要自己开发一套完整的皮肤并不是一件容易的事情， 因为这么多的组件使用到的CSS样式和图片少说也有上百种。好在Ext已经为我们提供了不少精美的皮肤。 我们可以上Ext的官网去下载。 下载的压缩包解压后应该包含两个目录：css和images。如下图：  Figure 1. Ext 皮肤包目录结构 新建Java工程extSkin，按下图所示目录结构把皮肤资源导入META-INF目录下。新建skins.xml文件，把这个文件放在和skin文件夹在同一个目录下。需要注意的是把css和images目录拷贝到skin下之后，需要看看css文件里引用图片的路径是否和现在的路径一致。  Figure 2. 皮肤资源导入工程后的目录结构 然后配置skins.xml文件。skins.xml的内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<skins>
<skin id="black" file="/ext2/skin/css/xtheme-black.css">
<displayName><![CDATA[Black]]></displayName>
<displayName locale="zh_CN"><![CDATA[Black]]></displayName>
<authorName><![CDATA[Ext JS - JavaScript Library]]></authorName>
<authorEmail><![CDATA[jack.slocum@yahoo.com]]></authorEmail>
</skin>
... ...
</skins>
最后将工程打成Jar包放在应用的lib目录下即可 测试页面代码：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "" "">
<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
xmlns:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax"
renderKitId="AJAX">
<w:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</w:head>
<w:page title="Insert title here">
<layout:borderLayout fitToBody="true">
<layout:panel title="North" region="north" height="70">
<w:form>
<h:outputLabel value="Choose Skin: " style="font-weight:bold" />
<w:chooseSkin cookie="skin">
<ajax:action event="onchange" />
</w:chooseSkin>
</w:form>
</layout:panel>
<layout:panel title="Center" region="center" style="height:100%;width:100%" split="true">
<layout:tabLayout width="500" height="300" id="sTab" toolBarPosition="bottom">
<layout:panel title="Tab1">Tab1</layout:panel>
<layout:panel title="Tab2">Tab2</layout:panel>
<layout:panel title="Tab3">Tab3</layout:panel>
</layout:tabLayout>
<w:toolBar target="sTab" style="">
<w:button value="Submit" />
</w:toolBar>
</layout:panel>
<layout:panel region="south" title="South" height="70">
<p>This is South</p>
</layout:panel>
<layout:panel region="west" title="West" collapsible="true">
<p>This is West</p>
</layout:panel>
</layout:borderLayout>
</w:page>
</f:view>
测试效果图如下：  Figure 3. 使用皮肤资源效果图： 虽然说自己开发一套完整的皮肤需要花不少时间，但是借助一些工具和技巧，做起来还是可以得心应手的。 下面将以一个简单的例子来说明皮肤的制作过程。这里我们需要借助于FireFox的插件FireBug来获取页面元素的class属性值。 我们的需求是修改borderLayout的展示风格。 通过FireBug的Inspect（查看）功能可以发现borderLayout的header的样式是.x-panel-header，如下图：  Figure 4. .x-panel-header样式 修改background-image和border样式就可以达到我们的目的， 因此，先在extSkin的工程里面新建自己的样式mystyle.css和自己的图片目录mysyle： 接着在mystyle.css中复写x-panel-header样式，并在images的mystyle文件夹中添加自己的背景图片，然后在skins.xml里加上：
<skin id="mySkin" file="/ext2/skin/css/mystyle.css">
<displayName><![CDATA[Mystyle]]></displayName>
<displayName locale="zh_CN"><![CDATA[Mystyle]]></displayName>
<authorName><![CDATA[Ext JS - JavaScript Library]]></authorName>
<authorEmail><![CDATA[licongping@yahoo.com]]></authorEmail>
</skin>
最后重新打包并放在应用的lib目录下，效果如下：  Figure 6. 自定义皮肤展现效果图 我们还可以在mystyle.css里复写更多的样式，如x-panel-body可以设置panel的border样式，x-toolbar可以设置toolbar的背景图片等等。以此类推，我们就可以制作出自己的一套皮肤了。 所有评论
目前暂无评论
共0页
您还没有登录，请登录后发表评论
|
相关文章
|
