Smooth Roaming + Responsive Design

In this post, we look at adding session reconnection event handling to our responsive design prototype using the Citrix XenApp Mobile Application SDK. Be sure to check out the video of the prototype.

In a previous article, we looked at using responsive design with enterprise applications by utilizing the Citrix XenApp Mobile Application SDK. Jonathan Chin left an interesting comment about hooking up an event handler to apply the responsive design to a reconnection event.  So, I decided to investigate doing just that and, as it turns out, it isn’t that hard.  

In the previous version, the responsive design code only kicked in on session initiation (i.e. logon) – meaning if you started a session on a fat client and then reconnected to the session on a mobile device, then the fat client display would show up on the mobile device. We don’t want that. So, by catching the reconnection event, we can re-style the app at any point (session initiation or reconnection). Start the application on a fat client and then reconnect via a mobile device and the mobile style will kick in (and vice versa).

Here’s the bit of code to take care of it (if you don’t care about the code and just want to skip to the download, just follow this link):

 

[DllImport("WtsApi32.dll")]
private static extern bool WTSRegisterSessionNotification(IntPtr hWnd, [MarshalAs(UnmanagedType.U4)]int dwFlags);

[DllImport("WtsApi32.dll")]
private static extern bool WTSUnRegisterSessionNotification(IntPtr hWnd);

private const int NOTIFY_FOR_THIS_SESSION = 0;
private const int WM_WTSSESSION_CHANGE = 0x2b1;
private const int WTS_REMOTE_CONNECT = 0x3;
private const int WTS_REMOTE_DISCONNECT = 0x4;
private bool registered = false;

protected override void OnHandleDestroyed(EventArgs e)
{
    // unregister the handle before it gets destroyed
    if(registered)
        WTSUnRegisterSessionNotification(this.Handle);

    base.OnHandleDestroyed(e);
}

protected override void OnHandleCreated(EventArgs e)
{
    base.OnHandleCreated(e);
    registered = WTSRegisterSessionNotification(Handle, NOTIFY_FOR_THIS_SESSION);
}

protected override void WndProc(ref Message m)
{
    if (m.Msg == WM_WTSSESSION_CHANGE)
    {
        if (m.WParam.ToInt32() == WTS_REMOTE_CONNECT)
        {
            // The session is in the reconnect state, so style the app for the new session
            setAppStyle();
        }

        if (m.WParam.ToInt32() == WTS_REMOTE_DISCONNECT)
        {
            // The session is in the disconnect state, so close the CMP if it is open
            if (this.cmp != null && this.cmp.IsChannelOpen())
            {
                try
                {
                    this.cmp.CloseChannel();
                }
                catch {}
            }
        }
    }
    base.WndProc(ref m);
}

 

Try It Out Yourself

Want to try it out yourself?  I have made the program and the source available so you can beat it up and come up with some more ideas.  You can download it here.

 

Responsive Design for Enterprise Applications

Responsive Design that web developers use can now be applied to Enterprise Applications thanks to the Citrix Mobile SDK. This post will give you a glimpse of what is possible to get your wheels turning.

Have you heard of Responsive Web Design?  The term was coined by Ethan Marcotte in his article on A List Apart.  The gist of the idea is that web pages can be designed to adapt or respond to the entity that is viewing it.  The Boston Globe’s website is a good example of responsive design.  You can see by the screenshots below, that given enough screen real estate, the website has a 3 column layout.  But, as the screen width starts to shrink, the layout is adjusted to 2 columns and then 1 column.  Also, the navigation changes to better suit the layout and images are adjusted or hidden.

 

Applying Responsive Design to Enterprise Applications

Just like web pages, enterprise applications are starting to get viewed on a myriad of devices.  What if we could take some of the same techniques web designers are using and apply that to enterprise applications?  Well, as it turns out, we can with the help of the Citrix XenApp 6.5 Mobile Application SDK.  By using the Mobile Application SDK, enterprise applications that are hosted on a XenApp 6.5 server can respond to the type of device using the application.

Responsive Application Example

As an example, I wrote an application that takes data from EdgeSight about the types of Citrix clients used in an environment.  The application displays this information in a chart as well as a table.  I then published this application from AppCenter on a XenApp 6.5 server and launched it using a fat client.  You will notice that both the chart and the data table are shown as well as a menu strip at the top to select a chart type.

 

Now, if you launch the exact same application from the exact same server using a mobile device, some very interesting things happen:

 

  1. Only the chart is shown initially.  If you rotate the device, only the data table is shown.
  2. The application’s window chrome is gone.
  3. The width and the height of the application were changed to the width and height of the device.
  4. Tapping the chart image brings up the device’s native picker.
  5. Changing the orientation of the device changes the display.

Check out this short video for a demo:

 

Try It Out Yourself

Want to try it out yourself?  I have made the program and the source available so you can beat it up and come up with some more ideas.  You can download it here.