Introduction

In this tutorial, you'll learn how to build a mobile app which uses an RSS feed.
Allow yourself 20 minutes for this tutorial. This is by far our longest video.
We introduce many very useful EachScape concept which will truly help you build your app.
 We are confident these 20 minutes will be time well invested!
 
You will learn how to

Video Tutorial

 

Step by Step


1. Create a New App
2. Use Text Block to add a Title
3. Connect a Data Source
4. Use List Block to display Headlines
5. Create a second view
6. Switching Views

 

 

Add blocks to View and configure their settings read more >

Create and configure the second View of the app read more >
Add tap navigation to the app read more >
Generate and test the completed app read more >

 

 

1. Create a new app 
 

 

  • Click the "New" button at the top left of the builder to create a new app.

 

 

 

  • Give your app a name, in our example 'BBC News'

 

 

  • Select a Layer, let's start with 'Canvas'
Click 'Edit' to access the Studio


Use Text Block to add a Title
Click on the Block Selector on the left hand side
 


Find the Text Block and drag it on the Canvas of your First View
 
Position the Text Block on the screen and resize to use it as the Title of the main view

 

 






 




 

Connect a Data Source
 

 

  • At the top of the screen, select the "Connect" tab
 
 

 

 

  • Select "New Source"
 

 

 

  • Select "Live Feed" (we want to plug in a 3rd party RSS feed)

 

 


 

 

 

 

  • When you click away the 'Data Descriptor' auto populate.


 
 
  • Press the Create button, which will create the Data Source.

 

 

  • Click on the "Develop" tab at the top of the builder to get back to the views that make up your app.
 

 

 

  • Select the "Connect / Remove Data Source" in the Navigation Panel under your app name.

 

Select the Data Source we just created and hit the Add button.
 This will give the app access to this Data Source.
 
Use List Block to display Headlines
 
We now have a data source associated to our app.
 To display the content of this data source we will use the List Block.
Pick the List Block from the Component Selector and position it underneath the title of your app.
 


Right click on the List Block to bring up the Block Editor.
In the Data Source pull down menu, select the only feed we have attached to our app 'BBC World Datasource'

 

 

Select "Text List Item" in the Block Editor to configure our List Block
When you click into item the fields from the feed are displayed.
Select Title.
This will display the Title (headline title) from the feed.
 

Repeat the operation with Description field in the second item.

You can customize the display of the List Block list item as you see fit.
 
Create a second view

We need a second view that will display the articles associated with our view listing the headlines.
Select 'New View'

 

 

In the pop-up window, type in 'Article' into the name text field and tap on 'Canvas' to choose the Canvas Layout 
(under the 'Layout' section). Hit the Create button.
 

 

 

Add a Text Block to show the BBC title as we did in our first View.

We need to display the Title of each article in our article page.

To do this, we use a Text Block but instead of using static content we use the content from the data feed.


Here we drop a Text Block in our Article View and Right Click on that Text Block to Edit it "Edit Text 2"



Right click on the Text Block brings the Component Editor.
In the component Editor we click in the Text field to bring the Value Editor.

Remove the default text and select the BBV World Datasource as highlighted below
 

Within the BBC World Datasource we click 'Title' that will bring the data source content in our Value Editor

For the Article itself, we will use an HTML Block
Open the Block Selector and Drag & Drop the HTML Block in your view.
Resize it manually for it to fill up the remaining space in your View.

Right click on your HTML Block to edit it.

 
The HTML Block can be used to display HTML or write your own HTML

In this case we will write our own.
We click on Markup, select the BBC World Datasource then pick 'Description'
In our example we added a tiny bit of HTML using the marker <P> and added the "description" field of or feed inside.

Switching Views

We now have our 2 views:
- Main
- Article

The key is to bring the Article view when a user taps on the headline in the headline list.
To do this we are using Action associated to a Tap Event.
Actions and Events are central

Select our First view in Studio (just click on it in your App Tree).
Right Click to bring the contextual menu.
Select "Edit List 1" bring the Block Editor


In the Block Editor, select the "Event" tab (highlighted in blue on our screenshot
 
 
We want to associated an action 'Switch to another view' to a Tap Event.

Select the little pencil next to the 'Tap' Event to bring up the Action Editor
Select the '+Action' button to bring up the list of Actions.
On top is the Switch to Another View Action, select it
 

Choose the view to transition to.
In our case 'Article' view.
 

Add a transition (not required but it looks better)
In our example we use "Push from right"
 
 

We now have created an RSS feed reader with 2 views.
When a user taps on a headline in the first view it will transition to the second view and show the article.
 
 

We are now ready to Preview the app.
Click the Preview Button.



Learn More
- Generate an App
 - Learn more on how to position Blocks on a View