Ionic Range komponenta

U ovom ću blog postu pokazati kako koristiti Ionic Range komponentu koja korisnicima mobilne aplikacije omogućava odabir vrijednosti pomicanjem klizača po horizontalnoj liniji.

Ionic Range komponenta

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

Korištenje komponente

U ovom slučaju nisam morao instalirati nikakav Ionic Native plugin. Dovoljno mi je bilo samo vidjeti što kaže dokumentacija.

Ako u aplikaciju ubacim sljedeći kod, iz dokumentacije, on neće raditi ništa osim što će stajati na ekranu i omogućiti pomicanje klizača.

Zato svakom </ion-range> elementu dodajem funkciju (ngModelChange)="prikazVrijednosti($event)" koja će omogućiti dohvaćanje vrijednosti klizača.

Funkcionalnost se sastoji od samo jedne funkcije.

Što na kraju izgleda ovako:

Ionic Range komponenta

Osim toga, mogu se napraviti i konkretnije stvari. Npr. klizač za izračun broja mjeseci otplate kredita pri čemu je 1 mjesec minimalna vrijednost, a 120 mjeseci tj. 10 godina maksimalna vrijednost.

Funkcionalnost sada izgleda malo drugačije

Ionic Range komponenta

Zaključak

S obzirom da je ova komponenta toliko jednostavna tu se nema što posebno za zaključiti osim da je pomoću ove komponente moguće poboljšati korisničko iskustvo korištenja Ionic aplikacije.

I za kraj, package.json datoteka

Ionic Insomnia – Nitko nije lud da spava

Iako je imperativ svake mobilne aplikacije brzina nekada je jednostavno potrebno čekati da se nešto unutar aplikacije dogodi.

Npr. ako je u tijeku nekakva sinkronizacija koja traje dulje od zadanog vremena mobilnog uređaja prije gašenja ekrana dogoditi će se da će se ekran ugasiti za vrijeme te sinkronizacije. U tom se slučaju može dogoditi, ako drugačije nije postavljeno, da se sinkronizacija prekine.

Kako bi se takav scenarij spriječio i kako se korisnik mobilne aplikacije ne bi zbunio zbog iznenadnog gašenja ekrana u pola neke radnje može se koristiti Insomnia plugin.

Ionic Insomnia

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu.

Insomnia

Ionic Native plugin koji ću u ovom slučaju instalirati zove se Insomnia.

Instaliram ga sljedećim naredbama:

I navodim ga unutar app.module.ts.

Tek sada ga mogu koristiti unutar aplikacije.

Za potrebu ovog primjera funkcije ću pozivati klikom na gumb.

Ionic Insomnia

Klikom na gumb keepAwake spriječavam mobilni uređaj da ode u sleep mode, a klikom na allowSleepAgain ponovno dopuštam zadano ponašanje. U ovom slučaju ekran uređaja ugasi se nakon 15 sekundi neaktivnosti.

Zaključak

Insomnia je odličan plugin koji svoju svrhu u potpunosti ispunjava. Različiti su scenariji u kojima može biti korišten. U ovom blog postu prikazan je samo jedan od njih.

Za kraj, struktura projekta prema package.json

Ionic Tabs App – HomePage se učitava prije AppComponent

U ovom ću blog postu pokazati kako spriječiti da se AppComponent učitava nakon HomePage.

Kada se kreira nova Ionic aplikacija koristeći tabs predložak kao rootPage odabrana je TabsPage komponenta koja unutar sebe poziva HomePage.

U tom slučaju ako se nekakva logika stavi unutar app.component.ts i onda ovisno o nekom uvjetu učita HomePage ili neka druga stranica

Kreiranje aplikacije

Novu aplikaciju kreiram naredbom

I nakon što pokrenem aplikaciju

mogu vidjeti da se HomePage učitala prije AppComponent.

Uzrok tome nalazi se unutar app.component.ts datoteke gdje se definira rootPage. U ovom slučaju to je TabsPage.

Gore se može vidjeti da TabsPage komponenta kao tab1Root uzima HomePage komponentu i zato se ona učitava prije AppComponent.

Ionic Tabs App - Kako spriječiti da se AppComponent učitava nakon HomePage

Kako bi se to spriječilo potrebno je napraviti sljedeće:

Ionic Tabs App – Kako spriječiti da se AppComponent učitava nakon HomePage

Struktura projekta prema package.json

Ionic 3 – Searchbar komponenta

Za razliku od blog postova Ionic 3 – Autocomplete polje za unos i Ionic 3 – select, search i autocomplete komponenta u kojima sam obradio temu autocomplete polja za unos u ovom ću blog postu obraditi primjer polja za filtriranje sadržaja.

Ova je funkcionalnost podržana od strane Ionic i nije potrebno instalirati dodatne Ionic Native pluginove.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju

Aplikacija će se sastojati od jednog ekrana sa prikazom trenutnih članova OSC-a na poveznici http://softwarecity.hr/clanovi/.

Ionic 3 – Searchbar komponenta

Kreiran je niz nizPodaci koji sadržava popis članova OSC-a.

Searchbar komponenta

Sada ću dodati Searchbar komponentu.

Aplikacija sada izgleda ovako

Ionic 3 – Searchbar komponenta

U pregled sam dodao </ion-searchbar>

Osim toga, dodao sam još i funkciju getItems() koja je zadužena za filtriranje.

Jedina razlika između moje funkcije i ove iz službene dokumentacije

je što sam ja omogućio filtriranje pomoću tri parametra (ime, prezime i tvrtka).

Zaključak

I to je sve! Iz ovog se primjera može vidjeti koliko je jednostavno napraviti filtriranje sadržaja koristeći search polje unutar Ionica.

Ionic 3 – kako spriječiti slučajno gašenje aplikacije

U ovom ću blog postu pokazati kako spriječiti slučajno zatvaranje Ionic aplikacije pritiskom na hardversku/kapacitivnu back tipku na Android mobilnim uređajima.

Kada korisnik pritisne back tipku pojavit će se skočni prozor s pitanjem želi li stvarno zatvoriti aplikaciju ili ne.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu kako bi kasnije mogao aplikaciju pokrenuti na Android mobilnom uređaju.

Ionic Platform

Najbolja stvar u svemu je što za ovu funkcionalnost nije potrebno instalirati dodatne Ionic Native pluginove.

Provjeru pritiska hardverske/kapacitivne back tipke postavit ću unutar dvije komponente čisto iz razloga da pokažem dva načina kako je to moguće učiniti.

Unutar app.component.ts Platform već imam tako da ću dodati još i AlertController.

Ionic 3 – kako spriječiti slučajno gašenje aplikacije

Kada je u pitanju home.ts komponenta ondje trebam uvesti Platform i AlertController.

Zaključak

Ovo je jedan od načina kako spriječiti slučajno gašenje Ionic aplikacije pritiskom hardverske/kapacitivne back tipke.