martes, 31 de enero de 2017

“FusionCharts Component” en Pentaho 6.1

Hoy les traigo un pequeño truco o detalle para usar temas usando el componente FusionCharts Component. Hay veces que cuando trabajamos con el plugin fusion chart y no contamos con una licencia, solo podemos usar los gráficos de “FusionCharts Component”. Inicialmente el mismo no cuenta con una entrada para definir un tema, el se aplica al tema que trae por defecto el fusion chart, pero esto puede cambiar, solo siga las instrucciones que aquí le muestro.

Suponiendo que tengamos en nuestro servidor de pentaho el plugin fusion chart instalado. Lo primero que haremos es ubicarnos en la siguiente dirección:

pentaho-solutions/system/fusion_plugin/resources/components/FusionCharts, dentro aparece un xml con el nombre de component.xml, lo abrimos y buscamos la entrada: <Name>FusionCharts Component</Name>, luego de abrir el fichero siga lo siguientes pasos:

Definir las propiedades para el tema

1. Buscar <Definition name="chartDefinition">

2. Agregar esta línea en el mismo nivel de las otras propiedades que tiene la definición antes mencionada: <Property name="theme" type="string">theme</Property>

3. Buscar <Definition name="chartProperties">

4. Agregar esta línea a continuación de la última propiedad que trae la definición antes mencionada: <Property>theme</Property>

Implementación de la propiedad del tema

1. Localice las siguientes entradas, <Implementation> - <CustomProperties>, ahora teclee o copie en el mismo nivel que aparecen los otros diseños de las propiedades, puede ser al final antes de cerrar la etiqueta <CustomProperties> o al inicio. El código es el siguiente:

<Name>theme</Name>

<OutputName>theme</OutputName>

<Parent>BaseProperty</Parent>

<Description>Chart Theme</Description>

<Tooltip>Theme Name</Tooltip>

<InputType>String</InputType>

<OutputType>String</OutputType>

</Header>

</DesignerProperty>

Espero que con este artículo ya puedas usar los temas para los gráficos que trae el componente FusionCharts Component.

{ Leer Más }

lunes, 23 de enero de 2017

Usando la clase Parser en CodeIgniter

En este artículo les voy a poner un ejemplo de cómo usar la clase Parser en un archivo de vista.

La Clase Parser le permite analizar seudo-variables contenidas dentro de los archivos de vistas. Puede analizar variables simples o pares de etiquetas variables. Si nunca has usado un motor de plantillas, las seudo-variables se ven así:

<html>

<head>

<title>{titulo}</title>

</head>

<body>

<h3>{encabezado}</h3>

[Contenido de la pagina…]

</body>

</html>

Estas variables no son realmente variables de PHP, sino representaciones en texto plano que le permiten eliminar el PHP de sus plantillas (archivos de vistas).

Nota: CodeIgniter no le obliga a usar esta clase ya que usando PHP puro en sus páginas de vista les permite correr un poco más rápido. Sin embargo, algunos desarrolladores prefieren usar un motor de plantillas si trabajan con diseñadores quienes sienten alguna confusión al trabajar con PHP.

Lo primero que tenemos que hacer es inicializar la clase Parser, como la mayoría de las clases en CodeIgniter, la clase Parser se inicializa en su controlador usando la función

$this->load->library('parser');

Una vez cargada, el objeto de la bibioteca Parser estará disponible usando: $this->parser.

Este método acepta un nombre de plantilla y un array de datos como entrada y genera la versión analizada.

Ejemplo:

$this->load->library('parser');

$data = array(

'title' => 'El Titulo de la vista',

'encabezado' => 'El Encabezado de la vista'

);

$this->parser->parse('nombre_de_la_vista', $data);

El primer parámetro contiene el nombre del archivo de vista (en este ejemplo el archivo se llamaría nombre_de_la_vista.php), y el segundo parámetro contiene un array asociativo de datos a reemplazarse en la plantilla. En el ejemplo anterior, la plantilla contendría dos variables: {titulo} y {encabezado}.

Existen otras formas de utilizar la clase parser. Un ejemplo de esto es la función parse_string():

$this->parser->parse_string();

Este método trabaja exactamente igual que parse(), solo que acepta una cadena como primer parámetro en lugar de un archivo de vista.

Ejemplo:

$hrml = '<html>

<head>

<title>{titulo}</title>

</head>

<body>

<h3>{encabezado}</h3>

[Contenido de la pagina…]

</body>

</html>';

