VS跨平台开发框架DevExtreme使用教程:在XAF应用中使用DevExtreme Widgets

原创|行业资讯|编辑:龚雪|2020-10-26 10:45:23.037|阅读 20 次

概述:DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。本文将重点为大家介绍如何在XAF应用中使用DevExtreme Widgets,DevExtreme v20.1.8已发布,欢迎下载最新版试用!

# 项目交付用正版,省下一台Iphone12 # # 31款JAVA开发必备控件和工具 #

相关链接:

下载DevExtreme v20.1完整版    DevExpress v20.1汉化资源获取

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

系统背景
  • 平台:Frameworks (XAF & XPO)
  • 产品:eXpressApp Framework
何时使用DevExtreme小部件?

DevExtreme小部件主要针对ASP.NET、SPA或ASP.NET MVC应用程序,尽管使用eXpress App Framework创建的应用程序有些不同,但有些用户可能希望在特定情况下使用这些小部件,这里有一些例子:

  • 如果ASP.NET控件的功能和Client Side Events不足以实现所需级别的交互性,则可以使用сustom UserControl和DevExtreme小部件来构建视图。
  • 当您想要显示从第三方Web服务检索到的数据时,客户端小部件可以帮助您避免在服务器端处理此数据。 可以使用AJAX技术直接从Web浏览器中调用Web服务,DevExtreme小部件可以更好地支持这种情况。

出于其他原因,您可能希望使用DevExtreme小部件,并且本文介绍如何将它们嵌入XAF视图中。

如何引用所需的客户端库?

尽管XAF应用程序会自动注册DevExtreme脚本(XAF Web UI使用某些DevExtreme小部件,XAF模块使用其他小部件),但我们建议您手动注册DevExtreme脚本,以避免在将项目升级到较新版本的DevExpress组件时出现兼容性问题。 为此,请通过在Web.config文件的DevExpress部分中添加以下代码来禁用客户端库的自动嵌入。

16.2+:

XML

<devExpress> 
<resources> 
</resources> 
</devExpress>

16.1或更高版本:

XML

<devExpress> 
<settings embedRequiredClientLibraries="false" />

从相应的网站下载必要的JavaScript文件并将其添加到您的Web项目中(您可以使用NuGet软件包管理器来实现此目的),将对JavaScript文件的引用添加到Default.aspx文件的HEAD部分中。

ASPx

<link rel="stylesheet" type="text/css" href="Content/dx.common.css" /> 
<link rel="stylesheet" type="text/css" href="Content/dx.light.css" /> 
<script type="text/javascript" src="Scripts/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="Scripts/jquery.validate.min.js"></script> 
<script type="text/javascript" src="Scripts/jquery.validate.unobtrusive.min.js"></script> 
<script type="text/javascript" src="Scripts/jquery.unobtrusive-ajax.min.js"></script> 
<script type="text/javascript" src="Scripts/globalize/globalize.js"></script> 
<script type="text/javascript" src="Scripts/dx.webappjs.js"></script> 
<script type="text/javascript" src="Scripts/dx.chartjs.js"></script>

Embedding Third-Party Libraries中提供了常规ASP.NET组件所需的客户端库列表,DevExtreme小部件所需的库在DevExtreme的在线文档中进行了描述:DevExtreme Dependencies

CSS:

如果要使用DevExtreme UI Widgets,还必须包括与您要使用的主题相对应的CSS文件。 在大多数情况下,引用dx.common.css和dx.dark.css(或dx.light.css)文件就足够了。 如果使用NuGet Package Manager.装DevExtreme软件包,这些文件将添加到您的项目中。 您也可以通过npm packagesCDN services.进行注册。否则,请从DevExtreme Web Site下载ZIP存档,然后在以下目录中找到CSS文件:lib \ css。 将相应的文件添加到您的Web项目,并在Default.aspx文件的HEAD部分中引用它们。

ASPx

