Exercise (Video): Advanced Lists Using Telerik Progress NativeScript UI ListView

Loading...

From the course by The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

68 оценки

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

68 оценки

Course 4 of 5 in the Specialization Full Stack Web and Multiplatform Mobile App Development

This course focuses on developing truly cross-platform, native iOS and Android apps using NativeScript (Ver 3.x). The framework uses Angular, TypeScript or modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with NativeScript UI and layout support and access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your Angular, TypeScript and Javascript skills, and (c) Use various features of the NativeScript framework to build truly cross-platform mobile applications

From the lesson

NativeScript UI Elements

This module introduces you to various NativeScript UI elements. We will look at how we can make use of these elements in designing the various views of our application.

Advanced Lists Using Telerik Progress NativeScript UI ListView6:06

Exercise (Video): Advanced Lists Using Telerik Progress NativeScript UI ListView54:31

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

In one of the earlier exercises,

we had installed the Telerik Progress NativeScript UI.

And at the point,

I mentioned that the free version supports two UI elements.

The SideDrawer, which we used in the earlier exercise,

and then in advanced ListView which we will make use of in this exercise.

In order to support advanced features of interacting

with a list of items in our application,

we will construct a "My Favorites" view within our application,

where we can display the list of favorite dishes that are chosen by the user,

and then allow us to be able to delete items from "My

Favorites" by using the advanced features of

the Telerik Progress NativeScript UI ListView.

To get started on this exercise,

let's configure our app to make use of the ListView.

Going into app.module.ts file, right in this application,

let me import the NativeScriptUIListViewModule

from nativescript-telerik-ui/listview/angular,

and then add that to the list of imports that I have here.

Let me add the NativeScriptUIListViewModule into my set of imports here.

With this, my app is now configured to make use of the Telerik NativeScriptUIListView.

In order to use this ListView,

now that we have the favorites service,

which tracks the list of favorites for the user,

we should be able to construct another component that allows

the user to view his or her list of favorite dishes.

To do that, let me add another component to my NativeScript application here.

We will add a new component called my favorites.

To do that, add a folder named favorites to our app folder,

and inside the favorites folder,

let me add a file named favorites.component.ts,

then favorites.component.html,

and also favorites.component.css,

where we will store

component-level CSS classes which are used specifically in this component.

Going into the typescript file,

let me start out creating the favorites component.

As you expect, we will import Component, OnInit,

Inject, and ViewChild from @angular/core,

and then import FavoriteService,

obviously because we need to get hold of our favorites, so../services/favorite.service,

and then import the Dish from../shared/dish,

and we will import ListViewEventData and RadListView,

both of these from nativescript-telerik-ui/listview.

These two classes are useful for our application, and then also,

we will import RadListViewComponent.

This is where we need that component from

nativescript-telerik-ui/listview/angular...

and I will also import an ObservableArray that NativeScript supports,

which provides certain ways of

advanced animations within our RadListView,

and so that is why I will also use an ObservableArray.

So this is nothing but an array of observables,

and so we will import this from tns-core-modules/data/observable-array.

You will see me using this observable array in a short while and then let's declare

the component decorator as

you would expect inside the component decorator,

Let me declare the selectors

as app-favorites and moduleId as module.id,

and then templateUrl as./favorites.component.html,

and also let me add

styleUrls here because we have a component level style file here.

So./favorites component.css.

The reason why I created a component level styles

file is because there are some css styles that I specifically

need for this RadListView component that I use in this favorites component.

So let's export the favoritesComponent which implements OnInit.

Inside this favorite's component let me declare favorites which is

a variable of the type ObservableArray<Dish>.

So recall that earlier we used to declared it as

observable dish array and ObservableArray with the Dish

means that it's an array of

Dish type which native script supports and using this ObservableArray,

whenever you add items into

the ObservableArray or delete items from this ObservableArray,

the template view to which this is linked can then react to

changes in this ObservableArray automatically using

certain animations and the RadListView component actually does that.

So when you add items the item will appear into the view and then when you

delete items the item will disappear from the view using certain,

already built-in animations that RadListView supports.

So thats why I am using an ObservableArray here.

You can actually use ObservableArray even in the menu component for example,

and it'll work just fine there.

In addition let me create an error message of the type errMess: string,

and then here I will use the @ViewChild to get access to myListView,

which I'm going to create in

my template file in a short while... a RadListView component,

and with the ID as myListView,

