README

一组类，除了创建网页的DOM外，还提供创建基本网页创建实用工具。

内容

支持的PHP版本
特性
使用方法
创建XML文档
许可证

支持的PHP版本

特性

能够以面向对象的方法创建自定义HTML UI元素。
通过PHP实现虚拟DOM。
使用PHP构建动态HTML模板。
支持渲染XML文档。

使用方法

基本使用

基本用例是拥有一个包含文本的HTML文档的体。类 HTMLDoc 代表HTML文档。简单来说，创建此类的实例并使用它来构建整个HTML文档。该类可以使用以下方式使用

use webfiori\ui\HTMLDoc;

//This code will create HTML5 Document, get the <body> node and, add text to it.
$doc = new HTMLDoc();
$doc->getBody()->text('Hello World!');
echo $doc;

此代码的输出是HTML 5文档。文档的结构将类似于以下HTML代码

<!DOCTYPE html>
<html>
  <head>
    <title>
      Default
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  </head>
  <body itemscope itemtype="http://schema.org/WebPage">
    Hello World!
  </body>
</html>

构建更复杂的DOM

所有HTML元素都表示为 HTMLNode 类的实例。开发者可以扩展此类以创建自定义UI组件作为类。库已经预置了一些组件，在下一个代码示例中使用。此外，该类有方法可以利用这些组件并加快将它们添加为任何HTML元素子元素的过程。以下代码显示了创建基本登录表单的代码。

use webfiori\ui\HTMLDoc;

//Create new instance of "HTMLDoc".
$doc = new HTMLDoc();

// Build a login form.
$body = $doc->getBody();
$body->text('Login to System')->hr();

$form = $body->form(['method' => 'post', 'actiion' => 'https://example.com/login']);

$form->label('Username:');
$form->br();
$form->input('text', ['placeholder'=>'You can use your email address.', 'style' => 'width:250px']);
$form->br();
$form->label('Password:');
$form->br();
$form->input('password', ['placeholder' => 'Type in your password here.', 'style' => 'width:250px']);
$form->br();
$form->input('submit', ['value' => 'Login']);

echo $doc;

代码的输出将类似于以下图像。

HTML/PHP模板文件

一些开发者不喜欢所有东西都在PHP中。例如，前端开发者喜欢直接使用HTML，因为它的语法熟悉。因此，该库包括使用HTML或PHP文件作为模板的基本支持。如果模板是纯HTML，则使用插槽在文档中设置变量。如果模板是PHP和HTML的混合，则可以将PHP变量传递给模板。

HTML模板

假设我们有一个HTML文件具有以下标记

<!DOCTYPE html>
<html>
    <head>
        <title>{{page-title}}</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="{{page-desc}}">
    </head>
    <body>
        <section>
            <h1>{{page-title}}</h1>
            <p>
                Hello Mr.{{ mr-name }}. This is your visit number {{visit-number}} 
                to our website.
            </p>
        </section>
    </body>
</html>

注意，字符串被包围在 {{}} 之间。任何被 {{}} 包围的字符串被称为插槽。要填充任何插槽，必须在渲染时传递其值。该文件将被渲染为 HTMLNode 类的实例。可以使用静态方法 HTMLNode::fromFile(string $templatePath, array $values) 渲染文件。方法的第一参数是模板路径，第二个参数是一个关联数组，包含插槽的值。数组的键是插槽名称，每个索引的值是插槽的值。以下代码显示了如何将此文档加载为具有插槽值的 HTMLNode 类的实例。

$document = HTMLNode::fromFile('my-html-file.html', [
    'page-title' => 'Hello Page',
    'page-desc' => 'A page that shows visits numbers.',
    'mr-name' => 'Ibrahim Ali',
    'visit-number' => 33,
]);
echo $document

上述PHP代码的输出将是以下HTML代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello Page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A page that shows visits numbers.">
    </head>
    <body>
        <section>
            <h1>Hello Page</h1>
            <p>
                Hello Mr.Ibrahim Ali. This is your visit number 33
                to our website.
            </p>
        </section>
    </body>
</html>

PHP模板

使用带有插槽的原始HTML模板文件的缺点是不能有动态PHP代码。为了克服这一点，模板可以写成HTML和PHP的混合。此功能允许在HTML模板中使用所有PHP功能。此外，这也允许开发者在插槽值之外传递PHP变量。

假设我们有一个以下PHP模板，它显示一系列帖子标题

<div>
    <?php 
    if (count($posts) != 0) {?>
    <ul>
    <?php
        foreach ($posts as $postTitle) {?>
        <li><?= $postTitle;?></li>
        <?php
        }
        ?>
    </ul>
    <?php
    } else {
        echo "No posts.\n";
    }
    ?>
</div>

该模板使用一个名为$posts的变量，如所见。在渲染之前，必须将变量的值传递给模板。在这种情况下，方法HTMLNode::fromFile(string $templatePath, array $values)的第二个参数将是一个关联数组，数组键是变量名，值是变量值。

模板可以按照以下方式加载到HTMLNode类型的对象中

$posts = [
  'Post 1',
  'Post 2',
  'Post 3'
];

$node = HTMLNode::fromFile('posts-list.php', [
  'posts' => $posts
])

创建XML文档

除了表示HTML元素之外，类HTMLNode还可以用来表示XML文档。HTML与XML的区别在于XML对属性名和元素名是大小写敏感的，并且不像HTML有预定义的元素。要创建XML文档，可以使用与创建HTML元素相同的方法使用类HTMLNode。最后，可以使用方法HTMLNode::toXML()将元素转换为XML。

$xml = new HTMLNode('saml:Assertion', [
   'xmlns:saml' => "urn:oasis:names:tc:SAML:2.0:assertion",
   'xmlns:xs' => "http://www.w3.org/2001/XMLSchema",
   'ID' => "_d71a3a8e9fcc45c9e9d248ef7049393fc8f04e5f75",
   'Version' => "2.0",
   'IssueInstant' => "2004-12-05T09:22:05Z",
]);
$xml->addChild('saml:Issuer')->text('https://idp.example.org/SAML2');

echo $xml->toXML();
//Output:
/*
<?xml version="1.0" encoding="UTF-8"?>
<saml:Assertion xmlns:saml="urn:oasis:names:tc:SAML:2.0:assertion" xmlns:xs="http://www.w3.org/2001/XMLSchema" ID="_d71a3a8e9fcc45c9e9d248ef7049393fc8f04e5f75" Version="2.0" IssueInstant="2004-12-05T09:22:05Z">
    <saml:Issuer>
        https://idp.example.org/SAML2
    </saml:Issuer>
</saml:Assertion>
*/

许可证

该库采用MIT许可证。

webfiori / ui

维护者

详细信息