概述

作為一款純前端控件集，WijmoJS 秉承“快如閃電，觸控優(yōu)先”的設(shè)計理念，在提供優(yōu)質(zhì)服務(wù)和產(chǎn)品的同時，專注于企業(yè)應(yīng)用開發(fā)，不斷優(yōu)化產(chǎn)品架構(gòu)，與時俱進(jìn)。除在全球率先支持 AngularJS外，現(xiàn)已全面應(yīng)用于 React、Vuejs、TypeScript 、Ionic 等主流框架中。

近日，WijmoJS 2018V2 正式發(fā)布，提供 Web 設(shè)計器，可動態(tài)設(shè)計Web頁面并生成代碼，提供 SASS 支持，提升控件可訪問性。

WijmoJS – Web設(shè)計器

目前為止，WijmoJS 純前端控件集已經(jīng)十分易于前端開發(fā)使用，但仍需要編寫代碼。WijmoJS 2018V2 宣布，這種方式將被徹底顛覆。我們現(xiàn)在擁有了用于創(chuàng)建和自定義WijmoJS控件的設(shè)計器，包含兩個beta版本，一個是與Visual Studio Code完美融合的設(shè)計器、另一個則是在線Web設(shè)計器，提供實時預(yù)覽和編輯頁面屬性的功能。

• VSCode設(shè)計器：用于自定義Angular 框架下WijmoJS 組件
• Web在線設(shè)計器，用于創(chuàng)建和自定義PureJS wijmoJS 控件

VSCode設(shè)計器

此設(shè)計器是VSCode的擴(kuò)展。安裝后，它會在每個Angular 框架下的WijmoJS組件上方添加“Wijmo Designer ...”操作。單擊操作按鈕后，它將打開一個設(shè)計界面，用于自定義該特定組件。開發(fā)人員可以實時更改屬性和綁定事件，并將所做更改保存回 Angular應(yīng)用程序中。

要在VSCode中安裝此擴(kuò)展，請單擊VS Marketplace上Designer設(shè)置中的“安裝”按鈕。

此外，您還可以在VSCode的擴(kuò)展管理器中搜索“wijmo”并從那里安裝。

確保安裝后重新加載VSCode。 然后打開一個使用WijmoJS 控件的Angular應(yīng)用程序并嘗試啟動設(shè)計器。

Web在線設(shè)計器

此設(shè)計器是用于創(chuàng)建和自定義WijmoJS控件的Web應(yīng)用程序。 您可以在任何瀏覽器中運(yùn)行此設(shè)計器。它允許您將控件添加到設(shè)計圖面，然后根據(jù)自己的喜好自定義它們。完成后，您可以將生成的代碼復(fù)制到您自己的應(yīng)用程序中。

Web-based Wijmo Designer

此設(shè)計器生成的代碼是純HTML和JavaScript。 生成的代碼包括初始化控件所需的引用，宿主元素和JavaScript腳本。

SASS支持的控件和主題

我們的控件樣式（布局，默認(rèn)樣式）以前是用CSS編寫的。最初，它很簡單，但目前已經(jīng)發(fā)展到難以管理的程度。因此，我們決定使用SASS和更好的方式來重寫我們的樣式。

• 您可以輕松使用我們的SASS文件來創(chuàng)建自己的主題風(fēng)格。我們還提供SASS文件供您使用和自定義。
• 您現(xiàn)在可以選擇要包含在應(yīng)用程序中的SASS模塊。 例如，我們現(xiàn)在有一個僅包含核心模塊（非企業(yè)）的WijmoJS-Core文件，它只是全部CSS文件的一小部分。您可以有選擇地使用要包含的模塊來真正優(yōu)化CSS大小。
• 我們在Web Component interop中增加了對 Shadow DOM的支持。

我們希望通過這些改進(jìn)，為使用純前端控件集WijmoJS開發(fā)的Web應(yīng)用程序更易使用，更加輕盈。

新的React / Redux加密貨幣跟蹤應(yīng)用程序

