教程 5: Customizing INVO · Phalcon中文教程

# Tutorial 5: Customizing INVO[](# "永久鏈接至標題") To finish the detailed explanation of INVO we are going to explain how to customize INVO adding UI elementsand changing the title according to the controller executed. ### User Components[](# "永久鏈接至標題") All the UI elements and visual style of the application has been achieved mostly through [Bootstrap](http://getbootstrap.com/).Some elements, such as the navigation bar changes according to the state of the application. For example, in theupper right corner, the link “Log in / Sign Up” changes to “Log out” if a user is logged into the application. This part of the application is implemented in the component “Elements” (app/library/Elements.php). ~~~ <?php use Phalcon\Mvc\User\Component; class Elements extends Component { public function getMenu() { // ... } public function getTabs() { // ... } } ~~~ This class extends the Phalcon\Mvc\User\Component. It is not imposed to extend a component with this class, butit helps to get access more quickly to the application services. Now, we are going to registerour first user component in the services container: ~~~ <?php // Register a user component $di->set('elements', function () { return new Elements(); }); ~~~ As controllers, plugins or components within a view, this component also has access to the services registeredin the container and by just accessing an attribute with the same name as a previously registered service: ~~~ <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> ~~~ The important part is: ~~~ {{ elements.getMenu() }} ~~~ ### Changing the Title Dynamically[](# "永久鏈接至標題") When you browse between one option and another will see that the title changes dynamically indicating wherewe are currently working. This is achieved in each controller initializer: ~~~ <?php class ProductsController extends ControllerBase { public function initialize() { // Set the document title $this->tag->setTitle('Manage your product types'); parent::initialize(); } // ... } ~~~ Note, that the method parent::initialize() is also called, it adds more data to the title: ~~~ <?php use Phalcon\Mvc\Controller; class ControllerBase extends Controller { protected function initialize() { // Prepend the application name to the title $this->tag->prependTitle('INVO | '); } // ... } ~~~ Finally, the title is printed in the main view (app/views/index.phtml): ~~~ <!DOCTYPE html> <html> <head> <?php echo $this->tag->getTitle() ?> </head>  </html> ~~~ | - [索引](# "總目錄") - [下一頁](# "Tutorial 6: Vkuró") | - [上一頁](# "Tutorial 4: Using CRUDs") |