您的当前位置：首页正文

LEAP开发人员参考-LWBP实例开发文档

来源：筏尚旅游网

深圳市永兴元科技有限公司

LEAP开发人员参考

【WEB Studio】

版本： 5.0

1. 新建网站资源................................................................................................................................. 3 2. 新建网站菜单................................................................................................................................. 4 3. 页面设计与数据绑定 .................................................................................................................. 14

3.1. 页面设计(属于美工部分)............................................................................................... 15

3.1.1. 页面布局 .............................................................................................................. 15

3.1.2. 绑定控件 .............................................................................................................. 26 3.2. 数据绑定(属于开发人员部分) ...................................................................................... 43

3.2.1. 绑定控件数据...................................................................................................... 43 3.2.2. 绑定头尾文件...................................................................................................... 48 3.2.3. 绑定页面映射...................................................................................................... 50

4. JSP控件开发................................................................................................................................ 54

4.1.

4.2. 4.3. 4.4. 4.5. 4.6. 4.7.

定义html模板文件 ........................................................................................................ 54 控件服务端 ...................................................................................................................... 62 JSP控件编写 ................................................................................................................... 68 JSP控件快捷参数 ........................................................................................................... 70 JSP控件内置属性 ........................................................................................................... 71 JSP控件内置方法 ........................................................................................................... 72 JSP控件语法 ................................................................................................................... 74

新建示例项目——LEAP.WEB.Demon，包括服务端（LEAP.Demon.BLL）和客户端（LEAP.WEB.Demon）两个工程，本教程示例项目的应用服务器端口为8080，context名称是Demon（读者可以根据情况自行配置），因此应用集成开发环境(LEAP Studio)访问地址为： http://localhost:8080/LEAPV5/LEAP/Resource/generalIndex/Login.html

1. 新建网站资源

使用super登录LEAP应用集成开发环境，点击菜单【Web-Studio】——【网站资源】——【门户管理】，点击列表【新增】按钮。添加一个资源名称为“webdemon”，显示名称为“网站示例”的网站（如下图），并点击确定。

--->--->

这个地方先不用填写映射路径和网站头部配置还有网站脚部配置。按照下图填写就可以了。

2、保存完成之后就会看到如下图所示的网站资源。

3、然后点击【网站示例】前面的加号，展开就会出现一个【网站地图】的菜单（如下图）

2. 新建网站菜单

点击【网站地图】菜单，然后点击【新增】按钮，按下图所示填写相应内容，并保存。

重复以上步骤，建立所有网站的资源节点。如图所示：建设一个菜单“魅力江夏”

建设一个菜单“区域经济”

建设一个菜单“政务公开”

建设一个菜单“新闻地图”

建设一个菜单“社区服务”

建设一个菜单“聚焦三农”

建好之后，如图所示的菜单：

点击菜单“魅力江夏“，再点击”新增“，添加一个栏目。

在“魅力江夏“下面新增一个”江夏报道“的栏目。

继续以上的步骤，新增一个“江夏魅力”的栏目。

完成之后菜单如下：

点击菜单“政务公开“，再点击”新增“，添加一个栏目。

在“政务公开“下面新增一个”政务咨询“的栏目。

新增一个“公告公示“的栏目。

完成之后菜单如下。

点击菜单“新闻地图”，再点击“新增”，添加一个栏目。

在“新闻地图“下面新增一个”最新动态“的栏目。

继续以上的步骤，新增一个“热点专题”的栏目。

新增一个“省市新闻”的栏目。

新增一个“委办局新闻”的栏目。

新增一个“乡镇街新闻”的栏目。

完成后菜单如下。

3. 页面设计与数据绑定

现在做一个简单的网站首页，根据效果图来设定网站的布局，和所需的控件。效果图如下：

3.1. 页面设计(属于美工部分) 3.1.1. 页面布局

1、点击菜单【网站资源】——按钮【网站编辑】出现以下界面（如下图）：

2、点击左上角新建网站“新建文件“图标。出现以下界面。

划红框的部分暂时不用管,后面再介绍它的用途.

同样脚部划红框的部分也暂时不用.

3、双击设计区域的部分，点击排版方式，选中单一排版。点击确定，单一排版加到设计区

域内。

设计导航的布局。

选中灰色区域，出现八个点，可以拖拽该区域大小。

点击“灰色区域“，键盘上按键，点击回车。光标出现在下一行。

点击排版方式“左右排版“，设计新闻的布局。

分为三列。

DIV个数选中3，设计上间距为5，左间距2

A B C

点击A区域，再点击右边的样式栏，改变A区域的宽度和高度。

B区域和C区域同样修改。

B区域高度：252px 宽度：500px C区域高度：252px 宽度：220px

点击排版方式“左右排版“，设计新闻第二行的布局。

