6: Views

Views leven direct in .phlo-bestanden. Een view compileert naar een PHP method die HTML retourneert. Je rendert een view met view(...).

Eén regel voordat alles begint: een lege regel sluit de view. De eerste lege regel na view ...: beëindigt het blok; HTML daarna wordt controllercode en de build stopt met HTML outside a view. Voeg nooit een lege regel binnen een view toe voor visuele ruimte.

6.1: Declaratie

Anonieme view:

view:
<p>Test</p>

Genomineerde view:

view home:
<h1>Welkom</h1>

View met argumenten:

view greeting($name):
<p>Hallo $name</p>

Het aanroepen:

method show => view($this->greeting('Jordi'))

6.2: Meerdere regels blokken

Een meerregelige view draait totdat er een lege regel is. Plaats dus geen lege regels in het midden van de view HTML.

view:
<section>
    <h1>Welcome</h1>
    <p>Intro</p>
</section>

view footer:
<footer>Phlo</footer>

6.3: HTML afkortingen

Phlo ondersteunt compacte id/class afkortingen:

view:
<p#intro.lead/>

Dit wordt:

<p id="intro" class="lead"></p>

Een afsluitende schuine streep maakt een tag zelfsluitend in de bron, en Phlo verandert het in een normale open/sluit tag.

Een harde regel: een tag gebruikt OF de afkorting OF een expliciete class/id attribuut voor die eigenschap, nooit beide. Het combineren ervan kan een duplicaatattribuut genereren en de browser behoudt alleen de eerste, terwijl de dynamische stilletjes wordt verworpen. Wanneer een deel van een classlijst dynamisch is, schrijf je het geheel als één attribuut; houd afkortingen voor volledig statische tags:

<a.site-logo href="/">                              geldig: volledig statisch
<a class="card {( $active ? 'is-active' : void )}"> geldig: dynamisch, één attribuut
<a.card class="$extra">                             ONGELDIG: duplicaat class attribuut

6.4: Tekst en variabelen

Je kunt gewone variabelen en eenvoudige eigenschappen direct in tekst gebruiken:

view($name):
<p>Hallo $name</p>
<p>$this->title</p>

Voor methode-aanroepen, keten toegang of expressies, gebruik {{ ... }}:

view:
<p>{{ $this->label('start') }}</p>
<p>{{ $this->record->title }}</p>
<p>{{ $this->count > 1 ? 'Meerdere' : 'Één' }}</p>

{( ... )} bestaat als een korte expressievorm en wordt intern vertaald naar {{ (...) }}, maar gebruik het niet als het standaardvoorbeeld. In documentatie en app-code is {{ ... }} meestal duidelijker.

6.5: Vertaalbare view tekst

Voor statische vertaalbare tekst, gebruik de taalkorte:

view:
<h1>{nl: Welkom}</h1>
<p>{nl: Hallo wereld}</p>

Met argumenten:

view($name):
<p>{nl: Hallo %s ($name)}</p>

Gebruik de korte aanduiding hiervoor; het is korter en toont in één oogopslag welke brontaal de tekst heeft.

6.6: Attributen

Attributwaarden zonder spaties of variabelen kunnen zonder aanhalingstekens worden gebruikt:

view:
<a href=/contact>Contact</a>

Bij variabelen of expressies, gebruik aanhalingstekens:

view:
<a href="$this->url">Link</a>
<a href="{{ $this->url('contact') }}">Contact</a>

Attributwaarden interpoleren $var, $this->prop en %instance->prop direct, inclusief met een letterlijke suffix. Het omhullen van eenvoudige property-toegang in {{ }} is overbodig; reserveer {{ }} voor aanroepen en {( )} voor expressies:

<a href="%base->view/install">       geldig: directe interpolatie plus suffix
<a href="{{ %base->view }}/install"> werkt, maar overbodig en lelijk: vermijd

6.7: Besturingstroom

Gebruik control-flow tags op hun eigen regels:

view:
<ul>
<foreach $this->items AS $item>
    <li>$item->title</li>
</foreach>
</ul>

Met if:

view:
<if $this->active>
    <p>Actief</p>
<else>
    <p>Inactief</p>
</if>

6.8: Weergave

view(...) rendert de respons en stopt verdere verwerking van het verzoek. Bouw dus samengestelde pagina's in een enkele view, of laat een view andere view-methoden inline opnemen met {{ ... }}.

route both GET home => view($this)

view:
<main>
    {{ $this->hero }}
    {{ $this->content }}
</main>

view hero:
<header>
    <h1>$this->title</h1>
</header>

view content:
<section>
    <p>{nl: Welkom op de site}</p>
</section>

Alle view() parameters zijn optioneel en benoemd:

App-niveau standaardwaarden komen van %app props met dezelfde namen. De <head> wordt verder aangevuld met %app->description, %app->viewport, %app->themeColor, %app->nonce, %app->head, %app->link en %app->version (de asset cache-buster).

6.9: Toepassen van commando's

apply() accepteert benoembare argumenten waarbij elke sleutel een DOM-mutatie of UI-actie is. De runtime-kern biedt de basis; resources kunnen extra commando's registreren via app.mod.<name> (zoals DOM/toasts voor toast: of DOM/dialog voor alert:).

DOM-mutaties

App-status

Assets (een keer per href/src)

css, js, defer, voeg een link of script toe; al geladen URL's worden genegeerd.

Navigatie en callbacks

Meta

Resource mods, beschikbaar zodra de bijbehorende resource is geladen:

Geen controle op build-tijd voor apply-sleutels. Een typfout (inner → innr) wordt stilletjes genegeerd. Houd deze tabel bij de hand, of raadpleeg /srv/phlo/docs/apply-protocol.md voor de complete, actuele referentie inclusief randgevallen en streamsemantiek.

Voorbeeld dat meerdere commando's combineert:

route async POST item save {
    if (!$item = item::save(%payload)) return apply(
        error: 'Opslaan mislukt',
        class: ['[name=title]' => '!error'],
    )
    apply(
        outer: ['#item-'.$item->id => $this->itemView($item)],
        toast: 'Opgeslagen',
        scroll: '#item-'.$item->id,
        trans: 'fade',
    )
}