Ionic

Vertical Tabs in Ionic

Recently I started thinking about designing some Ionic applications specifically for larger physical screens (tablets and desktop). I wanted to have a layout much like Slack or Flickr for my iPad.

IMG_1364

The basics of this layout are to have a fixed series of icons (tabs) displayed vertically on the left side of the window, and the rest of the window displays that tab’s content. However, currently, the Ionic Tab component can only be positioned horizontally at the top or bottom of the window. To solve this I turned to the SplitPane component.

This component allows me to have two separate containers (a sidemenu container and the main content container) that I can adjust and populate with content. However, the sidemenu will typically respond to various screen widths. Since I want the element to always be visible regardless of the width, I just needed to include the ‘when’ attribute to the ion-split-pane component and set its value to ‘xs’. See the documentation for the other allowable values.

By default, the width of the sidemenu is between 270px and 28% of the window. Since I just wanted a single row of touchable icons, I need to override this. When I first began playing with this component, those values were not directly exposed, but after filing a GitHub issue, they are now available as Sass variables.

In the variables.scss file, is simply add the following variables:

$split-pane-ios-side-min-width: 70px;
$split-pane-ios-side-max-width: 70px;
$split-pane-md-side-min-width: 70px;
$split-pane-md-side-max-width: 70px;

Adding my Tabs

With the container ready, I could move on to the next step, creating the tabs themselves. Each tab was going to be a simple button component like this:
< button ion-button large block clear icon-only>
  < ion-icon name="md-list">
</ button>

I repeat this for the other tabs I wanted to display. Since I was not using the Tab component, the state management was going to become my responsibility. To handle the visual feedback, I add the following code to each button:

[color]="isList ? 'primary' : 'light'"

This code will set the color of the button based on the boolean state of the variable isList. If it is true, Ionic’s primary color will be used, otherwise, the light color will be applied. I added this to each of the remaining buttons, changing the variable for each button.

The final piece was to add a click handler to each button so I could switch the main content.

(click)="togglePage('List')"
In the app.component.ts file, I added that function. For this demo, it handles the state swapping and basic page navigation:
togglePage(whichPage: string): void {
  this.isList=false;
  this.isLocation=false;
  this.isSelf=false;
  this.isNotifications=false;
  this.isSearch=false;
  this.isCamera=false;

  letnewTab:string='';

  switch (whichPage) {
    case'List':
      this.isList=true;
      newTab='PhotosPage';
      break;
    case'Location':
      this.isLocation=true;
      newTab='LocationsPage';
      break;
    case'Self':
      this.isSelf=true;
      newTab='SelfPage';
      break;
    case'Notifications':
      this.isNotifications=true;
      newTab='NotificationsPage';
      break;
    case'Search':
      this.isSearch=true;
      newTab='SearchPage';
      break;
    case'Camera':
      this.isCamera=true;
      newTab='CameraPage';
      break;
   }

   this.nav.setRoot(newTab);
}
Note: You do need to include the @ViewChild into your component and the proper imports as well.
Now, I have a basic working tab system!

Centering the Tabs

