Crea controles de servidor ASP.NET desde cero

En este tutorial aprenderás a construir un control de servidor ASP.NET creando un control para reproducción de video de HTML5. En el camino revisaremos el proceso fundamental del desarrollo de controles de servidor desde cero.

Introducción

ASP.NET viene con su propio conjunto de controles del lado del servidor, así que ¿por qué crear nuestro propio control?.

Al crear nuestros propios controles, podemos construir poderosos y reutilizables componentes visuales para la interfaz de usuario de nuestra aplicación web.

Este tutorial te presentará el proceso de desarrollo de controles para servidor de ASP.NET. También verás la manera en la que crear tus propios controles puede mejorar simultáneamente la calidad de tus aplicaciones web, hacerte más productivo y mejorar tus interfaces de usuario.

Los controles personalizados de ASP.NET son más flexibles que los controles de usuario. Podemos crear un control personalizado que herede de otro control del lado del servidor y luego extender ese control. También podemos compartir un control personalizado entre proyectos. Normalmente crearemos nuestro control personalizado en una biblioteca web de control personalizado que se compila por separado con respecto a nuestra aplicación web. Como resultado, podemos añadir esa biblioteca a cualquier proyecto para usar nuestro control personalizado en ese proyecto.

Descripción general del video en HTML5

Hasta ahora nunca ha habido una manera nativa de mostrar video en una página web. Hoy en día la mayoría de los videos se muestran a través del uso de un complemento (como Flash o Silverlight). Sin embargo, no todos los navegadores tienen los mismos complementos. HTML5 especifica una manera nativa y estándar para incluir video con el elemento video.

Actualmente existen dos formatos de video ampliamente compatibles para el elemento video: los archivos Ogg [codificados con Theora y Vorbis para video y audio respectivamente] y los archivos MPEG 4 [codificado con H.264 y AAC].

Para desplegar un video en HTML5, esto es todo lo que necesitamos:

1

<video width="320" height="240" controls="controls">

2

  <source src="movie.ogg" type="video/ogg" />

3

  <source src="movie.mp4" type="video/mp4" />

4

</video>

El atributo controls es para añadir los controles de reproducción, pausa y volumen. Sin este atributo tu video se vería solamente como una imagen. Siempre es una buena idea también incluir los atributos width y height. La siguiente tabla muestra todos los atributos del elemento <video>:

• autoplay: Especifica que el video comenzará a reproducirse tan pronto como esté listo
• controls: Especifica que los controles serán mostrados, por ejemplo como un botón de reproducción
• height: La altura del reproductor de video
• loop: Especifica que el archivo de medios comenzará de nuevo cada vez que termine
• preload: Especifica que el video será cargado durante la carga de la página y estará listo para reproducirse. Será ignorado si "autoplay" está presente
• src: El URL del video a reproducir
• width: El ancho del reproductor de video
• poster: El URL de la imagen a mostrar cuando no haya datos de video disponibles

Paso 0: Comenzando

Todo lo que se requiere para comenzar es una copia de Visual Studio o Visual Web Developer Express. Si no tienes la versión completa de Visual Studio, puedes conseguir la Edición Express gratuita.

El reproductor de video en HTML5 que crearemos aquí solamente es un simple reproductor de video que mostrará cualquier interfaz nativa que el navegador proporcione. Los navegadores compatibles con video de HTML5 tienen reproductores de video integrados, incluyendo un conjunto de controles (reproducción/pausa etc.), así que verás una interfaz diferente para cada navegador al ejecutar este control.

El reproductor de video de HTML5 en Firefox 3.6.8.

Paso 1: Creando un proyecto de control personalizado

Primero necesitamos crear un nuevo proyecto de biblioteca de clases para almacenar nuestros controles personalizados. Al crear el control personalizado en una biblioteca de clases separada, podemos compilar el proyecto en un DLL separado y usar el control personalizado en cualquier aplicación que lo requiera.

