Building a Simple app with Wisej.NET Hybrid

This article shows how a simple offline ERP application can be built with Wisej.NET Hybrid.

Wisej.NET Hybrid is a product from Ice Tea Group that allows developers to build both offline (local) and online (remote) Wisej.NET applications for Android, iOS, Windows, and MacCatalyst. These applications can be designed using the WYSIWYG designer in Visual Studio.

Creating the Project

To get started, we'll create a new project in Visual Studio using the Wisej.NET Hybrid Client Application template.

Wisej.NET 3 Hybrid Client Application Template

The Wisej.NET Hybrid Client Application is the client application that allows developers to build and deploy applications to Android and iOS targets. The project is similar to the default .NET MAUI app template but specifically configured for use in Wisej.NET projects.

For this demo, we'll call this new project "ERP.App":

Configuration of ERP.App

After creating the Client application, we should have a view like this that shows the configuration of the Hybrid application in Startup.cs:

View after creration of ERP.App

Next, we'll go ahead and add a new project to the existing solution:

Selecting the Wisej.NET 3 Hybrid Offline Application template

This time we are going to add a Wisej.NET Hybrid Offline Application. This template is used to create Wisej.NET applications that do not require a connection to an external web server. Alternatively, developers can use the Wisej.NET 3 Hybrid Web Page Application template to create "online" applications that do require a web server.

Online or "connected" applications are easier to push updates to since it's done on the web server. Offline or "disconnected" applications require a push to the corresponding app store to update users.

Since we are creating a disconnected application for this example, we will name it "ERP.Offline":

Naming the offline application ERP.Offline

Configuring the Solution

Referencing Projects

After creating the ERP.Offline project, let's connect it to the ERP.App project. Right-click ERP.App and select Add -> Project Reference. Select the ERP.Offline project:

Adding the ERP.Offline project reference

Next we can connect it to launch when we start up the ERP.App project by uncommenting the .UseWisejOffline<> line and referencing the offline project:

Creating a Window (Form)

After creating the project, we'll see the Program class that defines the entrypoint for the offline application:

Wisej.NET Hybrid Program entry point

Pages are great when creating applications that need to run on both desktop and mobile, but for this demo we are only going to target mobile (Android and iOS) so a Form might be more intuitive.

In this case, we're going to delete the Page1 view and replace it with a new Login Form (Window):

Creating a new Window

To add a new Window, right-click the ERP.Offline project and select Add -> New Item -> Wisej.NET 3

Setting the Default Theme

To set the default theme of the project, go to the Offline.json file and set the theme property:

For this demo we are going to use a Bootstrap Dark theme: "BootstrapDark-4".

Building the Login View

After creating the new item we have our "blank" window template in the Visual Studio designer:

New Window in Visual Studio Designer

On the left-hand side of the Visual Studio window you will see the Toolbox which contains a number of components available for use in the designer like buttons, textboxes, grid, etc.

I'm going to drag-and-drop the controls from the Toolbox onto the designer to create a simple login form:

Login Screen Controls

I added a FlexLayoutPanel to the view and docked it to fill. The FlexLayoutPanel control can automatically layout child controls with a vertical or horizontal orientation.

Next, we can go ahead and double-click the "Sign In" button create a C# event handler in the code-behind file.

In this demo we will not integrate the "Create Account" button.

Code-Behind file for the Login Window

At this point, we should go ahead and connect our data source, like a SQLite database, to validate against. In this demo we're going to skip this part to continue on to other topics.

Connecting the Login View to Application Startup

To connect the Login view to display when the application starts up for the first time, update the Program.Main method:

Creating the Portal

The next step of this sample application is to create a portal that shows a list of areas we can interact with such as users and documents.

We'll go ahead and add another new Empty Window to the project to visualize this.

Creating a simple portal view

For the portal, I added two controls from the Toolbox: a Label and a FlowLayoutPanel. The Label is for the title and the FlowLayoutPanel is to display our actions for this user.

Going back to the Sign-In button let's connect the two views now:

Connecting Two Views

Next, let's create a control for each action item now using a Wisej.NET UserControl. Right-click the project, select Add -> New Item -> Wisej.NET 3 -> UserControl.

After designing the view, I should have something like the following:

The view includes two controls: a Label for the title and a PictureBox for an icon.

I also modified the CssStyle property of the UserControl to show a nice shadow:

border-radius: 8px;
box-shadow: rgba(0,0,0,0.31) 5px 5px 10px 0px;

We can create a new constructor in the code-behind file that allows us to intialize the label and picturebox properties of the control based on the actions we create later:

To wrap up the first part of this article, let's add some actions to the portal so we can see how the layout will work:

PortalWindow Loading Sample Actions

Now let's go ahead and run the application with an Android Emulator:

Running the application in an Android Emulator

The startup page looks pretty good - except that the status bar is white with gray text. Let's go ahead and fix that in OfflineProgram:

The Device singleton is the gateway into interacting with native device functionalities such as the status bar, native tab bars, biometric authentication, and more.

In this case we're setting the color of the status bar according to our theme.

After running the application again, the login view should look like this:

and if we click "Sign In" we should see some sample actions:

In the next part of this blog, we'll go into more detail on adding and configuring actions within the ERP application.