我們?yōu)槭褂肦eact和Redux的 WijmoJS 增加了加密貨幣跟蹤應(yīng)用程序，該應(yīng)用程序是一個財務(wù)儀表板，可用于跟蹤加密貨幣值，這些值是在用戶開發(fā)的生產(chǎn)應(yīng)用程序之后建模的。使用React / Redux的現(xiàn)代設(shè)計模式和各種WijmoJS 控件，可以幫助您更好地評估和開發(fā) WijmoJS 應(yīng)用程序。

Wijmo Crypto Currency App

支持Vue V2的集成增強(qiáng)功能

隨著Vue的不斷發(fā)展，我們正在改進(jìn)我們的互操作用法。本次更新中為我們的Vue V2支持增加了很多不錯的功能。比如，WijmoJS 子組件現(xiàn)在可以在動態(tài)場景中正確工作，例如v-for和v-if指令。

Child components in Vue.js

我們還添加了WjFlexGridDetail等組件，并添加了一些新的示例。

點擊查看 Vue 2 AllComponents sample

ES6和ESModule支持

本次更新，增加了ES6版本的WijmoJS模塊（測試版），你可以在WijmoJS 安裝包的NpmImages文件夾中找到它：

• wijmo-es2015-esm-min - ESM模塊格式（ES6導(dǎo)入/導(dǎo)出語句）
• wijmo-es2015-commonjs-min - 采用CommonJS模塊格式

今年我們將繼續(xù)研究和開發(fā)基于ES6 的支持。

WijmoJS 中的Web Components

WijmoJS 的 Web組件互操作的測試版已經(jīng)推出，它將WijmoJS控件公開為Web組件，更具體地說是自定義元素。 WijmoJS Web組件允許您以聲明方式將WijmoJS控件添加到HTML頁面，并將其作為常用DOM元素進(jìn)行操作，而無需使用任何其他框架。 某些不完全支持Web組件標(biāo)準(zhǔn)的瀏覽器可能需要一些額外的Polyfill 支持。

如果您不熟悉Web組件，請參考這篇博客。

WijmoJS Web組件實現(xiàn)當(dāng)前狀態(tài)的關(guān)鍵點：

WijmoJS 控件的WijmoJS“頂級”Web組件（如表示FlexGrid控件的wjc-flex-grid組件）繼承自相應(yīng)的控件類。例如，WjcFlexGrid組件類擴(kuò)展了FlexGrid控件類。這也意味著當(dāng)WijmoJS 用于“Web組件模式”時，基礎(chǔ)WijmoJS 控件類擴(kuò)展了HTML 元素類。

與頂級組件互補(bǔ)的子組件，如定義FlexGrid列的wjc-flex-grid-column組件，作為它們所代表的WijmoJS 類的包裝器。子組件直接從HTMLElementclass繼承，底層 WijmoJS 類實例可通過組件的特殊控件屬性訪問。

可以使用組件元素上的屬性定義 WijmoJS 類屬性。當(dāng)屬性值更改時，相應(yīng)的 WijmoJS 類屬性會相應(yīng)更新。目前，更改類屬性值不需要更改相應(yīng)的屬性值。

JavaScript代碼可以使用本機(jī)Element.addEventListener（'event'，handler）方法為WijmoJS控件事件訂閱處理程序。

WijmoJS 組件現(xiàn)在不使用Shadow DOM。這將在互操作的未來版本中得到解決。最大的挑戰(zhàn)是 WijmoJS 允許通過CSS對其控件的部件進(jìn)行深度定制，而Shadow DOM的目標(biāo)是防止它。有關(guān)Shadow DOM規(guī)范的新提議可以緩解此限制，我們正在密切關(guān)注這些更改。目前，WijmoJS Web組件及其部件可以使用全局CSS以與普通WijmoJS控件相同的方式進(jìn)行自定義。

Web組件的最大好處是，可以在不同的框架中使用相同的組件，并從框架的附加功能（如屬性，屬性和事件綁定）中受益。

