ארכיון תגיות: ionic

שיעור 15 ב-ionic – יכולת slide מובנית לפריטי רשימה

תכונה מעניינת ב-ionic, היא שבמידה ואנחנו מציגים אלמנטים ברשימה, אפשר להציג אותה עם יכולת "הזזה" הצידה, ואז בהזזה להציג אפשרויות נוספות ( כפתורים וכדומה).

כדי לעשות זאת, אנחנו צריכים לעטוף את אלמנט ion-item, באלמנט ion-item-sliding.

במידה ונרצה להכניס כפתורים וכדומה שמופיעים רק בעת ה-slide, נכניס אותם בתוך ion-item-options.

אז המבנה הבסיסי הוא :

  • ion-list
    • ion-item-sliding — בדרך כלל עם *ngFor
      • ion-item
      • ion-item-options

להלן דוגמא פשוטה :

<ion-header>

 <ion-navbar>
 <ion-title>favorites</ion-title>
 </ion-navbar>

</ion-header>


<ion-content padding>
 <ion-list>
 <ion-item-sliding *ngFor="let quote of quotes">
 <ion-item 
 (click)="onViewQuote(quote)"
 >
 <h2>{{quote.person}}</h2> 
 <p>{{quote.text}}</p>
 </ion-item>
 <ion-item-options>
 <button
 ion-button
 color="danger"
 (click)="onRemoveFromFavorites(quote)">
 <ion-icon name="trash"
 
 >Delete</ion-icon>
 </button>
 </ion-item-options>
 </ion-item-sliding>
 </ion-list>
</ion-content>

 

שיעור 14 ב- ionic – חלון קופץ Modal

כדי להציג חלון קופץ, מה שנקרא Modal, נעשה כך :

  • נייבא את ModalController
  • נוסיף לקונסטרקטור משתנה מסוג ModalController
  • בפונקציה המתאימה, נקרא  למתודה create של ModalController, ונעביר לה כפרמטר את הקלאס של page שאנחנו רוצים להציג כחלון קופץ.
  • וכדי להציג, נשתמש במתודה present.

המחשה –

בדוגמא הבאה, הדף שאני מציג בתור חלון קופץ, נקרא QuotePage :

import { Component } from '@angular/core';
import { IonicPage, ModalController} from 'ionic-angular';
import { QuoteService } from './../../services/quote.service';
import { Quote } from './../../data/quote.interface';
import { QuotePage } from './../quote/quote';

@IonicPage()
@Component({
 selector: 'page-favorites',
 templateUrl: 'favorites.html',
})
export class FavoritesPage {
 quotes:Quote[];

 constructor(private quotesService:QuoteService,
 private modalCtrl:ModalController) {
 }

 ionViewDidLoad() {
 
 }
 ionViewWillEnter(){
 this.quotes = this.quotesService.getFavoriteQuotes();
 }

 onViewQuote(quote:Quote) {
 const modal = this.modalCtrl.create(QuotePage);
 modal.present();
 }


}

 

אלא שיש בעיה קטנה …

אם נציץ בתצוגת mobile, בחלון הקופץ שבנינו, נראה שאנחנו לא יכולים לצאת ממנו.

כדי ליצור פונקציה שסוגרת, עם אירוע, וכו', נשתמש במחלקה של ionic שאחראית על ה-View המוצג ברגע זה, מחלקה זו נקראת ViewController.

בכל פעם שמזריקים את ViewController למחלקה, זה מאפשר לנו לגשת לעמוד הפעיל, העמוד שכרגע המשתמש נמצא בו.

המתודה שנשתמש בה היא dismiss, וכשמה כן היא – היא פשוט סוגרת את ה-view האקטיבי. (צריך להיזהר לא להפעיל אותה על root page 🙂 )

------ on the html file ------------


 <button ion-button color="danger"
 (click)="onClose()"
 >Close</button>

------ on the TS file --------------


import { Component } from '@angular/core';
import { IonicPage, ViewController } from 'ionic-angular';


@IonicPage()
@Component({
 selector: 'page-quote',
 templateUrl: 'quote.html',
})
export class QuotePage {
 constructor(private viewCtrl:ViewController) {}

 onClose() {
 this.viewCtrl.dismiss();
 }

}

איך להעביר מידע לחלון הקופץ ?

  • את המידע אנחנו מעבירים בפרמטר השני של יצירת האובייקט .
  • ואנחנו שולפים את המידע ( בעמוד הנפרד של החלון הקופץ )  דרך אובייקט navParams שאותו כבר הכרנו באחד השיעורים הקודמים
  • נקודה מעניינת לשים לב, היא שאני שולף את המידע באירוע המיוחד של ionic שנקרא ionViewDidLoad , והאירוע הזה מתרחש כל פעם מחדש, ולא נעשה לו cache.
העברת המידע בפרמטר השני



onViewQuote(quote:Quote) {

constmodal=this.modalCtrl.create(QuotePage,quote);

modal.present();

}

שליפת המידע בקלאס של הדף חלון שקופץ
ionViewDidLoad(){this.person=this.navParams.get('person');
this.text=this.navParams.get('text');
}

 העברת מידע מהחלון הקופץ, בחזרה אל החלון שהקפיץ אותו

  •  כדי לבצע זאת, נעביר פרמטר במתודה dismiss שסוגרת את החלון הקופץ
  • כדי לשלוף את הפרמטר שהעברנו , בחלון שהקפיץ , "נאזין" לאירוע הסגירה של ה-modal, באמצעות onDidDismiss, ושם נגדיר callback שמקבל פרמטר , וזהו הפרמטר שהעברנו מהחלון הקופץ.
  • חשוב לזכור ! העמוד שמתחת ל-modal לא מתרענן לאחר שה-modal נסגר, זאת אומרת שאם ביצענו דרך ה-modal שינוי כלשהוא שאמור להשפיע על הדף שמתחתיו – אז צריך לדאוג לבצע את השינוי (או לרענן את הדף).
----- on the modal page TS file -------

onClose(remove = false) {
 
 this.viewCtrl.dismiss(remove);
 
 
 }
 
 
----- on the under-laying page TS file -----
 onViewQuote(quote:Quote) {
 const modal = this.modalCtrl.create(QuotePage,quote);
 modal.present();
 modal.onDidDismiss((remove:boolean) =>{
 if(remove) {
 this.quotesService.removeQuoteFromFavorites(quote);
 }
 
 } );
 }

 

מילה על view hooks

שיעור 13 ב-ionic – הודעות למסך alert

ב-ionic יש רכיב מובנה של alert, כדי לעבוד איתו :

  • נזריק לקונסטרקטור משתנה מסוג AlertController
private alertCtrl:AlertController
  • אם עורך הקוד לא השלים לבד , אז לוודא שיש יבוא import של – AlertController
  • בפונקציה שבה אנחנו רוצים להקפיץ את ההודעה, ניצור אובייקט מסוג AlertController  בתוך משתנה, כאשר מעבירים פנימה פרמטרים של ההודעה הקופצת.
    למשל
const alert = this.alertCtrl.create({
title : "Hi", subTitle : "mooo", message:"bzzzz"});

alert.present();

  • אם נרצה להוסיף כפתורים להודעה הקופצת, אז נוסיף מערך של כפתורים
const alert = this.alertCtrl.create({
title : "Hi", subTitle : "mooo", message:"bzzzz"
,buttons : ['Ok']});

alert.present();


אם נרצה להעביר כפתורים, עם יותר שליטה בפרמטרים, אפשר להעביר אובייקטים, לדוגמא :

const alert = this.alertCtrl.create({

title:"fff",

subTitle:"sdfsdf"

,message: "sdfdfssdf",

buttons: [

{ text: 'Ok',

handler: () => {

console.log('ok');

}},

{

text:'cancel',

handler: () => {

console.log('cancel');

}

}

]

});

 

alert.present();


