added many more examples
This commit is contained in:
parent
bcc45feea3
commit
fb604321f3
9 changed files with 141 additions and 3 deletions
16
examples/button.nim
Normal file
16
examples/button.nim
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
|
||||||
|
include karax / prelude
|
||||||
|
|
||||||
|
var lines: seq[kstring] = @[]
|
||||||
|
|
||||||
|
proc createDom(): VNode =
|
||||||
|
result = buildHtml(tdiv):
|
||||||
|
button:
|
||||||
|
text "Say hello!"
|
||||||
|
proc onclick(ev: Event; n: VNode) =
|
||||||
|
lines.add "Hello simulated universe"
|
||||||
|
for x in lines:
|
||||||
|
tdiv:
|
||||||
|
text x
|
||||||
|
|
||||||
|
setRenderer createDom
|
||||||
14
examples/buttonlambda.nim
Normal file
14
examples/buttonlambda.nim
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
include karax / prelude
|
||||||
|
from future import `=>`
|
||||||
|
|
||||||
|
var lines: seq[kstring] = @[]
|
||||||
|
|
||||||
|
proc createDom(): VNode =
|
||||||
|
result = buildHtml(tdiv):
|
||||||
|
button(onclick = () => lines.add "Hello simulated universe"):
|
||||||
|
text "Say hello!"
|
||||||
|
for x in lines:
|
||||||
|
tdiv:
|
||||||
|
text x
|
||||||
|
|
||||||
|
setRenderer createDom
|
||||||
13
examples/hellouniverse.nim
Normal file
13
examples/hellouniverse.nim
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
|
||||||
|
include karax / prelude
|
||||||
|
import random
|
||||||
|
|
||||||
|
proc createDom(): VNode =
|
||||||
|
result = buildHtml(tdiv):
|
||||||
|
if random(100) <= 50:
|
||||||
|
text "Hello World!"
|
||||||
|
else:
|
||||||
|
text "Hello Universe"
|
||||||
|
|
||||||
|
randomize()
|
||||||
|
setRenderer createDom
|
||||||
7
examples/helloworld.nim
Normal file
7
examples/helloworld.nim
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
include karax / prelude
|
||||||
|
|
||||||
|
proc createDom(): VNode =
|
||||||
|
result = buildHtml(tdiv):
|
||||||
|
text "Hello World!"
|
||||||
|
|
||||||
|
setRenderer createDom
|
||||||
48
examples/login.nim
Normal file
48
examples/login.nim
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
|
||||||
|
include karax / prelude
|
||||||
|
from future import `=>`
|
||||||
|
import karax / errors
|
||||||
|
|
||||||
|
proc loginField(desc, field, class: kstring;
|
||||||
|
validator: proc (field: kstring): proc ()): VNode =
|
||||||
|
result = buildHtml(tdiv):
|
||||||
|
label(`for` = field):
|
||||||
|
text desc
|
||||||
|
input(class = class, id = field, onkeyuplater = validator(field))
|
||||||
|
|
||||||
|
const
|
||||||
|
login = kstring"login" # a const to prevent typos
|
||||||
|
|
||||||
|
proc validateNotEmpty(field: kstring): proc () =
|
||||||
|
result = proc () =
|
||||||
|
let x = getVNodeById(field)
|
||||||
|
if x.text.isNil or x.text == "":
|
||||||
|
errors.setError(login, field & " must not be empty")
|
||||||
|
else:
|
||||||
|
errors.setError(login, "")
|
||||||
|
|
||||||
|
|
||||||
|
# some consts in order to prevent typos:
|
||||||
|
const
|
||||||
|
username = kstring"username"
|
||||||
|
password = kstring"password"
|
||||||
|
|
||||||
|
var loggedIn: bool
|
||||||
|
|
||||||
|
proc loginDialog(): VNode =
|
||||||
|
result = buildHtml(tdiv):
|
||||||
|
if not loggedIn:
|
||||||
|
loginField("Name :", username, "input", validateNotEmpty)
|
||||||
|
loginField("Password: ", password, "password", validateNotEmpty)
|
||||||
|
button(onclick = () => (loggedIn = true), disabled = errors.disableOnError()):
|
||||||
|
text "Login"
|
||||||
|
p:
|
||||||
|
text errors.getError(login)
|
||||||
|
else:
|
||||||
|
p:
|
||||||
|
text "You are now logged in."
|
||||||
|
|
||||||
|
setError login, username & " must not be empty"
|
||||||
|
|
||||||
|
when not declared(toychat):
|
||||||
|
setRenderer loginDialog
|
||||||
36
examples/toychat.nim
Normal file
36
examples/toychat.nim
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
|
||||||
|
include login
|
||||||
|
|
||||||
|
const
|
||||||
|
message = "message"
|
||||||
|
|
||||||
|
type
|
||||||
|
TextMessage = ref object
|
||||||
|
name, content: kstring
|
||||||
|
|
||||||
|
var allMessages: seq[TextMessage] = @[]
|
||||||
|
|
||||||
|
proc doSendMessage() =
|
||||||
|
let inputField = getVNodeById(message)
|
||||||
|
allMessages.add(TextMessage(name: "you", content: inputField.text))
|
||||||
|
inputField.setInputText ""
|
||||||
|
|
||||||
|
proc main(): VNode =
|
||||||
|
result = buildHtml(tdiv):
|
||||||
|
loginDialog()
|
||||||
|
tdiv:
|
||||||
|
table:
|
||||||
|
for m in allMessages:
|
||||||
|
tr:
|
||||||
|
td:
|
||||||
|
bold:
|
||||||
|
text m.name
|
||||||
|
td:
|
||||||
|
text m.content
|
||||||
|
tdiv:
|
||||||
|
if loggedIn:
|
||||||
|
label(`for` = message):
|
||||||
|
text "Message: "
|
||||||
|
input(class = "input", id = message, onkeyupenter = doSendMessage)
|
||||||
|
|
||||||
|
setRenderer main
|
||||||
|
|
@ -4,8 +4,9 @@ import kdom, vdom, jstrutils, compact, jdict, vstyles
|
||||||
|
|
||||||
export kdom.Event
|
export kdom.Event
|
||||||
|
|
||||||
proc kout*[T](x: T) {.importc: "console.log", varargs.}
|
proc kout*[T](x: T) {.importc: "console.log", varargs, deprecated.}
|
||||||
## the preferred way of debugging karax applications.
|
## the preferred way of debugging karax applications. Now deprecated,
|
||||||
|
## you can now use ``system.echo`` instead.
|
||||||
|
|
||||||
type
|
type
|
||||||
PatchKind = enum
|
PatchKind = enum
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
## Include file that contains the common imports for the Karax framework.
|
## Include file that contains the common imports for the Karax framework.
|
||||||
|
|
||||||
import karax, karaxdsl, vdom, compact
|
import kbase, karax, karaxdsl, vdom, compact, jstrutils
|
||||||
|
|
|
||||||
|
|
@ -16,4 +16,7 @@ proc main =
|
||||||
exec("nim js -d:nodejs -r tests/difftest.nim")
|
exec("nim js -d:nodejs -r tests/difftest.nim")
|
||||||
exec("nim c tests/nativehtmlgen.nim")
|
exec("nim c tests/nativehtmlgen.nim")
|
||||||
|
|
||||||
|
for test in os.walkFiles("examples/*.nim"):
|
||||||
|
exec("nim js " & test)
|
||||||
|
|
||||||
main()
|
main()
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue