Skip to content
This repository was archived by the owner on Mar 3, 2023. It is now read-only.

Ionic_Profile Screen

Jump to bottom
Miroslav Smukov edited this page Jun 25, 2016 · 20 revisions

Adding My Profile Screen

Now that we have the Profile Header reusable component ready, it's time to start working on the implementation of My Profile screen.

My Profile Screen Layout

On My Profile Screen I want to add a picture of the user, his name, occupation, education, interests, what the user is knowledgeable in, and what are his current goals. I want to show the same information both in My Profile Screen and in Contact Screen, with only difference that the Contact Screen is not editable, since it's showing information of other users.

Implementation

As always, I'm going to start by adding a new folder called profilePage and creating the 3 usual files inside it. This initial process has already been covered on Login Screen page.

Controller

We are going to start with the page logic, which will be rather simple (or non-existing) at this point. For now, we'll just obtain a reference to the Profile Header component using ViewChild, and will add the 5 properties to which our UI components will bind to.

Source Code

import {Component} from '@angular/core';
import {ProfileHeader} from '../components/profileHeader';
import {ViewChild} from '@angular/core';


@Component({
  templateUrl: 'build/pages/profilePage/profilePage.html',
  directives: [ProfileHeader],
  queries: {
    header: new ViewChild('header')
  }
})
export class ProfilePage {
  constructor() {
    this.employment = '';
    this.education = '';
    this.interests = '';
    this.knowledgeable = '';
    this.currentGoals = '';
  }

  ionViewWillEnter(){
    this.header.setFullName("Dr. Gregory House");
  }
}

View

Now we are going to design our View. We'll add the code below to the profilePage.html file.

Source Code

<!-- code omitted for brevity -->

<ion-content padding class="profilePage">
  <profile-header #header></profile-header>

  <ion-item>
    <ion-input type="text" style="margin-top:10px"
      placeholder="Head of Diagnostic @ PPT Hospital"
      [(ngModel)]="employment"></ion-input>
  </ion-item>
  <ion-item>
    <ion-input type="text"
      placeholder="Attended Hopkins University 1979-1984"
      [(ngModel)]="education"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label stacked>Interests</ion-label>
    <ion-textarea rows="3"
      placeholder="Chemistry,  Piano , Guitar, Android, Economy, Football..."
      [(ngModel)]="interests"></ion-textarea>
  </ion-item>
  <ion-item>
    <ion-label stacked>Knowledgeable In</ion-label>
    <ion-textarea rows="3"
      placeholder="Classical Music,  Fitness, Movie Trivia, HTML5, Android, JavaScript..."
      [(ngModel)]="knowledgeable"></ion-textarea>
  </ion-item>
  <ion-item>
    <ion-label stacked>Goals</ion-label>
    <ion-textarea rows="3"
      placeholder="Learn Ionic2, Find a team for basketball..."
      [(ngModel)]="currentGoals"></ion-textarea>
  </ion-item>
</ion-content>
ion-input

ion-input is meant for text type inputs only, such as text, password, email, number, search, tel, and url. Ionic still uses an actual <input type="text"> HTML element within the component, however, with Ionic wrapping the native HTML input element it's able to better handle the user experience and interactivity.

Similarily, <ion-textarea> should be used in place of <textarea>

placeholder attribute serves the same purpose as android:hinton the EditText view in Android. This is used to specify a text value that will be displayed in an empty input component, and will disappear after you start typing. This is a pretty useful feature that can help users understand what is expected of them, and what's the purpose of a specific input.

ion-label

Labels are placed inside of an ion-item element and can be used to describe an ion-input, ion-toggle, ion-checkbox, and more.

Label accepts different attributes that makes them behave differently. Here we are using the stacked attribute. Here's the full list:

  • fixed - A persistent label that sits next the input.
  • floating - A label that will float about the input if the input is empty or loses focus.
  • stacked - A stacked label will always appear on top of the input.
ion-item

We are using an ion-item to group together the ion-label and ion-textarea, so that our label correctly reacts to user inputs on its corresponding input component.

Binding our View to Controller

You probably noticed the [(ngModel)] attribute on all of our input components. Those attributes are binding to corresponding properties that we defined earlier inside the constructor of our controller. The usage of both the parentheses and brackets [()] tells Angular2 that we want to have a two-way binding on this component.

In total, there are three types of binding:

  • [ ] - one-way from the model to the view (aka Property Binding)
  • ( ) - one-way from the view to the model (aka Event Bindnig)
  • [( )] - two-way where data flows in both directions

Styling

I also applied some styling to the inputs and labels.

profilePage.scss

Source Code

.profilePage {
  ion-label{
    font-weight: bold;
    font-size: medium;
  }
  ion-input {
    input {
      margin-left: 0px;
    }
  }
}
app.core.scss

Source Code

ion-item{
  .text-input {
    font-size: large;
  }
}
app.variables.scss

Source Code

$label-ios-text-color-focused: map-get($colors, secondary);
$label-md-text-color-focused: map-get($colors, secondary);
$label-wp-text-color-focused: map-get($colors, secondary);

$text-input-ios-highlight-color: map-get($colors, secondary);
$text-input-md-highlight-color: map-get($colors, secondary);
$text-input-wp-highlight-color: map-get($colors, secondary);

Ionic2 by default highlights the label and input's border in primary color. I wanted to change this behavior and use the secondary color instead, and the above is how I achieved this. The map-get($colors, secondary) is a sass way of accessing the map $colors and getting the value for the key secondary, which basically returns our secondary color in this case.

Conclusion

Creating the My Profile page wasn't too hard. It was pretty much as straightforward as with Android Native approach, however, I did noticed some limitations. One of them is that the ion-textarea isn't dynamically adjusting the height as new lines are added to it, which is not the case in Android Native approach. I've read about some third party components that can enable such a feature in Ionic 1, but I haven't yet found anything for Ionic 2.

Below you can see a screenshot of the implemented My Profile page (left), and the Contact page (right) that we'll implement next.

Profile and Contact Layout

References

Commits

Content

Clone this wiki locally