אפשר להוסיף לאחד מהאובייקטים של הכפתורים, מאפיין role=cancel, מה שזה יגרום הוא , שגם אם מישהו לחץ על איזור אחר בדף, כדי לסגור את ההודעה הקופצת, אבל לא לחץ על כפתור ה-cancel שלנו, אז בכל מקרה האירוע handler שהגדרנו עבור יציאה – יופעל.

 

שיעור 12 ב-ionic – רכיבי CSS של ionic – כרטיסים (cards) ורשת (grid)

בתוך ionic יש הרבה רכיבי CSS מובנים, אחד מהם הוא Cards, שמאפשר לעטוף בריבוע נאה כל מיני אלמנטים.

נדגים על לולאה שמציגה מערך כלשהוא :

<ion-cardpadding *ngFor="let quote of quoteGroup.quotes;let i = index">

<ion-card-header>

#{{ i+1 }}

</ion-card-header>

<ion-card-content>

{{quote.text}}

</ion-card-content>

</ion-card>

רכיבי CSS מובנים ב-IONIC – גריד, וכרטיס

בדומה ל- twiter bootstrap, ל- ionic , יש מערכת גריד, שמתאימה למובייל, וגם עיצובים שונים.

לא נעבור על כולם, רק אראה פה שימוש ב-2 רכיבים אלו, בלי הסבר מיוחד, כיון שבוסטסראפ די נפוצה היום, והעיקרון מוכר.

<ion-header>

 <ion-navbar>
 <ion-title>{{quoteGroup.category}}</ion-title>
 </ion-navbar>

</ion-header>


<ion-content padding>

 <ion-card padding *ngFor="let quote of quoteGroup.quotes;let i = index">
 <ion-card-header>
 #{{ i+1 }}
 </ion-card-header>
 <ion-card-content>
 <p> {{quote.text}}</p>
 <p>{{quote.person}}</p>
 </ion-card-content>
 <ion-row>
 <ion-col text-right>
 <button ion-button clear small
 (click)="onAddToFavorite(quote)"
 >Favorite</button>
 </ion-col>
 </ion-row>
 </ion-card>
 <ul>
 
 <li *ngFor="let singleQuote of quoteGroup.quotes">
 {{singleQuote.person}} : {{singleQuote.text}}
 </li>
 </ul>
 
</ion-content>

שיעור 11 ב-ionic, רשימות עם ion-list

ל-ionic יש הרבה רכיבי CSS מובנים, שמתאימים כמובן לאפליקציית מובייל.

רכיב הרשימה נקרא ion-list.

נניח ובקלאס יש לנו מערך כלשהוא של אובייקטים.

אז בדוגמת הקוד הבאה רואים שימוש ב ion-list :

<ion-list>

 

<button

ion-item

*ngFor="let quoteGroup of quoteCollection" (click)="bubu()"

[navPush]="quotesPage"

[navParams]="quoteGroup"

>

 

<ion-icon [name]="quoteGroup.icon"item-left></ion-icon>

<h2>{{quoteGroup.category | uppercase }}</h2>

<p>{{quoteGroup.quotes.length }} Quotes</p>

</button>

 

</ion-list>

ואם נרצה שהרשימה תקבל גם חיצים ללחיצה בצד ימין או שמאל, אז בקובץ ה-variables.scss נוסיף את

$item-md-detail-push-show: true;

$item-wp-detail-push-show: true;

התוצאה של זה, תהיה רשימה יפה של אובייקטים על המסך. בתצורה שמתאימה למובייל.

שיעור 10 ב- ionic, שימוש בטאבים \ תפריט צד (המבורגר)

הסבר תיאורטי על המנגנון של טאבים ב-ionic.

  • כמו שבניווט "רגיל" של ionic, אנחנו מנהלים מערך של דפים.
  • גם בטאבים ובתפריט צד, אנחנו מנהלים מספר מערכים של דפים.
  • כל טאב – מייצג מערך של דפים נפרד.
  • אז כאשר יש לנו דף של טאבים, הוא מכיל למעשה מקום מסויים, שבו מוצג הדף העיקרי. וכל לחיצה, מחליפה את הדף העיקרי, בתוך הדף של הטאבים. זאת אומרת שהדף של הטאבים הוא העוטף.

