OFBiz UI 也可以变得很美.doc

OFBiz UI 也可以变得很美文章分类:Java编程     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 15000850008 全局设置 /* = 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 qQ-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页面的文字和排版顺序自右向左的了，原本在浏览器右边的滚动条也变成在左边的了