如何使用純前端控件集WijmoJS中的可視化在線設(shè)計(jì)器

概述

WijmoJS Designer，一種全新的在線Web托管工具，為WijmoJS純前端控件集提供了可視化設(shè)計(jì)圖面和 Java代碼生成器。 WijmoJS Designer允許用戶創(chuàng)建控件實(shí)例，指定屬性和事件，并生成可以合并到應(yīng)用程序中的相應(yīng)HTML 和 Java。WijmoJS 在線Web設(shè)計(jì)器對(duì)于開發(fā)網(wǎng)格和圖表等復(fù)雜對(duì)象特別有用。

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)靜海,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

The Wijmo Designer

除了這款在線設(shè)計(jì)器，如果您正在使用Angular進(jìn)行開發(fā)，還可以嘗試使用Visual Studio Code的WijmoJS Designer擴(kuò)展，它為VS Code 提供了一個(gè)可視界面，用于創(chuàng)建和編輯表示W(wǎng)ijmoJS 純前端控件的Angular標(biāo)記。

開始使用WijmoJS Designer

設(shè)計(jì)器可視化界面首次打開時(shí)，該設(shè)計(jì)圖面默認(rèn)自帶一個(gè)帶有實(shí)時(shí)樣本數(shù)據(jù)的純前端FlexGrid表格控件，要?jiǎng)h除它，請(qǐng)單擊“編輯”工具欄上的“刪除”按鈕。

設(shè)計(jì)器的主菜單默認(rèn)為全部折疊，并顯示為垂直條形圖標(biāo)。單擊頁面左上角的WijmoJS徽標(biāo)以展開菜單。

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

工具箱”命令打開一個(gè)可折疊的WijmoJS前端控件面板，按模塊名稱（網(wǎng)格，圖表，輸入，儀表，導(dǎo)航，OLAP）分組。 展開輸入組并單擊“日歷”以添加名為calendar1的新控件。

設(shè)計(jì)表面現(xiàn)在看起來像這樣：

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

要折疊主菜單，請(qǐng)?jiān)俅螁螕鬢ijmoJS 徽標(biāo)，或單擊設(shè)計(jì)圖面內(nèi)部的任何位置（“編輯”工具欄下方的區(qū)域）。

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

日歷控件現(xiàn)在顯示當(dāng)年的月份的全名

單擊“屬性”選項(xiàng)卡右側(cè)的箭頭圖標(biāo)以顯示“事件”窗格，該窗格顯示所選控件公開的每個(gè)事件的切換按鈕。對(duì)于打開的每個(gè)事件，WijmoJS 設(shè)計(jì)器將自動(dòng)生成事件Java代碼。如下圖，打開valueChanged事件的前端控件。

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

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

設(shè)計(jì)表面支持具有順序布局的多個(gè)純前端控件。用戶可通過打開工具箱并將InputDateTime控件添加到設(shè)計(jì)圖面，單擊“編輯”工具欄上的“上移”按鈕以交換兩個(gè)控件的位置。

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

此外，您還可以使用WijmoJS設(shè)計(jì)器查看并選擇不同WijmoJS 主題效果。 單擊WijmoJS 徽標(biāo)以關(guān)閉工具箱，單擊主題以顯示可用主題列表，然后單擊其他值，例如Cerulean。

Generating code

如果您對(duì)當(dāng)前WijmoJS可視化在線Web設(shè)計(jì)器的設(shè)計(jì)效果感到滿意，則可以生成在應(yīng)用程序中使用的代碼。單擊WijmoJS 徽標(biāo)以關(guān)閉“主題”列表，然后單擊“源視圖”以顯示生成的HTML 和 Java。

WijmoJS 在線Web設(shè)計(jì)器目前僅支持生成純Java代碼，并不依賴于任何特定框架，如jQuery或Angular。

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

使用左側(cè)的“保存”圖標(biāo)將HTML寫入文件或選擇所需的片段并使用瀏覽器的UI將其復(fù)制到剪貼板。生成的代碼包含以下元素：

  • <head>標(biāo)簽，引用主要WijmoJS 的CSS文件和所選主題文件。

  • <>標(biāo)簽，自動(dòng)生成用于WijmoJS設(shè)計(jì)器支持的任何純前端控件組合的<>標(biāo)簽。您可以省略大量不需要的模塊引用。

  • <body>標(biāo)簽，對(duì)于在設(shè)計(jì)器中創(chuàng)建的每個(gè)控件，均包含默認(rèn)為空的<div>的<body>標(biāo)記。

  • 內(nèi)聯(lián)<>塊，用于實(shí)例化設(shè)計(jì)器中創(chuàng)建的每個(gè)控件并應(yīng)用任何自定義屬性/事件設(shè)置。在我們的示例中，該腳本包含以下代碼：

// 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) {

});

前兩行被注釋掉了。如果要將此代碼部署到公共服務(wù)器，則可以在此處插入應(yīng)用程序的WijmoJS許可證密鑰。這兩個(gè)賦值語句在空的< div>標(biāo)記上調(diào)用相應(yīng)的WijmoJS構(gòu)造函數(shù)。

對(duì)Calendar構(gòu)造函數(shù)的調(diào)用指定了一個(gè)包含formatMonths和monthView屬性的修改值的參數(shù)。但是，InputDateTime構(gòu)造函數(shù)沒有參數(shù)，因?yàn)闆]有更改屬性。最后，最后一行為日歷的valueChanged事件添加了一個(gè)Demo處理程序。

要返回可視化設(shè)計(jì)器，請(qǐng)單擊頁面左側(cè)的“設(shè)計(jì)視圖”按鈕（“保存”按鈕下方）。

如果要保存設(shè)計(jì)器布局以供將來使用，請(qǐng)使用主工具欄上的“保存”按鈕將當(dāng)前狀態(tài)寫入JSON文件，然后使用主工具欄上的“打開”按鈕重新加載所選文件的內(nèi)容。請(qǐng)注意，設(shè)計(jì)器不會(huì)從源視圖中保存的HTML恢復(fù)狀態(tài)，只能從設(shè)計(jì)視圖中保存的JSON恢復(fù)。

使用圖表

現(xiàn)在讓我們考慮一個(gè)更復(fù)雜的例子。 從設(shè)計(jì)圖面刪除所有控件，然后在“工具箱”中展開圖表組，并單擊名為FlexChart的項(xiàng)目。 請(qǐng)注意，該圖表顯示代表“最活躍”證券的實(shí)時(shí)樣本數(shù)據(jù)。 這與首次打開設(shè)計(jì)器時(shí)默認(rèn)FlexGrid中顯示的數(shù)據(jù)集相同，僅限于前六行。

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

在“屬性”窗格中，請(qǐng)注意圖表上有四個(gè)表示復(fù)雜對(duì)象的屬性：axisX，axisY，dataLabel和legend。 單擊axisY屬性的齒輪圖標(biāo)，然后將format屬性設(shè)置為字符串c0，表示零小數(shù)位的貨幣值。 設(shè)計(jì)表面現(xiàn)在看起來像這樣：

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

請(qǐng)注意Y軸中顯示的貨幣符號(hào)。 單擊“屬性”窗格中的“后退”按鈕以返回FlexChart的設(shè)置。 接下來，單擊圖例屬性的齒輪圖標(biāo)，并將其位置設(shè)置更改為“底部”。

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

像以前一樣單擊后退按鈕返回FlexChart設(shè)置。 通過將其標(biāo)題屬性設(shè)置為Most Active，為圖表添加標(biāo)題。 找到palette屬性，單擊編輯器中的Show Colors按鈕，然后選擇一個(gè)預(yù)定義的值，例如dark。 現(xiàn)在圖表看起來像這樣：

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