and I want access to this component and

this would be that RadListView component here because I want to be able to react

to certain changes to this component... and in the constructor,

let me inject the FavoriteService.

Sorry. FavoriteService what you need

within this component here and then inject the BaseURL value provider that we

have already declared in

our app module providers.

So in here for this constructor,

I'm not doing anything meaningful inside the constructor

so I'll leave it as an empty constructor there,

and when the favorites component is initialized at

this point I will call the favorite service

and get that favorites because I want to render them in

my RadListView... and so I will say.subscribe when I get that favorites

then I will initialize

this favorites to new ObservableArray.

So this is how you will create

an observable array of favorites that is returned by my get favorites method here.

Notice how we're assigning this.

We'll say new ObservableArray(favorites) here, and of course if it turns out that

the server sends an error message... in that case I will react

by setting this.errMess to errmess.

This is the ngOnInit lifecycle method.

Let me also implement

a deleteFavorite method with the ID of the Dish being supplied.

Now we have a list of items so when you select a particular item

and tried to delete that you will retrieve the ID of the item

and then use it to delete that particular item from my list of favorites.

So I will say this.favorite service,

and you'll recall that we had

the deleteFavorite method already implemented which will take

the ID as a parameter and then we will subscribe there and then in the subscribe,

we will use exactly the same way of reacting to that,

so I'm just going to copy that and then paste that in there.

So that is that delete favorite method there.

So far so good.

You see all the various things things that you would see in a typical component.

Now because we are going to be using the RadListView component...

the RadListView component expects us to implement certain methods here.

So let me declare those methods here, or functions here.

One function that it supports is onCellSwiping,

and this takes a set of arguments, which is ListViewEventData.

Now, how do I know this?

I just read the documentation for the RadListView.

A link to which is provided in your additional resources.

So this method will be called when the cell is swiped.

Also one more method that we need to implement,

or one more function is onSwipeCellStarted,

which also takes or receives

an argument which is ListViewEventData which supplies

some details about the event that just occurred that caused the call to this method,

and also as you expect, this is on SwipeCellStarted,

so when you start swiping in list item this method will be caught.

Another method that can be implemented is

onSwipeCellFinished and as you expect,

this method will be called when the swiping action is completed on that item.

SwipeCellFinished.

Now in addition to react to the different kinds of

swipe... We will implement an onLeftSwipeClick.

So when you do a left swipe,

then the option buttons are revealed and then when you click on an option button in

that list of option buttons that are revealed when you do a left swipe,

then this is where you would react to that left swipe.

So on left swipe click and similarly as you would expect,

you would have onRightSwipeClick,

which also receives the ListViewEventData as a parameter.

So you see that if you do a left to right swipe,

this one will be triggered, a right to left swipe,

this one will be triggered.

And in there, we need to do certain things based upon what is being initiated.

Now how do we set up all these different methods?

In the onSwipe cell swiping method,

what we will do is we'll set up some variables that are

required by our RadListView.

So we'll set up a variable called swipeLimits,

which is supplied as the data property of the arguments.

The ListViewEventData argument that you receive as

the parameter and then currentItemView,

which is the current item that has been swiped and then we'll set up

a current view method and then we will check if(args.data.x >200)

So we need to recognize the amount of swipe that has been done.

So if you need to recognize the amount of swipe that has been done,

then you could use...

So as you see the args.data.x says how

much of the swipe from right to left or left to right have been done.

Inside this method you could react to these swipe events.

Right now I'm not going to do anything there,

but I'm just going to leave the code as such,

then maybe in the future we may want to implement something there.

So we will leave it there.

Similarly in the onSwipeCellStarted,

again we will receive the args,

so we will implement that to retrieve some information.

The swipeLimits and swipeView

which particular item is being swiped there,

and this can be retrieved from the arguments.

Looking at the object there this is another way of retrieving it,

and then so we'll declare a leftItem,

which is the swipeView.

So as you can see swipeView.getViewById('mark-view').

These are views that I'm going to declare in my layout in a short while.

So the right item.

So these two represent the option buttons that I am going to show on

the left and right when I do the left to right and right to left swipe.

So in case I want to react to them.

We can say getViewById.

I'm going to introduce two buttons for

the left swipe and right swipe

as we will see in a short while when we work on the template

and then we look at swipeLimits.left

and we'll say leftItem.getMeasuredWidth().

So we'll look at the width of that button that we have on the left and the right.

