Build your first App

We will use "Puppies"
 as our first app

 

If you have not yet installed "Puppies"
Click here to go to DashBoard to install it.


 

 

1. First we will CUSTOMIZE this app with your own content.
2. We will show you How the app is built (Video Tutorial).


 

The Puppies app consists of 2 views.

The first View is a List.
The second view uses an Image Block to displays pictures.
 - It's a very classic structure -


 
 
The content comes from an EachScape Cloud Collection.


The Cloud Collection containing the content looks like this:



It's very easy to CUSTOMIZE content in a Cloud Collection.

 

 

1. CUSTOMIZE "Puppies" with your own content
 

When you install the Puppies app your own copy of the Puppies Cloud Collection
will also install in your Workspace.


To access your own Puppies Cloud Collection select the 'Connect' Tab (Top Left).




Click on 'Puppies (Cloud Collection)

 

Then click on a name, for example 'Rocky'.





Change the name Rocky to Jack.

That's it.

Your app will now show Jack as the new name for this puppy.
 It works the same with images, audio and video.


Let's Preview our change.
 Go back to the Studio by clicking the 'Develop' tab.





Select the 'Preview' Button





You should see your app like this:



Click on this Image in the Preview  His name used to be Rocky.


 You can now see his name is Jack


 

Get more familiar and CUSTOMIZE the content.


Change a Photo.
 Add or Remove a Row in the Puppies Cloud Collection
On the upper left side window is your app 'Puppies'

 


 How the app is built

 

 


This is what you see in Studio (Develop Tab)

 

To review the different components of an app
mouse over the elements.

Apps are made of Views.
(Views are the equivalent of a Web Page)

The Views are made of Layout and Blocks.
Let's focus on Blocks, we will review Layouts later.

 Mouse over the Block 'Text' under the 'Puppy List'



Click on the Underlined Block name
OR
Position your mouse over the Block in the Layout View and Right Click on the Block to bring the Contextual menu. Select Edit Text.

 The Component Editor will appear on the right hand side.

 


You can see all the features available for the TEXT Block.
 Let's modify our App and change the title of our list, 'Puppies' to 'Gorgeous Puppies'

Click in the 'Text' box of the component editor on the right hand side.

 


The editor box appears: Add 'Gorgeous' in front of 'Puppies' and click 'Apply': 


 

 
 Finalize your change by clicking 'Update' in Component Editor.

  Et Voila!

 


 In just a few clicks you updated an iPhone and and Android native app
along with an HTML5 web app.

All the Blocks work the same way.
Discover the features of each Block via the component editor as you explore apps.

We know how to change the title.
What about the list itself?

Let's look at the LIST Block.
On the left side, click on second Block of the 'Puppy List' View, that is the LIST Block.
 The Block Editor shows up on the right:

 

 
On the Top of the LIST Features you can see 'Data Source'
Data Source points to the Cloud Collection we just looked at earlier.




If you select that drop down menu you will see
all the data sources associated with your app.

In this case we have only one: Puppies.
You can add any sort of data source: RSS, XML, JSON etc...
You don't have to use the EachScape Cloud Collection.
It's Open.

You can explore the different possible settings for the LIST Block.

In our case we set the Row height at 200 and use an
image of a running puppy for each list item background.
Open up the 'Row Formatting' section to see this:



With EachScape Apps are all built the same way.
Explore to discover what you can do.

How do we display the images from the Cloud Collection?
Very Simple.
Right below Data Source select the 'List Item Section' of the LIST Block

 

 You can see that we selected on 1 item to be displayed.
You can select as many as you want (or have).

In this case we selected the puppy name.

The name comes from the Cloud Collection.
When you select the item pull down menu you will see all the available
data fields from the Cloud Collection:

 


 Here we selected puppy_name.
That's the name we entered in the Cloud Collection under the column 'name':

 


 Now, these aren't really visible in our app.
Well, they are, but they are covered by the pictures.

How are these pictures set up?
This is very easy to do.
Our LIST Block allows for pictures to be added.

