<pedrocorreia.net ⁄>
<Merry Christmas ⁄> <Merry Christmas ⁄>

<pedrocorreia.net ⁄> - Merry Christmas and a Happy New Year

Feliz Natal e um próspero Ano Novo
 
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

 
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

 
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

 
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

 
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
 
<myAdSense ⁄> <myAdSense ⁄>

 
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

 
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
 
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

 
 

<Construir Toolbar vista-style ⁄ >

clicks: 587 587 2007-12-28 2007-12-28 goto mySnippets mySnippets php  Download  Bookmark This Bookmark This





Construir a toolbar não é complicado, quer dizer não é complicado porque já houve alguém que fez o mais dificil, que foi construir o CSS :)

Vamos aproveitar esse CSS e adaptarmos às nossas necessidades, podem fazer download e ver o exemplo nesta página, foi onde eu vi o código, como já tinha dito, depois de termos o CSS e as imagens, fazer a toolbar não é nada do outro mundo, basta só olharmos para o exemplo e ir acrescentando informação, basicamente é ir acrescentando itens à lista, visto que é usado <li>.


Porém vamos tornar as coisas um pouco mais engraçadas e vamos optar por construir a toolbar recorrendo a ficheiro XML, já que é para inventar e é, além de usarmos um ficheiro XML que irá conter todas as definições da nossa toolbar, iremos também usar OOP (PHP5) e para acabar em beleza, que tal termos a Toolbar sem escrever uma única linha de HTML?


Muito basicamente o que vamos fazer é construir uma tiny-mini-micro-piccolo-small-framework, que será composta por alguns objectos que irão gerar o html por nós.

É uma framework (se é que pode ser chamada como tal :D) bastante limitada, pois só serão implementados meia dúzia de instruções html, os mais importantes para o nosso caso (sim, porque o nosso objectivo é mesmo o de construir uma toolbar, vamos é desviarmos-nos um pouco disso ^_^''), porém podemos com o tempo ir adicionando mais métodos, construir novas classes, etc, etc, enfim tornar o nosso código modular.



Uma especial atenção que o geração/ tratamento de erros não foi contemplada neste snippet, iria torná-lo mais extenso e não se justificava, pois isto é só um exemplo, porém é sempre recomendado termos estes aspectos em atenção.




Em baixo está um screenshot para explicar a nossa estrutura de ficheiros:







Reparem na divisão das pastas, serve somente para ter uma melhor arrumação dos ficheiros.



Este é o CSS que podem fazer o download desta página, bem como as imagens, podem fazer o download de todos os ficheiros necessários directamente neste link, porém fiz algumas pequenas alterações, nada que influencie o original:

- vista_toolbar.css
  1. img{ border: 0pt; }
  2. #vista_toolbar {float:left;font:normal 12px 'Trebuchet MS','Arial';margin:0;
  3. padding:0;border: solid 1px Orange;}
  4. #vista_toolbar ul {background-image:url(../images/back.gif);background-repeat:repeat-x;
  5. float:left;line-height:32px;list-style:none;margin:0;padding:0 10px 0 10px;width:auto;
  6. }
  7. #vista_toolbar li {display:inline;padding:0;}
  8. #vista_toolbar a {color:#FFF;float:left;padding:0 3px 0 3px;text-decoration:none;}
  9. #vista_toolbar a span {display:block;float:none;padding:0 10px 0 7px;}
  10. #vista_toolbar a span img {border:none;margin:8px 4px 0 0;}
  11. /* show picture when mouse over link */
  12. #vista_toolbar a:hover{background: url(../images/left.png) no-repeat left center;}
  13. #vista_toolbar a:hover span {background:url(../images/right.png) no-repeat right center;}
  14. #vista_toolbar a.right {float:right;}
  15. .bold{font-weight: bold !important;}
  16. .orange{color: Orange !important;}
  17. body{font-family: Tahoma, Verdana, Arial;font-size: 8pt;color: #000000;}




Quanto menos trabalho tivermos na actualização da nossa toolbar melhor, podiamos igualmente recorrer ao MySql ou qualquer outro tipo de armazenamento, mas optei por usar XML, isto faz com que baste alterar o XML para que automaticamente todas as páginas sejam actualizadas (como é um formato human-readable em qualquer editor de texto efectuamos rapidamente as alterações prentendidas), inclusivé poderemos ter vários ficheiros e usá-lo consoante as páginas.

Vamos ter um ficheiro XML com a seguinte estrutura:

- vista_toolbar.xml
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <pedrocorreia.net>
  3. <toolbar id="vista_toolbar">
  4.  
  5. <item title="goto myHome" description="myHome" link="index.php" cssClass="bold orange">
  6. <img src="images/my_home.png" w="16" h="16" attributes=" align='left' " />
  7. </item>
  8.  
  9. <item title="goto mySnippets" description="mySnippets" link="mysnippets.php">
  10. <img src="images/my_snippets.png" w="16" h="16" attributes=" align='left' " />
  11. </item>
  12.  
  13. <item title="goto myBlog" description="myBlog" link="http://edoshogun.blogspot.com" attributes=" target='_blank' " >
  14. <img src="images/my_blog.png" attributes=" align='left' " />
  15. </item>
  16.  
  17. </toolbar>
  18. </pedrocorreia.net>



Reparem que o código XML não é todo igual, por exemplo, se repararmos nem todos os itens têm os mesmos atributos, ou nas imagens nem todas têm o tamanho ou a descrição, isto faz com que nem todo os itens sejam obrigatórios, porém será recomendável preenchê-los.

De uma forma rápida percebe-se que cada item terá uma imagem associada, mas é de realçar, que tal não é obrigatório.



Depois da breve introdução passemos então ao código propriamente dito. O código não está todo documentado (my fault and lack of time), mas é simples e pelos próprios métodos e nomes das classes é fácil de perceber qual é o objectivo de cada um.

- AutoLoad.inc - para evitar andar a fazer sempre includes (neste caso não seriam muitos, mas num projecto seria mais demorado), vamos implementar uma magic function do php - __autoload, assim que fôr necessário usar uma class, automaticamente esta função é chamada e irá fazer o include a esse ficheiro.

  1. <?php
  2. //permite que seja feito automaticamente o load das classes
  3. if(function_exists("__autoload")) return;{
  4. function __autoload($class){
  5. include_once("class.$class.php");
  6. }
  7. }
  8. ?>




- class.HtmlObject.php
  1. <?php
  2.  
  3. /**
  4. * Abstract Class HtmlObject
  5. *
  6. * Class responsável pela geração de operações comuns
  7. * aos objectos html
  8. *
  9. * Esta class não pode ser instanciada, só extendida.
  10. *
  11. * @author: Pedro Correia - pedrocorreia.net
  12. */
  13. abstract class HtmlObject{
  14.  
  15. private $_id;
  16. private $_cssClass;
  17. private $_title;
  18. private $_attributes;
  19.  
  20. /**
  21. * Método construtor
  22. *
  23. * @param String $id
  24. * @param String $title
  25. * @param String $cssClass
  26. * @param String $attributes
  27. */
  28. public function __construct($id,$title="",$cssClass="",$attributes="") {
  29. $this->SetID($id);
  30. $this->SetTitle($title);
  31. $this->SetCssClass($cssClass);
  32. $this->SetAttributes($attributes);
  33. }
  34.  
  35. protected function _GenerateTitle(){
  36. $title=$this->GetTitle();
  37. if(!$title) return;
  38. return " alt='$title' title='$title' ";
  39. }
  40.  
  41. protected final function _GenerateCssClass(){
  42. $cssClass=$this->GetCssClass();
  43. if(!$cssClass) return;
  44. return " class='$cssClass' ";
  45. }
  46.  
  47. protected function _GenerateID(){
  48. $id=$this->GetID();
  49. if(!$id) return;
  50. return " name='$id' id='$id' ";
  51. }
  52.  
  53. protected final function _GenerateAttibutes(){
  54. $attributes=$this->GetAttributes();
  55. if(!$attributes) return;
  56. return " $attributes ";
  57. }
  58.  
  59. public final function SetID($value){$this->_id=$value;}
  60.  
  61. public final function GetID(){return $this->_id;}
  62.  
  63. public final function SetTitle($value){$this->_title=$value;}
  64.  
  65. public final function GetTitle(){return $this->_title;}
  66.  
  67. public final function SetCssClass($value){$this->_cssClass=$value;}
  68.  
  69. public final function GetCssClass(){return $this->_cssClass;}
  70.  
  71. public final function SetAttributes($value){$this->_attributes=$value;}
  72.  
  73. public final function GetAttributes(){return $this->_attributes;}
  74.  
  75. }
  76.  
  77. ?>








- class.HtmlDiv.php
  1. <?php
  2. include("AutoLoad.inc");
  3.  
  4. /**
  5. * Class HtmlDiv
  6. *
  7. * Class responsável pela construção
  8. * do objecto html - DIV
  9. *
  10. * @author: Pedro Correia - pedrocorreia.net
  11. */
  12. class HtmlDiv extends HtmlObject {
  13. private $_content;
  14.  
  15. /**
  16. * Método construtor
  17. *
  18. * @param String $id
  19. * @param String $content
  20. * @param String $cssClass
  21. * @param String $attributes
  22. */
  23. function __construct($id,$content,$cssClass="",$attributes="") {
  24. parent::__construct($id,"",$cssClass,$attributes);
  25. $this->SetContent($content);
  26. }
  27.  
  28. public function SetContent($value){$this->_content=$value;}
  29.  
  30. public function GetContent(){return $this->_content;}
  31.  
  32. /**
  33. * Overload método
  34. *
  35. * @return String
  36. */
  37. protected function _GenerateID(){return " id='{$this->GetID()}' ";}
  38.  
  39. public function ParseObject(){
  40. $content=$this->GetContent();
  41. $cssClass=$this->_GenerateCssClass();
  42. $id=$this->_GenerateID();
  43. $attributes=$this->GetAttributes();
  44.  
  45. return "<div $id $cssClass $attributes>$content</div>";
  46. }
  47.  
  48. }
  49.  
  50. ?>



- class.HtmlHref.php
  1. <?php
  2. include("AutoLoad.inc");
  3.  
  4. /**
  5. * Class HtmlHref
  6. *
  7. * Class responsável pela construção
  8. * do objecto html - HREF
  9. *
  10. * @author: Pedro Correia - pedrocorreia.net
  11. */
  12. class HtmlHref extends HtmlObject{
  13. private $_link;
  14. private $_description;
  15.  
  16. /**
  17. * Método construtor
  18. *
  19. * @param String $id
  20. * @param String $link
  21. * @param String $description
  22. * @param String $title
  23. * @param String $cssClass
  24. * @param String $attributes
  25. */
  26. function __construct($id,$link,$description,$title="",$cssClass="",$attributes="") {
  27. parent::__construct($id,$title,$cssClass,$attributes);
  28. $this->SetLink($link);
  29. $this->SetDescription($description);
  30. }
  31.  
  32. public function SetDescription($value){$this->_description=$value;}
  33.  
  34. public function GetDescription(){return $this->_description;}
  35.  
  36. public function SetLink($value){$this->_link=$value;}
  37.  
  38. public function GetLink(){return $this->_link;}
  39.  
  40. public function ParseObject(){
  41. $description=$this->GetDescription();
  42. $attributes=$this->GetAttributes();
  43. $title=$this->_GenerateTitle();
  44. $cssClass=$this->_GenerateCssClass();
  45. $id=$this->_GenerateID();
  46. $link=$this->GetLink();
  47.  
  48. return "<a href='$link' $title $id $attributes $cssClass>$description</a>";
  49. }
  50. }
  51.  
  52. ?>



- class.HtmlImage.php
  1. <?php
  2. include("AutoLoad.inc");
  3.  
  4. /**
  5. * Class HtmlImage
  6. *
  7. * Class responsável pela construção
  8. * do objecto html - IMG
  9. *
  10. * @author: Pedro Correia - pedrocorreia.net
  11. */
  12.  
  13. class HtmlImage extends HTMLObject {
  14. private $_w=0;
  15. private $_h=0;
  16. private $_src="";
  17.  
  18. /**
  19. * Método Construtor
  20. *
  21. * @param String $id
  22. * @param String $src
  23. * @param String $w
  24. * @param String $h
  25. * @param String $title
  26. * @param String $cssClass
  27. * @param String $attributes
  28. */
  29. function __construct($id,$src,$w="",$h="",$title="",$cssClass="",$attributes="") {
  30. parent::__construct($id,$title,$cssClass,$attributes);
  31. $this->SetDimensions($w,$h);
  32. if(file_exists($src)){$this->SetSrc($src);}
  33. }
  34.  
  35. private function _GenerateDimensions(){
  36. if($this->_w) $str=" width='$this->_w' ";
  37. if($this->_h) $str.=" height='$this->_h' ";
  38. return $str;
  39. }
  40.  
  41. public function SetDimensions($w,$h){
  42.