yFiles-ajax基礎(chǔ)開發(fā)教程

1、by 郭冬冬郭冬冬yFiles Ajax開發(fā)說明開發(fā)說明1yFiles Ajax介紹介紹 yFiles Ajax是一款基于dojo js框架 和 java 的頁面繪圖展示工具，生成的頁面風(fēng)格比較漂亮，操作比較方便。官網(wǎng)demo：2yFiles Ajax 開始開始1.熟悉Dojo Toolkit框架基礎(chǔ)知識(shí)及組件使用。2.新建web工程，加入依賴jar包。（batik.jar、y.jar、y、ysvg.jar）3.工程中加入文件：*javascript:依賴js文件 resources:依賴樣式文件 web.xml:內(nèi)置servlet（不可去掉） y（秘鑰）3yFiles Ajax 開始開始re

2、sources文件夾下新建graphs文件夾，并將需要顯示的.graphml文件復(fù)制進(jìn)去。*graphml格式的文件類似于svg文件，以xml格式存放圖形元素屬性、位置等信息 （此文件必須放置在/resource/graphs/目錄下，程序默認(rèn)）4yFiles Ajax 開始開始 4.web.xml *內(nèi)置servlet，不可刪除。否則 控件將無法使用5yFiles Ajax 開始開始5.客戶端1.根目錄下新建helloy文件，引入js文件，并添加dojo組件：*path屬性：頁面加載時(shí)會(huì)從session中查找key為“computers.graphml”的對(duì)象(Graph2D)顯示，如果沒有

3、，則會(huì)去/resources/graphs/目錄下讀取名字為“computers.graphml”的文件。6yFiles Ajax 開始開始6.訪問helloy頁面：此處顯示的即為resources/graphs下的computer.graphml結(jié)構(gòu)：7基本類型介紹基本類型介紹服務(wù)器端： Graph2D 繪圖對(duì)象 BaseServlet 封裝了一系列對(duì)Graph2D類的操作方法。 Node 節(jié)點(diǎn)對(duì)象 GenericNodeRealizer 節(jié)點(diǎn)格式、樣式對(duì)象 Edge 連接線對(duì)象 GenericEdgeRealizer 連接線格式、樣式對(duì)象 Label 節(jié)點(diǎn)文字、圖片對(duì)象 Layouter

4、展現(xiàn)形式對(duì)象（橫向、縱向等）客戶端： y dojo組件用于展示Graph2D 8yFiles Ajax 開發(fā)開發(fā)新建servlet類GetNewGraphServlet.java，繼承BaseServlet：9yFiles Ajax 開發(fā)開發(fā) 繪制自己的圖形界面web.xml添加servlet：10yFiles Ajax 開發(fā)開發(fā)修改helloy:11yFiles Ajax 開發(fā)開發(fā)重新訪問helloy:12yFiles Ajax 開發(fā)開發(fā) 為節(jié)點(diǎn)添加屬性、樣式（NodeRealizer）13yFiles Ajax 開發(fā)開發(fā)*節(jié)點(diǎn)的圖形、陰影、過度色等都是由painter生成的，不同的painter會(huì)有不同的效果 為節(jié)點(diǎn)添加屬性、樣式14yFiles Ajax 開發(fā)開發(fā) Edge對(duì)象15yFiles Ajax 開發(fā)開發(fā) Layouter布局16yFiles Ajax 開發(fā)開發(fā) 事件綁定17yFiles Ajax 開發(fā)開發(fā)點(diǎn)擊節(jié)點(diǎn)添加下級(jí)節(jié)點(diǎn)點(diǎn)擊節(jié)點(diǎn)添加下級(jí)節(jié)點(diǎn)18yFiles Ajax 開發(fā)開發(fā) 服務(wù)器端操作Graph2D常用方法19yFiles Ajax 開發(fā)開發(fā) 客戶端常用方法20謝謝 謝！謝！北京宏景世紀(jì)軟件有限公司北京宏景世紀(jì)軟件有限公司地址：北京市海淀區(qū)西直門北大街甲地址：北京市海淀區(qū)西直門北大街甲4343號(hào)金運(yùn)大廈號(hào)金運(yùn)大廈B B座