Today we met with a professional software development team at our Tech Center in Bochum. They demonstrated their upcoming BlackBerry 10 application and we discussed some troubling issues they are having. So we quickly built two small sample applications, which you can download here. Inside the archive zip file, which is easy to import into Momentics as existing projects, you will find the projects ListItemLayouts and Lesson3OnlineJson.
ListItemLayouts is based on the default template for ListView projects, but with a custom ListItem Component. The new ListItem contains three rows, each row has text aligned on the left and right side of the screen. Also each line uses different layouts: first row uses DockLayout, if the text of the Label on the left is too long the labels might overlap; second row uses StackLayout and with spaceQuota, so that overlapping is suppressed; the third row is based on the second row, but with different spaceQuota values and multiline set to true. View pictures below to see the behaviour of these layouts.
Lesson3OnlineJson is an application which loads a JSON file from the web which also contains URIs to images, these images are also loaded from a remote web address. We added new dummy objects to the JSON file, to see how to bind data from nested JSON objects with our ListItems. In the end it was quite easy in QML by using the following statement:
Label {
text: ListItemData.array[0].myString
}
This binds the string ‘myString’ of an object within an array at position 0 to a Label in our ListItemComponent.
The image loading is based on the ‘TL;DR‘ sample application which shows how to implement worker threads for tasks. Another helpful sample is ‘Stamp Collector‘ for populating a list with JSON data. Find an overview of all official sample apps here.
