UI: Subject Page Tabs

Loading...

From the course by Johns Hopkins University

Capstone: Photo Tourist Web Application

18 ratings

Johns Hopkins University

Capstone: Photo Tourist Web Application

18 ratings

Course 6 of 6 in the Specialization Ruby on Rails Web Development

In this Capstone project for the Photo Tourist you will implement a Ruby on Rails web application that makes use of both a relational and NoSQL database for the backend and expose the data through services to the Internet using Web services and a responsive user interface operating in a browser from a desktop and mobile device. You will have a chance to revisit and apply what you have learned in our previous courses to build and deploy a fully functional web application to the cloud accessible to your co-workers, future employers, friends, and family. In developing the Photo Tourist web application, you will get to work with different data types and data access scenarios (e.g., fielded data display and update, image upload/download, text search, access controlled information) to provide your users the ability to show off their photos and information from trips they have taken and to seek out photos and information from trips taken by others. Using the application you develop, your users will be able to • Create an account • Upload and download photos to the site and make them accessible to others • Provide descriptions of trips and photos that others can read • Organize photos by location and trip, • Find photos based on location • Find photos based on text searches of descriptions • Locate the place where the photo was taken on a map

From the lesson

UI Layout and Subjects Page

In this module you will add generic UI framework and Subject-specific components to implement a Subjects page that will show the user different views of Subjects (Things and Images) matching query criteria as well as the ability to express and depict the currently selected Subject. As part of the UI framework you will implement a set of parent/child components to manage areas of the page and tabs within areas. You will make heavy use of transcludes to implement this visual layering and to encapsulate the details away from the Subject-based components. You will implement dynamic styling to shrink and expand areas as directed by the user. As part of interacting with Subjects you will implement a Subjects page; divide the page up into sides, areas, and tabs; insert a set of Subject/view-specific components (e.g., lists, images, and details); integrate these components with a new Current Subjects service that will enable each of the components to maintain a consistent view of the user's query results and currently selected Subject. At the end of this module you will have implemented a complete UI framework -- ready to implement the visual display of Subjects using maps in the next module.

Module 7 Introduction2:37

UI: Overall Layout6:12

UI: Subject Page Tabs11:01

UI: Subject Page Areas9:41

UI: Area Left/Right Sides10:01

UI: Subject Page Styling10:15

Meet the Instructors

Jim Stafford
Adjunct Professor, Graduate Computer Science
Computer Science, Whiting School of Engineering

[MUSIC]

In this lecture we will discuss building the subject page tabs and

languaging a parent child controller interaction in order to do this.

As we get started with this tabs lecture, you'll notice in the baseline

that we have a subjects page that has several placeholders for

components that we're going to be placing on the page.

These components are being expressed by just placeholder dibs, and

placed inside fo HTML element tabs.

That have no behavior at this point, because we have not yet

defined any kind of component, or directive to back them.

All right, to get started, we really don't need all our tab groups.

So, what I'm going to do is delete everything, I think, but

the first tab group.

So, that leaves us with a much simpler page.

So, the next thing I want to do is create my tabs component.

And to be able to manage the information that appears within the open, and

close tag.

Within the layout, we are going to create a new folder of tabs.

And I'll create a tabs component, and

to go with the tabs component I need to create a tab HTML file.

And before I forget I need to register with our app config.

And also while we're doing logistics.

Lets include our new tabs component in the job the script manifest.

Okay, so back at the tabs HTML I'm just going to do something really simple.

I'm just going to display Div.

That has a class of tabs pane.

So, when I define my SD tabs, and someone declares it.

This controller will get instantiated, and the page will get displayed.

But that's pretty much it.

So, now, when I do a refresh, we fix one more place for tabs template, okay.

So, now, when we hit refresh, our place holders go away.

The only thing we have to show for is our tabs pane.

That isn't displaying anything.

What we would like Is all this information that's inside the tabs

pane to show up, and just leave tabs to managing it, okay?

In order to do that, we need to bring in the concept of a transclude.

We definine the transclude in the HTML file,

like whatever appears inside the element, place it here.

And it's going to be inside of this div.

And in the components we need to declare it as well.

So, now, we refresh our component place holders are again shown and

that's, because that tab's pane now has a transclude define that says,

whatever inside of me, put inside of me.

Okay, we'll just demonstrate the very simplistic use of transclude.

There's a whole lot more we need to do.

We're going to be going through this really slow to make sure we make a point

as to what constructs are serving what purpose.

The next thing we want are these tabs to come alive,

to actually be registered within the tabs component.

So, in order to do that, the minimum that we have to do is declare a new component.

Of tab, tab, tab,

and right now we don't yet need a URL we will, and

of course we don't have HTML, we don't need transcript.

Let's declare controller for our tab, let's declare a place to remember all

the tabs that we have In the tabs controller, and also within the tabs

controller let's define a method to be able to add a tab to that collection.

Let's just add it to the prototype since we won't be calling it from the HTML page.

We'll just be calling it from the other controller.

Now, really important point.

How does the tab controller get a reference to it's tabs controller,

it's parent?

