XPages and Me

My Journey into XPages Development

Diving into Bootstrap and Font Awesome – Part 3: Displaying / Hiding Content Based on Device Type

When designing an application, that is going to be used on different devices (desktop, tablet, mobile), your design for each of the devices might be very different from each other. Thus, you need to make sure that each design is only being displayed on the device type, it was designed for.

Obviously, you can create different custom controls that will contain the UI for the different devices. But how to hide or display them? It is not very hard to check the screen’s size with client-side javascript, but how do I pass that on to a rendered property?

Here is one way to do it:

Create a new XPage and open the “Events” tab. Select the event “onClientLoad”, open the tab “Client” and select “Script Editor”:

Image 1

Then enter the following JavaScript code:

$(window).on('load resize', function(){
	var screenWidth = $(window).width();
	var sDevice = '';
	
	switch(true){
		case (screenWidth < 768):
			sDevice = 'mobile';
			break;
		case (screenWidth < 922):
			sDevice = 'tablet';
			break;
		case (screenWidth >= 922):
			sDevice = 'desktop'
	}
	
	XSP.partialRefreshPost( '#{id:pnlList}', {params: {'sDevice': sDevice}} );
});

So, what does this do? It attaches an event handler to the window and every time the window is being loaded or resized, triggers the code that will check the screen size and based on the value, decides what kind of device it might be (the sizes are taken from Bootstrap). After that, it will do a partial refresh of a panel (we are going to add) submitting the parameter ‘sDevice’ with the device type info.

Now, lets add a panel to the XPage and name it “pnlList”. Then add three label controls to the panel, with the following labels:

label1: I am going to be displayed if I am on a mobile device

label2: I am going to be displayed if I am on a tablet device

label3: I am going to be displayed if I am on a desktop device

Now we need to set the rendered property on each of them, checking the value that was passed on by the partial refresh previously. Select “label1”, click on the blue diamond beside “Visible” and select “Compute value…”:

Image 1

In the script editor prompt, select “JavaScript (Server Side)” as the language and “Compute Dynamically” as the condition, then enter the following JavaScript code:

param.sDevice == 'mobile';

Click on “OK” to close the prompt, then do the same thing for the other two labels:

label2: param.sDevice == ‘tablet’;

label3: param.sDevice == ‘desktop’;

Save and close the XPage and give it a whirl. Every time you resize the screen, the client-side code is being triggered, triggering in return the partial refresh call and passing on the current device type, based on the screen size. Once it reaches a certain size, only the proper label is being displayed.

Obviously, you can apply the rendered condition to custom controls that you’ve added to your XPage, with each custom control containing different UI setups / designs for the different devices.

Here is the XML markup for the test XPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:eventHandler
		event="onClientLoad"
		submit="false">
		<xp:this.script><![CDATA[$(window).on('load resize', function(){
	var screenWidth = $(window).width();
	var sDevice = '';
	
	switch(true){
		case (screenWidth < 768):
			sDevice = 'mobile';
			break;
		case (screenWidth < 922):
			sDevice = 'tablet';
			break;
		case (screenWidth >= 922):
			sDevice = 'desktop'
	}
	
	XSP.partialRefreshPost( '#{id:pnlList}', {params: {'sDevice': sDevice}} );
});]]></xp:this.script>
	</xp:eventHandler>
	<xp:panel
		id="pnlList">
		<xp:label
			value="I am going to be displayed if I am on a mobile device"
			id="label1"
			rendered="#{javascript:param.sDevice == 'mobile';}">
		</xp:label>
		<xp:br></xp:br>
		<xp:label
			value="I am going to be displayed if I am on a tablet device"
			id="label2"
			rendered="#{javascript:param.sDevice == 'tablet'}">
		</xp:label>
		<xp:br></xp:br>
		<xp:label
			value="I am going to be displayed if I am on a desktop device"
			id="label3"
			rendered="#{javascript:param.sDevice == 'desktop'}">
		</xp:label>
	</xp:panel>
</xp:view>

Enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: