› ›

Flash:: revisado

phillipophillipo
edited agosto 2007 in Nueva Funcionalidad y Sugerenc
Bueno, he hecho algunos cambios en el sistema de mostreo de mensajes de Kumbia.

El principal motivo es que creo que no hace falta colocar una tabla dentro de la division ya que recarga el codigo y no lo deja todo claro. Además, mediante css se puede simplificar pasos si uno quiere variar los iconos de los mensajes.

HOJA DE ESTILOS
/* Formatea los mensajes de Kumbia */
#kumbiaDisplay {
	width: 95%;
	font-style: italic;
	font-weight: bold;
	margin: 0 auto;
	padding: 2px 25px;
}

#kumbiaDisplay.error_message {
	background: url(../img/error.gif) no-repeat 5px center;
}

#kumbiaDisplay.notice_message {
	background: url(../img/notice.gif) no-repeat 5px center;
}

#kumbiaDisplay.sucess_message {
	background: url(../img/ok.gif) no-repeat 5px center;
}

#kumbiaDisplay.warning_message {
	background: url(../img/warning.gif) no-repeat 5px center;
}

main.php

Aqui he modificado el mensaje por:
print '<div id="kumbiaDisplay" class="<tipo>">'.$msg.'</div>'."\n";

<?php

class Flash {

	/**
	 * Visualiza un mensaje de error
	 *
	 * @param string $err
	 */
	public static function error($err, $include_style=false){
		if(isset($_SERVER['SERVER_SOFTWARE'])){
			if($include_style){
				stylesheet_link_tag('style');
			}
    		print '<div id="kumbiaDisplay" class="error_message">'.$err.'</div>'."\n";
	    } else {
			print strip_tags($err)."\n";
		}
	}

	/**
	 * Visualiza una alerta de Error JavaScript
	 *
	 * @param string $err
	 */
	public static function jerror($err){
        formsPrint("\r\nalert(\"$err\")\r\n");
	}

	/**
	 * Visualiza información en pantalla
	 *
	 * @param string $msg
	 */
	public static function notice($msg){
		if(isset($_SERVER['SERVER_SOFTWARE'])){
    		print '<div id="kumbiaDisplay" class="notice_message">'.$msg.'</div>'."\n";
		} else {
			print strip_tags($msg)."\n";
		}
	}

	/**
	 * Visualiza información de Suceso en pantalla
	 *
	 * @param string $msg
	 */
	public static function success($msg){
		if(isset($_SERVER['SERVER_SOFTWARE'])){
    		print '<div id="kumbiaDisplay" class="sucess_message">'.$msg.'</div>'."\n";
		} else {
			print strip_tags($msg)."\n";
		}
	}

	/**
	 * Visualiza un mensaje de advertencia en pantalla
	 *
	 * @param string $msg
	 */
	public static function warning($msg){
		if(isset($_SERVER['SERVER_SOFTWARE'])){
    		print '<div id="kumbiaDisplay" class="warning_message">'.$msg.'</div>'."\n";
		} else {
			print strip_tags($msg)."\n";
		}
	}

	public static function interactive($msg){
		if(isset($_SERVER['SERVER_SOFTWARE'])){
   		print '<div id="kumbiaDisplay" class="interactive_message">'.$msg.'</div>'."\n";
		} else {
			print strip_tags($msg)."\n";
		}
	}

	public static function kumbia_error($what){
		self::error('<u>KumbiaError:</u> '.$what);
	}
}

class kumbiaException extends Exception {

	public $message;
	public $extended_message;

	/**
	 * Constructor de la clase;
	 *
	 */
	public function __construct($message, $extended_message=''){
		$this->message = $message;
		$this->extended_message = $extended_message;
		parent::__construct($message);
	}

	public function show_message(){
		Flash::error("
		<span style='font-size:24px'>KumbiaException: $this->message</span><br/>
		<div>$this->extended_message<br>
		<span style='font-size:12px'>En el archivo <i>{$this->getFile()}</i> en la línea: <i>{$this->getLine()}</i></span></div>", true);
		print "<pre style='border:1px solid #969696; background: #FFFFE8'>";
		print $this->getTraceAsString()."\n";
		print "</pre>";
	}

}


?>

Comentarios

  • anthemfor182anthemfor182
    edited 4:47
    Que bueno, has subido ya estas modificaciones al SVN?

    Saludos
  • phillipophillipo
    edited 4:47
    No lo he hecho aún, más que nada porque esperaba la aprobación de esta sugerencia.
  • anthemfor182anthemfor182
    edited 4:47
    Si me parece que deberia ser asi, subelo <!-- s:D --><img src="{SMILIES_PATH}/icon_biggrin.gif" alt=":D" title="Very Happy" /><!-- s:D -->
  • phillipophillipo
    edited 4:47
    Subido, tanto el style.css como el main.php. Espero haberlo hecho bien.
  • anthemfor182anthemfor182
    edited 4:47
    Existen algunos problemas con la implementación que has hecho:

    Al colocar las imagenes como una imagen de fondo tenemos problemas con los paths ya que si lo haces de forma relativa como lo estas haciendo es muy probable que se pierdan cuando la URL cambie.

    Puedes leer el apartado que se refiere a KUMBIA_PATH en el Kumbia Paper para darte cuenta de este problema.

    Digamos si estas en <!-- m --><a class="postlink" href="http://www.local.com/demo/clientes/consulta/1">http://www.local.com/demo/clientes/consulta/1</a><!-- m -->

    y aparece un mensaje de error entonces la linea: 
    background-image&#58; url&#40;&#46;&#46;/img/error&#46;gif&#41; no-repeat 5px center;

    buscará la imagen en algun directorio en consulta osea en <!-- m --><a class="postlink" href="http://www.local.com/demo/clientes/consulta/img">http://www.local.com/demo/clientes/consulta/img</a><!-- m -->

    este problema antes no existia ya que los path a las imagenes se les anteponia el KUMBIA_PATH."/img/error.gif", aunque en un CSS probablemente no se puedan tener los valores variables de esto.

    te dejo la inquietud

    Saludos
  • emilio.rstemilio.rst
    edited 4:47
    "anthemfor182&quot wrote:
    Existen algunos problemas con la implementación que has hecho:

    Al colocar las imagenes como una imagen de fondo tenemos problemas con los paths ya que si lo haces de forma relativa como lo estas haciendo es muy probable que se pierdan cuando la URL cambie.

    Puedes leer el apartado que se refiere a KUMBIA_PATH en el Kumbia Paper para darte cuenta de este problema.

    Digamos si estas en <!-- m --><a class="postlink" href="http://www.local.com/demo/clientes/consulta/1">http://www.local.com/demo/clientes/consulta/1</a><!-- m -->
    ...

    Esto no deberia ocasionar problemas ya que en las hojas de estilo, las rutas de archivos indicadas en ellas, son consideradas apartir de la ubicacion del .css que contiene las rutas.

    De manera mas simple, el "/" es la ubicacion del archivo style.css para nuestro caso

    Recuerdo que cuando me tope con esta situación me sorprendio.

    Saludos. <!-- s:D --><img src="{SMILIES_PATH}/icon_biggrin.gif" alt=":D" title="Very Happy" /><!-- s:D -->
  • phillipophillipo
    edited 4:47
    Una solucion a dicho problema, son las rutas absolutas, gran parte de sistemas CMS las usan para evitar tener problemas al estar a diferentes profundidades.

    A pesar de ello, tengo que matizar que las profundidades son del mod_rewrite, pero no del html en sí, por tanto deberia encontrarlas tanto y mientras esten en un mismo sitio.
  • anthemfor182anthemfor182
    edited 4:47
    El problema de utilizar los path absolutos es que tienes que agregar manualmente la ubicacion de tu proyecto, hay que diseñar alguna forma de incluir variables dentro del CSS y que sean reemplazadas en tiempo de ejecución por los valores de estas.

