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 Split Pane
Loading...
From the course by The Hong Kong University of Science and Technology
Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova
155 оценки
The Hong Kong University of Science and Technology
155 оценки
Course 3 of 5 in the Specialization Full Stack Web and Multiplatform Mobile App Development
From the lesson
Ionic Split Pane, Grid and Storage, and Deploying your App
In this module you will learn about using local storage within your app. You will then learn about configuring your machine for building your app for various platforms, and deploying your app to emulators and devices.
Meet the Instructors
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
In the previous lecture,
we learned about how we can make
our Ionic application automatically adapt to different screen sizes.
And one of the tools available for us is the use of Ionic split pane support.
Now in this exercise,
we'll explore the use of Ionic split pane support
in our Ionic application and see how we can redesign
our Ionic application to make use of
the split pane support to automatically adapt to different screen sizes.
So as we realized,
when you look at your Ionic application in a normal Ionic Lab View as you see here,
you see that the rendering of the application in
the mobile device screen widths is pretty good.
But, however, we can also view the Ionic application as
if it is being rendered on a larger screen by simply going
to the browser and then using the localhost:8100 to directly see
the complete View of our Ionic application in the browser.
So, if I view our application on the browser,
this is what it looks like on a large-screen browser.
And obviously, as you realize,
the screen real estate is not being effectively used for our Ionic application.
For that matter, let me switch on the responsive view.
So to use the response view,
as you have seen in the previous courses of the specialization,
we turn on the Developer Tools,
and then in the Developer Tools,
right at the left corner,
you see this toggle device toolbar.
Click on that and then you'll be able to see the View of
our application as rendered on different screen sizes.
This is what your application looks like under its normal size on a standard iPad,
so at 100% of the size.
And then if you're looking at it in the portrait more,
this is what it looks like.
It's not terrible but, still,
we can work to improve it further.
Of course, we realize that the side menu is always available for us.
And if you look at the same View on a smaller screen,
like a Galaxy S5,
the view looks reasonably good for us and so, you know,
it looks quite acceptable size both in
the portrait and the landscape mode.
How about for larger screen size like, for example,
the iPad Pro in landscape mode and in portrait mode?
So, we definitely realize that there is scope for improving this and that's where
the use of the Ionic split pane enables us to redesign our application.
To use split pane in our Ionic application,
we'll go to the app.html file and we enclose
the entire content of the app.html file in ion-split-pane.
And going down to the bottom of the page,
we'll close off the ion-split-pane element here.
And so, this will essentially enclose the whole content into a split pane.
One additional change that you need to do is to declare an item as the main.
So in here, we have the ion-nav,
which is the rootPage,
so we will declare this as the main in our split pane.
So, thereby, the other one, the ion-menu,
becomes the other part of the split play.
So, adding in the main attribute to ion-nav here down below,
let's save the changes and go and take a look at
our application in different screen sizes.
Going to our application in the browser,
and I'm still using the responsive view from Chrome Developer Tools.
So here you see the rendering of the View on a Galaxy S5,
and you see the toggling of the site menu and
this View in the landscape mode.
But let's switch to a larger screen size,
like an iPad, and voila.
So you can see that the side menu is completely displayed in View here, like this.
And when we switch to the portrait more,
you can see that the screen real estate is better utilized by using the split pane.
So for larger screen widths,
you can see the part of the screen width is being
used for fixing the side menu in place there.
And so you can do navigation directly from the side menu, like this.
And the main view is also much better looking
with the side menu always present within the View here.
And, but of course,
when you're switched to a smaller screen width, say, for example,
for a Nexus P,
the side menu will be automatically become
toggleable using this menu button on the top there.
So, this is the result of using the split pane.
Now that we have achieved that,
let's do a few more updates to our application so that
the side menu is also looking better with these updates.
What we will do in the next step is to add
in the restaurant logo and the restaurants name to
this side menu at the top so that the side menu looks more
interesting than just a list of links here.
And also, we will add in
some additional CSS classes to enable us to style the side menu a little bit better.
Going to my application,
in the assets folder,
I'm gonna create a new folder and name it as images,
and we're gonna store the logo for our restaurant into this images.
Now, to get the logo for the restaurant,
in the exercise instructions,
I have given you the logo.png file.
Just download that file and move it into this images folder.
So, going to my application in a Windows Explorer or the Finder window in Mac,
I'm just going to go and browse down to the Ionic,
conFusion, and source assets,
and then you see the images folder there.
I'm gonna move the logo.png file into this image folder.
Here, you see that I have already moved the logo.png file into the images folder and
now it becomes available within my Ionic application to
make use of in the design of the Views.
Going back to my application,
in the app.scss file,
I can include any SCSS classes that I want to
make globally available within my entire Ionic application.
So let me add in a few colors in here which I can use to style a few elements.
So I'll add in a light gray color, which is ddd,
then I will add in a background-dark color, which is 512DA8,
then background-light, which is 9575CD,
then background-pale, which would be D1C4E9.
And I will also add in a CSS class called background-pale
where I will set the background-color to background-pale.
And, for now, that should be enough to work with,
so let me save the changes.
In case you want to have
your own SCSS classes that you want to make available to your entire Ionic application,
this is where you can include them.
If you want it to be available only within a specific page,
then you include the same into the SCSS file in that specific page – folder.
After making that change,
I will now go to the app.html file.
And in app.html file,
to the ion-content that we have here,
I'm going to apply the class,
background-pale CSS class, that I have defined earlier.
Also, to the ion-list,
I'm going to add in
an ion-list-header and use
a text-wrap on this header.
And inside this ion-list-header,
I'm going to use an ion-thumbnail item-left.
And in there, I will include the logo
by saying img src='assets/images/logo.png.'
And I will also include the name of the restaurant.
So let me just copy the name of the restaurant from the ion-title here,
paste it in, and close off.
So this would display the logo and the name of the restaurant inside
my side menu on top of the various list buttons there.
Let me also add some color to the ion-list-header here
– primary-light – so that it's set apart from the rest of the menu.
Saving the changes. Let's go and take a look at our application in the browser.
Going to the browser,
now when you look at the menu,
you can see that you have the restaurant logo and
the restaurant name included in the side menu here.
And also, you can see that
the entire side menu is now pale primary color in the background,
and this looks much better than what we had before.
Now, taking a look at the same thing on a larger screen,
for an iPad Pro,
this is what it will look like for an iPad,
and viewing it at a much larger size so you can see
more clearly that your side menu now has
the restaurant logo and the name of the restaurant included there and the menu items
here and then of course the main View where the page is being rendered here.
Same thing in a landscape mode,
you can see the full-fledged View or the side menu and the main page here.
So the navigation exactly works just like before,
so you can navigate to the various elements just as we have done before,
but this is much better-looking View for our application
than what we had without using the split pane.
With this, we complete this exercise.
In this exercise, we have explored the use of Ionic split
pane in order to redesign our application's View so that it
fits much better on larger screens and automatically adapts to smaller screens where
the side menu will be hidden by default and then invoked when we click
on the side menu button in the navigation bar.
With this, we complete this exercise.
This is a good time for you to save
all the changes to your Git repository with the message "split pane."
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
