如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

77rou發表於2018-08-13
前端控制元件JS視覺化

概述

WijmoJS Designer，一種全新的線上Web託管工具，為 WijmoJS純前端控制元件集 提供了視覺化設計圖面和 Java程式碼生成器。 WijmoJS Designer允許使用者建立控制元件例項，指定 屬性和事件 ，並生成可以合併到應用程式中的相應HTML 和 Java。WijmoJS 線上Web設計器對於開發網格和圖表等複雜物件特別有用。

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

The Wijmo Designer

除了這款線上設計器，如果您正在使用Angular進行開發，還可以嘗試使用Visual Studio Code的WijmoJS Designer擴充套件，它為VS Code 提供了一個可視介面，用於建立和編輯表示WijmoJS 純前端控制元件的Angular標記。

開始使用WijmoJS Designer

設計器視覺化介面首次開啟時，該設計圖面預設自帶一個帶有實時樣本資料的純前端FlexGrid表格控制元件，要刪除它，請單擊“編輯”工具欄上的“刪除”按鈕。

設計器的主選單預設為全部摺疊，並顯示為垂直條形圖示。單擊頁面左上角的WijmoJS徽標以展開選單。

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

工具箱”命令開啟一個可摺疊的 WijmoJS 前端控制元件皮膚，按模組名稱（網格，圖表，輸入，儀表，導航，OLAP）分組。 展開輸入組並單擊“日曆”以新增名為calendar1的新控制元件。

設計表面現在看起來像這樣：

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

要摺疊主選單，請再次單擊WijmoJS 徽標，或單擊設計圖面內部的任何位置（“編輯”工具欄下方的區域）。

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

日曆控制元件現在顯示當年的月份的全名

單擊“屬性”選項卡右側的箭頭圖示以顯示“事件”窗格，該窗格顯示所選控制元件公開的每個事件的切換按鈕。對於開啟的每個事件，WijmoJS 設計器將自動生成事件Java程式碼。如下圖，開啟valueChanged事件的前端控制元件。

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

您可以通過單擊頁面右邊緣的箭頭來摺疊屬性/事件側欄。

設計表面支援具有順序佈局的多個純前端控制元件。使用者可通過開啟工具箱並將InputDateTime控制元件新增到設計圖面，單擊“編輯”工具欄上的“上移”按鈕以交換兩個控制元件的位置。

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

此外，您還可以使用WijmoJS設計器檢視並選擇不同WijmoJS 主題效果。 單擊WijmoJS 徽標以關閉工具箱，單擊主題以顯示可用主題列表，然後單擊其他值，例如Cerulean。

Generating code

如果您對當前 WijmoJS 視覺化線上Web設計器的設計效果感到滿意，則可以生成在應用程式中使用的程式碼。單擊WijmoJS 徽標以關閉“主題”列表，然後單擊“源檢視”以顯示生成的HTML 和 Java。

WijmoJS 線上Web設計器目前僅支援生成純Java程式碼，並不依賴於任何特定框架，如jQuery或Angular 。

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

使用左側的“儲存”圖示將HTML寫入檔案或選擇所需的片段並使用瀏覽器的UI將其複製到剪貼簿。生成的程式碼包含以下元素：

  • <head>標籤，引用主要WijmoJS 的CSS檔案和所選主題檔案。

  • <>標籤，自動生成用於WijmoJS設計器支援的任何純前端控制元件組合的<>標籤。您可以省略大量不需要的模組引用。

  • <body>標籤，對於在設計器中建立的每個控制元件，均包含預設為空的<div>的<body>標記。

  • 內聯<>塊，用於例項化設計器中建立的每個控制元件並應用任何自定義屬性/事件設定。在我們的示例中，該指令碼包含以下程式碼：

// var key = "your-license-key";

//wijmo.setLicenseKey(key);

var inputdatetime1 = new wijmo.input.InputDateTime("#inputdatetime1");

var calendar1 = new wijmo.input.Calendar("#calendar1", {

formatMonths: "MMMM",

monthView: false

});

calendar1.valueChanged.addHandler(function (s, e) {

});

前兩行被註釋掉了。如果要將此程式碼部署到公共伺服器，則可以在此處插入應用程式的WijmoJS許可證金鑰。這兩個賦值語句在空的< div>標記上呼叫相應的WijmoJS建構函式。

對Calendar建構函式的呼叫指定了一個包含formatMonths和monthView屬性的修改值的引數。但是，InputDateTime建構函式沒有引數，因為沒有更改屬性。最後，最後一行為日曆的valueChanged事件新增了一個Demo處理程式。