המחשה – עמוד טאבים ב-Ionic.

הקוד של העמוד הבא, הוא קוד רגיל של angular component, כאשר יש בתוך התבנית תגית של ion-tabs ובתוכה 2 טאבים.

שימו לב אל ההגדרות של כל טאב :

  • ההגדרה [root] – מביאה את הדף מתוך משתנה שמופיע במחלקה.
  • ההגדרה tabTitle – קובעת את הטקסט שיופיע על הטאב
  • ההגדרה tabIcon קובעת את האיקון שיופיע, כאשר הוא נלקח מספרית האיקונים של ionic.

צריך לזכור כמובן להוסיף את העמוד אל app.module.ts, וגם להגדיר בתוך app.component.html , את העמוד בתור ה-root של האפליקציה.

 

import { Component } from '@angular/core';
import { FavoritesPage } from './../favorites/favorites';
import { LibraryPage } from './../library/library';

@Component({
 selector:'page-tabs',
 template:`
 <ion-tabs>
 <ion-tab [root]="favoritesPage" tabTitle="מועדפים" tabIcon="star"></ion-tab>
 <ion-tab [root]="libraryPage" tabTitle="ספריה" tabIcon="book"></ion-tab>
 </ion-tabs>
 `
})
export class TabsPage{

 favoritesPage = FavoritesPage;
 libraryPage = LibraryPage;
}

מהו הטאב הראשון שנטען ? – זהו פשוט הטאב שמופיע ראשון בקוד.

אפשר לשנות זאת באמצעות המאפיין selectedIndex שמופיע בדוקומנטציה.

 

 

שיעור 9 ב- ionic, שליטה בעיצוב הדף

כדי לשלוט בעיצוב, ionic משתמשת בקובץ scss, עבור כל עמוד בנפרד.

כאשר, בנוהל הרגיל של scss, אפשר לשרשר הגדרות בהיררכיה מסויימת.

איך זה מתקמפל ?

בזמן שנריץ, אז ionic תאחד את כל קבצי ה-scss, אל קובץ css אחד גדול

  • מה נגזר מכך ?
    • שאם נשים הגדרת css מחוץ לסוגרים שקשורים לעמוד , אז הם יהיו למעשה הגדרת css כוללת, שתוחל על כלל העמודים.

המחשה

התוצאה של קטעי הקוד הבאים, תהיה תגית p בצבע רקע אדום , רק בתוך עמוד ה-users.

 --- In the HTML file -----
 
 <p>Hi Man</p>
 
 
 --- In the scss File ----
 page-users {
 p {
 background-color: red;
 }
}

הגדרות כלליות של תבנית העיצוב ב-ionic

תחת תיקית theme, נמצא קובץ variables , ובו יש הגדרות כלליות של הצבעים, אפשר לשנות ולראות

$colors: (
 primary: #848484,
 secondary: #32db64,
 danger: #f53d3d,
 light: #f4f4f4,
 dark: #222
);

 

שיעור 8 ב- ionic – מחזור חיים של דף

לדף ב-ionic, יש אירועים שהוא מגיב אליהם.

האירועים האלו הם בנוסף לאירועים הרגילים שעוברים על כל angular component.

ישנם מספר אירועים אפשריים

רשימה של האירועים קיימת בדוקומנטציה ( תחת הכותרת lifecycle events).

  • אירועים "רגילים" מחזירים כלום (כלומר void), ופשוט מתרחשים בזמן שצריך.
  • אירועים שמחזירים תשובה בוליאנית, או promise בוליאני, ובהם אפשר להגיב להתרחשות \ אי-התרחשות של האירוע.

דוגמא למימוש אירוע רגיל

למשל סוג האירוע שמתרחש כאשר הדף נטען לראשונה למערך.

כדי לממש אותו, פשוט נכתוב בקובץ ה-ts פונקציה שנקראת בשם של האירוע – והוא יקרה.

ionViewDidLoad() {

console.log('ionViewDidLoad UsersPage');

}

 

