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

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

2、可去掉） yfiles-ajax-liscense.xml（秘鑰）3yFiles Ajax 開始resources文件夾下新建graphs文件夾，并將需要顯示的.graphml文件復(fù)制進(jìn)去。*graphml格式的文件類似于svg文件，以xml格式存放圖形元素屬性、位置等信息 （此文件必須放置在/resource/graphs/目錄下，程序默認(rèn)）4yFiles Ajax 開始 4.web.xml *內(nèi)置servlet，不可刪除。否則 控件將無(wú)法使用5yFiles Ajax 開始5.客戶端1.根目錄下新建helloyFiles.jsp文件，引入js文件，并添加dojo組件：*path屬性：頁(yè)面加載

3、時(shí)會(huì)從session中查找key為“computers.graphml”的對(duì)象(Graph2D)顯示，如果沒(méi)有，則會(huì)去/resources/graphs/目錄下讀取名字為“computers.graphml”的文件。6yFiles Ajax 開始6.訪問(wèn)helloyFiles.jsp頁(yè)面：此處顯示的即為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ì)象

4、GenericEdgeRealizer 連接線格式、樣式對(duì)象 Label 節(jié)點(diǎn)文字、圖片對(duì)象 Layouter 展現(xiàn)形式對(duì)象（橫向、縱向等）客戶端： yfiles.client.tiles.widget.GraphCanvas dojo組件用于展示Graph2D 8yFiles Ajax 開發(fā)新建servlet類GetNewGraphServlet.java，繼承BaseServlet：9yFiles Ajax 開發(fā) 繪制自己的圖形界面web.xml添加servlet：10yFiles Ajax 開發(fā)修改helloyFiles.jsp:11yFiles Ajax 開發(fā)重新訪問(wèn)helloyFil

5、es.jsp:12yFiles Ajax 開發(fā) 為節(jié)點(diǎn)添加屬性、樣式（NodeRealizer）13yFiles Ajax 開發(fā)*節(jié)點(diǎn)的圖形、陰影、過(guò)度色等都是由painter生成的，不同的painter會(huì)有不同的效果 為節(jié)點(diǎn)添加屬性、樣式14yFiles Ajax 開發(fā) Edge對(duì)象15yFiles Ajax 開發(fā) Layouter布局16yFiles Ajax 開發(fā) 事件綁定17yFiles Ajax 開發(fā)點(diǎn)擊節(jié)點(diǎn)添加下級(jí)節(jié)點(diǎn)點(diǎn)擊節(jié)點(diǎn)添加下級(jí)節(jié)點(diǎn)18yFiles Ajax 開發(fā) 服務(wù)器端操作Graph2D常用方法19yFiles Ajax 開發(fā) 客戶端常用方法20謝謝 謝！謝！北京宏景世紀(jì)軟件有限公司北京宏景世紀(jì)軟件有限公司地址：北京市海淀區(qū)西直門北大街甲地址：北京市海淀區(qū)西直門北大街甲4343號(hào)金運(yùn)大廈號(hào)金運(yùn)大廈