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

深圳市永兴元科技有限公司LEAP开发人员参考【WEBStudio】版本：5.01.新建网站资源.................................................................................................................................32.新建网站菜单.................................................................................................................................43.页面设计与数据绑定..................................................................................................................143.1.页面设计(属于美工部分)...............................................................................................153.1.1.页面布局..............................................................................................................153.1.2.绑定控件..............................................................................................................263.2.数据绑定(属于开发人员部分)......................................................................................433.2.1.绑定控件数据......................................................................................................433.2.2.绑定头尾文件......................................................................................................483.2.3.绑定页面映射......................................................................................................504.JSP控件开发................................................................................................................................544.1.定义html模板文件........................................................................................................544.2.控件服务端......................................................................................................................624.3.JSP控件编写...................................................................................................................684.4.JSP控件快捷参数...........................................................................................................704.5.JSP控件内置属性...........................................................................................................714.6.JSP控件内置方法...........................................................................................................724.7.JSP控件语法...................................................................................................................74新建示例项目——LEAP.WEB.Demon，包括服务端（LEAP.Demon.BLL）和客户端（LEAP.WEB.Demon）两个工程，本教程示例项目的应用服务器端口为8080，context名称是Demon（读者可以根据情况自行配置），因此应用集成开发环境(LEAPStudio)访问地址为：新建网站资源使用super登录LEAP应用集成开发环境，点击菜单【Web-Studio】——【网站资源】——【门户管理】，点击列表【新增】按钮。添加一个资源名称为“webdemon”，显示名称为“网站示例”的网站（如下图），并点击确定。------这个地方先不用填写映射路径和网站头部配置还有网站脚部配置。按照下图填写就可以了。2、保存完成之后就会看到如下图所示的网站资源。3、然后点击【网站示例】前面的加号，展开就会出现一个【网站地图】的菜单（如下图）2.新建网站菜单点击【网站地图】菜单，然后点击【新增】按钮，按下图所示填写相应内容，并保存。重复以上步骤，建立所有网站的资源节点。如图所示：建设一个菜单“魅力江夏”建设一个菜单“区域经济”建设一个菜单“政务公开”建设一个菜单“新闻地图”建设一个菜单“社区服务”建设一个菜单“聚焦三农”建好之后，如图所示的菜单：点击菜单“魅力江夏“，再点击”新增“，添加一个栏目。在“魅力江夏“下面新增一个”江夏报道“的栏目。继续以上的步骤，新增一个“江夏魅力”的栏目。完成之后菜单如下：点击菜单“政务公开“，再点击”新增“，添加一个栏目。在“政务公开“下面新增一个”政务咨询“的栏目。新增一个“公告公示“的栏目。完成之后菜单如下。点击菜单“新闻地图”，再点击“新增”，添加一个栏目。在“新闻地图“下面新增一个”最新动态“的栏目。继续以上的步骤，新增一个“热点专题”的栏目。新增一个“省市新闻”的栏目。新增一个“委办局新闻”的栏目。新增一个“乡镇街新闻”的栏目。完成后菜单如下。3.页面设计与数据绑定现在做一个简单的网站首页，根据效果图来设定网站的布局，和所需的控件。效果图如下：3.1.页面设计(属于美工部分)3.1.1.页面布局1、点击菜单【网站资源】——按钮【网站编辑】出现以下界面（如下图）：2、点击左上角新建网站“新建文件“图标。出现以下界面。划红框的部分暂时不用管,后面再介绍它的用途.同样脚部划红框的部分也暂时不用.3、双击设计区域的部分，点击排版方式，选中单一排版。点击确定，单一排版加到设计区域内。设计导航的布局。选中灰色区域，出现八个点，可以拖拽该区域大小。点击“灰色区域“，键盘上按键，点击回车。光标出现在下一行。点击排版方式“左右排版“，设计新闻的布局。分为三列。DIV个数选中3，设计上间距为5，左间距2点击A区域，再点击右边的样式栏，改变A区域的宽度和高度。B区域和C区域同样修改。B区域高度：252px宽度：500pxC区域高度：252px宽度：220px点击排版方式“左右排版“，设计新闻第二行的布局。ABC首先用左右排版分为三个列。这三个区域，还是按照上面的A、B、C区域的宽度设置，高度为265px。点击中间区域，再点击左右排版。点击选中刚才加入的左右排版，点击样式栏，点击背景颜色，双击选中框，选中一种颜色区分#0099cc。两块区域的，高度改成99%，宽度改成49%双击，蓝色区域左边一块，点击“上下排版“点选一个区域，设置高度宽度，高度为127px，宽度不用设置。蓝色右边区域，一样的操作。把中间4块区域都改变背景色#00ffff，方便操作，整个页面设计完了之后在把背景色去掉。在效果图下方图片布局。点击单一布局，放入设计区域即可。这时候会发现，下面还剩了一大块空白处，然后点击空白处，选中中间的点向上拖拽。现在布局就基本完成了。3.1.2.绑定控件现在就是拖拽控件，往每块区域里面放相应的控件。首先第一个控件是一个导航栏，所以，先到控件栏里的“基础控件“下面的导航栏分类找到所需要的控件。我们现在选中的是一个头部导航栏。双击头部导航的布局灰色区域选中头部导航四这个控件不需要修改任何属性，直接点确定即可。控件加进去之后，点击控件，然后下方的“点击选择控件“选中下图元素。控件就会被选中出现8个改变控件大小的点。点中中间的点，向上拖拽，到适应高度。按照下图，双击A区域，选中控件栏中的“排版控件“绑定一个列表的头部。选择排版控件中的表头3表头就绑定到A区域内。然后根据效果图来改变表头的样式。这是效果图的表头样式首先鼠标点击选中蓝色区域，再点击样式栏。在样式栏改变，下图的内容。双击选中区域，改变字体的颜色点击”内容”部分，把内容两个字删除。选中下方的点，拖拽到适应高度。再选择改变边框大小和颜色。注意：这个地方有可能改变之后没有出现边框，可以拖拽几个点到适应的宽度高度。然后去掉布局的背景颜色，看看效果。现在做好了一个表头，后面有很多个表头都是一样的，不可能每个都来修改一遍，所以需要把改好的表头，保存成一个新的控件，这个在后面的控件中用到。首先单击“表头“控件，点击选择控件的元素鼠标移到导航栏“控件“上。点击“保存控件“，填写以下内容，点击确定，保存成一个新的表头控件。下面的“布局模板“该为“新闻列表”。再点击“打开控件“，就能看到刚才保存的新控件，在后面的控件绑定中就能用到。选中B区域，双击，鼠标移到导航栏“控件”点击“选择控件”。选中刚才保存的表头，点击确定即可。然后进行微调，调整宽度和高度，去掉布局的背景颜色即可。同样表头的布局都一样的操作。修改表头里面的字，按照效果图修改。双击表头文字，修改之后，鼠标移到导航栏“编辑”，选中文字，点击每个表头都是同样的修改方式。现在来绑定新闻列表。还是看到控件栏里面的“基础控件”。选中一个新闻列表的控件，我们这里选择“新闻列表（普通）”这个控件。里面有很多属性，暂时不需要修改，点击确定即可。控件加入进来之后，效果不是很理想，需要修改，首先要修改新闻标题的宽度。点击控件，选中然后再改变新闻标题的宽度。因为时间的显示和隐藏都在属性栏里面，所以这里不需要样式去控制。如保存表头控件一样，把修改好的控件保存成一个新的控件，方便后面的地方用到。首先点击控件，再选中按上面步骤操作，保存控件。后面的新闻列表都可以使用该新的控件了。这个时候就可以预览一下效果了。点击导航栏“文件”效果预览。点击A区域布局，选中排版控件中的图片链接，上传图片上去。基本上主要区域的布局和控件绑定都完成了。选中导航栏，文件下面的保