如何使用WijmoJS純前端設(shè)計(jì)器，快速生成Angula-創(chuàng)新互聯(lián)

概述

除了WijmoJS 的可視化在線設(shè)計(jì)器之外（在這里閱讀基于Web的WijmoJS Designer），我們剛剛發(fā)布了針對Angular開發(fā)的Visual Studio Code的設(shè)計(jì)器。 在HTML文件中，它在代表WijmoJS純前端控件的每個(gè)標(biāo)記上方插入CodeLens鏈接。單擊該鏈接可在單獨(dú)的選項(xiàng)卡中打開Wijmo Designer，并根據(jù)關(guān)聯(lián)的標(biāo)記對其進(jìn)行初始化。用戶在設(shè)計(jì)器中進(jìn)行更改后，只需單擊一下，就可以使用修改后的Angular標(biāo)記更新原始HTML文件。

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的開平網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

WijmoJS VSCode Designer還提供了一個(gè)獨(dú)立的命令，可以在單獨(dú)的選項(xiàng)卡中打開設(shè)計(jì)圖面，您可以在其中使用示例數(shù)據(jù)實(shí)例化控件，自定義其屬性，并生成可以復(fù)制到源文件中的Angular標(biāo)記。

wijmo Designer Extension for Visual Studio Code

您可以將WijmoJS VSCode Designer與本文中介紹的IntelliSense擴(kuò)展結(jié)合使用。例如，您可以使用IntelliSense為新控件創(chuàng)建Angular標(biāo)記，然后使用可視化設(shè)計(jì)器編輯標(biāo)記。

安裝WijmoJS VSCode Designer

WijmoJS VSCode Designer不包含在任何WijmoJS發(fā)行版中，但卻已發(fā)布到Visual Studio Marketplace。 安裝它的最簡單方法是打開VS Code并轉(zhuǎn)到Extensions窗格。 在搜索框中鍵入wijmo，然后單擊“安裝”按鈕開始下載擴(kuò)展。

出現(xiàn)時(shí)單擊“重新加載”按鈕以完成安裝。

修改現(xiàn)有的控件

標(biāo)記每當(dāng)您在VS Code中打開HTML文件時(shí)，都會激活WijmoJS VSCode Designer。 讓我們首先打開一個(gè)WijmoJS示例HeaderFilters。 如果您已經(jīng)下載了WijmoJS，則可以在Samples \ TS \ Angular2 \ HeaderFilters \ HeaderFilters文件夾中找到此項(xiàng)目。 在VS Code中打開該文件夾，然后打開文件src \ app.html，其中包含以下FlexGrid標(biāo)記

注意標(biāo)記上方出現(xiàn)的灰色Wijmo Designer ...鏈接。 在VS Code中，這被稱為CodeLens，Microsoft將其定義為“可操作的上下文信息，其中散布著源代碼?！痹谖覀兊氖纠?，操作是在單獨(dú)的選項(xiàng)卡中打開設(shè)計(jì)圖面，并使用 Angular標(biāo)記提供的上下文，以及源文件中該標(biāo)記的位置。 現(xiàn)在單擊鏈接以在相鄰選項(xiàng)卡中打開設(shè)計(jì)器。

設(shè)計(jì)圖面上的FlexGrid 表格控件以設(shè)計(jì)模式顯示，這意味著您無法直接對其進(jìn)行滾動，調(diào)整大小或以其他方式的操作行為，而是使用設(shè)計(jì)器右側(cè)的“屬性”窗格來操作控件的對象模型。每個(gè)可用屬性都顯示相應(yīng)類型的編輯器，您在此處所做的任何更改都會立即應(yīng)用于所選控件。

例如，如果將allowResizing屬性的值從Columns更改為None，則網(wǎng)格渲染中沒有視覺差異，因?yàn)檫@是運(yùn)行時(shí)行為設(shè)置。 但是，如果單擊設(shè)計(jì)器左側(cè)的“源視圖”按鈕，您將看到擴(kuò)展程序已經(jīng)發(fā)生更改。

要返回到設(shè)計(jì)圖面，請單擊WijmoJS 徽標(biāo)下方的“設(shè)計(jì)視圖”按鈕。

對于具有集合的控件（例如網(wǎng)格列），設(shè)計(jì)器允許您添加，刪除和修改單個(gè)成員。 在“屬性”窗格中找到columns屬性，然后單擊屬性編輯器右側(cè)的“顯示項(xiàng)目”按鈕以顯示Angular標(biāo)記中定義的八個(gè)列。

