6: Views

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

Eén regel voor alles: 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 buiten een 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>Welcome</h1>

Weergave met argumenten:

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

Het noemen van het:

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

6.2: Meerdere regels blokken

Een multiline view draait totdat er een lege regel is. Dus voeg geen lege regels toe 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.

Één harde regel: een tag gebruikt OF de shorthand 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 class-lijst dynamisch is, schrijf het geheel als één attribuut; houd shorthands voor volledig statische tags:

<a.site-logo href="/">                              valid: fully static
<a class="card {( $active ? 'is-active' : void )}"> valid: dynamic, one attribute
<a.card class="$extra">                             INVALID: duplicate class attribute

6.4: Tekst en variabelen

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

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

Voor methode-aanroepen, ketenaccess en expressies, gebruik {{ ... }}:

view:
<p>{{ $this->label('start') }}</p>
<p>{{ $this->record->title }}</p>
<p>{{ $this->count > 1 ? 'Multiple' : 'One' }}</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 weergavetekst

Voor statische vertaalbare tekst, gebruik de taalkorte aanduiding:

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

Met argumenten:

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

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

6.6: Attributen

Attributwaarden zonder spaties of variabelen kunnen onomkaderd blijven:

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

Met 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">       valid: direct interpolation plus suffix
<a href="{{ %base->view }}/install"> works, but redundant and ugly: avoid

6.7: Controleflow

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>Active</p>
<else>
	<p>Inactive</p>
</if>

6.8: Weergave

view(...) rendert de respons en stopt verdere verwerking van de aanvraag. 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 /opt/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: 'Save failed',
		class: ['[name=title]' => '!error'],
	)
	apply(
		outer: ['#item-'.$item->id => $this->itemView($item)],
		toast: 'Saved',
		scroll: '#item-'.$item->id,
		trans: 'fade',
	)
}