3.2 Modules | Views

What is a view?

A view is HTML that we want to render for a user. We can get started by creating a views folder in the module folder.

Create a View

Just create a .htm file in the views directory. You can call it whatever you want, but I usually start with index.htm.

There is no example to show here because a blank .htm file is an absolutely valid view file.

Rendering a View

A view is rendered from the modules controller.php file, using the following method.

From any method in controller.php:

/*
 * view_file_name
 * The name of the .htm file you want to load. Do not specify the extension.
 *
 * template_file_name
 * A path to the template to load. If not specified, the default from the config file will load.
 * An example using a template in the app/templates directory is `templates/template_name`. Do not specify the extension.
 *
 */
echo $this->render(string view_file_name, (optional)template_file_name);
//OR
$this->renderView(string view_file_name, (optional)template_file_name);

Variables

A view has access to a ton of PHP variables, similar to Global Templates, which you can access in unobtrusive custom HTML syntax. You can also pass any custom variables you want to your view.

In controller.php, before rendering a view, set variables to be used in the view like this:

$this->f3->set('variable_name', 'variable');

GF3 allows you to loop over arrays, do check statements, and run arbitrary PHP functions. Thus, you don't write direct PHP in any views.

Accessing Variables

For the full documentation, check out Fat-Free-Frameworks documentation related to Views and Templates.

Basics

Display variable in a block of HTML.

<p>Module Loaded: {{ @module }}!</p>

Arrays can be accessed without single or double quotes, e.g

<p>Hello {{ @SESSION[user][name] }}!</p>

Run arbitrary functions, perform math operations, ternary checks

<p>{{ 2 + 4 }}</p>
<p>{{ customFunction(@var1, @var2) }}</p>
<p>{{ @var1 > 5 ? 'var1 more than 5' : 'var2 less than 5' }}</p>

Conditional Segments

Do IF checks with HTML syntax.

<check if="{{ @loggedin }}">
    <p>HTML chunk to be included if condition is true</p>
</check>

<check if="{{ @gender == 'M' }}">
    <true>
        <div>Appears when condition is true</div>
    </true>
    <false>
        <div>Appears when condition is false</div>
    </false>
</check>

<check if="{{ @module == 'Home' }}">
    <false><span>Inserted if condition is false</span></false>
</check>

Repeating Segment

Loop over arrays using HTML syntax. Also has an optional counter="{{ @counter }}" attribute.

<repeat group="{{ @fruits }}" value="{{ @fruit }}">
    <p>{{ trim(@fruit) }}</p>
</repeat>

Embedding Javascript and CSS

If you insert F3 tokens inside a <script> or <style> section of your template, the framework will still replace them the usual way.

<script type="text/javascript">
	var discounts=[];
    <repeat group="{{ @rates }}" value="{{ @rate }}">
        // whatever you want to repeat in Javascript, e.g.
        discounts.push("{{ @rate }}");
    </repeat>
</script>