README

CookBook 版本：1.0.0

什么是 Sculptor？

Sculptor 是一套使用纯 PHP 组件动态生成 HTML、CSS 和 JavaScript 的工具。这些工具允许您定义元素和组件，然后将它们放入您认为的元素层次结构中，然后将其渲染为 HTML。同时，此源码代表了一大批组件，可以将您的 PHP 组件动态转换为 JavaScript 和 jQuery 组件。

如何使用它？

要使用 Sculptor，您首先需要下载和安装它。

下载

要使用 Sculptor，您需要通过 composer 安装它

#> composer require konjed/sculptor:dev-master@dev

虽然您可以从这个链接手动下载源代码

Sculptor Github

手动安装

手动下载后，不要忘记更新文件夹内的 composer 以获取所有必需的工具

#> composer update

使用

之后，要使用源码工具，您只需要求 Sculptor 的主文件（或您的 vendor 文件夹中的自动加载）

require '/path/to/sculptor/Sculptor.php';

或者，如果您使用 composer

require "vendor/autoload.php";

开发

Sculptor 的所有工具都可通过主文件访问，您只需在主文件中实例化 Sculptor 类即可

$app = new \Sculptor\Sculptor(“bootstrap”,”jquery”);

类构造函数的第一个输入参数用于分配到所考虑的 CSS 源字符串。此变量的值可以是‘bootstrap’或‘jquery’。这意味着系统中的所有组件都将由所考虑的源进行样式化。第二个变量分配给系统的 JS 源，可以是‘pure’（这是此字段的默认值）和‘jquery’。但是，您可以使用空的构造函数，然后通过 Setter 方法设置您所考虑的源

$app = new \Sculptor\Sculptor();
$app->setCssSource("bootstrap");
$app->setJsSource("jquery");

– 亮点提示：Sculptor 的所有方法都是驼峰命名。

关于主题呢？

您可以通过预定义方法设置您所考虑的主题的名称

$app->setCssTheme("cosmo");

将根据提供的名称提供相应的主题。如果您将 bootstrap 设置为您的 CSS 源，则主题将来自 Bootswatch 主题

Bootswatch 主题

因此，您必须从 Bootswatch 主题中选择主题名称。另一方面，如果将 jquery 设置为您的 CSS 源，则所有主题都将来自 jQuery-ui

jQuery 主题

因此，您必须从 jQuery-ui 主题中选择主题名称。

想要创建一个 HTML 元素吗？

Sculptor 中非常简单

$btn = $app->makeElement( "button" , "test" , [ "class" => "btn" , "id" => "btn1"]);

正如您所看到的，您只需使用 Sculptor 对象的 makeElement 方法。此方法接受第一个输入的 HTML 标签名称，第二个输入的标签体文本和第三个输入的属性数组。然而，$btn 对象是 Sculptor 的 Element 对象，它还不能作为 HTML 查看。要查看 Element 对象的 HTML 等价物，您必须渲染该元素

echo $btn->render();

上述代码行的结果将类似于以下 HTML 标签

<button class="btn" id="btn1" >test <!-- tag-body --> </button>

但如果你忘记在makeElement方法的输入数组中添加一些属性，请不要生气，你可以在之后添加

$btn->addAttributes(["type" => "button" , "name" => "submit" ]);

让我们看看Sculptor还提供了什么来制作HTML

Sculptor组件

Sculptor支持很多来自jQuery和Bootstrap CSS源的双向HTML组件，你只需要使用简单的'makeComponent'方法即可

$inpgr = $app->makeComponent( "InputGroups" , [ "befor_label" => "InputGroup1:" , "name" => "test1" , "placeholder" => "给我一个测试" ]);

正如你所看到的，这个方法只有两个参数，第一个是组件名称，第二个是用于渲染组件模板的数据数组。因此，可以预期系统中应该有一些模板文件。有趣的是，这是正确的，你可以在Sculptor源代码的组件文件夹中的CSS源代码文件夹中找到所有组件模板。但是，为了给您展示渲染组件的预览，我们建议您查看以下链接中所有Sculptor组件的链接

组件

如果一个优秀的开发者想创建自己的组件怎么办？

这是完全可能的。你只需要在你的适当模板文件中制作所有模板。这些文件应该按照Symphony twig模板引擎的规则编写，并且名称按照以下结构

Template.twig 或 Template.thml.twig

并且Template的名称将是你模板的名称。然后，你必须将所有模板放入系统中的一个单独目录中，并在Sculptor的以下方法中声明目录的地址

$app->setExtraCssPath("/path/to/your/folder");

文档对象：最后有一个非常重要的问题：如果我们想让Sculptor渲染整个HTML页面，我们应该怎么做？答案是：通过使用代表整个页面生成工具的Document对象。创建一个新的文档非常简单

