BootstrapZF

BootstrapZF is a library for Zend Framework 1 with components to create Bootstrap 3 elements.

How to use

• Download BootstrapZF and put the library/Bootstrap folder in your Zend Framework project's library folder;
• Download Bootstrap 3 in http://getbootstrap.com and put it in your Zend Framework project's public folder;
• Download Jquery in http://jquery.com/download/ and put it in your Zend Framework project's public folder;
• Add to your HTML in layout.phtml the bootstrap and jquery css and js files. Something like:

<link href="<?php echo $this->baseUrl('bootstrap/css/bootstrap.min.css'); ?>"
rel="stylesheet">
<script src="<?php echo $this->baseUrl('jquery/1.11.1/jquery.min.js'); ?>">
</script>
<script src="<?php echo $this->baseUrl('bootstrap/js/bootstrap.min.js'); ?>">
</script>

• Add the following lines to your application.ini:

autoloaderNamespaces[] = "Bootstrap"
resources.view.helperPath.Bootstrap_View_Helper = "Bootstrap/View/Helper"
resources.frontController.actionHelperPaths.Bootstrap_Controller_Action_Helper = 
"Bootstrap/Controller/Action/Helper"

• Use the library classes in your project.

Components

Alerts

Creates a Bootstrap's alert component or a list of them.

Bootstrap_View_Helper_Alert

/**
 * $text        The message you want to appear
 * $type        Can be alert [default], success, info, warning or danger
 * $closeButton Set false if you do not want the close button (X) appears
 * $escape      If you want to add html tags inside the message, set false
 * $tag         If you want to change the default tag (div) to any other
 */

<?php echo $this->alert('<strong>Error! </strong> An error occurred!', 'danger', 
false, false, 'p'); ?>

Bootstrap_Controller_Action_Helper_Alerts

Add the messages in you controller action using the Bootstrap_Controller_Action_Helper_Alerts

/**
 * $text        The message you want to appear
 * $type        Can be alert [default], success, info, warning or danger
 * $escape      If you want to add html tags inside the message, set false
 */
//You can call the direct method
$this->_helper->alerts('This is a direct message', 'success', true);
 //Or you can call the method AddMessage
