Nativescript and List View

I have taken a long break from writing. Not that I didn’t have anything to write, but just needed to break. Now that I am back to writing, the article I have for today is about NativeScript. NativeScript is a Abstraction to allow you to write javascript and have that code compile down to an IOS device. What I have been working on how to use a List View.

I have been working on making my blog into a mobile app. Nothing I am publishing, but it would be cool to see how it could be done. What would be awesome is if I could write it once and have it work on IOS and Android. So, that is where NativeScript came in. It has been really easy to work with the UI tools, because they are all XML based. For Example:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="latestPageLoaded">
  <DockLayout stretchLastChild="true">
    <ListView dock="top" items="" itemTap="detail">
	    <ListView.itemTemplate>
            <GridLayout columns="*, auto" rows="auto, *" >
               <Button   row="0" col="1" text="+" tap="hideSummary" visibility="" />
  	           <Label    row="0" col="0" text="" height="50" />
               <TextView row="1" col="0" colSpan="2" text=""
                         wordWrap="true" id="summary" visibility="" />
            </GridLayout>
	    </ListView.itemTemplate>
    </ListView>
  </DockLayout>
</Page>

The neat thing about this is that it describes BOTH ios and Android. So, what does it do? It shows a list of articles. The biggest feature of this is that it will
allow you to click a row and expand details on it. How that is accomplished is by looking at the ListView tag. There is an attribute called itemTap, this will trigger a function that will make the details show up.

exports.detail = function(args) {
	var item = args.view;
	var index = args.index;
	articles.getItem(args.index).showDetails = !articles.getItem(args.index).showDetails;
	item.parent.refresh();
}

So this code shows that we get some information from the args. Args is an object that represents the tag object in code that called that function. In our case that would be the list view row object. We find out the index that was changed, but we dont modify the object, instead we modify what is called an observable. An observable keeps track when data is updated, then updates the UI. So in our case we have an array of articles that are observables. We would like to update the index in articles so that showDetails hides and shows certain controls. If we look back at the xml, it is the button and textview. That is because the button is to link to the full article, and the textview is to show the summary in the row, if the user clicks on it.

The reason I talk about this is because originally, I wanted to have a link that would expand the row. Unfortunately, that link could easily know what index it was. The index is important because we have to update our observables, and not the object in the XML. After I learned that lesson, I remembered that I am in a MVVM type of environment and that means that articles observable is the way to not only load data, but also change the view (the view model). Anyways, if you want to see the code, I have it on Github at node.blog.mobile