Introduction to HTML components

The HTML namespace contains mobile friendly customizable UI components compatibile with most web browsers and devices. Most UI components are based on Foundation frontend framework.

  • HTML language

    HTML is the standard markup language used to create Web pages. It is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). HTML tags most commonly come in pairs like <div> and </div>, although some tags represent empty elements and so are unpaired, for example <img>. Wikipedia

    Links to HTML-resources:

  • JavaScripts language

    JavaScript is a high-level, interpreted programming language. It is characterized as dynamic, weakly typed, prototype-based and multi-paradigm language. It is one of the core technologies of the World Wide Web. JavaScript is an essential part of modern web applications and all major web browsers can execute it.

    Links to JavaScript resources:

    JavaScripts in this framework

    Client side JavaScript can be inserted and manipulated using SPHPlayground PHP classes. However the general idea is to minimize the need to write clientside JavaScript.

  • Sass

    Build Status

    Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

    Sass has two syntaxes. The new main syntax (as of Sass 3) is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension .scss.

  • Scalable Vector Graphics (SVG)

    SVG is an XML-based vector image format for two-dimensional graphics. The specification is an open standard developed by the World Wide Web Consortium (W3C).

    SVG images and their behaviors are defined in XML text files. SVG images can be searched, indexed, scripted, and compressed. All major modern web browsers have SVG rendering support.

    Links to SVG information and resouces:

E_NOTICE
Undefined property: Sphp\Apps\Linking\PHP\BasicClassLinker::$getHtml
on line 42 of file:
/home/int48291/public_html/playground/manual/pages/Sphp.Html.php
E_NOTICE
Undefined property: Sphp\Apps\Linking\PHP\BasicClassLinker::$__toString
on line 43 of file:
/home/int48291/public_html/playground/manual/pages/Sphp.Html.php
E_NOTICE
Undefined property: Sphp\Apps\Linking\PHP\BasicClassLinker::$printHtml
on line 44 of file:
/home/int48291/public_html/playground/manual/pages/Sphp.Html.php

The Content interface

All HTML components in Sphp\Html implement at least Content. This interface ensures that the component can be outputted to an HTML document via the following three methods.

  1. returns the component as an HTML string. This method might throw an Exception if the execution fails.
  2. returns the component as an HTML string (PHP magic method)
  3. output the component as an HTML string or the exception description if the execution fails.

AbstractContent gives an implementation to the subsequent two of these methods leaving the implementation of the Content::getHtml() to the inheritor. Using this trait ensures that Content::__toString() will never throw any type of Exception during execution.

The Component interface and its AbstractTag implementation

The Component interface declares a group of methods for HTML attribute handling. It is implemented in the abstract class AbstractTag. AbstractTag is the first actual PHP implementation of a HTML tag in the framework. It also defines the tagname property in AbstractTag::__construct().

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html;
    4.  
    5. use Sphp\Html\Flow\Paragraph;
    6. use Sphp\Html\Flow\Headings\H5;
    7.  
    8. $container = new PlainContainer();
    9. $container["heading"] = (new H5("Lorem ipsum dolor sit amet"))->addCssClass("sub-heading");
    10. $container["paragraph"] = (new Paragraph())
    11.         ->appendRawFile("manual/snippets/loremipsum.html");
    12. $container["paragraph"]->inlineStyles()->setProperty("text-align", "justify");
    13. $container->append('foo');
    14.  
    15. /**
    16.  * A lambda function for object searching
    17.  *
    18.  * @param mixed $element
    19.  */
    20. $search = function($element) {
    21.   return (is_object($element));
    22. };
    23. //
    24. $container[] = new Paragraph("<b><var>objects</var>(s):</b> "
    25.         . count($container->getComponentsBy($search)));
    26. $container->printHtml();
    27.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    Lorem ipsum dolor sit amet

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium ipsum non viverra dictum. Etiam scelerisque gravida ullamcorper. Aenean rhoncus a sem in vehicula.

    enean elit sem, lacinia non dapibus quis, commodo vel enim. Pellentesque nec interdum dolor. Vestibulum varius suscipit diam eu feugiat. Nam rhoncus nunc in felis egestas elementum.

    Mauris pellentesque, elit et pulvinar ornare, dui lacus ullamcorper urna, tincidunt dictum risus tellus non nisi..

    Donec tincidunt convallis libero nec sollicitudin. Integer sem nulla, pulvinar laoreet rutrum sit amet, suscipit eget sem. Cras ex orci, fringilla a accumsan at, malesuada sed lorem. Nam eget hendrerit dui..

    Aenean vitae commodo mi, non elementum enim. Nulla aliquam pharetra urna..

    foo

    objects(s): 2

