概述

除了 WijmoJS  的視覺化線上設計器之外（在這裡閱讀基於Web的WijmoJS Designer），我們剛剛釋出了針對Angular開發的Visual Studio Code的設計器。 在HTML檔案中，它在代表 WijmoJS純前端控制元件 的每個標記上方插入CodeLens連結。單擊該連結可在單獨的選項卡中開啟Wijmo Designer，並根據關聯的標記對其進行初始化。使用者在設計器中進行更改後，只需單擊一下，就可以使用修改後的Angular標記更新原始HTML檔案。

WijmoJS VSCode Designer還提供了一個獨立的命令，可以在單獨的選項卡中開啟設計圖面，您可以在其中使用示例資料例項化控制元件，自定義其屬性，並生成可以複製到原始檔中的Angular標記。

wijmo Designer Extension for Visual Studio Code

您可以將WijmoJS VSCode Designer與本文中介紹的IntelliSense擴充套件結合使用。例如，您可以使用IntelliSense為新控制元件建立Angular標記，然後使用視覺化設計器編輯標記。

安裝WijmoJS VSCode Designer

WijmoJS  VSCode Designer不包含在任何WijmoJS發行版中，但卻已釋出到Visual Studio Marketplace。 安裝它的最簡單方法是開啟VS Code並轉到Extensions窗格。 在搜尋框中鍵入wijmo，然後單擊“安裝”按鈕開始下載擴充套件。

出現時單擊“重新載入”按鈕以完成安裝。

修改現有的控制元件

標記每當您在VS Code中開啟HTML檔案時，都會啟用WijmoJS VSCode Designer。 讓我們首先開啟一個WijmoJS示例HeaderFilters。 如果您已經下載了WijmoJS，則可以在Samples \ TS \ Angular2 \ HeaderFilters \ HeaderFilters資料夾中找到此專案。 在VS Code中開啟該資料夾，然後開啟檔案src \ app.html，其中包含以下FlexGrid標記

注意標記上方出現的灰色 Wijmo Designer ... 連結。 在VS Code中，這被稱為CodeLens，Microsoft將其定義為“ 可操作的上下文資訊，其中散佈著原始碼。 ”在我們的示例中，操作是在單獨的選項卡中開啟設計圖面，並使用 Angular標記提供的上下文，以及原始檔中該標記的位置。 現在單擊連結以在相鄰選項卡中開啟設計器。

設計圖面上的FlexGrid 表格控制元件以設計模式顯示，這意味著您無法直接對其進行滾動，調整大小或以其他方式的操作行為，而是使用設計器右側的“屬性”窗格來操作控制元件的物件模型。每個可用屬性都顯示相應型別的編輯器，您在此處所做的任何更改都會立即應用於所選控制元件。

例如，如果將allowResizing屬性的值從Columns更改為None，則網格渲染中沒有視覺差異，因為這是執行時行為設定。 但是，如果單擊設計器左側的“源檢視”按鈕，您將看到擴充套件程式已經發生更改。

要返回到設計圖面，請單擊WijmoJS 徽標下方的“設計檢視”按鈕。

對於具有集合的控制元件（例如網格列），設計器允許您新增，刪除和修改單個成員。 在“屬性”窗格中找到columns屬性，然後單擊屬性編輯器右側的“顯示專案”按鈕以顯示Angular標記中定義的八個列。

將滑鼠懸停在單詞“author”上，然後單擊出現的連結。 這將開啟該列定義以進行編輯。 找到visible屬性並將其更改為False。 現在重新繪製網格以顯示author列已被隱藏。

要返回FlexGrid表格控制元件的設定，請單擊“屬性”窗格中的“後退”按鈕。

如果對設計器中所做的更改感到滿意，請單擊WijmoJS 徽標下方的“儲存”按鈕以更新原始原始檔的編輯器並將其重點關注。請注意，修改後的Angular標記會突出顯示，設計器中所做的更改現在會反映在標記中。此時，您可以儲存或放棄更改，就像您自己鍵入更改一樣。

修改後的標記的縮排樣式可能與原始樣式不匹配，因為它受內建VS程式碼設定html.format.wrapAttributes的控制。 為獲得最佳效果，請將此值設定為auto以外的值，例如force-aligned，如上所示。

儲存後，WijmoJS VSCode Designer選項卡仍然存在，如果您給它焦點，它將保持其先前狀態。但是，您應該知道擴充套件會記住呼叫它的Angular標記的文件範圍。 如果隨後修改了原始原始檔，則應重新訪問CodeLens連結以重新整理關聯的設計器選項卡。 否則，如果您只是切換到設計器選項卡並單擊“儲存”，則更新可能發生在錯誤的位置。

建立新的控制元件標記

要為新的WijmoJS 純前端控制元件建立 Angular標記，請按F1開啟命令選項板，然後執行WijmoJS VSCode Designer命令以開啟設計圖面的獨立版本。 單擊設計器左上角的WijmoJS 徽標以開啟選單。

“工具箱”命令開啟一個可摺疊的WijmoJS 前端控制元件皮膚，按模組名稱（網格，圖表，輸入，儀表，導航，olap）分組。 使用Themes命令可以檢視選擇不同WijmoJS 主題的效果，儘管這對生成的程式碼沒有影響，該程式碼僅由控制元件標記組成。

讓我們用趨勢線建立一個圖表控制元件。 單擊“工具箱”，展開圖表組，然後單擊名為FlexChart圖表的專案。 請注意，它顯示代表“不斷更新中的”證券的實時樣本資料。

