Welcome, Guest Login

Support Center

My First App - OLD

Last Updated: Nov 30, 2015 06:17PM EST

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. 

 

 

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)

 

 

  • 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.

 

Select the Data Source we just created and hit the Add button. 
This will give the app access to this Data Source.
 
 
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.
Select the Feed and 
 

5) We are going to start building the first View in the app, which will contain the list of articles.
(BACK TO TOP)

 

 

 

  • On the bottom left side of the builder, or The Component Selectorclick on the 'All' button on the 'Blocks' tab to open up the list of all blocks that can be used. Drag an image block from the list of blocks into the area on the right (where the image of the device is) on the right (currently set for an iphone). Drag the image block to anchor to the top of the view.

 

NOTE: As you drag, please notice that the Stack block supports dragging to two different regions: the top of the view and the middle of the view. If you drag it to the top, it will anchor to the top of the view, setting the image to a Fixed Height (with the default value of 50px). If you drag it to the middle of the block, it will anchor to the middle of the view, set the image to a Flexible Height, and expand both up and down (filling the view with the maximum height). You can change this setting later by editing the Stack block.

 

 

 

  • Right-click on the image block that you just dragged into the view, and choose the 'Edit Image' option.

 

 

  • On the right side of the Builder, or The Component Settings- on the 'Specific' tab- click on the 'Image Source' button.

 

 

  • Browse for and then click on the 'header-times-logo.png' file. Then click on the 'Resize to Fit' radio button in the Scaling Options box. Click on the 'Apply' button to set those selections and close the window. Please note that if you mouse over the image in question, it will show you the full name of the file, as well as the dimensions of the image. The image in question has a height of 88px.

 

 

  • At the bottom left of the The Component Settings pane, click on the 'Update' button. This will update the block and show you an accurate representation of the image block.

 

 

  • Right-click on the image and choose 'Length Setting'

 

 

  • Click on the text field (currently it says 50) to edit the text.

 

 

  • Replace the 50 value with 44 and hit Apply. NOTE: In the step before this, we noted that the Header image had a height of 88px. However, this is a hi-rez image. The builder uses low-rez values since the apps can be installed on both high and low resolution devices. By dividing 88px by 2, we get the low resolution value of 44 pixels.

 

 

  • On the bottom left side of the builder, in The Component Selector, click on the 'All' button (on the Blocks tab) to open up the list of all blocks that can be used. Drag a List block from the left into the area where the image of the device is (on the right, currently set for an iPhone). Drag the image block to the middle of the view to give it a flexible height, thus taking up the rest of the height in the view.

 

 

  • Right-click on the list block and choose 'Edit List'.

 

 

  • On the right side of the builder, in The Component Settings on the 'Specific' tab of the List block, click on the Data Source drop-down menu and choose the name of the Data Source (the one you created in Step 2). In my example, the data source is named "My RSS Feed".
  • Click on the text area of Row height and enter a value of 100.

 

 

  • Click on the box next to 'Row Background Image' to browse for an image in the Media Folder. Choose the image entitled 'background-row.jpg', click the 'Resize to Fill' radio button, and click Apply. This will add a decorative image behind each item in the list of articles.

 

 

  • Scroll down to the Items section. For '#1' Item, click on the drop-down and choose "title".

 

 

  • Click on the text area for 'Set Max Lines'. Enter a value of  1 and hit apply. This will truncate the title and show an ellipsis if it contains more than one line of text.

 

  • Set Font to a custom size by clicking on the Font text area, and then clicking the last radio button on the left. Choose Arial 14 Bold with a color of #000000 (black). Hit Apply to set the text to that style.

 

 

  • For '#2' Item, click on the drop-down and choose "description".
  • Set 'Max Lines' of item 2 to a value of 3, which will allow three lines of text (before showing an ellipsis and truncating any additional text).
  • Specify a custom font style of Arial 14 Normal #222222 (a dark grey).

 

 

  • Click on the text area to the right of 'Image Margin' and change the value to 10. Click on 'Left Image', which will bring up a text area, and delete the pre-populated value (currently set for dummy.png). We want to use the URL value from out of the RSS feed which will look like this: [[ds:/My RSS Feed/item/url]]. To generate this value automatically, click on the name of the Data Source we created (My RSS Feed) on the left list and choose the "url" data descriptor from the list on the right. This will automatically add the [[ds:/My RSS Feed/item/url]] value into the bottom text area. Click Apply to leave the Edit Value window.

 

 

 

 

  • Hit Update on the bottom of the left column to save all the List block’s settings.

 

 

