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

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

2、files-ajax-liscense.xml（秘鑰）,yFiles Ajax 開始,resources文件夾下新建graphs文件夾，并將需要顯示的.graphml文件復制進去。,*graphml格式的文件類似于svg文件，以xml格式存放圖形元素屬性、位置等信息 （此文件必須放置在/resource/graphs/目錄下，程序默認）,yFiles Ajax 開始,4.web.xml,*內(nèi)置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,結(jié)構(gòu)：,基本類型介紹,服務(wù)器端： Graph2D 繪圖對象 BaseServlet 封裝了一系列對Graph2D類的操作方法。 Node 節(jié)點對象 GenericNodeRealizer 節(jié)點格式、樣式對象 Edge 連接線

4、對象 GenericEdgeRealizer 連接線格式、樣式對象 Label 節(jié)點文字、圖片對象 Layouter 展現(xiàn)形式對象（橫向、縱向等） 客戶端： yfiles.client.tiles.widget.GraphCanvas dojo組件用于展示Graph2D,yFiles Ajax 開發(fā),新建servlet類GetNewGraphServlet.java，繼承BaseServlet：,yFiles Ajax 開發(fā),繪制自己的圖形界面,web.xml添加servlet：,yFiles Ajax 開發(fā),修改helloyFiles.jsp:,yFiles Ajax 開發(fā),重新訪問helloyFiles.jsp:,yFiles Ajax 開發(fā),為節(jié)點添加屬性、樣式（NodeRealizer）,yFiles Ajax 開發(fā),*節(jié)點的圖形、陰影、過度色等都是由painter生成的，不同的painter會有不同的效果,為節(jié)點添加屬性、樣式,yFiles Ajax 開發(fā),Edge對象,yFiles Ajax 開發(fā),Layouter布局,yFiles Ajax 開發(fā),事件綁定,yFiles Ajax 開發(fā),點擊節(jié)點添加下級節(jié)點,yFiles Ajax 開發(fā),服務(wù)器端操作Graph2D常用方法,yFiles Ajax 開發(fā),客戶端常用方法,謝 謝！,北京