The Joomla! Community Magazine™

Using SobiPro as a CCK

Written by | Saturday, 31 May 2014 16:00 | Published in 2014 June
After evaluating several CCK’s, it appeared that SobiPro met all my requirements for building a portfolio website. The single unknown for me was the degree of difficulty in learning the EXtensible Stylesheet Language (XSLT) technology. For those not familiar, XSLT is a “template” technology that parses an XML document and generates HTML. I liked the idea of being able to manipulate the data model along with the view. I did not like the idea of learning a new technology.
Using SobiPro as a CCK image by @Helvecio

Learning XSLT

To understand better what XSLT was, I installed SobiPro and the demo applications and looked at the .XSL files via FTP/Dreamweaver. Thankfully, I was able to easily understand the XSLT syntax.

Where I had difficulty was with the understanding of the hierarchy of the SobiPro architecture and the functional flow through the file structure. Once I became familiar with the Section, Category, Item hierarchy, I understood that I could create a variety of field types within an item, and that the “Item” is like a custom Joomla “Article.” The Item then is my back-end data entry form… in CCK nomenclature, a custom “content type.” This form is used to create an “item” (the SobiPro name for an article) that can be accessed from the front end via one or many categories. Sections were simply groups of categories. At this point, I thought of “sections” as applications, since the demo data that comes with SobiPro has different sections each for a specific application (Marketplace, Real Estate, Business Directory, etc.).

The functional flow through the file structure can best be understood by first understanding the SobiPro file naming conventions. All the .XSL files are within a folder found at / components / com_sobipro / usr / templates / my-section-name (for me, this was the /tbdp/ folder). At this point I also now understood that the “my-section-name” folder was a template in addition to an application or a section.

Within the /tbdp/ folder are other folders where the XSLT files reside. Depending upon the flow of your data presentation, there are a variety of XSLT files that you need to be aware of. For my application, I was concerned with just four XSLT files. These files and their folders are:

  1. /section/view.xsl – given control when the “By Client” menu item is selected
  2. /category/view.xsl – given control for all other categories (Digital, Branding, etc.).
  3. /common/entries.xsl – used to generate HTML to display an anchor/image for all the entries in a category
  4. /entry/details.xsl – used to generate HTML to display an individual entry’s fields (this is usually done in the vcard.xsl file)

Once I understood that clicking a menu item took me to either (1) or (2), I easily understood the flow options for my application. I used (3) to create a list of project images/anchors for a category, and when the anchor was clicked, control was passed to the specific entry (4) in that category. Having had some exposure to real time programming, I found these control flows very similar to real time programming flow and control.

XML and XSLT

Within SobiPro there is a configuration option that allows a query parameter to be added to the URL, and when added, shows the generated XML, before the HTML is generated. This gives developers an easy method of see the live XML data during the development of the XSLT.

When you add this query parameter (?xml=1) and then view the source code in your browser, you will see the XML that SobiPro generates for your application. Here is an example of a piece of XML generated by my application:

XML Example

xml-example2

XSLT Example

As I said previously, the XSLT syntax was easy and I was able to re-purpose the XSLT from the demo for most of my specific usage. Here is a small snippet of XSLT code:

xslt-example1

XSLT and PHP

In addition to having this extra “model” (the XML document) available to the developer, SobiPro provides direct access to PHP and the Joomla environment. PHP can easily accessed while in your XSLT template via a custom function or via SobiPro built in functions. An example of a custom PHP function is the following, which is used to set the value of the “fromCategory” variable from a cookie named “from CategoryCookie”:

xslt-php

Going Forward

It is hoped that this introduction to the XSLT technology will allow others to not only consider their usage, but also to feel comfortable trying new Joomla extensions and new technologies.

As the value and popularity of CCKs continues to grow, I would like to see more CCK functionality incorporated into Joomla. Additionally, having seen the power of XSL, I am an advocate for its usage throughout Joomla, as it allows developers to (optionally) generate XML and also incorporate XSLT usage into Joomla’s template architecture. What are your thoughts? Let’s have a conversation.

Read 6637 times
Tagged under Sitebuilders, English
Dennis Kmetz

Dennis Kmetz

Front end developer specializing in Joomla at Taylor Bruce Design Partnership, Chicago (www.taylorbruce.com).