Yet another approach to developing GUI’s for Desktop apps using Crystal and Webview
Specificity of this variant :
- The underlying HTML is generated using “Blueprint”, which allows for a Vue-like developing experience (while writing no HTML or JS).
- The code that generates the interface maps the actual visual layout of the interface elements.
- Basically, Blueprint plays the role of JSX in React.
Excerpt:
class Form
include Blueprint::HTML
def initialize(@state : Int32 = state)
end
private def blueprint
# Global style
style { picoCSS }
# Local widget Style
style { <<-CSS
article {
padding: 20px;
}
input {
border: 1px solid black;
}
CSS
}
# Widget description
# Links (routing)
a href: "/hello" {"[Hello]"}
a href: "/#{ROOT}" {"[Root]"}
br
br
div {
article {
form action: "/get_name", method: "POST" {
label for: "#{Fname}" { "First name" }
input type: "text", id: Fname, name: Fname
br
label for: "#{Lname}" { "Last name" }
input type: "text", id: Lname, name: Lname
br
br
input type: "submit", value: "Get name (and increment state)"
}
br
form action: "/reset", method: "POST" {
input type: "submit", value: "Reset state"
}
}
article {
label { "#{@state}" }
}
}
end
end
