ListViews with CompCreator

INTRO

The arrival of dynamic component extensions on the AI2 scene has revolutionised the way in which we can display data and code our apps.  The recent update by KevinKun for CompCreator re-energised me in the use of dynamic components, and extreme example being the Dynamic Table. I thought it may be useful to show some simpler examples, based around replicating the in-built listview component (which, in its latest incarnation is, to say the least, a bit buggy). I have a preference to CompCreator over the mighty extension provided by Yusifchan due to its simplicity (4 blocks) - but this can be misleading, because CompCreator is just as powerful.

I have found it easiest to use local variables to create components and set their properties, and then to capture the components created in global variables as a list, these can then be used to return the containing data when selected. You will see in my blocks where global variables are used to capture components into a list.

You can also create procedures to set a dictionary of properties to apply to components in order to streamline your blocks and development.

Aside from the CompCreator extension, I have also used Ken's ClickEvent, Sunny's RoundedCorners and my own ImgNotifier extensions for display and data return.

Let us make a start with a plain listview, using a csv row of items...

Dynamic Plain ListView

AIA

The blocks start with the Click event. All "rows" are registered as clickable with the extension, and when selected the inner row is highlighted and the data content is returned to a label.

When the listview is generated on the button click, we first clear any previously generated listview, then create the "outer" vertical scroll arrangement. Then, using the csv row as an AI2 list, we iterate over this list generating the horizontal container and the label which holds the data from the list item. A label is also generated to create the line between items. you will see that we capture the components for the horizontal arrangements and labels in global lists for use in data return

Dynamic ListView with an Image, MainText and SubText

AIA

This replicates the latest view available in the listview component

The click event is now returning all the data present to the image notifier (this is used just to show how we get the data back from the listview). You can see how each horizontal arrangement is registered in the dynamic build.

The image files are stored in the application specific directory (ASD) in a folder: /zipFileAI2/images, and I use the File component and a procedure to locate the ASD. This same method is used to display the images in the listview. You can store the images as you please....

I have added a vertical arrangement to hold the two labels which display the text, and spacers are used to better shape and display the content

Dynamic Card Style View

AIA

In AI2 we do not have a cardview component, therefore we can create a similar look by adding rounded corners to the horizontal arrangement and changing the colour scheme.

Dynamic Card Style Horizontal

AIA

It is also possible to use the horizontal scroll arrangement to display your list horizontally, a vertical arrangement is added as the "outer" to accommodate a top and bottom spacer for display purposes.

VIDEO

RESOURCES

I mentioned in the Intro the ability to create procedures to set the properties of a component. Here is an example that sets the default properties for any arrangement, and the procedure that handles this:

You will often find that when you need to set values to Text or Image you cannot set the properties this way, and you will need to set these individually in order to be able to access the content provided via the lists.

Here are the images used in the examples:
Image Files Zip

SUMMARY

Hopefully, these examples provide a suitable introduction for how you can use CompCreator in your aia projects. If you have any suggestions or requests for other approaches, then please let me know in the contact form, or via the AI2 community