OFBiz UI 也可以变得很美

    －－－－－－－－－OFBiz CSS 解读－－－－－－－－－
   
    OFBiz的Entity Engine和Service Engine 被国人拿来进行疯狂的借鉴和改造。笔者不才,也进行过2次这样开发平台的打造.一次在深圳，一次在上海。
    但是OFBiz的UI层一直被视为鸡肋。每个团队都是欲除之而后快。凭心而论OFBiz的Screens.xml和Forms.xml的开发效率和灵活度都属于一个非常高的水准。
    唯一遗憾的是他的界面太丑了。太粗糙了。其实把OFBiz的界面打造成国际化流行美观界面的工作并不难。但是我们的程序员们，架构师们对于UI的敏感度太差。直接导致把Css的工作，这个看似简单的工作交给美工们去完成。可以想象接下来的事情。CSS变得又很长很长。
    鉴于此，我初浅的解读了一下OFBiz的默认themes。请各位同仁提出宝贵的意见和建议。
    我们一般基于OFBiz默认主题tomahawk进行新的themes的创建工作。

一 style.css样式表文件解读
    /* This CSS file is used for all OFBiz applications EXCEPT ecommerce. */
    /* See the "ecommain.css" file for ecommerce. */
    /* ===== Resets/Browser Normalization ===== */
jiasudu phone [phone]
全局设置

/* ===== Basic Element Styles ===== */

基本元素设置

超连接
disabled
输入框
单选
多选
提交按钮 按钮 重置按钮
上传组件
下拉组件
textarea

h1 h2 h3 th

/* ===== Legacy Styles ===== */
/* The "smallSubmit" class can be used to decorate
links (A elements) and make them similar to form's buttons. */

装饰元素为按钮式样
装饰红绿图标

A 控件 class装饰的设置
/* ===== System messages rendering ===== */
.eventMessage,.errorMessage   系统信息class设置


.mediumSubmit,.largeSubmit,.loginButton 按钮class设置



/* ===== Product Summary Styles ===== */
产品总计设置


/* ===== Product Detail Styles ===== */
产品明细设置


/* ==== Styles For Form Widgets === */
.formTableBordered {
border: 0.1em solid #999999;
width: 100%;
}

/* ==== Styles For The Html Log === */
系统log 展示设置

其他日志相关

DIV 控件设置


#column-container  设置

/* ===== New Styles ===== */
/* ================================ */
/* ===== Used to clear floats ===== */
/* ================================ */

clear设置

/* ================================= */
/* ===== Single Element Styles ===== */
/* ================================= */
.alert 设置


.hidden 设置

.label 设置

.required必填设置
.tooltip 提示设置

.visible 可视

/* ================================== */
/* ===== Used to align elements ===== */
/* ================================== */
.align-float 右浮动 系统默认应该是左边依次排列

.align-text 文本右对齐 系统默认应该都是左对齐

.align-top 文本上对齐 系统默认应该是上下居中

.centered 文本左右居中对齐

/* ==================================== */
/* ===== Masthead (Header) Styles ===== */
/* ==================================== */
头部设置 完全交给美工
/* ========================================= */
/* ===== Footer Styles ===================== */
/* ========================================= */
#footer 根据id设置 可以忽略，完全交给美工

/* =========================================== */
/* ===== Main Navigation Bar Styles ========== */
/* =========================================== */
导航 1级菜单 2级菜单 设置

/* ============================ */
/* ===== Screenlet Styles ===== */
/* ============================ */
screenlet 设置 很重要

/* login screenlet decorator */
.login-screenlet 登录装饰设置

/***********************************************
ajax auto complete
***********************************************/
自动完成控件 设置
/* ======================================================= */
/* ===== Basic Navigation (Vertical Menu) Style ========== */
/* ======================================================= */
.basic-nav设置 菜单导航

/* ======================================== */
/* ===== Button Bar Navigation Styles ===== */
/* ======================================== */

.button-bar 设置

/* ===== Button style decorator ===== */
.button-style-1设置 可忽略
/* ===== Button style decorator ===== */
.button-style-2设置 可忽略

/* ===== Button bar decorators ===== */
.tool-bar设置 可忽略

/* tab-bar decorator intended to be used at
the top of the main content area */
.tab-bar设置 可忽略
/* ======================== */
/* ===== Table Styles ===== */
/* ======================== */
.basic-table  设置

/* ===== Alternate table header style ===== */
list form 表头设置
/* ===== Sort field style ===== */
list form 排序字段图标设置
/* ===== Table decorator - Hover bar ===== */
.hover-bar tr:hover {
background-color: #cccccc;
cursor: default;
}

.hover-bar .header-row:hover,.hover-bar tr th:hover {
background-color: #ffffff;
color: #000000;
}

/* ===== Table decorator - Grid ===== */
/* These decorators need an IE hack. IE7 does not
render borders around empty <td> elements */
.dark-grid
.light-grid
设置

/* ===== Table decorator - Calendar ===== */
日历控件设置
/* ======================= */
/* ===== Tree Styles ===== */
/* ======================= */
树设置   可忽略

/* ======================== */
/* ===== Form Styles ===== */
/* ======================== */
.basic-form 设置 很重要

/* ===== Form decorator - Form Widget ===== */
.form-widget table设置

/* Pager */
分页控件设置 很重要

.field-lookup 弹出窗口的图标设置

.CalLookupImage 弹出日历的图标设置


/* ============================= */
/* ===== FieldGroup Styles ===== */
/* ============================= */
fieldgroup设置 很重要
/* == Portlet configuration screenlet == */
.portlet-config设置

/* == Portal Manager Toolbar == */
#manage-portal-toolbar 设置

/***********************************************
Webtools
***********************************************/
可忽略

/***********************************************
Lookups
***********************************************/
弹出窗口设置

/* overwrite */
#fieldLookupContent 历史遗留 无用

.ui-dialog-content jquery的式样


/* overwrite*/
#findScreenlet {
margin-top: 0;
}

.row-level-one.alternate-row {
background-color:#81817F;
}
.row-level-two {
background-color:#D4D0C8;
}
ordermgr相关模块 设置
.order-items
.order-info
.order-item-status-list
.order-list
.order-item-status-list

wait-spinner  load等待界面

/* ========================================================= */
/* ===== JavaScript jQuery widgets                      ===== */
/* ========================================================== */
jsd q＊Q--64015655
jQuery UI CSS Framework 另开文章单独解读，或者寻找这方面相关资料




二 stylertl.css
j*i*a*s*u*d*u
OFBiz默认主题tomahawk 中有个stylertl.css样式表文件
打开查看，可以发现里面写的
body, caption, th {
text-align: right;
}
其他的CSS类对齐定义有些也和我们平常见的不同，刚开始觉得奇怪
搜索了下资料发现原来这个stylertl.css文件是专门为那些习惯文字和排版顺序自右向左的人准备的
现在大多数的人阅读习惯是自左向右，还记得吗古时候我们那些书籍文字和排版顺序自右向左的
而现在也有些地方的人的阅读习惯还是自右向左的，如一些阿拉伯国家和我国维吾尔族，浏览下这些地方的网站就清楚
stylertl.css就是为这部分需要和阅读习惯的人准备的
使用这个stylertl.css样式表文件文件后你就会发现前台OFBiz页面的文字和排版顺序自右向左的了，原本在浏览器右边的滚动条也变成在左边的了

http://jiasudu.iteye.com

评论

4 楼 guolinxin 2012-07-24  

太感谢了，偶像啊      

3 楼 surpass_li 2011-06-03  

太牛了，得好好学习一下

2 楼 dagmom 2011-05-23  

这算是编写css良好习惯的一种概要阐述吧

1 楼 wangyi878750 2011-05-02