科技有限公司leap开发人员参考

《科技有限公司leap开发人员参考》由会员分享，可在线阅读，更多相关《科技有限公司leap开发人员参考（75页珍藏版）》请在金锄头文库上搜索。

1、 深圳市永兴元科技有限公司 LEAPLEAP 开发人员参考开发人员参考 【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. 定义 html 模板文件 54 4.2. 控件服务端 62 4.3. JSP 控件编写 . 68 4.4

2、. JSP 控件快捷参数 . 70 4.5. JSP 控件内置属性 . 71 4.6. JSP 控件内置方法 . 72 4.7. 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

3、 1. 新建网站新建网站资源资源 使用 super 登录 LEAP 应用集成开发环境，点击菜单【Web-Studio】【网站资源】 【门户管理】 ，点击列表【新增】按钮。添加一个资源名称为“webdemon” ，显示名称为“网 站示例”的网站（如下图） ，并点击确定。 - 这个地方先不用填写映射路径和网站头部配置还有网站脚部配置。按照下图填写就可以了。 2、保存完成之后就会看到如下图所示的网站资源。 3、然后点击【网站示例】前面的加号，展开就会出现一个【网站地图】的菜单（如下图） 2. 新建网站菜单新建网站菜单 点击【网站地图】菜单，然后点击【新增】按钮，按下图所示填写相应内容，并保存。 重复

4、以上步骤，建立所有网站的资源节点。如图所示： 建设一个菜单“魅力江夏” 建设一个菜单“区域经济” 建设一个菜单“政务公开” 建设一个菜单“新闻地图” 建设一个菜单“社区服务” 建设一个菜单“聚焦三农” 建好之后，如图所示的菜单： 点击菜单“魅力江夏“，再点击”新增“，添加一个栏目。 在“魅力江夏“下面新增一个”江夏报道“的栏目。 继续以上的步骤，新增一个“江夏魅力”的栏目。 完成之后菜单如下： 点击菜单“政务公开“，再点击”新增“，添加一个栏目。 在“政务公开“下面新增一个”政务咨询“的栏目。 新增一个“公告公示“的栏目。 完成之后菜单如下。 点击菜单“新闻地图” ，再点击“新增” ，添加一个

5、栏目。 在“新闻地图“下面新增一个”最新动态“的栏目。 继续以上的步骤，新增一个“热点专题”的栏目。 新增一个“省市新闻”的栏目。 新增一个“委办局新闻”的栏目。 新增一个“乡镇街新闻”的栏目。 完成后菜单如下。 3. 页面设计与页面设计与数据绑定数据绑定 现在做一个简单的网站首页，根据效果图来设定网站的布局，和所需的控件。 效果图如下： 3.1. 页面设计(属于美工部分) 3.1.1. 页面布局 1、 点击菜单【网站资源】按钮【网站编辑】出现以下界面（如下图） ： 2、 点击左上角新建网站“新建文件“图标。出现以下界面。 划红框的部分暂时不用管,后面再介绍它的用途. 同样脚部划红框的部分也暂

6、时不用. 3、 双击设计区域的部分，点击排版方式，选中单一排版。点击确定，单一排版加到设计区 域内。 设计导航的布局。 选中灰色区域，出现八个点，可以拖拽该区域大小。 点击“灰色区域“，键盘上按键，点击回车。光标出现在下一行。 点击排版方式“左右排版“，设计新闻的布局。 分为三列。 DIV 个数选中 3，设计上间距为 5，左间距 2 点击 A 区域，再点击右边的样式栏，改变 A 区域的宽度和高度。 B 区域和 C 区域同样修改。 B 区域高度：252px 宽度：500px C 区域高度：252px 宽度：220px 点击排版方式“左右排版“，设计新闻第二行的布局。 A B C 首先用左右排版分

7、为三个列。 这三个区域，还是按照上面的 A、B、C 区域的宽度设置，高度为 265px。 点击中间区域，再点击左右排版。 点击选中刚才加入的左右排版，点击样式栏，点击背景颜色，双击选中框，选中一种颜色区 分#0099cc。 两块区域的，高度改成 99%，宽度改成 49% 双击，蓝色区域左边一块，点击“上下排版“ 点选一个区域，设置高度宽度，高度为 127px，宽度不用设置。 蓝色右边区域，一样的操作。 把中间 4 块区域都改变背景色#00ffff，方便操作，整个页面设计完了之后在把背景色去掉。 在效果图下方图片布局。 点击单一布局，放入设计区域即可。 这时候会发现，下面还剩了一大块空白处，然后

8、点击空白处，选中中间的点向上拖拽。 现在布局就基本完成了。 3.1.2. 绑定控件 现在就是拖拽控件，往每块区域里面放相应的控件。 首先第一个控件是一个导航栏，所以，先到控件栏里的“基础控件“下面的导航栏分类找到 所需要的控件。我们现在选中的是一个头部导航栏。 双击头部导航的布局灰色区域 选中头部导航四这个控件 不需要修改任何属性，直接点确定即可。 控件加进去之后，点击控件， 然后下方的“点击选择控件“选中下图元素。 控件就会被选中出现 8 个改变控件大小的点。 点中中间的点，向上拖拽，到适应高度。 按照下图，双击 A 区域，选中控件栏中的“排版控件“绑定一个列表的头部。 选择排版控件中的表头