$this->parser->parse_string($html, $data);

Bueno, esto es una breve experiencia de mi experiencia usando la clase Parser, espero haya podido ser de ayuda.

{ Leer Más }

lunes, 16 de enero de 2017

Agregarle scroll horizontal al select para ver el contenido que sobrepasa su tamaño.

En este artículo veremos cómo arreglar un problema de visualización del select cuando a este se le define un ancho y el contenido de las opciones sobrepasa ese tamaño, para esto tomaremos como punto de partida el siguiente ejemplo:

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        select#selected_name{
            width: 300px;
            height: 200px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <select id="selected_name" name="selected_name" size="13">
        <option value="1">Alberto Rodriguez Sarmiento [ Adminsitrador, Jefe Proyecto, Arquitecto ]</option>
        <option value="2">Rosa Almodovar Zaldivar [ Diseñador, Revisor ]</option>
        <option value="3">Rafael Rodriguez [ Encargado de Pruebas, Jefe de Ventas ]</option>
        <option value="4">Ana de la Caridad Ramos [ Diseñador, Programador ]</option>
    </select>
</body>
</html>

Si copian el código, lo guardan en un fichero con extensión html y lo abren su forma de visualizarse cambiara dependiendo del navegador con el que lo hagan, por ejemplo Internet Explorer 11 y Edge lo mostraría de la siguiente manera:

Estos dos no dan la posibilidad de ver el contenido que sobrepasa el tamaño del select.

Por otro lado, estarían Chrome y Opera mostrándolo de la siguiente manera:

Como ven estos navegadores incluyen el scroll tanto horizontal como vertical aun sin hacer falta el vertical, en estos todo bien hasta que se trata de ver el contenido oculto de las opciones con una de ellas seleccionada, se comporta como se muestra en la imagen:

Como se muestra en la imagen con la tercera opción seleccionada se le da al scroll horizontal se obvia el contenido que queda oculto faltando mostrar en el ejemplo las palabras “de Ventas]”.

Además de los antes mencionados esta Mozilla Firefox comportándose de otra manera:

En la imagen se observa el scroll vertical y el contenido que sobrepasa el tamaño del componente que no es posible visualizarlo.

Todos estos problemas se resuelven de la siguiente forma:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .select_container{
            width: 300px;
            height: 200px;
            overflow: scroll;
            border: 1px solid #000000;
        }

.select_container table td{
overflow: hidden;

        }
        select#selected_name{
            width: auto;
            height: 200px;
            border: none;
            outline: none;
            margin-right: -20px;
            -webkit-margin-end: 0;
            margin-bottom: -3px;
            padding-right: -20px;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div class="select_container">
    <table>
        <tbody>
        <tr>
            <td>
                    <select id="selected_name" name="selected_name" size="13">
                        <option value="1">Alberto Rodriguez Sarmiento [ Adminsitrador, Jefe Proyecto, Arquitecto ]</option>
                        <option value="2">Rosa Almodovar Zaldivar [ Diseñador, Revisor ]</option>
                        <option value="3">Rafael Rodriguez [ Encargado de Pruebas, Jefe de Ventas ]</option>
                        <option value="4">Ana de la Caridad Ramos [ Diseñador, Programador ]</option>
                    </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

Si se hace lo mismo que con el código anterior veremos que este se comporta visualizándose como evidencia la siguiente imagen en todos los navegadores mencionados:

Y al dar scroll con un elemento seleccionado no se deja de mostrar el contenido que queda después del tamaño del elemento padre:

Paso a explicar brevemente de qué forma se le dio solución, el elemento select sigue teniendo el mismo alto pero en el ancho lo ponemos automático para que los elementos option(sus hijos en el DOM) sean los que definan el tamaño de este según su contenido, le declaramos un margen negativo a la derecha para ocultar el scroll vertical que se muestra de manera predeterminada siempre, un border y outline none para que no se muestren ya que los vamos a definir en otro elemento, y la clave de todo está en el elemento que contiene al select, este tiene que ser un td con la estructura de tabla que lleva, es decir tabla > tr > td el tbody puede obviarse este elemento respetara los márgenes definido en el select y ocupara 20 pixeles más a la derecha del td y para ocultar el contenido restante se declara un overflow: hidden ha dicho td de esta forma queda oculto el scroll pero con esto el componente no tiene el ancho que necesitamos que es 300x200 px, para lograr esto agregamos un div como padre de la tabla en este caso el que tiene como clase select_container y a este es al que le definimos mediante css el ancho y alto deseado, un borde para que este luzca como los propios del compoenente select que ocultamos y la propiedad overflow para ver el contenido más allá del tamaño sin tener ningún otro problema de visualización en ninguno de los navegadores antes mencionados.

