Vlastní HTML komponenty za použití Angular Material

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
před 9 lety
holantomas
Člen | 55
+
0
-

Zdravím,
chci si udělat vlastní komponenty z knihovny Angular material, která má své HTML elementy apod.
Zkoušel jsem bádat po internetu a nějak mi to do sebe nezapadá. Nemá tady někdo nějaký jednoduchý tutoril od vytvoření HTML elementu po použití makra {control}? Abych to zjednodušil, jako první a asi jednoduchý příklad si chci vytvořit komponentu FAB Speed dial. Což znamená vytvořit kořenovou komponentu md-fab-speed-dial, dále md-fab-trigger, md-icon, md-tooltip, md-fab-actions.
Ocením hlavně „best-practise“. Nevím totiž co se na toto bude hodit lépe, jestli BaseControl nebo Control z formulářů, jak konkrétně fungují vztahy (Rodičovská komponenta ↔ podkomponenta). A co je lepší jestli na to vytvořit latte, nebo to kompletně celé řešit přes HTML.

Pro pochopení HTML definice FAB:

<md-fab-speed-dial md-open="false" md-direction="up" ng-class="md-scale" class="md-scale">
    <md-fab-trigger>
        <md-button aria-label="menu" class="md-fab md-warn">
            <md-icon md-font-set="material-icons"> menu </md-icon>
            <md-tooltip md-direction="left">{_students.default.Option, 3}</md-tooltip>
        </md-button>
    </md-fab-trigger>
    <md-fab-actions>
        <md-button aria-label="{_students.default.delete}" class="md-fab md-raised md-mini md-warn">
             <md-icon md-font-set="material-icons"> delete </md-icon>
             <md-tooltip ng-visible="true" md-direction="left">{_students.default.delete}</md-tooltip>
        </md-button>
        <md-button aria-label="{_students.default.edit}" class="md-fab md-raised md-mini md-accent">
             <md-icon md-font-set="material-icons"> edit </md-icon>
             <md-tooltip ng-visible="this.showHint=true" md-direction="left">{_students.default.edit}</md-tooltip>
        </md-button>
        <md-button aria-label="{_students.default.add}" class="md-fab md-raised md-mini md-primary">
             <md-icon md-font-set="material-icons"> add </md-icon>
             <md-tooltip ng-visible="this.showHint=true" md-direction="left">{_students.default.add}</md-tooltip>
        </md-button>
    </md-fab-actions>
</md-fab-speed-dial>
před 9 lety
Oli
Člen | 1215
+
0
-

Nevím jestli ti uplně rozumím. Mám trochu pocit, že mícháš dohromady komponenty z angularu a nette. Můžou ti ale pomoct 2 videa: Nette a Angular a přednáška o komponentách.

Pokud to ale chápu správně, tak můžeš celej ten kod co máš nahoře vložit do komponenty a v komponentě si navěsit zpracovávání…

před 9 lety
holantomas
Člen | 55
+
0
-

Omlouvám se, že to zní tak chaoticky. V podstatě ano. Účelem dotazu je to jestli někdo nemá sepsany tutoriál s best-practise na vytváření komponent s dědičnosti v nete. Pro pochopení jsem uvedl kód čeho konkrétně chci dosáhnout. A ano vím že toto mi nette umožňuje jen v tom trochu plavu a prave nejlepší by byl nějaký primitivní příklad co to řeší od A do Z

před 9 lety
newPOPE
Člen | 648
+
+1
-

@holantomas problem bude v tom, ze nakolko tomu uplne nerozumies tak miesas veci spolu. Nette a Angular sice spolu fungovat mozu ale moc ti to na front strane nebude fungovat, resp. budes riesit veci ktore riesit nemusis. Je dolezite sa rozhodnut ci potrebujes SPA (single page app) alebo ti staci server side. Angular-om nechi nahradit jQuery. Ked tak pouzi Angular na fronte a Nette na API. Ja som to skusal mixovat uz davno (aj so server side renderom…) ale nie je to moc dobra cesta.

Teraz uz by som to urcite nemixoval. A vela vies dosiahnut len pouzitim nette.ajax a snippetami.

Editoval newPOPE (3. 11. 2015 8:30)

před 9 lety
holantomas
Člen | 55
+
0
-

@newPOPE sice máš pravdu, že s Angularem nemám takové zkušenosti, ale ja potřebuji jen prvky v Angular Material Co je čistě HTML, které si pak JS doupraví (Tedy co jsem vypozoroval). Nejde mi ani tak o využití funkčností, jak o design a pokud jsem něco schopný napsat v latte (Jako ukázka v prvním příspěvku), proč bych z toho nemohl udělat komponentu? Jen se ptám, třeba je tam něco u čeho narazím a byl bych radši kdybych to teď mohl odpískat s jistotou, že bych narazil na něco co nebude fungovat. V čem je tedy problém?

před 9 lety
newPOPE
Člen | 648
+
0
-

Aha uz rozumiem. Tak to mas v zasade jedno ako na to pojdes. Ked chces cez komponentu tak toto by ti na zaciatok malo stacit https://doc.nette.org/…n/components#….

Zacal by som komponentou ktora len vyrenderuje html, potom by som si pridal nejake hodnoty do nej a tie pouzil v tej sablone …

před 9 lety
holantomas
Člen | 55
+
0
-

@newPOPE Tím jsem začal. Jenže jak můžeš vidět na vzoru co mám nahoře, tak je vidět že bude potřeba minimálně jedna podkomponenta. Ten tutoriál jsem chtěl proto aby se mi to všechno poskládalo dohromady. Protože nevím třeba jestli použít Control nebo BaseControl, jak se dělají potomci, jaký je best-practise pro dělaní potom komponenty apod. Jednoduše potřebuji nakopnout správným směrem.

Vysledkem by melo byt neco takoveho

V presenter (Továrnička bude samozřejmostí, toto je jen pro příklad)

createComponentFAB(){
	$FAB = new SpeedDial($icon,$direction,...);
	$FAB->addItem('pekna-iconka', $this->Link(...));
	$FAB->addItem('pekna-iconka', $this->Link(...));
	$FAB->addItem('pekna-iconka', $this->Link(...));
	return $FAB;
}

v latte pak

{control FAB}

vysledek:

<md-fab-speed-dial md-open="false" md-direction="up" ng-class="md-scale" class="md-scale">
    <md-fab-trigger>
        <md-button aria-label="menu" class="md-fab md-warn">
            <md-icon md-font-set="material-icons"> menu </md-icon>
            <md-tooltip md-direction="left">{_students.default.Option, 3}</md-tooltip>
        </md-button>
    </md-fab-trigger>
    <md-fab-actions>
        <md-button aria-label="{_students.default.delete}" class="md-fab md-raised md-mini md-warn">
             <md-icon md-font-set="material-icons"> delete </md-icon>
             <md-tooltip ng-visible="true" md-direction="left">{_students.default.delete}</md-tooltip>
        </md-button>
        <md-button aria-label="{_students.default.edit}" class="md-fab md-raised md-mini md-accent">
             <md-icon md-font-set="material-icons"> edit </md-icon>
             <md-tooltip ng-visible="this.showHint=true" md-direction="left">{_students.default.edit}</md-tooltip>
        </md-button>
        <md-button aria-label="{_students.default.add}" class="md-fab md-raised md-mini md-primary">
             <md-icon md-font-set="material-icons"> add </md-icon>
             <md-tooltip ng-visible="this.showHint=true" md-direction="left">{_students.default.add}</md-tooltip>
        </md-button>
    </md-fab-actions>
</md-fab-speed-dial>