<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


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

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

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

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

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

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

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Construir Toolbar vista-style ⁄ >




clicks: 9040 9040 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.  
  43. //se forem especificadas medidas ...
  44. if(is_numeric($w) && is_numeric($h)){
  45. $this->_w=$w;
  46. $this->_h=$h;
  47. }
  48. else{ //caso contrário, verificar o ficheiro
  49. list($width, $height) = getimagesize($this->GetSrc());
  50. $this->_w=$width;
  51. $this->_h=$height;
  52. }
  53. }
  54.  
  55. public function SetSrc($value){
  56. if(!file_exists($value)) return ;
  57. $this->_src=$value;
  58. }
  59.  
  60. public function GetSrc(){return $this->_src;}
  61.  
  62. function ParseObject(){
  63. if(!$this->GetSrc()) return;
  64.  
  65. $this->SetDimensions($w,$h);
  66. $title=$this->_GenerateTitle();
  67. $imgDimensions=$this->_GenerateDimensions();
  68. $cssClass=$this->_GenerateCssClass();
  69. $id=$this->_GenerateID();
  70. $src=" src='{$this->GetSrc()}' ";
  71. $attributes=$this->GetAttributes();
  72.  
  73. return "<img $src $id $title $imgDimensions $cssClass $attributes />";
  74. }
  75.  
  76. }
  77.  
  78. ?>



- class.HtmlText.php
  1. <?php
  2. include("AutoLoad.inc");
  3.  
  4. /**
  5. * Class HtmlText
  6. *
  7. * Class responsável pela construção
  8. * de objectos html - SPAN, BR
  9. *
  10. * @author: Pedro Correia - pedrocorreia.net
  11. */
  12. class HtmlText extends HtmlObject{
  13. private $_text;
  14.  
  15. /**
  16. * Método construtor
  17. *
  18. * @param String $id
  19. * @param String $text
  20. * @param String $title
  21. * @param String $cssClass
  22. */
  23. function __construct($id,$text,$title="",$cssClass="") {
  24. parent::__construct($id,$title,$cssClass);
  25. $this->SetText($text);
  26. }
  27.  
  28. public function SetText($value){$this->_text=$value;}
  29.  
  30. public function GetText(){return $this->_text;}
  31.  
  32. public function BuildLineBreak($count=1){
  33. for($i=0;$i<$count;$i++){
  34. $str.="<br />";
  35. }
  36.  
  37. return $str;
  38. }
  39.  
  40. public function ParseObject(){
  41. $title=$this->_GenerateTitle();
  42. $cssClass=$this->_GenerateCssClass();
  43. $id=$this->_GenerateID();
  44. $text=$this->GetText();
  45.  
  46. return "<span $title $id $cssClass>$text</span>";
  47. }
  48.  
  49. }
  50.  
  51. ?>



- class.HtmlUnorderedList.php
  1. <?php
  2.  
  3. /**
  4. * Class HtmlUnorderedList
  5. *
  6. * Class responsável pela construção
  7. * dos objectos html - UL, LI
  8. *
  9. * @author: Pedro Correia - pedrocorreia.net
  10. */
  11.  
  12. class HtmlUnorderedList{
  13. private $_list;
  14.  
  15. /**
  16. * Método construtor
  17. *
  18. */
  19. function __construct() {$this->_list=array();}
  20.  
  21. public function ListClear(){$this->SetList(null);}
  22.  
  23. public function ListAddItem($item) {$this->_list[]=$item;}
  24.  
  25. public function SetList($arr){$this->_list=$arr;}
  26.  
  27. public function GetList(){return $this->_list;}
  28.  
  29. public function ParseObject(){
  30. $lists=$this->GetList();
  31. foreach($lists as $list){
  32. $str.="<li>$list</li>\n";
  33. }
  34.  
  35. return "<ul>$str</ul>\n";
  36. }
  37.  
  38. }
  39.  
  40. ?>



