Mobile JSF: Using ICEmobile to rapidly build mobile applications

The goal of this 4 part tutorial is to build an ICEmobile application that will allow users to take a photo using their device's camera, upload that photo to the application, and notify users of the new image upload using ICEmobile cloud push. The application will also provide screen size detection and allow navigation between views.

Part 1: Device Detection and Layout
Part 2: Camera Application
Part 3: Push Notification
Part 4: Page Navigation

Requirements

Completed parts 1 and 2
ICEmobile Container

Part 3: Push Notification

Our sample application can now interact with our device's camera and upload a photo to the server. However, other active sessions will not be notified of a new image upload unless the user refreshes the mobile application manually. Let's now add ICEmobile Cloud Push notification to our demo so that users always see the most current image upload, or alternatively will receive a notification that a picture has been uploaded via the devices messaging system if the container is not the active process.

Adding AJAX Push Notification to the sample application is extremely simple. For this application we are going to assume that everyone will be in the same push group and a new camera image upload will result in a push to the entire group. If you are not familiar with ICEpush, additional details can be found here.

Step 1

Open WEB-INF/includes/contents/camera-capture.xhtml and add the following tag just below the <h:form > tag. This will insure that anyone who views this page will automatically be added to the push group "cameraGroup".

<h:form>
    <icecore:push group="cameraGroup"/>
...
</h:form>

Make sure to add the namespace xmlns:icecore="http://www.icefaces.org/icefaces/core" to the <ui:composition/> element.

When the <mobi:commandButtron/> is pressed the camera image is uploaded and our actionEvent #{cameraBean.processUploadedImage} is executed. If the camera image is successfully processed we want to initiate a server-initiated push to all other application users who are in the "cameraGroup" render group. Initiating this push is very simple. We first need to create a new instance of a PushMessage object and then pass it to the PushRenderer to initiate the push. The CameraBean method processUploadedImage should now look like this:

          public void processUploadedImage(ActionEvent event) {
		if (cameraImage != null
				&& cameraImage.get("contentType") != null
				&& ((String) cameraImage.get("contentType"))
						.startsWith("image")) {
			// grab the new image and use DeviceInput to create a display
			// resource
			File cameraFile = (File) cameraImage.get("file");
			if (cameraFile != null) {
				uploadedPhoto.add(DeviceInput.createResourceObject(cameraFile,
						UUID.randomUUID().toString(),
						(String) cameraImage.get("contentType")));

				// new push message creation
                                PushMessage message = new PushMessage("New photo", uploadMessageComment);
                                PushRenderer.render("cameraGroup", message);

				// report successful upload to the user.
			        FacesUtils.addInfoMessage("Upload was successful, notification sent.");
				return;
			}
		}
		// create error message for users.
		FacesUtils.addInfoMessage("The uploaded image file could not be correctly processed.");
	}

The constructor for the PushMessage takes two parameters - subject and details. In this particular case we want the message subject to read "new photo" and the message body to contain whatever comment was typed in the input field uploadMessageComment.

Running the Example

Adding Ajax Push is very simple but there are additional configuration requirements for Cloud Push. You can read more about this setup here:

You can choose to use either the device's message system or email (shown in tutorial under 'Add Email Configuration'). The best way to test the application and see push notification in action is to have a device running the ICEmobile container and a desktop browser pointed at the same application instance. When the camera demo is loaded by each device they are immediately added to the "cameraGroup" push group. This can be seen live by taking a photo with the mobile device and submitting the photo to the server. The desktop client will be immediately refreshed and the new image displayed.

For cloud push notification, close the mobile container on the device and upload a picture on the desktop browser using the file upload control, adding a short comment via the input text field. Once this new message is sent, a cloud push notification message will be generated and sent to the mobile device and displayed using the system native messaging system or email. Below are screen shots of the message received on both a small and large device.