Client Profiles

Wisej.NET has a unique and powerful responsive system that extends beyond CSS and media selectors used in plain HTML+CSS systems. The responsive system in Wisej.NET is based on two features: Responsive Properties and ClientProfile.

Client Profiles are device-related properties associated with a name that match to the client device when the page loads or the browser resizes.

ResponsiveProperties are standard .NET properties available at design time (serializable) that use the [ResponsiveProperty] attribute. These properties can hold multiple values associated with a Client Profile.

The process is straightforward: Wisej.NET reads the client profiles in ClientProfiles.json, and from top to bottom matches the properties with current browser information. The first match becomes the Application.ActiveProfile and triggers the ResponsiveProfileChanged event.

When the ActiveProfile changes, all [ResponsiveProperties] update with their values associated to the Client Profile. For example, the Visible property of a button can be true for the "Default" Client Profile and false for the "Galaxy Tablet" profile, or the Display property of a Button or TabControl can be Both on Desktops and Icon on Phone devices.

Custom ClientProfiles.json

You can define custom client profiles by adding the ClientProfiles.json file to your project. Click Add -> New Item, select Wisej.NET 3 and select ClientProfiles:

It will add the file ClientProfiles.json containing the pre-configured profiles:

/**
 * Client Profiles
 *
 * You can add additional profiles or modify the default ones by
 * placing a ClientProfiles.json file in the /bin directory of the
 * application.
 *
 * Or add it to the root files and set it to: "EmbeddedResource", or "Content" or "Copy if newer".
 *
 * Profiles with names matching the names in the default file will
 * override the corresponding matching profile definition.
 *
 * Profile Properties:
 *
 *	name:            The name of the profile.
 *	minWidth:        The minimum width of browser in pixels.
 *	maxWidth:        The maximum width of browser in pixels.
 *	minScreenWidth:  The minimum width of the device in pixels.
 *	maxScreenWidth:  The maximum width of the device in pixels.
 *	device:          A string or regular expression to match the name of the device returned by the client browser ("Mobile", "Tablet" or "Desktop").
 *	userAgent:       A string or regular expression to match the user-agent string returned by the client browser.
 *	landscape:       A boolean flag that indicates that the profile matches devices in landscape mode.
 */
{
    "profiles": [
        {
            "name": "Phone",
            "device": "Mobile",
            "landscape": false
        },
        {
            "name": "Phone (Landscape)",
            "device": "Mobile",
            "landscape": true
        },
        {
            "name": "Tablet",
            "device": "Tablet",
            "landscape": false
        },
        {
            "name": "Tablet (Landscape)",
            "device": "Tablet",
            "landscape": true
        },
        {
            "name": "Small Desktop",
            "device": "Desktop",
            "maxWidth":  1024
        }
    ]
}

Property	Description
name	Unique name assigned to the profile (e.g., "Large Monitor", "Galaxy Tablet", "Airport Kiosk")
minWidth	When > 0, specifies minimum browser width to qualify the profile (e.g., 500px for width >= 500px)
maxWidth	When > 0, specifies maximum browser width to qualify the profile (e.g., 1500px for width <= 1500px)
minScreenWidth	When > 0, specifies minimum screen width to qualify the profile (e.g., 500px for screen width >= 500px)
maxScreenWidth	When > 0, specifies maximum screen width to qualify the profile (e.g., 1500px for screen width <= 1500px)
device	Regular expression matching browser-detected device type ("Desktop", "Mobile", or "Tablet"). Example: "(Tablet)|(Mobile)" matches either "Tablet" or "Mobile"
userAgent	Regular expression matching browser's user agent string. Used to detect specific OS versions or browsers
landscape	Boolean indicating if profile matches when browser width exceeds height

When using the Chrome mobile emulator to switch from desktop to mobile, refresh the page to update client profiles based on screen width or user agents, as these properties don't update dynamically.

ResponsiveProfileChanged

The ResponsiveProfileChanged event fires on:

• Application

• ContainerControl (Form, Page, Desktop, UserControl)

• DataGridView

• ListView

This event allows your code to adapt controls to the client profile without limitations. While responsive properties are useful and easy to use (especially at design time), handling this event in code provides complete control over adaptations.