Abre tu proyecto ASP.NET con Visual Studio o Visual Web Developer. En el Solution Explorer (Explorador de Soluciones), haz clic con el botón derecho en el nombre de la solución y selecciona Add New Project (Añadir Nuevo Proyecto) desde el menú contextual. En el cuadro de diálogo Add New Project (Añadir Nuevo Proyecto) elige el tipo de proyecto Web y selecciona ASP.NET Server Control (Control de Servidor ASP.NET) como plantilla, de esta manera:

Asigna el nombre CustomControls al proyecto. Haz clic en OK. El nuevo proyecto de control de servidor ASP.NET habrá sido creado y Visual Studio también te proporciona un control Web simple para comenzar. Elimina este control personalizado, ya que no lo necesitamos.

Paso 2: Agregando un control web personalizado al proyecto

En el Solution Explorer (Explorador de Soluciones), haz clic con el botón derecho en el proyecto CustomControls y selecciona Add New Item (Añadir Nuevo Elemento) del menú contextual. En el cuadro de diálogo Add New Item, elige el tipo de categoría Web y selecciona ASP.NET Server Control (Control de Sevidor ASP.NET) en las plantillas.

Asigna el nombre VideoPlayer al nuevo control personalizado. Haz clic en Add (Añadir). El nuevo control personalizado (VideoPlayer.cs) es creado y añadido al proyecto CustomControls.

1

using System;

2

using System.Collections.Generic;

3

using System.ComponentModel;

4

using System.Linq;

5

using System.Text;

6

using System.Web;

7

using System.Web.UI;

8

using System.Web.UI.WebControls;

9

10

namespace CustomControls

11

