Cliqon provides a PHP Class called Html to allow you to generate HTML for any purpose and to be sent to the client for some purpose. The Class also has an alias being the letter H. The Class understands two types of HTML5 tag - a self closing tag such as <hr /> or <br /> and an open and close tag such as <body></body> or <div></div>.

Tags supported

At the top of the Class are two arrays, the first lists self closing tags and the second array lists open/close tags. The tags listed in these arrays are not exhaustive. Also we have a generic methods for handling the two different tag types, thus it is possible that an obscure but useful HTML5 tag that needs special handling, has been omitted.


       // Self closing tags

public static $stag = [

               'link', 'meta', 'input', 'img', 'br', 'hr', 'wbr', 'embed'

       ];

       

       // Open/Close tags

       public static $tag = [

               'html', 'head', 'script', 'title', 'body', 'style', 'a', 'p', 'iframe', 'map', 'noscript',

               'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'div', 'small', 'sub', 'sup', 'var',

               'ul', 'ol', 'li', 'dd', 'dl', 'dt', 'span', 'strong', 'i', 'q', 's', 'u',

               'table', 'caption', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'colgroup', 'col',

               // HTML5

               'nav', 'main', 'section', 'footer', 'header', 'aside', 'address', 'abbr', 'article', 'aside', 'audio',

               'bdi', 'blockquote', 'canvas', 'cite', 'datalist', 'details', 'dfn', 'figcaption', 'mark',

               'menu', 'menuitem', 'meter', 'object', 'param', 'output', 'picture', 'rp', 'rt', 'samp', 'source',

               'summary', 'time', 'track', 'video', 'dialog',

               // Form Element

               'form', 'button', 'fieldset', 'legend', 'textarea', 'select', 'optgroup', 'option', 'label', 'small'

               // To do checkbox, file, radio, select etc.        

       ];


Using the HTML Class

Let us consider the block of example code shown below. This is a snippet from the Class Admin{} -> Method Gallery() that demonstrates how the Class is used.


$gallery = H::div(['id' => 'gallery'],

       H::div(['class' => 'col-lg-3 col-md-4 col-xs-6 card', 'v-for' => '(img, key) in admimages'],

               H::div(['class' => 'card-block', 'style' => 'padding: 10px 4px 6px 4px;'],

                       H::h5(['class' => 'card-text fit'],'{{img.c_reference}} - {{img.c_common}}'),

                       H::h6(['class' => 'card-text fit bluec'],'{{img.d_title}}'),

                       H::a(['href' => '#', 'class' => 'h-100'],

                               H::img(['class' => 'img-fluid img-thumbnail', 'v-bind:src' => 'img.d_image', 'v-bind:alt' => 'img.d_image', 'v-bind:title' => 'img.d_title'])

                       ),

                       H::div(['class' => 'card-text'],'{{img.d_description}}'),

                       H::div(['class' => 'card-text'],

                               H::span(['class' => 'right'],

                                       H::i(['class' => 'fa fa-fw fa-lg fa-pencil pointer', 'v-on:click' => 'editRecord($event, img)']),

                                       H::i(['class' => 'fa fa-fw fa-lg fa-trash pointer', 'v-on:click' => 'deleteRecord($event, img)'])

                               ),

                               H::span(['class' => 'left redc capitalize bold'], '{{img.c_category}}')

                       )

               )

       )

);


We use the facilities of the PHP scripting language to treat the tag names as dynamic methods. Each tag method can take an optional series of arguments. We say the arguments are optional because a line break - H::br() - is complete in itself. However, as a general rule, the method tag will have an array of key/value pairs with the attributes for the tag, then one or more additional HTML strings or generators, separated by commas.


You will also note we can build in Vue templating instructions into the HTML as well. In the next documentation section on Forms, we will explain how we use the HTML Class within Cliqon to create form elements.

The best way to program HTML?

We, as the Authors of Cliqon, can imagine at least four ways to put HTML on a mobile or desktop screen. This section in the documentation explains one of the ways that we use tio generate HTML. We can and do use PHP parsed Templates. We also have programmed an HTML 'Class' in Javascript so that a Developer can write HTML in the same manner, directly in Javascript (or using jQuery). You could also write the instructions to generate a block of HTML using a PHP array or TOML. Simply put, the opportunities are endless.


We have come to the conclusion, that the next step is most likely to be converting Cliqon to generate instructions to send directly to an intelligent browser which will act on those instructions to display text, graphics and multi-media on the screen.


Created with the Personal Edition of HelpNDoc: Free Qt Help documentation generator