Building a Simple app 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.

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":

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

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

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.

Since we are creating a disconnected application for this example, we will name it "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:

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:

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):

Setting the Default Theme

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

Building the Login View

After creating the new item we have our "blank" window template in the 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:

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.

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.

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:

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:

Now let's go ahead and run the application with 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.