{"id":307155,"date":"2020-07-18T21:01:43","date_gmt":"2020-07-18T21:01:43","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=307155"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=307155","title":{"rendered":"\u041a\u0430\u043a \u044f \u043f\u0438\u0441\u0430\u043b \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043d\u0430 PHP \u0438 \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/511544\/\">\n<h1 id=\"prichiny-i-problemy-kotorye-nuzhno-bylo-reshit\">\u041f\u0440\u0438\u0447\u0438\u043d\u044b \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0438\u0442\u044c<\/h1>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0432\u0430\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u044f \u043f\u0438\u0441\u0430\u043b \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043d\u0430 php. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u0443\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u043f\u0440\u043e\u0448\u0435\u043b \u043e\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446, \u0434\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430 html \u0438 css \u043a\u043e\u0434\u0430. \u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u043a\u0430\u0436\u0443 \u0443\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u0435\u043c\u0435\u0441\u0442\u0440\u0435 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e PHP. <\/p>\n<p>  <\/p>\n<p><del>\u041f\u043e\u0441\u043b\u0435 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0435\u0439\u043c\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/del> \u041f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0438\u043c\u044f MelonPHP. \u0427\u0442\u043e\u0431\u044b \u043b\u044e\u0434\u0438 \u0434\u0443\u043c\u0430\u043b\u0438 \u043e \u0435\u0434\u0435 \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0437\u043d\u043e\u0441\u0438\u043b\u0438 \u0435\u0433\u043e \u0438\u043c\u044f? \u041d\u043e \u0443 \u043d\u0430\u0441 \u0442\u0443\u0442 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0431\u0440\u0435\u0434\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044f \u0432\u0430\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0430\u0441\u044c \u0432 \u0432\u044b\u0432\u043e\u0434\u0435 HTML \u043a\u043e\u0434\u0430 \u0447\u0435\u0440\u0435\u0437 PHP. \u042f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043d\u0438\u0436\u0435.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u043e\u0442 \u0432\u044b\u0432\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0435\u043c \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0435 echo:<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">$text = &quot;out text&quot;; echo &quot;&lt;p&gt;$text&lt;\/p&gt;&quot;;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u043e\u0442\u0440\u0435\u0437\u043e\u043a \u043a\u043e\u0434\u0430 \u043c\u043e\u0435\u0433\u043e \u0434\u0440\u0443\u0433\u0430, \u0433\u0434\u0435 \u043e\u043d \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">... $sql = &quot;SELECT * FROM table&quot;;$result = $conn-&gt;query($sql); if($result-&gt;num_rows &gt; 0) {     echo &quot;&lt;b&gt;Table table&lt;\/b&gt;&lt;br&gt;&lt;br&gt;&quot;;     echo &quot;&lt;table border=2&gt;&quot;;   echo &quot;&lt;tr&gt;&lt;td&gt; name &lt;\/td&gt;&quot;.&quot;&lt;td&gt; name &lt;\/td&gt;&quot;.&quot;&lt;td&gt; name &lt;\/td&gt;&lt;\/tr&gt;&quot;;     while($row = $result-&gt;fetch_assoc()) {         echo &quot;&lt;tr&gt;&lt;td&gt;&quot;.$row[&quot;name&quot;].&quot;&lt;\/td&gt;&lt;td&gt;&quot;.$row[&quot;name&quot;].&quot;&lt;\/td&gt;&lt;td&gt;&quot;.$row[&quot;name&quot;].&quot;&lt;\/td&gt;&lt;\/tr&gt;&quot;;     }     echo &quot;&lt;\/table&gt;&quot;; } else { echo &quot;0 results&quot;;} ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e <del>\u0441\u0442\u0440\u0430\u0448\u043d\u044b\u0439<\/del> \u043a\u043e\u0434 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0445\u043e\u0442\u0435\u043b \u0440\u0435\u0448\u0438\u0442\u044c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 html \u0432 php \u043a\u043e\u0434\u0435, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u043e \u043c\u043e\u0435\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e \u043c\u0435\u043d\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c. \u0412\u0441\u0435-\u0442\u0430\u043a\u0438 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044f\u043f \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043e\u0434 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u044f\u043f(\u0430), \u043f\u043e \u043c\u043e\u0435\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e<\/li>\n<li>\u041d\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438, \u0432\u0441\u0435 \u0432 \u043a\u0430\u0448\u0435. \u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 &quot;\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434&quot; \u043d\u0430 PHP<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0430\u0432\u043d\u043e \u043f\u0438\u0448\u0443 \u043d\u0430 Flutter \u0438 \u043c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0438\u0434\u0435\u044f \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u043d\u0430\u044f \u0432 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u0435\u0440\u0435\u0432\u0430 \u0438\u0437 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. \u042f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0442\u0443\u0434\u0430 \u0438\u0434\u0435\u044e \u0441 \u043d\u043e\u0434\u0430\u043c\u0438 (\u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438).<\/p>\n<p>  <\/p>\n<p>\u042f \u0431\u044b\u043b \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440, \u0447\u0435\u043c \u0442\u0435\u0440\u043f\u0435\u0442\u044c \u044d\u0442\u043e.<\/p>\n<p>  <\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446 \u0447\u0435\u0440\u0435\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041d\u043e \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0440\u043e\u0441 \u0432 \u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u043e\u0435.<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u0438\u0434\u0435\u044f\u043c\u0438 \u0431\u044b\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>UI \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\/\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u043f\u0440\u0438\u0432\u0435\u0442 React)<\/li>\n<li>\u0423\u0434\u043e\u0431\u043d\u044b\u0435 \u043c\u0430\u043a\u0435\u0442\u044b (\u0418\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 div, div, div, div&#8230;)<\/li>\n<li>\u0427\u0442\u043e\u0431\u044b \u0432\u0435\u0441\u044c UI \u043f\u0438\u0441\u0430\u043b\u0441\u044f \u043d\u0430 PHP (\u0431\u0435\u0437 JS, \u0431\u0435\u0437 HTML, \u0431\u0435\u0437 CSS).<\/li>\n<li><del>Rebuild \u0447\u0435\u0440\u0435\u0437 callback \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0447\u0435\u0440\u0435\u0437 AJAX + JQuery<\/del> \u043d\u0435 \u0441\u0443\u0436\u0434\u0435\u043d\u043e<\/li>\n<li><del>\u0423\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u043e\u0443\u0442\u043e\u0432<\/del> \u043d\u0435 \u0441\u0443\u0436\u0434\u0435\u043d\u043e<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 CSS (\u0438 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u0438\u0441\u0430\u0442\u044c, \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 &quot;width: 100px&quot;, \u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u044f\u043c\u043e \u0432 PHP \u043a\u043e\u0434\u0435)<\/li>\n<li>\u041e\u041e\u041f<\/li>\n<\/ul>\n<p>  <\/p>\n<h1 id=\"osobennosti-melonphp\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 MelonPHP<\/h1>\n<p>  <\/p>\n<ul>\n<li>\u041f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b (\u043a\u0440\u043e\u043c\u0435 \u0442\u0435\u043a\u0441\u0442\u0430, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445) \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043c\u0435\u044e\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0432 100%, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442. <\/li>\n<li>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ScrollView. <\/li>\n<li>\u0422\u0430\u043a \u0436\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/li>\n<\/ul>\n<p>  <\/p>\n<h1 id=\"arhitektura\">\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430<\/h1>\n<p>  <\/p>\n<p>\u041e\u0447\u0435\u043d\u044c \u043f\u0435\u0447\u0430\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u0432 PHP \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043f\u043e \u0438\u043c\u0435\u043d\u0438, \u0438 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u042f \u0443\u0432\u0435\u0440\u0435\u043d \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 (\u041a\u0430\u043a\u043e\u0433\u043e \u0431\u044b\u043b\u043e \u043c\u043e\u0435 \u0443\u0434\u0438\u0432\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 Microsoft \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438 MAUI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0443 \u0436\u0435 \u0438\u0434\u0435\u044e \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438).<\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0432 MelonPHP \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 Node. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e 2 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: Generate(), static Create().<\/p>\n<p>  <\/p>\n<ul>\n<li>Generate() \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 string \u2014 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434.<\/li>\n<li>Create() \u2014 \u044d\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u041e\u043d\u0430 \u043d\u0443\u0436\u043d\u0430 \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0434\u044b \u0432 \u0434\u0435\u0440\u0435\u0432\u0435.<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"php\">abstract class Node {   abstract function Generate() : string;    static function Create() ... } <\/code><\/pre>\n<p>  <\/p>\n<h6 id=\"element\">Element<\/h6>\n<p>  <\/p>\n<p>Element \u2014 \u044d\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0447\u0438\u0441\u0442\u043e\u0433\u043e html \u043a\u043e\u0434\u0430. <\/p>\n<p>  <\/p>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043d\u043e\u043f\u043a\u0430, \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0438 \u0442\u0434.<\/p>\n<p>  <\/p>\n<h6 id=\"component\">Component<\/h6>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442, \u0438 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0435\u0440\u0435\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043d\u0435\u043c. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0431\u0440\u0435\u0434\u043e\u0432\u0430\u044f \u0438\u0434\u0435\u044f).<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0438\u0441\u043f\u043b\u0435\u0438 (\u0430\u043d\u0430\u043b\u043e\u0433 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 MelonPHP), \u0441\u043f\u0438\u0441\u043a\u0438, \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u043d\u044e \u0438 \u0442\u0434.<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">abstract class Component extends Element {   function Initialize() ...    abstract function Build() : Element;    function Detach() ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u0434\u043e\u0431\u0435\u043d \u0442\u0435\u043c, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0435 \u043d\u0430\u0434\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438; \u0447\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f Element. \u0422\u0430\u043a \u0436\u0435 \u0432 \u043d\u0435\u043c \u0435\u0441\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 ListItem, \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0439 \u043e\u0442 Component.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Initialize() \u0438 Build().<\/p>\n<p>  <\/p>\n<blockquote><p><strong>Initialize()<\/strong> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 \u043d\u0435\u0439 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443.<\/p>\n<p>  <strong>Build()<\/strong> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412 \u043d\u0435\u0439 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442. <strong>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438.<\/strong><\/p>\n<p>  <strong>Detach()<\/strong> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p><\/blockquote>\n<p>\u0412 Build() \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0435\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043c \u0435\u043c\u0443 \u0442\u0435\u043a\u0441\u0442 \u0438\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043a\u043b\u0430\u0441\u0441\u0430 <em>$Text<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0412 Initialize() \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <em>$Text<\/em> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e Text(string) \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>$Text<\/em>.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0434\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c $this \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0435\u0440\u0435\u0432\u0435.<\/p><\/blockquote>\n<p>  <\/p>\n<pre><code class=\"php\">class ListItem extends Component {   private $Text;    function Initialize() {     $this-&gt;Text = &quot;Name&quot;;   }    function Build() : Element {     return Container::Create()     -&gt;Child(       Text::Create()       -&gt;Text($this-&gt;Text)     );   }    function Text(string $string) {     $this-&gt;Text = $string;     return $this;   } }<\/code><\/pre>\n<p>  <\/p>\n<h6 id=\"displaycomponent\">DisplayComponent<\/h6>\n<p>  <\/p>\n<p>DisplayComponent \u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0414\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e Display.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0434\u0438\u0441\u043f\u043b\u0435\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Build() \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0438\u043c Document \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0435\u043c\u0443 Title(<em>string<\/em>).<\/p>\n<p>  <\/p>\n<blockquote><p>\u0412 DisplayComponent, \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Build() \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f Document. Document \u2014 \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 HTML5.<\/p><\/blockquote>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e BuildList(), \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0447\u0435\u0440\u0435\u0437 \u0446\u0438\u043a\u043b \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432\u044b\u0448\u0435 ListItem.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0431\u0435\u043d\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0437\u043e\u0432\u0435\u043c BuildList() \u0444\u0443\u043d\u043a\u0446\u0438\u044e. <strong>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0434\u0435\u0440\u0435\u0432\u0430 \u0438\u0437 \u043d\u043e\u0434 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435 \u0434\u0430\u0435\u0442 \u0435\u043c\u0443 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u043c\u0430\u043a\u0430\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u043d\u0441\u0442\u0440\u0430<\/strong>.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0440\u044f\u043c\u043e \u0432 \u0434\u0435\u0440\u0435\u0432\u0435, \u0442\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0441 Builder. \u041d\u043e \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c&#8230;<\/p><\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u0435\u043b\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u0432\u044b\u0437\u043e\u0432\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e Diplay(), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 c\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u0438 \u0432\u044b\u0432\u0435\u0434\u0438\u0442.<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">class ListDisplay extends DisplayComponent {    function Build() : Document {     return Document::Create()     \/\/ \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b     -&gt;Title(&quot;test page&quot;)     -&gt;Child($this-&gt;BuildList());   }    function BuildList() {     $column = new Column;     for($i = 0; $i &lt; 10; $i++)       $column-&gt;Children(         ListItem::Create()         -&gt;Text(&quot;number: $i&quot;)       );     return $column;   }  } ListDisplay::Display();<\/code><\/pre>\n<p>  <\/p>\n<h1 id=\"makety\">\u041c\u0430\u043a\u0435\u0442\u044b<\/h1>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430 \u0438\u0437 \u0446\u0435\u043b\u0435\u0439 \u043f\u0440\u0435\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0445 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u2014 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>  <\/p>\n<h6 id=\"container\">Container<\/h6>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ib\/ve\/sh\/ibvesh_rfvdwdfwzhqetfddldis.png\"><\/p>\n<p>  <\/p>\n<p>Container \u2014 \u044d\u0442\u043e \u043c\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0446\u0435\u043b\u0435\u0439. <\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043a\u0430.<\/p>\n<p>  <\/p>\n<h6 id=\"column-i-row\">Column \u0438 Row<\/h6>\n<p>  <\/p>\n<p>\u0423 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u0434\u0435\u0442\u0438. \u0415\u0441\u043b\u0438 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043c\u0435\u0442\u043e\u0434 Child \u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043a\u0430, \u0430 \u0435\u0441\u043b\u0438 <strong>Children<\/strong> \u0442\u043e \u0443 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043a\u0430. <\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 <strong>Child<\/strong> \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0431\u0435\u043d\u043a\u0430 \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a Children \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0432 \u0432\u0435\u0440\u0445 \u0441\u0442\u0435\u043a\u0430.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0415\u0441\u043b\u0438 \u0432 Children \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0435, \u0442\u043e \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0433\u043e \u0437\u0430\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<p>  \u0422\u043e\u0435\u0441\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e <strong>Children<\/strong>([Text::Create()]) \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c <strong>Children<\/strong>(Text::Create())<\/p><\/blockquote>\n<p>Column \u2014 \u044d\u0442\u043e \u043c\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0434\u0435\u0442\u0435\u0439 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c CrossAlign \u0438 MainAlign \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0434\u0435\u0442\u0435\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/7b\/4i\/d6\/7b4id6yikzam0aiqae2gw51zj3e.png\"><\/p>\n<p>  <\/p>\n<p>Row \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u0435\u043d Column, \u043d\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0434\u0435\u0442\u0435\u0439 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/py\/ny\/c-\/pynyc-wcvxkg-cc4cflmqavu-ys.png\"><\/p>\n<p>  <\/p>\n<h6 id=\"stack\">Stack<\/h6>\n<p>  <\/p>\n<p>Stack \u2014 \u044d\u0442\u043e \u043c\u0430\u043a\u0435\u0442, \u0434\u0435\u0442\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u044b. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0447\u0442\u043e\u0431\u044b \u043d\u043e\u0434\u044b \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u043b\u0438\u0441\u044c, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vw\/tp\/ee\/vwtpeejo4bfsuj_1uenbh4klv5y.png\"><\/p>\n<p>  <\/p>\n<h6 id=\"scrollview-horizontalscrollview-verticalscrollview\">ScrollView, HorizontalScrollView, VerticalScrollView<\/h6>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_m\/d2\/ys\/_md2ysuxn4tsvqhsbs-hyierx50.png\"><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0434\u043b\u044f \u0441\u043a\u043e\u0440\u043e\u043b\u043b\u0438\u043d\u0433\u0430.<\/p>\n<p>  <\/p>\n<p>HorizontalScrollView \u2014 \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438.<\/p>\n<p>  <\/p>\n<p>VerticalScrollView \u2014 \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438.<\/p>\n<p>  <\/p>\n<p>ScrollView \u2014 \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u043f\u043e \u0432\u0441\u0435\u043c \u043e\u0441\u044f\u043c.<\/p>\n<p>  <\/p>\n<h1 id=\"stilizaciya\">\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h1>\n<p>  <\/p>\n<p>\u0414\u043e\u043b\u0433\u0430 \u0434\u0443\u043c\u0430\u044f \u043a\u0430\u043a \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c css \u0432 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u044f \u043f\u0440\u0438\u0448\u0435\u043b \u043a \u0438\u0434\u0435\u0435 \u0441 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430\u043c\u0438. <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0443 \u043d\u0430\u0441 \u0432 css \u0435\u0441\u0442\u044c &quot;background-color&quot;. \u042f \u0441\u0442\u0440\u043e\u043a\u0443 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0432 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 \u0438 \u0432 php \u043a\u043e\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0437 &quot;&quot;. \u042d\u0442\u043e \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435. <\/p>\n<p>  <\/p>\n<pre><code class=\"php\">... const BackgroundBlendMode = &quot;background-blend-mode&quot;; const BackgroundAttachment = &quot;background-attachment&quot;; const Border = &quot;border&quot;; const BorderSpacing = &quot;border-spacing&quot;; const BorderRadius = &quot;border-radius&quot;; const BorderImage = &quot;border-image&quot;; ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 &quot;34&quot;.Px. \u0422\u0443\u0442 \u0438\u0434\u0435\u044f \u0441 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430\u043c\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e. \u041f\u043e \u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u0432 \u0442\u0430\u043a\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f css \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <strong>Px(<\/strong>34<strong>)<\/strong>. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0445\u043f \u043a\u043e\u0434. <\/p>\n<p>  <\/p>\n<h6 id=\"prostaya-stilizaciya\">\u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h6>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f ThemeParameter(&#8230;). \u041f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439\/\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u043d\u0430 <strong>#<em>f0f0f0<\/em><\/strong>. <\/p>\n<p>  <\/p>\n<p>\u0412\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b. \u0421\u0432\u0435\u0440\u0445\u0443 \u0438 \u0441\u043d\u0438\u0437\u0443 20px, \u0441\u043f\u0440\u0430\u0432\u0430 \u0438 \u0441\u043b\u0435\u0432\u0430 15px.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0447\u0442\u043e\u0431\u044b \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u0430 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e, \u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f CommaLine().<\/p><\/blockquote>\n<p>  <\/p>\n<pre><code class=\"php\">... Container::Create() -&gt;ThemeParameter(BackgroundColor, Hex(&quot;f0f0f0&quot;)) -&gt;ThemeParameter(Padding, [Px(20), Px(15)]); ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0432\u0441\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e, \u043d\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b (hover \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440)? \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0442\u0435\u043c\u044b.<\/p>\n<p>  <\/p>\n<h6 id=\"temy\">\u0422\u0435\u043c\u044b<\/h6>\n<p>  <\/p>\n<p>\u0422\u0435\u043c\u044b \u0432 \u044d\u0442\u043e\u043c \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u2014 \u044d\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 css, \u0441 media, keyframes, \u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0442\u0435\u043c\u0443 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c hover \u0438 active.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u0442\u0435\u043c\u044b \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e ThemeBlock \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 ThemeBlocks.<\/p>\n<p>  <\/p>\n<p>\u0411\u043b\u043e\u043a\u0443 \u0442\u0435\u043c\u044b \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u043a\u043b\u044e\u0447 \/ \u043a\u043b\u044e\u0447\u0438. \u042f \u043d\u0430\u0437\u043e\u0432\u0443 \u043a\u043b\u044e\u0447 <em>my_container<\/em>. <\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0432 \u0431\u043b\u043e\u043a \u0442\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b. \u042f \u0434\u043e\u0431\u0430\u0432\u0438\u043b: StandartModifier, HoverModifier, ActiveModifier. \u0418 \u0437\u0430\u0434\u0430\u043b \u0434\u043b\u044f \u043d\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 <strong>Parameter(&#8230;)<\/strong>. Parameter \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a ThemeParameter.<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">function GetMyTheme() : Theme {   return Theme::Create()   -&gt;ThemeBlocks([     ThemeBlock::Create()     -&gt;Keys(&quot;my_container&quot;)     -&gt;Modifiers([       StandartModifier::Create()       -&gt;Parameter(BackgroundColor, Red)       -&gt;Parameter(Padding, [Px(10), Px(12)]),       HoverModifier::Create()       -&gt;Parameter(BackgroundColor, Green),       ActiveModifier::Create()       -&gt;Parameter(BackgroundColor, Blue)     ])   ]); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u044f \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043b \u043a\u043b\u044e\u0447 (\u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 css) \u0442\u0435\u043c\u044b \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 ThemeKeys. \u041d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0442\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u043d\u0430\u0434\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 Themes. <\/p>\n<p>  <\/p>\n<pre><code class=\"php\">class TestThemeDisplay extends DisplayComponent {    function Build() : Document {     return Document::Create()     -&gt;Themes(GetMyTheme())     -&gt;Child(       Container::Create()       -&gt;ThemeKeys(&quot;my_container&quot;)     );   }  } TestThemeDisplay::Display();<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0434\u0438\u0441\u043f\u043b\u0435\u0439 \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0447\u0442\u043e \u0442\u0435\u043c\u0430 \u043f\u043e \u043a\u043b\u044e\u0447\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c.<\/p>\n<p>  <\/p>\n<h6 id=\"prodvinutye-animacii\">\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h6>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c keyframes. <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0442\u0435\u043c\u0443 keyframe, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 FrameBlocks.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0443\u0436\u0435 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0442\u0435\u043c\u0443 FrameBlock.<\/p>\n<p>  <\/p>\n<p>\u0412 FrameBlock \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434 Frames. \u0412\u044b\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0440\u0435\u0439\u043c\u043e\u0432, \u0442\u0430\u043a \u0436\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430 \u043d\u0430\u0434\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c Value. \u041e\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e Pr(value)) \u0438\u043b\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043e\u0439 From \u0438\u043b\u0438 To.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u043e\u043c\u0443 \u043a\u0430\u0434\u0440\u0443 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b \u0438 \u043f\u043b\u0430\u0432\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043a\u0430\u0434\u0440\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u043b\u043e\u043a \u0442\u0435\u043c\u044b, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u044d\u0442\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438 \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e <em>shake_text<\/em>. <\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u0435\u043a\u0441\u0442 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0434\u0438\u0441\u043f\u043b\u0435\u0435, \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043c \u0435\u043c\u0443 \u043a\u043b\u044e\u0447 \u0442\u0435\u043c\u044b.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">function GetMyTheme() : Theme {   return Theme::Create()   -&gt;ThemeBlocks([     ThemeBlock::Create()     -&gt;Keys(&quot;my_container&quot;)     -&gt;Modifiers([       StandartModifier::Create()       -&gt;Parameter(Padding, [Px(10), Px(12)]),       HoverModifier::Create()       -&gt;Parameter(BackgroundColor, Green),       ActiveModifier::Create()       -&gt;Parameter(BackgroundColor, Blue)     ]),     ThemeBlock::Create()     -&gt;Keys(&quot;shake_text&quot;)     -&gt;Modifiers([       StandartModifier::Create()       -&gt;Parameter(Color, Red)       -&gt;Parameter(Animation, [&quot;shake_text_anim&quot;, &quot;.2s&quot;, &quot;ease-in-out&quot;, &quot;5&quot;, &quot;alternate-reverse&quot;])     ])   ])   -&gt;FrameBlocks(     FrameBlock::Create()     -&gt;Key(&quot;shake_text_anim&quot;)     -&gt;Frames([       Frame::Create()       -&gt;Value(Pr(0))       -&gt;Parameter(Transform, Translate(0, 0)),       Frame::Create()       -&gt;Value(Pr(25))       -&gt;Parameter(Color, Hex(&quot;ff4040&quot;))       -&gt;Parameter(Filter, Blur(Px(0.5))),       Frame::Create()       -&gt;Value(Pr(50))       -&gt;Parameter(Filter, Blur(Px(1.2))),       Frame::Create()       -&gt;Value(Pr(75))       -&gt;Parameter(Color, Hex(&quot;ff4040&quot;))       -&gt;Parameter(Filter, Blur(Px(0.5))),       Frame::Create()       -&gt;Value(Pr(100))       -&gt;Parameter(Transform, Translate(Px(10), 0)),     ])   ); }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"php\">class TestThemeDisplay extends DisplayComponent {    function Build() : Document {     return Document::Create()     -&gt;Themes(GetMyTheme())     -&gt;Child(       Container::Create()       -&gt;ThemeKeys(&quot;my_container&quot;)       -&gt;Child(         Text::Create()         -&gt;ThemeKeys(&quot;shake_text&quot;)         -&gt;Text(&quot;Error text&quot;)       )     );   }  } TestThemeDisplay::Display();<\/code><\/pre>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ex\/iy\/9o\/exiy9ozm_vcrz1pte1hfabkxmpm.gif\"><\/p>\n<p>  <\/p>\n<h6 id=\"adaptivnost\">\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h6>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0449\u0435 2 \u0442\u0435\u043c\u044b. \u041e\u0434\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u0432, \u0430 \u0432\u0442\u043e\u0440\u0430\u044f \u0434\u043b\u044f \u043f\u043a. \u0423 \u0442\u0435\u043c\u044b \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438: MinWidth, MaxWidth, MinHeight, MaxHeight, \u043e\u0431\u044a\u044f\u0432\u0438\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u0435\u043c\u0430.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043c\u0435 \u0434\u043b\u044f \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043e\u0432 \u0437\u0430\u0434\u0430\u0434\u0438\u043c MinWidth 800px.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043c\u0435 \u0434\u043b\u044f \u043f\u043a \u0437\u0430\u0434\u0430\u0434\u0438\u043c MaxWidth 800px.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0431\u043b\u043e\u043a \u0442\u0435\u043c\u044b \u0433\u0434\u0435 \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0435 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u0437\u0435\u043b\u0451\u043d\u044b\u0439, \u0430 \u043d\u0430 \u043f\u043a \u0432\u0435\u0440\u0441\u0438\u0438 \u2014 \u0436\u0435\u043b\u0442\u044b\u0439. \u041d\u0430\u0437\u043e\u0432\u0451\u043c \u0431\u043b\u043e\u043a <em>adaptive_color<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0435 \u0442\u0435\u043c\u044b \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0434\u0438\u0441\u043f\u043b\u0435\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043b\u044e\u0447\u0438 \u0442\u0435\u043c\u044b \u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443.<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">function GetMobileTheme() : Theme {   return Theme::Create()   -&gt;MinWidth(Px(800))   -&gt;ThemeBlocks(     ThemeBlock::Create()     -&gt;Keys(&quot;adaptive_color&quot;)     -&gt;Modifiers(       StandartModifier::Create()       -&gt;Parameter(BackgroundColor, Green)     )   ); }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"php\">function GetDesktopTheme() : Theme {   return Theme::Create()   -&gt;MaxWidth(Px(800))   -&gt;ThemeBlocks(     ThemeBlock::Create()     -&gt;Keys(&quot;adaptive_color&quot;)     -&gt;Modifiers(       StandartModifier::Create()       -&gt;Parameter(BackgroundColor, Red)     )   ); }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"php\">class TestThemeDisplay extends DisplayComponent {    function Build() : Document {     return Document::Create()     -&gt;Themes([       GetMyTheme(),        GetDesktopTheme(),        GetMobileTheme()     ])     -&gt;Child(       Container::Create()       -&gt;ThemeKeys([&quot;my_container&quot;, &quot;adaptive_color&quot;])       -&gt;Child(         Text::Create()         -&gt;ThemeKeys(&quot;shake_text&quot;)         -&gt;Text(&quot;Error text&quot;)       )     );   }  } TestThemeDisplay::Display();<\/code><\/pre>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_5\/bj\/xn\/_5bjxn2uolijrullh5e8tnxuphm.gif\"><\/p>\n<p>  <\/p>\n<h1 id=\"logika\">\u041b\u043e\u0433\u0438\u043a\u0430<\/h1>\n<p>  <\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043b\u0438\u043a\u043a\u0435\u0440.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0442 DisplayComponent.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e Build() \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0438\u043c \u0432 \u043d\u0435\u0439 Document.<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">class ClickerDisplay extends DisplayComponent {    function Build() : Element {     return Document::Create()     -&gt;Title(&quot;Clicker&quot;);    }  } ClickerDisplay::Display();<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0431\u0435\u043d\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0435\u0442\u0435\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0435\u043a\u0441\u0442 \u0438 \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">class ClickerDisplay extends DisplayComponent {    function Build() : Element {     return Document::Create()     -&gt;Title(&quot;Clicker&quot;)     -&gt;Child(       Column::Create()       -&gt;Children([         Text::Create()         -&gt;Text(&quot;Pressed 0 times&quot;),         Button::Create()         -&gt;Text(&quot;Press&quot;)       ])     );    }  } ClickerDisplay::Display();<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/nv\/6v\/cm\/nv6vcmgsy-7hfkockpmkhnil4xa.png\"><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 ThemeParameter, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">class ClickerDisplay extends DisplayComponent {    function Build() : Element {     return Document::Create()     -&gt;Title(&quot;Clicker&quot;)     -&gt;Child(       Column::Create()       -&gt;ThemeParameter(Padding, Px(15))       -&gt;Children([         Text::Create()         -&gt;ThemeParameter(PaddingBottom, Px(15))         -&gt;Text(&quot;Pressed 0 times&quot;),         Button::Create()         -&gt;ThemeParameter(Width, Auto)         -&gt;ThemeParameter(Padding, [Px(4), Px(10)])         -&gt;ThemeParameter(BackgroundColor, Blue)         -&gt;ThemeParameter(Color, White)         -&gt;ThemeParameter(BorderRadius, Px(4))         -&gt;Text(&quot;Press&quot;)       ])     );    }  } ClickerDisplay::Display();<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0443\u0434\u0430 \u043b\u0443\u0447\u0448\u0435 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0441\u0442\u0440\u043e\u0447\u0435\u043a.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pk\/t6\/je\/pkt6jeoiuz3i4g66suoe1-1y-_8.png\"><\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>Initialize<\/strong>() \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <strong>TapCount<\/strong>.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0410\u043d\u0430\u043b\u043e\u0433 form \u0432 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u2014 \u044d\u0442\u043e Action. <\/p><\/blockquote>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c <em>Action<\/em> \u0432 \u043d\u0430\u0448\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. <em>Action<\/em> \u0442\u0438\u043f \u043f\u0443\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 <em>Post<\/em>. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0435\u0442\u0435\u0439 \u0443\u043a\u0430\u0436\u0435\u043c \u043d\u0430\u0448\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0443, \u0433\u0434\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u0448\u0430 \u043a\u043d\u043e\u043f\u043a\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <em>click_count<\/em> \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 <em>Action<\/em>. \u0410 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0435\u0451 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043c TapCount.<\/p>\n<p>  <\/p>\n<p>\u0412 <strong>Initialize<\/strong>() \u0447\u0435\u0440\u0435\u0437 Action::<strong>GetValue<\/strong>(name, standart_value, action_type) \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043d\u0430\u0448\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443\u043a\u0430\u0436\u0435\u043c 0, \u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0438\u043f\u0430 \u0443\u043a\u0430\u0436\u0435\u043c <em>Post<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0442\u0435\u043a\u0441\u0442\u0435 \u0432\u044b\u0432\u0435\u0434\u0438\u043c &quot;<em>Press $this-&gt;TapCount times<\/em>&quot;.<\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435, \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043b\u0438\u043a\u043a\u0435\u0440 \u0433\u043e\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<pre><code class=\"php\">class ClickerDisplay extends DisplayComponent {   private $TapCount;    function Initialize() {     $this-&gt;TapCount = Action::GetValue(&quot;click_count&quot;, 0 \/* standart value *\/, ActionTypes::Post);     $this-&gt;TapCount++;   }    function Build() : Document {     return Document::Create()     -&gt;Title(&quot;Test page&quot;)     -&gt;Child(       Action::Create()       -&gt;Type(ActionTypes::Post)       -&gt;Variable(&quot;click_count&quot;, $this-&gt;TapCount)       -&gt;Child(         Column::Create()         -&gt;ThemeParameter(Padding, Px(15))         -&gt;Children([           Text::Create()           -&gt;ThemeParameter(PaddingBottom, Px(15))           -&gt;Text(&quot;Press $this-&gt;TapCount times&quot;),           Button::Create()           -&gt;ThemeParameter(Width, Auto)           -&gt;ThemeParameter(Padding, [Px(4), Px(10)])           -&gt;ThemeParameter(BackgroundColor, Blue)           -&gt;ThemeParameter(Color, White)           -&gt;ThemeParameter(BorderRadius, Px(4))           -&gt;Text(&quot;Press&quot;)         ])       )     );   } } ClickerDisplay::Display();<\/code><\/pre>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sg\/iw\/_s\/sgiw_srlw0ob6fvcgbfaclp7trg.gif\"><\/p>\n<p>  <\/p>\n<h1 id=\"itog\">\u0418\u0442\u043e\u0433<\/h1>\n<p>  <\/p>\n<p>\u041c\u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440. <\/p>\n<p>  <\/p>\n<p>\u041e\u043d \u043f\u0440\u043e\u0448\u043e\u043b \u043f\u0443\u0442\u044c \u043e\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u0434\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430 html \u0438 css, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0438 \u0441\u043e\u0432\u043c\u0435\u0449\u044f\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043a\u0443\u0440\u0441\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 (\u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u043d\u0438\u0436\u0435), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0435\u0433\u043e \u043d\u0430 \u044d\u043a\u0437\u0430\u043c\u0435\u043d\u0435 \u0438 \u0434\u0435\u043b\u0430\u043b \u043d\u0430 \u043d\u0451\u043c \u0443\u0447\u0435\u0431\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u043a\u0443\u0440\u0441\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 MelonPHP<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-i\/nc\/sq\/-incsq45lbuggpnqhczd5tptujg.png\"><\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yw\/mc\/n6\/ywmcn6fwn0eaervbpjge6wiqn2s.png\"><\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/eq\/ou\/yr\/eqouyrxj7w-eahvdsdbzgwe5aie.png\"><\/p>\n<\/div><\/div>\n<p>  <\/p>\n<h3 id=\"istochniki\">\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/MelonPHP\/MelonPHP\" rel=\"nofollow\">GitHub \u2014 MelonPHP<\/a><\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/flutter.dev\" rel=\"nofollow\">Flutter<\/a><\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/introducing-net-multi-platform-app-ui\/\" rel=\"nofollow\">MAUI<\/a><\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/511544\/\"> https:\/\/habr.com\/ru\/post\/511544\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/511544\/\">\n<h1 id=\"prichiny-i-problemy-kotorye-nuzhno-bylo-reshit\">\u041f\u0440\u0438\u0447\u0438\u043d\u044b \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0438\u0442\u044c<\/h1>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0432\u0430\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u044f \u043f\u0438\u0441\u0430\u043b \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043d\u0430 php. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u0443\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u043f\u0440\u043e\u0448\u0435\u043b \u043e\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446, \u0434\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430 html \u0438 css \u043a\u043e\u0434\u0430. \u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u043a\u0430\u0436\u0443 \u0443\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u0435\u043c\u0435\u0441\u0442\u0440\u0435 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e PHP. <\/p>\n<p>  <\/p>\n<p><del>\u041f\u043e\u0441\u043b\u0435 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0435\u0439\u043c\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/del> \u041f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0438\u043c\u044f MelonPHP. \u0427\u0442\u043e\u0431\u044b \u043b\u044e\u0434\u0438 \u0434\u0443\u043c\u0430\u043b\u0438 \u043e \u0435\u0434\u0435 \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0437\u043d\u043e\u0441\u0438\u043b\u0438 \u0435\u0433\u043e \u0438\u043c\u044f? \u041d\u043e \u0443 \u043d\u0430\u0441 \u0442\u0443\u0442 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0431\u0440\u0435\u0434\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044f \u0432\u0430\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0430\u0441\u044c \u0432 \u0432\u044b\u0432\u043e\u0434\u0435 HTML \u043a\u043e\u0434\u0430 \u0447\u0435\u0440\u0435\u0437 PHP. \u042f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043d\u0438\u0436\u0435.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-307155","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/307155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=307155"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/307155\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=307155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=307155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=307155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}