yFiles-ajax基础开发教程.ppt

,by郭冬冬,北京宏景世纪软件有限公司,yFilesAjax开发说明,yFilesAjax介绍,yFilesAjax是一款基于dojojs框架和java的页面绘图展示工具，生成的页面风格比较漂亮，操作比较方便。,官网demo：,yFilesAjax开始,1.熟悉DojoToolkit框架基础知识及组件使用。2.新建web工程，加入依赖jar包。（batik.jar、y.jar、yfiles-ajax.jar、ysvg.jar）3.工程中加入文件：,*javascript:依赖js文件resources:依赖样式文件web.xml:内置servlet（不可去掉）yfiles-ajax-liscense.xml（秘钥）,yFilesAjax开始,resources文件夹下新建graphs文件夹，并将需要显示的.graphml文件复制进去。,*graphml格式的文件类似于svg文件，以xml格式存放图形元素属性、位置等信息（此文件必须放置在/resource/graphs/目录下，程序默认）,yFilesAjax开始,4.web.xml,*内置servlet，不可删除。否则控件将无法使用,yFilesAjax开始,5.客户端,1.根目录下新建helloyFiles.jsp文件，引入js文件，并添加dojo组件：,*path属性：页面加载时会从session中查找key为“computers.graphml”的对象(Graph2D)显示，如果没有，则会去/resources/graphs/目录下读取名字为“computers.graphml”的文件。,yFilesAjax开始,6.访问helloyFiles.jsp页面：,此处显示的即为resources/graphs下的computer.graphml,结构：,基本类型介绍,服务器端：Graph2D绘图对象BaseServlet封装了一系列对Graph2D类的操作方法。Node节点对象GenericNodeRealizer节点格式、样式对象Edge连接线对象GenericEdgeRealizer连接线格式、样式对象Label节点文字、图片对象Layouter展现形式对象（横向、纵向等）客户端：yfiles.client.tiles.widget.GraphCanvasdojo组件用于展示Graph2D,yFilesAjax开发,新建servlet类GetNewGraphServlet.java，继承BaseServlet：,yFilesAjax开发,绘制自己的图形界面,web.xml添加servlet：,yFilesAjax开发,修改helloyFiles.jsp:,yFilesAjax开发,重新访问helloyFiles.jsp:,yFilesAjax开发,为节点添加属性、样式（NodeRealizer）,yFilesAjax开发,*节点的图形、阴影、过度色等都是由painter生成的，不同的painter会有不同的效果,为节点添加属性、样式,yFilesAjax开发,Edge对象,yFilesAjax开发,Layouter布局,yFilesAjax开发,事件绑定,yFilesAjax开发,点击节点添加下级节点,yFilesAjax开发,服务器端操作Graph2D常用方法,yFilesAjax开发,客户端常用方法,谢谢！,北