OMS专题开发规范10版.docx

资源描述

OMS专题开发规范10版.docx

《OMS专题开发规范10版.docx》由会员分享，可在线阅读，更多相关《OMS专题开发规范10版.docx（19页珍藏版）》请在冰豆网上搜索。

OMS专题开发规范10版.docx

OMS专题开发规范10版

专题开发规范

专题开发规范1

1.概要介绍4

1.1.文档目的与介绍4

1.2.目标读者4

2.静态页面开发规范5

2.1.XHTMLMP介绍5

2.2.XHTML语法规则5

2.3.XML声明和字符编码6

2.4.DOCTYPE声明6

2.5.基本标记简析6

2.6.XHTMLMP的缓存机制7

2.7.XHTMLMP的定时刷新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

概要介绍

文档目的与介绍

本文档为规范视讯中心3G手机门户网站专题开发而撰写

为视讯中心专题开发技术人员以及合作方专题开发技术人员提供有效的开发文档，为开发人员提供最基本的技术指导，为实现对品牌包，垂直频道，各省分公司的分权分域做铺垫。

同时文档对专题静态页面的开发提供做了限制，保证专题页面能良好的展现在定制终端上。

保证了用户的体验，在一定程度上有利于保证业务量

本文档主要针对240版专题的开发做规范限制

文档主要分为两大部分：

静态页面开发规范，专题模板开发规范。

静态页面开发规范包括了基本的xhtml开发规范和css样式表属性使用规范。

按照规范执行静态页面开发能有效的减少因为终端打开页面排版问题。

专题开发规范包含了，火狐浏览器下搭建开发和预览环境，freemarker代码逻辑的基本介绍，以及在oms系统下的freemarker自定义标签的使用方法。

目标读者

OMS平台专题模板开发技术人员；

静态页面开发规范

XHTMLMP介绍

由于所开发的专题是通过手机浏览器访问，需要遵循XHTMLMP规范。

XHTMLMP（XHTMLMobileProfile），它是定义在WAP2.0上面的标记语言（markuplanguage）。

XHTMLMP是XHTML的子集，在XHTMLMP出现之前，WAP网站的开发者们只能用WML和WMLscript来创建WAP的网站。

而与此同时，web的开发者们却在用强大的多的HTML、CSS、XHTML等来进行传统网站的开发。

所以XHTMLMP的目标就是浏览者在WAP和web上获得尽可能相似的浏览体验。

总的来说，XHTML是更严谨的和简洁的HTML版本

XHTML语法规则

所有标签都必须有结束标签

在HTML中，你可以打开许多标签，例如

和

而不一定写对应的

和

来关闭它们。

但在XHTML中这是不合法的。

XHTML要求有严谨的结构，所有标签必须关闭。

如果是单独不成对的标签，在标签最后加一个"/"来关闭它。

例如:

所有标签的元素和属性的名字都必须使用小写

XHTML对大小写是敏感的，和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body>。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。属性的值必须放置在双引号内不支持属性简写在html中，如下写法是正确的：<inputtype="checkbox"checked/>。而xhtml中必须这样写：<inputtype="checkbox"checked="checked"/>标签的嵌套必须正确同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：/b>必须修改为：就是说，一层一层的嵌套必须是严格对称。所有的属性必须用引号""括起来在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:<height=80>必须修改为：<height="80">特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：<alt="say'hello'">把所有<（小于号）和&等等特殊符号用编码表示任何小于号（<），不是标签的一部分，都必须被编码为<任何大于号（>），不是标签的一部分，都必须被编码为>任何与号（&），不是实体的一部分的，都必须被编码为&不要在注释内容中使“--”“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:用等号或者空格替换内部的虚线。XML声明和字符编码<?xmlversion="1.0"encoding="UTF-8"?>所的XHTMLMP文档都是XML文档，因此开始都会有一个XML声明。这里也可以指定文档的字符编码。对于当前天翼视讯门户所涉及到的页面，规定使用<?xmlversion="1.0"encoding="UTF-8"?>DOCTYPE声明对于所开发的专题页面，必须声明<!DOCTYPEhtmlPUBLIC"-//WAPFORUM//DTDXHTMLMobile1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd">若所开发的静态页面不按照上面所规定的声明，会导致部分手机打开页面会蜷缩在屏幕的左上角，严重影响用户体验度。基本标记简析<html>是XHTMLMP的根标记。目前，该标记的xmlns属性只能是http://www.w3.org/1999/xhtml这个值，这个用来保证严格遵守XHTMLMP标准。但是即使缺失了这个标记，大部分浏览器还是能正常显示页面。<head>标记用来存放关于文档本身的信息。比如<title>和<link>,还有<meta>，这几个标记的功能和在传统的html里面的功能是一样的。标记的text-align属性已经被取消了，可以在css中定义实现这个功能，如：p{text-align:right}XHTMLMP的缓存机制这里的缓存就是客户端用来临时存储XHTML文档的空间，如果浏览器发现缓存里面有这个页面了而且没有过期，那它就直接显示这个页面，而不需要再次联网下载，这样节省了时间。也可以可以禁止缓存，代码如下：<head><title>XHTMLMPTutorial

如果你要设置缓存时间是300秒的话，代码如下：

XHTMLMPTutorial

有些wap浏览器是没有缓存的，所以你设置了也未必能起到作用。

XHTMLMP的定时刷新

XHTMLMPTutorial

上面的代码让页面每隔15秒刷新一次！

注意：

必须包含这句：

，

如果没的话，那可能刷新后只是看到缓存中的副本，并没重新从服务器下载页面。

还一个用法就是用来URL自动跳转，例子如下：

XHTMLMPTutorial

但不是所有浏览器都支持refresh，当给某个页面添加自定跳转的时候，建议最好添加一个固定的链接，可供用户手动点击跳转到相应页面。

最基本的XHTML文档结构

xmlversion="1.0"?

DOCTYPEhtmlPUBLIC"-//WAPFORUM//DTDXHTMLMobile1.0//EN""http:

//www.wapforum.org/DTD/xhtml-mobile10.dtd">

//www.w3.org/1999/xhtml">

XHTMLMP

Helloworld.WelcometoourXHTMLMPtutorial.

红色标注部分不可缺少，如果缺少将会有很多手机打开页面不正常

基本要求

由于现在手机终端宽度大小不一致。

甚至有部分终端为320宽度的屏幕，但是无法支持320版炫动的展示效果。

对于240版本的专题开发，静态页面要求在页面宽度上做100%自动适应。

自适应宽度的页面能更好的适配在各个终端上。

CSS使用规范限制

基本介绍和建议

采用XHTMLMP来开发静态页面，最重要的是它对CSS的

支持。

这使得XHTMLMP开发的页面，相比原先WML开发的wap页面具有更好的展示效果。

但是由于手机终端浏览器的多种多样，许多浏览器多CSS的支持相当有限。

所以开发的静态页面如果不按照一定的CSS使用规则，会导致一部分手机打开页面之后排版混乱，严重影响用户使用。

本章节在现在网络上完全没有参考，也没有任何一家权威机构对当前手机终端浏览器做过统计和测试，无法精确的得到手机浏览器对CSS的支持情况，按照这一年多以来专题开发经验，目前定制机内置浏览器大概有以下几种：

MobileIE， Polaris Browser，obgio，openware，operamobile等等。

这类浏览器对CSS的支持情况各不相同，而且相同浏览器不同版本对css的支持情况也会不同。

因此对CSS的使用要格外谨慎，特别是对于重大的布局属性，比如float是禁止使用的，具体会在下文举例介绍。

建议：

如果当页面UI设计对静态页面布局带来困难，建议修改设计。

如果开发的页面无法正常的展现在手机上，再好的设计都是空谈。

CSS使用规范

选择器的使用

类型选择器：

h1{font-style:

italic}元素名称必须小写。

　　Class选择器：

.class{color:

blue}对应标签的class属性，还可以联合元素名称使用h1.class{color:

blue}。

ID选择器：

#id{color:

red}对应标签的id属性也可联合元素名称。

通用选择器：

*{color:

blue}，所有的标签。

禁止使用！

float属性

float属性定义元素在哪个方向浮动，但是由于有一部分终端对float属性不支持，所以目前float属性的禁止使用的。

如果使用会造成所浮动的域浮动到页面的左上角，页面根本无法使用。

margin属性

不允许使用auto，若使用负值，必须包含在

中,即一个中只能有

或

，不容许table里

嵌套出现

，举例如下：

XXXX
这样为正确的格式

错误格式如下：

这样为错误的格式:

div中出现了td或tr

display属性

不允许使用none值，不允许使用inline-block

positon属性

大部分终端不支持，禁止使用，不要采用多个元素互相叠加的设计。

表单类样式属性

大部分手机，表单类样式，对表单的展现效果设定不起作用比如input,select,button,单选，多选按钮，下拉菜单，文本输入框等。

对于页面中需要加入表单类，必须使用手机默认的控件样式。

对于button标签，禁止使用，可以使用input标签代替，但也不允许input引用图片之类的样式，必须使用原有样式。

iframe

在页面中引用其他网页的技术，禁止使用

说明

对于目前对CSS属性的限制，以上内容仅仅是一部分，还有待日后添加。

模板开发规范

基本介绍

模板开发使用FreeMarker模板引擎开发。

开发需要遵循FreeMaker语法规范

模板语言使用说明

概述

在FreeMarker中，使用FTL标记引用指令，有三种FTL标记。

两种指令

预定义指令：

引用方式为<#指令名称>

用户定义指令：

引用方式为<@指令名称>，引用用户定义指令时须将#换为@。

三种FTL标记

开始标记：

<#指令名称>

结束标记：

空标记：

<#指令名称/>

并且每一个开始标记必须有一个结束标记去关闭它比如：

<#if>判断开始标记，必须有结束标记关闭，否则将无法编译无法通过。

大小写敏感，list是正确的FTL指令，而List不是；${name}和${NAME}是不同的

标签必须合理嵌套，例如：

<#if<#include'foo'>='bar'>...是不合法的

注释使用<#---->,例如<#--注释内容-->

变量，序列，散列

变量

在模板中定义的变量有三种类型：

plain变量：

可以在模板的任何地方访问，包括使用include指令插入的模板，使用assign指令创建和替换。

局部变量：

在宏定义体中有效，使用local指令创建和替换。

循环变量：

只能存在于指令的嵌套内容，由指令（如list）自动创建。

注意：

宏的参数是局部变量，不是循环变量。

局部变量隐藏同名的plain变量

循环变量隐藏同名的plain变量和局部变量

内部循环变量隐藏同名的外部循环变量

仔细阅读如下代码，便可以理解上文所说的“隐藏”。

在定义变量，或者遍历list的时候，变量名是可以重复的，只要遵循以上的“隐藏”规则。

注：

数字标号表示输出前后顺序，注释部分为输出值。

<#assignx="plain">

1.${x}<#--plain-->

<@test/>

6.${x}

<#list["loop"]asx>

7.${x}<#--loop-->

<#assignx="plain2">

8.${x}<#--loop-->

9.${x}<#--plain2-->

<#macrotest>

2.${x}<#--plain-->

<#localx="local">

3.${x}<#--local-->

<#list["loop"]asx>

4.${x}<#--loop-->

5.${x}<#--local-->

输出变量值

a）对于一般变量：

${变量名}获取，变量名只能是字母、数字、下划线、$、#、@的组合，且不能以数字开头

b）对于散列中的变量：

有两种方式调用：

点“.”语法，和括号“[]”语法

点语法：

变量名字和顶层变量的名字受同样的限制。

方括号语法：

变量名字无限制，可以是任意的表达式的结果

book.author.name

book.author.["name"]

book["author"].name

book["author"]["name"]

以上方法都是等价的

C）对于序列中的变量

使用和散列的方括号语法一样，只是方括号中的表达式值必须是数字，初始下表为0使用[startIndex..endIndex]语法，从序列中获得序列片断（也是序列）；startIndex和endIndex是结果为数字的表达式

序列

模板中会经常遍历list,必须通过使用list指令,即<#listjmListasjm>…jmList是集合的表达式，在oms系统中，一般是由自定义表达式<@cms/>生成得到，也可以按照一定的需求自定义构建。

jm是循环变量的名字，不能是表达式。

当在遍历jmList时，会将遍历变量的值保存到jm中。

就可以使用jm.NAME 方式来获取jm对象中的属性值。

List指令还隐含了两个循环变量：

m_index:

当前迭代项在所有迭代项中的位置，是数字值。

jm_has_next:

用于判断当前迭代项是否是所有迭代项中的最后一项。

其中“jm”为自己定义的循环变量名。

例如，如果你使用<#listlistasl>..定义，那么就要使用l_index,l_has_next。

在list的循环过程中，如果需要跳出循环可以使用<#break/>命令

freemaker还给list提供了三种排序方法：

sort升序方式，对序列进行排序，要求序列中的变量必须是：

字符串（按首字母排序）,数字，日期值

sort_by方式，有一个参数，该参数用于指定想要排序的子变量，排序是按照变量对应的值进行排序,如：

<#listuserList?

sort_by（“age”）asuser>…age是User对象的属性，排序是按age的值进行的。

reverse降序排序函数<#listlist?

reverseasl>…。

reverse使用同sort相同。

reverse还可以同sort_by一起使用如：

想让用户按年龄降序排序，那么可以这个样写<#listuserList?

sort_by（“age”）?

reverseasuser>…

多个序列还以通过“+”来链接

散列

散列简单的可以理解为map，由逗号分隔的键/值列表，由大括号限定，键和值之间用冒号分隔，例子：

{"name":

"greenmouse","price":

150}键和值都是表达式，但是键必须是字符串。

对于散列也可以使用<#list>命令来遍历，并且可以使用三种排序方式，

算术运算，比较操作符，逻辑操作符

算术运算

Freemaker中可以使用＋、－、×、／、％，这些运算符的使用与一般其他编程语言完全相同，但是操作符两边必须是数字。

使用+操作符时，如果一边是数字，一边是字符串，就会自动将数字转换为字符串。

比较操作符

使用=（或==，完全相等）测试两个值是否相等，使用!

=测试两个值是否不相等

=和!

=两边必须是相同类型的值，否则会产生错误，例如<#if1="1">会引起错误

Freemarker是精确比较，所以对"x"、"x"和"X"是不相等的

对数字和日期可以使用<、<=、>和>=，但不能用于字符串

由于Freemarker会将>解释成FTL标记的结束字符，所以对于>和>=可以使用括号来避免这种情况，例如<#if（x>y）>所以必须使用lt、lte、gt和gte来替代<、<=、>和>=

逻辑操作符

&&（and）、||（or）、!

（not）与JAVA语法用法相同

内建函数

内建函数的用法类似访问散列的子变量，只是使用“?

”替代“.”，下面列出常用的一些函数

字符串使用的：

html：

对字符串进行HTML编码

cap_first：

使字符串第一个字母大写

lower_case：

将字符串转换成小写

upper_case：

将字符串转换成大写

trim：

去掉字符串前后的空白字符

序列使用的：

size：

获得序列中元素的数目

数字使用的：

int：

取得数字的整数部分（如-1.9?

int的结果是-1）

更多函数请参考XXfreemark内建函数。

日期

Freemarker对于日期的处理，用内建函数string来格式化，比如对于：

<#assigncurrent_time=”20110223211100”/>

${current_time?

string（"yyyy-MM-ddHH:

mm:

ss"）}

输入2011-02-1121:

11:

还可以通过使用?

date,?

time和?

datetime告诉freemaker使用日期的那一部分

date:

只使用年、月、日

time:

只使用时、分、秒和毫秒部分

datetime:

日期和时间两部分都被使用

宏

宏是一个模板片段与变量相关联。

你可以使用定义的指令，可以帮助你多次使用。

宏定义完成之后，就是一个自定义指令，你可以通过传递参数，通过宏内部运行得到想要的返回值。

宏的灵活使用，可以给模板开发带来极大的便利性。

简单范例

<#macrogreet>

HelloWJoe!

上面这个macro不会打印任何东西，它只是创建一个宏变量。

这里有个变量叫greet，在<#macrogreet>和之间叫宏定义体.，里面将仅当你使用的参数。

如果你要使用这样一个macro，可以这样 <@greet>

这个时候才真正使用这个macro，将会打印一句话

宏参数

在macro中定义参数要放在macro变量后面，如：

<#macrogreetperson>

Hello${person}

在使用的时候：

<@greetperson=’Fred’/>and<@greetperson=’Batman’/>

就会打印两条数据分别为 HelloFred!

和HelloBatman,参数person众所我们所传进去的。

宏的嵌套内容

宏的嵌套内容，在日常oms模板开发中，使用相当广泛的。

在形式上看，可以把宏比喻为java的方法，或者函数。

嵌套内容的使用，使得宏可以返回输出相应的值。

比如宏定义如下：

<#macrogetRecommendnodecontId>

<@cmsname="jmList"obj="点播节目"path="/*"fields="NODE_ID,PUB_URL,节目描述,图片,NAME,播放时长,UPDATE_TIME,PUBLIS

展开阅读全文