VueJS 2: píšeme komponentu - schématická značka (SVG grafika)

O komponentách ve VueJS již na tomto blogu vyšlo: VueJS 2: komponenty a VueJS 2: píšeme komponentu - zobrazení věku

Vlastní komponenta pomocí VueJS

Zadání

Vytvoříme komponentu, která zobrazí schématickou značku rezistoru. Použijeme přitom SVG grafiku.

Řešení

Poznámka: jde o ukázku, nebude se provádět kontrola vstupních údajů (hodnoty atributů).

Komponenty se bude jmenovat svg-resistor (anglický název), bude mít atributy: x (x-ová souřadnice), y (y-ová souřadnice), rotate (úhel natočení), color (barva).

Na webové stránce se použije tímto způsobem (ovšem uvitř elementu <svg>!): 

<svg-resistor x="120" y="120" :rotate="-45" ></svg-resistor>

Každý z atributů x, y, rotate, color má svou výchozí hodnotu; nebude-li zadán (jako v tomto případě, kdy chybí color), bude použita výchozí hodnota.

Deklarace komponenty

Vlastnosti (properties) komponenty jsou v části props, u každé je uveden datový typ a výchozí hodnota.

V části computed (vypočítané nebo vyhodnocené hodnoty) se skládá textový řetězec, jehož výsledek může vypadat např.: translate(100, 80), rotate(-90)a slouží k posunu (translate) a otočení (rotate) komponenty při jejím vykreslení uvnitř elementu SVG.

Část template definuje vizuální podobu komponenty, tj. to, co VueJS vloží do webové stránky namísto komponenty <svg-resistor></svg-resistor>

Vue.component("svg-resistor", {

  props: {

    x: {

      type: Number,

      default: 0

    },

    y: {

      type: Number,

      default: 0

    },

    rotate: {

      type: Number,

      default: 0

    },

    color: {

      type: String,

      default: "black"

    }

  },

  computed: {

    transform: function(){

      return "translate(" + this.x + ", " + this.y + "), " + "rotate(" + this.rotate + ")";

    }

  },

  template: '<path :transform="transform" d="M 0, 0 h 10 v -7.5 h 30 v 15 h -30 v -7.5 M 40, 0 h 10 "  :stroke="color" fill="none" />'

});

Použití v HTML

<svg width="302" height="302">

  <svg-resistor x="120" y="120" :rotate="-45" ></svg-resistor>

  <svg-resistor x="30" y="80" :rotate="0" ></svg-resistor>

</svg>

Výsledek

Jak vypadá výsledek se můžete podívat tady (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).

VueJS 2: píšeme komponentu - zobrazení věku

Vlastní komponenta pomocí VueJS

Zadání

Vytvoříme komponentu, která ze zadaného roku narození vypočítá a zobrazí věk.

Řešení

Poznámka: komponenta bude velmi jednoduchá, jde jen o ukázku; nebudou se kontrolovat vstupní data.

Komponenta se bude jmenovat age, s jedním atributem born (rok narození). Použije se na webové stránce tímto způsobem: <age born="2000"></age>

Výsledkem bude zobrazený věk.

1. krok

Vue.component("age", {

  template: "<span>{{age}}</span>",

});

Do HTML stránky se vykreslí obsah template, tj. <span>{{age}}</span>

Uvnitř spanu je ve dvojitých složených závorkách proměnná age (nemá nic společného s názvem komponenty!). Místo ní se vloží její hodnota, tj. vypočítaný věk.

2. krok, přidání atributu born

Vue.component("age", {

  template: "<span>{{age}}</span>",

  props: ["born"],

});

Přidali jsme do props atribut born, který použije naše komponenta. Tento atribut se chová jako proměnná, jejíž hodnotu zadáme. To nám umožní ji použít  stylem <age born="2000"></age>

3. krok, výpočet věku

Vue.component("age", {

  template: "<span>{{age}}</span>",

  props: ["born"],

  computed: {

    age: function(){

      var actYear = new Date().getFullYear();

      return actYear - this.born;

    }

  }

});

Přidali jsme do computed výpočet age; ve funkci se do lokální proměnné actYear uloží aktuální rok, funkce vrací návratovou hodnotu příkazem return (jako rozdíl mezi aktuálním rokem a rokem narození), která se vloží do proměnné age. Její hodnota (tj. vypočítaná hodnota) se zobrazí mezi dvěma spany. Pozor, atribut born musíme uvnitř funkce zapsat jako this.born

4. použití v HTML

<age born="1974"></age> <age born="2000"></age> <age born="2007"></age>

Výsledek

Jak vypadá výsledek se můžete podívat tady (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).

VueJS 2: komponenty

Poslední dobou se prosazují webové komponenty (vysvětleno např. zde). Krátce řečeno, jsou to uživatelsky definované tagy pro HTML. Buď jen zobrazí určitý obsah nebo umí i reagovat na hodnoty atributů a/nebo na události.

Webové komponenty se dají skvěle psát i pomocí frameworku VueJS. Je k nim výborná, podrobná a srozumitelná dokumentace.

Vypůjčím si hotový příklad z dokumentace.

1. Registrace komponenty (definice)

Vue.component('my-component', {

  template: '<div>A custom component!</div>'

})

Název nové komponenty (HTML tagu) je my-component, tag se tedy zapíše <my-component> (samozřejmě je to párový tag).

Template je HTML šablona, neboli to, co se zobrazí v prohlížeči v místě, kde se použije komponenta.

2. Vytvoření instance VueJS

// create a root instance

new Vue({

  el: '#example'

})

3. Použití komponenty v HTML stránce

<div id="example">

  <my-component></my-component>

</div>

4. Výsledný kód v prohlížeči (zobrazená HTML stránka)

<div id="example">

  <div>A custom component!</div>

</div>

Na místě, kde je ve zdrojovém kódu zapsána komponenta <my-component></my-component> se zobrazí obsah šablony (to, co je definováno jako template).

Komponenty mohou mít i atributy, které mohou (nemusí) mít hodnoty. Také mohou reagovat na události.

Při psaní webových stránek a programování webových a hybridních mobilních aplikací se webové komponenty silně prosazují. Zpřehledňují kód a umožňují jednoduchým způsobem opakovaně použít již definovaný obsah a/nebo chování.

Framework7 + VueJS 2, oficiální podpora

V oficiální dokumentaci k frameworku pro vývoj hybridních mobilních aplikací - Framework7 - se objevila informace o provázání mezi Fr7 a VueJS, konkrétně na této stránce.

Pro usnadnění práce vývojářům také zveřejnili tři výchozí šablony (viz odkazy dole na zmíněné stránce pod obrázkem).

Nyní je tedy možné používat Fr7 v HTML pomocí (nových) tagů, např. <f7-view>, <f7-page>, ... podobně jako v Ionicu, ale s tím rozdílem, že Fr7 používá VueJS 2.x.

Framework7 playground

Při práci s Ionicem jsem si zvykl na jeho výbornou službu playground, ve které si můžu rychle ověřit nápad.

Poslední dobou se věnuji jinému frameworku - Framework7. Hledal jsem pro něj podobnou službu, jako je výše zmíněné hřiště Ionicu, ale nic jsem nenašel. Napadlo mě, zda by tedy nešlo hřiště Ionicu ohnout, aby se dalo použít s Framework7. Dalo :-)

Framework7 playground

Framework7 + VueJS 2

Hybridní aplikace

Ve volném čase se zabývám vývojem mobilních aplikací pro Android, některé z nich jsem zveřejnil na Google Play. 

Všechny dosud publikované mobilní aplikace jsem programoval v Ionicu (verze 1.x). Během té doby jsem ze zájmu sledoval i další frameworky vhodné pro vývoj hybridních mobilních aplikací.

Framework7

Jedním z přímých konkurentů Ionicu je (dle mého mínění) Framework7, o kterém jsem se tu krátce zmínil. Na rozdíl od Ionicu je to (téměř jen) UI framework, tedy vhodný k použití pro vizuální část aplikace (HTML + CSS), i když s ním jde zařídit i routování (zjednodušeně: přechody mezi stránkami).

Zdánlivou nevýhodou může být fakt, že Framework7 nepoužívá žádný JS framework typu MVC, MVVM (jak je tomu u zmíněného Ionicu: ten používá AngularJS). 

VueJS 2.x

Javascriptový framework VueJS (2.x) je mnohými považován za jednodušší a elegantnější než AngularJS. Také o něm jsem se tu před nějakou dobou letmo zmínil. 

Framework7 + VueJS 2.x

Podíval jsem se na to, zda by šlo používat oba frameworky společně a naprogramovat hybridní aplikaci. Šlo :-)

Mám takové tušení, že tuto kombinaci možná používám odlišným způsobem než někteří další vývojáři, nicméně i můj lehce naivní způsob je funkční.

Oba frameworky mají dobře řešenou dokumentaci a pokud vím co hledám, naleznu a většinou i pochopím. 

Zrovna pracuji na aplikaci s názvem Kuřim Info, která bude zdrojem některých informací pro občany města (otevírací doba institucí a obchodů, autobusové a vlakové spoje, aktuální počasí a další). Zatím je to ve fázi vývoje, nicméně tady je pár náhledů...

Framework7 - framework pro mobilní aplikace

Svoje aplikace vyvíjím v Ionicu, jsem s ním spokojen. Používám jedničkovou verzi (v současnosti Ionic 1.3.2). Moje aplikace se ale spouští s prodlením a také zobrazení obsahu a přechod mezi stránkami se mi zdá pomalejší.

Sleduji dění na vývojářské scéně a kromě Ionicu občas nakouknu jinam. Jedním z frameworků o kterých si držím přehled je Framework7.

Před pár dny vyšel Framework7 verze 1.5.0. Zatím jsem si v něm zkusil jen jednoduchoučkou aplikaci, jen tak na zkoušku (tři stránky, dva grafy v SVG, jen pro ověření funkčnosti). Co se mi na něm líbí je rychlost spuštění aplikace a také rychlost přechodu mezi stránkami aplikace.

Zatím se rozkoukávám a snažím se pochopit způsob jak ve Frameworku7 vyvíjet (z Ionic jsem zvyklý na úplně jiné pojetí; zejména co se týká routování - zobrazení stránek). Pokud jde o logiku aplikace, začlenil jsem do ní Vue.js. Zatím je to jen jednoduchý způsob, prosté vložení Vue.js skriptu do stránky, ale funguje mi to.

A hlavně, spojením Frameworku 7 a Vue.js jsem dosáhl oproti Ionicu (stále mluvím o jedničkové verzi 1.x) zrychlení spouštění a odezvy aplikace. 

---

Youtube kanál
Mobilní aplikace

Moje online videokurzy (některé se slevou!):
AngularJS 1.x pro začátečníky
Jazyk C pro začátečníky
Elektronika srozumitelně
Mobilní aplikace: Intel XDK + Ionic, technický úvod (zdarma)
Mobilní aplikace: Intel XDK + Ionic, rozvrh hodin