6) Create the second view for the Article Detail pages
(BACK TO TOP)

 

  • Click on 'New View' at the top of the builder

 

 

  • 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.

 

 

  • Click the "Edit" button at the top of the builder to edit the view.

 

 

 

 

  • Click on the little white box to the right of the 'Fill Color' text field. Click on the white color at the bottom right of the pop-up window, and then hit Apply. This will make the background color of the view white.

 

 

  • Click the Update button at the bottom to lock in the changes to the 'Edit Article (View)' window.

 

 

  • On the bottom left side of the builder, in The Component Selector, click on the 'All' button (on the Blocks tab) to open up the list of all blocks that can be used. We are going to drag four blocks from this list into the area where the image of the device is (on the right, currently set for an iphone). One at a time, drag three image blocks and two text blocks from the left column into the App View. The first text block will be used for the header, and the second text block will be used for the article’s body text, while the first image block will be used as the back button (to navigate back to the other view), the second image block will be used for the article’s image, and the third image block will be used for the blank title bar background image.

 

 

  • Right-click on one of the image blocks and choose 'Edit Image'.

 

 

 

 

  • Choose the 'button-back.png' image from the Media Folder and click the 'Resize to Fit' radio button, then click Apply. Note that when you mouse over the image, it shows you that the image's hi-rez dimensions are 126px wide by 60px tall.

 

 

  • Click the Update button at the bottom-left column of the Image block’s settings.

 

  • Right-click on the Back image block and choose 'Size and Position'.

 

 

  • In the 'Width' text field, replace the default value (100) with the low-resolution width of the image we chose -- in our example, 63. NOTE: In the step before this, we noted that the Back button image had a height of 126px. However, this is a hi-rez image. The builder uses low-rez values, since the apps can be installed on both high and low resolution devices. By dividing 126px by 2, we get the low-resolution value of 63 pixels.

 

 

  • In the 'Height' text field, replace the default value of 80 with the low-resolution height of the image -- in our example, 30. Again, the high-resolution height is 60px, which we divide by 2, arriving at 30px as the low-rez height.

 

  • In the 'Edge Constraint' section, replace the values for the Top and Left to both have values of 7px. NOTE: The Header image has a height of 88px, and the Back image has a height of 60px. We want the Header image to be vertically centered in the header, so we can subtract the height of the Header (88px) from the height of the Back button (60px) to get a value of 28px remaining high-resolution pixels. We can divide that number in two to determine how much we want to push the image down ñ in this case, 14 high-resolution pixels. Since the builder uses low-resolution values, we divide that number in two, arriving at 7px, which we use for the top and left Edge Constraints.

 

  • Right-click on another image block and choose 'Edit Image'.

 

 

  • In the Component Settings, click on the box to the right of Image Source to browse for an image.

 

 

  • Choose the 'header_blank.jpg' image from the Media Folder and click the 'Resize to Fit' radio button, then click Apply. Note that when you mouse over the image, it shows you that the image's hi-rez dimensions are 640px wide by 88px tall.

 

 

  • Click the Update button at the bottom-left column of the Image block’s settings.

 

  • Right-click on the blank header image block and choose 'Size and Position'.

 

 

  • In the 'Width' text field, enter a value of 320.

 

 

  • In the 'Height' text field, enter a value of 44.

 

  • In the 'Edge Constraint' section, replace the values for the Top and Left to both have values of 0px, which will anchor the image to the top-left of the view. NOTE: The visual editor is very flexible for laying out blocks. In this tutorial (for simplicity) you are being told the values to enter into each block, but while the Size and Position palette is open, you can click and drag on items to change a blocks position and size. This is done by clicking and dragging on the inside or the edges of a block. The values in the Size and Position palette change in real time for you to see as they update.

 

  • Right-click on the blank header image block and choose 'Send To Back'

 

 

  • Right-click on one of the text blocks and choose 'Edit Text'.

 

  • Click on the 'Text' field, and in the pop-up window, delete the default value. In the left column, click on 'My RSS Feed' to select the RSS feed. Then, in the right column, click on 'title'. This will automatically enter [[ds:/My RSS Feed/item/title]] in the bottom text field. Hit apply.

 

 

  • Set the font to a custom size by clicking on the Font text area, and then clicking the last radio button on the left. Choose Arial 14 Bold with a color of #000000 (black). Hit Apply to set the text to that style.

 

 

 

  • Right-click on the title Text block and choose 'Size and Position'. Enter a value of 230 for the Width, and a value of 56 for the Height. Under 'Edge Constraints', enter 48 for the Top constraint, and 10 for the Left constraint.

 

 

  • Right-click on the last unused Image block and choose 'Edit Image'.

 

 

 

  • On the left of the pop up window, click on  Data Source.

 

 

  • Choose 'My RSS Feed' from the left column and 'URL' on the right column, which will enter in a value of [[ds:/My RSS Feed/item/url]] into the text field. Click on the 'Resize to Fill' radio button to make the image scale to the size of the box, filling both the height and width. Hit Apply to exit the pop-up window, then hit Update at the bottom of the Image block.

 

 

  • Right-click on the Article Image block and choose 'Size and Position'. Enter a value of 72 for the Width and 54 for the Height, and in the Edge Constraints, enter 46 for the Top  and 2 for the Right constraints.

 

 

  • Right-click on the last unused Text block and choose 'Edit Text'.

 

 

  • Click on the Text Field, then delete the default value in the pop-up window. In the left column, click on 'My RSS Feed', then in the right column, click on 'title' to enter [[ds:/My RSS Feed/item/description]] into the bottom text field. Hit apply.

 

 

  • Set the font to a custom size by clicking on the 'Font' text area, and then clicking the last radio button on the left. Choose Arial 14 Normal with a color of #222222 (dark grey). Hit Apply to set the text to that style.

 

  • Set 'Alignment' to Left and 'Vertical Alignment' to Top.

 

  • Under 'Max Lines', delete the value so that the text won’t truncate or add an ellipsis.

 

 

 

  • Right-click on the title Text block and choose 'Size and Position'. In the Edge Constraints, enter 110 for the Top, 10 for the Left, 10 for the Right, and 0 for the bottom. NOTE: By leaving the height value blank and adding a Top and Bottom constraint, the Canvas block will give the Text block a flexible height. (Similarly, it will give a flexible width if you leave the width value blank and add a left and right constraint).

 

 