將鼠標(biāo)懸停在單詞“author”上，然后單擊出現(xiàn)的鏈接。 這將打開該列定義以進(jìn)行編輯。 找到visible屬性并將其更改為False。 現(xiàn)在重新繪制網(wǎng)格以顯示author列已被隱藏。

要返回FlexGrid表格控件的設(shè)置，請單擊“屬性”窗格中的“后退”按鈕。

如果對設(shè)計(jì)器中所做的更改感到滿意，請單擊WijmoJS 徽標(biāo)下方的“保存”按鈕以更新原始源文件的編輯器并將其重點(diǎn)關(guān)注。請注意，修改后的Angular標(biāo)記會突出顯示，設(shè)計(jì)器中所做的更改現(xiàn)在會反映在標(biāo)記中。此時(shí)，您可以保存或放棄更改，就像您自己鍵入更改一樣。

修改后的標(biāo)記的縮進(jìn)樣式可能與原始樣式不匹配，因?yàn)樗軆?nèi)置VS代碼設(shè)置html.format.wrapAttributes的控制。 為獲得最佳效果，請將此值設(shè)置為auto以外的值，例如force-aligned，如上所示。

保存后，WijmoJS VSCode Designer選項(xiàng)卡仍然存在，如果您給它焦點(diǎn)，它將保持其先前狀態(tài)。但是，您應(yīng)該知道擴(kuò)展會記住調(diào)用它的Angular標(biāo)記的文檔范圍。 如果隨后修改了原始源文件，則應(yīng)重新訪問CodeLens鏈接以刷新關(guān)聯(lián)的設(shè)計(jì)器選項(xiàng)卡。 否則，如果您只是切換到設(shè)計(jì)器選項(xiàng)卡并單擊“保存”，則更新可能發(fā)生在錯(cuò)誤的位置。

創(chuàng)建新的控件標(biāo)記

要為新的WijmoJS 純前端控件創(chuàng)建 Angular標(biāo)記，請按F1打開命令選項(xiàng)板，然后執(zhí)行WijmoJS VSCode Designer命令以打開設(shè)計(jì)圖面的獨(dú)立版本。 單擊設(shè)計(jì)器左上角的WijmoJS 徽標(biāo)以打開菜單。

“工具箱”命令打開一個(gè)可折疊的WijmoJS 前端控件面板，按模塊名稱（網(wǎng)格，圖表，輸入，儀表，導(dǎo)航，olap）分組。 使用Themes命令可以查看選擇不同WijmoJS 主題的效果，盡管這對生成的代碼沒有影響，該代碼僅由控件標(biāo)記組成。

讓我們用趨勢線創(chuàng)建一個(gè)圖表控件。 單擊“工具箱”，展開圖表組，然后單擊名為FlexChart圖表的項(xiàng)目。 請注意，它顯示代表“不斷更新中的”證券的實(shí)時(shí)樣本數(shù)據(jù)。

在“屬性”窗格中，請注意圖表上有四個(gè)表示復(fù)雜對象的屬性：axisX，axisY，dataLabel和legend。 單擊axisY屬性的齒輪圖標(biāo)，然后將format屬性設(shè)置為字符串c0，表示零小數(shù)位的貨幣值。 單擊“屬性”窗格中的“后退”按鈕以返回FlexChart的設(shè)置。 接下來，單擊圖例屬性的齒輪圖標(biāo)，并將其位置設(shè)置更改為“底部”。 像以前一樣單擊后退按鈕返回FlexChart設(shè)置。 通過將其標(biāo)題屬性設(shè)置為Most Active，為圖表添加標(biāo)題。 找到palette屬性，單擊編輯器中的Show Colors按鈕，然后選擇一個(gè)預(yù)定義的值，例如dark。

現(xiàn)在圖表看起來像這樣：

WijmoJS VSCode Designer對于操作圖表系列等集合特別有用。 例如，您可以通過添加適當(dāng)類型的新系列元素，輕松地將趨勢線添加到圖表中。 在“屬性”窗格中向下滾動，找到系列屬性，然后單擊“顯示項(xiàng)目”按鈕將其展開。

單擊“添加項(xiàng)”鏈接以將新圖表系列添加到集合的末尾。 單擊新添加項(xiàng)目右邊緣的向下箭頭，然后從可用系列類型列表中選擇TrendLine。

新添加的項(xiàng)目現(xiàn)在顯示為[趨勢線]。 將鼠標(biāo)懸停在括號內(nèi)的文本上，然后單擊出現(xiàn)的鏈接。 現(xiàn)在，“屬性”窗格顯示特定于TrendLine類的屬性。 設(shè)置綁定到latestPrice，fitType設(shè)置為Logarithmic，以及對Plot的可見性。 您不需要為name屬性提供值，因?yàn)閳D例中將省略此系列。

隨著趨勢線添加到圖表中，設(shè)計(jì)界面現(xiàn)在看起來像這樣：

在獨(dú)立模式下，沒有要更新的源文件，但您仍然可以生成Angular標(biāo)記并將它們從設(shè)計(jì)器復(fù)制到HTML源。 單擊設(shè)計(jì)器左側(cè)的“源視圖”圖標(biāo)以顯示生成的Angular標(biāo)記。 從那里，突出顯示要復(fù)制的文本，并使用快捷鍵（在Windows上，Ctrl + C）將文本復(fù)制到剪貼板。 請注意，VS Code的“編輯”菜單上的“復(fù)制”命令不適用于設(shè)計(jì)器。

<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>

在我們的示例中，生成的標(biāo)記包含表示Y軸，圖表圖例，三個(gè)數(shù)據(jù)系列和趨勢線的子元素。 要返回可視化設(shè)計(jì)器，請單擊WijmoJS 徽標(biāo)下方的“設(shè)計(jì)視圖”按鈕。

設(shè)計(jì)器版本之間的差異

下表總結(jié)了WijmoJS 可視化在線設(shè)計(jì)器，從HTML源文件中的CodeLens鏈接調(diào)用和VS Code從獨(dú)立命令調(diào)用 WijmoJS VSCode設(shè)計(jì)器之間的差異：

設(shè)計(jì)器不提供“事件”窗格，因?yàn)樗荒苄薷脑伎丶?biāo)記 —— 它不了解整個(gè)Angular項(xiàng)目。 但是，當(dāng)擴(kuò)展更新源文件時(shí)，將保留原始控件標(biāo)記中定義的任何現(xiàn)有事件處理程序。

設(shè)計(jì)器的獨(dú)立命令會記住當(dāng)前工作空間上下文中可視化設(shè)計(jì)界面的狀態(tài)，即使您關(guān)閉并重新打開VS代碼也是如此。

凾待解決的部分

本次更新的WijmoJS VSCode設(shè)計(jì)器暫不支持以下WijmoJS控件：

• Menu

• Popup

• TabPanel

• MultiRow

• PdfViewer

• ReportViewer

在Angular項(xiàng)目中，控件屬性通常綁定到運(yùn)行時(shí)的數(shù)據(jù)成員而不是文字值。 在這種情況下，設(shè)計(jì)器以斜體顯示只讀文本框中的綁定。 保存操作期間保留綁定事件; 但是，在設(shè)計(jì)器中沒有用于創(chuàng)建或編輯它們的界面。

有關(guān)Angular標(biāo)記的當(dāng)前限制列表，請參閱Visual Studio Marketplace上的擴(kuò)展頁面。

總結(jié)

WijmoJS VS Code設(shè)計(jì)器通過提供WYSIWYG設(shè)計(jì)界面來協(xié)助前端開發(fā)工程師進(jìn)行 Angular 項(xiàng)目開發(fā)，該設(shè)計(jì)器用于編輯代表WijmoJS控件的標(biāo)記。此外，設(shè)計(jì)器還支持通過提供獨(dú)立設(shè)計(jì)模式創(chuàng)建新的WijmoJS標(biāo)記，您可以在其中試驗(yàn)控件屬性，子對象和集合。

關(guān)于葡萄城

賦能開發(fā)者！葡萄城公司成立于 1980 年，是全球領(lǐng)先的集開發(fā)工具、商業(yè)智能解決方案、管理系統(tǒng)設(shè)計(jì)工具于一身的軟件和服務(wù)提供商。西安葡萄城是其在中國的分支機(jī)構(gòu)，面向全球市場提供軟件研發(fā)服務(wù)，并為中國企業(yè)的信息化提供國際先進(jìn)的開發(fā)工具、軟件和研發(fā)咨詢服務(wù)。葡萄城的控件和軟件產(chǎn)品在國內(nèi)外屢獲殊榮，在全球被數(shù)十萬家企業(yè)、學(xué)校和政府機(jī)構(gòu)廣泛應(yīng)用。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：如何使用WijmoJS純前端設(shè)計(jì)器，快速生成Angula-創(chuàng)新互聯(lián)
文章起源：http://muchs.cn/article42/cshshc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、品牌網(wǎng)站建設(shè)、網(wǎng)站改版、關(guān)鍵詞優(yōu)化、Google、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)