DXHtmlMessenger is a Windows Forms demo that emulates a messenger app. It shows how to use DevExpress WinForms controls to build a desktop UI from HTML and CSS.
Model
Data Layer
- IMessageServer.cs (IMessageServer.vb)
- ChannelEvent.cs (ChannelEvent.vb)
- ContactEvents.cs (ContactEvents.vb)
- MessageEvents.cs (MessageEvents.vb)
- ChannelCommands.cs (ChannelCommands.vb)
- ContactCommands.cs (ContactCommands.vb)
- MessageCommands.cs (MessageCommands.vb)
User Interface
- Messenger.cs & MessengerViewModel.cs (Messenger.vb & MessengerViewModel.vb)
- ContactsView.cs & ContactsViewModel.cs (ContactsView.vb & ContactsViewModel.vb)
- MessagesView.cs & MessagesViewModel.cs (MessagesView.vb & MessagesViewModel.vb)
DXHtmlMessenger is built based on the DevExpress controls that render a UI from HTML and CSS. The image below demonstrates the main form.
The form's GUI is set up using the following DevExpress controls:
- HtmlContentControl — Renders a UI from an HTML-CSS template. Can show data from a bound data context (a business object or data source item). The HTML code can contain the
inputtag, which defines a placeholder for any external control (for instance, a text box). - Data Grid's TileView — Allows you to render its tiles from a specific template in HTML format, and apply CSS styles to tile elements.
- Data Grid's ItemsView — Presents records from a data source as an item list. Each list item is rendered using an HTML-CSS template.
The app demonstrates the HtmlContentPopup component used to show specific information in popup windows (information about users and popup menus). This component also renders a UI from an HTML-CSS template. It can also show data from a bound data context (a business object or data source item).
You can find the HTML code and CSS styles from which controls render UIs in the project's Assets/HTML and Assets/CSS folders.
HTML-based UI rendering supports DirectX hardware acceleration. See the following topic to learn how to enable the DirectX engine: DirectX Hardware Acceleration.
See the following page for more information on how the application's UI is built: Application UI Design
The app uses the MVVM pattern to separate the code into layers — Data Layer, Model, and View (UI). This separation grants you multiple benefits, such as a more independent development process for both developers and designers, easier code testing, and simpler UI redesigns. The data layer uses a set of interfaces to interact with the Model and UI layers.
The example shows how to supply data to Views, handle user actions, and interact with the server (send and listen to commands). The current implementation of the data layer is in-memory storage that gets data from the sample DevAV database. To communicate with any messenger app, you can replace the current implementation of the data layer with your own implementation. Modification of other layers is required if you want to extend text messaging with advanced features, like image and video support, calls, group chats, etc.
See the following page for more information: Work with data