0:03
Time for your second assignment in this course.
In this module, we had dealt with various NativeScript UI elements.
So that is what we will leverage as part of your second assignment.
Your second assignment will consists of two tasks.
In this assignment, we'll see the use of action dialog in modal dialog,
a comment form that we will create patterns.
So, let's look at the details of the two tasks in this assignment.
Your first task in this assignment is to create an action dialogue.
So when you go to the menu and look at the details of a specific dish.
When you go to the details of this specific dish,
you now see that we have a button on the right edge.
This button is created using an action item
within the action bar of your NativeScript layout.
So, look at how you create action items.
I'll give you some more details about the exact icon to use
here in the instructions for this assignment.
Now, when this button is clicked,
then you will immediately pop up an action dialog.
So, this is where you should look up some of
the details of how you create an action dialog.
A link to the documentation for the action dialog is
available in the additional resources for the second assignment.
So, this action dialog will contain two actions.
The first one is 'Add to Favorites' which as you would
expect when you click on that will add this dish to the favorites.
So just as we did by clicking on
the unfilled heart here to add the item to the list of our favorites,
we can also click on this Add to Favorites and then,
this will result in this dish being added to the list of the favorites.
And you will only also noticed that this heart has changed
from the unfilled heart to the field heart because when the dish is added,
the favorites variable in your digital component or TS file is automatically set
from false to true and that should immediately
trigger a change in the icon that you use here,
in the form of some icon that you use here.
So, you should leverage the methods that are already available
within the digital component for this and
implement the action dialog as part of the documentation that
you reach and with the two options that I have shown you there.
Now in addition, you see the second option here for Add Comment.
So, this is the second task for your assignment.
So in this task,
when you click on the Add Comment,
you will pop up a modal dialog containing a form.
And in this form as you can see,
we have two text fields and a slider here.
So, slider is a new component that you need to make use of in creating this.
So, this slider ranges from a value from 1-5.
This will allow us to submit the rating for the dish.
And then, you can type in the name and the comments for the particular dish here.
So for example, I can type in my name and then I can select the rating here.
So, this rating automatically will align itself to the rating from 1-5.
So, this would be one,
this will be two, this will be three.
So when you specify for the slider,
the minimum and maximum value and the state value,
this will automatically configure the slider.
So, they will allow you to choose between one and five.
And then, you can type in comments as you see here.
And then when you submit the comment,
this comment will be added to the list of the comments for this particular dish.
So when you scroll the comments down below here,
you will see that the new comment has been added to the list of the comments here.
In addition, note that the date has been also added to the cards.
Now, this is where this date has to be automatically added within your code.
The details of how to do that,
a little bit of hint,
I have provided you in the instructions.
So, once you do that then and the comment is added into your dish,
then it'll join the list of comments that are already there about the dish.
Of course, when you navigate away from this dish,
that particular comment will disappear because we haven't yet set up
the silverside where we can persist the changes to the comment yet.
But that we will do as part of the last course in this specialization.
So, this are the two tasks in your assignment.
The first task, of course,
is to create the action dialog.
The second task is to create the modal dialog when
the Add Comments option is selected from the action dialog.
And you pop up the modal dialog at the point containing
the comment form with the three elements: the user's name,
the rating which is done using a slider,
and the comment itself.
And when the form is submitted,
the comment information is added into the list of comments for your dish as shown here.
Have fun completing the second assignment.
And look up the details of some of the new UI widgets that we are going to be using in
this assignment from their corresponding documentation links
that I have provided in the additional resources.
So, this will also get you into the habit of
consulting that documentation for NativeScript.
Because in the future of course when you work on your own projects,
you will have to look up the documentation to figure out a lot of these things.
So, I'm getting you into the habit of doing
that as part of doing these assignments. Have fun.
Jogesh K. MuppalaAssociate Professor
