Tales of a Metal Cloud – Part 2

Metal Cloud
Photo by dedalusj

This article is looong overdue. I started it in July 2012 and never got any further, but now ownCloud 5 is released, and I have just released version 0.2 of TAL Page Templates for ownCloud so here it goes 😉 (Some of the examples for "current" ownCloud templates are a bit outdated, but I hope you get the gist of it)

In last episode of...

In the previous post about TAL Page Templates for ownCloud I gave my reasons for wanting to implement PHPTAL in ownCloud, and gave a short example of the benefits it will give for the developer. I wrote I "...will dig deeper into how to use it to render a full page, how to access variables, how to make use of the powerfull METAL.." which I have later decided not to do, as many have described that better than I could do, so if you're not familiar with TAL and METAL, there's plenty to read in the resources section in that post. I also wrote that I would show "...how I’ve plugged it all in to use ownClouds built-in authentication, template discovery and internationalization system", but thinking about it, there is no reason for showing how it's implemented, but rather I should show more of how to use the ownCloud specific parts. So this will mostly be a manual-like listing of how to use TAL page templates compared to the current use of inline PHP code.

What's next

With ownCloud 5 comes the new App Framework with another template engine - Twig. Personally I'm not very fond of the Twig markup, so hopefully from ownCloud 6 it will be possible to choose which engine to use. The App Framework is still very new, and I haven't explored it properly, but I'm sure it will be a great adition to ownCloud - especially if you can use TAL to write your templates 😉

Links and images

A lot of the scripting used in ownClouds page templates is for linking to apps, pages, services and images. There are several convenience methods for this. PHPTAL implements the standard set of TALES expressions, but also allows you to create custom expression modifiers. I have utilized this to substitute the direct PHP calls.

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>

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}

Translating content

Before:
<p><?php echo $l->t('This will be translated.'); ?><p>
After:
<p i18n:translate="">This will be translated.<p>
Read more...

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 .

Read more...

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" />
See more...

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>
Read more...

If you want to try it out, you will need ownCloud 5.x where you can enable the "TAL Page Templates for ownCloud" app from Settings/Apps. If you prefer to install from git, it's available at Github.

Flattr this!

Posted in ownCloud, PHP. Tags: , , . No Comments »