yFiles-ajax基础开发教程.ppt

1、,by 郭冬冬,北京宏景世纪软件有限公司,yFiles Ajax开发说明,yFiles Ajax介绍,yFiles Ajax是一款基于dojo js框架 和 java 的页面绘图展示工具，生成的页面风格比较漂亮，操作比较方便。,官网demo：,yFiles Ajax 开始,1.熟悉Dojo Toolkit框架基础知识及组件使用。 2.新建web工程，加入依赖jar包。（batik.jar、y.jar、yfiles-ajax.jar、ysvg.jar） 3.工程中加入文件：,*javascript:依赖js文件 resources:依赖样式文件 web.xml:内置servlet（不可去掉） y

2、files-ajax-liscense.xml（秘钥）,yFiles Ajax 开始,resources文件夹下新建graphs文件夹，并将需要显示的.graphml文件复制进去。,*graphml格式的文件类似于svg文件，以xml格式存放图形元素属性、位置等信息 （此文件必须放置在/resource/graphs/目录下，程序默认）,yFiles Ajax 开始,4.web.xml,*内置servlet，不可删除。否则 控件将无法使用,yFiles Ajax 开始,5.客户端,1.根目录下新建helloyFiles.jsp文件，引入js文件，并添加dojo组件：,*path属性：页面加载时

3、会从session中查找key为“computers.graphml”的对象(Graph2D)显示，如果没有，则会去/resources/graphs/目录下读取名字为“computers.graphml”的文件。,yFiles Ajax 开始,6.访问helloyFiles.jsp页面：,此处显示的即为resources/graphs下的computer.graphml,结构：,基本类型介绍,服务器端： Graph2D 绘图对象 BaseServlet 封装了一系列对Graph2D类的操作方法。 Node 节点对象 GenericNodeRealizer 节点格式、样式对象 Edge 连接线

4、对象 GenericEdgeRealizer 连接线格式、样式对象 Label 节点文字、图片对象 Layouter 展现形式对象（横向、纵向等） 客户端： yfiles.client.tiles.widget.GraphCanvas dojo组件用于展示Graph2D,yFiles Ajax 开发,新建servlet类GetNewGraphServlet.java，继承BaseServlet：,yFiles Ajax 开发,绘制自己的图形界面,web.xml添加servlet：,yFiles Ajax 开发,修改helloyFiles.jsp:,yFiles Ajax 开发,重新访问helloyFiles.jsp:,yFiles Ajax 开发,为节点添加属性、样式（NodeRealizer）,yFiles Ajax 开发,*节点的图形、阴影、过度色等都是由painter生成的，不同的painter会有不同的效果,为节点添加属性、样式,yFiles Ajax 开发,Edge对象,yFiles Ajax 开发,Layouter布局,yFiles Ajax 开发,事件绑定,yFiles Ajax 开发,点击节点添加下级节点,yFiles Ajax 开发,服务器端操作Graph2D常用方法,yFiles Ajax 开发,客户端常用方法,谢 谢！,北京