LuckyHXML

Similar to LuckyHTML, but for Hyperview.

Installation

1. Add the dependency to your shard.yml:

dependencies:
lucky_hxml:
github: luckyframework/lucky_hxmlversion: ~> 0.1

2. Run shards install

Add to Lucky

1. Add the dependency to src/shards.cr:

require"lucky"require"avram/lucky"# ...require"lucky_hxml"

2. Add a src/components/base_hxml_component.cr file:

abstractclassBaseHXMLComponent < LuckyHXML::Componentend

Synonymous with Lucky Components

3. Add a src/screens/main_screen.cr file:

abstractclassMainScreen < LuckyHXML::Screenend

Synonymous with Lucky HTML

4. Include in BrowserAction (or any Lucky::Action) and modify accepted_formats:

abstractclassBrowserAction < Lucky::Action# ...includeLuckyHXML::Renderable
accepted_formats [:html, :json, :xml], default::html# ^^^^end

Usage

Create a Screen

classHomeScreen < MainScreendefrender
doc do
screen do
styles do
style id:"body", flex:"1", backgroundColor:"white"end
body style:"body"do
view do
text "Welcome!"endendendendendend

Create a Component

classPhoneBehaviorComponent < BaseHXMLComponent
needs trigger : String="press"
needs phone_number : Stringdefrender
behavior(
"xmlns:comms": "https://hypermedia.systems/hyperview/communications",
trigger: trigger,
action:"open-phone",
"comms:phone-number": phone_number
)
endend

Create Custom Elements

You can create custom elements and attributes with element & attribute methods respectively.

classSwipeRowComponent < BaseHXMLComponentdefrender(&)
element "swipe:row"do
swipe_namespace
yieldendendprivatedefswipe_namespace : Nil
attribute "xmlns:swipe", "https://hypermedia.systems/hyperview/swipeable"endend

Mount a Component

mount PhoneBehaviorComponent, phone_number:"123-456-7890"

With a block:

mount SwipeRowComponentdo# ...end

Render a Screen

classHome::Index < BrowserAction
get "/"do# Same as `html` macro
hxml HomeScreenendend

Render a Component

classHome::Index < BrowserAction
get "/"do# Same as `component` method
hxml_component PhoneBehaviorComponent, phone_number:"111-222-3333"endend