Viewing and debugging themes for a specific platform

One of the biggest challenges in developing an app is to ensure that it has the desired look and feel for each platform. Specifically, you want to write the code and theme once and have it just work. Another challenge is figuring out the workflow on a daily basis, from writing code and previewing it in the browser to deploying to a device for testing purposes. You want to minimize a lot of unnecessary steps. It's certainly difficult if you have to rebuild the app and test it independently for each mobile platform.

Ionic 2 CLI provides seamless integration to improve your workflow to ensure that you can catch all the issues for each platform ahead of time. You can quickly view the app on various platforms in the same browser window. This feature is powerful because now one can make a side-by-side comparison for each screen with specific interaction. If you want to debug JavaScript code, you employ the same web developer tool that you have been using in the browser. This capability will save you a lot of time instead of waiting to push the app to a physical device, which could take minutes if your app is getting larger.

In this example, you will learn how to modify a theme quickly using Sass variables. Then, you will run the app and inspect different platforms for UI consistency.

Getting ready

There is no need to test the theme on a physical device because Ionic can render iOS, Android, and Windows Phone in the browser.

How to do it…

Here are the instructions:

  1. Create a new app using the tutorial template, as shown, and go to the folder:
    $ ionic start ThemeApp tutorial --v2
$ cd ThemeApp

    Tip

    In Ionic 1, you need to set up Sass dependencies because Ionic uses a number of external libraries for this. However, Ionic 2 has no such requirements because all the dependencies are added when you create the project.

  2. Open the /app/theme/app.variable.scss file and replace the $colors variable with the following commands:
    $colors: (
  primary:    #2C3E50, // #387ef5,
  clear:      white,
  secondary:  #446CB3, // #32db64,
  danger:     #96281B, // #f53d3d,
  light:      #BDC3C7, // #f4f4f4,
  dark:       #6C7A89, // #222,
  favorite:   #16A085 // #69BB7B
);

    Tip

    The default color codes can be commented out as shown in the preceding code.

  3. Open app.html and add the clear attribute to the following code block:
      <ion-toolbar clear>
    <ion-title>Pages</ion-title>
  </ion-toolbar>
  4. Open the ./src/pages/hello-ionic/hello-ionic.html file and replace the contents with the given code:
    <ion-header>
  <ion-navbar primary>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding class="getting-started">

  <h3>Welcome to your first Ionic app!</h3>

  <p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    Follow along on the tutorial section of the Ionic docs!
  </p>
  <p>
    <button ion-button color="secondary" menuToggle>Toggle Menu</button>
  </p>

</ion-content>
  5. Test-run the app in the browser and you should be able to see a screen as follows:
    $ ionic serve -l

    Tip

    The -l (lima) command means render the app for all three platforms.

    How to do it…

How it works…

Ionic 2 has made it very easy to develop and test themes for different platforms. Your typical flow is to modify the theme variable in app.variables.scss first. You should not modify any .css files directly. Also, Ionic 2 project now makes it safe so that you can't accidently edit the wrong core theme files because those core files are no longer in the app folder location.

To update the default color, you just have to modify the color code in app.variables.scss. You can even add more color names, such as clear: white, and Ionic 2 will automatically take care of the rest. That means the clear keyword is available as an attribute to any Ionic element that takes a color name. A few examples are as follows:

<ion-navbar primary>
<button ion-button color="secondary" menuToggle>
<ion-toolbar clear>

The Ionic CLI is a very useful tool for debugging your theme in different platforms. To get help on how to use the Ionic CLI, you can type the following command line in the console:

$ ionic -h

This will list all the options available for you to choose from. Under the serve option, you should familiarize yourself with some of the important features, which are as follows:

Parameters

Description

--consolelogs|-c

Print app console logs to Ionic CLI

--serverlogs|-s

Print dev server logs to Ionic CLI

--browser|-w

Specifies the browser to use (Safari, Firefox, and Chrome)

--browseroption|-o

Specifies a path to open to (/#/tab/dash)

--lab|-l

Tests your apps on multiple screen sizes and platform types

There's more…

You can get more color palettes by visiting Matheus Cruz Rocha's cloned repository at https://github.com/innovieco/ionic-flat-colors.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.226.104.177