We make that controller available by adding a require statement.

To our SD tab.

Looking for the component in one of our parents of SD tabs, and calling whatever

its controller is, the tabs controller and having the injected into our controller.

And a documentation states that carrot carrot means look into our parent,

and tabs is the parent of tab, okay, well, that should work.

A single carrot could have been used if there are multiple controllers hanging off

of the same element.

Now, what's also important is the documentation says we can't

just make a call here, when we enter the function,

we need to wait until our dollar on in it to be able to make that call.

All right, so now when I do a refresh, and I look into the tab controller.

It does have a tabs controller, its parent, and that controller, its parent.

Has two tabs, okay?, we're getting somewhere.

Now, back at our tabs HTML, I want to do something with that list of tabs.

So, let's use an un-numbered list to do something with it.

And this un-numbered list is going to take advantage of some bootstrap

styling that's going to make it look like tabs.

And this role property is part of HTML5 for assisted technologies.

It helps HTML readers to know why are we having this unnumbered list.

Now, that's going to be for, building a tab list.

So, within our numbered list we're going to create some list items.

And we'll populate them via the tabs list array that's in our controller.

And within each list item, let's go ahead and create an anchor tag,

let's give it a role of being a tab and then,

of course, let's have it display something, some text, a tab label.

Well, that will get us going some, but you'll see a problem here.

We now have these tabs up here, but they don't say anything.

That's, because we have not assigned a value to label.

Well, wait a minute, you say, didn't I say label equals things?

Label = Images, but we didn't declare that in the component.

Well, that's easy to fix.

So, let's come back into our component, uncomment bindings and add label.

This is a one way binding for, string-like properties.

Value.

Just expect to read these things.

Now, when hit refresh, okay, starting to look like tabs here.

We are getting somewhere.

All right, but now let's see if we can improve this concept and

make one of the tabs know that they are the current tab.

And they should come to the forefront.

So, lets extend our HTML page as some kind of concept of active.

That if the tab says it's selected, let's add the class active to the list item.

It should do something special, like highlighting that particular pill, and

keep it highlighted, even as we move our mouse away.

And so, we need to have a callback for

when we click on the tab, to be able to make these annotations.

We could set selected here, but we need to deselect the other tabs.

So, in our tabs controller,

in the tabs component we want to register our call back of select tab.

And go ahead and define it in the body of the controller.

And as I said, we want reset set the false all the other tabs.

And only set the selected one to be true.

And then, by default, let's make it a standard that within order,

it's the zero with one that's always active.

So, whosoever put in first, they are selected true.

If we hit refresh at this point, things thinks he's active.

And now if we click on images, it thinks it's active.

If we open up the tab controller, we'll see that things says, false.

And Images say, true, okay?

But what we do?

Even now if we're selecting a particular tab,

we 'll still seeing the body show up here.

We need to make our tab a bit more intelligent, so

that it only displays the contents of the component.

The lower area if it is the current tab.

All right, one thing we might be able to do is put an NG high, or

show in the subjects page,

that might react to something telling it that this tab is hidden or shown.

But we can encapsulate this much better in the tabs component.

Over in the tabs folder I'm going to add a new HTML file, tab HTML.

And whatever I pass in, in the tab element.

Here comes ng-transclude again.

It's going to show up here, but conditionally.

Only if the controller says it's selected.

Okay, all right, this is a nice decorator around some HTML that we're passing in,

and soon to be a more robust component at some point.

Just whatever it is, it's going to have this extra logic applied.

Starting to see the power of transclude?

So, let me register the tab_html without config, come back in to tab component, and

register a template for the tab.

We'll call this tab templateURL.

It too has transclude.

Tabs has no bindings that I know of.

And then we just need to doctor this one up, with inject.

Okay, if we come back out refresh our page, notice we only have one

component showing up, and when we click on images we see the images component.

And not the things.

Things and not the image.

Image and not the thing.

Now, we're cooking with gas.

This is now starting to work the way you think tabs should, right?

And now, if we come back in to our subjects page, and

bring back our full tab definition, hit refresh.

We'll see our three areas.

With independent tabs.

Minus a bit of styling tabs are functional.

In summary, we build a set of parent and

child components namely that are tabs and tab components.

With tabs component being the parent is the overall manager of all over tabs, and

able to accept content for those tabs.

Using ng-transclude.

It managed the overall interaction with tabs with selecting and de-selecting.

Using the list that was populated when the child component was instantiated.

And it displayed a tab bar at the very top of the area that was styled with bootstrap

classes that allowed us to select the individual tab.

The job of the child tab component was initially to just register with the tab,

and was able to locate the parent controller using the require injection.

The child component also identified the identity of the tab,

using a data binding that allowed the label to be passed in from the HTML page.

And then lastly the child component would apply a decorator

to the business component that would leverage ng-show, or

hide based upon whether the tab was selected.

So, we would only get one component showing in the overall tabs area.

What's next?

Subject page areas.

We've shown how to divide individual page areas into tabs.

Now, we would like to divide the overall page into areas with behavior like

hide and expand.

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.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play