Using zend-navigation in your Album Module
Posted 云旗
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Using zend-navigation in your Album Module相关的知识,希望对你有一定的参考价值。
Using zend-navigation in your Album Module
In this tutorial we will use the zend-navigation component to add a navigation menu to the black bar at the top of the screen, and add breadcrumbs above the main site content.
Preparation
In a real world application, the album browser would be only a portion of a working website. Usually the user would land on a homepage first, and be able to view albums by using a standard navigation menu. So that we have a site that is more realistic than just the albums feature, lets make the standard skeleton welcome page our homepage, with the /album
route still showing our album module. In order to make this change, we need to undo some work we did earlier. Currently, navigating to the root of your app (/
) routes you to theAlbumController
‘s default action. Let‘s undo this route change so we have two discrete entry points to the app, a home page, and an albums area.
// In module/Application/config/module.config.php:
‘home‘ => [
‘type‘ => Literal::class,
‘options‘ => [
‘route‘ => ‘/‘,
‘defaults‘ => [
‘controller‘ => Controller\IndexController::class, // <-- change back here
‘action‘ => ‘index‘,
],
],
],
(You can also now remove the import for theAlbum\Controller\AlbumController
class.)
This change means that if you go to the home page of your application (http://localhost:8080/
or http://zf2-tutorial.localhost/
), you see the default skeleton application introduction. Your list of albums is still available at the /album
route.
Setting Up zend-navigation
First, we need to install zend-navigation. From your root directory, execute the following:
$ composer require zendframework/zend-navigation
Assuming you followed the Getting Started tutorial, you will be prompted by the zend-component-installer plugin to inject Zend\Navigation
; be sure to select the option for either config/application.config.php
orconfig/modules.config.php
; since it is the only package you are installing, you can answer either "y" or "n" to the "Remember this option for other packages of the same type" prompt.
Manual configuration
If you are not using zend-component-installer, you will need to setup configuration manually. You can do this in one of two ways:
- Register the
Zend\Navigation
module in eitherconfig/application.config.php
orconfig/modules.config.php
. Make sure you put it towards the top of the module list, before any modules you have defined or third party modules you are using.- Alternately, add a new file,
config/autoload/navigation.global.php
, with the following contents:<?php use Zend\Navigation\ConfigProvider; return [ ‘service_manager‘ => (new ConfigProvider())->getDependencyConfig(), ];
Once installed, our application is now aware of zend-navigation, and even has some default factories in place, which we will now make use of.
Configuring our Site Map
Next up, we need zend-navigation to understand the hierarchy of our site. To do this, we can add a navigation
key to our configuration, with the site structure details. We‘ll do that in the Application
module configuration:
// in module/Application/config/module.config.php:
return [
/* ... */
‘navigation‘ => [
‘default‘ => [
[
‘label‘ => ‘Home‘,
‘route‘ => ‘home‘,
],
[
‘label‘ => ‘Album‘,
‘route‘ => ‘album‘,
‘pages‘ => [
[
‘label‘ => ‘Add‘,
‘route‘ => ‘album‘,
‘action‘ => ‘add‘,
],
[
‘label‘ => ‘Edit‘,
‘route‘ => ‘album‘,
‘action‘ => ‘edit‘,
],
[
‘label‘ => ‘Delete‘,
‘route‘ => ‘album‘,
‘action‘ => ‘delete‘,
],
],
],
],
],
/* ... */
];
This configuration maps out the pages we‘ve defined in our Album module, with labels linking to the given route names and actions. You can define highly complex hierarchical sites here with pages and sub-pages linking to route names, controller/action pairs, or external uris. For more information, see thezend-navigation quick start.
Adding the Menu View Helper
Now that we have the navigation helper configured by our service manager and merged config, we can add the menu to the title bar to our layout by using themenu view helper:
<?php // in module/Application/view/layout/layout.phtml: ?>
<div class="collapse navbar-collapse">
<?php // add this: ?>
<?= $this->navigation(‘navigation‘)->menu() ?>
</div>
The navigation helper is provided by default with zend-view, and uses the service manager configuration we‘ve already defined to configure itself automatically. Refreshing your application, you will see a working menu; with just a few tweaks however, we can make it look even better:
<?php // in module/Application/view/layout/layout.phtml: ?>
<div class="collapse navbar-collapse">
<?php // update to: ?>
<?= $this->navigation(‘navigation‘)
->menu()
->setMinDepth(0)
->setMaxDepth(0)
->setUlClass(‘nav navbar-nav‘) ?>
</div>
Here we tell the renderer to give the root <ul>
the class of nav
(so that Bootstrap styles the menu correctly), and only render the first level of any given page. If you view your application in your browser, you will now see a nicely styled menu appear in the title bar.
The great thing about zend-navigation is that it integrates with zend-router in order to highlight the currently viewed page. Because of this, it sets the active page to have a class of active
in the menu; Bootstrap uses this to highlight your current page accordingly.
Adding Breadcrumbs
Adding breadcrumbs follows the same process. In our layout.phtml
we want to add breadcrumbs above the main content pane, so our users know exactly where they are in our website. Inside the container <div>
, before we output the content from the view, let‘s add a breadcrumb by using the breadcrumbs view helper.
<?php // module/Application/view/layout/layout.phtml: ?>
<div class="container">
<?php // add the following line: ?>
<?= $this->navigation(‘navigation‘)->breadcrumbs()->setMinDepth(0) ?>
<?= $this->content ?>
</div>
This adds a simple but functional breadcrumb to every page (we tell it to render from a depth of 0 so we see all page levels), but we can do better than that! Because Bootstrap has a styled breadcrumb as part of its base CSS, let‘s add a partial that outputs the <ul>
using Bootstrap styles. We‘ll create it in the view
directory of the Application
module (this partial is application wide, rather than album specific):
<?php // in module/Application/view/partial/breadcrumb.phtml: ?>
<ul class="breadcrumb">
<?php
// iterate through the pages
foreach ($this->pages as $key => $page):
?>
<li>
<?php
// if this isn‘t the last page, add a link and the separator:
if ($key < count($this->pages) - 1):
?>
<a href="<?= $page->getHref(); ?>"><?= $page->getLabel(); ?></a>
<?php
// otherwise, output the name only:
else:
?>
<?= $page->getLabel(); ?>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
Notice how the partial is passed a Zend\View\Model\ViewModel
instance with thepages
property set to an array of pages to render.
Now we need to tell the breadcrumb helper to use the partial we have just written:
<?php // in module/Application/view/layout/layout.phtml: ?>
<div class="container">
<?php // Update to: ?>
<?= $this->navigation(‘navigation‘)
->breadcrumbs()
->setMinDepth(0)
->setPartial(‘partial/breadcrumb‘) ?>
<?= $this->content ?>
</div>
Refreshing the page now gives us a styled set of breadcrumbs on each page.
以上是关于Using zend-navigation in your Album Module的主要内容,如果未能解决你的问题,请参考以下文章
时间:2019-04-10 标签:c#sqldataadapterparams in using
Troubleshooting Failed Requests Using Tracing in IIS 8.5
Issues in using gym-gazebo in Ubuntu 14.04