Launch the application as introduced in the first chapter: MyNewsProject/Sequences/MobileApplication/PLatforms – Double-click on Application. This process will build exactly what you have when you run the application on your mobile devices. Each time you modify the application, the result will appear immediately in the viewer.
For notice, In the Projects panel, we can see that the object and sub-object are sorted by tree map. For example, in Application/Page we have Header, Content, and Footer. In Header, we have Navigation Bar, containing Bar Title, Buttons, etc. Double-click on those objects to show where they are on the viewer screen on the right. Or you can make any object disappeared by right-clicking on the object then Disable it. The disabled objects will turn to red color.
Now, let’s modify the display name on the screen by filling the Text Value (1.1 – 1.3)The mobile palette panel allows adding any new objects to the application. For example, you want to have a button in your content. Just drag-drop the Button icon in the mobile palette to the Content object (2)
After building for 1 second, the button will appear in the viewer as a blank button. Of course, we need a text for it, so drag a Text icon in the mobile palette to the Button object (1). By default, it is marked « SOME TEXT ». To modify it, just type in the Text value in the Properties. (2)
You can also customize your button in the Properties of the Button Object. For example, we want to have a long-blocked buttons o I looked into the Properties/Attributes/Shape and set the value as a block. There are plenty of options for you to choose.
Now we have a button, and we want that when we click the button, it will show up the news that we have generated in part 1. To do this, add an Event from Mobile Palette to the Button Object. (1) Open Button/Controls folder, we can see the event onClick with the lightning bolt icon. This means the event will trigger when we click the button.
Now we need to add a CallSequence from the Mobile Palette to this Event Object. (2). An object “call ?” appears, click on it (3) to show its properties, then choose the target (4). A window appears, choose ReadDataForNews which we created before, then click Ok.
By now the Studio will work with codes to call the data, it twill take about 1 minute. Remember to save the project regularly!
When it finishes, we will try if it works. Click the button Click for News (1), if the elements in the Iterator Object blink for some seconds (2), that means it succeed to call the data.
To display the news, now we get to have a list of item. From the mobile palette, add a List to the Content Object (1). A List object appears, then add to it a List Item (2).
Now the ListItem must be repeated for each item on the list, so we need a component calling Directive. Add the Directive to the List, then put the ListItem inside the If object.
In the If properties, change the Directive type to ForEach, then click the button SC (meaning Source Definition) in the Directive source.
Click on the « … » button to select sources. A window shows up. Check the ReadDataForNews, and it twill shows items on the right column. Click and expand the NewsItem then we will see the elements that we have created. Click Ok.
Now we will build the interface for each news. Add an H1 to the ListItem to have a heading (1), then add Text to the Heading (2). For the text value, we want to have the title of the news. In the Text Value, choose SC then click « … » to select the source.
When the window appears, we see ReadDataForNews. This time we don’t want this whole sequence but my own iteration. So click the Iterator icon to switch to Iteration (1). Check ForEach (2), then choose the Title. Click Ok.
Do the same for description: add a Paragraph from Mobile Palette to ListItem, add Text to Paragraphe, then change the Text value source, this time choose Description instead of Title.
Until now if we click the button, the news will work but we can partly see the title/description. So they must be « wrap ». To do this, add Text format to the ListItem and put the Heading and Paragraph into the TextFormat. And the result will be like the picture below.
Now we just have to add thumbnails for the news. Drag Image from Mobile Palette to ListItem, and make it on top (above TextFormat). In Properties, find the line src and again, switch to SC and choose the source. Switch to Iterator, choose ImageUrl then click Ok
Finally, when we click the button (don’t forget to save the project first) we will receive the interface as below. (1)To export the application to a file that can run on your device, expand Platforms Folder (2). We have all the platforms for you to choose, from Android and iOS for your smartphone to Windows 8 and 10… For example, to export to a .apk file for your Android device, right-click android/Cordova/Run on Device. Then Convertigo Studio will build it.
Thank you for reading and see you in our next tutorial!
