In this section we will have a closer look at Adaptive Components (ACs). First, we’ll show you how to integrate one of the built-in ACs. Later, you’ll learn how to develop your own reusable components.
In the following, all non-absolute file paths are relative to the default site’s base directory, that is ~/fit14-devbox/projects/_default/sites/_default/.
Sevenval FIT comes with some built-in Adaptive Components, usually referred to as system ACs. Let’s use the ac-stage system AC to build a nifty slideshow.
Change to the site directory of the default project and add a stage.html document to the public directory:
$ cd ~/fit14-devbox/projects/_default/sites/_default/
$ $EDITOR public/stage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Stage AC</title>
<style> img { display: block } </style>
</head>
<body>
<ac-stage sizing="auto" style="width: 300px; margin: auto; box-shadow: 0 5px 20px #666">
<ac-stage-element>
<img src="http://lorempixel.com/300/300/city/1/" />
</ac-stage-element>
<ac-stage-element>
<img src="http://lorempixel.com/300/300/city/4/" />
</ac-stage-element>
<ac-stage-element>
<img src="http://lorempixel.com/300/300/city/7/" />
</ac-stage-element>
</ac-stage>
</body>
</html>
To actually use the ac-stage AC, it has to be registered in the Flow. Therefore, create a conf/flow.xml containing the default actions default-request and parse, as well as a register-ac action which registers the ac-stage AC:
<flow>
<default-request />
<parse />
<register-ac name="ac-stage"/>
</flow>
And we’re done. Go and swipe through the images at http://local14.sevenval-fit.com/local/stage.html
In this section we will show you how to build your own Adaptive Components.
Change to the site directory of the default project and add a mirror.html document to the public directory:
$ cd ~/fit14-devbox/projects/_default/sites/_default/
$ $EDITOR public/mirror.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mirror AC</title>
</head>
<body>
<h1>Hello</h1>
<h1><ac-mirror flip="horizontal">Hello</ac-mirror> (Flipped horizontally)</h1>
<h1><ac-mirror flip="vertical" >Hello</ac-mirror> (Flipped vertically)</h1>
</body>
</html>
Now let’s create an AC that replaces the ac-mirror elements. You probably already guessed what we are trying to achieve.
As Adaptive Components may be shared between projects, they are designed as extensions and thus live in the project’s extensions directory. Let’s create the base directory for our AC extension ac-mirror :
$ mkdir -p ~/fit14-devbox/projects/_default/extensions/ac-mirror/
Each Adaptive Component needs a manifest.xml in its base directory that defines the AC’s name and lists the XSLT style sheets used to process the AC content:
$ $EDITOR ~/fit14-devbox/projects/_default/extensions/ac-mirror/manifest.xml
<adaptive-component name="ac-mirror">
<xslt src="main.xsl" />
</adaptive-component>
Now create the main.xsl in the same directory:
$ $EDITOR ~/fit14-devbox/projects/_default/extensions/ac-mirror/main.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="ac-mirror" mode="ac-mirror">
<xsl:variable name="scale">
<xsl:choose>
<xsl:when test="@flip = 'horizontal'">scale(-1, 1)</xsl:when>
<xsl:when test="@flip = 'vertical'" >scale( 1, -1)</xsl:when>
</xsl:choose>
</xsl:variable>
<div style="display: inline-block; transform: {$scale}">
<xsl:apply-templates />
</div>
</xsl:template>
</xsl:stylesheet>
Now the AC is ready to use. However, it won’t do anything unless it is registered in the Flow. Therefore, modify the conf/flow.xml so that it registers the ac-mirror AC:
<flow>
<default-request />
<parse />
<register-ac name="ac-mirror"/>
</flow>
Look at the result and see how the ac-mirror elements are replaced by divs from our new Adaptive Component. We have invented a new HTML element!
Unfortunately, if you access our page for example with Safari 8 or the Android 4 stock browser, it won’t work as expected. No mirror effect! The reason is that many browsers support CSS3 transformations only when using a prefixed property, like -webkit-transform or -ms-transform.
However, we can fix this easily by adding a $prefix variable to the XSLT which gets the vendor prefix from the current Delivery Context. For convenient access to the Delivery Context, the $dc variable is available to all AC XSLTs as a shortcut for document('fit://request/dc')/dc:
<xsl:variable name="prefix" select="$dc/css/transform/prefix"/>
<div style="display: inline-block; {$prefix}transform: {$scale}">
<xsl:apply-templates />
</div>
ac-mirror so that it also supports flip="no" and flip="both".flip="horizontal" the default, so that <ac-mirror>Hello</ac-mirror> flips horizontally, too.