在“屬性”窗格中，請注意圖表上有四個表示複雜物件的屬性：axisX，axisY，dataLabel和legend。 單擊axisY屬性的齒輪圖示，然後將format屬性設定為字串c0，表示零小數位的貨幣值。 單擊“屬性”窗格中的“後退”按鈕以返回FlexChart的設定。 接下來，單擊圖例屬性的齒輪圖示，並將其位置設定更改為“底部”。 像以前一樣單擊後退按鈕返回FlexChart設定。 通過將其標題屬性設定為Most Active，為圖表新增標題。 找到palette屬性，單擊編輯器中的Show Colors按鈕，然後選擇一個預定義的值，例如dark。

現在圖表看起來像這樣：

WijmoJS VSCode Designer對於操作圖表系列等集合特別有用。 例如，您可以通過新增適當型別的新系列元素，輕鬆地將趨勢線新增到圖表中。 在“屬性”窗格中向下滾動，找到系列屬性，然後單擊“顯示專案”按鈕將其展開。

單擊“新增項”連結以將新圖表系列新增到集合的末尾。 單擊新新增專案右邊緣的向下箭頭，然後從可用系列型別列表中選擇TrendLine。

新新增的專案現在顯示為[趨勢線]。 將滑鼠懸停在括號內的文字上，然後單擊出現的連結。 現在，“屬性”窗格顯示特定於TrendLine類的屬性。 設定繫結到latestPrice，fitType設定為Logarithmic，以及對Plot的可見性。 您不需要為name屬性提供值，因為圖例中將省略此係列。

隨著趨勢線新增到圖表中，設計介面現在看起來像這樣：

在獨立模式下，沒有要更新的原始檔，但您仍然可以生成Angular標記並將它們從設計器複製到HTML源。 單擊設計器左側的“源檢視”圖示以顯示生成的Angular標記。 從那裡，突出顯示要複製的文字，並使用快捷鍵（在Windows上，Ctrl + C）將文字複製到剪貼簿。 請注意，VS Code的“編輯”選單上的“複製”命令不適用於設計器。

<wj-flex-chart #flexchart1

[bindingX]="'symbol'"

[header]="'Most Active'"

[palette]="['#005fad', '#f06400', '#009330', '#e400b1', '#b65800', '#6a279c', '#d5a211', '#dc0127', '#000000']">

<wj-flex-chart-axis [wjProperty]="'axisY'" [format]="'c0'"></wj-flex-chart-axis>

<wj-flex-chart-legend [wjProperty]="'legend'" [position]="'Bottom'"></wj-flex-chart-legend>

<wj-flex-chart-series [name]="'Latest Price'" [binding]="'latestPrice'"></wj-flex-chart-series>

<wj-flex-chart-series [name]="'52-Week High'" [binding]="'week52High'"></wj-flex-chart-series>

<wj-flex-chart-series [name]="'52-Week Low'" [binding]="'week52Low'"></wj-flex-chart-series>

<wj-flex-chart-trend-line [binding]="'latestPrice'" [fitType]="'Logarithmic'" [visibility]="'Plot'"></wj-flex-chart-trend-line> </wj-flex-chart>

在我們的示例中，生成的標記包含表示Y軸，圖表圖例，三個資料系列和趨勢線的子元素。 要返回視覺化設計器，請單擊WijmoJS 徽標下方的“設計檢視”按鈕。

設計器版本之間的差異

下表總結了WijmoJS 視覺化線上設計器，從HTML原始檔中的CodeLens連結呼叫和VS Code從獨立命令呼叫 WijmoJS VSCode設計器之間的差異：

設計器不提供“事件”窗格，因為它只能修改原始控制元件標記 —— 它不瞭解整個Angular專案。 但是，當擴充套件更新原始檔時，將保留原始控制元件標記中定義的任何現有事件處理程式。

設計器的獨立命令會記住當前工作空間上下文中視覺化設計介面的狀態，即使您關閉並重新開啟VS程式碼也是如此。

凾待解決的部分

本次更新的WijmoJS VSCode設計器暫不支援以下WijmoJS控制元件：

• Menu

• Popup

• TabPanel

• MultiRow

• PdfViewer

• ReportViewer

在Angular專案中，控制元件屬性通常繫結到執行時的資料成員而不是文字值。 在這種情況下，設計器以斜體顯示只讀文字框中的繫結。 儲存操作期間保留繫結事件; 但是，在設計器中沒有用於建立或編輯它們的介面。

有關Angular標記的當前限制列表，請參閱Visual Studio Marketplace上的擴充套件頁面。

總結

WijmoJS  VS Code設計器通過提供WYSIWYG設計介面來協助前端開發工程師進行 Angular 專案開發，該設計器用於編輯代表WijmoJS控制元件的標記。此外，設計器還支援通過提供獨立設計模式建立新的WijmoJS標記，您可以在其中試驗控制元件屬性，子物件和集合。

關於 葡萄城

賦能開發者！葡萄城公司成立於 1980 年，是全球領先的集開發工具、商業智慧解決方案、管理系統設計工具於一身的軟體和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟體研發服務，併為中國企業的資訊化提供國際先進的開發工具、軟體和研發諮詢服務。葡萄城的控制元件和軟體產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28298702/viewspace-2199928/，如需轉載，請註明出處，否則將追究法律責任。