Skip to content

docs: simplified list-view getting started #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NickIliev merged 1 commit into from
Aug 22, 2018
Merged

docs: simplified list-view getting started #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions app/ns-ui-widgets-category/list-view/basics/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,24 @@ The example demonstrates how to set a `ListView` component in XML page and how t
In the sample is shown how to define custom UI while using ListView's `itemTemplate`.

<snippet id='list-view-create-xml'/>

<snippet id='list-view-create-code'/>

<snippet id='list-view-array'/>
> Note: Note, that changing the array after the list view is shown will not update the UI. You can force-update the UI using the refresh() method.
> **Note:** The ListView's item template can contain only a single root view container.

In the example above, the items source property (`myTitles`) is an array and its members are not observable objects. This means that adding or removing array member won't trigger a property change. To update the UI, you will need to explicitly refresh the listview after an item is added or removed while using the `refresh` method.
<snippet id='list-view-refresh'/>

> **Tip:** Instead of manually triggering the UI update with the help of ListView's `refresh` method, NativeScript provides the `ObservableArray`. Using an `ObservableArray` for your listview's items surce will make its members an observable objects and adding/removing an array item will automatically update the UI.
```TypeScript
const ObservableArray = require("tns-core-modules/data/observable-array").ObservableArray;
// Change the items source from Array to the NativeScript's ObservableArray
const titlesArray = new ObservableArray([
{ title: "The Da Vinci Code" },
{ title: "Harry Potter and the Chamber of Secrets" },
{ title: "The Alchemist" },
{ title: "The Godfather" },
{ title: "Goodnight Moon" },
{ title: "The Hobbit" }
]);
```

<snippet id='list-view-observable-array'/>
> Note: When using ObservableArray the list view will be automatically updated when items are added or removed form the array.
91 changes: 27 additions & 64 deletions app/ns-ui-widgets-category/list-view/basics/basics-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,42 @@
const observableModule = require("tns-core-modules/data/observable");
const observableArrayModule = require("tns-core-modules/data/observable-array");
const dialogs = require("tns-core-modules/ui/dialogs");
// >> list-view-create-code
const colors = ["red", "green", "blue"];
const secondArray = new observableArrayModule.ObservableArray(
[
{
title:"The Da Vinci Code"
},
{
title:"Harry Potter and the Chamber of Secrets"
},
{
title:"The Alchemist"
},
{
title:"The Godfather"
},
{
title:"Goodnight Moon"
},
{
title:"The Hobbit"
}
]);
const Observable = require("tns-core-modules/data/observable").Observable;
const titlesArray = [
{ title: "The Da Vinci Code" },
{ title: "Harry Potter and the Chamber of Secrets" },
{ title: "The Alchemist" },
{ title: "The Godfather" },
{ title: "Goodnight Moon" },
{ title: "The Hobbit" }
];

