Archive for November 2011
Dreaweaver templating in Tridion
Unless we are familiar with XSLT, I believe, most of us would prefer developing Dreamweaver TBB (DWT) for CT/PT layout!
So just thought of sharing basic Dreamweaver syntax which are commonly used anyway. There are few Dreamweaver extensions are available, developed by Tridion Community, to simplify and enhance DWT templating. But I didn’t get a chance to work on these extensions. So below code syntax would work without any DWT extensions.
I’ve created few simple building blocks for this DWT example.
Schema & Component
Below is the sample content created based on a simple schema. So assume that component will have this below content.
<Blog xmlns="uuid:18db19ea-b584-4f97-9ac6-8a6e269c9f60"> <Author> <Name>Thotta</Name> <TwitterHandle>thotta</TwitterHandle> <Genere>Tamil</Genere> </Author> <Title>TwiTamils</Title> <Body>This post is to discuss about active twitters.</Body> <Tweeters> <Name>Sathish</Name> <TwitterHandle>sathm</TwitterHandle> <Genere>Tamil</Genere> </Tweeters> <Tweeters> <Name>Nuno</Name> <TwitterHandle>nunolinhares</TwitterHandle> <Genere>Tridion</Genere> </Tweeters> <Tweeters> <Name>Sowbarnika</Name> <TwitterHandle>sowmi_</TwitterHandle> <Genere>Tamil</Genere> </Tweeters> <Tweeters> <Name>Srinivasan</Name> <TwitterHandle>DKCBE</TwitterHandle> <Genere>Tamil</Genere> </Tweeters> <Tweeters> <Name>Alvin Reyes</Name> <TwitterHandle>Nivlong</TwitterHandle> <Genere>Tridion</Genere> </Tweeters> </Blog>
And the component layout is defined in DWT as follows
<div>
<h1>@@Component.Fields.Title@@</h1>
by <a href="twitter.com/@@Component.Fields.Author.TwitterHandle@@">@@Component.Fields.Author.Name@@</a>
@@Component.Fields.Body@@
<hr />
<table border="1">
<tr>
<td><strong><span style="text-decoration: underline;">Tweeters</span></strong></td>
<td><strong><span style="text-decoration: underline;">Tamil Tweeters</span></strong></td>
</tr>
<tr>
<td>
<ul>
<li><strong><a href="twitter.com/@@TwitterHandle@@">@@Name@@</a></strong></li>
</ul>
<ul>
<li><em><a href="twitter.com/@@TwitterHandle@@">@@Name@@</a></em></li>
</ul>
</td>
<td>
<ul>
<li><a href="twitter.com/@@TwitterHandle@@">@@Name@@</a></li>
</ul>
</td>
</tr>
</table>
</div>
Using template builder, we would need to execute this component template against the above component and that would render the output as,
TwiTamils
by
Thotta
This post is to discuss about active twitters.
| Tweeters | Tamil Tweeters |
Accessing a field value
There are many ways to retrieve the field of a component : @@Component.Fields.<field name>@@ or @@<field name>@@ or ${field name}.
Calling simply the field name, like @@Title@@, would work but we should be clear that the same field name was not used on CT/PT level. Otherwise it would return title of the component template since Title is the default attribute for Component Template also.
It’s always better to use full path like @@Component.Fields.Title@@.
Accessing sub field’s value
If embedded schema’s field needs to be accessed, we can extend the call by adding the sub field name.
As you can see in the above component xml source of a component, Name is the sub field of Author. So it can be accessed like
@@Component.Fields.Author.Name@@
Accessing a value from Collection
If there are any collection of fields, that can be looped using TemplateBeginRepeat. In the above content, Tweeters is the collection , the sub fields can be accessed inside the loop.
<!-- TemplateBeginRepeat name="Component.Fields.Tweeters" --> Name: @@Name@@ Handle : @@TwitterHandle@@ <!-- TemplateEndRepeat -->
Please note that the sub fields cannot be called like Component.Fields.Tweeters.Name as it cannot navigate right through the Component.
I wish to have something like Component.Fields.Tweeters[0].Name … Component.Fields.Tweeters[3].Name… but unfortunately, it won’t work 
Getting loop index
When we are iterating a collection, obviously we would require to have an index of the loop. Unlike other languages, we can’t declare any variables here but Dreamweaver provides a default variable (TemplateRepeatIndex) which holds the index value of the loop.
@@ TemplateRepeatIndex@@ -> this will print the index value on the page.
Conditional loop
Dreamweaver also provides conditional loop which is similar to If conditions in other languages.
<!-- TemplateBeginIf cond="conditions" --> …. <!-- TemplateEndIf -->
For example,
If I want to render a footer component on bottom of the page, we can try something like
<!-- TemplateBeginRepeat name="Components" -->
<!-- TemplateBeginIf cond="ComponentTemplate.Metadata.Position = 'Footer'" -->
@@RenderComponentPresentation(Component.ID, ComponentTemplate.ID)@@
<!-- TemplateEndIf -->
<!-- TemplateEndRepeat -->
Hope this helps for beginners!
Publication URL TBB
In most cases, you will not be publishing the binary files (images/css/js) in the same location of where you publish pages. As a good practice, these external files will be stored in separate folders. In such cases, you will need to specify path (relative) in the page DWT template.
Generally external css files will be declared like
<link href="/styles/main.css" rel="stylesheet" type="text/css"/>
This would work only if you have styles folder immediately after server path.
http://<server>/styles/main.css
In Tridion, default publication URL is “/” but if you have specified any path in the Publication, you will need to append that path also. It should be accessed like.
http://<server>/<pub url>/styles/main.css
The below C# TBB will get the publication URL of the current publication.
//gets the current session object
Session session = engine.GetSession();
//gets page object from the package
Item item = package.GetByType(ContentType.Page);
//gets TcmUri object of Page
TcmUri tcmObj = new TcmUri(item.GetValue("ID"));
//generate tcm string format with publication id
string publicationId = string.Format("tcm:0-{0}-1", tcmObj.PublicationId);
//gets publication object from the current session
Publication publication = new Publication(new TcmUri(publicationId), session);
//writes the publication URL into the package
package.PushItem("PublicationUrl", package.CreateStringItem(ContentType.Text, publication.PublicationUrl));
As you aware, variable “PublicationUrl” will be included in the package so this variable is accessible when you include this TBB on your page template.
Now you need to call this variable on the page DWT like below,
<link href="@@PublicationUrl@@/styles/main.css" rel="stylesheet" type="text/css"/>
C# Algorithms
Since I was a developer from the early days, I was always fond of writing algorithms. But I agree that I’m not an expert in writing algorithms. But it’s just my interest to learn it, learn from basics. Since I’m so interested in mathematics and algorithms, I’m still having all the materials I’ve used in my school. I’m so comfortable to refer those materials again as I’ve already studied them. As usual, C# will be preferred language!
I don’t know if that’s gonna help my career. Since I moved to Portal & Content Management stream, I moved away from writing-code phase! Learning algorithms was my primary objective to start this blog…! it’s good that I’m starting to learn at least now!
