lunes, octubre 11, 2010

Control de Usuario "Contador de filas de DataGridView" en C#

Hace poco me encontré con el problema de tener un proyecto en c# de ventanas con muchos datagridview al que había que ponerle a cada gridview un contador de filas. La primera opción era poner en cada pantalla un label y programar el evento DataBindingComplete para que se muestre en pantalla. El engorro era que había que tocar muchas pantallas y tocar el código de todas así que me plantee hacer un control de usuario que pudiera insertar en cada página, que tuviera una propiedad en la que le indicará el control gridview y me sirviera para todas las pantallas. Así que, ¡manos a la obra!

Podéis descargar el código de este control aquí.

El código
El quid del control es definir una propiedad pública en la que podamos definir el gridview y enlazar el evento DataBindingComplete.


La parte de diseño del control es la siguiente:

Insertar el control en el Formulario
Una vez creado el control lo insertaremos en el formulario, en la ubicación que queramos y especificaremos la propiedad GRIDVIEW para que el control obtenga el número de filas.





Podemos incluir tantos controles como queramos. En el momento en que se realice el evento databindingcomplete, el control actualizará el número de filas:


Conclusión
Este es un control muy sencillo pero que arregla una situación en la que habría que haber cambiado mucho código. Además, la utilización de controles de usuario permite un código sostenible y mejorable. En cualquier momento podemos asignarle más funcionalidades o cambiarle el aspecto y se aplicará a todas las pantallas sin tener que cambiar nada.

Como siempre, espero que os haya gustado y os sirva de utilidad.








martes, octubre 05, 2010

Plugin "Insertar HTML" para FCKEditor

Hace ya bastante tiempo que utilizo el editor WYSIWYG FCKEditor y de siempre me ha parecido una herramienta excepcional. En este artículo voy a desarrollar un plugin que utilizo y que me ha venido muy bien para muchos proyectos. Este plugin es muy simple, un botón para que el usuario pueda pegar un HTML y que se inserte donde tenga puesto el cursor. La razón es que para usuarios no acostumbrados a HTML, explicarles que para, p.e. enlazar con un mapa de google, tienen que pulsar sobre el botón Fuente HTML y localizar la ubicación en el código HTML y pegar allí el código de Google Maps es, en muchos casos, imposible.

Puedes descargar los códigos de este post aquí.

1. El Objetivo
El objetivo es conseguir lo siguiente, un botón en el editor que al pulsarse muestre la ventana de insertar HTML:




2. Ficheros necesarios
Lo primero es conocer la estructura para crear un plugin para FCKEditor. En realidad es muy simple, necesitaremos crear una carpeta en el directorio /editor/plugins (en este caso insertarHtml es el nombre de la carpeta) del FCKEditor que contenga los siguientes ficheros:
  1. fckplugin.js: fichero javascript en el que se definen las propiedades del plugin: formato de la ventana a mostrar, icono, nombre del plugin, ...
  2. insertarHtml.png: imagen para el icono del botón en el FCKEditor.
  3. insertarHtml.php: página que se muestra al pulsar el botón. En este caso es PHP pero puede ser perfectamente HTML o ASPX o lo que se quiera.
Finalmente, necesitamos dar de alta el plugin en el fichero fckconfig.js que está en el directorio raiz del FCKEditor. Vamos a ir viendo paso a paso cada uno de los ficheros.

3. fckplugin.js
En este fichero se configuran los datos generales del plugin. Lo primero es registrar el comando:

FCKCommands.RegisterCommand( 'Insertar_Html', new FCKDialogCommand( 'Insertar código HTML', 'Insertar código HTML', FCKConfig.PluginsPath + 'insertarHtml/insertarHtml.php', 400, 400 ) ) ;

Indicamos qué página se abre en la nueva ventana, el tamaño de la ventana, el nombre que aparece en la ventana, etc. Lo siguiente es crear el botón:

var oHTMLItem        = new FCKToolbarButton( 'Insertar_Html', 'Insertar código HTML en la posición del cursor' ) ;
oHTMLItem.IconPath    = FCKConfig.PluginsPath + 'insertarHtml/insertarHtml.png' ;


y finalmente, registramos el elemento:

FCKToolbarItems.RegisterItem( 'Insertar_Html', oHTMLItem ) ;

4. insertarHtml.php
En el fichero insertarHtml.php es donde se genera la acción. Es la pantalla que se llama cuando el usuario pulsa sobre el botón. La página tiene una parte de presentación HTML y otra de código PHP. La primera parte es:


Es importante la parte inicial de javascript que es la que coge la referencia al FCKEditor que ha llamado a esta ventana. La parte de código es la que se ejecuta cuando se pulsa sobre el botón btnInsertar:


Lo que hacemos es generar el código javascript que inserta el código HTML en la posición del cursor y lo pasamos a la variable codigoJavascript, de la que se hace un echo en la parte HTML. Seguidamente, cerramos la ventana y volvemos a la pantalla del FCEditor.

5. fckconfig.js
Lo último es dar de alta el botón en la toolbar de nuestro FCKEditor y utilizarlo. Para ello tenemos que modificar el fichero fckconfig.js que se encuentra en el directorio raiz del FCKEditor. Lo primero que tenemos que hacer es añadir el plugin:

FCKConfig.Plugins.Add( 'insertarHtml' ) ;

y finalmente, incluir el comando en la toolbarset que estemos utilizando. Yo, p.e., he incluido el botón en la toolbarset default, al final:

FCKConfig.ToolbarSets["Default"] = [
    ['Source','DocProps','-','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    '/',
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','Rule','Smiley','SpecialChar'],
    '/',
    ['FontFormat','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','ShowBlocks','-','Insertar_Html']
];

6. Conclusión
Este plugin es muy sencillo pero muy útil para aquellos proyectos en los que el usuario del FCKEditor no tiene conocimientos de HTML pero quiere incluir código de otras webs como pueden ser VIMEO, YouTube, Google Maps, Facebook. Cada día es más normal enlazar HTML en nuestras páginas y este plugin nos facilita la tarea.

Ejemplo: copio la localización de mi pueblo en google maps en la pantalla del plugin:

Al pulsar sobre Insertar HTML, se inserta el código donde tengo colocado el cursor:



Espero que os haya gustado este artículo. En breve más...