Advanced Guide

Summary

Bubble configuration
Data binding
Functions
- Bubble functions list
Functions context
Conditions
Loops
- for loop
- foreach loop
Template parts (include)
Abstract templates (extends and block)
Tokens API

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!
            <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>

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("long_text", "Qui aliquip excepteur qui aliquip aliqua. Quis eiusmod ad duis pariatur veniam mollit pariatur sunt velit ea dolor non ex cupidatat. Laboris occaecat cupidatat esse aliqua sit mollit mollit consectetur officia eiusmod minim ut minim. Tempor excepteur esse ad officia fugiat qui veniam. Ex sunt ut elit consequat. Ea do aute ea sunt. Est pariatur fugiat ullamco eiusmod cupidatat duis duis excepteur voluptate qui. Consequat ullamco consectetur id labore.");

// 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 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!
        <br>
        <p>Qui aliquip excepteur qui a...</p>
        The previous (very) long text have 454 characters and have been certainly truncated in 30 characters. 
    </body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Advanced Guide

Summary

Data binding

Example of primitive type data binding

Example of data binding with data context

Functions

Example

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally