Icons and Floating Inputs: Ionic

I was skimming the Ionic Worldwide Slack channel and saw this post:

Hi all,
i stuck on mixing an `ion-icon` with an `floating label` like in this the *Angular Material Bootstrap Inputs Demo* (https://mdbootstrap.com/angular/components/#).

I tried this:

< ion-item>
< ion-icon slot="start" name="bulb" color="ownred">< /ion-icon>
< ion-label position="floating">name< /ion-label>
< ion-input type="text" [(ngModel)]="newItem.name">< /ion-input>
< /ion-item>

 

But this will center the icon and not align it on bottom, like in the shown picture.

Do you have any idea?

This got me thinking how to create this. My work machine was being updated to Mojave, so I had a few moments to play around with a solution.

The one I came up with was to break the problem into two parts. I figured that I needed to isolate the icon from the label and input set, so I turned to the ion-grid component to handle that. By using the align properties of Flexbox, I could position the elements how I needed.

	<ion-header>
	<ion-toolbar>
	<ion-title>
	Ionic Blank
	</ion-title>
	</ion-toolbar>
	</ion-header>
	<ion-content padding>
	<ion-grid>
	<ion-row align-items-end>
	<ion-col size="1" align-self-bottom>
	<ion-icon name="mail" size="large" [ngClass]="{'activeInputIcon': isLabelActive}"></ion-icon>
	</ion-col>
	<ion-col>
	<ion-item>
	<ion-label position="floating">Floating Label</ion-label>
	<ion-input (ionBlur)="toggleIcon($event)" (ionFocus)="toggleIcon($event)"></ion-input>
	</ion-item>
	</ion-col>
	</ion-row>
	</ion-grid>
	</ion-content>

view raw

home.page.html

hosted with ❤ by GitHub

In playing with the reference that was supplied, When the input received focus, the icon also changed color. To make that action happen, I add to event handlers on the input for the ionBlur and ionFocus events.

	import { Component } from '@angular/core';
	@Component({
	selector: 'app-home',
	templateUrl: 'home.page.html',
	styleUrls: ['home.page.scss'],
	})
	export class HomePage {
	isLabelActive: Boolean = false;
	constructor () { }
	toggleIcon(evt) {
	this.isLabelActive = !this.isLabelActive;
	}
	}

view raw

home.page.ts

hosted with ❤ by GitHub

The handler for those events simply toggles a boolean. I use that variable’s state to trigger the CSS class state using [ngClass]=“{‘activeInputIcon’: isLabelActive}” on the ion-icon. So, when the isLabelActive is true, the activeInputIcon class is applied.

	.activeInputIcon {
	color:#3880ff;
	}

view raw

home.page.scss

hosted with ❤ by GitHub

With that, we have rebuilt a sample of the combined icon and floating label input.

Now, this sample is very basic. It does not handle multiple inputs so you will need to create a solution to solve that problem. For a bigger challenge, this entire element could be wrapped into a custom component…but I will leave that up to someone else.

PWA Icons and Ionic Resources

Ionic’s support for Progressive Web Apps (PWAs) continues to improve. Currently, there is one small hiccup in the workflow, the generation of icons. When you run

$ ng add @angular/pwa

a manifest.json file is automatically generated and a set of icons added to the src/assets/icon directory. If you have been using Ionic to generate native mobile apps, then you are probably familiar with this command:

$ ionic cordova resouces

This CLI task will generate a collection of icons that need to be included. Unfortunately, it currently does not generate all the sizes that are referenced in the manifest.json file. To save a little time here is a handy table of the icons a PWA should have and the corresponding icon from Cordova.

PWA	Cordova
icon-72×72.png	drawable-hdpi-icon.png
icon-96×96.png	drawable-xhdpi-icon.png
icon-128×128.png	–
icon-144×144.png	drawable-xxhdpi-icon.png
icon-152×152.png	icon-76@2x.png
icon-192×192.png	drawable-xxxhdpi-icon.png
icon-384×384.png	–
icon-512×512.png	–

You will need to generate three icons to have a complete. There is a 1024×102 icon available that can be downsized quickly.

Ionic Community

The Ionic team recently updated their website to highlight various aspects of the world-wide community. As part of that, they have highlighted various individuals as ‘Ionic Leaders’. I am honored and humbled to be among some great company.

Anyone who follows me knows my passion for mobile development, and in particular Ionic. I don’t recall when I discovered the Ionic Framework, but I do recall seeing that it was built atop Apache Cordova and AngularJS. I had just finished recording two video courses on PhoneGap Build and Apache Cordova but knew very little about AngularJS. As a rule, I had tended to shy away from large frameworks due to the nature of prototype development. Not long after, I saw another component library that leveraged the same base technology stack. Thus, I made the commitment to begin learning AngularJS and the Ionic Framework. I quickly saw the power that these two frameworks offered and was sold on them as my solution.

Now, after all these years playing, building, and helping, I am so convinced that I made the right decision. I am looking forward to the new edition of Mobile App Development with Ionic, as well as, recording new lessons for egghead.io

To Ionic and beyond!

Using Adaptive Icons in Ionic & Cordova

Starting with the release of Android Oreo comes the need to support adaptive icons in our applications. Unfortunately, Cordova does not support this style of Icons directly yet. If you have built a Cordova application and installed it on either an Android device running Oreo or Pie, you will see your icon is shrunken within a white circle. To fix this we need to use Adaptive icons to have a proper looking app icon. I just released a lesson on egghead.io will show you how to generate an adaptive icon and adjust your config.xml file so it can be used.

Essentials of Adobe XD

Want to learn how to use Adobe XD in your workflow? I will be giving an online training course through UXPA on August 1 and August 8, 2018. This workshop will first introduce you to its design tools, once we have our design in place, we will use its built-in prototyping features to create an interactive demonstration of our design. We will go further by showing how we can share our concepts with teammates, clients or even conduct user tests. Finally, the workshop will teach you how to take your project and export the content to the development team, as well as create a design spec.

Register Now

Price: Students: $70; UXPA International Members: $280; Non-members: $500

Course outline

Session 1	Session 2
Welcome and set up check What is XD? Overview of the UI menus tools property panel UI kits Creating Artboards Working with vectors Working with text Working with bitmaps Understanding layers Using symbols Exploring the assets panel Using the repeat grid Working with other programs Using CC libraries Exercise: create a simple five screen design.	Prototyping Creating interaction flow Adjusting transitions Previewing the prototype Recording a walkthrough Previewing on Device Sharing a prototype Reviewer comments Manage links Exporting assets Creating a design spec Using Zeplin with Adobe XD Wrap up

Intro to Electron|Build Amazing Desktop Apps

Recently I gave a presentation on Electron to the JavascriptLA user group. I had a great time show what Electron can do. The presentation was recorded and you can watch it here.

Using PhoneGap Build & Ionic

Recently someone asked how to use PhoneGap Build and Ionic together. Being slightly familiar with both, I thought a short post on this would be in order. If you are not familiar with PhoneGap Build, it is a service from Adobe that allows you to compile your PhoneGap apps in the cloud. If you have a Creative Cloud account, you have access to this service. The service is fairly straightforward, take your web app, an associated config.xml file, and the app’s icons & splash screens, zip them up, then upload that file to PhoneGap Build. After a bit of work, you have native iOS and Android apps ready to be installed (providing you have your signing keys in order).

Using PhoneGap Build with Ionic based applications requires a few extra steps. First, we need to generate a production-ready version of our application. Normally, the Ionic build scripts that are run by the Ionic CLI handle this for use. But we are not building locally so this won’t help us. Instead, you need to make that call yourself. The command to generate a production ready app is

$ ionic build --prod –release

The Ionic CLI will run a set of commands generating your app in its production-ready state. This output is located in the www folder.

Now, we need to assemble the rest of the items that PhoneGap Build requires. In new folder, first copy over all the assets within that www folder. Next, copy over the config.xml file. If you are not familiar with this file, this is what PhoneGap/Cordova uses to define most of your app’s properties (icons, splash screens, plugins, etc). Speaking of icons and splash screens, we need to copy over the resources directory as well. In the end, you should have a folder that looks like this:

With all our required elements in place, simply zip this directory and upload it to PhoneGap Build. If you need more help understanding PhoneGap Build, you can check out my Lynda.com course.

Now, alternatively, you can use Ionic’s own Ionic Pro service to do the same thing, with a more integrated workflow.

Hope this helps!

 

 

AngularFire Update: Ionic Book

One of the challenges in writing a technical book is that the content can become outdated as the software undergoes updates. Hence, why we had to release a revised edition of Mobile Apps with Ionic. Recently, AngularFire had an update that affected the sample To-Do app in Chapter 7. This post is going to walk you through the changes. The code has been updated to the GitHub repo.

One first changes you need to make is what you install from npm. In the book, I have you run this command:

$ npm install angularfire2 firebase –save

However, we need to now install one more package, promise-polyfill in order to properly build our application. The new command is:

$ npm install angularfire2 firebase promise-polyfill –save

The first set of changes we need to make is in the app.module.ts file. The capabilities of Firebase (and AngularFire) are growing, as such, they are breaking each of the features into smaller modules. By doing so, our code base only has the elements it needs. No need to have FireBase Auth in our code if we aren’t using it. Our AngularFire imports should now look like this;

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';

We still need to define our apikey, domains, etc in the config object and pass that into the AngularFireModule.initializeApp(firebaseConfig)

We now also need to add AngularFireDatabaseModule  in our imports array as well.

The final item to change is the providers array, you now need to include AngularFireDatabase.

Turning to the tasklist.ts file, we have several items to modify. We now have several new imports:

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

The first brings in the AngularFireDatabase and AngularFireList modules. One of the major changes with AngularFire 5, was moving anay from custom types to more generic types. Hence, why the second import of the Observable package from rxjs.

Next we need to change our variables and their types:

taskList: AngularFireList<Task>;
tasks: Observable<any[]>;

The taskList variable will hold the AngularFire data in its ‘native’ form, while the task variable will have a clean version of the data that our template can reference.

In the constructor, we define the values for both of these variables:

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

First, we get the list of to-dos from our Firebase database, and assign that to the tasklist. Next, we call the valueChanges method on the taskList. From the AngularFire docs; it returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the method provides only the data.

There are several other data methods available, and you should take the time to review them when you begin working with AngularFire in earnest.

With our data now in different variables, we need to adjust our add, delete, and update calls. Let’s change the add code first. If you grab the source code from GithUb, you will see I have added support for either the native Dialog, as well as the Ionic Alert Controller. The two lines that matter are these:

const newTaskRef = this.taskList.push({ id: '', title: data.task, status: 'open' });
newTaskRef.update({ id: newTaskRef.key});

One of the other changes in AngularFire 5, is moving away from being so key-based. As such we need to store the key within our record now. The actual method to add a record to Firebase is still the same push(). But now we get the result of that action, then immediately update itself with the generated id.

Next, we can adjust the markAsDone function. Migrating from the $key code, our new code is simply:

markAsDone(slidingItem: ItemSliding, task: Task) {
    task.status = 'done';
    this.taskList.update(task.id, task)
    slidingItem.close();
}

Our final method to change is the removeTask function. The code is now:

removeTask(slidingItem: ItemSliding, task: Task) {
    this.taskList.remove(task.id);
    slidingItem.close();
}

The final tweak is to our interface definition for the task. We need to support this new id attribute, so it now becomes:

export interface Task {
  title: string;
  status: string;
  id:string
}

Hope this short post, gets you back on track working with Ionic and Angularfire/Firebase.

 

 

 

 

Electron: From Beginner to Pro Released!

 

Your two crazy co-authors! (Photo Credit: Rachel Luxemburg)

 

 

I am pleased to announce that my latest book, Electron: From Beginner to Pro has been released! This time around I enlisted the help of a good friend, Leif Wells to be my co-author on this endeavor. We took a slightly different approach to writing this book. Instead of having the reader create some app(s) that they have no interest in, we focused directly on the features of Electron. This also let us avoid having to either pick a framework like Angular, Vue or React, and exclude some readers.

SoCalCodeCamp Presentations

I was scheduled to give three talks at this weekend’s SoCalCodeCamp. Unfortunately, I have to fly to Toronto to attend a dear friend’s funeral.

Here are the presentations I had planned to give.

Intro to the Ionic Framework

Real World Ionic Development

Electron: Beginner to Pro