# 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.

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

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:

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. {% hint style="info" %} 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. {% endhint %} 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:

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

{% hint style="info" %} To add a new Window, right-click the **ERP.Offline** project and select **Add -> New Item -> Wisej.NET 3** {% endhint %} ### Setting the Default Theme To set the default theme of the project, go to the **Offline.json** file and set the theme property:

{% hint style="info" %} For this demo we are going to use a Bootstrap Dark theme: "BootstrapDark-4". {% endhint %} ## 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. {% hint style="info" %} In this demo we will not integrate the "Create Account" button. {% endhint %}

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: ```css 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:

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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://www.learnwisej.net/wisej.net-for-business-applications/building-a-simple-app-with-wisej.net-hybrid.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.