כעת נראה דוגמא יותר מורכבת, לאירוע שמחזיר הבטחה, יש רק 2 אירועים כאלו, והם חייבים להיות כתובים לפני האירועים האחרים.

דוגמא למימוש אירוע עם תשובה בוליאנית, ושליטה בהרשאת הכניסה לעמוד.

בדוגמא הבאה, קיים כפתור בדף home שמפנה לדף users.

בדף users, מימשתי אירוע של  ionViewCanEnter, כאשר ה-תשובה הבוליאנית , חוזרת  אל הפונקציה שטענה את הדף אל תוך המערך – כלומר התשובה מוחזרת לפונקציה בדף  home.

ושם, בפונקציה המקורית – אני מגיב לתשובה שהוחזרה.

------- On home.ts file ---
 onGoToNewPage() {
 this.navCtrl.push(UsersPage)
 .then ((msg) => msg ? console.log("can access") : console.log("not access"));
 }
 
------ On users.ts file ---
ionViewCanEnter(): boolean|Promise<boolean>{
 console.log('ionViewCanEnter');
 const rnd = Math.random();
 console.log(rnd);
 return rnd>0.5;
 }

 

שיעור 7 ב- ionic – קיצורים לניווט

לניווט במקרה שאין צורך בפרמטרים, יש Directives יעודיים של ionic .

נראה אותם בפעולה.

דוגמא 1 – קיצור ב-ionic לניווט לדף ללא העברת פרמטרים.

נעשה 2 פעולות

  • בקובץ ה-ts , נגדיר משתנה שמכיל את הדף שאליו אנחנו רוצים לנווט
    • כמובן צריך לייבא את הדף המתאים.
  • בקובץ ה-html, נכניס כפתור עם הפקודה המקוצרת navPush

התוצאה תהיה כפתור ניווט לדף הרצוי, בלי צורך לממש פונקציה יעודית, ובלי צורך לייבא את navController וכו'.

להלן דוגמת קוד :

------ In TypeScript Component File ------
import { AboutPage } from './../about/about';

...
...

export class HomePage {

 abPage = AboutPage;
 
 ------- In HTML file ------

 <button ion-button [navPush]="abPage">Go To About Page</button>

דוגמא 2 – קיצור לניווט לאחור

אם נרצה כפתור שרק חוזר לאחור, נשתמש ב-directive שנקרא navPop.

להלן דוגמת קוד :

<buttonion-buttonnavPop>Go Back</button>

שיעור 6 ב- ionic – מימוש כפתור חזרה לאחור

בפוסט זה נדגים יצירה של כפתור "חזור אחורה" (שאינו חלק מהתפריט העליון).

כפי שהסברתי באחד הפוסטים הקודמים, הניווט של ionic הוא למעשה מערך. עד כה בכפתורים שיצרנו בפוסט הקודם – רק הוספנו פריט למערך. כעת נציג דוגמא בה אנחנו מסירים פריט מהמערך – ולמעשה באותו רגע חוזרים לאחור.

  • הוספתי הזרקה של navController, וכמובן גם import מתאים.
  • מימשתי כפתור בקובץ ה-HTML.
  • מימשתי פונקציה עבור הכפתור בקובץ ה-Type Script.
קובץ ה-html
--------------------
<ion-header>
<ion-navbar>
<ion-title>MyTitle</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<p>שמי הוא {{ name }}</p>
<buttonion-button (click)="onGoBack()">Go Back</button>
</ion-content>


--------------
קובץ ה-ts
-------------
import { Component, OnInit } from '@angular/core';

import { NavParams, NavController } from 'ionic-angular';

@Component({

selector:'page-user',

templateUrl:'user.html'

})

export class UserPage implements OnInit {

name:string;

constructor(privatenavParams:NavParams,privatenavCtrl:NavController) {

}

ngOnInit() {

this.name=this.navParams.get("userName");

}

onGoBack() {

this.navCtrl.pop();

}

}

חזרה לעמוד הראשי ב- ionic

לאובייקט navController יש מתודה נחמדה שנקראת popToRoot והיא מסירה את כל העמודים, עד לעמוד הראשי – שימושי ביותר.