This course focuses on developing multiplatform mobile applications using the Web technologies (HTML5, CSS and Javascript). In particular we make use of the Cordova hybrid application framework to develop and target multiple mobile platforms with a single codebase. We make use of the Ionic framework (Ionic Ver 3.x), one of the most popular mobile application frameworks, that is built with mobile-optimized HTML5 and CSS based components and Angular. You will learn about UI development with Ionic and then using Cordova's modules to 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 HTML5, CSS, Javascript and Angular skills, and (c) Use various features of the Ionic framework to build hybrid mobile applications
Exercise (Video): Ionic Lists: Advanced Features
Loading...
来自 The Hong Kong University of Science and Technology 的课程
Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova
170 个评分
The Hong Kong University of Science and Technology
170 个评分
课程 3（共 5 门，Specialization Full Stack Web and Multiplatform Mobile App Development）
从本节课中
Ionic Components
This module explores the Ionic support for forms. Advanced features of Ionic lists are discussed. In addition all the different methods of overlaying information on the screen like modals, popups, popovers, action sheets, and loading are examined. Ionic support for gestures is also briefly considered.
与讲师见面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
[MUSIC]
In this exercise,
we are going to push you some of the advanced features that ionic list support.
In particular, when you swipe on an ionic list item,
then you can reveal additional option buttons in your list item.
And then, clicking on those buttons can then trigger
additional operations within your component.
Also we'll look at look at the use of gestures within our ionic application.
To get started, let's go to the terminal and
then we will add a new page called favorites to our application.
This favorites page will be used to display a list of our favorite dishes.
We have already seen in the previous exercise how we can
mark some dishes as our favorite dishes, and
we have the favorite provider that is keeping track of our favorite dishes.
Now we would add in a new page which will display a list of our favorite dishes and
enable us to manipulate the list of favorite dishes including
deleting a favorite dish.
So, to get started, let me add in a new page called favorites.
Once the page is created, we will go and add this page and
integrate it into our application.
Go into your application, to integrate the favorites page into our application we
will go to the app module and then import the favorite page.
So let me import the FavoritesPage here
And then after that we will go in and
include the FavoritesPage into our
declarations and the entry components,
properties of our NgModule decorator in app.module.ts.
In addition, we want to include that page into
our app component also, so let me go to the app.module.ts and
then copy this FavoritesPage line from there.
And then we'll go to app.component.ts and then include that so
that we will import the favorites page into the app.component.ts.
And also we need to configure the information for the favorites page here.
So, going into that application, so
let me configure the favorites page here.
So recall that after the Contact us page, add a comma, and
then we will now configure this page, the last one,
as My Favorites.
And then the icon that I will use is heart.
And the component is FavoritesPage.
And this way we will integrate the FavoritesPage into our ionic application.
Next, let us go into the FavoriteProvider in favorites.ts and
then configure this FavoriteProvider to be able to supply a list of favorites so
that we can render their favorites in our favorites page.
Also we will add in a new function to enables us to
delete a favorites from our list of favorites.
So to do that, go into our favorite.ts file.
Let me import, the Dish from,
shared/dish because we will need to make use of this in this, FavoriteProvider.
And also I will be importing
the Observable from rxjs,
Observable and, DishProvider from,
recall that it is right here.
So when you go up and
then you will see dish/dish because this is already in the provider's folder.
So we need the observable because when we get the favorites and
return them then we should return it
as an observable of a dish array type, so that's why we need the dish.
And also we need the DishProvider in order to fetch the data.
Now after doing this, we will go down into our constructor,
and then in the constructor, we need access to the,
dishservice, which will be of the type DishProvider, so
we will inject that DishProvider in here.
So that we can then make use of the DishProvider to go and
fetch all the dishes for us, because the DishProvider already has the methods that
enable us to go and fetch the dishes from the server.
Then I am going to update this addFavorite because in here I want
to check to make sure that the favorite is not already in the list of favorites.
So we'll first check if this favorite is already in the list of favorites,
then I will not add it,
I'll make sure that I will not any duplicates of my favorites here.
So that's the reason why I'm using this.
Saying, if not this isFavorite(id), this.isFavorite(id) will return a true
if the favorite is already in the list of favorites, otherwise it'll return a false.
So only when it returns a false,
then I will add the favorites into my list of favorites.
If the addFavorite comes in with an id of a dish that is already in the favorites,
there is no point in adding it one more time to the favorites here.
So that is the addFavorite.
Now the next method that I'm going to implement is called getFavorites.
So this will return the list of all the favorites.
So this will be returning an Observable of the Dish array type.
So now you see why I included the Observable into this method.
Now, this is where I'm going to simply leverage
the dishservice.getDishes method,
which will already return me the list of all the dishes.
And then after that I will filter this using the map,
so in here I'm putting in an Adel function and
then I'll get the list of all the dishes.
So I will do the dishes.filter.
So you see how I am using the array
methods here to automatically take care of much of the work for me.
So in here, when I am filtering, I will look at each dish.
And then, I will return, By
checking favourites.some And then,
so this is where l am employing this isFavorite,
this particular part of the code here, so
l will say dish this.favorite.some element id.
So what we are doing here is using
the various methods that are supported on
JavaScript arrays to be able to carry out and
select all those dishes from the list of dishes.
So as you see, when I call that getDishes method, it'll return me all the dishes.
Now once I get all of the dishes I'm going to filter out
only those dishes that are in my list of favorites.
Now how do I know if a particular dish is in my list of favorites?
Now this is where we saw that we already implemented this method here,
which allows me to check if a particular dish is in the list of favorites.
So I'm going to use the same method here.
So this is where I am using this favorites.some and then el, and
then I'm saying element is equal to dish.id.
So here I am checking the dish id which is corresponding to this particular dish.
So for each and every dish, I will check if this dish is in my list of favorites.
If it is then I'll return a true, if not a false and then the filter will be applied.
So only those dishes that are in my favorites will be selected.
And so the dishes array will contain only those dishes that are in my favorites and
that will be returned to my caller when the getFavorites method will be called.
So see how I am leveraging all the JavaScript
array methods to carry out much of the work on my behalf.
Now the other method that I need is a deleteFavorite method.
So here I will include a method called deleteFavorite, which
will be supplied with the id of the dish that I need to delete.
And when the delete is successful,
I am going to return the updated list of dishes,
so that my view can be updated in my favorites page.
So this is where I am going to go in and first,
the id that I get as a parameter is the specific dish that I want to delete.
So what I will do, is to use the this.favorite and
then the indexOf method, to search and
check if this id is already in the list of favorites.
Now this indexOf method will return the specific index of this particular id
in the array if it exists, if it doesn't exist it will return a minus 1.
So here I am going to check if index
greater than or equal to 0 which means if index is non negative, so
that means that that particular dish exists in the list of favorites.
So in that case, then I will be deleting it.
Otherwise, I need to simply warn the user saying you're trying to
delete a non existent dish.
Now, the else part will most likely never be executed because
of the way we design our user interface within views.
So we will never try to delete a non existent dish but
it is always a good idea to put in the check in place there.
So if the dish is there, then we'll say this.favorites.
Again, I am using an array method here called
splice and index, 1 so you can look up what splice does.
So this will delete that particular item from the array.
And then at this point, now that I have removed that item from my array,
I will simply say this.getFavorites,
the getFavorites already gives me the list of favorite dishes.
So I'm just going to call the method get the list of dishes the new set of
favorites after this particular dishes have been deleted
return that from the deleteFavorite method, that is it.
So this is how we will handle the deletion of the dish.
If not, then I will do a console.log,
to say, Deleting non-existent favorite,
and let me print out the id value.
So just in case if that happens, then we'll be warning the user.
And this is where, I'll use
the Observable.throw method and
say, Deleting non-existant favorite.
If you want, you can also return the id of the dish.
So this is just a warning to the user sync.
So you're going to throw in error at this point if you try to delete and
your view should be setup to handle when the Observable return an error.
With this, my favorite.ts file is updated.
Now we will go into favorites page and state configuring the favorites page.
So switching to favorites.ts.
This is favorites page and in the favorites page, I am go to,
Import both the onInit and Inject into my favourites page.
And also we will have IonicPage,
NavController, NavParams and, also,
I'm going to import ItemSliding.
The ItemSliding is the one that supports the sliding
way of displaying the option buttons that I will include for my list item.
And also I will import the FavoriteProvider,
obviously, because I need to be able to fetch the set of favorites.
So this comes from providers/favorite/favorite.
And also import Dish from,
shared/dish.
So once I import these two, then they will go into our favorites page and
then the favorites page will implement,
On Init, implements OnInit and
We will include- Favorites,
which is in variable, which will contain the list of all the favorite dishes, and
then- Error message, which is a string.
So, you see that we are using similar approach that we used in the menu to
handle this.
Now in addition to the NavController and the NavParams, I'm going to also inject-
Favoriteservice, which is the FavoriteProvider,
and also inject BaseURL.
BaseURL, and so now my favorite page is ready.
Now, because I said it implements on in it, so
I implement ngOnInit in here, and inside the ngOnInit,
I'm going to do this favoriteservice and getFavorites, so
you see that we're going to get the list of favorites from there.
And then we will subscribe, and then in here we'll say,
if it returns favorites, then this favorites
will be assigned to favorites.
If it returns an error message,
then I will put this errMess = errmess.
And so, that way we will fetch that list of favorites from our FavoriteProvider.
So now that l have the list of my favorite dishes,
l can render them in the favorite speech using the ion list.
Also, let me add in the new method called deleteFavorite,
Which I will supply with item of the type ItemSliding,
you will see the reason for
this in a short while, and then id number.
So I will send in the ID of the dish that I want to delete.
And inside here- I'm simply going to
do a console.log just to check to make sure that I'm deleting the correct ID.
So the console.log, see once your application starts working correctly,
you can remove all these console.logs.
They are not needed, but while you are doing the development,
the console logs enable you to use the browsers JavaScript console to check
to see if your code is working correctly.
So, console.log, and then we'll say this.favoriteservice and
I will use the deleteFavorite method, and
then supply the ID for the deleteFavorite method.
And as you realize, this is going to return an observable.
So, I'm simply going to subscribe to the observable using the same method as I have
done earlier here.
And so, I will say subscribe, and so when does returns their favorites?
I will update my favorites variable,
if it is an errmess, I will display the errmess.
Now, the reason for using the ItemSliding is that when you slide
on your ion item in the view, then it'll display the list,
the set of option buttons, so I want to hide the option buttons once I am done.
So this is where I will use the item.close method to-
To hide the option buttons from my favorites view.
So now that we have completed updating the favorites.tsfile,
let's work on the HTML page here.
Now, going to favorites.html, let's update the template for the favorites page now.
So in here, let me add in the color to the navbar.
And we will put in the menu button here.
So let me just quickly go down to the menu.html.
And then copy this button from the menu dot html,
and then going back to favorites.html,
paste that button into place here.
So this will add the menu button to the favorite speech, and
let's change the title to My Favorites,
and then we'll start building up the actual display of that favorites here.
So removing the padding from the ion content,
because I want the list to stretch the entire width of the screen.
So going in, let me add in div *ngIf=favorites,
so this structure you have already seen before, so we have ngIf favorites.
So in here, we got to display the list of favorites.
Now, for the situation where your loading,
let me just go to the menu.html and then we'll copy this
part of the code, which is standard that we use for
displaying the loading message and also the errMess.
So in here, I will change this to favorites.
And the errMess, as you saw, we have already configure
that in the favorites.ts file appropriately.
So now, all that we are left with is building the list of items here.
So in here, I will build the ion-list
to show the list of the favorite dishes for the user.
And that inside the ion-list, I'm going to use an ion-item-sliding,
so the use of the ion-item-sliding enables us to
use the sliding behavior in an item of the list.
So that when you slide the item, then the option buttons
can be revealed on for the particular item in the list.
So, using the ion-item-sliding,
I will iterate over- The favorites.
And also I'm going to use a template variable called item for this,
which will be passed in as a parameter to a method that we will
invoke in a short while, and close off the ion-item-slide.
So, within the ion-list, I am using the ion-item-sliding for
setting up the iteration overall the favorite dishes.
And in here, we will use the ion-item,
display the information about that specific dish here.
So within the ion-item.
I'm going to use a thumbnail list here.
So I will say, ion thumbnail,
Item left.
So this thumbnail will be shown on the left side.
And inside this thumbnail, we will have the image Which is the image of the dish.
So we'll say, BaseURL + Favorite.image,
And close off that image here.
And bellow here, I'll use it a h3 to display
the favorite.name, the name of the dish.
And use a p here to display,
The description of the dish.
So with this, the ion item to show the information about the dish is constructed.
Now, we're going to add in the option buttons into this.
We're going to have one single button here to add an option button,
we'll say, ion-item-options.
So ion-item-options allows me to add the option buttons
which will be revealed when we slide the item in the view.
And I would specify the side variable item's should be, displayed options.
A button should be displayed as right, so the right side of the screen.
So which means that we should do a right to left gesture on the Item
in the list in order to reveal these buttons, and
let's close of the ion-item-options.
And inside here, we will enclose a button,
And the button will get the ion- button attribute.
So this will become an ion-button.
And we'll set the color to danger, so red color, because I'm going to
be using this button to delete that specific item from my list of favorites.
And so danger, And when this is clicked,
I'm going to invoke the deleteFavorite
methods that we have implemented in
the Favorite start TypeScript file.
To this deleteFavourite method, I'm going to passing item
as the first parameter, this item is the template variable item.
And this is one way for me to get access to this, Item inside my code, so
that from my TypeScript code, I can hide these option buttons,
when I am done with handling the clicking of the option button here.
And the second value that I am going to parse in as the parameter,
is the id of the dish, so favorite.id.
So these two values will be passed in as the parameters for
this button, and let's close off the button.
And for this button, I'm going to
Use an icon so we'll use ion-icon.
And the name of the icon is trash.
So this is the trash button, or
rather the delete button on the right side that will be displayed.
When the item is Swiped from right to left.
So this icon will be displayed inside the button, and the button itself will be
colored red to indicate that this is a dangerous operation.
Think twice before you do that.
And so with these updates, my Favorites view is now ready.
Let's save all the changes and look at how the application behaves.
So saving all the changes, going to the application in the browser,
let me just go to the Menu and then select a couple of dishes.
So let's add this to our favorites.
So this is the first dish from my menu.
Let me go in and add another dish to my favorite, so
the third dish from my menu, so first and third dish are added into my favorites.
Now, if they go to the My Favorites page,
this should display the two items that I have selected as my favorites.
So you can see the two items displayed here.
And also see the use of the thumbnail on the left side to show the image for
that particular item.
So we have two items in my favorites.
Now, If I do a right to left swipe on the item,
you see the delete button being revealed, clicking on the delete button
will pretty soon result in the item being removed from My Favorite, so
now I will have only one item in My Favorites.
So the rest of the code is set up, to ensure that this happens automatically.
Now, I can go back to my Menu, And then I would
notice that when I click on the first item, it is indeed marked as my favorite.
But when I go to the full item, now you will see that this is no longer
marked as a favorite, because I've deleted it from My Favorites.
So, the change is seen by all the views, because
we are using the favorite provider to keep track up all the favorite items here.
So, this part of the exercise is complete.
Now, the second part of the exercise I'm going to use a gesture in my menu.
Now you notice that I was adding items into the favorite list, by going to
each specific item, and then clicking on the floating action button there.
Now, I'm going to use a gesture here,
to directly add the items from the menu, to my favorites.
So let me set up the gesture for this, in the Menu file.
And so to do that, let's go back to our code.
As we briefly learnt earlier,
ionic supports various kinds of gestures on the elements in the view.
You have swipe pan, pinch, cap and click.
So we will use the pan gesture in this part of the exercise.
So to do that, we will go to menu.ts file.
In the Menu.ts file, I need to set up a function to hide an item
into the favorites when I do a gesture on the item in the menu.
So to do that, I'm going to go to recall that we had
a add favorite function in the dishdetail.ts file.
So I'm going to go in there and
simply copy this addToFavorites function from there,
and then coming down to the menu.ts file.
I'm going to add in that same function here.
Of course, we need to do some set up In here.
So after adding in this function, obviously you
realize that this favoriteservice and favorite on all this have not set up.
So I don't need the favorite variable,
but I still need the information about the specific dish to be deleted.
And also I need access to the favorite provider.
So to do that, we will
move to the top here.
And then, along with the DishProvider,
I'm going to import the, FavoriteProvider.
So let me import the FavoriteProvider
from providers/favorite/favorite and
then inject that into my constructor.
So let me copy that and then say favoriteservice.
And this is of the type FavoriteProvider.
I tend to copy and paste items and then edit them simply to
avoid making obvious mistakes that you do when you type in the code.
So this is the favoriteservice and FavoriteProvider.
Now going into the Add to favorites, now you see that the dish Is missing.
So that dish will come in as a parameter here.
So this will come in as a parameter to the Add to Favorites.
And in this case, instead saying, this dish.id, we simply say dish.id.
So my menu.ts file is set up.
So now the next thing is to go into the menu.html page and
then add in the support for the gesture.
To support the gesture, we go to the ion card.
And then in addition to the click support that we have here.
Maybe I should just type it into the next line so
that it's a bit more clearer to look at.
And so we'll say pan, so I'm going to use the pan gesture here.
So when you do a pan gesture on that card
which shows a menu item, we will call that addTo,
Favorite method, addToFavorites.
And pass in the dish as the parameter here.
So with this we have now configured our menu,
view and the menu.ts file to support a pan gesture.
Let's save the changes and go and look at our application.
Going to our application in the browser, let me now,
in book, My Favorites.
Let's see what is there in My Favorites.
And you will see that it is empty.
So as you realize, I'm not storing it permanently, so
whenever the application is reloaded, the favorites that you have saved earlier
will be destroyed and then reset to empty array.
So we will have to explicitly add new favorites into our list of favorites.
So I'll go to the menu.
Now that I have the gesture support I'm going to do a gesture on this.
So a simple pan gesture on this, so that should have been added to My Favorites.
Let me also do a pan gesture on this, and then let's go and check out My Favorites.
And you see that the two items that I did a pan gesture in the menu,
are now added into My Favorites.
And obviously, we can delete items just like before.
So once we delete an item,
it'll be removed from the view, and the new view will be restored.
So with this, we complete this exercise.
In this exercise we saw how we can make use of the option buttons
that we can add into our items in an ion list.
And how we can show those option buttons and hide those option buttons
from the code by, in working the close on the specific item.
And we also saw the use of gestures and how we can invoke a gesture
within our application in order to let it perform a set of operation.
With this, we have completed this exercise.
This is a good time for you to do a get comment with the message and runs list.
[MUSIC]
