Quick start

Installation

Just attach script of flex-patterns to your page. That’s all.

<script type="text/javascript" src="expatterns.min.js"></script>

Included into HTML

Create template as simple HTML file. Attach necessary JS and CSS files.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div class="page"> <div class="page-container"> <div class="page-wrapper"> <div class="page-content-wrapper">{{ content }}</div> </div> </div> </div> </body> </html>

Places, where some content will be inserted you have to mark as {{ name }}. It’s named – hook.

Add in your page (parent page) link to pattern.

<link rel="pattern" name="layout" src="/html/page/template.html" data-hooks="content" />

Read more here about LINKs in flex.patterns.

Now you can use your pattern just as tag LAYOUT (according attribute NAME in LINK).

<layout> <p>Something on my page</p> <p>Something on my page</p> <p>Something on my page</p> <p>Something on my page</p> <p>Something on my page</p> </layout>

If your pattern has more than 1 hook, for example like in next example: content and footer (2 hooks).

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div class="page"> <div class="page-container"> <div class="page-wrapper"> <div class="page-content-wrapper"> {{ content }} </div> <div class="page-footer-wrapper"> {{ footer }} </div> </div> </div> </div> </body> </html>

In this case you should define a value of each hook on page, where such pattern is used:

<layout> <content> <p>Something in content area</p> <p>Something in content area</p> <p>Something in content area</p> </content> <footer> <p>Something in footer</p> <p>Something in footer</p> <p>Something in footer</p> </footer> </layout>

And LINK will be next for this example:

<link rel="pattern" name="layout" src="/html/page/template.html" data-hooks="content, footer" />

As you see, attribute data-hooks has to have list of all used hooks. Read more here about LINKs in flex.patterns.

Also you can use external source of data. For example, you can render a table using as data source some url (where data can be gotten). Pattern will be next:

<pattern data-pattern="/components/table.simple/component.html" data-hooks-src="/examples/json/table.all.json" style="display:none;"></pattern>

As you noticed, attribute data-hooks-src has url to external data.

JavaScript call

The other way to include template into layout – call render method of flex.patterns:

"use strict"; var rows = []; for (var i = 0; i < 100; i += 1) { rows.push({ column_0: (Math.random() * 1000).toFixed(4), column_1: (Math.random() * 1000).toFixed(4), column_2: (Math.random() * 1000).toFixed(4), column_3: (Math.random() * 1000).toFixed(4), }); } _patterns.get({ url: '/patterns/table/container/pattern.html', node: document.body, hooks: { titles: { column_0: 'Column #0', column_1: 'Column #1', column_2: 'Column #2', column_3: 'Column #3', }, rows: _patterns.get({ url : '/patterns/table/row/pattern.html', hooks : rows, }) } }).render(); <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Flex.Template</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="pattern.css" /> </head> <body> <table data-type="Demo.Table"> <tr> <th>{{ titles.column_0 }}</th> <th>{{ titles.column_1 }}</th> <th>{{ titles.column_2 }}</th> <th>{{ titles.column_3 }}</th> </tr> {{ rows }} </table> </body> </html> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Flex.Template</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <tr> <td>{{ column_0 }}</td> <td>{{ column_1 }}</td> <td>{{ column_2 }}</td> <td>{{ column_3 }}</td> </tr> </body> </html>

Or you can create only one template of table (include template of row) and mark in your basic template repeated element as {{ [rows] }}. Like this:

<table data-type="Demo.Table"> <tr> <th>{{ titles.column_0 }}</th> <th>{{ titles.column_1 }}</th> <th>{{ titles.column_2 }}</th> <th>{{ titles.column_3 }}</th> </tr> <tr {{ [rows] }}> <td>{{ column_0 }}</td> <td>{{ column_1 }}</td> <td>{{ column_2 }}</td> <td>{{ column_3 }}</td> </tr> </table>

In this case will be enough to call your pattern with next:

var data_source = []; for (var i = 0; i < 100; i += 1) { data_source.push({ column_0: (Math.random() * 1000).toFixed(4), column_1: (Math.random() * 1000).toFixed(4), column_2: (Math.random() * 1000).toFixed(4), column_3: (Math.random() * 1000).toFixed(4), }); } _patterns.get({ url : '/patterns/table/single/pattern.html', node : document.body, hooks : { titles: { column_0: 'Column #0', column_1: 'Column #1', column_2: 'Column #2', column_3: 'Column #3', }, rows: data_source } }).render();