Customizing Nodes

Customizing a Node

Every node follows the same convention :

Node(ContentType,
     style: ((NodeType) -> Void),
     layout: ((NodeType) -> Void),
     ref: UnsafeMutablePointer<NodeType>,
     children: [Renderable])

For example a Label :

Label("My first Label",
     style: { $0.textColor = .red },
     layout: { $0.centerInContainer() },
     ref:  &lablel,
     children: [
        // Add Child nodes here
     ])

What's cool is that everything is optional so that you can just write :

Label("My first Label")

Content

The first parameter is the content, for instance an image for an Image node, some text for a Label.

Style

The style parameter is where you customize the UIKit object. Just style your object however you want, say modify it's backgroundColor!

Layout

Notice we strongly separated the layout and the style parameters. Though they are both called with the UIKit object, we believe it's clearer to seperate what is styling from what is in the layout domain.

Once again we want to play nice with UIKit and in this block you can use pure Autolayout. We want to stress this point because it's a major advantage of this tool. We like to use Stevia, but be free to use whatever layout library that suits your needs !

Ref

This will come very useful for falling back to the classic way of doing things.

class MyComponent: StatelessComponent {

    var labelReference = UILabel()

    func render() -> Node {
        return Label("My text", ref: &labelReference)
    }

    func foo() {
      // Later you can access the label and fall back to the old way of doing thing!
      labelReference.text = "Yay I'm not stuck in this !"
    }
}

Children

This is just an array of the nested nodes.