Building the home view

The example so far has a blank view with a title, so now you need to add more content into this view. The primary feature of this page is to provide a list of links that will take users to the weather, restaurants, and reservation views. If you’re following along using Git, you should check out the next step:

$ git checkout –f step3

In listing 4.3, there’s a very basic and very blank view. Inside of this view, you’ll put a few things. You’ll add ionContent, which is a generic wrapper for content but has a lot of features you might not notice immediately. Then you’ll create a list of navigational links for each of the views. Lastly, you’ll add some icons to make them a little nicer on the eyes. You can preview the result in figure 4.5.

4.3.1 Creating a content container

ionContent is the most commonly used content container. It provides a number of features:

 Sizes content area to device—It will determine the appropriate height for your con-tent container based on the device.

 Aware of header and footer bars —It knows if there are header or footer bars, and will adjust its size and position accordingly.

 Manages scrolling—It has a number of configuration options to manage scroll-ing. For example, you might want to lock scrolling to be one direction only (horizontally), or no scrolling at all.

There are a lot of options with ionContent, but they’re primarily related to managing the scrolling experience. In most cases you’ll not need any of those options, but you

Listing 4.3 Add template for home view (www/views/home/home.html)

Uses ionView to declare a view template; title is used in navbar and hide-back-button will disable back button

can see the various options in the documentation. Let’s add this tag to the home view.

Open the home view file again and add the code like you see in the following listing.

<ion-view title="Aloha Resort" hide-back-button="true">

<ion-content>

</ion-content>

</ion-view>

That’s it? Yes! In this case ionContent is pretty easy to use, and because you plan to use the default features, you don’t have to make it any more complex than this. The con-tent area will now resize and take the navbar into consideration when it calculates the size and position of the content. Without ionContent, the content would start in the top left corner behind the navbar, which is obviously not desirable.

Listing 4.4 Adding ionContent to home view (www/views/home/home.html)

Intro view

Home view

Reservation view

Restaurants view Weather

view

List of links (list component)

Content area (ionContent) Icons

(Ionicons)

Figure 4.5 The home view with icons and a list of links, and content is correctly placed below the navbar

ionView declared earlier ionContent that

will hold content for view

4.3.2 Using CSS components and adding a simple list of links

Now that you have a content container, you’ll want to add a list of links. Ionic comes with a lot of components that are simply CSS classes applied to elements. If you’re familiar with front-end interface frameworks like Bootstrap or Foundation, you’ll be quite familiar with the method of adding classes to create visual components. Some of the components are mobile-focused designs for several form elements like check-boxes, a range slider, buttons, and more.

Ionic has a list component, which is a pair of classes for a list and each list item.

The list component has a number of style configurations; you’ll start with the most basic and then add icons.

Let’s add a basic list of links to the app, as shown in listing 4.5. While you can use a normal unordered list element, I’ll actually show you how to use a div to wrap a list of anchor tags. This is important to note because the CSS styling applied is very complete and will allow you to use the class on different elements.

<ion-view title="Aloha Resort" hide-back-button="true">

<ion-content>

<div class="list">

<a href="#/reservation" class="item">

See your reservation </a>

<a href="#/weather" class="item">

Current weather </a>

<a href="#/restaurants" class="item">

Nearby restaurants </a>

</div>

</ion-content>

</ion-view>

Listing 4.5 Adding a list to the home view (www/views/home/home.html) Is your content in the wrong place?

The vast majority of the time, you’ll use ionContent to wrap your content. If you ever run into trouble where your content is misplaced on the screen, start by double-checking that you have ionContent in the right place.

There are some situations where you don’t want to use ionContent; you’ll see one example of this in chapter 5 where tabs shouldn’t be inside of ionContent. Some-times you may have to add some CSS to make things display like you want if you don’t use ionContent. For example, if you use ionHeaderBar without ionContent, the content will be positioned under the ionHeaderBar. Ionic tries to make the design and components work in most cases, but some nonstandard use cases require extra CSS.

Adds item class to an element to create a list item, in this case a link to another view

Using a CSS component normally means just following the component guideline and giving elements the proper CSS classes. We’ll look at more-complex lists in the next chapter, but for displaying a simple list of items, this suits our needs quite well. The documentation also shows a number of different list item display types, such as having dividers, thumbnails, or icons.

The list has some links to different URLs that you haven’t yet defined. You’ll add each view individually, and then the app will be able to navigate to that view. With the item class on the anchor tag, it adopts the list item display. These three links are related to the three views (refer to figure 4.1 to see the app flow).

4.3.3 Adding icons to the list items

The last thing you need to do for this view is add some icons. Ionic comes with a set of icons, called Ionicons, that are bundled by default. Icons are used in many places, so you’ll see them frequently. You can view the available icons at http://ionicons.com. The icons are actually a font icon, which are custom fonts that replace standard characters with icons and use CSS classes to display the icons. If you’d like to use another font icon library (such as Font Awesome), you should be able to include that without conflicts.

The list component has a special display mode that uses icons. Using an extra CSS class and adding an icon element will generate the desired effect of having the icon displayed to the left of the text in the list item. Let’s say you’d like the icon to be to the left of the text. You can finish the home view as you see in the following listing by add-ing some icons and updatadd-ing the list item with a new class.

CSS and JavaScript components

In the Ionic documentation, you’ll see that the components are split into two distinct categories: CSS and JavaScript. If you look closely, you’ll notice that some compo-nents appear on both lists, such as header bars and lists. You might wonder why are there two, and is one better than the other?

Some components are CSS-only (buttons), others are JavaScript-only (infinite scroll), while some are both (tabs). CSS components provide a visual display to a component but have no real configuration or interactivity. JavaScript components provide more intelligent and interactive components, which may or may not build from a CSS component.

Some component types are implemented as CSS and JavaScript, such as tabs. You can consider using just the CSS features if you don’t need the features provided by the JavaScript version. While Ionic is very fast, any time you can reduce the use of JavaScript, it can help keep the overhead low.

Also when a component has both CSS and JavaScript versions, you can use the same CSS classes on the JavaScript components to modify the appearance. For example, in this chapter, ionNavBar is using the CSS class to adjust the color.

<ion-view title="Aloha Resort" hide-back-button="true">

<ion-content>

<div class="list">

<a href="#/reservation" class="item item-icon-left">

<i class="icon ion-document-text"></i> See your reservation </a>

<a href="#/weather" class="item item-icon-left">

<i class="icon ion-ios-partlysunny"></i> Current weather </a>

<a href="#/restaurants" class="item item-icon-left">

<i class="icon ion-fork"></i> Nearby restaurants </a>

</div>

</ion-content>

</ion-view>

This is the most common way to include an icon, but because it’s inside of a list, you need to use the special item-icon-left class to get the display you desire. You could also use item-icon-right to have the icons float to the right side.

Icons are often declared like this: <i class="icon ion-calendar"></i>. By default the italics element is an inline element that would modify the text inside. But you have no text inside, just two CSS classes. The first class, icon, gives the element the base CSS styles for an icon, and the second class, ion-calendar, provides the specific icon to display. Together, the inline element becomes an icon. You can see the icon and the entire home view in figure 4.5.

Now the home view is how you want it, so let’s move on to the reservation view, and you’ll learn how to display information using a controller.