In this guide we will create an App for sharing Halloween pictures.
Let's see step by step how to create it.
First we create a DETAIL screen as the presentation screen. Alternatively we can use a type of splash screen or an interactive image.
Let’s add a Header Image
Then we will add a button to the center of the screen with a picture element and a text element, to which we will assign the action: Go to Screen and following this, a screen IMAGE that we will create.
In this way, when we click the button, it will open the screen Image type DATA VIEW.
When we open the new IMAGE screen, we must to create our DATABASE.
The idea of this app is to show Local Images (uploaded from your computer), Remote Images (uploaded from an external server on which we host some pictures, in our example will be Dropbox) and image URLs, also hosted on an external server like Dropbox. These can be shared externally through the device.
So, when inserting local and remote images, the users will see the same images in both cases: whether they have an Internet connection or not.
We know that without an internet connection it is always possible to display images uploaded locally from a computer.
Therefore we add 3 fields:
Local Image --> type Local Image
Remote Images --> type Remote Image
URLs --> type Text
In that screen we will create a DETAIL VIEW.
Let’s insert another Header and we will create a bar "Bar Share" that we will insert in the View Properties.
We will create a bar with 4 cells and icons:
We will assign an action to each icon:
1st Icon: Action Previous
4th Icon: Action Next
Both icons have the function to show the gallery type images and, by clicking the button, it will be possible to go forward or backward.
2nd Icon: Action SHARE
When clicking the Share button, we want the user to be able to share the URLs of the images that we have in the database.
Following this action we will indicate the field of the URLs from our database: (Scary Images.URLs)
Now let's add a new detail view named "Detail_2".
This new view will open from the third icon, the save one. We will assign it to the action: Go to view: "Detail_2" where we will write the instructions to download and save the URLs of our database.
We only need to drag the bar in the views created.
Now we go back to the second detail view: "Detail_2" in which we will write a text with the instructions to download the URLs of the images of the database.
Down in the screen we will put a "Download" button to which we will assign the action: Open URL and, following this, the fields of our URLs, since this is a field to share: (Scary Images.URLs).
Let’s go back to the detail view 1 “Detail_1” and let’s drag the image element of the database fields:
This way the user will be able to see the local images if they don’t have an internet connection, and the remote ones if they do have internet.
Now we are going to the DATABASE EDITION:
We will have to fill in the 3 columns as in the following image:
1. COLUMN 1 “Local Image:" We will insert 7 images into this column that will upload from our computer (or from the Cloud if we use it in our App).
These images will be displayed when the user does not have an internet connection, because they are local.
2. COLUMN 2 “Remote Images:" In this column from row 8, we will insert the url of the images we have hosted on Dropbox. These images are only displayed when users have an Internet connection, as they are uploaded in remote (online) and for this reason we insert them from row 8, so that it does not overlap the local image, if the user uses Internet and could display both images.
3. COLUMN 3 “URLs:"
In this column the same URLs of the images uploaded in column 1 and 2 will be inserted in the first 7 rows, and hosted in dropbox. These will be used with the SHARE button and if the user does not use an Internet connection (will be displayed together with the local images).
4. From row 8 to 14 we will copy the same URLs of column 2 (hosted in dropbox) and column 3, which will be displayed next to the remote images, when the user has Internet connection.
In both cases (with or without Internet connection) the user will be able to see all the inserted images.
NOTE: When we share the URLs of the images from dropbox, we will have the link that ends with a (= 0):
To share the link successfully with the public, we have to change the parameter = 0 to = 1 as in the following image:
Once the database edition is finished, we can see what our app looks like in the simulator.
The result will be like this:
When clicking the "Next" button (Image 1) we will move to the next image in the database.
When clicking the “Share” button (Image 2), the applications installed on the user device who is sharing will be opened, such as Facebook and Whatsapp (Image 3).
When clicking the “Download” button, the URL of the image will be opened and the image will be downloaded to the mobile gallery (Image 4).