- 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