Scour Design Programacion. Tutoriales de Control Web, Controles, Web, WebControls, Asp.Net, Visual C#, Flash, ActionScript, CSS, Photoshop, ImageReady, Tecnologia, Informatica...

\n"; } } } lecturas();

          


Control Web Galería de imágenes Asp.Net (Visual C#)

      

Autor: Carlos Carmona

Hace algún tiempo, tonteando y sin intención de hacer nada en concreto me puse a crear un Control Web para Visual Studio. Ahora, bastante tiempo después, vamos a ver como podemos crear un Web Control de forma sencilla (aunque no lo parezca), y ahorrarnos así mucho trabajo en nuestras aplicaciones asp.net.

Resultado

programacion asp.net

Esta galería de imágenes permite que el programador la personalice en colores, estilos CSS y maquetación, los textos que se muestran, si las imagenes se abren en la misma página o en una nueva, y por último la paginación, ya sea mostrar todas las imágenes en una página, o paginar eligiendo el número de imagenes por fila y página. Por otro lado, la maquetación que arroja es 100% CSS + Html. No puedo mostraros la aplicación en funcionamiento ya que el hosting es un Linux/Apache...

Creamos un nuevo Web Control Library, (en Visual C# para el caso), y vamos con el código:

En primer lugar, los espacios de nombres que usaremos son:

Código Asp.Net

  1. using System;
  2. using System.Web.UI;
  3. using System.Web.UI.WebControls;
  4. using System.ComponentModel;
  5. using System.Drawing;
  6. using System.IO;

Ahora especificamos el espacio de nombres (NameSpace) que tendrá nuestro WebControl para asp.net y la Clase del mismo:

Código Asp.Net

  1. namespace ScourDesign
  2. {
  3.  
  4. /// <summary>
  5. /// Para el correcto funcionamiento de esta galería, las miniaturas y
    las imágenes grandes deben tener el mismo nombre, estándo en carpetas distintas
    dentro del directorio de nuestra aplicación web Asp.Net
  6. /// </summary>
  7.  
  8. [DefaultProperty("RutaImagenesGrandes"), ToolboxData("<{0}:Galeria RutaImagenesGrandes=\"\"
    RutaMiniaturas=\"\" Titulo=\"\" TamTitulo=\"Uno\" BackColor=\"#FFFFFF\" Firma=\"\"
    numImagenesPorFila=\"4\" AnchoGaleria=\"760\" NumImagenesPorPagina=\"-1\" Paginacion=\"0\"
    DocumentoAspx=\"\" GenerarEstilos=\"true\" BackColorFirma=\"transparent\" Target=\"_blank\"
    runat=server></{0}:Galeria>"
    )]
  9. public class Galeria : System.Web.UI.WebControls.WebControl
  10. {

Como se ve, el espacio de nombres es ScourDesign y la clase Galeria, de modo que la forma de instanciar posteriormente la librería será ScourDesign.Galeria. Por otro lado, el ToolboxData especifica como se escribirá el código de la instancia de la clase en el html de Visual Studio, que será así:

Código Asp.Net

  1. <cc1:Galeria RutaImagenesGrandes="" RutaMiniaturas="" Titulo="" TamTitulo="Uno"
    BackColor="#FFFFFF" Firma="" numImagenesPorFila="4" AnchoGaleria="760" NumImagenesPorPagina="-1"
    Paginacion="0" DocumentoAspx="" GenerarEstilos="true" BackColorFirma="transparent" Target="_blank"
    runat=server>
    </cc1:Galeria>

Hemos especificado que el control es de tipo WebControl (System.Web.UI.WebControls.WebControl), de este modo, de forma automática tendrá todas las propiedades, eventos y métodos de dicho espacio de nombres (otra cosa será que nosotros los usemos o no, pero igual los tendrá)

A continuación pasamos a la declaración de propiedades y variables públicas y privadas.

Código Asp.Net

  1. private string rutaImagenesGrandes;
  2. private string rutaMiniaturas;
  3. public enum tTitulo:int
  4. {
  5. Uno = 1,
  6. Dos = 2,
  7. Tres = 3,
  8. Cuatro = 4,
  9. Cinco = 5,
  10. Seis = 6,
  11. }
  12. private tTitulo tamTitulo;
  13. private string titulo;
  14. private string firma;
  15. private int numImagenesPorFila;
  16. private int anchoGaleria;
  17. private int numImagenesPorPagina;
  18. private int paginacion;
  19. private string documentoAspx;
  20. private bool generarEstilos;
  21. private Color backColorFirma;
  22. private string target;
  23.  
  24. [Browsable(false)]
  25. public override string AccessKey
  26. {
  27. get { return ""; }
  28. set {}
  29. }
  30.  
  31. [Browsable(false)]
  32. public override Color BorderColor
  33. {
  34. get { return Color.White; }
  35. set {}
  36. }
  37.  
  38. [Browsable(false)]
  39. public override BorderStyle BorderStyle
  40. {
  41. get { return BorderStyle.Solid; }
  42. set {}
  43. }
  44.  
  45. [Browsable(false)]
  46. public override Unit BorderWidth
  47. {
  48. get { return Unit.Pixel(0); }
  49. set {}
  50. }
  51.  
  52. [Browsable(false)]
  53. public override string CssClass
  54. {
  55. get { return ""; }
  56. set {}
  57. }
  58.  
  59. [Bindable(true), Category("Appearance"), DefaultValue(""), Description("Ruta relativa hasta la
    carpeta que contiene las imágenes."
    )]
  60. public string RutaImagenesGrandes
  61. {
  62. get { return rutaImagenesGrandes; }
  63. set { rutaImagenesGrandes = value; }
  64. }
  65.  
  66. [Bindable(true), Category("Appearance"), DefaultValue(""), Description("Ruta relativa hasta la
    carpeta que contiene las miniaturas."
    )]
  67. public string RutaMiniaturas
  68. {
  69. get { return rutaMiniaturas; }
  70. set { rutaMiniaturas = value; }
  71. }
  72.  
  73. [Bindable(true), Category("Appearance"), DefaultValue("Uno"), Description("Tamaño del
    encabezado, de 1 (Mayor) a 6 (Menor)."
    )]
  74. public tTitulo TamTitulo
  75. {
  76. get { return tamTitulo; }
  77. set { tamTitulo = value; }
  78. }
  79.  
  80. [Bindable(true), Category("Appearance"), DefaultValue(""), Description("Título que
    aparecerá sobre la galería. Dejar vacio si no se desea que aparezca."
    )]
  81. public string Titulo
  82. {
  83. get { return titulo; }
  84. set { titulo = value; }
  85. }
  86.  
  87. [Bindable(true), Category("Appearance"), DefaultValue(""), Description("Firma que
    aparecerá al pié de la galería. Dejar vacio si no se desea que aparezca."
    )]
  88. public string Firma
  89. {
  90. get { return firma; }
  91. set { firma = value; }
  92. }
  93.  
  94. [Bindable(true), Category("Appearance"), DefaultValue(""), Description("Firma que
    aparecerá al pié de la galería. Dejar vacio si no se desea que aparezca."
    )]
  95. public int NumImagenesPorFila
  96. {
  97. get { return numImagenesPorFila; }
  98. set { numImagenesPorFila = value; }
  99. }
  100.  
  101. [Bindable(true), Category("Appearance"), DefaultValue(""), Description("Ancho en Pixels de la
    galería."
    )]
  102. public int AnchoGaleria
  103. {
  104. get { return anchoGaleria; }
  105. set { anchoGaleria = value; }
  106. }
  107.  
  108. [Bindable(true), Category("Appearance"), DefaultValue(-1), Description("Numero de
    imágenes por página. Especifique '-1' si desea listar todo el directorio en una sola página."
    )]
  109. public int NumImagenesPorPagina
  110. {
  111. get { return numImagenesPorPagina; }
  112. set { numImagenesPorPagina = value; }
  113. }
  114.  
  115. [Bindable(true), Category("Appearance"), DefaultValue(0), Description("Número de página
    actual. Especifique 0 si no desea que aparezcan los enlaces 'anterior/siguiente'"
    )]
  116. public int Paginacion
  117. {
  118. get { return paginacion; }
  119. set { paginacion = value; }
  120. }
  121.  
  122. [Bindable(true), Category("Appearance"), DefaultValue(""), Description("Página .aspx
    en la que se muestra el documento (Necesario para la paginación). Ej: Default.aspx"
    )]
  123. public string DocumentoAspx
  124. {
  125. get { return documentoAspx; }
  126. set { documentoAspx = value; }
  127. }
  128.  
  129. [Bindable(true), Category("Appearance"), DefaultValue(true), Description("Si se especifica
    'True', el control generará automáticamente los estilos CSS para maquetar y diseñar la Galería"
    )]
  130. public bool GenerarEstilos
  131. {
  132. get { return generarEstilos; }
  133. set { generarEstilos = value; }
  134. }
  135.  
  136. [Bindable(true), Category("Appearance"), DefaultValue("transparent"), Description("Color
    de fondo de la firma de la galería"
    )]
  137. public Color BackColorFirma
  138. {
  139. get { return backColorFirma; }
  140. set { backColorFirma = value; }
  141. }
  142.  
  143. [Bindable(true), Category("Appearance"), DefaultValue("_blank"), Description("Ventana en
    la que se abrirá la imagen."
    )]
  144. public string Target
  145. {
  146. get { return target; }
  147. set { target = value; }
  148. }

Algunos tipos de datos son los enumeradores; por decirlo de forma sencilla es una forma de limitar el número de valores y enmascararlos de forma más comprensible para el programador. Así, el enumerador:

Código Asp.Net

  1. public enum tTitulo:int
  2. {
  3. Uno = 1,
  4. Dos = 2,
  5. Tres = 3,
  6. Cuatro = 4,
  7. Cinco = 5,
  8. Seis = 6,
  9. }

Código Asp.Net

Lo usaremos para poner los encabezados (<h1> a <h6>) al título de la galería según seleccione el programador, de modo que este no podrá seleccionar otro valor a parte de los dados, y con la comodidad de que los valores tienen una máscara de texto, que le da un significado más comprensible (aunque en este caso es igual de comprensible...).

Renderizar el Control Web (Web Control)

Establecidas ya todas las propiedades públicas y pribadas de nuestro control de asp.net, vamos a renderizarlo, o lo que es lo mismo, contruirlo:

Código Asp.Net

  1. /// <summary>
  2. /// Procesar este control en el parámetro de salida especificado.
  3. /// </summary>
  4. /// <param name="output"> Programa de escritura HTML para escribir </param>
  5. //La función Render se utiliza siempre para renderizar o construir los controles
  6. protected override void Render(HtmlTextWriter output)
  7. {
  8. try
  9. {
  10. //Operaciones para la contrucción del control
  11. string ttit = TamTitulo.ToString();
  12. int tTit = 1;
  13. switch (ttit)
  14. {
  15. case "Uno":
  16. tTit = 1;
  17. break;
  18. case "Dos":
  19. tTit = 2;
  20. break;
  21. case "Tres":
  22. tTit = 3;
  23. break;
  24. case "Cuatro":
  25. tTit = 4;
  26. break;
  27. case "Cinco":
  28. tTit = 5;
  29. break;
  30. case "Seis":
  31. tTit = 6;
  32. break;
  33. }
  34. string colorFondo = "";
  35. /*
  36. */
  37. if (BackColor.IsEmpty)
  38. {
  39. colorFondo = "#FFFFFF";
  40. }
  41. else
  42. {
  43. if (BackColor.IsNamedColor)
  44. {
  45. colorFondo = BackColor.Name.ToString();
  46. }
  47. else
  48. {
  49. colorFondo = "#" + BackColor.Name.Remove(0, 2);
  50. }
  51. }
  52. string colorFondoFirma = "";
  53. if (BackColorFirma.IsEmpty)
  54. {
  55. colorFondoFirma = "transparent";
  56. }
  57. else
  58. {
  59. if (BackColor.IsNamedColor)
  60. {
  61. colorFondoFirma = BackColorFirma.Name.ToString();
  62. }
  63. else
  64. {
  65. colorFondoFirma = "#" + BackColorFirma.Name.Remove(0, 2);
  66. }
  67. }
  68. string[] sArchivos;
  69. FileInfo archivoInfo;
  70. string ruta = Page.Server.MapPath("");
  71. if (RutaMiniaturas.Substring(0, 1) == "\\" || RutaMiniaturas.
    Substring
    (0, 1) == "/index.html")
  72. {
  73. RutaMiniaturas = RutaMiniaturas.Remove(0, 1);
  74. }
  75. if (RutaMiniaturas.Substring(RutaMiniaturas.Length - 1, 1)
    == "\\" || RutaMiniaturas.Substring(RutaMiniaturas.Length - 1, 1)
    == "/index.html")
  76. {
  77. RutaMiniaturas = RutaMiniaturas.Remove(RutaMiniaturas.
    Length - 1, 1);
  78. }
  79. if (RutaImagenesGrandes.Substring(0, 1) == "\\" ||
    RutaImagenesGrandes.Substring(0, 1) == "/index.html")
  80. {
  81. RutaImagenesGrandes = RutaImagenesGrandes.Remove(0, 1);
  82. }
  83. if (RutaImagenesGrandes.Substring(RutaImagenesGrandes.Length
    - 1, 1) == "\\" || RutaImagenesGrandes.Substring(
    RutaImagenesGrandes.Length - 1, 1) == "/index.html")
  84. {
  85. RutaImagenesGrandes = RutaImagenesGrandes.Remove(
    RutaImagenesGrandes.Length - 1, 1);
  86. }
  87. ruta = ruta + "\\" + RutaMiniaturas;
  88. sArchivos = Directory.GetFiles(ruta);
  89. int Total = sArchivos.Length;
  90. int i;
  91. int linea = 0;
  92. //output escribirá el código html que arrojará el control
  93. output.WriteLine();
  94. //Créditos y licencia (si modifica el código, añada sus créditos,
    pero no borre los actuales)
  95. output.WriteLineNoTabs("/articulos/tutoriales/net/lt___/index.html");
  96. output.WriteLineNoTabs("//index.html");
  97. output.WriteLineNoTabs(" Galería Scour Design ");
  98. output.WriteLineNoTabs(" Autor: Carlos Carmona. ");
  99. output.WriteLineNoTabs(" Web: www.scourdesign.com ");
  100. output.WriteLineNoTabs(" Licencia GPL: General Public License ");
  101. output.WriteLineNoTabs(" Puede usar libremente este control Web ");
  102. output.WriteLineNoTabs(" O incluso modificar el código fuente ");
  103. output.WriteLineNoTabs(" Citando al autor y enlazando el WebSite. ");
  104. output.WriteLineNoTabs("//index.html");
  105. output.WriteLineNoTabs("////////////////////////////////////// -->");
  106. try
  107. {
  108. //El código html se genera con etiquetas con el atributo id y class
    añadido,
  109. //Si el programador lo desea, puede utilizar la generación de estilos
    automáticos
  110. //aquí especificados, si no, podrá utilizar su propio CSS utilizando
    los
  111. //id y class de las etiquetas html que arroja el control
  112. if (GenerarEstilos == true)
  113. {
  114. output.WriteLineNoTabs("<script type=\"text/javascript\">");
  115. output.WriteLineNoTabs("var auxiliar = navigator.appName;");
  116. output.WriteLineNoTabs("var EstiloIE = '';");
  117. output.WriteLineNoTabs("var EstiloBuenosNavegadores = '';");
  118. output.WriteLineNoTabs("if (auxiliar.indexOf('Internet') >
    -1) {"
    );
  119. output.WriteLineNoTabs("EstiloIE = '<style type=\\\"text/
    css\\\">';"
    );
  120. output.WriteLineNoTabs("EstiloIE += '#ScourDesignGaleria
    a:link { background-color: #FFFFFF; }';"
    );
  121. output.WriteLineNoTabs("EstiloIE += '#ScourDesignGaleria
    a:visited { background-color: #D5DADE; }';"
    );
  122. output.WriteLineNoTabs("EstiloIE += '#ScourDesignGaleria
    a:hover { background-color: #D8D2C0; }';"
    );
  123. output.WriteLineNoTabs("EstiloIE += '</style>';");
  124. output.WriteLineNoTabs("document.write (EstiloIE);");
  125. output.WriteLineNoTabs("} else if (auxiliar.indexOf('
    Netscape') > -1) {"
    );
  126. output.WriteLineNoTabs("EstiloBuenosNavegadores = '<style
    type=\\\"text/css\\\">';"
    );
  127. output.WriteLineNoTabs("EstiloBuenosNavegadores += '
    #ScourDesignGaleria img:hover { background-color: #D8D2C0; }';"
    );
  128. output.WriteLineNoTabs("EstiloBuenosNavegadores += '
    </style>';"
    );
  129. output.WriteLineNoTabs("document.write (
    EstiloBuenosNavegadores);"
    );
  130. output.WriteLineNoTabs("}");
  131. output.WriteLineNoTabs("</script>");
  132. output.WriteLineNoTabs("<style type=\"text/css\">");
  133. if (Firma == null)
  134. {
  135. output.WriteLineNoTabs("#Paginacion {
    margin-bottom: 15px !Important; }"
    );
  136. }
  137. output.WriteLineNoTabs("#Paginacion a:link, #Paginacion
    a:visited { text-decoration: none; background-color: transparent; color:
    #67100E; font-weight: bold; }"
    );
  138. output.WriteLineNoTabs("#Paginacion a:hover {
    background-color: transparent; color: #FF0000; }"
    );
  139. output.WriteLineNoTabs("#ScourDesignGaleria {
    margin:0px; padding:0px; text-align:center; }"
    );
  140. output.WriteLineNoTabs("#Contenedor { position:
    relative; margin: 0px auto; padding: 0px; background-color: "

    + colorFondo + "; width: " + AnchoGaleria + "px; border:1px solid #616161;
    }"
    );
  141. output.WriteLineNoTabs("h1, h2, h3, h4, h5, h6 {
    margin-top: 10px; }"
    );
  142. output.WriteLineNoTabs(".Fila { display:block;
    text-align:center; }"
    );
  143. output.WriteLineNoTabs(".DivImagen { margin: 2px;
    display:inline; }"
    );
  144. output.WriteLineNoTabs(".Enlace { width:100%; }");
  145. output.WriteLineNoTabs(".Imagen { margin:5px; padding:
    10px; border:1px solid #616161; }"
    );
  146. output.WriteLineNoTabs("#Firma { border: 1px solid #A2A2A2;
    margin: 10px; padding: 10px; font-weight: bold; background-color: "
    +
    colorFondoFirma + "; }");
  147. output.WriteLineNoTabs("</style>");
  148. }
  149. }
  150. catch
  151. {;}
  152. output.WriteLineNoTabs("<div id=\"ScourDesignGaleria\">");
  153. output.WriteLineNoTabs("<div id=\"Contenedor\">");
  154. try
  155. {
  156. if (Paginacion > 0)
  157. {;}
  158. }
  159. catch
  160. {
  161. Paginacion = 0;
  162. }
  163. try
  164. {
  165. if (NumImagenesPorPagina > 0)
  166. {;}
  167. }
  168. catch
  169. {
  170. NumImagenesPorPagina = -1;
  171. }
  172. try
  173. {
  174. //Título de la galería
  175. if (Titulo != "" & Titulo.Length > 0)
  176. {
  177. output.WriteLineNoTabs("<h" + tTit + ">" + Titulo + "</h"
    + tTit + ">");
  178. }
  179. }
  180. catch
  181. {;}
  182. int desde = 0;
  183. int hasta = Total - 1;
  184. try
  185. {
  186. for (i = 0; i < Total; i++)
  187. {
  188. if (i % NumImagenesPorPagina == 0)
  189. {
  190. if ((i / NumImagenesPorPagina) + 1 == Paginacion)
  191. {
  192. desde = i;
  193. hasta = i + NumImagenesPorPagina;
  194. }
  195. }
  196. }
  197. }
  198. catch
  199. {;}
  200. int Num = NumImagenesPorPagina;
  201. int TotalMostradas = 0;
  202. for (i = 0; i < Total; i++)
  203. {
  204. if (((i >= desde) & (i <= hasta)) || Paginacion < 1)
  205. {
  206. if (Num > 0 || Num == -1)
  207. {
  208. archivoInfo = new FileInfo(sArchivos[i]);
  209. //los formatos de imagen permitidos son jpg, jpeg,
    gif, png y bmp
  210. if (archivoInfo.Extension == "/articulos/tutoriales/net/.jpg" || archivoInfo.
    Extension
    == "/articulos/tutoriales/net/.jpeg" || archivoInfo.Extension == "/articulos/tutoriales/net/.gif" || archivoInfo.
    Extension == "/articulos/tutoriales/net/.png" || archivoInfo.Extension == ".bmp")
  211. {
  212. if (linea == 0)
  213. {
  214. output.WriteLineNoTabs("<div
    class=\"Fila\">"
    );
  215. }
  216. output.Write("<div class=\"DivImagen\"><a
    href=\""
    );
  217. output.Write(RutaImagenesGrandes + "/index.html" +
    archivoInfo.Name);
  218. output.Write("\" class=\"Enlace\"");
  219. if (Target != null)
  220. {
  221. output.Write(" target=\"" + Target +
    "\"");
  222. }
  223. output.Write("><img src=\"");
  224. output.Write(RutaMiniaturas + "/index.html" + archivoInfo.
    Name);
  225. output.Write("\" class=\"Imagen\"></a></div>");
  226. output.WriteLine();
  227. linea = linea + 1;
  228. TotalMostradas = TotalMostradas + 1;
  229. if (linea == NumImagenesPorFila)
  230. {
  231. output.WriteLineNoTabs("</div>");
  232. linea = 0;
  233. }
  234. }
  235. if (Num != -1)
  236. {
  237. Num = Num - 1;
  238. }
  239. }
  240. }
  241. }
  242. try
  243. {
  244. if (Paginacion > 0 & (!(TotalMostradas < NumImagenesPorPagina
    & Paginacion == 1)))
  245. {
  246. if (Paginacion == 1)
  247. {
  248. output.WriteLineNoTabs("<div id=\"Paginacion\"> <a
    href=\""
    + DocumentoAspx + "?pag=" + (Paginacion + 1).ToString() +
    "\">Siguiente</a></div>"
    );
  249. }
  250. else
  251. {
  252. string text = (Total / NumImagenesPorPagina).ToString();
  253. string PagTotales = "";
  254. for (i = 0; i < text.Length; i++)
  255. {
  256. if (text.Substring(i, 1) != "," & text.Substring(
    i, 1) != ".")
  257. {
  258. PagTotales = PagTotales + text.Substring(i, 1);
  259. }
  260. else
  261. {
  262. break;
  263. }
  264. }
  265. if (Paginacion > Int32.Parse(PagTotales))
  266. {
  267. output.WriteLineNoTabs("<div id=\"Paginacion\">
    <a href=\""
    + DocumentoAspx + "?pag=" + (Paginacion - 1).ToString() +
    "\">Anterior</a></div>"
    );
  268. }
  269. else
  270. {
  271. output.WriteLineNoTabs("<div id=\"Paginacion\"> <
    a href=\""
    + DocumentoAspx + "?pag=" + (Paginacion - 1).ToString() + "\">
    Anterior</a> - <a href=\""
    + DocumentoAspx + "?pag=" + (Paginacion + 1).
    ToString() + "\">Siguiente</a></div>");
  272. }
  273. }
  274. }
  275. if (Firma != "" & Firma.Length > 0)
  276. {
  277. output.WriteLineNoTabs("<div id=\"Firma\">" + Firma + "
    </div>"
    );
  278. }
  279. }
  280. catch
  281. {;}
  282. output.WriteLineNoTabs("</div>");
  283. output.WriteLineNoTabs("</div>");
  284. }
  285. catch
  286. {
  287. output.Write("<p>Galería Scour Design. <br>La maquetación se
    generará <br>en tiempo de ejecución.</p>"
    );
  288. }
  289. }

