OMS 专题开发规范1.0版

cps5211314 贡献于2012-03-08

作者 user  创建于2011-02-23 13:01:00   修改者kp  修改于2011-05-03 02:55:00字数12095

文档摘要:本文档为规范视讯中心3G手机门户网站专题开发而撰写.XHTML MP(XHTML Mobile Profile),它是定义在WAP 2.0上面的标记语言(markup language)。XHTML MP是XHTML的子集,在XHTML MP出现之前,WAP网站的开发者们只能用WML和WML script来创建WAP的网站。而与此同时,web的开发者们却在用强大的多的HTML、CSS、XHTML等来进行传统网站的开发。所以XHTML MP的目标就是浏览者在WAP和web上获得尽可能相似的浏览体验。
关键词:

 专题开发规范 目录 专题开发规范 1 1. 概要介绍 4 1.1. 文档目的与介绍 4 1.2. 目标读者 4 2. 静态页面开发规范 5 2.1. XHTML MP介绍 5 2.2. XHTML语法规则 5 2.3. XML声明和字符编码 6 2.4. DOCTYPE声明 6 2.5. 基本标记简析 6 2.6. XHTML MP的缓存机制 7 2.7. XHTML MP的定时刷新 7 2.8. 最基本的XHTML文档结构 8 2.9. 基本要求 8 3. CSS使用规范限制 8 3.1. 基本介绍和建议 8 3.2. CSS使用规范 9 4. 模板开发规范 10 4.1. 基本介绍 10 4.2. 模板语言使用说明 10 4.2.1. 概述 10 4.2.2. 变量,序列,散列 10 4.2.3. 算术运算,比较操作符,逻辑操作符 13 4.2.4. 内建函数,日期 13 4.2.5. 宏 14 4.3. OMS系统中自定义指令 16 4.4. OMS中定义的常态对象 18 附录1:OMS模板开发环境配置 19 1. 概要介绍 1.1. 文档目的与介绍 本文档为规范视讯中心3G手机门户网站专题开发而撰写 为视讯中心专题开发技术人员以及合作方专题开发技术人员提供有效的开发文档,为开发人员提供最基本的技术指导,为实现对品牌包,垂直频道,各省分公司的分权分域做铺垫。同时文档对专题静态页面的开发提供做了限制,保证专题页面能良好的展现在定制终端上。保证了用户的体验,在一定程度上有利于保证业务量 本文档主要针对240版专题的开发做规范限制 文档主要分为两大部分:静态页面开发规范,专题模板开发规范。静态页面开发规范包括了基本的xhtml开发规范和css样式表属性使用规范。按照规范执行静态页面开发能有效的减少因为终端打开页面排版问题。专题开发规范包含了,火狐浏览器下搭建开发和预览环境,freemarker代码逻辑的基本介绍,以及在oms系统下的freemarker自定义标签的使用方法。 1.2. 目标读者 OMS平台专题模板开发技术人员; 2. 静态页面开发规范 2.1. XHTML MP介绍 由于所开发的专题是通过手机浏览器访问,需要遵循XHTML MP规范。 XHTML MP(XHTML Mobile Profile),它是定义在WAP 2.0上面的标记语言(markup language)。XHTML MP是XHTML的子集,在XHTML MP出现之前,WAP网站的开发者们只能用WML和WML script来创建WAP的网站。而与此同时,web的开发者们却在用强大的多的HTML、CSS、XHTML等来进行传统网站的开发。所以XHTML MP的目标就是浏览者在WAP和web上获得尽可能相似的浏览体验。 总的来说,XHTML是更严谨的和简洁的HTML版本 2.2. XHTML语法规则 1) 所有标签都必须有结束标签 在HTML中,你可以打开许多标签,例如

  • 而不一定写对应的

  • 来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例如:

    2) 所有标签的元素和属性的名字都必须使用小写 XHTML对大小写是敏感的,和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如:<BODY>必须写成<body> 。大小写夹杂也是不被认可的,通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。 3) 属性的值必须放置在双引号内 4) 不支持属性简写 在html中,如下写法是正确的:<input type="checkbox" checked />。而xhtml中必须这样写:<input type="checkbox" checked="checked" /> 5) 标签的嵌套必须正确 同样因为XHTML要求有严谨的结构,因此所有的嵌套都必须按顺序,以前我们这样写的代码:<p><b></p>/b> 必须修改为:<p><b></b></p>就是说,一层一层的嵌套必须是严格对称。 6) 所有的属性必须用引号""括起来 在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。例如: <height=80> 必须修改为:<height="80"> 特殊情况,你需要在属性值里使用双引号,你可以用",单引号可以使用',例如:<alt="say'hello'"> 7) 把所有<(小于号)和&等等特殊符号用编码表示 任何小于号(<),不是标签的一部分,都必须被编码为< 任何大于号(>),不是标签的一部分,都必须被编码为> ; 任何与号(&),不是实体的一部分的,都必须被编码为& 8) 不要在注释内容中使“--” “--”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是无效的: <!--这里是注释-----------这里是注释--> 用等号或者空格替换内部的虚线。 <!--这里是注释============这里是注释--> 2.3. XML声明和字符编码 <?xml version="1.0" encoding="UTF-8"?> 所的XHTML MP文档都是XML文档,因此开始都会有一个XML声明。这里也可以指定文档的字符编码。对于当前天翼视讯门户所涉及到的页面,规定使用<?xml version="1.0" encoding="UTF-8"?> 2.4. DOCTYPE声明 对于所开发的专题页面,必须声明<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 若所开发的静态页面不按照上面所规定的声明,会导致部分手机打开页面会蜷缩在屏幕的左上角,严重影响用户体验度。 2.5. 基本标记简析 <html>是XHTML MP的根标记。目前,该标记的xmlns属性只能是http://www.w3.org/1999/xhtml这个值,这个用来保证严格遵守XHTML MP标准。但是即使缺失了这个标记,大部分浏览器还是能正常显示页面。 <head>标记用来存放关于文档本身的信息。比如<title>和<link>,还有<meta>,这几个标记的功能和在传统的html里面的功能是一样的。 <p>标记的text-align属性已经被取消了,可以在css中定义实现这个功能,如:p {text-align: right} 2.6. XHTML MP的缓存机制 这里的缓存就是客户端用来临时存储XHTML文档的空间,如果浏览器发现缓存里面有这个页面了而且没有过期,那它就直接显示这个页面,而不需要再次联网下载,这样节省了时间。也可以可以禁止缓存,代码如下: <head> <title>XHTML MP Tutorial 如果你要设置缓存时间是300秒的话,代码如下: XHTML MP Tutorial 有些wap浏览器是没有缓存的,所以你设置了也未必能起到作用。 2.7. XHTML MP的定时刷新 XHTML MP Tutorial 上面的代码让页面每隔15秒刷新一次! 注意:必须包含这句:, 如果没的话,那可能刷新后只是看到缓存中的副本,并没重新从服务器下载页面。 还一个用法就是用来URL自动跳转,例子如下: XHTML MP Tutorial 但不是所有浏览器都支持refresh ,当给某个页面添加自定跳转的时候,建议最好添加一个固定的链接,可供用户手动点击跳转到相应页面。 2.8. 最基本的XHTML文档结构 XHTML MP

    Hello world. Welcome to our XHTML MP tutorial.

    红色标注部分不可缺少,如果缺少将会有很多手机打开页面不正常 2.9. 基本要求 由于现在手机终端宽度大小不一致。甚至有部分终端为320宽度的屏幕,但是无法支持320版炫动的展示效果。对于240版本的专题开发,静态页面要求在页面宽度上做100%自动适应。自适应宽度的页面能更好的适配在各个终端上。 3. CSS使用规范限制 3.1. 基本介绍和建议 采用XHTML MP来开发静态页面,最重要的是它对CSS的 支持。这使得XHTML MP开发的页面,相比原先WML开发的wap页面具有更好的展示效果。但是由于手机终端浏览器的多种多样,许多浏览器多CSS的支持相当有限。所以开发的静态页面如果不按照一定的CSS使用规则,会导致一部分手机打开页面之后排版混乱,严重影响用户使用。 本章节在现在网络上完全没有参考,也没有任何一家权威机构对当前手机终端浏览器做过统计和测试,无法精确的得到手机浏览器对CSS的支持情况,按照这一年多以来专题开发经验,目前定制机内置浏览器大概有以下几种:Mobile IE, Polaris Browser,obgio,openware,opera mobile等等。这类浏览器对CSS的支持情况各不相同,而且相同浏览器不同版本对css的支持情况也会不同。因此对CSS的使用要格外谨慎,特别是对于重大的布局属性,比如float是禁止使用的,具体会在下文举例介绍。 建议:如果当页面UI设计对静态页面布局带来困难,建议修改设计。如果开发的页面无法正常的展现在手机上,再好的设计都是空谈。 3.2. CSS使用规范 1) 选择器的使用 类型选择器:h1 { font-style: italic} 元素名称必须小写。   Class选择器: .class { color:blue} 对应标签的class属性,还可以联合元素名称使用 h1.class {color:blue}。 ID选择器:#id {color:red} 对应标签的id属性也可联合元素名称。 通用选择器:* { color:blue} ,所有的标签。禁止使用! 2) float属性 float 属性定义元素在哪个方向浮动,但是由于有一部分终端对float属性不支持,所以目前float属性的禁止使用的。如果使用会造成所浮动的域浮动到页面的左上角,页面根本无法使用。 3) margin属性 不允许使用auto,若使用负值,必须包含在//
    中,即一个中只能有
    /
    ,不容许table里
    嵌套出现
    ,举例如下:
    XXXX
    这样为正确的格式
    错误格式如下:
    这样为错误的格式:div中出现了td或tr
    4) display属性 不允许使用none值,不允许使用inline-block 5) positon属性 大部分终端不支持,禁止使用,不要采用多个元素互相叠加的设计。 6) 表单类样式属性 大部分手机,表单类样式,对表单的展现效果设定不起作用比如input,select,button,单选,多选按钮,下拉菜单,文本输入框等。对于页面中需要加入表单类,必须使用手机默认的控件样式。对于button标签,禁止使用,可以使用input标签代替,但也不允许input引用图片之类的样式,必须使用原有样式。 7) iframe 在页面中引用其他网页的技术,禁止使用 8) 说明 对于目前对CSS属性的限制,以上内容仅仅是一部分,还有待日后添加。 4. 模板开发规范 4.1. 基本介绍 模板开发使用FreeMarker模板引擎开发。开发需要遵循FreeMaker语法规范 4.2. 模板语言使用说明 4.2.1. 概述 在FreeMarker中,使用FTL标记引用指令,有三种FTL标记。 两种指令 预定义指令:引用方式为<#指令名称> 用户定义指令:引用方式为<@指令名称>,引用用户定义指令时须将#换为@。 三种FTL标记 开始标记:<#指令名称> 结束标记: 空标记:<#指令名称/> 并且每一个开始标记必须有一个结束标记去关闭它比如:<#if>判断开始标记,必须有结束标记关闭,否则将无法编译无法通过。 大小写敏感,list是正确的FTL指令,而List不是;${name}和${NAME}是不同的 标签必须合理嵌套,例如:<#if <#include 'foo'>='bar'>...是不合法的 注释使用<#-- -->,例如<#--注释内容--> 4.2.2. 变量,序列,散列 1) 变量 在模板中定义的变量有三种类型: plain变量:可以在模板的任何地方访问,包括使用include指令插入的模板,使用assign指令创建和替换。 局部变量:在宏定义体中有效,使用local指令创建和替换。 循环变量:只能存在于指令的嵌套内容,由指令(如list)自动创建。 注意: 宏的参数是局部变量,不是循环变量。 局部变量隐藏同名的plain变量 循环变量隐藏同名的plain变量和局部变量 内部循环变量隐藏同名的外部循环变量 仔细阅读如下代码,便可以理解上文所说的“隐藏”。在定义变量,或者遍历list的时候,变量名是可以重复的,只要遵循以上的“隐藏”规则。 注:数字标号表示输出前后顺序,注释部分为输出值。 <#assign x="plain"> 1. ${x} <#-- plain --> <@test /> 6. ${x} <#list ["loop"] as x> 7. ${x} <#-- loop --> <#assign x="plain2"> 8. ${x} <#-- loop --> 9. ${x} <#-- plain2 --> <#macro test> 2. ${x} <#-- plain --> <#local x="local"> 3. ${x} <#-- local --> <#list ["loop"] as x> 4. ${x} <#-- loop --> 5. ${x} <#-- local --> 2) 输出变量值 a)对于一般变量: ${变量名}获取,变量名只能是字母、数字、下划线、$、#、@ 的组合,且不能以数字开头 b)对于散列中的变量: 有两种方式调用:点“.”语法,和括号“[ ]”语法 点语法:变量名字和顶层变量的名字受同样的限制。方括号语法:变量名字无限制,可以是任意的表达式的结果 book.author.name book.author.["name"] book["author"].name book["author"]["name"] 以上方法都是等价的 C)对于序列中的变量 使用和散列的方括号语法一样,只是方括号中的表达式值必须是数字,初始下表为0使用[startIndex..endIndex]语法,从序列中获得序列片断(也是序列);startIndex和endIndex是结果为数字的表达式 3) 序列 模板中会经常遍历list,必须通过使用list指令,即<#list jmList as jm >…jmList是集合的表达式,在oms系统中,一般是由自定义表达式<@cms />生成得到,也可以按照一定的需求自定义构建。jm是循环变量的名字,不能是表达式。当在遍历jmList时,会将遍历变量的值保存到jm中。就可以使用jm.NAME 方式来获取jm对象中的属性值。 List指令还隐含了两个循环变量: m_index:当前迭代项在所有迭代项中的位置,是数字值。 jm_has_next:用于判断当前迭代项是否是所有迭代项中的最后一项。 其中“jm”为自己定义的循环变量名。例如,如果你使用<# list list as l>..定义,那么就要使用l_index,l_has_next。 在list的循环过程中,如果需要跳出循环可以使用<#break />命令 freemaker还给list提供了三种排序方法: sort升序方式,对序列进行排序,要求序列中的变量必须是:字符串(按首字母排序),数字,日期值 sort_by方式,有一个参数,该参数用于指定想要排序的子变量,排序是按照变量对应的值进行排序,如:<#list userList?sort_by(“age”) as user>…age是User对象的属性,排序是按age的值进行的。 reverse降序排序函数<#list list? reverse as l>…。reverse使用同sort相同。reverse还可以同sort_by一起使用如:想让用户按年龄降序排序,那么可以这个样写<#list userList?sort_by(“age”)?reverse as user>… 多个序列还以通过“+”来链接 4) 散列 散列简单的可以理解为map, 由逗号分隔的键/值列表,由大括号限定,键和值之间用冒号分隔,例子:{"name":"green mouse", "price":150}键和值都是表达式,但是键必须是字符串。 对于散列也可以使用<#list>命令来遍历,并且可以使用三种排序方式, 4.2.3. 算术运算,比较操作符,逻辑操作符 1) 算术运算 Freemaker中可以使用   +、-、×、/、%,这些运算符的使用与一般其他编程语言完全相同,但是操作符两边必须是数字。使用+操作符时,如果一边是数字,一边是字符串,就会自动将数字转换为字符串。 2) 比较操作符 使用=(或==,完全相等)测试两个值是否相等,使用!= 测试两个值是否不相等 =和!=两边必须是相同类型的值,否则会产生错误,例如<#if 1 = "1">会引起错误 Freemarker是精确比较,所以对"x"、"x "和"X"是不相等的 对数字和日期可以使用<、<=、>和>=,但不能用于字符串 由于Freemarker会将>解释成FTL标记的结束字符,所以对于>和>=可以使用括号来避免这种情况,例如<#if (x > y)>所以必须使用lt、lte、gt和gte来替代<、<=、>和>= 3) 逻辑操作符 &&(and)、||(or)、!(not)与JAVA语法用法相同 4) 内建函数 内建函数的用法类似访问散列的子变量,只是使用“?”替代“.”,下面列出常用的一些函数 字符串使用的: html:对字符串进行HTML编码 cap_first:使字符串第一个字母大写 lower_case:将字符串转换成小写 upper_case:将字符串转换成大写 trim:去掉字符串前后的空白字符 序列使用的: size:获得序列中元素的数目 数字使用的: int:取得数字的整数部分(如-1.9?int的结果是-1) 更多函数请参考百度freemark内建函数。 5) 日期 Freemarker对于日期的处理,用内建函数string来格式化,比如对于: <#assign current_time=”20110223211100”/> ${current_time?string("yyyy-MM-dd HH:mm:ss ")}   输入2011-02-11 21:11:00 还可以通过使用?date,?time和?datetime告诉freemaker使用日期的那一部分 date:只使用年、月、日 time:只使用时、分、秒和毫秒部分 datetime:日期和时间两部分都被使用 4.2.4. 宏  宏是一个模板片段与变量相关联。你可以使用定义的指令,可以帮助你多次使用。宏定义完成之后,就是一个自定义指令,你可以通过传递参数,通过宏内部运行得到想要的返回值。宏的灵活使用,可以给模板开发带来极大的便利性。 1) 简单范例 <#macro greet>                             HelloW Joe!                      上面这个macro不会打印任何东西,它只是创建一个宏变量。这里有个变量叫greet,在<#macro greet>和之间叫宏定义体.,里面将仅当你使用的参数。 如果你要使用这样一个macro,可以这样   <@greet> 这个时候才真正使用这个macro,将会打印一句话 2) 宏参数   在macro中定义参数要放在macro变量后面,如:                   <#macro greet person>                             Hello ${person}                             在使用的时候:                    <@greet person=’Fred’/> and <@greet person=’Batman’/>   就会打印两条数据分别为 Hello Fred! 和Hello Batman,参数person众所我们所传进去的。 3) 宏的嵌套内容 宏的嵌套内容,在日常oms模板开发中,使用相当广泛的。在形式上看,可以把宏比喻为java的方法,或者函数。嵌套内容的使用,使得宏可以返回输出相应的值。 比如宏定义如下: <#macro getRecommend nodecontId> <@cms name="jmList" obj="点播节目" path="/*" fields="NODE_ID,PUB_URL,节目描述,图片,NAME,播放时长,UPDATE_TIME,PUBLISH_TIME,原名" where="NODECONTID=${nodecontId}" orderby="" maxresults="1" pagesize="0" pageindex="0" /> <#list jmList as l> <#assign content_url="${l.get('PUB_URL')!''}" /> <#nested content_url> <@cms>指令为oms中的自定义指令,当前宏使用的是通过“节目推荐”对象的NODECONT_ID来查找对应的点播节目,以便获取点播节目的发布url。 宏的使用如下: 首选需要获取需要传入的参数值,参数值为“节目推荐”对象的NODECONT_ID。 <@cms name="recmList" obj="节目推荐" path="/WAP首页/最新推荐" fields="NODECONT_ID" where="IS_PUBLISHED=1" orderby="RECOMMEND DESC" maxresults="0" pagesize="0" pageindex="0" /> 再使用定义好的宏指令 <#list recmList as rl> <@getRecommend>l.NODECONT_ID;content_url>${content_url} 在recomList被循环遍历的时候,可以输出每个节目推荐对应点播节目的发布地址了。 4.3. OMS系统中自定义指令 1) @Cms标签 最核心的标签,用于取数据。具体形式如下: <@cms name=" " obj=" " path="" fields="" where="" orderby="" maxresults="0" pagesize="0" pageindex="0" /> 1. Name:指定名字,为以后引用的时候用,相当于声明的变量名称 2. Obj:要取的数据的数据类型,指OMS中的数据类型,常用的包括:栏目,内容,通用对象,搜索关键词,连接实体等 3. Path:指定路径,为栏目的名称路径 4. Fields:要取目标对象中的字段范围,具体的字段名称下文提供。 5. Orderby:按哪一个字段排序,该字段必须在fields中指定 6. Maxresults:取数据最大值 7. pageSize:每页容纳多少个 8. pageIndex:当前处于哪页(分页用) 注: 1. fields包含的字段属性如下表: 内容部分 栏目部分 发布相关 内容ID CONTID 节点ID NODEID 地址路径 URL_PATH 内容名称 NAME 名称 NAME 名称路径 NAME_PATH 内容状态 STATUS 状态 STATUS ID路径 ID_PATH 内容标记 TAGS 路径名称 URL_NAME 栏目序号 RANKING 创建时间 CREATE_TIME 创建时间 CREATE_TIME 是否连接 IS_LINK 更新时间 UPDATE_TIME 发布时间 PUBLISH_TIME 发布地址 PUB_URL 发布时间 PUBLISH_TIME 大图片 BIG_PIC 是否已经发布 IS_PULISHED 1表示发布 0表示未发布 是否发布 ISPUBLISHED 小图片 SMALL_PIC     是否WAP内容 IS_SUP_WAP 是否直播栏目 IS_LIVE     是否RMS内容 IS_SUP_RMS 是否直播回放 LIVE_PLAYBACK     是否H264 IS_SUP_H264 是否新客户端 IS_NEW_CLIENT     是否WWW IS_SUP_WWW; 是否老客户端 IS_LOW_CLIENT     重要性 IMPORTANCE 是否WWW IS_WWW     序号 RANKING 是否WAP IS_WAP     2) @use标签 用于饮用别的模板的语句,具体格式如下: <@use templatePath =' '/> 其中的templatePath为模板路径,距离为: <@use templatePath='/WAPPORTAL/CNR/Common/搜索关键字'/> 进行引用后,/WAPPORTAL/CNR/Common/搜索关键字 这个模板就被引用到当前模板,相当于把它里边的代码COPY过来了,所以就当成了自己的组成部分。 3) @image标签 用于取图片的标签。通常在我们知道图片ID后,调用这个标签,取该ID对应的图片地址。 下面以宏和image标签为例 下面宏功能为根据图片名称,来获取栏目内图片的url; <#macro findImgPath NodeImages imgName imgsol> <#if NodeImages??> <@image name="colImgs" ids="${NodeImages}"/> <#if colImgs?size gt 0> <#list colImgs as small> <#if small.NAME = imgName > <#assign returnUrl="${small.get('PUB_URL')}"/> <#nested returnUrl> 使用@cms标签,查找到栏目。并获取名字为logo的图片,代码如下 <@cms name="lmList" obj="栏目" path="栏目路径" fields="IMAGES" where="" orderby="" maxresults="1" pagesize="0" pageindex="0" /> <#lif lmList?size gt 0> <@findImgPath lmList.get(0).IMAGES,"logo";returnUrl>${returnUrl} 4.4. OMS中定义的常态对象 模版中除了自定义标签,还有一些OMS中已经定义好了属性,他们可以方便的让用户进行取值。 CURRENT_PATH 取当前模板所设置栏目的名称路径 NODE 取到当前模板所设置的栏目的对象,支持连续取值。如:${NODE.name} CONTENT 取到当前模板所设置的内容的对象,支持连续取值。如:${CONTENT.name} 4.5. OMS模板jsp头文件 当前OMS系统下,对于wap站点和480站点,最终通过栏目,节目和模板的绑定,最终需要发布成为jsp页面。所以在完成静态页面之后需要在模板代码第一行添加jsp头文件,代码为: <% @page language="java"ageEncoding="UTF-8"ontentType="application/vnd.wap.xhtml+xml" %> 附录1:OMS模板开发环境配置 OMS模板开发需要在火狐浏览器下进行 oms开发地址为:http://192.168.32.21/oss 点击浏览器菜单栏“工具”附加组件 添加三个参数,分别为Modify Headers,wmlbrowser,XHTML Mobile Profile 重新打开一个新的浏览器,开打 工具--Modify Headers 呈现的界面为: 然后配置属性: 第一个选择add, 第二个框写 x-up-calling-line-id 固定参数,第三个框你用的测试号码,然后Save 保存. 呈现界面为:双击成开启状态,绿色 最后点击右下角Configuration,把General 里面两选项打上钩即可.关闭,重开浏览器 完成以上操作,oms平台的基本配置就算完成.

    下载文档到电脑,查找使用更方便

    文档的实际排版效果,会与网站的显示效果略有不同!!

    需要 10 金币 [ 分享文档获得金币 ] 0 人已下载

    下载文档