7) Tap actions will be added to both views so that the user can navigate from one view to the other.
(BACK TO TOP)

 

  • Right-click on the Back Image (in the Article View) and choose 'Edit Image'. Next, click on the Events tab on the right side of the Image settings column in The Component Settings.

 

 

  • Click on the pencil icon to the right of the word Tap to edit the Tap actions.

 

 

  • Click on the 'Actions' button at the bottom left of the pop-up window. From there, click on 'Navigation' and then click on 'Switch to Another View'.

 

 

  • In the 'Switch to Another View' window on the right side, choose 'First' from the View drop down menu, 'Clear History' from the History drop down menu, and 'Push from Left' from the Transitions drop down menu. Then hit Add, which will add the tap action to the list of tap actions on the left. NOTE: you can add as many actions as you need to this list.

 

 

  • Click Apply to set the tap actions and close the pop-up window. Then click Update at the bottom of the right column of the List view.

 

 

 

  • When that is done loading, right-click on the List block. At the top-right of the List block settings, click on the Events Tab (at the top of the column).

 

 

  • Click on the pencil icon to the right of the word Tap to edit the Tap actions.

 

  • Click on the 'Actions' button at the bottom-left of the pop-up window. From there, click on 'Navigation', then click on 'Switch to Another View'.

 

 

  • In the 'Switch to Another View' window on the right side, choose 'Article' from the View drop-down menu, 'Add to History' from the History drop-down menu, and 'Push from Right' from the Transitions drop-down menu. Then hit Add, which will add the tap action to the list of tap actions on the left. NOTE: you can add as many actions as you need to this list.

 

 

  • Click Apply to set the tap actions and close the pop-up window. Then click Update at the bottom of the right column of the List view.

 

8) The app is now built! Generate a build and install it on your device.
(BACK TO TOP)

 

  • At the top of the builder, choose the 'Generate' button.

 

 

 

  • You will see a pop-up alert message, letting you know that it will take a few minutes to generate your build. When you are ready to view the build, click on 'Build History' at the top of the builder, which will contain instructions for installing and viewing the app.

 

 

‚Äč

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets1.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete