教程5: 定制INVO(Tutorial 5: Customizing INVO)

要完成 INVO 的详细说明, 我们将会解释如何自定义 INVO 添加 UI 元素和根据控制器的执行从而改变标题.

用户组件(User Components)

所有的UI元素和应用的视觉效果大部分都是通过 Bootstrap 实现的. 有些元素, 比如根据应用程序的状态而发生的导航条的变化. 例如, 右上角, 如果用户已经登录到应用程序, 链接”Log in / Sign Up” 变为 “Log out”.

应用程序的这部分是用的组件 “Elements” (app/library/Elements.php) 来实现的.

  1. <?php
  3. use Phalcon\Mvc\User\Component;
  5. class Elements extends Component
  6. {
  7.     public function getMenu()
  8.     {
  9.         // ...
  10.     }
  12.     public function getTabs()
  13.     {
  14.         // ...
  15.     }
  16. }

这个类继承 Phalcon\Mvc\User\Component. 这不是强加的去继承这个类的组件, 但是它会帮助我们更加快速的访问呢应用的服务. 现在, 我们将在服务容器中注册沃恩的第一个用户组件:

  1. <?php
  3. // 注册用户组件
  4. $di->set(
  5.     "elements",
  6.     function () {
  7.         return new Elements();
  8.     }
  9. );

作为控制器, 在视图中的插件或者组件, 这个组件还可以已在容器中注册的服务和通过访问一个相同名字的属性作为一个预先注册的服务:

  1. <div class="navbar navbar-fixed-top">
  2.     <div class="navbar-inner">
  3.         <div class="container">
  4.             <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  5.                 <span class="icon-bar"></span>
  6.                 <span class="icon-bar"></span>
  7.                 <span class="icon-bar"></span>
  8.             </a>
  10.             <a class="brand" href="#">INVO</a>
  12.             {{ elements.getMenu() }}
  13.         </div>
  14.     </div>
  15. </div>
  17. <div class="container">
  18.     {{ content() }}
  20.     <hr>
  22.     <footer>
  23.         <p>&copy; Company 2015</p>
  24.     </footer>
  25. </div>

重要的部分是:

  1. {{ elements.getMenu() }}

动态改变标题(Changing the Title Dynamically)

当你在不同的选项中浏览的时候就会看到标题在动态的改变. 在每个控制器初始化的时候实现:

  1. <?php
  3. class ProductsController extends ControllerBase
  4. {
  5.     public function initialize()
  6.     {
  7.         // 设置文档标题
  8.         $this->tag->setTitle(
  9.             "Manage your product types"
  10.         );
  12.         parent::initialize();
  13.     }
  15.     // ...
  16. }

注意, 这个方法 parent::initialize() 也被调用, 它添加更多的数据到标题:

  1. <?php
  3. use Phalcon\Mvc\Controller;
  5. class ControllerBase extends Controller
  6. {
  7.     protected function initialize()
  8.     {
  9.         // 在标题的前面加上应用名称
  10.         $this->tag->prependTitle(
  11.             "INVO | "
  12.         );
  13.     }
  15.     // ...
  16. }

最后, 标题在 main 视图 (app/views/index.volt) 输出了 :

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <?php echo $this->tag->getTitle(); ?>
  5.     </head>
  7.     <!-- ... -->
  8. </html>