Similarly swipeLimits.right,

we will set to rightItem.getMeasuredWidth().

swipeLimits.threshold.

These are some values that I need to set up in order

for me to react to that swipe event.

Here we have set up a few things here

so the maximum left item width and the right item width.

This is set to the width of the buttons.

The option buttons on the left and right side as we will see,

and then we will set the threshold to half of that,

so if you do a swipe which exceeds that limit then you stick

that option button into place so that the option button is visible

to the user and allow the user to interact with that option button.

So that's the reason why we are introducing it.

Now for the onSwipeCellFinished,

I'm not going to do anything there.

Just going to leave it empty because I'm not

handling anything there and onLeftSwipeClick,

I'm just going to recognize the fact that I did a left to right click and so

I'll do console.log('Left swipe click').

Just to recognize the fact that the left to right

swipe was done and the option button was revealed and the button was clicked,

and then I'll say this ListView component...

listViewComponent.listView.notifySwipeToExecuteFinished.

So when we call this notify swipe to execute finished, then at that point,

the option button will be hidden and the list item will be

hidden and the list item will be brought

back into its normal position to hide the option button, which is revealed there.

As you saw in the illustration in the lecture earlier...

So this is what I will do on the left swipe,

but on the right swipe I will reveal the button,

and then at that point I'm going to call the deleteFavorite method and

then based on args.object.bindingContext.id.

So this value is the one that reveals the ID of

the item and which is the ID off that particular item in

the ListView that I am swiping so I'm going

to use that as a way of specifying which item I need to

delete from my list of items and that

I will say

this.listViewComponent.listView.notifySwipeToExecuteFinished.

Meaning that I have completed doing that.

So this particular call to the deleteFavorite here with this argument

tells me that I need to delete that particular item from my list of favorites and that

is handled by the deleteFavorite method that we have implemented here.

Well the parameter is the ID of

the particular item that needs to be deleted from my favorites.

By the way I should be making this a subpage of the drawer page.

Totally forgot about this because I need to be able to access

the drawer and be able to initiate actions of the drawer.

So we'll see FavoritesComponent

extends DrawerPage and implements on it,

and right here when I import the DrawerPage and I need to include

the change detector reference and then inject

the changeDetectorRef in here,

and then I will do super(changeDetectorRef) here.

I need to call that drop each year so don't forget to do that.

And they're not going into their favorite component.

Let me go to the menu component and copy out a few things from the menu component.

This part is going to be common here so let me copy that from

the menu component and then go to the favorite component and

paste it in there because I need the RadSideDrawer into place there,

and then this one would be My Favorites and then right there I

will introduce the StackLayout with tkMainContent.

Recall that we need this for that site draw to work and

class="page" and we'll have to close off that RadSideDrawer.

Now inside the StackLayout,

I'm going to introduce my RadListView here.

So let me do RadListView and give this a template ID as myListView.

Now the reason why I give this template ID is because in

my code notice that I'm using this ViewChild myList View,

so that's why I need the template ID here, myListView,

and then I would say items... Recall how we construct this view so we'll

say items is equal to favorites,

and then I would say *ngIf...

I don't want to show this right ListView when my favorites is not

empty and then selection behavior.

Right now I'm not doing any reordering of my element so I just simply say

selectionBehavior="none" and then (itemSwipeProgressEnd).

So this event will trigger a call to

onSwipeCellFinished method here with the event passed in as a parameter.

So this one will be triggered when the swiping stops,

so we have implemented this method in our code there.

Similarly the next method will be (itemSwipeProgressStarted).

So this particular event will be triggered when you begin the swiping,

so this is where we will call

onSwipeCellStarted method that will

be implemented and then passing the event as the parameter.

So that is what comes in as the args in the method that we implemented.

Similarly, itemSwipeProgressChanged.

This will be handled by this method called onCellSwiping,

which will also be implemented in the code there... CellSwiping,

and we'll say swipeActions="true".

So if you send the swipe actions to true which

means that this RadListView supports the swipe actions.

If you don't have swipe actions on your RadListView,

you don't need to set that by default falls there,

and then close off the RadListView here.

So that constructs the RadListView,

so this is how you would construct that RadListView here.

Inside the RadListView we are supposed to use ListViewLinearLayout,

which is a layout supported by the RadListView,

so we use the ListViewLinearLayout and then we will use tkListViewLayout,

and then set the scroll direction to vertical.

