Creating a Sample Photo Capturing Application
For example, if you wanted to create a simple application that captures a photo and displays it back to the user, follow the steps described below.
Create the display file using the Visual Designer
- Drag a mobile device layout and click the maximize button to expand it to the full size of the screen
- Drag a Heading Label to the Top Bar of the Layout, set the left property to 10% and the width property to 80% to center the heading widget. Double-click the heading to edit the heading name, adjust the font color, and to center the text within the widget.
- Drag a button to the bottom bar and set the text on the button to “Take Picture”. Set the onclick event to takePicture(), which we will define later in the tutorial;
- Add another button to the bottom bar and set the text on the button to “Exit”. Bind the response property to a named indicator called btnExit.
- Add an image to the content section of the layout. Set top and left properties to 0px and the width and height properties to 100%. This ensures that the image expands to fill the screen based on the size of the device and adjusts automatically when the user rotates the device. Create a temp directory in /www/profoundui/htdocs and put a placeholder picture there named picture.jpg. Then, set the image source property to js: pui.normalizeURL("/temp/picture.jpg?rnd=") + Math.random(). Note, Math.random() is used here to prevent caching.
- Name the record format, save the display file, and compile it. Your screen in the Visual Designer should look similar to the following:
Create the takePicture() function
Edit your app.js file in PhoneGap and add the following code at the end:
Create the RPG code
The RPG code for this basic application can be as simple as the following:
When you run the application on your device, it will allow you to take a photo, and then automatically upload it to the IFS. The image will be displayed from the IFS once uploaded.
Allowing the upload
Profound UI secures all uploads using the PROFOUNDUI/PUIUPLEXIT exit program. The exit program must explicitly allow uploads into the temp directory you created. This can be accomplished by adding the following lines to the exit program.