- class.Html.php
  1. <?php
  2.  
  3. /**
  4. * Class Html
  5. *
  6. * Class responsável pela construção do Html
  7. *
  8. * @author: Pedro Correia - pedrocorreia.net
  9. */
  10. class Html {
  11. private $_charset;
  12. private $_arrCssFiles;
  13. private $_page_content;
  14. private $_page_title;
  15.  
  16. /**
  17. * Método Construtor
  18. *
  19. * @param String $title
  20. * @param String $content
  21. * @param String $cssFiles
  22. * @param String $charset
  23. */
  24. function __construct($title,$content,$cssFiles,$charset) {
  25. $this->_arrCssFiles=array();
  26. $this->_page_content=array();
  27. $this->SetTitle($title);
  28. $this->SetContent($content);
  29. $this->SetCssFiles($cssFiles);
  30. $this->SetCharset($charset);
  31. }
  32.  
  33. private function _GenerateCssFiles(){
  34. $cssFiles=$this->GetCssFiles();
  35. foreach($cssFiles as $file){
  36. $str.="<link rel='stylesheet' type='text/css' media='all' href='$file' />";
  37. }
  38. return $str;
  39. }
  40.  
  41. public function SetCssFiles($cssFiles){
  42. $this->_arrCssFiles=null;
  43. if(is_array($cssFiles)){$this->_arrCssFiles=$cssFiles;}
  44. else{$this->_arrCssFiles[]=$cssFiles;}
  45. }
  46.  
  47. public function AddCssFile($cssFile){$this->_arrCssFiles[]=$cssFile;}
  48.  
  49. public function GetCssFiles(){return $this->_arrCssFiles;}
  50.  
  51. public function SetTitle($value){$this->_page_title=$value;}
  52.  
  53. public function GetTitle(){return $this->_page_title;}
  54.  
  55. public function SetContent($value){
  56. $this->_page_content=null;
  57. if(is_array($value)){$this->_page_content=$value;}
  58. else{$this->_page_content[]=$value;}
  59. }
  60.  
  61. public function AddContent($value){$this->_page_content[]=$value;}
  62.  
  63. public function GetContent(){return $this->_page_content;}
  64.  
  65. public function SetCharset($value){$this->_charset=$value;}
  66.  
  67. public function GetCharset(){return $this->_charset;}
  68.  
  69. function Parse(){
  70. $css=$this->_GenerateCssFiles();
  71. $content=$this->GetContent();
  72. foreach($content as $value){
  73. $text.=$value;
  74. }
  75. $title="<title>{$this->GetTitle()}</title>";
  76. $charset="<meta http-equiv=\"Content-Type\" content=\"text/html; charset={$this->GetCharset()}\" />";
  77.  
  78. return "
  79. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"DTD/xhtml1-transitional.dtd\">
  80. <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"pt\">
  81. <head>
  82. $css
  83. $title
  84. $charset
  85. </head>
  86. <body>
  87. $text
  88. </body>
  89. </html>
  90. ";
  91. }
  92.  
  93. }
  94.  
  95. ?>



- class.Output.php
  1. <?php
  2.  
  3. /**
  4. * Class Output
  5. *
  6. * Class responsável pela envio da
  7. * informação para o browser
  8. *
  9. * @author: Pedro Correia - pedrocorreia.net
  10. */
  11. class Output {
  12. private $_output;
  13.  
  14. /**
  15. * Método construtor
  16. *
  17. */
  18. function __construct() {$this->_output=array();}
  19.  
  20. function AddElement($element){$this->_output[]=$element;}
  21.  
  22. function SetElements($elements){
  23. $this->_output=null;
  24. if(is_array($elements)){ $this->_output=$elements;}
  25. else{ $this->_output[]=$elements;}
  26. }
  27.  
  28. function Parse(){
  29. foreach($this->_output as $value){
  30. echo $value;
  31. }
  32. }
  33. }
  34.  
  35. ?>



- class.Xml.php
  1. <?php
  2. include("AutoLoad.inc");
  3.  
  4. /**
  5. * Class Xml
  6. *
  7. * Class responsável pelo loading do ficheiro XML
  8. *
  9. * @author: Pedro Correia - pedrocorreia.net
  10. */
  11.  
  12. class Xml {
  13. private $_file;
  14.  
  15. /**
  16. * Método Construtor
  17. *
  18. * @param String $file
  19. */
  20. function Xml($file){$this->SetFile($file);}
  21.  
  22. /**
  23. * Converter para um array o conteúdo do ficheiro XML
  24. *
  25. * @return Array
  26. */
  27. public function XmlToArray(){return simplexml_load_file($this->GetFile());}
  28.  
  29. public function GetFile(){return $this->_file;}
  30.  
  31. public function SetFile($value){
  32. if(!file_exists($value)){throw new Exception("XMLFileNotFound");}
  33. $this->_file=$value;
  34. }
  35. }
  36.  
  37. ?>