The ContainerComponent declares the properties fot a HTML wrapper element (a tag pair) acting as a container for other elements. It has a implementation ContainerTag in the framework.

Furthermore all actual framework components implement Component }}

The AbstractTag class

This Abstract class is the base implementation for all predefined HTML tag components.

Note! Use only HTML attributes that are specified for the underlying HTML tag name returned from the method getTagName().

Ajax loading the content using the AjaxLoader

Using AJAX to dynamically load information from a PHP file

  • Original HTML source file used in Ajax loading
    1. <h3 id="lorem_h">Lorem ipsum</h3>
    2.  
    3. <p id="par_1" style="color: #555">Lorem ipsum dolor sit amet, consectetur
    4. adipiscing elit. Donec pretium ipsum non viverra dictum. Etiam scelerisque
    5. gravida ullamcorper. Aenean rhoncus a sem in vehicula.</p>
    6.  
    7. <p id="par_2" style="color: #090">enean elit sem, lacinia non dapibus quis,
    8. commodo vel enim. Pellentesque nec interdum dolor. Vestibulum varius suscipit
    9. diam eu feugiat. Nam rhoncus nunc in felis egestas elementum.</p>
    10.  
    11. <p id="par_3" style="color: #8c1111">Mauris pellentesque, elit et pulvinar ornare,
    12. dui lacus ullamcorper urna, tincidunt dictum risus tellus non nisi..</p>
    13.  
    14. <p id="par_4" style="color: #0bd">Donec tincidunt convallis libero nec
    15. sollicitudin. Integer sem nulla, pulvinar laoreet rutrum sit amet, suscipit eget
    16. sem. Cras ex orci, fringilla a accumsan at, malesuada sed lorem. Nam eget
    17. hendrerit dui..</p>
    18.  
    19. <p id="par_5" style="color: yellow">Aenean vitae commodo mi, non elementum enim.
    20. Nulla aliquam pharetra urna..</p>
    Highlighted with GeSHi 1.0.9.1
  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html;
    4.  
    5. (new Div("<b>Lorem paragraphs begin</b>"))
    6.         ->ajaxPrepend("manual/snippets/loremipsum.html #lorem_h")->printHtml();
    7. (new Div())
    8.         ->ajaxAppend("manual/snippets/loremipsum.html #par_1")
    9.         ->printHtml();
    10. (new Div("<b>Lorem paragraphs end</b>"))
    11.         ->ajaxPrepend("manual/snippets/loremipsum.html #par_4")->printHtml();
    12.  
    13. ?>
    Highlighted with GeSHi 1.0.9.1
  • Execution result as highlighted code
    1. <div data-sphp-ajax-prepend="manual&#x2F;snippets&#x2F;loremipsum.html&#x20;&#x23;lorem_h"><b>Lorem paragraphs begin</b></div>
    2. <div data-sphp-ajax-append="manual&#x2F;snippets&#x2F;loremipsum.html&#x20;&#x23;par_1"></div>
    3. <div data-sphp-ajax-prepend="manual&#x2F;snippets&#x2F;loremipsum.html&#x20;&#x23;par_4"><b>Lorem paragraphs end</b></div>
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    Lorem paragraphs begin
    Lorem paragraphs end

https://caniuse.com/