$document = $app->makeDocument();

现在我们讨论Document对象的方法

添加

– 如果你想直接在文档中放入一个元素，你只需要使用add方法

$document->add($btn);

这个方法将之前制作的&btn元素（我们之前制作的）直接添加到文档中。

– 注意：请告知，&btn对象的渲染HTML将直接放入页面的body标签中。

putIn和addIn

– 如果你想将元素放入或添加到另一个元素中，而不是body，Sculptor有两种方法可以做到这一点，putIn和addIn

$btn2=$app->makeElement("button","test2",["class"=>"btn2"]);
$btn3=$app->makeElement("button","test3",["class"=>"btn3"]);
$div1 = $app->makeElement( "div" , "" , [ "class" => "div1" , "style" => 'width:100%']);
$document($btn)->putIn($div1);
$document($btn2)->addIn($div1);

在执行上述代码后，我们会制作三个新元素，然后将它们放入文档中的另一个对象中。

– 注意：不要忘记，'putIn'方法将删除目标元素的所有先前内容，然后将其放入其他元素中，但'addIn'只会将其添加到其他元素旁边。

– 注意：你可以通过使用putIn和addIn方法始终创建自己的元素系谱，但请记住，不要忘记使用add方法将整个系谱的head祖先添加到文档中，否则文档对象将不会渲染整个系谱。

制作和添加所有元素后，你可以使用文档的render方法渲染自己的HTML。

$html = $document->render();
echo $html;

作为本节的最后一部分，我应该告诉你，你还可以在页面中设置自己的样式表和脚本，甚至是外部文件。Sculptor中有一些方法可以做到这一点。

$document->addStyleURL("url");
$document->addStyle(“style_tag_string”);

$document->addScriptURL("url");
$document->addScript(“script_tag_string”);

Sculptor PHP到JavaScript

艺术家工具集提供了一套非常强大的工具，可以仅使用纯PHP组件动态生成JavaScript组件。这一功能可以真正提高您代码集成的易用性和一致性。尽管如此，您仍然可以使用PHP组件在应用程序中实现许多客户端控制。另一方面，这也使得JavaScript编程对PHP开发者来说更加容易，因为您只需了解一些基本的JavaScript规则。让我们开始吧，首先，您需要创建一个JSBuilder对象，这非常简单

$JS = $app->makeJSBuilder();

在上面的代码行中，$JS变量代表Sculptor的JS对象，它可以处理Sculptor的所有JS功能。

如何在Sculptor中创建JS函数

这很简单，因为有了defineJsFunction

$JS->defineJsFunction("click_callback_opacity",function($input_object){$input_object->target->style->opacity= "0.5";});

如您所见，上述方法接受两个输入，第一个是一个字符串，将作为JS函数的名称，第二个是一个闭包PHP函数，它将被转换为JS函数的主体。转换后的JavaScript函数字符串将类似于以下内容

function click_callback_opacity(input_object) { 
	input_object.target.style.opacity="0.5";
}

这确实是一个合法的JavaScript函数。但是，除了典型函数之外，Sculptor还可以转换JavaScript的事件监听器

Sculptor事件监听器

JS方法之间主要的事件监听器是addEventListener方法，因此Sculptor中也有相应的等效方法

$JS($div1)->addEventListener("click",function($obj){$obj->target->style->visibility = "hidden";});

此方法将在执行后生成以下JS代码（以及即将为您解释的渲染阶段）

document.getElementById('sculptor-313704410').addEventListener ("click" ,function (obj){obj.target.style.visibility="hidden";});

这是一个真实的JavaScript事件监听器实现。

– 注意提示：sculptor-313704410是Sculptor自动生成的考虑元素的id，如果您想自定义它，只需在创建元素时添加id属性即可。

Sculptor jQuery

您可以使用Sculptor将PHP转换为jQuery，因为它支持大多数jQuery API。例如简单的函数

$JS($div1)->slideToggle();

您还可以使用jQuery事件处理程序，即使是在文档中的其他元素上

$JS($btn1)->on("click",function() use ($JS,$div1) {$JS($div1)->slideToggle();});

事件监听器将被转换为以下内容

$("#btn1").on("click",function () { 
	 $("#sculptor-71182252").slideToggle(); 
}); 

– 注意提示：不要忘记为函数设置“use”关键字，因为PHP函数需要它来识别外部变量。

– 注意提示：您可以使用自己的字符串CSS选择器而不是$btn1。Sculptor支持所有的CSS选择器。

在编写代码后，请别忘了渲染并将您的JavaScript放入页面

$document->addScript($JS->render());

请在这之前完成整个文档的渲染。

非常感谢，祝您好运，Ali Souri