Title / Description
Code <?xml version="1.0" encoding="utf-8"?> <!-- 样式定义元素的命名规则： 元素：小写字母开头，后续单词大写开头 按钮及菜单状态：默认状态、按下状态(down)、选中状态(selected)、不可用状态(disabled)，命名规则为：元素名 + "_" + 状态，默认状态使用元素名即可 表单状态：默认状态、激活状态 样式属性的定义范围及顺序： 位置：top、left 大小：width、height 背景：background-image、background-color 字体：font-size、color、text-align（无定义就默认左对齐） 阴影：shadow-color、shadow-alpha、shadow-offset-x、shadow-offset-y、shadow-radios 图片文件的组织及命名规则： 按模块划分，组织不同的图片文件夹中 图片文件名与元素同名，不同状态的图片文件亦是如此 图片使用可透明背景的png格式 背景图片文件名与元素同名 图标文件加前缀"icon"，按钮背景图片加前缀“btn”，后面加大些开头的元素名 panel ######## 背景图片开发实现说明 ######## 图标在控件中的位置：水平垂直两个方向都居中 背景图：拉伸填充 --> <iExOATheme> <!--========== 模块开始：登录页，图片目录：login ==========--> <login> <!-- 登录页背景图：login.png --> <pnlLogin top="174" left="250" width="550" height="380"> <!-- 登录区域背景图，包括标签文字“账号”、“密码”：pnlLogin.png --> <userName top="291" left="469" color="100 0 0" /> <!-- 固定大小： width="230" height="44" 内边距： padding-left="12" padding-right="12" 背景图，二状态： userName.png userName_actived.png 字体固定大小font-size="" --> <password top="335" left="469" color="51 0 0" /> <!-- 固定大小： width="200" height="44" 内边距： padding-left="12" padding-right="12" 背景图，二状态： password.png password_actived.png 字体固定大小font-size="" --> <autoLogin top="386" left="470" /> <!-- 图片，三状态，且包含标签文字“自动登录”： autoLogin.png autoLogin_down.png autoLogin_selected.png --> <btnLogin top="" left="" /> <!-- 图片，二状态，且包含标签文字“登录”： 固定大小： width="" height="" login/btnLogin.png login/btnLogin_down.png --> </pnlContent> </pnlLogin> </login> <!--========== 模块结束：登录页 ==========--> <!--========== 模块开始：首页，图片目录：home ==========--> <home> <!-- 首页背景图：home.png --> <homeHead> <!-- 首页头部背景图：homeHead.png 固定宽度： width="834" height="50" --> <!-- 首页搜索，二状态 --> <search> <!-- 固定大小： width="250" height="30" 内边距： padding-left="10" padding-right="10" 背景图：search.png --> <input color="205 209 191" /> <!-- 字体固定大小font-size="" --> </search> <search_active> <!-- 搜索控件激活背景图：search_active.png --> <input color="205 209 191" /> <!-- 字体固定大小font-size="" --> <!-- <btnClear /> 固定大小： width="30" height="30" 搜索控件激活背景图：btnClear.png --> </search_active> </homeHead> <homeBody> <!--首页右侧内容背景 --> <body_L width="10" height="335" background-image="body/body_L.png" /> <body_C background-image="body/body_C.png" /> <body_R width="10" height="335" background-image="body/body_R.png" /> </homeBody> </home> <!--========== 模块结束：首页 ==========--> <!--========== 模块开始：一层面板，图片目录：layFirst ==========--> <layFirst width="190" shadow-color="0 0 0" shadow-alpha="" shadow-offset-x="14" shadow-offset-y="" shadow-radios="20"> <!-- 一层面板背景图：layFirst.png 宽度定义为当用背景图实现阴影效果的时宽度，实际可用区域宽度为width="190" --> <!-- 功能导航 --> <nav top="30"> <!-- 导航项，二状态 --> <navItem height="56" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios=""> <!-- 背景图：navItem.png --> <!-- <icon /> 固定大小，实际显示大小图片实现，背景透明： width="44" height="44" 图片两边空隙为： margin-left="8" margin-right="8" 图标图片： 首页：iconHome.png 公文处理：iconMissive.png 业务办理：iconBusiness.png 通知公告：iconNotice.png 领导日程：iconCalendar.png 会议信息：iconMeeting.png 综合信息：iconInfomation.png 通讯录：iconContacts.png 应用推荐：iconApps.png 其它： iconOther01.png iconOther02.png iconOther03.png iconOther04.png iconOther05.png --> <label color="255 255 198" shadow-color="0 0 0" shadow-alpha="" shadow-offset-x="" shadow-offset-y="1" shadow-radios="" /> <!-- 文字固定大小：font-size="" 默认左对齐 --> <num> <!-- 背景图：num.png 固定大小: width="24" height="18" 能否实现位置自动切换？？？？？ 当二层面板遮住时，显示在图标右上角 --> <label color="255 255 255" shadow-color="0 0 0 " shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小：font-size="" 文字居中 --> </num> </navItem> <navItem_selected height="56" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios=""> <!-- 背景图：navItem_selected.png --> <!-- <icon /> 图标图片： 与默认状态一样 --> <label color="255 255 255" shadow-color="0 0 0" shadow-alpha="" shadow-offset-x="" shadow-offset-y="1" shadow-radios="" /> <num> <!-- 背景图与默认状态一样 --> <label color="255 255 255" shadow-color="0 0 0" shadow-alpha="" shadow-offset-x="" shadow-offset-y="1" shadow-radios="" /> <!-- 字体固定大小：font-size="" 文字居中 --> </num> </navItem_selected> </nav> <!-- 模块结束：导航 --> <!-- 模块开始：消息提示 --> <message> <!-- 背景图：message.png 固定大小： width="190" height="150" 含logo，背景透明 --> <messageItem> <!-- 背景图：loading.png --> <!-- <icon /> 图标使用系统默认 --> <label color="255 255 255" shadow-color="0 0 0" shadow-alpha="" shadow-offset-x="" shadow-offset-y="1" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </messageItem> </message> <!-- 模块结束：消息提示 --> <!-- 模块开始：系统导航 --> <sysNav> <!-- 背景图：sysNav.png 固定高度： height="44" 宽度同父级对象layFirst宽度 --> <!-- 系统导航图标，固定大小： width="44" height="44" <logout background-image="iconLogout.png" /> <logout_down background-image="iconLogout_down.png" /> <setting background-image="iconSetting.png" /> <setting_down background-image="iconSetting_down.png" /> --> </sysNav> <!-- 模块结束：系统导航 --> </layFirst> <!--========== 模块结束：一层面板 ==========--> <!--========== 模块开始：二层面板，图片目录：laySecond ==========--> <laySecond> <!-- 宽度固定： width="660" --> <layTab> <!-- 宽度固定： width="44" --> <background> <layTab_T height="10" /> <layTab_M /> <layTab_B height="10" /> </background> <!-- 标签区背景 <background> <layTab_T background-image="laySecond/layTab_T.png" /> <layTab_M background-image="laySecond/layTab_M.png" /> <layTab_B background-image="laySecond/layTab_B.png" /> </background> --> <tabBar> <!-- 宽度固定 width="44" 高度根据标签项多少决定 内边距： padding-top="12" padding-bottom="12" --> <background> <tabBar_T height="10"/> <tabBar_M /> <tabBar_B height="10"/> </background> <!-- 标签导轨背景 <background> <tabBar_T background-image="laySecond/tabBar_T.png" /> <tabBar_M background-image="laySecond/tabBar_M.png" /> <tabBar_B background-image="laySecond/tabBar_B.png" /> </background> --> <tabItem> <!-- 默认标签项透明无背景 宽度固定width="44" 高度由标签内文字多少决定 内边距： padding-top="12" padding-bottom="12" --> <label color="245 225 193" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </tabItem> <tabItem_selected> <background> <tabItem_T height="10"/> <tabItem_M /> <tabItem_B height="10"/> </background> <!-- 已选择标签项背景 <background> <tabItem_T background-image="laySecond/tabItem_T_selected.png" /> <tabItem_M background-image="laySecond/tabItem_M_selected.png" /> <tabItem_B background-image="laySecond/tabItem_B_selected.png" /> </background> --> <label color="77 49 0" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </tabItem_selected> </tabBar> </layTab> <layHead> <!-- 高度固定height="44" --> <background> <layHead_L width="14" /> <layHead_C /> <layHead_R width="14" /> </background> <!-- 面板头部背景 <background> <layHead_L background-image="laySecond/layHead_L.png" /> <layHead_C background-image="laySecond/layHead_C.png" /> <layHead_R background-image="laySecond/layHead_R.png" /> </background> --> <title color="77 49 0" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" 文字默认居中 --> </layHead> <layBody background-color="255 255 255" background-image="" /> </laySecond> <!--========== 模块结束：二层面板 ==========--> <!--========== 模块开始：三层面板，图片目录：layThird ==========--> <layThird> <!-- 宽度固定： width="" --> <layHead> <!-- 高度固定height="44" --> <background> <layHead_L width="14" /> <layHead_C /> <layHead_R width="14" /> </background> <!-- 面板头部背景 <background> <layHead_L background-image="layThird/layHead_L.png" /> <layHead_C background-image="layThird/layHead_C.png" /> <layHead_R background-image="layThird/layHead_R.png" /> </background> --> <title color="77 49 0" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" 文字默认居中 --> </layHead> <layBody background-color="255 255 255" background-image="" /> <layTool> <!-- 宽度固定：width="44" --> <background> <layTool_T height="10"/> <layTool_M /> <layTool_B height="10" /> </background> <!-- 工具区背景 <background> <layTool_T background-image="layThird/layTool_T.png" /> <layTool_M background-image="layThird/layTool_M.png" /> <layTool_B background-image="layThird/layTool_B.png" /> </background> --> <toolBar> <toolItem/> <!-- 高度固定： width="44" height="48" 图标间隔12 --> <toolItem_selected/> <!-- 图标文件，二状态：默认、按下down 公文处理图标： iconSend.png iconSave.png iconTrack.png iconQuick.png iconNormal.png iconReaded.png 信息浏览图标： iconBigFont.png iconSmallFont.png --> <!-- 群组图标间隔线 <toolGroupSpace background-image="layThird/toolGroupSpace.png" /> --> </toolBar> <pageBar> <!-- 宽度固定： width="44" 高度由翻页项多少决定 --> <background> <pageBar_T height="10"/> <pageBar_M /> <pageBar_B height="10"/> </background> <!-- 翻页滑轨背景 <background> <pageBar_T background-image="layThird/pageBar_T.png" /> <pageBar_M background-image="layThird/pageBar_M.png" /> <pageBar_B background-image="layThird/pageBar_B.png" /> </background> --> <!-- 上线翻页箭头图标 固定大小，背景透明： width="44" height="44" 三状态: <pageUp background-image="layThird/pageUp.png" /> <pageUp_down background-image="layThird/pageUp_down.png" /> <pageUp_disabled background-image="layThird/pageUp_disabled.png" /> <pageDown background-image="layThird/pageDown.png" /> <pageDown_down background-image="layThird/pageDown_down.png" /> <pageDown_disabled background-image="layThird/pageDown_disabled.png" /> --> <pageItem> <!-- 宽度固定： width="44" 高度由翻页项文字多少决定 --> <label color="245 225 193" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </pageItem> <pageItem_selected> <background> <pageItem_T height="6"/> <pageItem_M /> <pageItem_B height="6" /> </background> <!-- 已选中翻页想背景 <background> <pageItem_T background-image="layThird/pageItem_T_selected.png" /> <pageItem_M background-image="layThird/pageItem_M_selected.png" /> <pageItem_B background-image="layThird/pageItem_B_selected.png" /> </background> --> <label color="77 49 0" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </pageItem_selected> </pageBar> </layTool> </layThird> <!--========== 模块结束：三层面板 ==========--> <!--========== 模块开始：首页portlet，图片目录：pnlHome ==========--> <pnlHome highlight-color="" highlight-border-color="225 237 115" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios=""><!-- highlight-color和highlight-border-color是首页模块拖动位置时的高亮效果 --> <pnlHead> <!-- 高度固定height="40" --> <background> <pnlHead_L width="10" /> <pnlHead_C /> <pnlHead_R width="10" /> </background> <!-- 头部背景 <background> <pnlHead_L width="10" background-image="pnlHome/pnlHead_L.png" /> <pnlHead_C background-image="pnlHome/pnlHead_C.png" /> <pnlHead_R width="10" background-image="pnlHome/pnlHead_R.png" /> </background> --> <title color="255 255 255" text-align="center" shadow-color="" shadow-alpha="75%" shadow-offset-x="" shadow-offset-y="1" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </pnlHead> <pnlBody background-color= "" background-image="" /> </pnlHome> <!--========== 模块结束：首页portlet ==========--> <!--========== 模块开始：首页列表，图片目录：listHome ==========--> <listHome> <!-- 列表项高度根据内容不同分为2种： 一行文字（标题） 三行文字（标题+摘要） --> <itemHeight> <oneRow height="50" /> <threeRow height="100" /> </itemHeight> <fontSize> <title font-size="" /> <content font-size="" /> </fontSize> <icon width="30" height="30" /> <!-- 通用图标: iconList.png --> <!-- 新信息图标: iconNew.png --> <!-- 公文列表的紧急程度图标: 平件（平急、普通） iconEmgPingjian.png 急件（加急） iconEmgJijian.png 特急 iconEmgTeji.png 特提 iconEmgTeti.png --> <!-- 列表项，三状态 --> <listItem> <!-- 背景图片根据高度不同分为2种： 一行文字：listOneRow.png 三行文字：listThreeRow.png --> <title color="0 0 0" /> <content color="83 48 16" /> </listItem> <listItem_down> <!-- 背景图片根据高度不同分为2种： 一行文字：listOneRow_down.png 三行文字：listThreeRow_down.png --> <title color="0 0 0" /> <content color="83 48 16" /> </listItem_down> <listItem_selected> <!-- 背景图片根据高度不同分为2种： 一行文字：listOneRow_selected.png 三行文字：listThreeRow_selected.png --> <title color="0 0 0" /> <content color="83 48 16" /> </listItem_selected> </listHome> <!--========== 模块结束：公文列表 ==========--> <!--========== 模块开始：面板列表，图片目录：listLay ==========--> <listLay> <!-- 列表项高度根据内容不同分为3种： 二行文字（标题+附加信息） 三行文字（标题+摘要） 四行文字（标题+附加+摘要） --> <itemHeight> <twoRow height="60" /> <threeRow height="90" /> <fourRow height="110" /> </itemHeight> <fontSize> <title font-size="" /> <content font-size="" /> </fontSize> <icon width="30" height="30" /> <!-- 通用图标: iconList.png --> <!-- 新信息图标: iconNew.png --> <!-- 紧急程度图标: 平件（平急、普通） iconEmgPingjian.png 急件（加急） iconEmgJijian.png 特急 iconEmgTeji.png 特提 iconEmgTeti.png --> <!-- 催办图标: iconPushes.png --> <!-- 类型群组 --> <typeGroup background-color="230 230 230" background-image="" /> <!-- 列表项，三状态 --> <listItem> <!-- 背景图片根据高度不同分为3种： 二行文字：listTwoRow.png 三行文字：listThreeRow.png 四行文字：listFourRow.png --> <title color="0 0 0" /> <content color="0 0 0" /> </listItem> <listItem_down> <!-- 背景图片根据高度不同分为3种： 二行文字：listTwoRow_down.png 三行文字：listThreeRow_down.png 四行文字：listFourRow_down.png --> <title color="0 0 0" /> <content color="0 0 0" /> </listItem_down> <listItem_selected> <!-- 背景图片根据高度不同分为3种： 二行文字：listTwoRow_selected.png 三行文字：listThreeRow_selected.png 四行文字：listFourRow_selected.png --> <title color="0 0 0" /> <content color="0 0 0" /> </listItem_selected> </listLay> <!--========== 模块结束：面板列表 ==========--> <!--========== 模块开始：公文处理，图片目录：missiveProcess ==========--> <missiveProcess> <!-- <pdfEdit /> 正文编辑图标，四状态，固定大小： width="28" height="28" 图标文件： 拖动：iconHand.png 撤销：iconUndo.png 重做：iconRedo.png 字体：iconFont.png 荧光笔：iconHighlighter.png 钢笔：iconPen.png 颜色：iconColor.png 橡皮擦：iconEraser.png 清除（垃圾桶）：iconClear.png 批注：iconNote.png word编辑：iconWordEdit.png --> <!-- <handSign /> 手写签名图标，四状态，固定大小： width="28" height="28" 图标文件： 撤销：iconUndo.png 钢笔：iconPen.png 颜色：iconColor.png 清除（垃圾桶）：iconClear.png 批注：iconNote.png 线条粗细:iconLine.png --> <max> <maxHead background-color="230 230 230" background-image=""> <!-- 固定高度：height="40" --> <!-- <button /> 放大、还原图标 iconMax.png iconRestore.png --> </maxHead> <maxBody background-color="255 255 255" background-image="" /> </max> <popup background-color="255 255 255" /> <mask background-color="230 230 230" alpha="50" /> </missiveProcess> <!--========== 模块结束：公文处理 ==========--> <!--========== 模块开始：bar按钮，图片目录：barButton ==========--> <barButton> <!-- 普通按钮 --> <btnNormal> <!-- 固定高度：height="40" --> <background> <btnNormal_L width="8"/> <btnNormal_C /> <btnNormal_R width="8"/> </background> <!-- 按钮背景 <background> <btnNormal_L width="8" background-image="barButton/btnNormal_L.png" /> <btnNormal_C background-image="barButton/btnNormal_C.png" /> <btnNormal_R width="8" background-image="barButton/btnNormal_R.png" /> </background> --> <label color="255 255 255" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </btnNormal> <btnNormal_down> <!-- 固定高度：height="32" --> <background> <btnNormal_L width="8" /> <btnNormal_C /> <btnNormal_R width="8" /> </background> <!-- 按钮背景 <background> <btnNormal_L width="8" background-image="barButton/btnNormal_L_down.png" /> <btnNormal_C background-image="barButton/btnNormal_C_down.png" /> <btnNormal_R width="8" background-image="barButton/btnNormal_R_down.png" /> </background> --> <label color="255 255 255" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </btnNormal_down> <!-- 返回按钮 --> <btnBack> <!-- 固定高度：height="32" --> <background> <btnBack_L width="14"/> <btnBack_C /> <btnBack_R width="8" /> </background> <!-- 按钮背景 <background> <btnBack_L width="14"background-image="barButton/btnBack_L.png" /> <btnBack_C background-image="barButton/btnBack_C.png" /> <btnBack_R width="8" background-image="barButton/btnBack_R.png" /> </background> --> <label color="255 255 255" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </btnBack> <btnBack_down> <!-- 固定高度：height="32" --> <background> <btnBack_L width="14"/> <btnBack_C /> <btnBack_R width="8" /> </background> <!-- 按钮背景 <background> <btnBack_L width="14" background-image="barButton/btnBack_L_down.png" /> <btnBack_C background-image="barButton/btnBack_C_down.png" /> <btnBack_R width="8" background-image="barButton/btnBack_R_down.png" /> </background> --> <label color="255 255 255" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </btnBack_down> <!-- 目标操作按钮 --> <btnTarget> <!-- 固定高度：height="32" --> <background> <btnTarget_L width="8" /> <btnTarget_C /> <btnTarget_R width="8" /> </background> <!-- 按钮背景 <background> <btnTarget_L width="8" background-image="barButton/btnTarget_L.png" /> <btnTarget_C background-image="barButton/btnTarget_C.png" /> <btnTarget_R width="8" background-image="barButton/btnTarget_R.png" /> </background> --> <label color="255 255 255" shadow-color="255 255 255" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </btnTarget> <btnTarget_down> <!-- 固定高度：height="32" --> <background> <btnTarget_L width="8"/> <btnTarget_C /> <btnTarget_R width="8"/> </background> <!-- 按钮背景 <background> <btnTarget_L width="8" background-image="barButton/btnTarget_L_down.png" /> <btnTarget_C background-image="barButton/btnTarget_C_down.png" /> <btnTarget_R width="8" background-image="barButton/btnTarget_R_down.png" /> </background> --> <label color="255 255 255" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </btnTarget_down> </barButton> <!--========== 模块结束：bar按钮 ==========--> <!--========== 模块开始：bar标签，图片目录：barTab ==========--> <barTab> <tabItem> <background> <tabItem_L width="" /> <tabItem_C /> <tabItem_R width="" /> </background> <!-- 按钮背景 <background> <tabItem_L width="" background-image="barTab/tabItem_L.png" /> <tabItem_C width="" background-image="barTab/tabItem_C.png" /> <tabItem_R width="" background-image="barTab/tabItem_R.png" /> </background> --> <label color="" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </tabItem> <tabItem_selected> <background> <tabItem_L width="" /> <tabItem_C /> <tabItem_R width="" /> </background> <!-- 按钮背景 <background> <tabItem_L width="" background-image="barTab/tabItem_L_selected.png" /> <tabItem_C width="" background-image="barTab/tabItem_C_selected.png" /> <tabItem_R width="" background-image="barTab/tabItem_R_selected.png" /> </background> --> <label color="" shadow-color="" shadow-alpha="" shadow-offset-x="" shadow-offset-y="" shadow-radios="" /> <!-- 字体固定大小font-size="" --> </tabItem_selected> </barTab> <!--========== 模块结束：bar标签 ==========--> </iExOATheme>
Author
Highlight as C C++ CSS Clojure Delphi ERb Groovy (beta) HAML HTML JSON Java JavaScript PHP Plain text Python Ruby SQL XML YAML diff code
1.1.2
1.1.2