Skip to content

Advanced Guide

Jump to bottom
Nana Axel edited this page Apr 4, 2018 · 22 revisions

Summary

Data binding

With Bubble, you are able to bind data in templates from PHP. To do this, you have to use \Bubble\Bubble::set(string, object).

  • The first parameter is a string, which represent the variable name of the data in the template
  • The second parameter is an object, which represent the value of the data The second parameter can be all primitive types in PHP (string, number, array, boolean, null, etc...) or (in the case of an user-defined type) a class which implements \Bubble\Data\IBubbleDataContext.

To use the data sent from PHP in the template, you have to use ${variable_name} where you want to use your value (variable_name represents the name you pass as the first parameter of \Bubble\Bubble::set())

Example of primitive type data binding

test.bubble

<!DOCTYPE html>
<b:bubble xmlns:b="http://bubble.na2axl.tk/schema">
    <html lang="en">

        <head>
            <meta charset="UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
            <title>Bubble Template Test</title>
        </head>

        <body>
            <b:text value="${hello}"/>
            <br/>
            With Bubble, you can pass to the template all supported primitive types of PHP!
            <ul>
                <li>String: ${string}</li>
                <li>Number: ${number}</li>
                <li>Boolean: ${bool}</li>
                <li>Array: ${array[0]}, ${array[1]} !</li>
                <li>Associative array: ${associative.foo}, ${associative.bar} !</li>
                <li>Null: ${null}</li>
            </ul>
        </body>

    </html>
</b:bubble>

test.php

<?php

use Bubble\Bubble;

// Create a new instance of the compiler
$bubble = new Bubble();

// Send data to template
$bubble->set("hello", "Hello, World !");
$bubble->set("string", "This is a string sent to the template");
$bubble->set("number", "2627");
$bubble->set("bool", true);
$bubble->set("array", array("Hello", "World"));
$bubble->set("associative", array("foo" => "Hello", "bar" => "World"));
$bubble->set("null", null);

// Compiles the template file and write the output in another
$bubble->compileFile("test.bubble", "test.html");

// Compiles the template file and return the output as string
echo $bubble->renderFile("test.bubble");

test.html: Compiled output

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Bubble Template Test</title>
    </head>
    <body>
        Hello, World ! 
        <br>
        With Bubble, you can pass to the template all supported primitive types of PHP! 
        <ul>
            <li>String: This is a string sent to the template</li>
            <li>Number: 2627</li>
            <li>Boolean: true</li>
            <li>Array: Hello, World !</li>
            <li>Associative array: Hello, World !</li>
            <li>Null: </li>
        </ul>
    </body>
</html>

NOTE: The value of null is not displayed.

Example of data binding with data context

test.bubble

<!DOCTYPE html>
<b:bubble xmlns:b="http://bubble.na2axl.tk/schema">
    <html lang="en">

        <head>
            <meta charset="UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
            <title>Bubble Template Test</title>
        </head>

        <body>
            <b:text value="${hello}"/>
            <br/>
            With Bubble, you can pass to the template a data context, which allows you to use
            all public members (methods and properties) of a class in your template!
            <ul>
                <li>Is ${username} ?: ${context.isUser(${username})}</li>
                <li>Username: ${context.data.username}</li>
                <li>Email: ${context.data.email}</li>
                <li>Activated: ${context.isBanished()}</li>
                <li>Banished: ${context.isBanished()}</li>
            </ul>
        </body>

    </html>
</b:bubble>

user.php

<?php

use Bubble\Data\IBubbleDataContext;

class User implements IBubbleDataContext {

    public $data = array(
        "id" => 1,
        "username" => "na2axl",
        "password" => "1234567890",
        "email" => "ax.lnana@outlook.com",
        "banished" => false,
        "activated" => true,
        "administrator" => true
    );

    public function isAdmin() {
        return $this->data["administrator"];
    }

    public function isBanished() {
        return $this->data["banished"];
    }

    public function isActivated() {
        return $this->data["activated"];
    }

    public function isUser($username) {
        return $this->data["username"] === $username;
    }
}

test.php

<?php

// Require the data context
require_once "user.php";

use Bubble\Bubble;

// Create a new instance of the compiler
$bubble = new Bubble();

// Send data to template
$bubble->set("hello", "Hello, World !");
$bubble->set("username", "whitney");
$bubble->set("context", new User());

// Compiles the template file and write the output in another
$bubble->compileFile("test.bubble", "test.html");

// Compiles the template file and return the output as string
echo $bubble->renderFile("test.bubble");

test.html: The compiled output

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Bubble Template Test</title>
    </head>
    <body>
        Hello, World ! 
        <br>
        With Bubble, you can pass to the template a data context, which allows you to use all public members (methods and properties) of a class in your template! 
        <ul>
            <li>Is whitney ?: false</li>
            <li>Username: na2axl</li>
            <li>Email: ax.lnana@outlook.com</li>
            <li>Activated: false</li>
            <li>Banished: false</li>
        </ul>
    </body>
</html>

Functions

In Bubble templates you are able to call native PHP functions and built-in functions. Every calls must be wrapped in double braces({{ and }}). All of built-in Bubble functions must start with an @ to create a difference with native PHP functions.

Example

test.bubble

<!DOCTYPE html>
<b:bubble xmlns:b="http://bubble.na2axl.tk/schema">
    <html lang="en">

        <head>
            <meta charset="UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
            <title>Bubble Template Test</title>
        </head>

        <body>
            <b:text value="{{ strtoupper(${hello}) }}"/>
            <br/>
            With Bubble, you can call native PHP functions or built-in functions in your
            template. All you need is to use <b>double braces</b> to wrap your call in!
            all public members (methods and properties) of a class in your template!
            <br/>
            <b:text element="p" value="{{ @truncate(${long_text}, 30) }}" />
            The previous (very) long text have {{ strlen($long_text) }} characters and have been certainly
            truncated in 30 characters.
        </body>

    </html>
</b:bubble>

Clone this wiki locally