首先用左右排版分为三个列。

这三个区域，还是按照上面的A、B、C区域的宽度设置，高度为265px。

点击中间区域，再点击左右排版。

点击选中刚才加入的左右排版，点击样式栏，点击背景颜色，双击选中框，选中一种颜色区分#0099cc。

两块区域的，高度改成99%，宽度改成49%

双击，蓝色区域左边一块，点击“上下排版“

点选一个区域，设置高度宽度，高度为127px，宽度不用设置。

蓝色右边区域，一样的操作。

把中间4块区域都改变背景色#00ffff，方便操作，整个页面设计完了之后在把背景色去掉。

在效果图下方图片布局。

点击单一布局，放入设计区域即可。

这时候会发现，下面还剩了一大块空白处，然后点击空白处，选中中间的点向上拖拽。

现在布局就基本完成了。

3.1.2. 绑定控件

现在就是拖拽控件，往每块区域里面放相应的控件。

首先第一个控件是一个导航栏，所以，先到控件栏里的“基础控件“下面的导航栏分类找到所需要的控件。我们现在选中的是一个头部导航栏。双击头部导航的布局灰色区域

选中头部导航四这个控件

不需要修改任何属性，直接点确定即可。

控件加进去之后，点击控件，

然后下方的“点击选择控件“选中下图元素。

控件就会被选中出现8个改变控件大小的点。点中中间的点，向上拖拽，到适应高度。

按照下图，双击A区域，选中控件栏中的“排版控件“绑定一个列表的头部。

选择排版控件中的表头3

表头就绑定到A区域内。

然后根据效果图来改变表头的样式。这是效果图的表头样式

首先鼠标点击选中蓝色区域，再点击样式栏。

在样式栏改变，下图的内容。

双击选中区域，改变字体的颜色

点击”内容”部分，把内容两个字删除。

选中下方的点，拖拽到适应高度。

再选择颜色。

改变边框大小和

注意：这个地方有可能改变之后没有出现边框，可以拖拽几个点到适应的宽度高度。

然后去掉布局的背景颜色，看看效果。

现在做好了一个表头，后面有很多个表头都是一样的，不可能每个都来修改一遍，所以需要把改好的表头，保存成一个新的控件，这个在后面的控件中用到。首先单击“表头“控件，点击选择控件的元素

鼠标移到导航栏“控件“上。

点击“保存控件“，填写以下内容，点击确定，保存成一个新的表头控件。

下面的“布局模板“该为“新闻列表”。

再点击“打开控件“，就能看到刚才保存的新控件，在后面的控件绑定中就能用到。选中B区域，双击，鼠标移到导航栏“控件”点击“选择控件”。

选中刚才保存的表头，点击确定即可。

然后进行微调，调整宽度和高度，去掉布局的背景颜色即可。

同样表头的布局都一样的操作。

修改表头里面的字，按照效果图修改。

双击表头文字，修改之后，鼠标移到导航栏“编辑”，选中文字，点击

每个表头都是同样的修改方式。

现在来绑定新闻列表。

还是看到控件栏里面的“基础控件”。选中一个新闻列表的控件，我们这里选择“新闻列表（普通）”这个控件。

里面有很多属性，暂时不需要修改，点击确定即可。

控件加入进来之后，效果不是很理想，需要修改，首先要修改新闻标题的宽度。点击控件，选中

然后再改变新闻标题的宽度。因为时间的显示和隐藏都在属性栏里面，所以这里不需要样式去控制。

如保存表头控件一样，把修改好的控件保存成一个新的控件，方便后面的地方用到。首先点击控件，再选中

按上面步骤操作，保存控件。

后面的新闻列表都可以使用该新的控件了。

这个时候就可以预览一下效果了。点击导航栏“文件”效果预览。

点击A区域布局，选中排版控件中的图片链接，上传图片上去。

基本上主要区域的布局和控件绑定都完成了。选中导航栏，文件下面的保存文件，

按照下面填写内容，点击确定即可。

现在就开始做头部文件和脚部文件。首先刷新本页面，使页面变成空白

先点击单一排版，放一个容器。

根据头部的效果图做一个头部的页面。

然后点击”保存页面”。这个地方要注意保存的时候需要点选头尾文件。

脚部文件同样的操作。

这里美工的工作就暂时结束了。

3.2. 数据绑定(属于开发人员部分) 3.2.1. 绑定控件数据

使用Web Studio编辑器打开美工做好的页面。

首先点击导航栏控件。点击选择控件

打开门户管理系统。

http://localhost:8080/Demon/LEAP/Resource/generalIndex/Login.html

登录之后，点击web studio

再点击网站资源——>门户管理——>网站示例。

复制网站地图的资源名称。

回到编辑器，点击属性栏，填写写查询条件和其他属性。

填写sql语句，where后面的语句。导航的写法就是name=’webdemon_webmap’

点击“新闻动态“下面的新闻列表控件

再点击

再去门户管理的网站示例里面找到对应栏目，复制资源名称。

按下图填写属性栏。

查询新闻的条件如下newtype like '%,webdemon_zxdt,%'

以此类推，完成以下所有新闻控件的数据绑定。点击保存完成页面。

完成之后控件绑定就完成了。 3.2.2. 绑定头尾文件

首先在项目中找到美工做好的头部文件和脚部文件

对文件点击鼠标右键点击属性，获得它的路径。

记得这里从LEAP开始复制。

然后点击Web Studio——>点击门户管理——>右侧列表点击修改

粘贴刚才的路径到网站头部配置

脚部的配置是同样的。

3.2.3. 绑定页面映射

然后点击Web Studio——>点击门户管理——>右侧列表点击修改

点击映射路径后面的放大镜，以选取网站跳转的路径。

点击确定即可。

可以在栏目下面添加几条测试新闻看看数据是否绑定成功。

点击“新闻内容“，点击”新闻管理“，选中一个需要添加新闻的栏目。

添加新闻

现在就可以访问网站了，路径为http://localhost:8080/Demon/ webdemon Webdemon这个名称就是网站的名称。

4. JSP控件开发

4.1. 定义html模板文件

首先在项目的LEAP目录下面建一个文件夹

点击鼠标右键，新建文件夹DemonResource

再在DemonResource下面新建Control文件夹。

再在DemonResource下面新建Demon.html文件

文件名处键入“Demon“,点击完成

创建好html后，如图所示：

按照下面代码，编写Demon.html

Insert title here

LEAP/LWBPResource/lwbp.css和LEAP/LWBPResource/lwbp.js为内置的样式和JS的引用。再在中间编写控件的主要部分。按照下面代码编写。

标题
【详细】

完整Demon.html文件代码如下：

Insert title here

标题
【详细】

在

文件夹下面建一个名为“Demon“的文件夹

在该文件夹下面建三个文件，为别为Demon.css Demon.js Demon.jsp,这是控件所需的三个文

件。

建好后如图所示。

点击Demon.css编写css代码，代码如下： .Demon_newslist{ }

.Demon_newslist ul { }

.Demon_newslist li{ }

.Demon_newslist li div{

overflow:hidden; zoom:1; clear:both;

padding:5px 10px 0; font-size: 14px; width: 100%; height: 100%;

padding:0; margin: 0;

height:25px; line-height:25px; clear:both;

list-style-type: none

background:#FFF;

}

float:left; color:#666

.Demon_newslist li a{ }

.Demon_newslist a:link,.Demon_newslist a:visited{ }

.Demon_newslist a:hover{ }

text-decoration:none; color:#666

text-decoration:none; color:#FC0 float:right; background:#fff; color:#FC0

名为Demon_newslist的样式名，就要作为刚才编写的html控件主代码的样式名。刚才建的jsp文件路径就要做为控件主体里contorl属性的路径，从LEAP路径开始。路径为：LEAP/DemonResource/Control/Demon/Demon.jsp Js文件和css文件都路径，都引用到html中。代码如下： Insert title here

标题

【详细】

condition=\"\" pagesize=\"\" istarget=\"\" charlength=\"\">

4.2. 控件服务端

首先创建一个名为“LEAP.WEB.Demon.BLL“的 Java项目按照下图建好目录。

建好之后点击鼠标右键——属性——JAVA构建路径——库（L）——点击添加外部JAR

选中LEAP.Web.Demon这个项目，找到jar文件，全选点击打开。

加入jar文件之后点击确定即可。

InitDemonControl类实现IInitEvent接口，代码如下。 package com.longrise.LEAP.Demon.Web;

import com.longrise.LEAP.Base.Config.IInitEvent;

public class InitDemonControl implements IInitEvent {

public void fire () {

// TODO Auto-generated method stub } }

控件类Demon.java继承 WebControlBase.java 代码如下。 package com.longrise.LEAP.Demon.Web.Control;

import com.longrise.LEAP.Base.Objects.EntityBean; import com.longrise.LEAP.Web.WebSite.WebControlBase;

public class Demon extends WebControlBase {

public String getName () {

// TODO Auto-generated method stub return null; }

@Override

protected EntityBean[] innerBuild ( String arg0 , StringBuffer arg1 , EntityBean arg2 ) {

// TODO Auto-generated method stub return null; } }

在InitDemonControl类里注册控件类Demon.java，代码如下。 package com.longrise.LEAP.Demon.Web; import com.longrise.LEAP.Base.Config.IInitEvent; import com.longrise.LEAP.Demon.Web.Control.Demon; import com.longrise.LEAP.Web.HTML.HTMLPageEngine;

public class InitDemonControl implements IInitEvent { public void fire () { //注册静态控件 HTMLPageEngine.getInstance().registControl(Demon.class); } } 编写控件类Demon.java,代码如下。

package com.longrise.LEAP.Demon.Web.Control;

import com.longrise.LEAP.Base.Objects.EntityBean; import com.longrise.LEAP.Base.Objects.EntityBeanSet; import com.longrise.LEAP.Web.Logic.WebGeneralLogic; import com.longrise.LEAP.Web.WebSite.WebControlBase;

public class Demon extends WebControlBase {

public String getName () {

//返回的名称，自己编写 return \"demon\"; }

@Override

protected EntityBean[] innerBuild ( String arg0 , StringBuffer arg1 , EntityBean arg2 ) {

//获得控件里面html的元素的属性

String charlength = getHTMLElement(\"charlength\"); if(charlength!=null && !charlength.equals(\"\")) {

//将控件的属性的值存到context里，方便jsp里面使用 context.put(\"charlength\", charlength); }

if ( !hasSearched ) {

//所要查询的字段

searchBuilder.fields(\"id\", \"title\", \"createtime\",\"newtype\",\"publisher\"); //查询方法得到结果集 EntityBeanSet set =

WebGeneralLogic.getInstance().getNewContents(searchBuilder); if(set!=null) { //把结果集赋值给一个内置变量 searchResult = set.getResult(); } } return null; } } 4.3. JSP控件编写首先要修改Demon.html控件的属性，刚才Demon.java里面的getName()里面返回的名称就作为html控件里面的sc属性。然后再写上查询条件（condition）,所查询的条数（pagesize），点击时是否弹出新窗口（istarget），标题的长度（charlength），按照以下代码编写。 Insert title here

标题
【详细】

修改完html之后开始编写jsp的代码，Demon.jsp代码如下

<%if(result!=null){ %>

<%if(context.get(\"charlength\")==null){ %> ${result.i.title } <%}else if(result[i].getString(\"title\")!=null){%> <%if(result[i].getString(\"title\").length() <%}else{ %> <%=result[i].getString(\"title\").substring(0,Integer.parseInt(context.get(\"charlength\").t <%} %> ${result.i.title } oString())) %>... <%}else{ %> <%} %>

<%if(context.isEmpty(\"istarget\")){ %> target=\"_blank\"> <%}else{ %> <%} %> 【详细】

<%} %>

<%} %> 这个时候一个控件就基本完成了。用控件的时候就是用Demon.html里面的内容就行了，代码如下。

标题
【详细】

4.4. JSP控件快捷参数

参数名称示例说明 result ${result.i.name} ${result.0.name} 从result中输出指定索引的指定字段的值如:${result.0.name} 结果集的第0个索引的name字段控件上定义了 treelevel属性后,查询结果为树的数据结构,可使用 tree 快捷参数访问: ${tree.length}:树的根节点的数据量 ${tree.0.length}:树的第一个根节点下属子节点的数据量 ${tree.0.name}:获取树的第一个根节点的name字段 ${tree.length} ${tree.0.length} ${tree.0.name} ${tree.i.j.name} ${tree.i.j.length} tree ${tree.i.j.k.name} ${tree.i.j.name}:树的第i个根节点-->第j个子节点的name字段 ${tree.i.j.k.length} ${tree.i.j.length}:树的第i个根节点-->第j个子节点下属子节点的数据量 ${tree.i.j.k.name}:树的第i个根节点-->第j个子节点-->第k个子节点的name字段 ${tree.i.j.k.length}:树的第i个根节点-->第j个子节点-->第k个子节点下属子节点的数据量 ${beans.beansname.i.name} ${beans.beansname.0.name} context中指定名称值的指定索引指定属性名的值 context中存储的数据类型支持 EntityBean[] , List , EntityBeanSet 如 context 中有个名称为childdata 类型为EntityBean[]的值 ${beans. childdata.0.name} : 获取 childdata第0个索引的name字段 beans ${bean.beanname.name} bean context中指定名称值的指定属性名的值 context中存储的数据类型支持 EntityBean 如 context中有个名称为 childdata 类型为EntityBean的值 ${bean.childdata.name} : 获取 childdata 的 name字段 context ${context.webcontext} ${style.new } ${style.new.conte输出模板上下文中指定字段值如: ${context.webcontext} 输出服务器上下文名称输出控件定义中指定scf标签的样式,样式内容包括(class,style,width,height) style

xt} 如:新闻控件内定义了

${style.rq }输style=\"width:100px\" ${style.new.rq }gbsq_link_orange\" 输出出 class=\"testC\" width=100 class=\"gbsq_newslist_newsest ${width.rq } width 输出控件定义中指定scf标签的宽度如:新闻控件内定义了