CONVERTIGO STUDIO lesson 3: Get News App (Part 2)

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)

Pic 13

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)

Pic 14

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.

Pic 15

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.

Pic 16

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.

Pic 17

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

Pic 18

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.

Pic 19

In the If properties, change the Directive type to ForEach, then click the button SC (meaning Source Definition) in the Directive source.

Pic 20

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.

Pic 21

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.

Pic 22

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.

Pic 23

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.

Pic 24

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

Pic 25

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.

Pic 26

Thank you for reading and see you in our next tutorial!

Back to post list ...