function onNavigatingTo(args) {
const page = args.object;
const vm = new observableModule.Observable();
const vm = new Observable();

vm.set("myItems", colors);
vm.set("mySecondItems", secondArray);
// Setting the listview binding source
vm.set("myTitles", titlesArray);

page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;

function onItemTap(args) {
const index = args.index;
console.log(`Second ListView item tap ${index}`);
}
exports.onItemTap = onItemTap;
// << list-view-create-code

function onTap(args) {
const page = args.object.page;
const listView = page.getViewById("firstListView");
// >> list-view-array
colors.push("yellow");
// Manually trigger the update so that the new color is shown.
listView.refresh();
// << list-view-array
}
// >> list-view-refresh
const listView = page.getViewById("listView");

function onSecondTap(args) {
// >> list-view-observable-array
secondArray.push(
{
title:"Alice's Adventures in Wonderland"
}
);
// The ListView will be updated automatically.
// << list-view-observable-array
}

function listViewItemTap(args) {
const index = args.index;
dialogs.alert(`ListView item tap ${index}`)
.then(() => {
console.log("Dialog closed!");
});
}
titlesArray.push({ title: "Game of Thrones" });
// Manually trigger the update so that the new color is shown.
listView.refresh();
// << list-view-refresh

function secondListViewItemTap(args) {
const index = args.index;
dialogs.alert(`Second ListView item tap ${index}`)
.then(() => {
console.log("Dialog closed!");
});
}

exports.onNavigatingTo = onNavigatingTo;
exports.onTap = onTap;
exports.onSecondTap = onSecondTap;
exports.listViewItemTap = listViewItemTap;
exports.secondListViewItemTap = secondListViewItemTap;

13 changes: 5 additions & 8 deletions app/ns-ui-widgets-category/list-view/basics/basics-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,18 @@
<ActionBar title="Getting Started"/>
</Page.actionBar>

<GridLayout rows="50 50 * 50 50 *">
<!-- >> list-view-create-xml -->
<GridLayout rows="50 50 *">
<Label row="0" text="Binding the ListView items property to collection" textWrap="true" />
<Button row="1" text="Add new item" tap="onTap" />
<ListView row="2" id="firstListView" items="{{ myItems }}" itemTap="listViewItemTap" class="list-group" />
<Label row="3" text="Define the ListView itemTemplate property" textWrap="true" />
<Button row="4" text="Add new item (Second ListView)" tap="onSecondTap" />
<ListView row="5" items="{{ mySecondItems }}" itemTap="secondListViewItemTap" class="list-group">
<!-- >> list-view-create-xml -->
<ListView row="5" items="{{ myTitles }}" itemTap="onItemTap" class="list-group">
<ListView.itemTemplate>
<!-- The item template can only have a single root view container (e.g. GriLayout, StackLayout, etc.)-->
<StackLayout class="list-group-item">
<Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
</StackLayout>
</ListView.itemTemplate>
</ListView>

</ListView>
<!-- << list-view-create-xml -->
</GridLayout>
</Page>
55 changes: 21 additions & 34 deletions app/ns-ui-widgets-category/list-view/code-behind/code-behind-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,47 @@
// >> require-list-view
const listViewModule = require("tns-core-modules/ui/list-view");
const listViewModule = require("tns-core-modules/ui/list-view");
// << require-list-view
const dialogs = require("tns-core-modules/ui/dialogs");
const labelModule = require("tns-core-modules/ui/label");
const observableArrayModule = require("tns-core-modules/data/observable-array");
const Label = require("tns-core-modules/ui/label").Label;
const ObservableArray = require("tns-core-modules/data/observable-array").ObservableArray;

const listViewArray = new observableArrayModule.ObservableArray(
[
{
title:"The Da Vinci Code"
},
{
title:"Harry Potter and the Chamber of Secrets"
},
{
title:"The Alchemist"
},
{
title:"The Godfather"
},
{
title:"Goodnight Moon"
},
{
title:"The Hobbit"
}
]);
const listViewArray = new ObservableArray([
{ title: "The Da Vinci Code" },
{ title: "Harry Potter and the Chamber of Secrets" },
{ title: "The Alchemist" },
{ title: "The Godfather" },
{ title: "Goodnight Moon" },
{ title: "The Hobbit" }
]);

function onNavigatingTo(args) {
const page = args.object;
const container = page.getViewById("container");
// >> create-list-view-code
const container = page.getViewById("container");

const listView = new listViewModule.ListView();
listView.className = "list-group";
listView.items = listViewArray;
// The itemLoading event is used to create the UI for each item that is shown in the ListView.
listView.on(listViewModule.ListView.itemLoadingEvent, (args) => {
if (!args.view) {
// Create label if it is not already created.
args.view = new labelModule.Label();
args.view = new Label();
args.view.className = "list-group-item";
}
(args.view).text = listViewArray.getItem(args.index).title;

});
listView.on(listViewModule.ListView.itemTapEvent, (args) => {
// getting the index of the selected item
const tappedItemIndex = args.index;
// getting the view of the selected ListVies's item
// let tappedItemView = args.view;
dialogs.alert(`Second ListView item tap ${tappedItemIndex}`)
.then(() => {
console.log("Dialog closed!");
});
const tappedItemView = args.view;
dialogs.alert(`Index: ${tappedItemIndex} View: ${tappedItemView}`)
.then(() => {
console.log("Dialog closed!");
});
});
// << create-list-view-code

container.addChild(listView);
// << create-list-view-code
}
exports.onNavigatingTo = onNavigatingTo;
1 change: 0 additions & 1 deletion app/ns-ui-widgets-category/list-view/events/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
In the example is shown how to set up `itemTap` and `loadMoreItems` events as well as how to set up the needed callback methods in the Code-Behind.

<snippet id='list-view-events-xml'/>

<snippet id='list-view-events'/>