NEWS 2: An App using Reveal Layout (Burger UI)
Ads every N List Items...
Introduction
This Base App is here to help you quickly develop a News App with a 'Burger UI'.
It essentially uses the Reveal Layout along with some List Block.
The Premium NEWS 2 App uses a Pattern instead of a List.
The Pattern allows you to fully customize the individual List items.
walks you through the basics of how to use the Reveal Layout to create the classic 'Burger' menu.
It also shows how to show an ad every N item in a list of headline news for example.
NEWS 2 uses standard RSS feeds, in our example the public ABC feeds.
Install the Base App
'NEWS 2' is a working example.
Go to the Dashboard.
Under 'Base App' select NEWS 2'
We strongly suggest to follow the Reveal Layout Tutorial to familiarize yourself with this Layout.
This app also makes heavy use of MyBlock (Custom Blocks). We strongly recommend you to get familiar with this very powerful concept.
Preview your app
Preview your app on screen using HTML5 rendering.
It will give you a good sense of the app flow.
1. Main View
Main View holds the Reveal Layout which contains a Top and Bottom Layout.
In this App, the Bottom Layout contains the articles lists displayed in the app.
These Lists are displayed in a MyBlock Canvas called 'Main Reveal Bottom - Canvas' . We used a Canvas because it allowed us to show a Title on Top (the 'Entertainment' you see on the screenshot herein).
The Top Layout or our Reveal is another MyBlock Layout called 'Main Reveal Top - Menu Stack'. Per its name, we used a Stack Layout to pile up the different menu options: Top Stories, World News, Entertainment, ...
Reveal Configuration
EachScape Studio shows you the 2 states.
The 'Reveal Toggle Action' toggle the layout to show you the 2 different states.
That's pretty much everything there is to konw about Reveal.
It contains 2 layout (Top and Bottom) and you can toggle it with a 'Reveal Toggle' action which gives the 'burger menu' user experience.
The Studio lets you see the 2 States.
The number you see in this example on the left side of the Reveal (what we call Top Bloc) are the number of points at Initial state and at Toggled state the Top layout will have move.
In our case: - 250 (hidden from view) And + 250 showing the entire - otherwise hidden - Top Layout
TOGGLED State of Reveal Layout
Reveal Toggle Action
At the top left of the Home View is an image block with the classic 'Burger' Icon.
We use this image as a Button to call the Reveal Toggle Action.
We also use the Reveal Toggle Action when a user select a news category to remove the news category selection from the screen : essentially toggling the Tope Layout back.
The amount of points the Reveal will move the Top Layout is defined in the studio (in our case - 250 to 250 which is the width of the list of news category i.e. the Stack in which they are listed). That means the Reveal Toggle Action doesn't need any information as to what the move is it simply toggles in between the 2 states.
App Structure
This app make use of MyBlock (Custom Blocks)
MyBlocks are easy to reuse, manipulate, update and so forth.
You access them through the MyBlock icons on the left side of the Studio:
The numbers in front of these Custom Block indicates in which View or Layout a block is used.
1. Main Reveal is the core Layout of this app, display in the '1.Main View' view.
it contains:
1.1. Main Reveal Top - Menu Stack : Which is the left hand side Stack layout containing the different News categories. It is hidden when the app starts and is brought up through the 'toggle Reveal' action.
1.2 Main Reveal Bottom - Canvas: Is the Canvas layout in the Bottom part of hte Reveal Block. It contains the section title and a container itself containing the respective Lists Block listing the headlines from each category.
A Container is a very simple block. It's sole purpose is to hold other blocks. It has an initial block that it contains but then the Container block can change what content is inside it by using a Set Container action. This app could have had different views and had different layouts for each view that contained different headline Lists. This would have been very easy to accomplish, but it makes a much cleaner app to instead have one container and set it with a different pattern block for each menu item.
Click here for information about the Container block.
Each time a user select a news category in the Top Reveal Layout, we put the matching List into the Container.
Set a Variable
At any time you can set a variable using the Set Variable action.
Just specify the name of the variable and define it's value. So for instance each time the app was launched you could add one to a variable called totalLaunches and on the fifth launch of the app you could show an alert popup that invited the user to rate your app on the App Store. In this app however we are saving the URL of the Article on the ABC website to a variable which we are calling link. In the next step we use this variable in our HTML block in the Article Detail view.
Detail View - HTML Block
Just like the Home View we could have had 5 different views each with a different List. But to make the app cleaner we chose to have one HTML View. On the Article Detail view we use the same concept. Instead of having five different Article Detail views each with a different URL for each section, it was much easier (and cleaner) to just have one view which uses a Variable as the URL for the HTML block. If you edit the HTML block you will see that the only setting on the Specific tab is the URL of the block which is configured with a value of [[var:link]]. This block will look at what the value of that variable is and if it is a valid URL it will make use the HTML source from that URL as the source of this HTML view within your app.
Click here for information about the Configuring an HTML block to use a URL.
Dependencies
This app use a feature called 'Dependencies' to prepare feeds before usage.
Dependencies runs a feed ahead of use to make sure a Current Record exist and all the fields are instantiated.
To run a feed just add a pointed to any field of that feed in the 'Dependency' section of the 'General' tab of the Block / Layout configurator.