9、 3 表头就绑定到 A 区域内。 然后根据效果图来改变表头的样式。 这是效果图的表头样式 首先鼠标点击选中蓝色区域，再点击样式栏。 在样式栏改变，下图的内容。 双击选中区域，改变字体的颜色 点击”内容”部分，把内容两个字删除。 选中下方的点，拖拽到适应高度。 再选择改变边框大小和 颜色。 注意：这个地方有可能改变之后没有出现边框，可以拖拽几个点到适应的宽度高度。 然后去掉布局的背景颜色，看看效果。 现在做好了一个表头，后面有很多个表头都是一样的，不可能每个都来修改一遍，所以需要 把改好的表头，保存成一个新的控件，这个在后面的控件中用到。 首先单击“表头“控件，点击选择控件的元素 鼠标移到导航栏

10、“控件“上。 点击“保存控件“，填写以下内容，点击确定，保存成一个新的表头控件。 下面的“布局模板“该为“新闻列表”。 再点击“打开控件“，就能看到刚才保存的新控件，在后面的控件绑定中就能用到。 选中 B 区域，双击，鼠标移到导航栏“控件”点击“选择控件”。 选中刚才保存的表头，点击确定即可。 然后进行微调，调整宽度和高度，去掉布局的背景颜色即可。 同样表头的布局都一样的操作。 修改表头里面的字，按照效果图修改。 双击表头文字，修改之后，鼠标移到导航栏“编辑”，选中文字，点击 每个表头都是同样的修改方式。 现在来绑定新闻列表。 还是看到控件栏里面的“基础控件”。 选中一个新闻列表的控件， 我们

11、这里选择“新闻列 表（普通）”这个控件。 里面有很多属性，暂时不需要修改，点击确定即可。 控件加入进来之后，效果不是很理想，需要修改，首先要修改新闻标题的宽度。 点击控件，选中 然后再改变新闻标题的宽度。 因为时间的显示和隐藏都在属性栏里面， 所以这里不需要样式 去控制。 如保存表头控件一样，把修改好的控件保存成一个新的控件，方便后面的地方用到。 首先点击控件，再选中 按上面步骤操作，保存控件。 后面的新闻列表都可以使用该新的控件了。 这个时候就可以预览一下效果了。 点击导航栏“文件”效果预览。 点击 A 区域布局，选中排版控件中的图片链接，上传图片上去。 基本上主要区域的布局和控件绑定都完成

12、了。 选中导航栏，文件下面的保存文件， 按照下面填写内容，点击确定即可。 现在就开始做头部文件和脚部文件。 首先刷新本页面，使页面变成空白 先点击单一排版，放一个容器。 根据头部的效果图做一个头部的页面。 然后点击”保存页面”。这个地方要注意保存的时候需要点选头尾文件。 脚部文件同样的操作。 这里美工的工作就暂时结束了。 3.2. 数据绑定(属于开发人员部分) 3.2.1. 绑定控件数据 使用 Web Studio 编辑器打开美工做好的页面。 首先点击导航栏控件。点击选择控件 打开门户管理系统。 http:/localhost:8080/Demon/LEAP/Resource/generalI

13、ndex/Login.html 登录之后，点击 web studio 再点击网站资源门户管理网站示例。 复制网站地图的资源名称。 回到编辑器，点击属性栏，填写写查询条件和其他属性。 填写 sql 语句，where 后面的语句。导航的写法就是 name=webdemon_webmap 点击“新闻动态“下面的新闻列表控件 再点击 再去门户管理的网站示例里面找到对应栏目，复制资源名称。 按下图填写属性栏。 查询新闻的条件如下 newtype like %,webdemon_zxdt,% 以此类推，完成以下所有新闻控件的数据绑定。 点击保存完成页面。 完成之后控件绑定就完成了。 3.2.2. 绑定头尾

14、文件 首先在项目中找到美工做好的头部文件和脚部文件 对文件点击鼠标右键点击属性，获得它的路径。 记得这里从 LEAP 开始复制。 然后点击 Web Studio点击门户管理右侧列表点击修改 粘贴刚才的路径到网站头部配置 脚部的配置是同样的。 3.2.3. 绑定页面映射 然后点击 Web Studio点击门户管理右侧列表点击修改 点击映射路径后面的放大镜，以选取网站跳转的路径。 点击确定即可。 可以在栏目下面添加几条测试新闻看看数据是否绑定成功。 点击“新闻内容“，点击”新闻管理“，选中一个需要添加新闻的栏目。 添加新闻 现在就可以访问网站了，路径为 http:/localhost:8080/D

15、emon/ webdemon Webdemon 这个名称就是网站的名称。 4. JSP 控件开发控件开发 4.1. 定义 html 模板文件 首先在项目的 LEAP 目录下面建一个文件夹 点击鼠标右键，新建文件夹 DemonResource 再在 DemonResource 下面新建 Control 文件夹。 再在 DemonResource 下面新建 Demon.html 文件 文件名处键入“Demon“,点击完成 创建好 html 后，如图所示： 按照下面代码，编写 Demon.html LEAP/LWBPResource/lwbp.css 和 LEAP/LWBPResource/lwbp

16、.js 为内置的样式和 JS 的引用。 再在中间编写控件的主要部分。 按照下面代码编写。 Insert title here 标题 【详细】 完整 Demon.html 文件代码如下： 在文件夹下面建一个名为“Demon“的文件夹 在该文件夹下面建三个文件，为别为 Demon.css Demon.js Demon.jsp,这是控件所需的三个文 Insert title here 标题 【详细】 件。 建好后如图所示。 点击 Demon.css 编写 css 代码，代码如下： .Demon_newslist overflow:hidden; zoom:1; clear:both; padding:5px 10px 0; font-size: 14px; width: 100%; height: 100%; .Demon_newslist ul padding:0; margin: 0; .Demon_newslist li height:25px; line-height:25px; clear:both;