🏡 index.nb

pruga app pro SPA

Aplikace bude pracovat s jedním elementem. Ten umístíme do html stránky.

Nečastěji se používá html element s tagem div a pomocém atributu id mu přidělíme jméno. Pomocí jména pak tento element v DOM najdeme.


<div id="app"
  width="100%"
  height="200px"
  style="
    text-align: center;
    background-color: green;
    color: white;
    font-size: 19px;
  ">
aplikace
</div>
aplikace

Do elementu div napojíme aplikaci. Takto by vypadal kód, kdybysme ho psali pro c-kompilátor:

import std/jsffi
import std/dom

const APP_NAME = "app"

proc main() =
  let app = getElementById APP_NAME

  app.textContent = "Dobro došli u prugu aplikaciju!"

when isMainModule:
  main()

Ve webovém prohlížeči se ale kód nevykonává postupně, ale raguje na různé události. Lepší verze předchozího kódu:

import std/jsffi
import std/dom

const APP_NAME = "app"

proc main(event: Event) =
  let app = getElementById APP_NAME

  app.textContent = "Dobro došli u prugu aplikaciju!"

document.addEventListener("DOMContentLoaded", main)

Čekáme až se načte celá stránka událost a pak se spustí funkce main. Používám událost DOMContentLoaded místo load.

DOMContentLoaded se spustí ihned po sestavení DOM, nečeká na obrázky, CSS, fonty. Funkce události může běžet během načítání dalšího obsahu.

Funkce main dostává parametr event.

import pkg/nimib
import pkg/pruga/os
import pkg/pruga/page

nbInit

nbText: &"""
# pruga app pro SPA

Aplikace bude pracovat s jedním elementem. Ten umístíme do html stránky.

Nečastěji se používá html element s tagem `div` a pomocém atributu id mu přidělíme jméno.
Pomocí jména pak tento element v DOM najdeme.
"""

nbHtmlWithSource: """
<div id="app"
  width="100%"
  height="200px"
  style="
    text-align: center;
    background-color: green;
    color: white;
    font-size: 19px;
  ">
aplikace
</div>
"""

nbText:
  "Do elementu `div` napojíme aplikaci. Takto by vypadal kód, kdybysme ho psali pro c-kompilátor:"

nbCodeSkip:
  import std/jsffi
  import std/dom

  const APP_NAME = "app"

  proc main() =
    let app = getElementById APP_NAME

    app.textContent = "Dobro došli u prugu aplikaciju!"

  when isMainModule:
    main()

nbText:
  "Ve webovém prohlížeči se ale kód nevykonává postupně, ale raguje na různé události. Lepší verze předchozího kódu:"

nbCodeSkip:
  import std/jsffi
  import std/dom

  const APP_NAME = "app"

  proc main(event: Event) =
    let app = getElementById APP_NAME

    app.textContent = "Dobro došli u prugu aplikaciju!"

  document.addEventListener("DOMContentLoaded", main)

nbText:
  """
Čekáme až se načte celá stránka událost a pak se spustí funkce main. Používám událost `DOMContentLoaded` místo `load`.

`DOMContentLoaded` se spustí ihned po sestavení DOM, nečeká na obrázky, CSS, fonty. Funkce události může běžet během načítání
dalšího obsahu.

Funkce `main` dostává parametr `event`.
"""

nbJsFromCode:
  import std/jsffi
  import std/dom
  import pkg/pruga/js/app
  import pkg/pruga/js

  const APP_NAME = "app"

  let root = app APP_NAME

  onClick "#app":
    event.target.textContent = cstring "zcela nový obsah po kliknutí"
  onMouseMove document:
    root.textContent = "mouse position " & $event.x & ", " & $event.y

  let app2 = app "app2"
  app2.textContent = cstring "další apka"

nbSave