目前，我們添加了Web Components In Angular示例，演示了如何在Angular應(yīng)用程序中使用 WijmoJS Web組件。其他流行框架（如React，Vue，Polymer等）的示例正在開發(fā)中。（如有需要，請及時聯(lián)系我們）

支持Angular 6和TypeScript 2.7

WijmoJS 已經(jīng)全面支持Angular 6.0.0版。我們?nèi)栽谂⑺蠨emo示例升級到Angular V6，并將我們的TypeScript版本升級到V2.7。

新增的示例

• WebComponentsIntro sample | Web Components intro blog
• WebComponents AllComponents sample
• React/Redux CryptoCurrencyTracking sample
• Vue 2 AllComponents sample
• Vue 2 FlexGrid DynamicColumns sample
• Vue 2 FlexGrid GroupPanel sample
• Vue 2 FlexGrid RowDetail sample

更新日志

• [WebComponents]添加了WebComponents互操作的Beta版本（wijmo.webcomponents.xxx.js模塊）。 Samples \ TS \ WebComponents \ WebComponentsIntro示例說明了互操作的狀態(tài)和用法。
• [npm] WijmoJS作為'wijmo'包發(fā)布到全局npm注冊表。
• [WebComponents]添加了AllComponents示例，其中包括所有主要支持的組件。
• 添加了基于Web的WijmoJS 在線設(shè)計器，使用類似Visual Studio的屬性網(wǎng)格和設(shè)計界面，提供基于 Web 的WijmoJS Designer PureJS控件。
• 添加了VSCode WijmoJS Designer擴(kuò)展，使用類似Visual Studio的屬性網(wǎng)格和設(shè)計界面。
• Wijmo CSS文件現(xiàn)在可使用Sass實現(xiàn)。
• [React / Redux]添加了React / Redux CryptoCurrencyTracking示例。
• [ES6]版本462的WijmoJS ES6 npm圖像（NpmImages中的wijmo-es2015-commonjs-min和wijmo-es2015-esm-min文件夾）被批準(zhǔn)為發(fā)布版本。
• [a11y]添加了一個wj-state-focus類選擇器，它補(bǔ)充了以wj-state為中心的選擇器。 wj-state-focus選擇器獲取具有焦點的WijmoJS控件。 wj-state-focused選擇器獲取包含焦點的所有WijmoJS控件。例如，如果嵌套了WijmoJS控件A，B和C，并且控件C包含活動元素，則.wj-state-focus將選擇C，而.wj-state-focused將選擇A，B和C. wj-state-focus選擇器可用于在CSS中實現(xiàn)焦點輪廓。例如：

.wj-state-focus, a:focus, button:not(.wj-btn-default):focus, input:not(.wj-form-control):focus, input[type=checkbox]:focus {box-shadow: 0px 0px 17px 0px rgb(41,173,68); }