<link rel="stylesheet" type="text/css" href="css/dx.common.css" /> 
<link rel="stylesheet" type="text/css" href="css/dx.dark.css" />

如果只想使用数据Data Visualization Widgets,则不需要CSS文件。

将DevExtreme小部件添加到自定义UserControl

ASPxPanel 控件添加到UserControl,该面板将用作DevExtreme小部件的容器。 如果使用的是dxChartControl组件,请将ASPxPanel.Height属性设置为绝对值,因为该组件旨在继承其父容器的高度。 处理客户端的Init 事件并运行一个JavaScript函数,该函数将DevExtreme小部件添加到ASPxPanel。

ASPx

<%@ Register Assembly="DevExpress.Web.v15.2, Version=15.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<dx:ASPxPanel ID="ASPxPanel1" runat="server" Height="500px"> 
<ClientSideEvents Init="function(s, e) { DxSample.OrdersChart.createWidgets(s); }" /> 
</dx:ASPxPanel>

要获取由ASPxPanel创建的div元素,可以使用 ASPxClientPanel.GetMainElement 方法,如下所示。

JavaScript

window.DxSample = window.DxSample || {}; 
window.DxSample.OrdersChart = { 
createWidgets: function (panel) { 
var $mainElement = $(panel.GetMainElement()); 
$mainElement.dxChart({..}); 
} 
};

注意:若要创建窗口小部件,建议使用ASPxPanel组件的客户端Init事件而不是文档的ready事件。 因为如果在回调期间重新加载视图项的内容,则ready事件不会触发。

最好不要直接在UserControl的标记中编写此代码,因为这种方法会阻止您创建同一UserControl的多个实例。 而是将JavaScript代码放入单独的文件中,并将对该文件的引用添加到网页中。 为此,请使用WebWindow.RegisterClientScriptInclude 法。

C#

protected override void OnLoad(EventArgs e) { 
base.OnLoad(e); 
string url = this.ResolveClientUrl("~/Scripts/Controls/orders-chart.js"); 
WebWindow.CurrentRequestWindow.RegisterClientScriptInclude("orders-chart", url); 
}

Visual Basic

Protected Overrides Sub OnLoad(ByVal e As EventArgs) 
MyBase.OnLoad(e) 
Dim url As String = Me.ResolveClientUrl("~/Scripts/Controls/orders-chart.js") 
WebWindow.CurrentRequestWindow.RegisterClientScriptInclude("orders-chart", url) 
End Sub

提供从数据库加载的数据

如果使用DevExtreme小部件来可视化从第三方服务获得的数据,则可以使用DevExtreme文档:数据层中描述的所有数据绑定方法。 但是,有时有必要直接从数据库获取数据, 在这种情况下,您可以使用这篇文章中描述的方法:How to: Access Server Data on the Client Side

在后面的代码中,将IComplexControl接口实现添加到UserControl类。 显示包含UserControl的视图时,将自动调用此接口的Setup方法。 在此方法中,您可以从数据库加载数据,将其转换为简单对象的数组,然后将结果分配给自定义JS属性,该属性将在客户端作为JavaScript数组提供。

JavaScript

createWidgets: function (panel) { 
var $mainElement = $(panel.GetMainElement()); 
$mainElement.dxChart({ 
dataSource: panel.cpChartData, 
// .. 
}); 
}


DevExpress技术交流群2:775869749      欢迎一起进群讨论

富文本控件难上手?这堂公开课你一定不能错过,不同视图不同应用场景全解!

慧都2020年终大促


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
DevExtreme Complete Subscription

高性能HTML5/JavaScript开发框架,利用现代Web开发堆栈构建优异性能的应用程序。

DevExpress Universal Subscription

行业领先的界面控件开发包,帮助企业构建卓越应用!

DevExpress DXperience Subscription

高性价比的企业级.NET用户界面套包,助力企业创建卓越应用!