Introduction

Initializing a template

Before:

$output = new OCP\Template('app', 'template', 'user');

After:

$tmpl = new OC_TALTemplate('app', 'template', 'user');

Assigning a variable

Before:

$tmpl->assign('myvar', $myvar);

After:

$tmpl->assign('myvar', $myvar);

The sharp minds may have noticed that there is no difference ;-)

Linking to an image

Before:

<img class="svg" src="<?php echo image_path('', 'logo-wide.svg'); ?>" alt="ownCloud" />
<img class="svg" src="<?php echo image_path('app', 'someimage.png'); ?>" alt="ownCloud" />

After:

<img class="svg" tal:attributes="src image:string:logo-wide.svg" alt="ownCloud" />
<img class="svg" tal:attributes="src image:string:app/someimage.png" alt="ownCloud" />

Constructing a link

Before:

<a href="<?php echo link_to('', 'index.php'); ?>">Home</a>
<a href="<?php echo link_to('app', 'index.php'); ?>">Some app</a>

After:

<a tal:attributes="href linkto:string:index.php">Home</a>
<a tal:attributes="href linkto:string:app/index.php">Some app</a>

Link to remote service

Before:

<link rel="stylesheet" href="<?php echo OC_Helper::linkToRemote('core.css') ?>" type="text/css" media="screen" />
<a href="<?php echo OC_Helper::linkToRemote('webdav') ?>">WebDAV</a>

After:

<link rel="stylesheet" type="text/css" media="screen" tal:attributes="href remote:string:core.css" />
<a tal:attributes="href remote:string:webdav">WebDAV</a>

The latter produces a link to the WebDAV service on the current instance: WebDAV

Accessing configuration

Before:

ownCloud version: <?php echo OCP\Config::getSystemValue('version'); ?>
Default quota: <?php echo OCP\Config::getAppValue('files', 'default_quota'); ?>
Calendar time zone: <?php echo OCP\Config::getUserValue(OCP\User::getUser(), 'calendar', 'timezone'); ?>

After:

ownCloud version: $${config:string:sys/version}
Default quota: $${config:string:app/files/default_quota}
Calendar time zone: $${config:string:user/calendar/timezone}

ownCloud version: ${config:string:sys/version}
Default quota: ${config:string:app/files/default_quota}
Calendar time zone: ${config:string:user/calendar/timezone}

Translating content

Before:

<p><?php echo $l->t('This will be translated.'); ?><p>

After:

<p i18n:translate="">This will be translated.<p>

Translating content with variables

Before:

There is no standardized way to do this currently. I have seen both translation keys using printf formatting and custom interpolation using e.g. curly brackets.

After:

<tal:block i18n:name="username" tal:content="user" />
<p i18n:translate="">Your user name is ${username}.</p>

Your user name is ${username}.

Or you can wrap it in some markup:

<p i18n:translate="">
Welcome back <span i18n:name="username" tal:replace="user"/>.
</p>

Welcome back .

Translating attributes.

Before:

<img alt="<?php echo $l->t('Log out');?>" title="<?php echo $l->t('Log out');?>" src="<?php echo image_path('', 'actions/logout.svg'); ?>" />

After:

<img tal:attributes="src image:string:/actions/logout.svg" i18n:attributes="alt;title" alt="Log out" title="Log out" />

Iterating

$$arr = array('color' => 'red',
            'taste' => 'sweet',
            'shape' => 'round',
            'name'  => 'apple');

Before:

<select size="4">
<?php foreach($$arr as $key=>$value) { ?>
<option value="<php echo $key; >" ><php echo $value; ></option>
</select>
<?php } ?>

After:

<select size="4">
<option tal:repeat="item arr" tal:attributes="value repeat/item/key" tal:content="item"></option>
</select>

Initializing a template

Before:

After:

Introduction

Initializing a template

Assigning a variable

Linking to an image

Constructing a link

Link to remote service

Accessing configuration

Translating content

Translating content with variables

Translating attributes.

Iterating

Initializing a template

A simple example

Caveats & Gotchas

References