要返回視覺化設計器，請單擊頁面左側的“設計檢視”按鈕（“儲存”按鈕下方）。

如果要儲存設計器佈局以供將來使用，請使用主工具欄上的“儲存”按鈕將當前狀態寫入JSON檔案，然後使用主工具欄上的“開啟”按鈕重新載入所選檔案的內容。請注意，設計器不會從源檢視中儲存的HTML恢復狀態，只能從設計檢視中儲存的JSON恢復。

使用圖表

現在讓我們考慮一個更復雜的例子。 從設計圖面刪除所有控制元件，然後在“工具箱”中展開圖表組，並單擊名為FlexChart的專案。 請注意，該圖表顯示代表“最活躍”證券的實時樣本資料。 這與首次開啟設計器時預設FlexGrid中顯示的資料集相同，僅限於前六行。

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

在“屬性”窗格中，請注意圖表上有四個表示複雜物件的屬性：axisX，axisY，dataLabel和legend。 單擊axisY屬性的齒輪圖示，然後將format屬性設定為字串c0，表示零小數位的貨幣值。 設計表面現在看起來像這樣：

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

請注意Y軸中顯示的貨幣符號。 單擊“屬性”窗格中的“後退”按鈕以返回FlexChart的設定。 接下來，單擊圖例屬性的齒輪圖示，並將其位置設定更改為“底部”。

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

像以前一樣單擊後退按鈕返回FlexChart設定。 通過將其標題屬性設定為Most Active，為圖表新增標題。 找到palette屬性，單擊編輯器中的Show Colors按鈕，然後選擇一個預定義的值，例如dark。 現在圖表看起來像這樣：

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

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

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

將滑鼠懸停在最新價格上，然後單擊出現的連結。 請注意，它具有latestPrice的繫結值，對應於資料來源中的實際欄位名稱。 name屬性（在圖表圖例中顯示）具有適當的大小寫和單詞之間的空格。

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

單擊後退按鈕返回FlexChart設定，然後像以前一樣展開系列屬性。 現在單擊“新增專案”連結以將新圖表系列新增到集合的末尾。 單擊新新增專案右邊緣的向下箭頭，然後從可用系列型別列表中選擇TrendLine。

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

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

如何使用純前端控制元件集 WijmoJS 中的視覺化線上設計器

在源檢視中，生成的程式碼以對FlexChart建構函式的呼叫開始。 請注意axisY和legend的子物件引數。

var flexchart1 = new wijmo.chart.FlexChart("#flexchart1", {

axisY: {

format: "c0"

},

bindingX: "symbol",

header: "Most Active",

legend: {

position: "Bottom"

},

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

});

單個圖表系列按照在設計器中指定的順序推送到系列集合屬性。 趨勢行（最後新增）使用專門的TrendLine建構函式而不是預設的Series建構函式。

flexchart1.series.push(new wijmo.chart.Series({

name: "Latest Price",

binding: "latestPrice"

}));

flexchart1.series.push(new wijmo.chart.Series({

name: "52-Week High",

binding: "week52High"

}));

flexchart1.series.push(new wijmo.chart.Series({

name: "52-Week Low",

binding: "week52Low"

}));

flexchart1.series.push(new wijmo.chart.analytics.TrendLine({

binding: "latestPrice",

fitType: "Logarithmic",

visibility: "Plot"

}));

提供了預設的系列名稱和繫結，以便您可以瞭解在應用程式中使用實際資料進行部署時實際圖表的外觀。 您可以使用自己的繫結替換預設系列以生成程式碼，但設計人員不會繪製任何資料點。

凾待解決的部分

目前，WijmoJS線上Web設計器剛剛推出，暫時不支援以下WijmoJS控制元件：

  • Menu

  • Popup

  • TabPanel

  • MultiRow

  • PdfViewer

  • ReportViewer

暫不支援以下可為WijmoJS控制元件新增功能的可建立物件：

  • DataMap

  • FlexGridFilter

  • FlexSheetFilter

  • LineMarker

  • RangeSelector

  • ChartTooltip

  • ChartAnimation

  • ChartGestures

  • AnnotationLayer

  • PlotArea

總結

藉助 WijmoJS  線上Web Designer，您可以通過視覺化設計介面來輕鬆構建具有WijmoJS純前端控制元件的應用程式，該介面可讓您輕鬆操作控制元件屬性，子物件和集合。並且自動生成可以新增到專案中的純Java程式碼和HTML，節省開發人員的專案設計和開發時間，最大限度地減少編碼錯誤和拼寫錯誤。

關於 葡萄城

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


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

相關文章