La clase HtmlTextWriter, instanciada aquí en la variable output, sirve para escribir o arrojar el código html final de nuestro control web. El método HtmlTextWriter.WriteLineNoTabs escribe un salto de linea y retorno de carro al final del HTML, de modo que si alguien mira el código fuente de la web verá el código más limpio que si estubiese todo en una línea.

Con esto, compilamos el Control Web y vamos a crear nuestra galería.

Abrimos Visual Studio y creamos un nuevo proyecto web. Para añadir a Visual Studio el nuevo control, hacemos clic derecho del ratón sobre la columna izquierda y le damos a Add/Remove Items...

Incluir o quitar controles en Visual Studio. Programacion asp.net

Del cuadro que se abrirá, seleccionamos el control o le damos a "examinar" si no aparece en la lista.

Una vez añadido el control web, solo tendremos que seleccionarlo y arrastrarlo a la página como haríamos con cualquier otro WebControl. Si seleccionamos el control ahora ya instanciado en nuestro Web Form, podremos ver que tiene todas las propiedades públicas que hemos especificado en el control Web, más todas las del espacio de nombres WebControl. trastearlas y probad distintas convinaciones.

Para concluir, si deseamos que la galería tenga paginación, en el evento Page_Load de nuestro web form añadiremos el siguiente código:

Código Asp.Net

  1. protected ScourDesign.Galeria Galeria2;
  2. private void Page_Load(object sender, System.EventArgs e)
  3. {
  4. if (!(Page.IsPostBack))
  5. {
  6. if (Request.QueryString["pag"] == null)
  7. {
  8. Response.Redirect("/articulos/tutoriales/net/WebForm1_pag_1.html");
  9. }
  10. else
  11. {
  12. try
  13. {
  14. Galeria2.Paginacion = Int32.Parse(Request.QueryString["pag"].
    ToString());
  15. }
  16. catch
  17. {
  18. Response.Redirect("/articulos/tutoriales/net/WebForm1_pag_1.html");
  19. }
  20. }
  21. }
  22. }

Algunos ejemplos:

programacion asp.net

Código del Control Web Asp.Net:

  1. <cc1:galeria id="Galeria2" runat="server" RutaImagenesGrandes="imagenes/max"
    RutaMiniaturas="imagenes/min" Titulo="Galería de Imágenes Scour Design"
    TamTitulo="Uno" BackColor="#F2F2EE" numImagenesPorFila="4" AnchoGaleria="650"
    NumImagenesPorPagina="8" DocumentoAspx="/articulos/tutoriales/net/WebForm1.html" Firma="Scour Design © -
    Control de Servidor Web (Visual C#.NET)"
    BackColorFirma="218, 214, 197"
    tabIndex="1" GenerarEstilos="true" Target="_blank">
    </cc1:galeria>

programacion asp.net

Código del Control Web Asp.Net:

  1. <cc1:galeria id="Galeria2" runat="server" RutaImagenesGrandes="imagenes/max"
    RutaMiniaturas="imagenes/min" Titulo="Galería de Imágenes Scour Design"
    TamTitulo="Uno" BackColor="#F2F2EE" numImagenesPorFila="4" AnchoGaleria="650"
    NumImagenesPorPagina="8" DocumentoAspx="/articulos/tutoriales/net/WebForm1.html" Firma="Scour Design © -
    Control de Servidor Web (Visual C#.NET)"
    BackColorFirma="218, 214, 197"
    tabIndex="1" GenerarEstilos="true" Target="_blank">
    </cc1:galeria>

programacion asp.net

Código del Control Web Asp.Net:

  1. <cc1:galeria id="Galeria2" runat="server" RutaImagenesGrandes="imagenes/max"
    RutaMiniaturas="imagenes/min" Titulo="Galería de Imágenes Scour Design"
    TamTitulo="Uno" BackColor="#F2F2EE" numImagenesPorFila="6" AnchoGaleria="900"
    NumImagenesPorPagina="-1" DocumentoAspx="/articulos/tutoriales/net/WebForm1.html" Firma="Scour Design © -
    Control de Servidor Web (Visual C#.NET)"
    BackColorFirma="218, 214, 197"
    tabIndex="1" GenerarEstilos="true" Target="_blank" Paginacion="0">
    </cc1:galeria>

Para terminar

Éste es un Control Web Simple. La diferencia entre Controles Web Simples y Controles Web Compuestos reside en que los segundos son Controles creados a partir de otros controles. Al principio especificamos que nuestra Control de Galería para Imágenes heredase de la Clase WebControl, sin embargo, podría suceder que en nuestra galería quisieramos poner, por ejemplo, un TextBox y un botón para que la gente añadiese algún comentario; para ello, deberíamos haber añadido la declaración de que nuestro Control Web va a contener otros controles a su vez, esto es, la claúsula INamingContainer.

public class Galeria : System.Web.UI.WebControls.WebControl, INamingContainer

Ahora ya podríamos añadir otros Controles Web.

Por último, añadir que la clase HtmlTextWriter, tiene muchos métodos para escribir HTML, tales como métodos para inicio y fin de etiquetas (WriteBeginTag y WriteEndTag), métodos para añadir atributos (WriteAttribute y WriteStyleAttribute), etc... Sin embargo vereis que yo no he usado nada de esto, sencillamente he escrito el código html y css directamente en los métodos Write y WriteLineNoTabs, para escribirlos tal cual. ¿Por qué? Por que el código html que arroja el .NET Framework 1.1 es malísimo, muchísimo más si pretendemos maquetar el resultado final con CSS. Si quereis utilizar un HTML de calidad no os recomiendo dejar en manos del .NET Framework esta tarea. Suficientemente mal lo hemos pasado muchos a la hora de maquetar con CSS el código arrojado por el Visual Studio y conseguir que se vea igual en IE y FireFox. Escribid y controlar vuestro código, aunque sea para que lo use otro programador... mejor dicho, sobre todo si es para que lo use otro programador.

Al control se le pueden añadir muchas más propiedades que serían muy interesantes, sobre todo con respecto a los estilos. Lo dejo en vuestras manos.

Enlaces de interés

Nota. Derechos de autor de la aplicación.
De acuerdo a la licencia GPL, pueden utilizar y modificar libremente esta aplicación, pero reconociendo siempre la autoría y añadiendo un enlace a Scour Design.
Scour Design ™ Todos los Derechos Reservados © Carlos Carmona Xhtml 1.1 Strict Válido!CSS Nivel 2 Válido! Nivel Triple-A de Conformidad con las Directrices de Accesibilidad Web (WAI)