• [a11y]改進(jìn)了Calendar，TreeView，InputDate和FlexGridFilter的可訪問性。
• [a11y]為FlexGrid本機(jī)編輯器元素添加了aria-required屬性
• [a11y]用按鈕元素替換了按鈕（更好的輔助功能，支持輸入/空格鍵）
• [a11y]用按鈕元素（過濾器，細(xì)節(jié)，列表，折疊/展開）替換FlexGrid中的所有單元格按鈕
• [a11y]為DropDown，InputDateTime，InputNumber，Calendar，ColumnFilterEditor控件中的按鈕添加了ARIA屬性
• [a11y]為ListBox，Calendar，TreeView中的選定項添加了aria-selected屬性（如FlexGrid和TabPanel）
• [a11y]清理了ComboBox ARIA屬性
• [a11y]在Calendar和TreeView控件中添加了漫游tabindex（更好的可訪問性，如FlexGrid和TabPanel）
• [a11y]在FlexGrid的ColumnCollecion和Column類中添加了'describedById'屬性。這用于在列標(biāo)題和過濾元素上設(shè)置aria-describedby屬性。
• [a11y]為FlexGridDetailProvider類添加了keyActionEnter屬性。
• 改進(jìn)了FlexGrid.virtualizationThreshold以支持?jǐn)?shù)組：[rowThreshold，columnThreshold] * [Vue2]添加了許多子組件，如各種圖表系列。
• [Vue2]子組件現(xiàn)在可以在動態(tài)場景中正確工作，例如v-for和v-if指令。
• [Vue2]添加了WjFlexGridDetail組件。
• [Vue2]添加了新示例。
• 所有示例都使用httpS CDN引用。
• OData示例現(xiàn)在使用httpS。
• 使用WijmoJS Designer主題更新WijmoHelp。
• 使用Sass相關(guān)主題更新文檔。
• 添加了Gauge.stackRanges屬性，該屬性使控件堆疊范圍。 RadialGauge將它們顯示為同心扇區(qū)，將LinearGauge顯示為堆疊條。
• 添加了FlexGrid.autoSearch屬性，允許用戶通過不可編輯的單元格搜索網(wǎng)格中的內(nèi)容。
• 打開下拉列表時優(yōu)化的ComboBox性能。
• 填充列表時優(yōu)化ListBox性能。
• 添加了ODataCollectionView.expand屬性以允許檢索相關(guān)實體（如在OData的\$ expand選項中）。
• 添加了ODataCollectionView.jsonReviver屬性，該屬性允許自定義從服務(wù)器返回的JSON數(shù)據(jù)的解析過程。
• 支持在FlexSheet的綁定工作表中插入/刪除列。
• 向PdfPageArea類添加了文檔屬性。
• 向IFlexGridDrawSettings接口添加了drawDetailRows屬性。
• 向ReportViewer和PdfViewer控件添加了requestHeaders屬性。
• 向ReportViewer和PdfViewer控件添加了beforeSendRequest事件。
• 為ReportViewer控件添加了參數(shù)屬性。
• 改進(jìn)了CollectionView排序以處理變音符號（重音符號）。

重大更新

• [NPM]“themes”文件夾現(xiàn)在是“styles”文件夾的子項。以前是“Styles”的同級目錄。
• 新的基于Sass的CSS文件包含一些比原始CSS更具體的規(guī)則，因此如果您有自定義CSS文件，則可能需要調(diào)整其規(guī)則。
• 新的CSS文件有關(guān)于顏色，填充等的更一致的規(guī)則，因此您在升級時可能會看到一些小的更改。例如，我們在ListBox，FlexGrid，Calendar等中使項目填充一致。
• 新的基于Sass的主題文件是自包含的，不需要您再將基本wijmo.css文件添加到頁面。這意味著對包含主題控件的頁面的HTTP請求減少了一個。這不是一個突破性的變化，而是一個提高性能的機(jī)會。
• 將AutoComplete.isContentHtml屬性的默認(rèn)值從true更改為false。這不應(yīng)該影響大多數(shù)應(yīng)用程序，新的默認(rèn)值可以防止非自愿的腳本/ html注入。如果它確實會影響您的應(yīng)用程序，請將AutoComplete.isContentHtml屬性設(shè)置為true，您將獲得原始行為。

---

WijmoJS | 下載試用

快如閃電，觸控優(yōu)先。純前端控件集 WijmoJS，為您的企業(yè)應(yīng)用提供更加靈活的操作體驗，在全球率先支持 AngularJS，并×××能卓越、零依賴的 FlexGrid 和金融圖表等多個控件，為您提供易用、輕松的操作體驗，全面滿足開發(fā)所需。

您對WijmoJS產(chǎn)品的任何技術(shù)問題，都有技術(shù)支持工程師提供1對1專業(yè)解答，點擊此處即可發(fā)帖提問>>

轉(zhuǎn)載于:https://blog.51cto.com/7787339/2153922

總結(jié)

以上是生活随笔為你收集整理的新一代纯前端控件集 WijmoJS 2018V2发布，提供 Web 设计器，可动态设计页面并生成代码...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。