My First Wisej Mobile Project
This document is here to provide you with the basic steps required to create a Wisej Mobile project. Feel free to skip around as desired.

Setup

  1. 1.
    Install the latest version of Wisej from http://www.wisej.com/builds.
  2. 2.
    Install the latest Wisej app on your phone from TestFlight or Google Play.
  3. 3.
    Download and extract the Wisej Mobile Integration GitHub package.

Creating a Wisej Project

  1. 1.
    Open Visual Studio in Administrator mode.
  2. 2.
    Choose Wisej Web Page Application.
  3. 3.
    Choose a name for the project and set the location.
  4. 4.
    Click Create.
  5. 5.
You should end up with a screen that looks like this:
Empty Wisej Project

Adding a Viewport

Adding a viewport helps scale the application’s content to fit the device’s screen.
  1. 1.
    Open Default.html
  2. 2.
    Add the following line (or a similar one) to the end of the <head> tag.
HTML
1
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Copied!
You can find more viewport configuration options here.

Adding Client Profiles

Client profiles allow you to design specific behavior for devices with different dimensions.
  1. 1.
    Right-click your project in the Solution Explorer.
  2. 2.
    Add -> New Item.
  3. 3.
    Select Wisej 2.
  4. 4.
    Select Client Profiles.
When you open the file, it should look like this:
Default ClientProfiles.json

Working with Client Profiles

  1. 1.
    Navigate to the designer of your page and locate the Wisej toolbar below the HTML renderer.
  2. 2.
    Choose a profile to work with (or default).
    1. 1.
      Look in the Properties window and you’ll see some attributes have an icon beside them. These properties are Responsive Properties <insert responsive property link>.
Wisej Toolbar with the Default Profile selected.

Detecting Changes in Responsive Profile

  1. 1.
    Click the Page in the designer.
  2. 2.
    Click the Lightning Bolt, or Events tab, in the Properties window.
  3. 3.
    Double Click ResponsiveProfileChanged to add a handler.
Wisej designer window with ResponsiveProfileChanged selected.
  1. 1.
    You can determine which profile is currently being used with ResponsiveProfileChangedEventArgs
Handler for ResponsiveProfileChanged

Adjusting the Page’s Dimensions

  1. 1.
    You can resize the Page to appear more mobile-friendly by dragging the Solution Explorer window to the left.

Using a FlowLayoutPanel to Arrange Controls

The FlowLayoutPanel control is a container control that provides dynamically layout for the child controls that can be arranged horizontally or vertically.
  1. 1.
    Open the Page’s designer.
  2. 2.
    Drag-and-drop a FlowLayoutPanel from the Toolbox onto the page.
  3. 3.
    Add some controls to the page.
  4. 4.
    Play around with the FillWeight and FlowBreak properties to get your desired layout.
These are responsive properties so you can change the values for each profile.
5. You can also adjust the controls “Margin” property to get the correct inset.
Here is my Page:

Determining if a Device Connects to Wisej

You may want to determine what kind of device is connecting to your Wisej application. You can determine if it’s a device using the mobile integration package with the following:
  1. 1.
    Open Program.cs
  2. 2.
    Add the following code to static void Main():
C#
1
if (Device.Valid) {
2
// Enable native features, the device is using the mobile package.
3
AlertBox.Show(“Connected with the mobile package.);
4
} else {
5
// The user is not connecting through a mobile package.
6
AlertBox.Show(“Connected without mobile package.);
7
}
8
Application.MainPage = new Page1();
Copied!
If you try to use Device.SomeCommand() on a device that doesn’t use the mobile package, an exception will be thrown.

Adding Native Controls (TabBar, Toolbar, Statusbar)

Next, we’re going to add some native controls to our application.
  1. 1.
    Add a handler for the Load event of our page.
  2. 2.
    Add the following code:
C#
1
if (!Device.Valid)
2
return;
3
4
// Native TabBar Configuration
5
Device.TabBar.Buttons = new[]
6
{
7
new DeviceTabBar.Button() {
8
Text = "Home",
9
Icon = System.Drawing.Image.FromFile(Application.MapPath("Images/home.png")),
10
},
11
new DeviceTabBar.Button() {
12
Text = "Profile",
13
Icon = System.Drawing.Image.FromFile(Application.MapPath("Images/profile.png")),
14
},
15
new DeviceTabBar.Button() {
16
Text = "Settings",
17
Icon = System.Drawing.Image.FromFile(Application.MapPath("Images/settings.png")),
18
}
19
};
20
Device.TabBar.Color = System.Drawing.Color.White;
21
Device.TabBar.BackColor = System.Drawing.Color.FromArgb(1, 51, 122, 183);
22
Device.TabBar.Visible = true;
23
24
// Native Toolbar Configuration
25
Device.Toolbar.Buttons = new[]
26
{
27
new DeviceToolbar.Button()
28
{
29
Text = "My First Wisej Mobile App",
30
Type = DeviceToolbar.ButtonType.Default
31
},
32
new DeviceToolbar.Button()
33
{
34
Type = DeviceToolbar.ButtonType.FlexibleSpace
35
},
36
new DeviceToolbar.Button()
37
{
38
Type = DeviceToolbar.ButtonType.Search
39
}
40
};
41
Device.Toolbar.Color = System.Drawing.Color.White;
42
Device.Toolbar.BackColor = System.Drawing.Color.FromArgb(1, 51, 122, 183);
43
Device.Toolbar.Visible = true;
44
// Statusbar Configuration
45
Device.Statusbar.BackColor = System.Drawing.Color.FromArgb(1, 51, 122, 183);
Copied!
You’ll need to update the icon images with your own image files (png/jpg/svg).

Adding Authentication to Your Application

Let’s add a button that asks the user to authenticate their identity using the native device's authentication system.
  1. 1.
    Add a Click handler to a button on your page.
  2. 2.
    Add the following code to the handler:
C#
1
if (Device.Authenticate("Are you a robot?"))
2
{
3
AlertBox.Show("User is valid!");
4
}
5
else
6
{
7
MessageBox.Show("User doesn't have access to the device!");
8
}
Copied!

Testing the App

  1. 1.
    Right-click your project in the Solution Explorer.
  2. 2.
    Click Properties.
  3. 3.
    Click Web.
  4. 4.
    Under Servers change IIS Express to Local IIS.
  5. 5.
    Click Create Virtual Directory.
  6. 6.
    Open the Command Prompt.
  7. 7.
    Run ipconfig.
  8. 8.
    Run your project
    • Note: Add your Wisej server license key in web.config to remove the license warning.
  9. 9.
    From the Wisej app on your phone, navigate to the IPv4 Address from ipconfig with the virtual directory path appended to it.
You should get something like this:
Last modified 1mo ago