Let's look at the 'List item image' section:

 

 
Here we see that the left image comes from the Cloud Collection.
If you click in that field, the Editor comes up:

 

 
Click into the box with the pencil and the Data Source Editor comes up.

When you select 'Puppies (Cloud Collection)' in the left side,
the matching fields of the Cloud Collection show on the right hand side.
One of these fields is the 'puppy_photo_original'

When you upload a photo into EachScape Cloud Collection
we automatically add 2 additional sizes: Thumbnail and Medium.
Here we will use the original size, but the system shows you all the available sizes.

 

 
We set the height of that image at 200 pixels (just because it looked good).
But what about the width?

Width is trickier because of the many devices out there.
How do you make sure the image horizontally fills up the screen?

That's another strength of EachScape.
We can extract the width of the device itself
and use it to specify the width of our list item.

 

 
Click into the Box and the 'Edit Value' window will appear.

This time we want a System Value so we select 'System Values'
The value we are looking for is the Device Width in Portrait mode.
Select it and you are done.
Now your app adapts to multiple screen sizes.

 

 
In just few minutes we learned a lot.
We learned how to connect a Cloud base Cloud Collection into an app.
How to use system variable so the app adapts to multiple device screen sizes.

Congratulations you are doing great!

Now we know how to build a list with content form a Cloud Collection.
In our app, when we click on the list a big photo of the matching puppy comes up.
How is this done?

First, let's look at the Big Photo view.
Then we will look at how to bring that view when a user click on the list.

On the Navigation Panel (Upper - left side) click on 'Big Photo':

This View is made up of an Image Block and a Button Block.
Mouse over the Image Block and click it.

On the right, the Component Editor shows you the details of the Image Block.
Image Source is where the image comes from.

  Click in that box to bring up the Selector.
This is where you select what image from the Cloud Collection
you would like the Image Block to display. Simple.


  When you know how to use one Block, you pretty much know how to use all of them.
You are on your way to building high quality, highly custom apps.

The other Block making up this view is the Button Block.
On the left, in the Navigation Panel, select the Button Block.

This button is used to go back from the Big Photo View to the List View.
On the right hand side, the Button features are shown.
We use an image for the button, in this particular case the same image
is used for the up & down position of the button.

  But how do we tell the system to go back to the List View?

With EachScape, you associate Actions to Events.
This is extremely powerful.

On any user action, you can associate one or more events.
This is extremely flexible.

Select the Events Tab in the Component Editor on the right hand side:

 

 
The events show us that when an Action 'Button Down' is registered
the app will 'Switch to Another View' that view is our initial Puppy List:

 

 
Actions are easy to get to.
Just click on the Action pencil and EachScape will display the list of possible Actions.
In our case, we have only action 'Switch to Another View'

 

 
If you click on it, you will see the details.
We are switching to the view 'Puppy List'.
We apply a transition 'Push from Left'.

You can add whichever transition you want.
Switch to the view you want.
(although in this example our application only has 2 views so the choices are limited!

 

 
Using the '+ Action' button on that window you can add any action you want.
From Social Media, to Video Control to Custom Reporting.
Take a moment to check out all the capabilities.

 

 We understand how we go back to the Puppy List view.
But how did we get there in the first place?

Very Easy.
Close these windows
In the Navigation Panel on the Upper Left, select the 'Puppy List' view.
Let's go back to our LIST block
In the Navigation Panel, in the 'List View' mouse over the List Block and click on it.

We are back to our LIST Block:

 

 
As for the Button Block in the Component Editor on the left side there is an Event tab.
Click on that Event Tab.

He we use the same Action as before.
When a user clicks on an item in the List Block the associated Event is to
"Switch to another view" and that view is our Big Photo view.

 

 
Et voila!

You have just learned a lot of the basics to get started on EachScape.

You have learned how to:

Use a Cloud CMS to to store your assets.
Display them in a LIST Block.
Use the BUTTON Block and the with the IMAGE Block.

Explore and make changes.
When you are satisfied and ready to go generate your app.
 You generate an app by selecting the Generate button:




 

Learn how to Generate your app.