Skip to end of metadata
Go to start of metadata

Demonstrates a widget using another widget.

App Folder Location

alloy/test/apps/widgets/complex

The application defines two widgets: com.testing.searchForBooks and com.appcelerator.loading. As their names imply, the first widget provides UI and logic to search for books by title (using the Google Books API) , while the second widget displays a loading indicator while the search is in progress.

App directory structure

The application's main index.xml view includes the searchForBooks widget and a <Table/> element to display search results.

app/views/index.ml

The searchForBooks widget includes a TextField where the user enters the search term, an ImageView that displays a search icon, and a <Require/> element that includes the loading widget. 

app/widgets/com.testing.searchForBooks/views/widget.xml
Icon

A <Require/> element whose type attribute is set to "widget", as above, is equivalent to a <Widget/> element.

The loading widget contains an ImageView whose images property is set to an array of images in the widget's TSS file. Initially, the loading widget's opacity property is set to 0 by the loading widget's TSS file so that it's not visible. Once the user initiates the search, the search icon's opacity is set to 0, and the loading widget's opacity is set to 1, making it visible.