Espero les haya servido de ayuda.

{ Leer Más }

lunes, 9 de enero de 2017

Envío de correos usando phpmailer

Hace un tiempo, en el artículo “Envío de correos sobre CodeIgniter” comentaba el uso de la clase email de CodeIgniter para el envío de correos. En un proyecto reciente, por determinadas razones, tuve que trabajar en un sitio web que no estaba montado sobre CodeIgniter y se requería el envío de correos. Al no contar con la biblioteca email de CodeIgniter que acostumbraba a utilizar tuve que buscar variantes para el envío de correos usando PHP directamente sin ningún framework intermediario.

Así encontré que para el envío de correos usando PHP directamente, se puede utilizar la función mail(), o mejor aún la clase phpmailer. Esta última, en comparación con la función mail(), permite en uso de SMTP, enviar correos con ficheros adjuntos, y enviar mensajes en formato HTML desde nuestro sitio web sin necesidad de tener nuestro propio servidor de correos corriendo en la máquina.

Con phpmailer se pueden enviar correos a través de sendmail, PHP mail(), o con smtp. Se recomienda hacerlo vía smtp porque se pueden usar varios servidores SMTP y de esta forma repartir la carga entre varias computadoras, enviándose más mensajes en menor tiempo; además los servidores SMTP permiten mensajes con múltiples destinatarios (to's) y los conocidos cc's (copia del correo), bcc's (copias ocultas) y reply-to (direcciones de respuesta).

Su uso es muy sencillo, en mi caso creé una clase mail_manager que actúa como interfaz con la clase phpmailer, y en el fichero de mi clase tuve que incluir:

require("PHPMailer-5.2.16/class.phpmailer.php");

require("PHPMailer-5.2.16/class.smtp.php");

En esta clase incluí dos funciones, una llamada “get_html_body” que recibe como parámetro el mensaje y elabora internamente un correo con imágenes, el logo y firma de la empresa, etc en formato HTML y retorna un string HTML; y la función “send_mail” que recibe como parámetro el destinatario (to) y nombre del destinatario (to_name), así como el asunto y contenido del correo. El contenido de “send_mail” sería así:

$mail = new PHPMailer();

$mail->Mailer = 'smtp';

$mail->SMTPAuth = true;

$mail->Host = 'smtp.office365.com'; //por ejemplo

$mail->Username = 'director@enterprise.etc'; //ejemplo ficticio

$mail->Password = 'the_pass';

$mail->Port = 995; //por ejemplo

//correo desde donde se envía (para mostrar)

$mail->From = 'director@enterprise.etc';

$mail->FromName = 'Nombre de la empresa';

//correo al que se envía, pasados por parámetro

$mail->AddAddress($to, $to_name);

$mail->IsHTML(true); //el correo se envía como HTML

$mail->Subject = $subject;

$mail->Body = $message;

$result = $mail->Send();

return $result;

Así de sencillo. El uso desde cualquier otro fichero .php sería llamar primero la función “get_html_body” y luego “send_mail”.

Se pueden configurar muchos parámetros más como:

$mail->SMTPDebug = 2; //permite modo debug para ver mensajes de las cosas que van ocurriendo

$mail>SMTPSecure = "ssl"; //en este caso el host sería ssl://smtp… y hay que habilitar en nuestro servidor la extensión openssl

$mail->AddCC("cuenta@dominio.com"); //copia

$mail->AddBCC("cuenta@dominio.com"); //copia oculta

$mail->AddAttachment("imagenes/imagen.jpg", "imagen.jpg"); //atachados

$mail>AddReplyTo('director@enterprise.etc', 'Nombre de la empresa');

$mail->AltBody = "Texto plano sin html"; // Texto sin html

Pues nada, es una biblioteca que recomiendo por su enorme flexibilidad de configuraciones y de un uso comprobado por muchos programadores web.

{ Leer Más }

martes, 31 de enero de 2017

“FusionCharts Component” en Pentaho 6.1

lunes, 23 de enero de 2017

Usando la clase Parser en CodeIgniter

lunes, 16 de enero de 2017

Agregarle scroll horizontal al select para ver el contenido que sobrepasa su tamaño.

lunes, 9 de enero de 2017

Envío de correos usando phpmailer

Entradas Populares

Enlaces