Tag Archives: System software

Use Zend_Translate to Translate Your Web App

micro tutorial, PHP, zend framework, , , , , , , , , , ,

There are some really good reasons to use Zend_Translate for your multilingual site instead of some other technique. Actually you can definitely simulate something like this Zend component with and array or ini file, but here are some good things to mention.

1. Write a human readable source file

In fact you can do this even without Zend_Translate. Image you’ve an ini file with some pairs like:

lblMyLabel = "My Label"

Nobody says this cannot be “more” human readable – like so:

My Label = "My Label"

Than you can support several files i.e. en.ini, de.ini, etc. where you can translate this label. The problem is that once you read the ini file you’ve to deal with those white spaces into the labels, while with Zend_Translate you can simply call them with:

$translate->_("My Label");

2. Default values for missing labels

Zend_Translate forces you to define a source file. Which is really great, because you always have a default value. Assuming that you don’t have a specific label translated in one of the ini files, you’ll get the default value from the source file, and defining source and other files is as easy as:

// en.ini
My Label = "My Label"
 
// de.ini
...
 
// while the locale is de_DE you'll have 
// the default value returned
$translate->_("My Label"); // will return My Label from the en.ini

3. Locales

It’s really great that you can directly setup a locale for this module. Thus you have more flexibility when switching between languages and you can benefit from the power of the framework when reading some browser specific locales. Here’s some code:

$translate = new Zend_Translate('ini', 'en.ini', 'en');
$translate->addTranslation('de.ini', 'de');
 
// than when you setup the translation locale
$translate->setLocale('en');

4. Cache

One of the greatest things about Zend_Translate is the native support of cache. It’s so cool! Actually the labels of a large web system are pretty static and don’t change every day. In other hand in large scale systems there are lots of labels, and the load time will be faster with cache.

$frontendOptions = array('lifetime' => 600, 'automatic_serialization' => true);
$backendOptions  = array('cache_dir' => 'path_to_cache_dir');
 
$cache = Zend_Cache::factory('Core', 'File', $frontendOptions, $backendOptions);
 
Zend_Translate::setCache($cache);

It’s a great advantage to use Zend_Translate after all this. Actually I have finished projects without any use of it, but I really can’t imagine how I’ll work now without it!

Send Mail with Zend Framework

PHP, zend framework, , , , , , , , , , , , ,

Simple, but Doesn’t Work!

It may sound strange, because all this is quite well documented in the Zend Framework documentation. Indeed it’s very very simple and all is done only by few lines of code.

$mail = new Zend_Mail();
$mail->setFrom('sender@example.com');
$mail->setBodyHtml('some message - it may be html formatted text');
$mail->addTo('recipient@example.com', 'recipient');
$mail->setSubject('subject');
$mail->send();

Even it look simple though, it may not work on your localhost while you’re trying to make it work! Because you’ve to have sendmail setup. And in Zend Framework sendmail is the default transport protocol for sending mails.

What You Have to Do to Make it Work?

Actually you’ve simply to add a transport protocol, just like that:

$tr = new Zend_Mail_Transport_Smtp('smtp.example.com',
                    array('auth' => 'login',
                             'username' => 'username',
                             'password' => 'password'));
Zend_Mail::setDefaultTransport($tr);

Where Did I Get These?

Well look at your favorite mail account you probably use every day. It may be hosted in GMail or wherever, but there are some configurations you have to port under Zend’s code and everything will be just fine until you develop the app!

clickoutside jQuery plugin

javascript, , , , , , ,

I wrote a small plugin to jQuery that adds the event of clicking outside an element. You know sometimes you should close some modal windows when clicking outside. It’s really simple and small. Please provide any feedback that will improve it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

(function(jQuery) {
   jQuery.fn.clickoutside = function(callback) {
      var outside = 1, self = $(this);
      self.cb = callback;
      this.click(function() {
         outside = 0;
      });
      $(document).click(function() {
         outside && self.cb();
         outside = 1;
      });
      return $(this);
   }
})(jQuery);

You can see the demo page here. To install it just include the chunk above after the jQuery library code.

jQuery tooltip plugin!

javascript, , , , , , , , , , , ,

Tooltips and jQuery

In order to complete the tooltip post series I decided to make a plugin for jQuery that implements tooltips in the most simple way I was able to find! I have no idea what are the other plugins for tooltips and I never used such plugin, but however I needed one in order to complete my task an suddenly I turn it into a plugin.

What I’d like to hear is requests for improvements and bugs reported, just to make the plugin as useful as possible.

Let’s start in that post with some primary HTML markup, here are the complete source and demo page.

<html>
<head>
 <title>jQuery tooltip</title>
</head>
<body>
<p>A DIV element wrapped in another DIV that's 800 pixels wide and thus defines the bounds</p>
<div id="wrap" style="width:800px;border:1px solid blue;">
 <div id="container" title='test' rel="here's some<br />HTML and image<br /><img src='/jquery-logo.png' />" style="border:1px solid red;">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus vulputate arcu in mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla nunc libero, eleifend in imperdiet lacinia, pellentesque eget turpis. Nulla consectetur augue vulputate arcu porta tempus. Mauris nisl risus, fermentum posuere sodales sed, accumsan in massa. Pellentesque facilisis, felis sit amet vulputate egestas, nibh lacus sollicitudin nulla, non commodo nunc elit et eros. Nulla eu placerat mauris. Phasellus sit amet odio nec dui pharetra pulvinar. Nunc sollicitudin, nisl quis interdum consequat, diam dolor condimentum felis, ac porttitor turpis augue nec sapien. Quisque pulvinar nulla ut elit dapibus in tempus ipsum interdum. Pellentesque feugiat tempus tortor, mollis fringilla ligula faucibus nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus ullamcorper lacus. Maecenas at blandit justo. Maecenas adipiscing velit luctus mauris gravida adipiscing. Morbi molestie ipsum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sapien mi, hendrerit sit amet semper ut, condimentum et risus. Nulla facilisi.
 </p>
 </div>
</div>
<p>When defined over an image the tooltip gets the text into the alt attribute by default</p>
<img id="my-img" src="/jquery-logo.png" alt="test" />
<p>When you attach the .tooltip() method on a link it gets its title attribute for the tooltip by default. Note that you can add more and more links after you attach the .tooltip() method on that class name. This is because the plugin make use of the .live() method of jQuery</p>
<a href="http://stoimen.com" title="a title of the link">Just a link!</a>

And right after that the JavaScript:

<!-- include the jQuery library -->
<script src="/jquery-1.3.2.js"></script>
<script>
// this is the plugin code. You can copy/paste it at the bottom of the jquery.js library file
(function(jQuery) {
 jQuery.fn.tooltip = function(options) {
 $('body').append('<div id="sstt" style="display:none;"></div>');
 if (typeof options == 'undefined') options = {};
 this.live('mousemove', function(e) {

 var att = 'attribute' in options && $(this).attr(options.attribute);
 if(!att) att = $(this).attr('rel');

 var bbox = 'bbox' in options && options.bbox;
 if (!bbox) bbox = $(document);

 if ('text' in options && options.text) att = options.text;

 if ($(this).is('img')) att = $(this).attr('alt');
 if ($(this).is('a')) att = $(this).attr('title');

 var elem = $('#sstt'),csstxt = elem.css('cssText'),ew=elem.width(),dw=bbox.width(),px=e.pageX+10,py=e.pageY+10;
 elem.html(att);
 var eloffset = dw > px+ew &&
 elem.css('cssText', csstxt+';position:absolute;top:'+py+'px;left:'+px+'px;display:block');

 !eloffset &&
 elem.css('cssText', csstxt+';position:absolute;top:'+py+'px;left:'+(dw-ew)+'px;display:block');
 });
 this.live('mouseout', function() {
 $('#sstt').hide();
 });
 };
})(jQuery);

How to setup the options?

The .tooltip() method has an optional “options” parameter that specifies simple parameters for the tooltip itself.

{
 attribute : 'rel',
 bbox : $(document),
 text : ''
}

By default the plugin uses the REL attribute for the text of the tooltip, but you can override it by setting the options attribute property:

var options = { attribute:'title'}

Here the tooltip will take the TITLE attribute value. Note that the TITLE attribute is default for anchor tags and the construction above will be default for them. Over links the .tooltip() method gets the ALT attribute.

bbox is the default bound box for the tooltip. Default value is $(document), but it can be any other jQuery object. Look at the examples bellow.

text is predefining the tooltip’s text.

Finally some examples

1. Usage with no options. The REL attribute is considered as text for the tooltip and the bound box is the document:

$('#container').tooltip();

2. Usage with bound box. The REL is yet again considered as text for the tootip and the bound box is passed as argument as a jQuery object.
2.1. The parent element:

$('#container').tooltip({bbox:$('#container').parent()});

2.2. Explicit defined parent element:

$('#container').tooltip({bbox:$('#wrap')});

3. Predefine the text of the tooltip:

$('#container').tooltip({text:'Hello World!'});

3.1. It can be even HTML formatted text:

$('#container').tooltip({text:'Hello <br /> World!'});

4. Predefine the attribute. Now the default REL is dismissed and the TITLE is considered for the tooltip:

$('#container').tooltip({attribute:'title'});

5. Default for image is not REL but the ALT attribute:

$('#my-img').tooltip();

6. Default for link is not REL, but the TITLE attribute:

$('.my-link').tooltip();

7. You can even add some links from the same class on the fly, but they are still working, because of the live event binding:

$('body').append('<a href="http://stoimen.com" title="another link">some other link</a>');