WijmoJS Designer對(duì)于操作圖表系列等集合特別有用。 例如，您可以通過添加適當(dāng)類型的新系列元素，輕松地將趨勢(shì)線添加到圖表。 在我們這樣做之前，讓我們看看設(shè)計(jì)師生成的默認(rèn)系列集合。 在“屬性”窗格中向下滾動(dòng)，找到系列屬性，然后單擊“顯示項(xiàng)目”按鈕將其展開。

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

將鼠標(biāo)懸停在最新價(jià)格上，然后單擊出現(xiàn)的鏈接。 請(qǐng)注意，它具有l(wèi)atestPrice的綁定值，對(duì)應(yīng)于數(shù)據(jù)源中的實(shí)際字段名稱。 name屬性（在圖表圖例中顯示）具有適當(dāng)?shù)拇笮懞蛦卧~之間的空格。

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

單擊后退按鈕返回FlexChart設(shè)置，然后像以前一樣展開系列屬性。 現(xiàn)在單擊“添加項(xiàng)目”鏈接以將新圖表系列添加到集合的末尾。 單擊新添加項(xiàng)目右邊緣的向下箭頭，然后從可用系列類型列表中選擇TrendLine。

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

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

如何使用純前端控件集 WijmoJS 中的可視化在線設(shè)計(jì)器

在源視圖中，生成的代碼以對(duì)FlexChart構(gòu)造函數(shù)的調(diào)用開始。 請(qǐng)注意axisY和legend的子對(duì)象參數(shù)。

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

});

單個(gè)圖表系列按照在設(shè)計(jì)器中指定的順序推送到系列集合屬性。 趨勢(shì)行（最后添加）使用專門的TrendLine構(gòu)造函數(shù)而不是默認(rèn)的Series構(gòu)造函數(shù)。

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"

}));

提供了默認(rèn)的系列名稱和綁定，以便您可以了解在應(yīng)用程序中使用實(shí)際數(shù)據(jù)進(jìn)行部署時(shí)實(shí)際圖表的外觀。 您可以使用自己的綁定替換默認(rèn)系列以生成代碼，但設(shè)計(jì)人員不會(huì)繪制任何數(shù)據(jù)點(diǎn)。

凾待解決的部分

目前，WijmoJS在線Web設(shè)計(jì)器剛剛推出，暫時(shí)不支持以下WijmoJS控件：

  • Menu

  • Popup

  • TabPanel

  • MultiRow

  • PdfViewer

  • ReportViewer

暫不支持以下可為WijmoJS控件添加功能的可創(chuàng)建對(duì)象：

  • DataMap

  • FlexGridFilter

  • FlexSheetFilter

  • LineMarker

  • RangeSelector

  • ChartTooltip

  • ChartAnimation

  • ChartGestures

  • AnnotationLayer

  • PlotArea

總結(jié)

借助WijmoJS 在線Web Designer，您可以通過可視化設(shè)計(jì)界面來輕松構(gòu)建具有WijmoJS純前端控件的應(yīng)用程序，該界面可讓您輕松操作控件屬性，子對(duì)象和集合。并且自動(dòng)生成可以添加到項(xiàng)目中的純Java代碼和HTML，節(jié)省開發(fā)人員的項(xiàng)目設(shè)計(jì)和開發(fā)時(shí)間，最大限度地減少編碼錯(cuò)誤和拼寫錯(cuò)誤。

關(guān)于葡萄城

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

當(dāng)前名稱：如何使用純前端控件集WijmoJS中的可視化在線設(shè)計(jì)器
網(wǎng)頁地址：http://muchs.cn/article2/pdjioc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、定制網(wǎng)站、品牌網(wǎng)站制作、商城網(wǎng)站、微信公眾號(hào)、網(wǎng)站排名

廣告

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

網(wǎng)站托管運(yùn)營(yíng)