I decided to challenge myself a little further and wanted to have the tabs be vertically centered. Since we can safely use Flexbox, this is actually straight forward.
Rather than adjusting an Ionic tag directly (and possibly some unknown cascade), I wrapped my buttons in a new div and gave it a class of ‘centervert’. The CSS is:
.centervert {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
The trick to making this work is to set the height of the div to be 100%. This tells the webview how to calculate the proper positioning.  Here is what the app looks like:
VertialTabsIonic

Vertical ‘Tabs’

I did add a Footer component to have App settings and Log Out button be anchored to the bottom of the column. The content pages are just Ionic generated stubs. I have posted the source for the shell of the application on my GitHub repo. Have fun!

Live Online Training

banner
I am pleased to announce I will be giving another live online training on Ionic 3 through O’Reilly training. The online sessions will be held on September 5 & 6, 2017 from 10:00 am – 1:00 pm PDT.
By the end of this live, online course, you’ll understand:
  • How Ionic, Cordova, and Angular work together to create hybrid mobile apps
  • How to design and program Ionic apps
  • How to publish your applications to the app stores
And you’ll be able to:
  • Generate Ionic applications using the Ionic CLI
  • Use common Ionic UI components
  • Extend your Ionic applications with Ionic Native
  • Preview your applications on your devices
  • Compile your applications to ready them for submission to mobile app stores
Here is the course outline:
The timeframes are only estimates and may vary according to how the class is progressing

DAY 1

Introduction to Ionic (20 minutes)

  • Lecture: What’s new in Ionic 2; introduction to the Ionic CLI; Ionic file structure
  • Hands-on Exercise: Create an Ionic blank template

Introduction to Angular and TypeScript (30 minutes)

  • Lecture: Introduction to Angular and TypeScript
  • Hands-on exercise: Short quiz

Building your first app (30 minutes)

  • Lecture: Building your first app with Ionic2Do; using Ionic serve to preview your application
  • Hands-on Exercise: Compile and run your Ionic2Do app locally in the browser

Break (10 minutes)

Styling your Ionic app (30 minutes)

  • Lecture: How Ionic apps are themed; using Ionic View to quickly preview the app on your device
  • Hands-on Exercise: Preview your app on your mobile device (with data stored remotely)

Ionic Native (30 minutes)

  • Lecture: Adding native touches to your application using Cordova plugins via Ionic Native; publishing the application to the app stores
  • Hands-on exercise: Replace the JavaScript dialog with a native dialog

Debugging Ionic applications (20 minutes)

  • Lecture: How to debug your application
  • Hands-on Exercise: Use Chrome or Safari to remote debug your application

Wrap-up and Q&A (10 minutes)

DAY 2

Building your second app (30 minutes)

  • Lecture: Building an app with IonicParks; exploring Ionic Tabs; loading data; Ionic Lists
  • Hands-on exercise: Build an application using the local data file and rendering the park list

Ionic navigation (30 minutes)

  • Lecture: How navigation works in an Ionic application; using the Ionic generate command to improve your workflow; designing the park details screen
  • Hands-on Exercise: Generate and populate the park details screen of the app

Google Maps integration (30 minutes)

  • Lecture: Adding a map to your application; custom classes
  • Hands-on exercise: Add a live Google map to your application

Break (10 minutes)

Exploring other Ionic components (30 minutes)

  • Lecture: Common Ionic components (slides, popover, date and time, toast, grid, and gestures)
  • Hands-on exercise: Short quiz

Accelerate your application’s development and features (30 minutes)

  • Lecture: The larger elements of Ionic that can accelerate your application’s development and features (exploring Ionic.io, deploy, build, notification, and users)
  • Hands-on exercise: Short quiz

Next steps, wrap-up, and Q&A (20 minutes)

I hope to see you there.
To sign up for the course, visit Safari Online.

What is the Ionic Framework?

I had the good pleasure of presenting to a full room at the recent SoCal Code Camp on the Ionic Framework. Here are my slides from the talk.

ionic-slide

The Ionic Framework combines Google’s Angular with Apache’s Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android (and Electron or Progressive Web Apps). Built atop the web technologies you know and love, this solution can help take your web skills beyond the browser.

More Ionic CLI Updates

In preparation for my Safari Online Training, I was checking all the course instructions and discovered a surprise. With version 2 of the Ionic CLI, we could generate new Ionic apps based on external URLs, like GitHub repos. This is exactly what I did for two of the apps in my book. But, with the latest release of the Ionic CLI, this functionality has been disabled. Here are the steps you need to take to get back on track for each of those sample apps in the book.

IonicParks

Instead of just using the start command in the CLI, now we will need to manually overwrite the src directory with our new starter.

$ ionic start IonicParks tabs

In the IonicPark directory that was just created, delete the src directory.

Next, download the master branch from https://github.com/chrisgriffith/Ionic2Parks to another location. Unzip these files, then copy this src directory into the IonicParks directory. You should now be ready to work your way through the chapter.

IonicWeather

The same procedure for this application.

$ ionic start IonicWeather sidemenu

In the IonicWeather directory that was just created, delete the src directory.

Next, download the master branch from https://github.com/chrisgriffith/Ionic2Weather to another location. Unzip these files, then copy this src directory into the IonicWeather directory. You should now be ready to work your way through the chapter.

 

 

AngularFire 2 Updates

As I warned in the book about “everything in beta” (a phrase my friend Leif Wells loves to quote), some recent updates to AngularFire 2 impact the To Do application in my book.The reason behind these changes is by breaking AngularFire into smaller modules, your app will load and run faster (always a good thing). For example, if you don’t need the user auth module in AngularFire, no need to load it.

There are just a few minor changes, so let get started…

First, make sure you have installed the latest versions of AngularFire2 and Firebase. Check your package.json and check the version numbers:

"angularfire2": "^4.0.0-rc.0",
"firebase": "^3.9.0"
If you are referencing an older version, update the version numbers and update your node modules.
Next, in the app.module.ts file you need to now import this additional module:
import { AngularFireDatabaseModule } from 'angularfire2/database';

and then include it within the imports array:

imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp),
  AngularFireModule.initializeApp(firebaseConfig),
  AngularFireDatabaseModule
]
The tasklist.ts file will also need two changes. The first is to change
import { AngularFire, FirebaseListObservable } from 'angularfire2';

to

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

The AngularFire variable will need to be typed to AngularFireDatabase.

constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dialogs: Dialogs) {...}

Finally, our reference to the data is now just:

this.tasks = af.list('/tasks');

And with that, your Ionic2Do app will run with the latest AngularFire.

Using the new Ionic CLI

With the release of the new Ionic CLI, several of the commands used throughout my book, Mobile App Development with Ionic 2, are now different. Here is a short table of the slight changes you need to make in order to use the new CLI:

v2 command v3 command
ionic start [appName] [template] --v2 ionic start [appName] [template]
ionic platform add|remove [platform] ionic cordova platform add|remove [platform]
ionic plugin add|remove [plugin] ionic cordova plugin add|remove [plugin]
ionic emulate ionic cordova emulate
ionic run ionic cordova run
ionic build ionic cordova build

If you ever have a question, the help in the CLI is greatly improved. You just need to add --help after any command.