Working with Zend Framework FlashMessenger and jQuery UI state classes

Question

I have a Zend Framework application that is making use of jQuery UI.

In my controllers, I am setting error/success messages with the FlashMessenger helper like this:

// ExampleController.php
$this->_helper->FlashMessenger('Sorry, could not complete your request.');

In my layout, I am displaying the messages by using the Noumenal FlashMessenger View Helper

// layout.phtml
<?php echo $this->flashMessenger(); ?>

I want to make use of my jQuery UI theme's CSS styles to style my error messages like this:

<div class="ui-state-error ui-corner-all"> 
    <p><span class="ui-icon ui-icon-alert"></span> 
    <strong>Alert:</strong> Sample ui-state-error style.</p>
</div>

...but the View Helper is doing all the work, so I can't change the classes how I want to. So before going down a dead end route, I thought I'd ask the community. Here are my questions:

1. How can I use the Zend Framework FlashMessenger so that I can set different messages depending on the state (error/success)?
2. How can I get the messages from the FlashMessenger and display them in a single place without having to create duplicate code in all of my controllers?
3. How can I output a different class for each of the different message states? For example: 'error'=>'ui-state-error', 'info'=>'ui-state-highlight', etc.

Answer 1

Having written the Noumenal FlashMessenger View Helper I should be able to help. :-)

To answer your question:

Adding Messages

You can set different message levels, e.g. error, warning etc, by passing an array to the FlashMessenger Action Helper rather than a simple string:

// ExampleController.php
$this->_helper->FlashMessenger(
     array('error'=>'Sorry, could not complete your request.')
);

The view helper is designed to recognise this.

Outputting Messages

When outputting FlashMessages in your layout, there are optional parameters that you can pass to specify the default message level (which is warning by default) and a template for your message.

Adapting your code snippet to account for differing message levels you could achieve the desired result by making the following call in your layout:

// layout.phtml
$template = '<div class="ui-state-error ui-corner-all"> 
    <p class="%s"><span class="ui-icon ui-icon-alert"></span> 
    <span class="flash-message">%s</span></p>
</div>';
echo $this->flashMessenger('error', $template);

(You may find it better to set the template as a view variable in, say, your bootstrap.)

Doing this the view helper will construct the appropriately formatted flash messages for you as you wish.

Some Simple Styling

Using CSS there would be plenty of room to style the messages appropriately. For example:

.alert {
    color: red;
}

.alert .flash-message:before {
    content: "<strong>Alert</strong> ";
}

.notice {
   color:yellow;
}

.notice .flash-message:before {
    content: "<strong>Notice</strong> ";
}    

I leave you to improvise...

I wrote a guide to Zend Framework FlashMessenger and the view helper on my blog. Perhaps give that a read. Also please do email me to let me know your difficulties -- it will help me know what I need to improve.

I hope that helps.

Answer 2

I ended up modifying the flashMessenger() view helper to use my jQuery templates. It outputs the correct template based on the key (error, notice, etc.). There's probably a better way to do it, but it gets the job done.

public function flashMessenger(...)
{
    //...

    //process messages
    foreach ($messages as $message)
    {
        if (is_array($message)) {
            list($key,$message) = each($message);
        }
        $template = $this->_getJqueryTemplate($key);
        $output .= sprintf($template,$message);
    }
    return $output;
}

private function _getJqueryTemplate($messageLevel)
{
    switch($messageLevel) {
        case 'error':
            $template = '
                <div class="ui-state-error ui-corner-all" style="padding: 0pt 0.7em;"> 
                    <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span> 
                    %s</p>
                </div>';
            break;
        default:
            $template = '
                <div class="ui-state-highlight ui-corner-all" style="padding: 0pt 0.7em;"> 
                    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em;"></span> 
                    %s</p>
                </div>';
    }
    return $template;
}

Then in the controller, specify which type of message you want to send by passing it as an array key.

// ExampleController.php
$this->_helper->FlashMessenger(
     array('error'=>'Sorry, could not complete your request.')
);