$this->getHelper('Alerts')->addMessage('This is a message.', 'alert', true);
//Or you can call one of the methods for specific types of message
$this->getHelper('Alerts')->addAlert('<strong>Alert: </strong>This is an alert
message', false);
$this->getHelper('Alerts')->addSuccess('<strong>Success: </strong>This is a success
message', false);
$this->getHelper('Alerts')->addInfo('<strong>Info: </strong>This is an info message',
false);
$this->getHelper('Alerts')->addWarning('<strong>Success: </strong>This is an warning
message', false);
$this->getHelper('Alerts')->addDanger('<strong>Success: </strong>This is a danger
message', false);

Bootstrap_View_Helper_Alerts

After adding the messages in the controller action with the Bootstrap_Controller_Action_Helper_Alerts, you call the Bootstrap_View_Helper_Alerts to show them:

/**
 * $closeButton    Set false if you do not want the close button (X) appears
 * $uniqueMessages Set false if you do not want to equal messages to be filtered
 * $id             Set the <ul> id [default: 'alerts']
 */
<?php echo $this->alerts(true, true, 'messages'); ?>

Carousel

Creates an image slideshow using Bootstrap's carousel component.

    <h4>Bootstrap_View_Helper_Carousel</h4>

<?php $images = array(
    array(
        'src'           => $this->view->baseUrl('img/carousel-1.jpg'),
        'caption-title' => 'First slide label',
        'caption'       => 'Nulla vitae elit libero, a pharetra augue mollis interdum',
        'alt'           => '900x500'
    ),
    array(
        'src'           => $this->view->baseUrl('img/carousel-2.jpg'),
        'caption-title' => 'Second slide label',
        'caption'       => 'Nulla vitae elit libero, a pharetra augue mollis interdum',
        'alt'           => '900x500'
    ),
    array(
        'src'           => $this->view->baseUrl('img/carousel-3.jpg'),
        'caption-title' => 'Third slide label',
        'caption'       => 'Nulla vitae elit libero, a pharetra augue mollis interdum',
        'alt'           => '900x500'
    ),    
);?>

/**
 * $id       Set the id for the div the wrappers the carousel
 * $images   Array contining the list of images with options 
 *           [src, caption-title, caption, alt]
 * $options  Array width boolean options [showCaption, showIndicators, 
 *           showControls], default is true for all of them
 */
<?php echo $this->carousel('generic_carousel', $images, array(
    'showCaption'    => true, 
    'showIndicators' => true,
    'showControls'   => true
)); ?>

Pagination

Creates a Bootstrap's pagination.

Bootstrap_View_Helper_Pagination

/**
 * $paginator   A Zend_Paginator object. Let it null if you have defined 
 *              a $this->paginator for the view
 * $pageParam   Set the name for the page parameter [default = 'page']
 * $size        Set small (or sm) or large (or lg) if you want to change 
 *              the default size
 */
<?php echo $this->pagination(null, 'p', 'sm'); ?>

Navigation

Creates a Bootstrap's navbar.

Bootstrap_View_Helper_NavbarHeader

/**
 * $brand   Add the brand, site title or anything you want to be displayed in the 
 *          navbar
 * $target  Set the name of the navbar target for the navbar toggle be used on small 
 *          screens
 */
<?php echo $this->navbarHeader('BootstrapZF', 'navbar-collapse-1'); ?>

Bootstrap_View_Helper_Navbar

/**
 * $container   A Zend_Navigation_Container object. This is optional if you have 
                defined a default Zend_Navigation_Container in your project
 */
<?php 
$container = Zend_Registry::get('Zend_Navigation')->findById('homepage');
echo $this->navbar($container); 
?>

Now, putting them together, with aditional html:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <?php echo $this->navbarHeader('BootstrapZF', 'navbar-collapse-1'); ?>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <?php 
                $container = Zend_Registry::get('Zend_Navigation')->findById('home');
                echo $this->navbar($container); 
            ?>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Breadcrumbs

Creates a Bootstrap's breadcrumbs.

Bootstrap_View_Helper_Breadcrumbs

Once you have configured a default Zend_Navigation in your project, you just have to call the view helper.

<?php echo $this->breadcrumbs(); ?>

Forms

Creates a Bootstrap's form.

Bootstrap_Form

First, create a new form in your controller. You can choose between one of the following types of form:

- Bootstrap_Form_Vertical, creates a Bootstrap's default form - Bootstrap_Form_Horizontal, creates a Bootstrap's horizontal form - Bootstrap_Form_Inline, creates a Bootstrap's inline form

Elements text, password, textarea, checkbox, multiCheckbox, radio, select, button, reset, submit and file where rebuilt to fit bootstrap's format.

$form = new Bootstrap_Form_Horizontal();
$form->addElement('hidden', 'id', array('value' => 1));
$form->addElement('text', 'text', array('label' => 'Text', 'required' => true));
$form->addElement('password', 'password', array('label' => 'Password'));
$form->addElement('textarea', 'textarea', array('label' => 'Textarea', 'rows' => 5));
$form->addElement('checkbox', 'checkme', array('label' => 'Check or not check'));
$form->addElement('multiCheckbox', 'checkallme', array(
'label'        => 'Many options',
'multiOptions' => array('Option 1', 'Option 2', 'Option 3'),
'inline'       => true
));
$form->addElement('radio', 'radiobuttons', array(
'label'        => 'Select one',
'multiOptions' => array('Option 1', 'Option 2', 'Option 3'),
'inline'       => true
));
$form->addElement('select', 'selectme', array(
'label'        => 'Select here',
'multiOptions' => array('Option 1', 'Option 2', 'Option 3'),
));
$form->addElement('button', 'back', array(
'label'      => 'Back',
'buttonType' => 'default',
'iconLeft'   => 'glyphicon glyphicon-circle-arrow-left'
));
$form->addElement('reset', 'reset', array(
'label'      => 'Reset',
'buttonType' => 'default',
'icon'       => 'glyphicon glyphicon-remove-circle'
));
$form->addElement('submit', 'submit', array(
'label'      => 'Submit',
'buttonType' => 'primary',
'iconLeft'   => 'glyphicon glyphicon-floppy-disk'
));
$form->addDisplayGroup(array('back', 'reset', 'submit'), 'buttons');

    <p>New elements were created for new HTML5 form inputs.</p>

$form->addElement('number', 'number', array(
    'label'       => 'Number',
    'min'         => 1,
    'max'         => 10
));

$form->addElement('range', 'range', array(
    'label'       => 'Range',
    'min'         => 1,
    'max'         => 5,
    'prepend'     => 1,
    'append'      => 5
));

$form->addElement('url', 'site', array('label' => 'Site'));
$form->addElement('email', 'email', array('label' => 'E-mail'));
$form->addElement('color', 'color', array('label' => 'Color'));
$form->addElement('date', 'date', array('label' => 'Date'));
$form->addElement('time', 'time', array('label' => 'Time'));
$form->addElement('datetime', 'datetime', array('label' => 'Datetime'));
$form->addElement('month', 'month', array('label' => 'Month'));
$form->addElement('week', 'week', array('label' => 'Week'));
$form->addElement('search', 'search', array('label' => 'Search'));

And a new element was created for Bootstrap's form static text.

$form->addElement('staticText', 'uneditable', array(
    'label' => 'Static text', 
    'value' => 'You can not edit this text'
));

Add the form the the view.

$this->view->form = $form;

Now, print the form in your view and it will be rendered in bootstrap's format.

<?php echo $this->form; ?>