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开发 客户端常用方法 谢谢 北