This RadListView also supports vertical or horizontal scrolling.

In this example I am only using vertical scrolling,

so I will set the scroll direction to vertical and

then I'll say itemInsertAnimation="Default".

Recall this is the reason why we use the ObservableArray there.

So when an item is inserted into the ObservableArray the default

animation that is supported by this RadListView will be initiated.

You can also customize that if you want.

So you see that there are lot of customization options on this RadListView.

I'm not doing most of them because I'm interested in the basic features

so I will support the ListViewLinearLayout at the top like this here,

so we have declared that at the top...and then here we supplied

the ng-template with the ListItemTemplate applied to this.

So you could recall that even in the normal ListView we use the ng-template

to specify the template of each list item so we'll say tkListItemTemplate.

So notice is that all these I have

learned by simply looking at the documentation for the RadListView.

Here I am showing you one way of using it.

You can just use this as a template to construct your own RadListViews if you want.

If you want further customization,

then obviously read the documentation to understand more

about how you can customize your own RadListView.

So this code actually is available as an example code in the documentation.

So I'd just use that from the documentation so we'll say let-item is equal

to item and so this completes the ng-template,

and inside this ng-template I'm going to display

this using the StackLayout.

Recall that this is the same approach that we used

in the menu component,

so similar kind of approach where you will have an image

on the left and the details on the right side.

So we'll have StackLayout orientation horizontal.

Class is listItemStackLayout,

which I'm going to declare as a css class in a short while,

and close off that StackLayout here.

Inside the StackLayout, I'm going to display an image.

In the row, zero.

Column, zero.

rowSpan="2". If you see

the menu component's layout you will see a similar approach there,

in fact I used the same approach here,

but I'm using a smaller sized image here.

Height is 60, width is 60,

and the source of this image is set equal

to BaseURL + item.image.

Notice that I use let-item here so that's why I'm using item.image.

Class="thumb p-16".

You remember that I explained this already in

the menu component on why I specify it like this,

and then below that I will use

a GridLayout with rows set to is set to auto, columns set to star.

We'll have a single column here.

Rows set to auto, space star.

So two rows there.

Columns star, and inside those GridLayout you're going to use two labels here.

One to display the name of the Dish,

so this would be in row zero,

column zero, and the text is item.name, and the class is

labelName and close off the label.

And the second one will show the description of this item,

so row...This one would be row one, column zero,

and that text would be item.description,

and the class would be labeled text,

and close off the label.

Of course this shows the items in the ListView,

but now I want to be able to show the option buttons underneath the ListView,

so this is where I will create another GridLayout

and then apply *tkListItemSwipeTemplate.

This is the swipe template where we specify the option buttons.

So you have to use this exact way of specifying ways so we'll say columns auto, *,

auto, and class is listItemSwipeGridLayout.

Very descriptive series of class names there,

and then in here inside those GridLayout,

I will describe the option buttons here.

So the option buttons can be described by using

the StackLayout with the id set to mark-view.

Now if you are wondering why the id is set to mark-view,

go back and look at your code here,

and notice right there we are saying getViewById("mark-view").

getViewById("delete-view").

So that is the reason why I am using the id's here for this StackLayout,

so mark-view, the class is markViewStackLayout,

and this would be in column zero,

and when there's a stack.

So when this thing is tapped,

this will result in a call to the onLeftSwipeClick with the event data being passed.

Recall that we implemented onLeftSwipeClick in the method,

so this one describes the item on the left side.

So inside here, I will use Label text and I am simply going to use

the unicode for the font awesome icon that I am using here.

I am being lazy.

I don't want to inject the native script ngx font icon into this,

but if you want to you can do that.

So the class is swipetemplateLabel,

and then also apply the fa class because I'm using a font awesome icon here,

and then for this label I will say

verticalAlignment="center"

horizontalAlignment="center"

and close off this label.

So this one creates the option button on the left

the side of my list item,

so I'm going to copy that and then simply pass that

down below here and then edit that for the right side.

So the right side button would be delete-view and the corresponding class would

be deleteViewStackLayout and the column would be two.

Now these two as you saw for this grid listItemSwipeTemplate,

we used auto, *, and auto.

So this one is column zero.

This is the middle column and

then this is the right column. What is that in the middle column?

The middle column is occupied by this ng-template. So that is how.

This is how the RadListView works.

So we just have to follow their way of specifying things,

so this is the deleteViewStackLayout,

