Skip to main content link. Accesskey S
  • Help
  • IBM Logo
  • IBM Web Experience Factory wiki
  • All Wikis
  • All Forums
  • ANNOUNCEMENT: Wiki changed to read-only. READ MORE...
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
Community Articles > Web Experience Factory > Samples and Techniques for Web Experience Factory > Camera and Worklight Enable Samples for Web Experience Factory 8.5
  • Share Show Menu▼
  • Subscribe Show Menu▼

About the Original Author

Click to view profileIBM contributorThomas Dinger
Contribution Summary:
  • Articles authored: 9
  • Articles edited: 1
  • Comments Posted: 1

Recent articles by this author

Client-Side Application Samples for Web Experience Factory 8.5

Sample models demonstrating how to build client-side applications

Camera and Worklight Enable Samples for Web Experience Factory 8.5

Sample models demonstrating how to use the Camera and Worklight Enable builders

Getting Started with WEF 8.5 Worklight Support

This document provides information for setting up Worklight Android with IBM Web Experience Factory 8.5 to create a hybrid application.

Best Practices for Building Client-Side Applications with IBM Web Experience Factory

Order of Builder Calls in a Client Model Theme. Theme builder call(s) or imported model containing common theme(s) should be first. Client Application. The Client Application builder call should be after the theme, because It depends on the theme. It should not typically be imported from ...

A Sample Application using the CMIS Document Access Builder

This article and the accompanying sample explain how to use the new CMIS Document Access builder in IBM® Web Experience Factory Version 8.0 (hereafter called WEF or Experience Factory.) This sample includes three WEF models – standard provider and consumer models, along with a model containing ...
Community articleCamera and Worklight Enable Samples for Web Experience Factory 8.5
Added by IBM contributorThomas Dinger | Edited by IBM contributorThomas Dinger on May 8, 2014 | Version 3
  • Edit
  • More Actions Show Menu▼
Rate this article 1 starsRate this article 2 starsRate this article 3 starsRate this article 4 starsRate this article 5 stars
expanded Abstract
collapsed Abstract
Sample models demonstrating how to use the Camera and Worklight Enable builders
Tags: samples, camera, Worklight, mobile, multi-channel
ShowTable of Contents
HideTable of Contents
  • 1 Overview
    • 1.1 Prerequisites
    • 1.2 Note on client applications
  • 2 CameraTest and ClientCameraTest
  • 3 CitizenReports and ClientCitizensReport
  • 4 CheckDeposit and ClientCheckDeposit
  • 5 WLDeviceNotification
  • 6 WLClientAudio
  • 7 Running the samples
    • 7.1 Note on Smart Refresh
    • 7.2 Note on file upload and security

Overview


The attached package includes eight samples that illustrate the use of the Camera and Worklight Enable builders that are new in Web Experience Factory 8.5. The samples are:

– CameraTest, ClientCameraTest: Sample applications for verifying that your environment is set up properly for developing Worklight hybrid applications.

– CitizenReports, ClientCitizenReports: Sample applications to report issues such as graffiti or potholes to a city government, by entering a location and taking a picture.

– CheckDeposit, ClientCheckDeposit: Sample applications to deposit checks in an account, by entering the amount and taking pictures of the front and back.

– WLDeviceNotification: Sample application that demonstrates different native device notification capabilities, including vibrate, beep, alert, and confirm.

– WLClientAudio: Sample application that demonstrates native device capabilities for playing a streaming music file and recording an audio file and playing it back.


Prerequisites


WEF applications must be run from a Worklight hybrid application installed on a mobile device in order to access native device features, such as the camera. Refer to “Getting Started with WEF 8.5 Worklight Support” for information on developing Worklight hybrid applications.

Note on client applications


Two models are provided for each of the Camera samples. One is a traditional WEF server-side model and the other is a WEF client-side model. WEF server-side applications render a new page on the server for each action or form submission. The page includes HTML markup, scripting logic, and application data. WEF client-side applications render template pages on the server when the application is started (or optionally as each page is needed.) The template pages include HTML markup and scripting logic. The necessary application data is returned from each action or form submission, and is added to the template page using client-side scripting logic.

A client-side application typically results in fewer requests and smaller responses than a similar server-side application. Refer to the article "IBM Web Experience Factory - Anatomy of a Client-Side Application" for more details on client-side applications.

CameraTest and ClientCameraTest


These models are in the samples/worklight/camera_test folder. They are very simple models intended to be used to verify the configuration requirements for using the Camera builder. Each model has two pages. The first page includes a Camera builder for taking a picture. Submitting the first page displays the second page, which contains the uploaded picture.

Mobile device screen shots



CitizenReports and ClientCitizensReport


These applications might be part of a city government web site, where users can report issues they encounter, such as graffiti or sign damage. When running from an installed hybrid application, they can take a picture of the issue and submit it with the other information, which is stored in a database table.

