Dojo簡單應用

時間 2021-01-17

手把手教你Dojo入門

如果僅僅是爲了練習Dojo,或者進行測試，可以參考下面的步驟。下面的文件均是在Windows下測試

需要的工具

1 Tomcat服務器：下載地址選擇適合自己的機器型號，即可

2 Dojo的工具包：下載地址由於dojo toolkit沒有測試頁面，所以推薦下載下面的那個SDK的

3 瀏覽器博主使用的是chrome

接下來就可以配置文件了。

首先是Tomcat

　　Tomcat,直接解壓縮就可以了。

　　bin文件夾下面有個startup.bat，雙擊就可以運行。雙擊shutdown.bat停止服務器。

　　運行服務器後，我們輸入網址http://localhost:8080 看到下面的頁面，表示服務器啓動成功。

　　這個默認的頁面，其實是E:\tomcat\apache-tomcat-7.0.54\webapps\ROOT目錄下的index.jsp，記住這個地址，後面要用到。

dojo工具包

　　解壓縮後，修改文件夾名稱dojoroot，放到ROOT目錄下。輸入下面的網址

　　http://localhost:8080/dojoroot/dijit/themes/themeTester.html

　　看到下面的頁面表示成功。

這樣表示dojo可以使用了！

自己的測試用例

我們自己寫一個測試頁面,創建頁面test.html，放在ROOT文件夾下：

<html>
    <head>
        <script type="text/javascript" src="./dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true">
        </script>
        <style type="text/css">
            @import "./dojoroot/dijit/themes/tundra/tundra.css";
            @import "./dojoroot/dojo/resources/dojo.css";
        </style>
        
        <script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.layout.TabContainer");</script>
        <style>
            .formContainer{
                width:600px;
                height:600px;
            }
            label{
                width:150px;
                float:left;
            }
        </style>
    </head>
    <body class="tundra">
        <div class="formContainer" dojoType="dijit.layout.TabContainer">
            <div dojoType="dijit.layout.ContentPane" title="Personal">
                123 
            </div>
            <div dojoType="dijit.layout.ContentPane" title="Address">
                321
            </div>
            <div dojoType="dijit.layout.ContentPane" title="phone">
                456
            </div>
        </div>
    </body>
</html>

　　從工具包中，引入js或者css，注意路徑的問題。如果要使用絕對路徑，就要寫全路徑名。比如本文中dojoroot放在ROOT下面，頁面test.html也在ROOT中，因此相對路徑位："./dojoroot/dojo/dojo.js" 絕對路徑位："http://localhost:8080/dojoroot/dojo/dojo.js"（即相對於服務器web根目錄而言）

　　引入dojo.js

<script type="text/javascript" src="./dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true">
        </script>

　　引入特定的css

<style type="text/css">
            @import "./dojoroot/dijit/themes/tundra/tundra.css";
            @import "./dojoroot/dojo/resources/dojo.css";
        </style>

　　　動態加載特定的js

<script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.layout.TabContainer");</script>

　　在<body>裏面，加載dojo特有的風格

<body class="tundra">

　　最後，我們使用幾個div，製作一個選項卡

<div class="formContainer" dojoType="dijit.layout.TabContainer">
            <div dojoType="dijit.layout.ContentPane" title="Personal">
                123 
            </div>
            <div dojoType="dijit.layout.ContentPane" title="Address">
                321
            </div>
            <div dojoType="dijit.layout.ContentPane" title="phone">
                456
            </div>
        </div>

　　運行頁面

　　http://localhost:8080/test.html就可以看到如下的頁面了。