Oracle ADF中使用自定义css实现文字倒立 - oracle soa weblogic porlet - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Oracle SOA > 正文

Oracle ADF中使用自定义css实现文字倒立

来源: 阅读:

需求:如果在我们的系统中要实现一个打印功能,它类似于会议上每个嘉宾面前折叠树立的名片,要制作这样的名片,需要在一张纸上实现文字的倒立功能。 

oracle adf有自己的skins,这包括一套images图片,和一些css样式,如果我们想改变oracle adf框架原有的样式时,该怎么办呢?让我们来分析一下: 

1、在jspx文件里直接加入css引用不太现实,因为里面根本不支持css引用的标签嵌入。 

2、直接使用jsp,在jsp中使用css,这种方法经过测试可行。 

那么,根据分析1,我们是否也可用实现css的引用呢,其实oracle adf有自己的css引用机制,我们可用按照下面步骤进行自定义css(当然,你的css中用到图片,你还需将图片也拷贝到你的项目中) 

1、在项目里创建public_html\skins\javaeduSkin\javaedu.css,并在其中加入如下css内容: 

Java代码  收藏代码
  1. .upsideDown{  
  2.      filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=2);  /* IE6,IE7 */    
  3.      ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE8 */    
  4.      -moz-transform: rotate(-180deg);  /* FF3.5+ */    
  5.      -o-transform: rotate(-180deg);  /* Opera 10.5 */    
  6.      -webkit-transform: rotate(-180deg);  /* Safari 3.1+, Chrome */    
  7.      position: absolute;    
  8.     font-size:100px; text-align:center;   
  9. }  



2、在WEB-INF下创建trinidad-skins.xml,在其中加入如下代码: 

Java代码  收藏代码
  1. <skins xmlns="http://myfaces.apache.org/trinidad/skin">  
  2.     <skin>  
  3.         <id>javaedu.desktop</id>  
  4.         <family>javaeduSkin</family>  
  5.         <extends>blafplus-rich.desktop</extends>  
  6.         <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>  
  7.         <style-sheet-name>skins/javaeduSkin/javaedu.css</style-sheet-name>  
  8.     </skin>  
  9. </skins>  


3、在WEB-INF下创建trinidad-config.xml,在其中加入如下代码: 

Java代码  收藏代码
  1. <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">  
  2.   <skin-family>javaeduSkin</skin-family>  
  3. </trinidad-config>  


3、创建public_html\pages\javaedu-font.jspx,其中重点内容如下: 

Java代码  收藏代码
  1. <af:panelSplitter id="ps1" orientation="vertical" splitterPosition="300"  
  2.                   collapsed="false" disabled="true"  
  3.                   inlineStyle="margin-top:50px;">  
  4.   <f:facet name="first">  
  5.     <af:outputText value="redhacker.iteye.com" id="otww3" styleClass="upsideDown"/>  
  6.   </f:facet>  
  7.   <f:facet name="second">  
  8.     <af:outputText value="redhacker.iteye.com" id="ot3"  
  9.                    inlineStyle="font-size:100px; text-align:center;"/>  
  10.   </f:facet>  
  11. </af:panelSplitter>  


其中,styleClass="upsideDown"就是引用了我们自己定义的css。 

4、将javaedu-font.jspx拖入adfc-config.xml中,产生一个view组件,如下图: 

 


5、通过http://127.0.0.1:7101/Demo-zcUI-context-root/faces/javaedu-font,将可用预览自动的css效果,如下图:

 


关于分析2的,这里就不在累述,因为跟我们普通的使用方法是一样的,呵呵。 

补充说明:如果我们要重写oracle adf框架默认的skins,需要在javaedu.css里将所有组件的默认样式重新定义一遍。 

Tags:adf oracle css