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().