1. Các thành phần giao diện
- Tất cả các thành phần giao diện được được trực quan và xây dựng dựa trên Bootstrap như: navigation bar, form đang ký, đăng nhập ...
- Các thành phần của ứng dụng (giao diện) là 1 phần tử trong thư viện:
Setup các thành phần trong source file
App/library/Elements.php
Setup các thành phần trong source file
App/library/Elements.php
<?php
use Phalcon\Mvc\User\Component;
class Elements extends Component
{
public function getMenu()
{
// ...
}
public function getTabs()
{
// ...
}
}
Class trên được kế thừa từ Phalcon\MVC\User\Component
- Đăng ký thành phần giao diện với services trong
<?php
// Register a user component
$di->set('elements', function () {
return new Elements();
});
- Giống như controller, plugins hoặc components đều có view tương ứng setting trong layout cho tất cả các trang. /view/layout/main.volt
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">INVO</a>
{{ elements.getMenu() }}
</div>
</div>
</div>
<div class="container">
{{ content() }}
<hr>
<footer>
<p>© Company 2015</p>
</footer>
</div>
Thành phần lấy giao diện tương tác với components. Lấy UI element đang ký trong service
{{ elements.getMenu() }}
1.1 Thay đổi title tự động
<?php
class ProductsController extends ControllerBase
{
public function initialize()
{
// Set the document title
$this->tag->setTitle('Manage your product types');
parent::initialize();
}
// ...
}
1.2 Thêm tiêu đề vào trước tất cả tiêu đề các trang
$this->tag->prependTitle('INVO|');
1.3 Set title trên view
<!DOCTYPE html>
<html>
<head>
<?php echo $this->tag->getTitle(); ?>
</head>
<!-- ... -->
</html>
Hay trong file .volt {{get_title()}}
Note:
- Nếu chưa đang ký auto-load thư mục library cần đăng ký autoload trong loader.php
- Lỗi khi các chuyển các tab link bị sai:
Đúng invo.dev/about/index.
Sai invo.dev/index/about/index (đã nhấp vào tab index 1lần
Fix:-> set baseUri="/"
No comments:
Post a Comment
hocphalcon.blogspot.com