{

12

    [DefaultProperty("Text")]

13

    [ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")]

14

    public class VideoPlayer : WebControl

15

    {

16

        [Bindable(true)]

17

        [Category("Appearance")]

18

        [DefaultValue("")]

19

        [Localizable(true)]

20

        public string Text

21

        {

22

            get

23

            {

24

                String s = (String)ViewState["Text"];

25

                return ((s == null) ? "[" + this.ID + "]" : s);

26

            }

27

28

            set

29

            {

30

                ViewState["Text"] = value;

31

            }

32

        }

33

34

        protected override void RenderContents(HtmlTextWriter output)

35

        {

36

            output.Write(Text);

37

        }

38

    }

39

}

40

El código anterior es el código predeterminado generado por Visual Studio para una biblioteca de control web. Para comenzar a trabajar con VideoPlayer.cs, necesitamos modificar el código anterior. Lo primero que debemos hacer es borrar todo lo que está entre la línea de la declaración de la clase y el final de la clase. Esto nos deja con este código:

1

using System;

2

using System.Collections.Generic;

3

using System.ComponentModel;

4

using System.Linq;

5

using System.Text;

6

using System.Web;

7

using System.Web.UI;

8

using System.Web.UI.WebControls;

9

10

namespace CustomControls

11

{

12

    [DefaultProperty("Text")]

13

    [ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")]

14

    public class VideoPlayer : WebControl

15

    {

16

17

    }

18

}

19

Como puedes ver arriba, la clase VideoPlayer se deriva de la clase System.Web.UI.WebControl. De hecho, todos los controles del lado del servidor de ASP.NET se derivan de la clase WebControl.

Paso 3: Modificando la línea de la declaración de la clase

La línea de la declaración de la clase en el código predeterminado también especifica a la propiedad Text como la propiedad predeterminada para el control VideoPlayer. El control VideoPlayer que creamos aquí no tiene una propiedad llamada Text. Por lo tanto, borra la referencia a Text como propiedad predeterminada. Después de todas las modificaciones, el archivo de código VideoPlayer.cs debería verse de esta forma:

1

using System;

2

using System.Collections.Generic;

3

using System.ComponentModel;

4

using System.Linq;

5

using System.Text;

6

using System.Web;

7

using System.Web.UI;

8

using System.Web.UI.WebControls;

9

10

namespace CustomControls

11

{

12

    [ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")]

13

    public class VideoPlayer : WebControl 

14

    {

15

16

    }

17

}

18

Paso 4: Añadiendo propiedades

En este paso, añadiremos algunas propiedades al control VideoPlayer para gestionar su comportamiento. La siguiente es la lista de propiedades que añadiremos al archivo de código VideoPlayer.cs:

• VideoUrl: Una propiedad de tipo cadena que especifica el URL del video a reproducir.
• PosterUrl: Una propiedad de tipo cadena que especifica la dirección de un archivo de imagen para mostrarlo mientras no haya datos de video disponibles.
• AutoPlay: Una propiedad booleana para especificar si el video debería comenzar a reproducirse automáticamente o no al abrir la página web.
• DisplayControlButtons: Una propiedad booleana que especifica si los botones de navegación del reproductor se muestran o no.
• Loop: Una propiedad booleana que especifica si el video comenzará de nuevo o no cada vez que termine.

Agrega el siguiente código a la clase VideoPlayer:

1

private string _Mp4Url;

2

public string Mp4Url

3

{

4

    get { return _Mp4Url; }

5

    set { _Mp4Url = value; }

6

}

7

8

private string _OggUrl = null;

9

public string OggUrl

10

{

11

    get { return _OggUrl; }

12

    set { _OggUrl = value; }

13

}

14

15

private string _Poster = null;

16

public string PosterUrl

17

{

18

    get { return _Poster; }

19

    set { _Poster = value; }

20

}

21

22

private bool _AutoPlay = false;

23

public bool AutoPlay

24

{

25

    get { return _AutoPlay; }

26

    set { _AutoPlay = value; }

27

}

28

29

private bool _Controls = true;

30

public bool DisplayControlButtons

31

{

32

    get { return _Controls; }

33

    set { _Controls = value; }

34

}

35

36

private bool _Loop = false;

37

public bool Loop

38

{

39

    get { return _Loop; }

40

    set { _Loop = value; }

41

}

42

Después de haber añadido las propiedades anteriores, la clase VideoPlayer deberá verse así:

1

using System;

2

using System.Collections.Generic;

3

using System.ComponentModel;

4

using System.Linq;

5

using System.Text;

6

using System.Web;

7

using System.Web.UI;

8

using System.Web.UI.WebControls;

9

10

namespace CustomControls

11

{

12

    [ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")]

13

    public class VideoPlayer : WebControl 

14

    {

15

        private string _Mp4Url;

16

        public string Mp4Url

17

        {

18

            get { return _Mp4Url; }

19

            set { _Mp4Url = value; }

20

        }

21

22

        private string _OggUrl = null;

23

        public string OggUrl

24

        {

25

            get { return _OggUrl; }

26

            set { _OggUrl = value; }

27

        }

28

29

        private string _Poster = null;

30

        public string PosterUrl

31

        {

32

            get { return _Poster; }

33

            set { _Poster = value; }

34

        }

35

36

        private bool _AutoPlay = false;

37

        public bool AutoPlay

38

        {

39

            get { return _AutoPlay; }

40

            set { _AutoPlay = value; }

41

        }

42

43

        private bool _Controls = true;

44

        public bool DisplayControlButtons

45

        {

46

            get { return _Controls; }

47

            set { _Controls = value; }

48

        }

49

50

        private bool _Loop = false;

51

        public bool Loop

52

        {

53

            get { return _Loop; }

54

            set { _Loop = value; }

55

        }

56

    }

57

}

58

Paso 5: Creando el método RenderContents

El trabajo principal de un control de servidor es entregar algún tipo de lenguaje de marcado para el flujo de salida HTML, el cuál es devuelto y mostrado por el cliente. Como desarrolladores del control, es nuestra responsabilidad indicarle al control de servidor qué marcado entregar. El método sobrecargado RenderContents es la ubicación principal en la que le diremos al control lo que queremos enviar al cliente.

Agrega el siguiente método sobrescrito RenderContents a la clase VideoPlayer:

1

protected override void RenderContents(HtmlTextWriter output)

2

{

3

4

}

5

Toma en cuenta que el método RenderContents tiene un parámetro de método llamado output. Este parámetro es un objeto HtmlTextWriter, que es el que el control usa para entregar el HTML al cliente. La clase HtmlTextwriter tiene varios métodos que puedes usar para entregar tu HTML, incluyendo AddAttribute y RenderBeginTag.

Paso 6: Añadiendo atributos de etiquetas

Antes de escribir el código para mostrar el elemento <video>, lo primero que hay que hacer es añadirle algunos atributos. Podemos usar el método AddAttribute del objeto HtmlTextWriter para añadir atributos a las etiquetas HTML.

Agrega el siguiente código en el método RenderContents:

1

output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);

2

output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());

3

output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString());

4

5

if (DisplayControlButtons == true)

6

{

7

    output.AddAttribute("controls", "controls");

8

}

9

10

if (PosterUrl != null)

11

{

12

    output.AddAttribute("poster", PosterUrl);

13

}

14

15

if (AutoPlay == true)

16

{

17

    output.AddAttribute("autoplay", "autoplay");

18

}

19

20

if (Loop == true)

21

{

22

    output.AddAttribute("loop", "loop");

23

}

24

Puedes ver que, al usar el método AddAttribute, hemos añadido siete atributos a la etiqueta. También toma en cuenta que estamos usando una enumeración, HtmlTextWriterAttribute, para seleccionar al atributo que queramos añadir a la etiqueta.

Después de haber añadido el código anterior, el método RenderContents deberá verse de esta forma:

1

protected override void RenderContents(HtmlTextWriter output)

2

{

3

    output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);

4

    output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());