    Hacer algo como esto:

    #kumbiaDisplay.error_message {
    background: url(@project_path/img/error.gif) no-repeat 5px center;
    }

    y luego en la tag stylesheet_link_tag abrir el archivo y reemplazar la ocurrencia de @project_path por la de KUMBIA_PATH

    bueno, el nombre de la variable lo podriamos debatir, incluso pensar en otras variables utiles.
  • phillipophillipo
    edited 4:47
    Yo me referia directamente en el tag de link, no en el css. El css puede ser cargador como un fichero.css.php
  • emilio.rstemilio.rst
    edited 4:47
    muchachos, esto no es necesario, como ya les comente, esto no ocasiona inconvenientes, ya que la ruta relativa dentro del css, es considerada desde la ubicacion del mismo.

    Ahora si lo que quieren es que esa rutas no se vean tan horribles, lo que se puede hacer es en el directorio donde estan los css, se crea una carpeta llamada "img" la cual contenga las imagenes a ser utilizadas por el .css y las rutas quedarian asi:
    #kumbiaDisplay&#46;error_message &#123;
   background&#58; url&#40;'img/error&#46;gif'&#41; no-repeat 5px center;
&#125;

    Esta solucion la utilice en un proyecto que realice con kumbia.

    Sin embargo la implementación tal y como esta funciona correctamente.

    Saludos.
  • anthemfor182anthemfor182
    edited 4:47
    He agregado al helper stylesheet_link_tag un parametro adicional use_variables que cuando es true reemplaza las variables @path, @img_path y @css_path con el correspondiente real del proyecto.

    Pueden ver la nueva implementación en public/css/style.css donde hago el uso de esto y como funciona bien para cualquier caso.

    Saludos
  • emilio.rstemilio.rst
    edited 4:47
    Me parece bien, tener a la dispocion estas rutas en los css, pero insisto, para los css no hay inconvenientes con las rutas relativas, por los motivos antes expuestos.

    Saludos.
  • anthemfor182anthemfor182
    edited 4:47
    Claro que hay inconvenientes, cuando en tu url aparece

    <!-- m --><a class="postlink" href="http://localhost/demo/clientes/query">http://localhost/demo/clientes/query</a><!-- m -->

    y agregas un css que dice

    .clase_alguna
  • emilio.rstemilio.rst
    edited 4:47
    Muy raro, tengo una aplicacion funcionando tal como te habia comentado utilizando una ruta relativa para las imagenes desde los css y no he tenido problemas.

    Este seria uno de los estilos para tablas:
    table&#46;acceso
&#123;
	border-collapse&#58; collapse;
	background-image&#58; url&#40;'img/acceso&#46;png'&#41;;
	font-family&#58; &quot;Arial&quot; , sans;
	font-size&#58; 14px ;	
	color&#58; black;
	width&#58; 550px;
	height&#58; 342px;
&#125;

    y la imagen acceso.png ubicada en: ./public/css/img

    Este lo tengo funcionando en kumbia 0.45

    Tambien, buscando consegui este articulo donde hablan acerca de eso:
    <!-- m --><a class="postlink" href="http://haacked.com/archive/2006/01/12/CSSURLReferencesAndURLRewriting.aspx">http://haacked.com/archive/2006/01/12/C ... iting.aspx</a><!-- m -->

    Y lo comentan en la CSS Specification:
    <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/syndata.html#uri">http://www.w3.org/TR/REC-CSS2/syndata.html#uri</a><!-- m -->

    Bueno, por supuesto utilizar una ruta absoluta es mas seguro. <!-- s:wink: --><img src="{SMILIES_PATH}/icon_wink.gif" alt=":wink:" title="Wink" /><!-- s:wink: -->

    Disculpa la molestia que estoy causando con esto, ya parece un flame <!-- s:roll: --><img src="{SMILIES_PATH}/icon_rolleyes.gif" alt=":roll:" title="Rolling Eyes" /><!-- s:roll: -->

    Saludos.
Sign In or Register to comment.