Wisej:企业软件的简易按钮

Wisej provides a platform and set of tools designed to ease the burden of developing, testing, deploying, and maintaining complex business software. It bridges the gap between traditional WinForms-style desktop applications and the web by empowering developers to leverage their existing .NET and C# skills.

Wisej提供了一个平台和一组工具,旨在减轻开发,测试,部署和维护复杂业务软件的负担。 它使开发人员能够利用他们现有的.NET和C#技能,从而弥合了传统WinForms样式桌面应用程序和Web之间的鸿沟。

Developers are able to use the tools they are familiar with, like a pixel-perfect design surface and drag-and-drop controls with the languages they are comfortable with (C# or VB.NET) to build real-time web applications without having to learn HTML, CSS, or JavaScript. They can stay in their favorite IDE like Visual Studio to take advantage of features like IntelliSense, integrated debugging, design surfaces and source control integration. Front-end developers can leverage their knowledge of web technologies to augment applications and seamlessly integrate third-party packages like HTML5 charting libraries and ASP.NET controls.

开发人员能够使用他们熟悉的工具,例如像素完美的设计图面和拖放控件以及他们熟悉的语言(C#或VB.NET)来构建实时Web应用程序,而无需学习HTML,CSS或JavaScript。 他们可以留在自己喜欢的IDE(如Visual Studio)中,以利用IntelliSense,集成调试,设计图和源代码控制集成等功能。 前端开发人员可以利用他们对Web技术的知识来扩展应用程序,并无缝集成第三方包,例如HTML5图表库和ASP.NET控件。

To bridge the gap between legacy desktop applications and modern web applications, Wisej provides several features that create a straightforward path to migrate existing applications or build green field projects without having to learn a new set of technologies. Support for touch and gestures is built into the software with emulation to support the desktop experience, localization is a first-class citizen, and the applications Wisej produces are out-of-the-box responsive. That means they are readily accessible from desktop browsers, mobile smartphones and tablets.

为了弥合传统桌面应用程序和现代Web应用程序之间的鸿沟,Wisej提供了一些功能,这些功能创建了直接迁移现有应用程序或构建绿色项目的途径,而无需学习新的技术。 该软件内置了对触摸和手势的支持,并通过仿真来支持桌面体验,本地化是一流的公民,Wisej生成的应用程序具有开箱即用的响应能力。 这意味着可以从桌面浏览器,移动智能手机和平板电脑轻松访问它们。

获取软件 (Obtaining the Software)

To get started, visit the Wisej site:

首先,请访问Wisej网站:

https://wisej.com/

https://wisej.com/

There you can browse the various pricing options and download a trial.

您可以在那里浏览各种定价选项并下载试用版。

The sample application is available at:

可以从以下位置获得示例应用程序:

http://demo.wisej.com/codeproject

http://demo.wisej.com/codeproject

You can download the source code at:

您可以在以下位置下载源代码:

https://wisej.com/examples

https://wisej.com/examples

Download the latest build of Wisej from https://wisej.com to get started. You should be able to compile and debug the application. The application uses a 64-bit SQLite driver. There are two options to ensure that you are able to successfully debug. You can either run as Administrator and use the full IIS server locally, or you can set IIS Express to run in 64-bit mode as shown in the following dialog.

https://wisej.com下载最新版本的Wisej,以开始使用。 您应该能够编译和调试应用程序。 该应用程序使用64位SQLite驱动程序。 有两个选项可确保您能够成功调试。 您可以以管理员身份运行并在本地使用完整的IIS服务器,也可以将IIS Express设置为以64位模式运行,如下图所示。

Image 1
Figure 1: 64-bit IIS Express
图1:64位IIS Express

One advantage of Wisej is that it can generate local executables to run the same application you access from your web browser as a standalone or self-hosted application. In the folder for the project, you will find a "Wisej.Application.exe" that you can execute to test this functionality.

Wisej的一个优点是它可以生成本地可执行文件,以运行您从Web浏览器访问的相同应用程序,作为独立或自托管的应用程序。 在项目文件夹中,您将找到一个“ Wisej.Application.exe ”,可以执行该文件来测试此功能。

演示演练 (A Demo Walkthrough)

The first thing you’ll notice when you access the site is the desktop experience. The code to create the desktop experience is as simple as adding a desktop control to the application. Wisej automatically handles allowing users to drag components, scale, resizing, minimizing, etc. Tap on the grid of squares in the lower left to expand a "start menu" of options.

访问该网站时,您会注意到的第一件事就是桌面体验。 创建桌面体验的代码就像向应用程序添加桌面控件一样简单。 Wisej自动处理,允许用户拖动组件,缩放,调整大小,最小化等。点击左下角的正方形网格以展开选项的“开始菜单”。

Image 2
Figure 2: Start Menu
图2:开始菜单

实例化控件 (Instantiating Controls)

In Visual Studio, navigate to the "Popups" folder and double-click "StartPopup." This will open the designer experience for the pop-up menu. You can see the various buttons, click once to view properties and double-click on them to view the code-behind. Launching another component is simple. Double-click on the "Background Task" button in the designer. You will see the following code that simply creates an instance of the "BackgroundTask" control and then invokes it.

在Visual Studio中,导航到“ Popups”文件夹,然后双击“ StartPopup”。 这将打开弹出菜单的设计者体验。 您可以看到各种按​​钮,单击一次可查看属性,然后双击它们以查看隐藏的代码。 启动另一个组件很简单。 双击设计器中的“背景任务”按钮。 您将看到以下代码,这些代码仅创建“ BackgroundTask”控件的实例,然后调用它。

Image 3

实时更新 (Real-time Updates)

The first example we’ll review is the "Background Tasks." Traditionally, building a real-time pipeline between a web browser client and server host involves scaffolding technologies like WebSockets or SignalR and building logic on both sides to handle dataflow and exceptions. Run the Background Tasks example press "Start" to see it running:

我们将审查的第一个示例是“背景任务”。 传统上,在Web浏览器客户端和服务器主机之间建立实时管道涉及到WebSockets或SignalR等脚手架技术,并在两侧构建逻辑来处理数据流和异常。 运行“后台任务”示例,请按“开始”以查看其正在运行:

Image 4
Figure 3: Background Tasks
图3:后台任务

The same dialog is available in the design-time view through Visual Studio:

通过Visual Studio在设计时视图中可以使用相同的对话框:

Image 5
Figure 4: Background Tasks in the Designer
图4:设计器中的后台任务

Note the list of controls on the left side that are ready for drag-and-drop positioning on the canvas with the same experience that WebForms developers are used to. The controls to maximize, tile, and close the dialog are all built-in and require no additional code to work. Right-click on the control to view the code-behind.

请注意左侧的控件列表,这些控件准备好在画布上进行拖放定位,并具有与WebForms开发人员相同的体验。 最大化,平铺和关闭对话框的控件都是内置的,不需要其他代码即可工作。 右键单击该控件以查看其后的代码。

The important code is in the "button1_click" event.

重要的代码在“ button1_click ”事件中。

Image 6

The code iterates through 100 items and pauses for one half second each loop. The browser app still runs asynchronously and is not blocked by the operation. The Wisej platform provides the "StartTask" method to initiate a background task, and refreshing data real-time is as simple as calling the "Application.Update" method! All of the real-time connections between the browser and server are handled automatically, so the developer can focus on what’s important (the core code logic) and not worry about the nuances of how the client and server connect. Wisej support for real-time communications handles Websockets, HTTP, or Websockets with HTTP fallback, all selectable via a simple configuration setting.

该代码循环访问100个项目,每个循环暂停半秒。 浏览器应用程序仍然异步运行,并且不受操作限制。 该Wisej平台提供了“ StartTask ”方法来启动一个后台任务,并刷新数据的实时很简单,只要调用“ Application.Update ”的方法! 浏览器和服务器之间的所有实时连接都是自动处理的,因此开发人员可以专注于重要的事情(核心代码逻辑),而不必担心客户端和服务器如何连接的细微差别。 Wisej对实时通信的支持可通过简单的配置设置来处理Websocket,HTTP或具有HTTP后备的Websocket。

第三方整合 (Third-Party Integration)

Next, click on "Widget Integration" in the demo app. You will be presented with an editing control:

接下来,在演示应用程序中单击“窗口小部件集成”。 您将看到一个编辑控件:

Image 7
Figure 5: Widgets Integration
图5:小部件集成

The control allows you to edit a document and use advanced features like formatting, inserting links and emojis, even embedding images. The control actually uses the open source HTML project CKEditor. This example illustrates how easy it is to integrate third-party open source libraries, even when they are not .NET-based projects.

该控件使您可以编辑文档并使用高级功能,例如格式化,插入链接和表情符号,甚至嵌入图像。 该控件实际上使用开源HTML项目CKEditor 。 此示例说明了即使不是基于.NET的项目,集成第三方开源库也很容易。

大规模数据绑定 (Data-binding at Scale)

Grids are often the centerpiece of enterprise applications and building interactive grids that provide basic Create/Read/Update/Delete (CRUD) capability and advanced features like filtering, grouping, and sorting can be difficult in web-based applications. Wisej features a data-binding system for controls that is both intuitive and easy to implement. To see the results in action, choose the "Data-binding" example in the demo app. You should see a grid like this:

网格通常是企业应用程序的核心,并构建提供基本创建/读取/更新/删除(CRUD)功能的交互式网格,而在基于Web的应用程序中,诸如过滤,分组和排序等高级功能可能很难。 Wisej具有用于控件的数据绑定系统,该系统既直观又易于实现。 要查看实际结果,请在演示应用程序中选择“数据绑定”示例。 您应该看到一个像这样的网格:

Image 8
Figure 6: Data-Binding Grid
图6:数据绑定网格

The grid is full-featured. Tap on a column header to sort, and tap again to toggle the order between ascending and descending. Tap on any row to edit in the associated dialog, or double-tap on the grid to edit inline ("Excel-style"). You can insert new rows and tweak your updates until they are ready to be saved to the server. The save features a dismissible alert notification that indicates success or a modal dialog to diagnose failure.

网格功能齐全。 点击列标题进行排序,然后再次点击以在升序和降序之间切换顺序。 点击任意行以在关联的对话框中进行编辑,或者在网格上双击以进行内联编辑(“ Excel样式”)。 您可以插入新行并调整更新,直到准备好将其保存到服务器为止。 该保存具有可忽略的警报通知,指示成功或诊断失败的模式对话框。

Open the grid in Visual Studio and right-click to view the code-behind. This is an incredibly powerful feature of Wisej that many web developers likely wish they had in the past. The grid is fully implemented through C# server-side code, and Wisej automatically handles all of the binding, updates, and dataflows without the developer having to write any client JavaScript code!

在Visual Studio中打开网格,然后右键单击以查看隐藏的代码。 这是Wisej令人难以置信的强大功能,许多Web开发人员可能希望他们曾经拥有过。 网格是通过C#服务器端代码完全实现的,Wisej会自动处理所有绑定,更新和数据流,而开发人员无需编写任何客户端JavaScript代码!

Loading the initial data set is as simple as filling a standard data adapter. The demo app uses a SQLite database to store and update sample data:

加载初始数据集就像填充标准数据适配器一样简单。 该演示应用程序使用SQLite数据库来存储和更新示例数据:

Image 9

The code to save a record provides a success alert and shows a modal error dialog when an issue is encountered, again all done with straightforward C# code that automatically controls the browser experience.

保存记录的代码会发出成功警报,并在遇到问题时显示模式错误对话框,所有这些操作都通过直接控制浏览器体验的简单C#代码完成。

Image 10

It is important to note how easy it is to provide client modals with server-side code. This is often a challenge in other frameworks due to the logic necessary to handle the asynchronous dialog and ensure that the modal successfully disables other content in the app. Notice the previous code example provides a straightforward, sequential, server-side C# workflow but successfully provides an interactive modal experience in the browser.

重要的是要注意为客户端模式提供服务器端代码有多么容易。 由于处理异步对话框并确保模式成功禁用应用程序中的其他内容所需的逻辑,这在其他框架中通常是一个挑战。 注意,前面的代码示例提供了一个简单,顺序的服务器端C#工作流程,但成功地在浏览器中提供了交互式的模态体验。

In more advanced scenarios, you may have to write code to page and skip records in the database and filter based on advanced criteria. Wisej simplifies this process by allowing you to focus on one set of code. If you can make the code work on the server, Wisej will connect it to the browser and display the appropriate output for you. No more writing two sets of code, one for the server and one to handle all of the events in the browser!

在更高级的方案中,您可能必须编写代码以分页并跳过数据库中的记录,并根据高级条件进行过滤。 Wisej通过允许您专注于一组代码来简化此过程。 如果您可以使代码在服务器上工作,Wisej会将其连接到浏览器并为您显示适当的输出。 无需再编写两套代码,一套用于服务器,一套用于处理浏览器中的所有事件!

嵌入式媒体 (Embedded Media)

Click on the "Media" option from the start menu to view the media experience. The dialog box includes embedded video with position tracking and an embedded PDF document that you can view and navigate without leaving the current webpage.

从开始菜单中单击“媒体”选项,以查看媒体体验。 该对话框包括带有位置跟踪的嵌入式视频和一个嵌入式PDF文档,您可以在不离开当前网页的情况下查看和导航。

Image 11
Figure 7: Embedded Media
图7:嵌入式媒体

You can open the media control in Visual Studio and click on the individual components to see their properties. Wisej has built-in "Video" and "PDFViewer" controls that can simply be dragged onto the design surface to use and are bound to their related documents. The properties control shows how the PDFViewer control is bound to a document that is included with the project:

您可以在Visual Studio中打开媒体控件,然后单击各个组件以查看其属性。 Wisej具有内置的“视频”和“ PDFViewer”控件,只需将其拖到设计图面上即可使用并绑定到其相关文档。 属性控件显示PDFViewer控件如何绑定到项目随附的文档:

Image 12
Figure 8: PDF Viewer Properties
图8:PDF查看器属性

The PDF viewer control is flexible and offers support for pdf.js, native PDF documents, Google Docs and custom viewers.

PDF查看器控件非常灵活,并支持pdf.js,本机PDF文档,Google Docs和自定义查看器。

For the position tracking in the media element, a simple event is wired in to trigger when the time position changes and handled with the following code:

对于media元素中的位置跟踪,将插入一个简单事件,以在时间位置更改并通过以下代码处理时触发:

Image 13

The code is handled just like a desktop app and all of the updates to the browser are coordinated automatically by Wisej.

就像桌面应用程序一样处理代码,并且Wisej会自动协调浏览器的所有更新。

定制画 (Custom Painting)

The final dialog to cover in this review is "Custom Painting." Tap on the option and you’ll see a modal dialog with a fully rendered Mandelbrot set and a smiling face.

此评论中要覆盖的最后一个对话框是“自定义绘画”。 点击选项,您将看到一个模态对话框,其中包含完全渲染的Mandelbrot设置和笑脸。

Image 14
Figure 9: Custom Painting
图9:自定义绘画

Despite the number of pixels and level of detail, you can see the Mandelbrot renders exceptionally fast – just over 50ms on my machine. If you look at the code behind, the image is rendered on the server using a bitmapped object. Once it is completed, a special "DrawImageUnscaled" call is made to transfer the bitmap contents onto the browser-based canvas (again, without the developer having to learn or create any client-side code).

尽管有像素数量和细节水平,但您可以看到Mandelbrot渲染速度异常快-在我的机器上仅超过50毫秒。 如果您查看后面的代码,则会使用位图对象在服务器上渲染图像。 完成后,将进行特殊的“ DrawImageUnscaled ”调用,以将位图内容传输到基于浏览器的画布上(同样,开发人员无需学习或创建任何客户端代码)。

Image 15

The smiling face is a "canvas" control that enables you to write server-side code to render a client-side HTML5 canvas. This allows you to create complex custom web controls entirely in .NET that are fully HTML5 compliant.

笑脸是一个“画布”控件,使您可以编写服务器端代码来呈现客户端HTML5画布。 这使您可以完全在.NET中创建完全兼容HTML5的复杂的自定义Web控件。

独立可执行文件 (Standalone Executable)

In addition to supporting web-based deployments, the Wisej platform allows you to package your application as a local executable that can be run from the desktop. It supports identical functionality to the web-based project as a standalone program. This enables distribution without a web server. The executable is generated in the root directory of the project, and this is an example of running it with the canvas widget.

除了支持基于Web的部署外,Wisej平台还允许您将应用程序打包为可从桌面运行的本地可执行文件。 它作为独立程序支持与基于Web的项目相同的功能。 这样就可以在没有Web服务器的情况下进行分发。 可执行文件在项目的根目录中生成,这是使用canvas小部件运行它的示例。

Image 16
Figure 10: Standalone Executable
图10:独立的可执行文件

功能和集成 (Features and Integrations)

像素完美的所见即所得设计器 (Pixel-Perfect WYSIWIG Designer)

Everything done with Wisej revolves around the framework’s patented pixel-perfect designer. The WYSIWIG designer allows you to see exactly what the application will look like at runtime. Drag and drop controls from the toolbox onto the page and see for yourself. The designer also allows developers to create responsive profiles: pages that will fit any device.

使用Wisej进行的所有操作都围绕该框架的专利像素完美设计器展开。 WYSIWIG设计器使您可以准确查看应用程序在运行时的外观。 将控件从工具箱拖放到页面上,然后自己查看。 设计人员还允许开发人员创建响应式配置文件:适用于任何设备的页面。

主题生成器 (Theme Builder)

Wisej comes with a powerful theme builder that allows developers to modify the look and feel of any control within their application. Different themes and styles can be applied to debug applications running in production with ease. Each Wisej control also comes with a “CssStyle” attribute that applies the custom style during design-time.

Wisej带有一个功能强大的主题生成器,使开发人员可以修改其应用程序中任何控件的外观。 可以轻松地将不同的主题和样式应用于调试在生产中运行的应用程序。 每个Wisej控件还带有“ CssStyle”属性,该属性在设计时会应用自定义样式。

控制库集成 (Control Library Integrations)

In addition to the third-party widgets integrated in the sample, Wisej now features the Syncfusion, DevExpress, and Infragistics JavaScript component libraries available as drag-and-drop controls in the designer. The integration simplifies the migration process for developers concerned about losing their native desktop application’s charts, graphs, and other controls.

除了示例中集成的第三方小部件之外,Wisej现在还具有Syncfusion,DevExpress和Infragistics JavaScript组件库,它们可以在设计器中作为拖放控件使用。 集成为担心丢失其本地桌面应用程序的图表,图形和其他控件的开发人员简化了迁移过程。

本机移动集成 (Native Mobile Integration)

The Wisej Mobile Integration package for Android and iOS offers web developers the power to integrate native device functionalities into their Wisej applications. Native scrolling and a custom theme will give the user a responsive experience. Use the device’s biometric authentication capabilities, native toolbars, tabbars, and more. Handle any native device event in Wisej using a custom handler.

适用于Android和iOS的Wisej移动集成软件包为Web开发人员提供了将本机设备功能集成到其Wisej应用程序中的功能。 本机滚动和自定义主题将为用户提供响应式体验。 使用设备的生物特征认证功能,本机工具栏,标签栏等。 使用自定义处理程序处理Wisej中的任何本机设备事件。

Wisej的好处 (Benefits of Wisej)

  • Load Balancer support

    负载平衡器支持
  • Support for native mobile integrations (iOS and Android)

    支持本地移动集成(iOS和Android)
  • Support for progressive web applications (PWA)

    支持渐进式Web应用程序(PWA)
  • Robust architecture that is resistant to some of the top OWASP attacks

    强大的体系结构可抵抗某些顶级OWASP攻击

结论 (Conclusion)

For developers, the challenge of building a complex enterprise web application with features like large customizable grids and real-time data updates can be daunting. It may seem even more complex when the requirement is to migrate a legacy WinForms-style application to the web without losing the features business users have grown accustomed to, like being able to use their keyboard for data entry and editing values inside a live grid. Fortunately, Wisej is a tool that eases the burden of the challenge and provides a direct path from desktop applications to the web. As a powerful platform that abstracts away the nuances of client/server interactions while embracing all the web has to offer, including third-party HTML5-based solutions, it is the perfect tool for building enterprise web applications.

对于开发人员而言,构建具有大型可定制网格和实时数据更新等功能的复杂企业Web应用程序的挑战可能艰巨。 当要求是将遗留WinForms样式的应用程序迁移到Web而不丢失业务用户已经习惯的功能(例如能够使用其键盘输入数据并在实时网格内编辑值)时,这似乎更加复杂。 幸运的是,Wisej是一种可减轻挑战负担并提供从桌面应用程序到Web的直接路径的工具。 作为一个强大的平台,它可以抽象化客户端/服务器交互的细微差别,同时包含所有Web提供的内容,包括基于HTML5的第三方解决方案,它是构建企业Web应用程序的理想工具。

This review just scratched the surface of the capabilities Wisej provides. In addition to what was covered here, there are dozens more out of the box controls and features like comprehensive theming that can be applied while the application is running. It is possible to target both a web application and a desktop application from the same codebase. All of the functionality is available as a drag-and-drop, designer-based .NET application that leverages existing C# or VB.NET skills. Why not see for yourself how powerful the Wisej platform is? Head over to the website and start your free trial if you haven’t already to follow through this review.

这篇评论只是对Wisej提供的功能的介绍。 除了此处介绍的内容外,还有许多现成的控件和功能(例如综合主题)可在应用程序运行时应用。 可以从同一代码库中同时定位Web应用程序和桌面应用程序。 所有功能都可作为基于设计人员的拖放式.NET应用程序使用,该应用程序利用现有的C#或VB.NET技能。 为什么不亲自了解Wisej平台的功能呢? 如果您还没有关注此评论,请访问该网站并开始免费试用。

Note: This is an update version of Jeremy Likness’ original article on Wisej: https://www.codeproject.com/Articles/1208339/Wisej-The-Easy-Button-for-Enterprise-Software

注意:这是Jeremy Likness在Wisej上原始文章的更新版本: https ://www.codeproject.com/Articles/1208339/Wisej-The-Easy-Button-for-Enterprise-Software

翻译自: https://www.codeproject.com/Articles/1208339/Wisej-The-Easy-Button-for-Enterprise-Software

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值