Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
The StockViewer example is a simple and yet powerful web application that shows features that are quite difficult to implement in a traditional HTML/CSS based system implemented in Wisej using familiar and intuitive structures.
The StockViewer application simulates a central service (StockManager) that collects information about a list of stocks at regular intervals by connecting (also simulated) to an external data provider (MarketService). When the values are retrieved it broadcasts an event. If an error occurs it also broadcasts an event.
Multiple listeners, corresponding to multiple clients or sessions, can subscribe to the events fired by the StockManager and update the view accordingly. Updates are immediate and unattended, pushed by the server, without requiring a browser refresh or timer.
Users can enable or disable receiving updates for a specific stock symbol.
The StockManager service may randomly throw an exception to simulate an error when connecting to the third party service. Depending on when the exception is simulated, the StockViewer may ask the user whether he wishes to continue receiving the update or just terminate.
Simple and yet really difficult to implement using HTML/CSS systems, especially because of these features:
Unattended push updates
Broadcast server-side events
Modal user interaction while loading
Dynamic interactive view
Localization using the designer and ResX Manager
Animations on multiple controls.
The application is localized in German, Italian, French and Spanish. All labels have been translated automatically using Azure Cognitive Services trough the excellent ResXManager Visual Studio extension.
Localized resources can be edited and inspected at design time simply by selecting the language in the Language property.
Wisej automatically detects the browser's language and loads the appropriate resources when the view is created. An application can force a specific language before creating a view simply by calling:
In alternative, you can load a particular language by adding "?lang=de-DE" to the URL.
Collection of samples illustrating common and less common Wisej concepts.
Wisej is a vast framework encompassing all aspects of Enterprise Web Application programming. In this Examples book we explain some of the concepts that are supported by the Wisej Framework with the aid of specific sample projects that have been designed to show how to use and take advantage of the extensive features in Wisej.
In the Examples section you'll find a detailed explanation of each example application, together with a link to download the source code. Some tutorials may also have a link to a live demo.
The code is available as an independent zip attachment for each sample for convenience, and as a link to the GitHub repository that is kept up to date.
The application contains one simple main page and one user panel.
The MainView is a simple page with an image (PictureBox) anchored only at the top to stay centered, two labels, also anchored only at the Top, and a StockPanel anchored at the top and at the bottom in order to resize vertically to fill the page.
The StockPanel view contains a DataRepeater control. it repeats the template panel and all its children vertically (or horizontally) to display all the records in the data source.
Each child control can be bound to a field in the data source.
Once the control is designed, all the child controls in the template are wired to the data source, the system takes care of the rest. It's enough to run a loop like the one below to update all the items in the panel:
Notice that the label next to the "Last Update" label says no data. We can use the Advanced Binding configuration to configure the binding of the last update label to display "no data" when the incoming value is null.
The application is organized around a straightforward Model View Controller structure.
MarketService.cs is a static class that simulates a service to retrieve a list of stock symbols and to retrieve their latest value. It exposes two static methods:
Entry[] GetStockSymbols()
Quote[] GetQuotes()
Each method blocks the thread to simulate a long running operation and randomly throws an exception.
StockManager.cs is the controller. It is also a static class shared by all sessions. It starts a single task when it's loaded and periodically uses MarketService to retrieve stock values. It is also in charge of updating the model when a stock quote changes.
It exposes two static methods:
BindingList<Stock> GetWatchableStocks()
bool UpdateQuote(Stock stock)
And two static events:
Update
Error
StockPanel.cs is the view. An instance of the StockPanel user control is created and anchored inside the MainPage. The code in StockPanel contains a DataRepeater panel template that is bound to the model.
StockPanel subscribes to the Update and Error events broadcasted by the StockManager class and when it receives an Update notification it asks the controller to update the model. Any update to the model is automatically reflected in the UI through the data binding infrastructure.
When the StockPanel detects that a stock value has changed, it fired a StockValueChanged event. The only listener to this event is the MainView.
MainView.cs is the main page of the application. It contains a header and an instance of the StockPanel anchored to the top and bottom edge. It listens to the StockValueChanged event to play a sound and update the LastUpdate label.
When you run the application you will notice two animations:
Blinking of the stock value that has been updated
Smooth motion when changing the layout
In this case, the blink animation has been applied to the DataRepeater template panel without an event. Therefore the animation will run only if invoked by code.
Since the Animation extender exposes a complex property with child fields it is not replicated by the DataRepeater. With a simple handler for the ItemCloned event we can add the blink animation to the repeated items:
When the text of the value label is changed by the data binding layer, we handle the TextChanged property and run the animation.
A second way to add simple animations is to use the Stylesheet extender to add a transition style to the elements.
For the MainView, we simply added a general transition to all div elements:
When Wisej moves the controls into their new position because the responsive property for a client profile kicks in, the element will move to the target location in 250 milliseconds.
There are several aspects of the StockViewer tutorial application that are quite interesting to review:
Background Updates
Broadcasting Messages
Modal User Interaction
DataBinding UI updates
In this application we have a static controller class StockManager that runs in the background in a single dedicated thread and uses the MarketService provider to query stock values.
The class is static (the code cannot create any instance of this class) and its functionality is shared by all users. Since the class is static we cannot use the constructor to start our background task, but we can use the static constructor, invoked the first time a user code references this class, to start our single shared task:
StockPanel listens to the Update event and updates the browser through a push update when any value changes.
The magic is done by the Application.Update(this, ...) call. When the code block is done, the system will push any update to the browser in real time.
The method Listener() runs on its own thread. It's quite a simple method, in fact it's just a loop that periodically retrieves the stock quotes from the MarketService provider and broadcasts the Update and Error events.
We say broadcast instead of fire the events because they are static and since all events in .NET are multicast delegates (multiple listeners can attach to the same event). In our case, all users listen to the same single event fired by the StockManager class.
The MarketService simulator may throw an exception when the StockManager controller asks for the stock symbols to watch:
Since StockPanel uses StockManager.GetWatchableStocks() when it's displayed by handling the Appear event, if we are unable to get the list of stock symbols to watch we only have two options: try again or quit.
The cool and difficult part is the fact that this is a server-side process because the code has to run on the server to use a service that is not public and is not available to the whole world through a simple ajax call.
While running on the server, the code is able to ask the user on the client whether to continue or not and keep going within the same loop on the server! The result is a total server/client seamless integration that can be achieved with 1 line of code.
We have seen that the StockViewer application needs to dynamically add panels to the DataRepeater to display the watchable stock symbols and to update the name, value and last update date for each stock being watched.
It's all done without any code. All the StockPanel does is to ask the StockManager to update the model:
The data binding system handles the PropertyChanged event and updates all the bound properties causing the UI to get immediately refreshed.
However, there is a trick in the MainView: Responsive Properties! The view is arranged differently when running in a Phone or in a Phone in Landscape mode.
In the code snippet above you'll notice the check on the m.Watching property. That property is bound to the switch control in the Data Repeater. When the user switches it on or off, it automatically updates the Watching property in the data model.
The Stock class is a bindable model class (implements ) containing all the information used by the view (StockPanel) to render the UI.
Wisej can add animations (even multiple animations) to any control or container simply by dropping one or more instances of the Animation extender to a container. All the child controls will show a new Animation property in the designer.
The method StockManager.UpdateQuote() doesn't know anything about the view. It simply sets the new value to the stock model Value property. If the value is different, the Stock model fires the event.
Sample application used for the CodeProject product review. Shows some of the many cool Wisej features. The sample uses SQLite x64, read the included Readme.txt to enable IIS Express x64 in Visual Studio.
This samples shows how to add a custom renderer / editor to a DataGridView cell.
This example shows how to use the several image properties with the Wisej.Web.Button control. The same concepts work with all controls with the same image properties.
Shows how to use the ChartJs Wisej extension. This example application uses multiple charts, real time updates of the data sets, and the responsive FillWeight property managed by the FlowLayoutPanel.
Uses 3rd party JavaScript library ChartJS
Example application to demonstrate DataBinding for TextBoxes, ComboBoxes and DataGridViews in Wisej.
Shows one of the many unique features of Wisej: Custom Painting. You can draw using basic GDI on the surface of any widget. This is one of the most powerful functionality in Wisej, along with Custom Drawing, Real Time Updates, and Background Tasks.
A common issue for all Single Page Application (SPA) frameworks is the lack of URLs that can define a specific state: i.e. http://localhost/myapp?customer_id=34. Wisej includes full support for deep linking using the hash value in the URL, both on the client and the server side (i.e. http://localhost#id=34).
Example of using 3 Wisej extensions for formatted text editors: , and . Use it to explore the different features of all 3 edit controls. When Live Sync is checked, changes you apply in CKEditor1 control are directly reflected in real time in the 3 lower edit controls.
Uses 3rd party JavaScript library:
If you´re looking for a code editor, please check our .
Read more in our .
Modal workflow is impossible with any other web development framework on the market. It’s usually emulated using a combination of client side callbacks and ajax requests. Wisej supports full modal workflow and nested modal at any (configurable) level. The resulting code is much simpler, consistent and manageable.
The ProgressCircle component is entirely implemented on the server side as a derived class of Wisej.Web.Canvas. It draws on a HTML5 canvas element on the client directly from the server in real time. The component lets you set value, line style and thickness, fill color, font, etc.
Source Code: https://github.com/iceteagroup/wisej-extensions/tree/main/Wisej.Web.Ext.ProgressCircle
Shows how to use the Pannellum Wisej extension. The example application covers most common uses of this panorama viewer for the web.
Uses 3rd party JavaScript library Pannellum
Basic skeleton for a fully responsive app developed with Wisej. Take a close look at the ResponsiveProfileChanged event implemented for the login form and the OptionsPanel. Make sure to activate the developer tools in your browser and emulate different device profiles.
Example application to demonstrate some of the features available to the RibbonBar Wisej extension.
The Localization example shows how to take advantage of Visual Studio’s localization capabilities in a Wisej application. You can localize directly in the designer and/or use localized resources in the code.
Very simple chat server and client. Demonstrates how to fire and handle shared events and update multiple clients at once. Can be used as a base for broadcast notifications or a simple chat feature to add to any application.
Example application that shows the usage of the TagInput control in Wisej.
Demonstrates the usage of the NavigationBar and SideButton extensions and the FlexLayoutPanel control.
The Tree Grid example shows how to create a hierarchical DataGridView. Wisej extends the WinForms DGV control so any row can have child rows, and rows with children may be expanded or collapsed to show or hide the children. This sample shows how to use this Wisej feature with DataTables and generic List of objects,
This example shows how easy it is with Wisej to upload a single or multiple files to the server. You can use a fully themeable upload widget or drag and drop the files from the desktop to any Wisej control. Wisej can also receive pre notifications from the client and inspect the names of the files being dropped.
The feature is one of the most advanced integrations for such functionality around. Perfect for enterprise-scale line of business applications. Here are some of the use cases that we had in mind when designing this extension:
Visual release notes (explain changes in the user interface interactively)
Tutorials and step-by-step guides to replace or extend documentation and help files
Interactive software documentation – F1 button explains the concepts directly inside the current screen
Software demonstrations to improve your sales cycle – instead of relying on personal presentations and webinars only, you can show core features interactively, giving your customers a hands-on guided walkthrough upfront for your web application
Everyone dislikes manuals and written documentation. Wisej allows you to extend your applications with cool interactivity, fully integrated and very easy to use.
Read more in our .
The KendoUI TaskBoard component allows you to easily organize items and keep track of their state and status. The TaskBoard provides a clean and user-friendly interface for managing tasks, notes, projects, people, or other kinds of items.
Key Features
Columns
Cards
Data Binding
Editing
Resources
Templates
Search
Validation
Accessibility
The kendoTaskBoard control can be added to a Form or Page from the Visual Studio Toolbox. It should look like this when dropped onto the designer.
To show data in the kendoTaskBoard control at design-time, the data must be provided in the Options property in the designer. Assigning it in the Load event will not render at design-time.
Runtime
The resulting kendoTaskBoard control will look something like this:
The PDF Viewer component enables you to view and print the PDF files.
This sample demonstrate the following key features of PDF Viewer:
View the PDF document
Core interactions - Scrolling, Zooming, panning and page navigation
Built-in toolbar
Select and copy text from PDF file
Search a text easily across the PDF document
Easy navigation with the help of Bookmarks, thumbnails, hyperlinks and table of contents
View modes - fit to page and fit to width
Print the entire document or a specific page directly from the browser.
More information on the PDF Viewer instantiation can be found in this documentation section.
You can download the source code for this project here.
The EJ2 PdfViewer control can be added to a Form or Page from the Visual Studio Toolbox. It should look like this when dropped onto the designer.
The design-time appearance of the EJ2 PdfViewer control will not show a PDF document. The logic for this should be implemented in your code (see below).
The resulting EJ2 PdfViewer control will look something like this:
The File Manager component is used to explore a file system through a web application, similar to the windows explorer for windows.
The Kendo UI Captcha widget is a security measure that prevents automated spam from performing tasks such as form submissions in your application. The widget generates distorted images of letters and numbers that are easily decipherable to humans, but not to automated programs (spam bots).
The kendoCaptcha control can be added to a Form or Page from the Visual Studio Toolbox. It should look like this when dropped onto the designer.
The design-time appearance of the kendoCaptcha control will not feature a random captcha phrase. The logic for this must be implemented in your code (see below).
Configuring the kendoCaptcha control requires handling several different requests from the client. This includes generation, image processing, and validation.
The resulting kendoCaptcha control will look something like this:
The JavaScript Document Editor component is used to create, edit, view, and print Word documents in web applications.
This sample demonstrate the following key features of PDF Viewer:
Create and edit: Opens and saves documents in native "Syncfusion Document Text (*.sfdt)" file format without any server-side dependencies. This helps build a purely client-side Word editor application.
Supported elements: Document elements like text, images, hyperlinks, tables, bookmarks, page numbers, tables of contents, headers, and footers.
Formatting: Text levels, paragraph levels, bullets and numbering, table levels, page settings, and styles.
Editing operations: Undo, redo, cut, copy, and paste.
Find and replace text within the document.
Interactions through touch, mouse, and keyboard.
More information about the document editor features can be found in this
You can download the source code for this project here.