These models are updated versions of the sample that accompanies this article on developerWorks: http://www.ibm.com/developerworks/mobile/library/mo-aim1301-worklight-portal-4/index.html

The new models have been updated to use the Camera builder, which takes the place of the hand-edited JavaScript and other builders that were previously needed to implement the camera functionality. the new models were also updated to use new layouts and styling.

Note

To create and populate the database table, open the CitizenReportsProvider model, open the SQL Table Create builder call and click the "Fetch DataSource Names" button. From the "SQL DataSource" drop-down menu, select "jdbc/CloudscapeForWEF". If this data source doesn't exist, it will offer to create it for you. Scroll down in the builder and click the "Create Table" button. This should create and populate the database table.

Mobile device screen shots



CheckDeposit and ClientCheckDeposit


These applications let a banking customer deposit a check by taking pictures of the front and back of the check and entering the amount. This application is intended just as an example of camera use -- it doesn't store any of the captured data.

Mobile device screen shots



WLDeviceNotification


This application demonstrates the use of the Cordova Notification API. The Worklight Enable builder call loads the Cordova JavaScript files if the application is running stand alone. Each Button builder call contains some JavaScript code that calls the appropriate Cordova API.

Mobile device screen shot


WLClientAudio


This application demonstrates the use of the Cordova Media API. The Worklight Enable builder call loads the Cordova JavaScript files if the application is running stand alone. Each Button builder call links to a Client Method that calls the appropriate Cordova API.

Mobile device screen shot



Running the samples


To use the Camera builder with these samples, you will need to have your development environment configured for using Worklight with Web Experience Factory, as described in “Getting Started with WEF 8.5 Worklight Support”, as mentioned in the Prerequisites section.

To use these samples, you will need to download the attached zip file. Right-click a WEF project, choose the Import > Web Experience Factory Archive menu item, and select the downloaded zip file. Doing this will add the samples to your WEF application. You will also need to create a Worklight hybrid application that accesses the WEF application to run the samples on a mobile device.

Note on Smart Refresh


The WEF Camera builder functionality is dependent on the Cordova JavaScript files supplied by Worklight. These JavaScript files do not get loaded correctly if the page containing the Camera builder uses Smart Refresh. Because of this, the Theme used by the sample models for a tablet device sets the Use "Smart Refresh" input to "No". (The Theme used by the sample models for a smartphone device already has Smart Refresh disabled by default.)

Note on file upload and security


The default location in the WAR (under the WEB-INF folder) to which files are uploaded should be considered a temporary location. Uploaded pictures should not be permanently stored in this location for several reasons, including but not limited to:

– Access. Uploaded images cannot be displayed from a location within the WEB-INF folder.

– Persistence. The WAR on disk may be deleted and replaced when the application is redeployed.

– Topology. A multi-node cluster may have multiple copies of the WAR, but the file is only uploaded to one of these.


For security reasons, you should always configure the default file upload location to be within the WEB-INF folder of the deployed application. This prevents potentially malicious content from being uploaded into a location which is accessible from a browser. After verifying that the uploaded files are appropriate to the application (right file extension(s), appropriate content, etc.), the uploaded files can then be moved to a more suitable location.

The Camera builder facilitates this security behavior. It will produce a Designer warning if the upload location is outside the WEB-INF folder. Once an image is uploaded, the Camera builder validates that it has the expected file extension and that the image content is the expected type. If the validation succeeds, the image is moved to the specified folder location relative to the application root. If the validation fails, the image is deleted.

This Camera builder functionality addresses basic security and access issues for uploaded images, but it does not address the persistence or topology issues. Additional application functionality would be required to address these issues.

  • Edit
  • More Actions Show Menu▼


expanded Attachments (1)
collapsed Attachments (1)
Edit the article to add or modify attachments.
File TypeSizeFile NameCreated OnDelete file
application/x-zip 96 KB worklight_samples.zip 5/8/14, 7:44 PM
expanded Versions (3)
collapsed Versions (3)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (3)May 8, 2014, 8:37:42 PMThomas Dinger  IBM contributor
1May 8, 2014, 8:06:37 PMThomas Dinger  IBM contributor
1May 8, 2014, 7:49:57 PMThomas Dinger  IBM contributor
expanded Comments (0)
collapsed Comments (0)
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedHelpAbout
  • IBM Collaboration Solutions wikis
  • IBM developerWorks
  • IBM Software support
  • Twitter LinkIBMSocialBizUX on Twitter
  • BlogsIBMSocialBizUX on Facebook
  • ForumsLotus product forums
  • BlogsIBM Social Business UX blog
  • Community LinkThe Social Lounge
  • Wiki Help
  • Forgot user name/password
  • Wiki design feedback
  • Content feedback
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use