Displaying the same data with different templates, Use a Bootstrap modal

Loading...

From the course by University of London

Responsive Web Design

1281 ratings

University of London

Responsive Web Design

1281 ratings

Course 2 of 6 in the Specialization Responsive Website Development and Design

In this course you will learn how to apply concepts from interaction design and human computer interaction in order to design and build an interactive, professional looking website. You will learn how to make your web page designs adapt to different screen sizes using responsive grid layouts. You will learn how to add navigation and other design elements, and you will learn how to separate data and display using JavaScript objects and templates. At the end of the course, you will be able to: 1. Explain why users need to know where they are, where they can go and what is on a web page 2. Create wireframe mockups of web pages 3. Identify the key functional elements of web pages 4. Use Bootstrap components to realise page designs 5. Use JavaScript data structures such as arrays and objects to define the data used in a web page 6. Use the Handlebars template library to convert data to HTML 7. Add interactivity to templates using JavaScript event listeners In this course, you will complete: 1 website design assignment taking ~1 hour to complete 1 programming assignment taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes

From the lesson

Adding content to websites

Welcome to the third module of 'Responsive Web Design' By the end of this module, you will be able to separate page structure from page content, use JavaScript objects and implement JavaScript templates with Handlebars as well as being able to display different data with the same template and the same data with different templates. Finally we will be looking at using a Bootstrap modal. We hope you enjoy the module!

Displaying the same data with different templates, Use a Bootstrap modal11:58

Meet the Instructors

Dr Matthew Yee-King
Lecturer
Computing Department, Goldsmiths, University of London
Dr Kate Devlin
Senior Lecturer
Department of Computing, Goldsmiths
Dr Marco Gillies
Senior Lecturer
Computing Department, Goldsmiths, University of London
Dr Mick Grierson
Reader
Computing Department, Goldsmiths, University of London

[MUSIC]

Hello again.

We've started to see the real power of templates to be able to set their traits,

contents, and structure.

And next week, we're gonna go through a whole range of techniques and

make some powerful websites.

But to finish off this week, I want to do one more thing with you which is flip over

what we did in the last video.

So the last video, we looked at how we can use a single template and put two

different bits of data on it, that's the main thing you're gonna do with templates.

But actually, you can kind of do the opposite and

use templates to display a single set of data in two different ways.

So if we look at this new version of the website,

I've got two little buttons here, at the top.

The first one displays an image with all these details.

You can see the image, you can see the message dates, the title or the author.

But, I can also create a different view.

The mass data view's useful if you wanna know everything about it or

you want to extract information, but

it's not the nicest way, it's not the nicest looking way of viewing an image.

So let's have another way, which is creating this nice pop up view which

appears in front of the page, it's got a nice border, it looks much nicer.

So I'm gonna take you through how you display both of these different

images from the same set of data, from the same data object.

So what we have is an object and

it's exactly the same object we've been using all through this week.

And what we wanna do is take that object, run it through a template and

we get a web page, that's what we've done in the last couple of sessions.

But again, there's nothing to stop us taking that same object,

running it through a separate template and getting another kind of HTML that looks

very different and I'll tell you how to do that.

We'll, it's essentially using the same techniques we used in the previous videos,

so there's nothing too difficult.

But before we launch into those techniques, I wanna quickly show you how I

created that nice sort of modal pop-up that I'm gonna use the word modal.

That's a term we use for a piece of an user interface, in this case,

face to fact HTML, it appears in top of and covers up the original interface.

So that you're suddenly interrupted for

your main interactions with a webpage by this and

you can, you focusing on that for the moment and then you can make it disappear.

It's used a lot for dialog boxes, it pops up and you have to click.

You sort of read what it says and you click on it to go away.

But it's also quite nice, in this kinda context, for

displaying an image in a way that you focus really on the look of the image,

away from all the details and metadata.

So, let's have a look at modals.

So this is the code that we're using for

modal, we're using the Bootstrap modal system.

So again, as usual, in the last few videos where

we're having to include Bootstrap and this is quite complex code.

So there's a lot of divs to create this Bootstrap modal,

I won't go into the full details, but the reason there's so

many divs is there's quite a lot we can customize in how the modal works,

the framing, whether there's an on off button, all of that.

Our modal was really very simple and

all of the stuff we're doing is in this modal body, div, which just

contains the main content of the body and all it really is is an image tag.

So we've got an image tag, it's got a width of a 100% and

the source is coming in from our template, so it's a template expression.

So this is all we're really looking for, you can, if you want to find out

more about modals, I'd recommend you look at the Bootstrap website.

There's lots of documentation on there to help you get working on them.

So this is the HTML for the modal, next up,

I want to show you how actually use it.

Modals are a bit different from standard HTML in that they appear and disappear.

So we need a little bit of JavaScript to get that working.

And as usual, we're turning to jQuery and we're using this jQuery-like call.

In fact, it's an extension of jQuery that Bootstrap provides and

it's this modal function.

So we're grabbing using jQuery to grab the modal diff.

Recording this modal function and which is at this point is showing,

cuz were passing in show as a parameter.

And we're seeing the code, we're also using the opposite way,

passing in hide as a parameter to hide the modal.

So that's really all we all need to do to make it pop up.

The only other thing I'm gonna show you is this other bit of code which does

something when we're hiding the modal.

So you can click away from the modal and it will disappear but

we want something instant shown once we made it disappear.

So we gonna bind a function to this event.

So, we're using the jQuery.on function.

The jQuery.on function is a function that binds

some functionality to the main event happens in your webpage.

We've kind of seen this before.

So the click function finds

function to the moment you click a button on an element.

And on is the more general version of that.

So the click is just a short-hand for onclick and, but,

instead of onclick, we can have on for a wide,

massive range of things that can happen on a web page and

mouse-overs, clicks, keyboards, lots of things like that.

But also, the custom events that are specific to a particular type of element.

And this time, we are looking at a custom event which is specific to modals.

So we're using jQuery.on to bind some function onto this event.

The first argument is the event that we're actually responding to, in this case,

is the name of the event, in this case is hidden.bs, standing for Bootstrap, .modal.

This is a very specific event that only applies to Bootstrap modals and

it's the event that happens when the modal has been hidden,

when it disappears when we've clicked away.

And what we're doing is we're binding a function to that and

the function is very simple, all it does is click on the details button.

So what that means is that we're just trying to,

once we close the modal view we're bringing up the details view.

We've already got some functionality to do that.

We've got the details button, when we press that it brings up the details view.

Instead of re-implementing that, we just trigger an artificial click,

so it's kind of virtually clicking on that button and having the same effect.

So let's have a look at the actual code [SOUND].

As before, we've got our nav toolbar with our tabs.

This time, it's details and modal, but otherwise the names are changed but

pretty much the same [SOUND].

We've got our content div where you gonna put all our content that

starts off on empty, exactly, it's the same as before.

And here is our details template, so it's one of our two templates and

this one's exactly the same as what we've seen in the last video.

The one that's different is the modal templates and

this is just the code I showed you on the slide a few minutes ago,

bringing up this modal dialogue.

But the important thing to remember is [SOUND] that modals are a bit different,

so in the details template, just adding that to the HTML will create it and

you'll be able to see it straight away.

The modal, when you add in a modal to your HTML, is not immediately visible.

You have to show it via the JavaScript and we'll see how to do that in a minute.

Okay, let's go down to the JavaScript code.

As before, we're grabbing the source of the template and

compiling it, this time we have to do it twice.

One for each template, and we've got two variables, one for the detail template,

one for the model template.

We also have a data object, this time just one, but

we're going to display it in two ways.

[SOUND] And here's what happens when we click on the detail button.

We actually first hide the modal, as I've told you, you can use them,

this modal function with hide as well.

This is just to make sure that, if we're showing the modal we get rid of it, so

we can see the details.

And then we just do what we've done in the previous video, we just bring up

the template, create some HTML from it and add it to our content div.

[SOUND] The Modal onclick is a little bit more complex.

We bring up the HTML, we use the template to

create an HTML added for content, as usual.

And then at that point,

we have to show you the modal, because it doesn't automatically show, as I said.

Now it is really important that you only

call this function after you've added your HTML.

Because until you've added the HTML, the image modal elements do not exist.

This is a really important thing to know when we're working with templates,

is that we've got stuff on our webpage that

doesn't exist straight away because we haven't written [INAUDIBLE] HTML.

It's only created later as we execute the JavaScript.

So, it's important to bear in mind, as you're writing your JavaScript,

that you can only do stuff which accesses the elements in your template

after you've instantiated the templates and created the HTML.

So you have to just be a little bit careful.

You can easily get a gotcha where you're sort of calling some HTML element but

the template hasn't been instantiated and so it does nothing and

you're you spend the time scratching your head and sort of working out what to do.

Okay, so the last thing is

this function which is doing something when the modal is hidden.

As I've shown you on the slides, it just waits for that event and

then it calls a function that will, clicks details button and show the details.

So that's the code, let's have another look back at the actual webpage.

Okay, so this is the webpage again and as I said to you before,

I can click on details, I bring up one view of the data.

Click on modal, I bring up another view of the data.

So now we've seen that we can, as well as using templates,

one template to show many different images using the same format.

We can reformat how we show one image in different contexts.

So we're showing that the power of templates and

the separation of structure and content,

that really we could be really fluid with what we do, appearance wise,

and still keep a common core of content and that is a really exciting possibility

[MUSIC]

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play