Webappbuilder自訂widget模板

標籤：

Webappbuilder自訂widget模板

by 李遠祥

 

1. 到\\widgets\samplewidgets目錄下拷貝 CustomWidgetTemplate 檔案並重新命名為MyWidget

2. 設定widget的類名。在MyWidget 目錄下開啟Widget.js ，將baseClass 改為

   baseClass: ‘jimu-widget-mywidget‘ 如

 

 

1. 自訂widget的UI介面。在Widget.html 檔案中可以添加其widget的介面。可以嘗試將以下代碼加入到這個html頁面中。

2. 將自訂的widget註冊到應用中。開啟stemapp/sample-configs 檔案，找到widgetPool->widgets ，添加一個節點內容，然後儲存檔案

3. 測試widget 。 開啟 http://[your host name:3344]/webappviewer/?config=sample-configs/config-demo.json  點擊表徵圖，出現其表徵圖，操作結果如下

4. 讓widget變得更加靈活可配

   a.開啟MyWidget  檔案夾下的 config.json 檔案，添加json的結構文本到查建中，如下

   b. 將原來的widget.html 頁面代碼改為，讓其可以直接讀取配置的關鍵變數

   c.開啟第5步的測試連接，查看修改的內容。Widget的內容則變為config檔案對應的變數。

    

5. 讓介面更加友好一些。一般來說，html的介面布局和美化都使用css檔案，widget同樣可以使用CSS檔案來讓整個介面變得比較美觀。開啟css/style.css 檔案，增加css代碼到該檔案中，如所示：

   該代碼的作用是將頁面的第一個div標籤的內容設定為紅色。這樣做的好處是更好的結構化，讓美工人員參與到應用程式的開發過程中。其最終的效果如下

6. 訪問地圖
   1. 開啟widget.js檔案，刪除startup函數的注釋

   2. 修改widget.html的頁面代碼，加入map ID 屬性，如

   3. 重新重新整理頁面，可以看到map空間的ID被現實出來
   4. 最終的結果是讀取了應用中map控制項的ID

7. 國際化支援

   可以通過編寫設定檔去適配多國語言。例如前面所用到的外掛程式是英文的提示"This is my widget" and "This is configurable" ，可以通過編寫MyWidget檔案夾的設定檔去實現中文本地化。

   1. 開啟nls/strings.js 檔案，增加以下代碼

   2. 在nls目錄下建立子檔案夾 zh-cn ，

   3. 將string.js 拷貝到zh-cn檔案夾中
   4. 修改zh-cn/strings.js 檔案裡面的內容，如下

   5. 將widget.html的內容修改為讀取配置代碼，如

   6. 重新重新整理頁面即可查看到中文的配置。效果如

8. 部署widget
   1. 開啟MyWidget檔案夾裡面的 manifest.json 檔案，更改裡面的屬性，如name、author、description等，其中name屬性必須與widget的檔案夾名稱相同。

      具體的每個屬性可以查看網址 https://developers.arcgis.com/web-appbuilder/guide/widget-manifest.htm 的說明。

   2. 將MyWidget 檔案夾拷貝到\stemapp\widgets 檔案夾下，啟動node.js(最快的港式是直接開啟webappbuilider檔案夾下的start.bat檔案)，輸入http://[your host name:3344]/webappbuilder，這樣在使用webappbuilder建立應用的時候就可以使用自訂的widget了。如在微件選擇的時候就會出現定義的外掛程式

Webappbuilder自訂widget模板