- class.VistaToolbar.php
  1. <?php
  2. include("AutoLoad.inc");
  3.  
  4. /**
  5. * Class VistaToolbar
  6. *
  7. * Class responsável pela construção da VistaToolbar
  8. *
  9. * @author: Pedro Correia - pedrocorreia.net
  10. */
  11. class VistaToolbar {
  12. private $_xml_file;
  13.  
  14. /**
  15. * Método construtor
  16. *
  17. * @param String $xml_file
  18. */
  19. function __construct($xml_file) {$this->SetXmlFile($xml_file);}
  20.  
  21. function SetXmlFile($xml_file){$this->_xml_file=$xml_file;}
  22.  
  23. function GetXmlFile(){return $this->_xml_file;}
  24.  
  25. function ParseObject(){
  26. $xml=new Xml($this->GetXmlFile());
  27. $xml_itens=$xml->XmlToArray();
  28. $ul=new HtmlUnorderedList();
  29.  
  30. foreach($xml_itens->toolbar as $itens) {
  31. $count=sizeof($itens);
  32. for ($i=0;$i<$count;$i++){
  33. $item=$itens->item[$i];
  34.  
  35. $title=$item["title"];
  36. $link=$item["link"];
  37. $description=$item["description"];
  38. $attributes=$item["attributes"];
  39. $cssClass=$item["cssClass"];
  40.  
  41. $img=$item->img;
  42. $img_src=$img["src"];
  43. if($img_src){
  44. $img_w=$img["w"];
  45. $img_h=$img["h"];
  46. $img_attributes=$img["attributes"];
  47. $img_cssClass=$img["cssClass"];
  48.  
  49. $imagem=new HtmlImage("img_$i",$img_src,$img_w,$img_h,$title,$img_cssClass,$img_attributes);
  50. $description=$imagem->ParseObject(). " ".$description;
  51. }
  52.  
  53. $span=new HtmlText("span_$i",$description,$title);
  54. $href=new HtmlHref("href_$i",$link,$span->ParseObject(),$title,$cssClass,$attributes);
  55.  
  56. $ul->ListAddItem($href->ParseObject());
  57. }
  58. }
  59.  
  60. $div=new HtmlDiv($xml_itens->toolbar["id"],$ul->ParseObject());
  61.  
  62. return $div->ParseObject();
  63. }
  64. }
  65. ?>





Por fim, resta demonstrar que vamos ter uma toolbar sem usar uma única linha de Html:

- index.php
  1. <?php
  2. include("Classes/AutoLoad.inc");
  3.  
  4. $toolbar = new VistaToolbar("xml/vista_toolbar.xml");
  5. $html=new Html("My Vista Toolbar",$toolbar->ParseObject(),"css/vista_toolbar.css","iso-8859-1");
  6.  
  7. $span=new HtmlText("my_span","Isto é a minha toolbar vista-style","My Vista Toolbar","orange bold");
  8. $html->AddContent($span->BuildLineBreak(4));
  9. $html->AddContent($span->ParseObject());
  10.  
  11. $output = new Output();
  12. $output->AddElement($html->Parse());
  13. $output->Parse();
  14. ?>




Vai gerar o seguinte código html:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
  3. <head>
  4. <link rel="stylesheet" type="text/css" media="all" href="css/vista_toolbar.css" />
  5. <title>My Vista Toolbar</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. </head>
  8. <body>
  9.  
  10. <div id="vista_toolbar">
  11. <ul>
  12.  
  13. <li>
  14. <a href="index.php" alt="goto myHome" title="goto myHome" name="href_0" id="href_0" class="bold orange" >
  15. <span alt="goto myHome" title="goto myHome" name="span_0" id="span_0">
  16. <img src="images/my_home.png" name="img_0" id="img_0" alt="goto myHome" title="goto myHome" width="16" height="16" align="left" /> myHome
  17. </span>
  18. </a>
  19. </li>
  20.  
  21. <li>
  22. <a href="mysnippets.php" alt="goto mySnippets" title="goto mySnippets" name="href_1" id="href_1" >
  23. <span alt="goto mySnippets" title="goto mySnippets" name="span_1" id="span_1" >
  24. <img src="images/my_snippets.png" name="img_1" id="img_1" alt="goto mySnippets" title="goto mySnippets" width="16" height="16" align="left" /> mySnippets
  25. </span>
  26. </a>
  27. </li>
  28.  
  29. <li>
  30. <a href="http://edoshogun.blogspot.com" alt="goto myBlog" title="goto myBlog" name="href_2" id="href_2" target="_blank">
  31. <span alt="goto myBlog" title="goto myBlog" name="span_2" id="span_2">
  32. <img src="images/my_blog.png" name="img_2" id="img_2" alt="goto myBlog" title="goto myBlog" width="16" height="16" align="left" /> myBlog
  33. </span>
  34. </a>
  35. </li>
  36.  
  37. </ul>
  38.  
  39. </div>
  40.  
  41. <br /><br /><br /><br />
  42.  
  43. <span alt="My Vista Toolbar" title="My Vista Toolbar" name="my_span" id="my_span" class="orange bold" >
  44. Isto é a minha toolbar vista-style
  45. </span>
  46.  
  47. </body>
  48. </html>




E será este o aspecto da nossa página:




Podiamos continuar a construir a nossa página sem ter de recorrer a instruções html, porém convinha que a nossa framework continuasse a crescer e fossem implementados mais métodos, por exemplo o include de ficheiros javascript, inline css e javascript, tabelas, parágrafos, etc, etc, etc, etc ...


Qualquer erro/ dúvida é só dizer.









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