5

    output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString());

6

7

    if (DisplayControlButtons == true)

8

    {

9

        output.AddAttribute("controls", "controls");

10

    }

11

12

    if (PosterUrl != null)

13

    {

14

        output.AddAttribute("poster", PosterUrl);

15

    }

16

17

    if (AutoPlay == true)

18

    {

19

        output.AddAttribute("autoplay", "autoplay");

20

    }

21

22

    if (Loop == true)

23

    {

24

        output.AddAttribute("loop", "loop");

25

    }

26

}

27

Paso 7: Mostrando el elemento <video>

Después de añadir algunos atributos de etiqueta para el elemento video, es momento de mostrar la etiqueta <video> con sus atributos en el documento HTML. Agrega el siguiente código en el método RenderContents:

1

output.RenderBeginTag("video");

2

if (OggUrl != null)

3

{

4

    output.AddAttribute("src", OggUrl);

5

    output.AddAttribute("type", "video/ogg");

6

    output.RenderBeginTag("source");

7

    output.RenderEndTag();

8

}

9

10

if (Mp4Url != null)

11

{

12

    output.AddAttribute("src", Mp4Url);

13

    output.AddAttribute("type", "video/mp4");

14

    output.RenderBeginTag("source");

15

    output.RenderEndTag();

16

}

17

output.RenderEndTag();

18

Usamos el método RenderBeginTag del objeto output para generar la etiqueta de apertura del elemento video, y RenderEndTag para generar su etiqueta de cierre. También agregamos el elemento <source> entre el elemento <video>. El elemento video permite múltiples elementos source (fuente). Los elementos Source pueden crear un vículo a diferentes archivos de video. El navegador usará el primer formato reconocido.

El método RenderContents debería verse así después de haber añadido el código anterior:

1

protected override void RenderContents(HtmlTextWriter output)

2

{

3

    output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);

4

    output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());

5

    output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString());

6

7

    if (DisplayControlButtons == true)

8

    {

9

        output.AddAttribute("controls", "controls");

10

    }

11

12

    if (PosterUrl != null)

13

    {

14

        output.AddAttribute("poster", PosterUrl);

15

    }

16

17

    if (AutoPlay == true)

18

    {

19

        output.AddAttribute("autoplay", "autoplay");

20

    }

21

22

    if (Loop == true)

23

    {

24

        output.AddAttribute("loop", "loop");

25

    }

26

27

    output.RenderBeginTag("video");

28

    if (OggUrl != null)

