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

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

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

3、時會從session中查找key為“computers.graphml”的對象(Graph2D)顯示，如果沒有，則會去/resources/graphs/目錄下讀取名字為“computers.graphml”的文件。6yFiles Ajax 開始6.訪問helloyFiles.jsp頁面：此處顯示的即為resources/graphs下的computer.graphml結構：7基本類型介紹服務器端： Graph2D 繪圖對象 BaseServlet 封裝了一系列對Graph2D類的操作方法。 Node 節(jié)點對象 GenericNodeRealizer 節(jié)點格式、樣式對象 Edge 連接線對象

4、GenericEdgeRealizer 連接線格式、樣式對象 Label 節(jié)點文字、圖片對象 Layouter 展現(xiàn)形式對象（橫向、縱向等）客戶端： 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ā)重新訪問helloyFil

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