WebRatio Mobile Platform lets you add to your mobile application a feature that allows to take a photo with the camera or to select an image from the gallery. Let's see how to model this integration in your mobile application.
How to Model the User Interaction
Let's suppose you want to create an application which gives the chance for the user to take a picture or to select an image from the device gallery.
Let's create the "CameraSample" mobile project. Click on "File" menu, choose the "New" and then select the "Mobile Project" option. Give a meaningful name to the Mobile Project, such as "CameraSample" mobile project. Then press the "Finish" button.
Let's open the "App View" of the Mobile Project and start to model.
First of all, let's add a Screen showing a form with a field to the user. Click on the "View Containers" section of the toolbar, choose the "Screen" option and place it in the work area. Then give a meaningful name for the screen, such as "Camera Sample".
Let's model the form to take a picture or navigate in the image gallery. Click on the "View Components" section of the toolbar, choose the "Form" component and then click inside the Screen. Type a name for the component, such as "Form Sample". Right-click on the Form Component, choose "Add" and then select the "Field" option. Type a name for the field, such as "Photo" and then choose the "blob" value as Content Type.
How to Emulate with WebRatio Developer App
Generate the project to emulate the mobile application, by pressing the "Generate and Run" button.
The best way to test this mobile application is to use the WebRatio Mobile Developer App. Press on the "Scan QR Code" button to download the mobile app on the device.
Let's see how to take a picture with the device camera. Click on the "Photo" field to add an image, choose the "Take a picture" option and press on the "Camera" to capture the image. Press on the "Save" button to confirm.
Let's see how to select a picture from the gallery. Click again on the "Photo" field, choose the "Select from the gallery" option, select the "Gallery" option, choose a folder and then select the image.