29

    {

30

        output.AddAttribute("src", OggUrl);

31

        output.AddAttribute("type", "video/ogg");

32

        output.RenderBeginTag("source");

33

        output.RenderEndTag();

34

        }

35

36

    if (Mp4Url != null)

37

    {

38

        output.AddAttribute("src", Mp4Url);

39

        output.AddAttribute("type", "video/mp4");

40

        output.RenderBeginTag("source");

41

        output.RenderEndTag();

42

    }

43

    output.RenderEndTag();

44

}

45

Toma en cuenta que el orden en el que colocamos el método AddAttributes es importante. Colocamos los métodos AddAttributes directamente antes del método RenderBeginTag en el código. El método AddAttributes asocia a los atributos con la siguiente etiqueta HTML que se genera con el método RenderBeginTag, en este caso la etiqueta video.

Paso 8: Eliminando la etiqueta Span

De forma predeterminada, ASP.NET rodeará a la etiqueta del control con un elemento <span> al generar el marcado HTML del control. Si proporcionamos un valor ID a nuestro control, entonces de forma predeterminada la etiqueta Span generará un atributo ID. Tener estas etiquetas algunas veces puede ser problemático, así que, si quieremos evitar esto en ASP.NET, simplemente podemos sobrescribir el método Render e invocar al método RenderContents directamente. Aquí está la forma de hacerlo:

1

protected override void Render(HtmlTextWriter writer)

2

{

3

    this.RenderContents(writer);

4

}

5

Después de haber añadido el código anterior, la clase VideoPlayer debería verse de esta forma:

1

using System;

2

using System.Collections.Generic;

3

using System.ComponentModel;

4

using System.Linq;

5

using System.Text;

6

using System.Web;

7

using System.Web.UI;

8

using System.Web.UI.WebControls;

9

10

namespace CustomControls

11

{

12

    [ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")]

13

    public class VideoPlayer : WebControl 

14

    {

15

        private string _Mp4Url;

16

        public string Mp4Url

17

        {

18

            get { return _Mp4Url; }

19

            set { _Mp4Url = value; }

20

        }

21

22

        private string _OggUrl = null;

23

        public string OggUrl

24

        {

25

            get { return _OggUrl; }

26

            set { _OggUrl = value; }

27

        }

28

29

        private string _Poster = null;

30

        public string PosterUrl

31

        {

32

            get { return _Poster; }

33

            set { _Poster = value; }

34

        }

35

36

        private bool _AutoPlay = false;

37

        public bool AutoPlay

38

        {

39

            get { return _AutoPlay; }

40

            set { _AutoPlay = value; }

41

        }

42

43

        private bool _Controls = true;

44

        public bool DisplayControlButtons

45

        {

46

            get { return _Controls; }

47

            set { _Controls = value; }

48

        }

49

50

        private bool _Loop = false;

51

        public bool Loop

52

        {

53

            get { return _Loop; }

54

            set { _Loop = value; }

55

        }

56

57

        protected override void RenderContents(HtmlTextWriter output)

58

        {

59

            output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);

60

            output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());

61

            output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString());

62

            if (DisplayControlButtons == true)

63

            {

64

                output.AddAttribute("controls", "controls");

65

            }

66

67

            if (PosterUrl != null)

68

            {

69

                output.AddAttribute("poster", PosterUrl);

70

            }

71

72

            if (AutoPlay == true)

73

            {

74

                output.AddAttribute("autoplay", "autoplay");

75

            }

76

77

            if (Loop == true)

78

            {

79

                output.AddAttribute("loop", "loop");

80

            }

81

82

            output.RenderBeginTag("video");

83

            if (OggUrl != null)

84

            {

85

                output.AddAttribute("src", OggUrl);

86

                output.AddAttribute("type", "video/ogg");

87

                output.RenderBeginTag("source");

88

                output.RenderEndTag();

89

            }

90

91

            if (Mp4Url != null)

92

            {

93

                output.AddAttribute("src", Mp4Url);

94

                output.AddAttribute("type", "video/mp4");

95

                output.RenderBeginTag("source");

96

                output.RenderEndTag();

97

            }

98

            output.RenderEndTag();

99

        }

100

101

        protected override void Render(HtmlTextWriter writer)

102

        {

103

            this.RenderContents(writer);

104

        }

105

    }

106

}

107

¡Ahora nuestro control está terminado! todo lo que resta por hacer es generar el proyecto antes de que lo usemos en una página web ASP.NET.

Paso 9: Generando el proyecto

Es momento de generar el proyecto. Selecciona Build (Generar) y luego haz clic en Build Solution (Generar Solución) desde el menú principal.

Después de generar el proyecto, el siguiente paso es añadir el control VideoPlayer al ToolBox Explorer (Explorador de la Caja de Herramientas).

Paso 10: Añadiendo el control VideoPlayer a la caja de herramientas de Visual Studio

• Para añadir el control VideoPlayer a la caja de herramientas, haz clic con el botón derecho en Toolbox Explorer (Explorador de la Caja de Herramientas)
• Choose Items (Elegir elementos) desde el menú contextual
• Haz clic en el botón Browse (Navegar) en el cuadro de diálogo Choose Toolbox Items (Elegir Elementos del Cuadro de Herramientas)
• Navega al directorio del proyecto ASP.NET
• Ve al directorio CustomControls
• Abre el directorio Bin\Debug (Visual Studio genera versiones de depuración de forma predeterminada).
• Selecciona el ensamblado CustomControls.DLL y haz clic en el botón Open (Abrir)

VideoPlayer aparecerá en el cuadro de diálodo Choose Toolbox Items (Elegir Elementos del Cuadro de Herramientas) como se muestra en la imagen anterior. La casilla de verificación lo mostrará como seleccionado. Tan pronto como hagas clic en el botón OK del cuadro de diálogo Choose Toolbox Items (Elegir Elementos del Cuadro de Herramientas), el nuevo control VideoPlayer aparecerá en el cuadro de herramientas.

Paso 11: Colocando el control VideoPlayer en una página web ASP.NET

Para ver cómo funciona el control necesitamos darle un hogar. Agrega una nueva página al sitio web. Haz clic con el botón derecho en el proyecto ASP.NET desde el Solution Explorer (Explorador de Soluciones). Selecciona Add New Item (Añadir Nuevo Elemento) y agrega un Web Form (Formulario Web). Asigna el nombre VideoPlayerTest.aspx al formulario web.

Para colocar el control en la página cambia al modo Design (Diseño). Arrastra el control VideoPlayer desde la caja de herramientas y suéltalo en la vista de diseño de VideoPlayerTest.aspx.

El siguiente listado muestra la forma en la que el control es declarado en la página:

1

<cc1:VideoPlayer ID="VideoPlayer1" runat="server" Mp4Url="videos/movie.mp4" OggUrl="videos/movie.ogg" Width="400" Height="300" />

La siguiente línea de código es lo que Visual Studio agregó al archivo ASPX para acomodar el control. Puedes verlo seleccionando la pestaña Source (Fuente) de la parte inferior de la ventana de código en Visual Studio. La directiva Register indica en dónde encontrar el control personalizado (cuál ensamblado) en tiempo de ejecución en ASP.NET y lo asigna a un prefijo de tipo etiqueta.

1

<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %>

Ahora podemos probar el control.

El control VideoPlayer ejecutándose en Google Chrome.

Resumen

En este tutorial aprendiste a crear tu propio control de servidor ASP.NET personalizado desde cero. Ahora conoces cada paso del proceso - desde cómo crear un proyecto de biblioteca de control web personalizado, cómo añadir propiedades a un control personalizado, cómo enviar el marcado HTML del control al cliente y, finalmente, cómo usar el control ASP.NET personalizado en un formulario web.

Con suerte, ahora cuentas con las habilidades para crear controles personalizados que tengan toda la funcionalidad de los controles estándar ASP.NET del lado del servidor. ¡Muchas gracias por leer!.