添加新首页及WebPart.doc

第一部分：新首页我来了(准备工作)1获取项目资源中的配置文件夹中的.web.xml 覆盖现有项目的 web.xml.leap.xml : 1.initEvent 节点添加(values属性中,注意逗号分割)：com.longrise.LEAP.Web.HTML.URLMapUtil ,com.longrise.LEAP.Web.HTML.Control.RegistControl2.LEAP.Base.Web.Resource.jar 加到 Resource 节点的 jar属性中注意逗号分割3.添加2)将压缩文件中的login.js index.js放到项目文件夹 中的 JavaScript文件夹cstarmain.html 放到项目文件夹根目录 LEAP/Web/HTMLTemplate/webui/ 文件夹,并重命名为项目英文名main.html 形式文件名logo.gif bg5.gif 放到项目文件夹的images文件夹3) 修改login.js 的 19行 var applicationcode = 002001; 为项目的系统代码95行 window.location.replace(purl+portal/ht=webui/cstarmain.html);cstarmain.html为第二步中重命名的文件index.js 的12行 this.loginHTML = LEAP/CStar/HTML/Login.html; 修改为项目的登录地址32行 this.loadBackgroundImage(leapconfig.server +LEAP/CStar/images/bg5.gif, this.getUT(workarea); 指向bg5.gifcstarmain.html的18 行 指向 index.js27行 指向logo.gif4)刷新数据库升级脚本第二部分：我也要做WebPart.有了自己的新首页，现在开始制作自己项目的WebPartl 准备工作：先了解什么是WebPart上图：图1图中的1个标记就是一个WebPartWebPart分为Head和Body 2部分。HEAD 不用自己写代码。Body内容为自己扩展我们说的做WebPart即为控制Body部分的内容。通俗的说就是通过Velocity模板向Body中InnerHTML.懂？那我们开始开始动手做：1. 在项目根文件夹下建立LEAP/Web/HTMLTemplate/WebPart文件夹(用来存放WebPart的html文件)2. 在项目根文件夹下建立LEAP/Web/ Control文件夹(用来存放WebPart的Vm模板文件)附：图：Vm模板语法指南：/alexwan/archive/2008/06/07/206473.html1、 最简单的静态HTML 的WebPart如上面图中的图1中的时钟FLASH，为静态HTML .最后呈现效果步骤：1. 在存放WebPart 的HTML文件夹中添加FlashDamo.html内容如下： 解析：为WebPart的Body中插入一个DIV ，DIV上有3个属性属性解析：CLASS即CSS样式。SC ：可选参数：template、”服务器数据控件的name” 当为template 时候说明为纯HTMLWebPart.template:指向的HTML数据地址 图解：FlashTime.html为静态HTML。想怎么写都可以。亲情提示：当里面有地址时候需要转换一下。转换方式：在需要转换的地方添加sc=resource resource.att =”value” 制定需要转换的属性为src;src 为标签自带的属性这样你的一个静态HTML WebPart就已经制作完成了。下面要做的就是在首先呈现了：详情请见第3部分：让制作的WebPart跑起来2.服务器端WebPart (不带vm模板)图2.1Body部分只是简单的显示时间星期。数据为服务端获得。开始：1、 服务器端：数据准备。说了是服务端获得的时间。那肯定要去我们直接的服务端写点东西。以CStar来看。建立一个Package 用来存放服务器端的Webpart数据1.新建一个Datatime.java的Class .即为服务器端的WebPart数据作用：为客服端准备数据package com.longrise.CStar.Base.WebControl;import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date;import com.longrise.LEAP.Web.HTML.Control.ControlBase;public class Datatime extends ControlBase private static final String name= datatimeBase;public String getName() return name;public String build() SimpleDateFormat myFmt=null;Date dt=new Date();String strRetunrn=;myFmt=new SimpleDateFormat(yyyy年MM月dd日);strRetunrn = myFmt.format(dt)+getWeekOfDate(dt);return Server时间:+strRetunrn; /即为图2.1返回的数据 public static String getWeekOfDate(Date dt) /. 标记部分为重点：name:指定的服务器端数据的名字public String build()：返回的数据到这里数据就准备好了。但是还没玩。新建一个RegistControl.Java的Class （如无则新建。有直接修改里面内容）作用：注册写的服务器端数据Control 直接copy下面代码放入其中。package com.longrise.CStar.Base.WebControl;import com.longrise.LEAP.Base.Global;import com.longrise.LEAP.Base.Config.IInitEvent;import com.longrise.LEAP.Web.HTML.HTMLPageEngine;public class RegistControl implements IInitEvent public void fire () Global.getInstance().LogInfo(begin regist web controls!); HTMLPageEngine.getInstance().registControl(Datatime.class); HTMLPageEngine.getInstance().registControl(Damo.class); Global.getInstance().LogInfo(end regist web controls!); 标记部分为：注册Class到这里服务器端就准备好了。在去客服端写点东西2.客户端： 准备HTML文件新建一个Servertime.html:Code:属性解析：SC ：”服务器数据控件的name” / template(静态HTML)下面要做的就是在首先呈现了.详情请见第3部分：让制作的WebPart跑起来3服务器端和Vm模板结合的WebPart同上。先上大图。1. 服务器端数据准备（有点和第2个不一样）：新建一个Damo.java的CLassCode:package com.longrise.CStar.Base.WebControl;import mons.beanutils.DynaBean;import org.apache.velocity.VelocityContext;import com.longrise.LEAP.Base.Global;import com.longrise.LEAP.Base.Objects.ResultSet;import com.longrise.LEAP.Web.HTML.Control.ControlBase;public class Damo extends ControlBase private static final String name = LeapAppDamo; private static final String templatePath = LEAP/Web/Control/webui/LeapDamo.vm; public String getName () return name; public String build () VelocityContext context = new VelocityContext(); String control = getHTMLAttribute(control); if ( control = null ) control = templatePath; try ResultSet result = null; String SQL = SELECT * FROM SSO_Application where IsBs=1 order by OrderID; result = Global.getInstance().getDataSource().ExecuteSQL(SQL); DynaBean beans = convertDynaBean(result); context.put(result, beans); StringBuffer buffer = innerBuild(control, context); fixContent(buffer); return buffer.toString(); catch (Exception ex) return getHTML(); - name:数据控件名。 templatePath:VM模板默认地址。从代码就看的出没指定control时去此默认值蓝色标记解析：准备数据。爱怎么整怎么整。现在支持的数据格式有：ResultSet,ArrayList,等。context.put(result, beans); StringBuffer buffer = innerBuild(control, context); fixContent(buffer); return buffer.toString();照着写 就是将数据Put进context .打开RegistControl.java注册下刚写的Damo.java2.客户端：a.添加一个WebPart/Damo.html属性解析：SC：略 Control:指定的vm模板地址b.向LEAP/Web/Control中添加一个LeapApplication.vm模板Code:#if (!$null.isNull($result) #foreach($row in $result)$!row.get(applicationname)#end #end具体写法参见：Vm模板语法指南：/alexwan/archive/2008/06/07/206473.html友情提示：$result即为服务器端Put的context.put(result, beans);Beans对象。$!row.get(applicationname) 获取applicationname的数据图解：第三部分：让制作的WebPart跑起来最后，问下：你们知道WebPart是什么吗？打开Studio进入系统建模系统资源在业务系统首页下新增一行数据注意：页面即为你存放的WebPart的html文件路径。全写出来为：webpart/damo.html.html省略不写。添加后进入系统多了一个WebPart演示。这里我指定的Damo是第3个带VM模板的例子第四部分：附录一 Flash报表（WebPart制作）一.进入LeapStudio 系统建模 系统资源 WebUi模型 图标新增一个WebPart重点属性：页面ht=webui/part/funchart:charttype=bar:datatype=testXml.html解析：ht=Html文件地址（照写不用改变） Charttype 你要显示的图标类型(可选) bar/mbar/MSLine/Angular 注意大小写1. bar (单柱)效果如下：2. mbar(多柱) 效果如下：3. MSLine（折线）效果如下4.Angular（仪表盘） 效果如下datatype=testXml.html, testXml：你所调用的自己的ServerName.二.在自己的服务端写自己的服务（Damo: FlashChartBLL）并暴露服务(Damo: LCMSService)Damo: FlashChartBLL 方法必须返回一个 ChartSettingDataCode: package com.longrise.LCMS.Base.FlashChart;import com.longrise.LEAP.Base.Global;import com.longrise.LEAP.Base.Logic.LEAPLogic;import com.longrise.LEAP.Base.Objects.ResultSet;import com.longrise.LEAP.Base.Objects.SearchParameters;import com.longrise.LEAP.Web.Chart.*;public class FlashChartBLL extends LEAPLogic public ChartSettingData testXml() try ResultSet resultSet = Global.getInstance().getDataSource().ExecuteSQL(SELECT name as 区域 ,StreetCount as 街道, CommunityCount 社区, GridCount 网格 FROM LEAPCOUNT where substr(areaid,1,4) = 4403 and arealevel = 3 and sn=3166ed8c5eb94095ace03c6f428cea51 order by CountDate desc); ChartSet cs=new ChartSet(); cs.setTitle(测试); cs.setSubtitle(下属街道1); cs.setXname(x); cs.setYname(y);cs.setDecimalPrecision(2); cs.setFormatNumber(1); ChartSettingData cd=new ChartSettingData(); cd.setResultSet(resultSet); cd.setChartSet(cs); cd.setChartType(1); return cd; catch (Exception e) Global.getInstance().LogError(this, e); return null; 解析：ResultSet（数据） 根据自己的要求自己的需求得到的数据。ChartSet（报表配置类）属性：cs.setTitle(测试); 主标题 cs.setSubtitle(下属街道1);副标题 cs.setXname(x); X轴名称 cs.setYname(y); y轴名称cs.setDecimalPrecision(2); 数值精确位数 cs.setFormatNumber(1); 是否用K代表千，M代表百万。1是0否ChartSettingData （返回数据类 ）属性：cd.setResultSet(resultSet); resultSet数据 cd.setChartSet(cs); 报表配置 cd.setChartType(1);报表类型(1/2/3)：1.单柱/2.多柱/ 3.折线/Damo: LCMSService 就是服务类 public class LCMSService extends LEAPBLLBaseService在里面添加一个方法：public ChartSettingData testXml() - 即为你在LeapStudio里面配置的datatypeFlashChartBLL service = new FlashChartBLL();LogicManager.getInstance().setLogic(this, service);return service.testXml();ResultSet数据格式：单柱：单柱数据（只有1行）：X轴对应列名 .多柱、折线：多柱子数据：此时：X轴对应第1列数据 分类对应列名附：独立报表统计页面调用只需：var div = this.getUT(divC); /容器DIV 即为放置报表的容器var parameter = new SearchParameters();parameter.addParameter(time, 2009-8-8);/查询参数，根据需求填写LEAP.chart.show(testXml,parameter,div);/ testXml 和上面服务端方法一致第五部分：附录二 为WebPart添加事件当您的WebPart无法完全的适应您的需求时候，我们该在怎么做呢。这时候您需要一个扩展接口。那就是Head部分的按钮。如何为这些按钮注册事件呢？请往下看。找到项目的Index.js文件。在totype.childPageLoad 方法中注册事件。格式如下：LEAP.webui.addEvent(webui.leapapplication, this.onclickPart, this)参数解析： webui.leapapplication WebPart的资源编号。this.onlwfpwaitingclick 所注册是事件。Function (onclickPart) Code:totype. onclickPart = function(arg)if (arg = null)return;debuggerif (arg.ismorebtn = true)alert(你点了我，哎呀!)JS 部分自己扩展。Over。WebPart内容部分添加JS 事件 直接在需要添加的VM 模板里面的HTM里面添加onclick等事件。然后在index.js里面直接添加方法。结束：问题集合1、 添加新首页后怎么导航都没了？ 答：您的数据库估计有问题。请联系小吴。拿最近的库比对2、 问：怎么看自己写的服务器端的Class是否已经注册。 答：看控制台。3、 问：项目首页设置点击刚新建的WebPart无法选择： 答：WebPart创建过程中出错。请查看控制台是否路径错误，未注册等。4、 问：WebPart显示为白板。 答：检查路径是否错误，VM模板是否错误。HTML是否错误。5、 我写的Server Class未注册。 答：当然不会注册。打开leap.xml.在initEvent 节点上Values里添加com.longrise.CStar.Base.WebControl.RegistControl（你自己的服务端RegistControl.Class）, 6、Vm语法错误怎么查。 答：用的最多的就是#if #end #foreach 。 这个也错我无解。7、如何为我写的WebPart添加css.答：在你指向的HTML 中添加添加一个calss 名 然后将css写入你的项目CSS中，引入Main页面即可。8、路径怎么老不对？ 答：前文就说了的。路径需要转换下。9、一样结构的