and this one would be onRightSwipeClick.

So the tap would be onRightSwipeClick,

and then this class has swipetemplateLabel fa,

and the label here would be f014.

So this is a trash can icon that I'm using here,

and these two vertical and horizontalAlignment would

remain the same GridListView and StackLayout,

GridLayout, RadListView and StackLayout.

Everything as I see here,

and then below this RadListView,

I want to show their ActivityIndicator.

So going to the menu.component.html file,

let me copy the ActivityIndicator and this label from here.

So let me copy this ActivityIndicator on

the label 'cause similar thing we will use in the favorite component,

so we will paste it in here and then we'll say ActivityIndicator busy="true",

ngIf favorites or error message.

So the ActivityIndicator will be shown when I am fetching the favorites from the server.

If there is an error message then the error message will be displayed by this label here.

So that completes the favorites components template.

Now, we have introduced a bunch of css in there so I'm going to go into that

favoritescomponent.css file here and then add in the radius css class.

So the first one is listItemStackLayout,

which I will set the background color to white.

Padding: 10, and then labelName,

I will set the font-size to 20.

Font-weight to bold,

margin-bottom to eight, margin-left to 16.

If you asked me how did I come up with these numbers by just trying

until you see a reasonable looking layout.

So the next one is labelTitle.

For the label title I will give the font-size as 14, font-weight: bold.

And labelText,

font-size is 12,

margin-left: 16.

MarkViewStackLayout.

So this is the one that styles the option button to the left side,

so I will give it a background color of blue

and a padding of 16 and then similarly

deleteViewStackLayout

will give a background color of red.

Obviously you're trying to delete something so you want a red color to show there.

A padding of 16.

ListItemSwipeGridLayout.

Background color is white and then

swipetemplateLabel in case I am using,

then size is 20,

font-size is 28, color: white.

So, these are the classes that I need.

Now of course, since we have created

the FavoritesComponent we need to integrate that into our application.

So first going to app.routing.ts file,

Let me import that

FavoritesComponent from./favorites/favorites.component,

and then let me add in the route to that component and the part would

be as you expected favorites

and the corresponding component is the FavoritesComponent.

Now we have included it into our routes,

then I'm going to app.module.

We need to import that FavoritesComponent into the app.module,

so let me import the FavoritesComponent and then add it to my declarations,

and then last but not the least going into the draw component.

I need to add in the link to the FavoritesComponent,

so let me add this by copying that.

So this orientation nsRouterLink here is favorites and clear history true,

label row zero and then the label here is...Text is My Favorites,

and the corresponding icon is fa-heart.

All set.

Let's save all the changes and then go and take a look at our application.

Once the application gets deployed to my device,

let's swipe here and you'll see the My Favorites.

Let's go to My Favorites and at the moment it

should be empty because I haven't added anything to my favorites.

Now recall the way I have set up the Favorites service.

The Favorites that I select is not going to be preserved if I restart

my application because it's in a array variable,

and so when the app is restarted,

the array variable will be cleared.

So I need to explicitly add it in.

Now we will, in one of the later exercises we will find a way of persisting

this information in my device by using storage but at the moment,

let me go to the menu component and add a couple of items into my filter.

So going into one of the dishes,

let me add this to My Favorites and let me add one more dish to My Favorites,

and they're now going to My Favorites component.

You should now see the two items in My Favorites displaying here,

so one and two.

Now for each of these,

when you look at the item and then swipe to the right,

you see the option button being displayed there.

Similarly if you swipe to the left you'll see the delete button being displayed,

so this is the other option button that we have included.

Let's delete the item by clicking on that and

then that should disappear from My Favorites.

So there you go. We have now implemented option buttons by

using the advanced options of the RadListView here.

So you can swipe and see the two option buttons in here.

Now in addition, the RadListView also supports pull-to-refresh.

You have seen pull-to-refresh in many applications,

so you can do that also and you have even a way of reordering items in your list.

I'm not using those functionality of the RadListView in my application,

but should you choose to use those within your app,

those are also available from RadListView.

With this, we complete this exercise.

In this exercise, we have implemented

an advanced ListView in our application in order to support

a list of favorites being displayed and we also allow the users to delete items using

their option buttons that are hidden

underneath the list items and then revealed when you swipe on those lists items.

So with this we complete this exercise in

this exercise we have shown how we can use advanced lists.

This is a good time for you to do a good comment with the message advanced lists.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play