2. Views - Phlo

2: Views

Views live directly in your .phlo files and transpile to PHP methods that return HTML. In this chapter you replace the hello route with the first real poll page: a question and a row of answer buttons. You learn the view block, the dot shorthand, variables, and the one rule that bites everyone once: a blank line closes the view.

2.1: Van route naar view

Vervang de inhoud van poll.phlo:

prop question = 'Welke stack wint?'

route GET poll => $this->home

method home => view($this, 'Phlo Poll')

view:
<main#app.poll>
	<h1>$this->question</h1>
</main>

Van boven naar beneden: prop question is een statische eigenschap van de poll klasse. De route koppelt GET /poll aan de home methode. home roept view($this, 'Phlo Poll') aan: het tweede argument wordt de paginatitel, en door $this als de body door te geven, wordt de anonieme view van het bestand gerenderd, het blok dat begint bij view: zonder een naam.

Herlaad http://localhost/poll. Je ziet de vraag als een kop op een ongestylede pagina.

2.2: Punt shorthand

Kijk nog eens naar de openingstag:

<main#app.poll>

Phlo breidt #id en .class direct uit op de tagnaam:

<main id="app" class="poll">

Je kunt klassen stapelen (<div.card.wide>) en een afsluitende schuine streep sluit een tag zelf af in de bron: <div.spacer/> wordt <div class="spacer"></div>. Een waarschuwing die later belangrijk zal zijn: attribuutwaarden die variabelen of schuine strepen bevatten, hebben aanhalingstekens nodig, dus schrijf <a href="/poll"> en <form action="/poll/vote/$id">.

Verander <main#app.poll> in <main#app.poll.wide>, herlaad en inspecteer het element: de klassenlijst leest nu poll wide. Zet het terug.

2.3: Een lege regel sluit de view.

Een view-blok eindigt bij de eerste lege regel. Alles na die lege regel is weer controllercode. Dit is opzettelijk: het is hoe je meerdere views in één bestand plaatst. Het betekent ook dat je nooit een lege regel binnen een view mag invoegen voor visuele ruimte; de HTML eronder zou in de controllercode lekken en de build stopt met HTML outside a view.

view:
<h1>One view</h1>
<p>Still the same view, no blank lines.</p>

view footer:
<p>A second, named view. The blank line above ended the first one.</p>

Probeer het: zet een lege regel tussen <h1> en </main> in je view, herlaad en lees de foutpagina. Het geeft het exacte bestand, de regel en de view die gesloten was. Verwijder de lege regel en de pagina is weer terug.

2.4: Variables, expressions, and composition

Inside a view you have three levels of expression:

$var and $this->prop for plain values
{{ expr }} for method calls and anything with arguments
<foreach> and <if> tags, always on their own line

Extend poll.phlo with a static list of options and a second view:

prop question = 'Which stack wins?'
prop options = ['Phlo', 'Next.js', 'Laravel', 'Rails']

route GET poll => $this->home

method home => view($this, 'Phlo Poll')

view:
<main#app.poll>
	<h1>$this->question</h1>
	{{ $this->choices }}
</main>

view choices:
<section.card>
	<foreach $this->options AS $option>
		<button>$option</button>
	</foreach>
</section>

{{ $this->choices }} renders the named view choices inline; this is how you compose pages, because view(...) itself may only be called once per request. The <foreach> tag loops over the prop; note that it stands on its own line, never inline inside other HTML.

Reload http://localhost/poll: the question plus four plain buttons. Ugly, but alive. Next chapter: CSS.