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!
- Configure Layout, specifically the Canvas.
- Create Views
- Configure Blocks
- Plug in an RSS feed
- Link Views together using Events and Actions
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 >
- 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'
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
- 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)
- Give a name of your choice to the feed, in our example we use 'BBC World Datasource'
- Paste the feed in the URL field, we use the feed: http://feeds.bbci.co.uk/news/rss.xml
- 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.
This will give the app access to this Data Source.
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'
When you click into item the fields from the feed are displayed.
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.
We need a second view that will display the articles associated with our view listing the headlines.
Select 'New View'
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.
We now have our 2 views:
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.
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
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.
You can always view our Video Tutorial for more detail on that application
- Generate an App
- Learn more on how to position Blocks on a View