Htmler Gids
Welkom bij de Finch Htmler Gids! Deze gids laat zien hoe je Htmler gebruikt in je Finch-applicatie. Of je nu een ervaren ontwikkelaar bent of net begint, Finch biedt handige hulpmiddelen om server-side webontwikkeling te vereenvoudigen.
Wat is Htmler?
Htmler is een eenvoudige HTML-generator. Het wordt gebruikt om HTML te genereren op een overzichtelijke en onderhoudbare manier. In Finch wordt het gebruikt om views in HTML te genereren.
Waar gebruik je Htmler?
Htmler kan overal worden gebruikt waar je HTML moet genereren. Bijvoorbeeld in controllers om HTML voor views te genereren of direct in views om HTML te genereren zonder templates. Htmler is handig voor kleine projecten of voor HTML die je binnen Dart-code wilt houden. Voor widgets moet je echter templates in aparte bestanden plaatsen voor productieomgevingen. Htmler is ideaal voor single-file projecten.
Hier is een voorbeeld van hoe je Htmler in je project gebruikt:
Opmerking:
Je kunt Jinja-tags toevoegen in je Htmler-code. De `JJ`-klasse in `lib/src/views/htmler.dart` wordt gebruikt om Jinja-tags in Htmler-code te integreren.
Voorbeeld:
class HtmlerController extends Controller {
HtmlerController();
@override
Future<String> index() async {
return exampleHtmler();
}
Future<String> exampleHtmler() async {
rq.addParam('language', rq.getLanguage());
rq.addParam('year', DateTime.now().year);
Tag htmlTag = $Cache(children: [
$Doctype(),
$Html(attrs: {
'lang': rq.getLanguage(),
'dir': JJ.$var('\$t("dir")'),
}, children: [
$Head(
children: [
$Meta(attrs: {'charset': 'UTF-8'}),
$Meta(
attrs: {
'name': 'viewport',
'content': 'width=device-width, initial-scale=1.0',
},
),
$Title(
children: [$Text('Htmler Framework - Modern Web Development')]),
$Link(attrs: {
'href':
'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
'rel': 'stylesheet',
'integrity':
'sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM',
'crossorigin': 'anonymous'
}),
$Style(children: [
$Raw('''
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
... (CSS blijft ongewijzigd) ...
''')
]),
],
),
$Body(children: [
// Hero Sectie
$Section(attrs: {
'class': 'hero-section'
}, children: [
$Div(attrs: {
'class': 'container'
}, children: [
$Div(attrs: {
'class': 'row align-items-center min-vh-100'
}, children: [
$Div(attrs: {
'class': 'col-lg-6 mb-5 mb-lg-0'
}, children: [
$H1(
attrs: {'class': 'hero-title'},
children: [$Text('Htmler Framework')]),
$P(attrs: {
'class': 'hero-subtitle'
}, children: [
$Text(
'Bouw moderne webapplicaties met type-safe HTML generatie. Schoon, efficiënt en vriendelijk voor ontwikkelaars.')
]),
$Div(attrs: {
'class': 'd-flex gap-3 flex-wrap'
}, children: [
$Button(
attrs: {'class': 'btn btn-light'},
children: [$Text('Aan de slag')])
.addAttr('data-language', JJ.$var('language')),
$Button(
attrs: {'class': 'btn btn-outline-light'},
children: [$Text('Documentatie')]),
]),
]),
$Div(attrs: {
'class': 'col-lg-6'
}, children: [
$Div(attrs: {
'class': 'row g-4'
}, children: [
$Div(attrs: {
'class': 'col-6'
}, children: [
$Div(attrs: {
'class': 'stat-card p-4 text-center'
}, children: [
$Div(
attrs: {'class': 'stat-number'},
children: [$Text('40+')]),
$P(
attrs: {'class': 'text-muted mb-0 small'},
children: [$Text('HTML-tags')]),
]),
]),
$Div(attrs: {
'class': 'col-6'
}, children: [
$Div(attrs: {
'class': 'stat-card p-4 text-center'
}, children: [
$Div(
attrs: {'class': 'stat-number'},
children: [$Text('100%')]),
$P(
attrs: {'class': 'text-muted mb-0 small'},
children: [$Text('Type-safe')]),
]),
]),
$Div(attrs: {
'class': 'col-6'
}, children: [
$Div(attrs: {
'class': 'stat-card p-4 text-center'
}, children: [
$Div(
attrs: {'class': 'stat-number'},
children: [$Text('0')]),
$P(
attrs: {'class': 'text-muted mb-0 small'},
children: [$Text('Afhankelijkheden')]),
]),
]),
$Div(attrs: {
'class': 'col-6'
}, children: [
$Div(attrs: {
'class': 'stat-card p-4 text-center'
}, children: [
$Div(
attrs: {'class': 'stat-number'},
children: [$Text('∞')]),
$P(
attrs: {'class': 'text-muted mb-0 small'},
children: [$Text('Onbegrensde mogelijkheden')]),
]),
]),
]),
]),
]),
]),
]),
// Navigatie
$Nav(attrs: {
'class': 'navbar navbar-expand-lg sticky-top'
}, children: [
$Div(attrs: {
'class': 'container'
}, children: [
$A(attrs: {
'class': 'navbar-brand text-primary fw-bold',
'href': '#'
}, children: [
$Text('Htmler')
]),
$Button(attrs: {
'class': 'navbar-toggler',
'type': 'button',
'data-bs-toggle': 'collapse',
'data-bs-target': '#navbarNav'
}, children: [
$Span(attrs: {'class': 'navbar-toggler-icon'}, children: []),
]),
$Div(attrs: {
'class': 'collapse navbar-collapse',
'id': 'navbarNav'
}, children: [
$Ul(attrs: {
'class': 'navbar-nav ms-auto'
}, children: [
$Li(attrs: {
'class': 'nav-item'
}, children: [
$A(attrs: {
'class': 'nav-link fw-medium',
'href': '#typography'
}, children: [
$Text('Typografie')
]),
]),
$Li(attrs: {
'class': 'nav-item'
}, children: [
$A(attrs: {
'class': 'nav-link fw-medium',
'href': '#forms'
}, children: [
$Text('Formulieren')
]),
]),
$Li(attrs: {
'class': 'nav-item'
}, children: [
$A(attrs: {
'class': 'nav-link fw-medium',
'href': '#tables'
}, children: [
$Text('Tabellen')
]),
]),
$Li(attrs: {
'class': 'nav-item'
}, children: [
$A(attrs: {
'class': 'nav-link fw-medium',
'href': '#media'
}, children: [
$Text('Media')
]),
]),
]),
]),
]),
]),
// Hoofdinhoud
$Main(attrs: {
'class': 'section'
}, children: [
$Div(attrs: {
'class': 'container'
}, children: [
// Typografie Sectie
$Section(attrs: {
'id': 'typography',
'class': 'mb-5'
}, children: [
$H2(
attrs: {'class': 'section-title'},
children: [$Text('Typografie-elementen')]),
$Div(attrs: {
'class': 'row g-4'
}, children: [
$Div(attrs: {
'class': 'col-lg-4'
}, children: [
$Div(attrs: {
'class': 'card h-100'
}, children: [
$Div(attrs: {
'class': 'card-body'
}, children: [
$H5(
attrs: {'class': 'card-title text-primary mb-4'},
children: [$Text('Koptitels hiërarchie')]),
$H1(
attrs: {'class': 'h3 mb-2'},
children: [$Text('H1 - Hoofdtitel')]),
$H2(
attrs: {'class': 'h4 mb-2'},
children: [$Text('H2 - Sectietitel')]),
$H3(
attrs: {'class': 'h5 mb-2'},
children: [$Text('H3 - Subsectie')]),
$H4(
attrs: {'class': 'h6 mb-2'},
children: [$Text('H4 - Kleine kop')]),
$H5(
attrs: {'class': 'small mb-2'},
children: [$Text('H5 - Klein kopje')]),
$H6(
attrs: {'class': 'small mb-3'},
children: [$Text('H6 - Kleinste kop')]),
$Hr(),
$Small(attrs: {
'class': 'text-muted'
}, children: [
$Text(
'Perfecte semantische hiërarchie voor SEO en toegankelijkheid')
]),
]),
]),
]),
$Div(attrs: {
'class': 'col-lg-4'
}, children: [
$Div(attrs: {
'class': 'card h-100'
}, children: [
$Div(attrs: {
'class': 'card-body'
}, children: [
$H5(
attrs: {'class': 'card-title text-primary mb-4'},
children: [$Text('Tekstopmaak')]),
$P(attrs: {
'class': 'mb-3'
}, children: [
$Text('Deze paragraaf demonstreert '),
$B(children: [$Text('vette tekst')]),
$Text(', '),
$I(children: [$Text('cursieve tekst')]),
$Text(', en '),
$U(children: [$Text('onderstreepte tekst')]),
$Text(' formatting opties.'),
]),
$P(attrs: {
'class': 'mb-3'
}, children: [
$Text('Je kunt ze ook combineren: '),
$B(children: [
$I(children: [$Text('vet cursief')])
]),
$Text(' of '),
$U(children: [
$B(children: [$Text('onderstreept vet')])
]),
$Text(' tekst.'),
]),
$P(attrs: {
'class': 'mb-3'
}, children: [
$Text('Inline code voorbeeld: '),
$Code(attrs: {
'class': 'bg-light p-1 rounded'
}, children: [
$Text('const result = htmler.render()')
]),
$Text(' binnen een paragraaf.'),
]),
$Small(attrs: {
'class': 'text-muted'
}, children: [
$Text(
'Deze kleine tekst biedt extra context of voetnoten.')
]),
]),
]),
]),
$Div(attrs: {
'class': 'col-lg-4'
}, children: [
$Div(attrs: {
'class': 'card h-100'
}, children: [
$Div(attrs: {
'class': 'card-body'
}, children: [
$H5(
attrs: {'class': 'card-title text-primary mb-4'},
children: [$Text('Geavanceerde typografie')]),
$P(attrs: {
'class': 'mb-3'
}, children: [
$Text('Moderne webtypografie met '),
$Span(
attrs: {'class': 'text-accent fw-bold'},
children: [$Text('gestileerde tekst-effecten')]),
$Text(' en mooie witruimte.'),
]),
$P(attrs: {
'class': 'mb-3'
}, children: [
$Text('Gebruik '),
$Code(children: [$Text('\$Span')]),
$Text(' met aangepaste stijlen voor '),
$Span(
attrs: {'class': 'badge bg-secondary text-white'},
children: [$Text('geaccentueerde tekst')]),
$Text(' of '),
$Span(attrs: {
'class':
'border border-primary text-primary px-2 py-1 rounded'
}, children: [
$Text('omlijnde badges')
]),
$Text('.'),
]),
$P(children: [
$Text('Typografie is de '),
$B(children: [$Text('basis')]),
$Text(' van goed webdesign.'),
]),
]),
]),
]),
]),
$Div(attrs: {
'class': 'alert alert-info mt-4'
}, children: [
$P(attrs: {
'class': 'mb-0'
}, children: [
$B(children: [$Text('Tip:')]),
$Text(
' Al deze typografie-elementen zijn gemaakt met Htmler-tags, wat type-safe HTML generatie en uitstekende IntelliSense ondersteuning in je IDE biedt!')
]),
]),
]),
... (bestand gaat verder, maar bevat voornamelijk tekst dat vergelijkbaar is en vertaald moet worden)