martes, 12 de julio de 2011

Funciones propias de Visual Basic

 

1 - Funciones para el tratamiento de cadenas

Las funciones de cadena , como su nombre lo indica, se utilizan para trabajar y tratar las cadenas de caracteres.
A continuación las mas importantes de ellas.


1.1 - Función Lcase y Ucase

Estas dos funciones se utilizan para convertir cadenas de texto a minúscula y mayúscula.
La función Lcase cambia o convierte una cadena de texto a minúscula y un ejemplo de como utilizarla sería así:
Lcase (cadena que queremos convertir a minúsculas)

Ejemplo:
Dim cadena As String

cadena = "HOLA MUNDO"

'Convertimos
cadena = LCase(cadena)

'La variable cadena ahora vale "hola mundo"

La función Ucase funciona de la misma manera que Lcase pero convierte el contenido de una cadena a mayúsculas.
Por ejemplo, si tenemos un control Label1 que contiene un texto que dice: "Porcentaje de sueldos", escribiendo la siguiente línea:
Label1 = UCase(Label1)

El control Label1 pasaría a mostrar o mejor dicho contener en su propiedad caption:"PORCENTAJE DE SUELDOS".


1.2 - Función Trim, LTrim y RTrim

Estas tres funciones se utilizan para eliminar los espacios vacíos de una cadena.

LTrim elimina los espacios vacíos de la parte izquierda de la cadena, RTrim de la parte derecha y Trim de ambas partes.
Ejemplos:
Tenemos una variable llamada ciudad con el valor " Barcelona". Para eliminar los espacios vacíos de la izquierda haríamos lo siguiente:
ciudad = LTrim(ciudad)

Si en un TextBox quisieramos borrar todos los espacios vacíos de la parte derecha de la cadena:
MiText = RTrim(MiText)

La Función Trim elimina todos los espacios vacíos de ambos lados de la cadena. Ejemplo:
Pais = "     Argentina     "
País = Trim(Pais)

Ahora el valor de País es igual a: "Argentina".


1.3 - Función Len

La función Len nos permite conocer la cantidad de caracteres que tiene una determinada cadena. O sea que esta función nos devuelve un número.
Ejemplo:
Len (Aquí va la cadena que queremos averiguar su tamaño)

Como la función Len devuelve un número debemos asignar ese número devuelto en una variable de tipo numérica.
Ejemplo:
Dim TamanoCadena As Long

Dim MiCadena As String

MiCadena = "Me Llamo Eustaquio"

TamanoCadena = Len(MiCadena)

El valor de la variable TamanoCadena pasaría a valer 18.
Hay que tener en cuenta que la función Len también toma en cuenta los espacios vacíos.

1.4 - Función Asc y Chr

La función Asc nos permite obtener el código ASCII de un de terminado caracter.
Ejempos:
Si queremos obtener el código ASCII del caracter "a", que es el número 97 podríamos hacer lo siguiente:
Dim num As Integer

num = Asc("a")
En definitiva la función Asc lleva un solo parámetro de tipo String del cual queremos obtener dicho número.
La Función Chr actúa a la inversa de la función Asc, esto quiere decir, que a partir de un determinado número nos devolverá el caracter ASCII.
Obviamente que en vez de pasarle a la función un parámetro String es decir la letra, debemos pasarle un número ASCII y nos devolverá el carácter asociado.
Ejemplo:
Dim letra As String

letra = Chr(97)
La variable pasa a valer en este caso el caracter "a"

1.5 - Función InsTr

La función InStr se utiliza para buscar una cadena o parte de una cadena dentro de otra cadena.
Si la función encuentra la cadena a buscar devuelve un número que representa la posición donde encontró la cadena, si no la encuentra devuelve un 0.
Los parámetros que lleva esta función son:
InStr (comienzo, Cadena donde buscar , La Cadena a buscar)
Como esta función devuelve un número debemos almacenarla en una variable de tipo numérica para utilizarla.
Ejemplo:
Dim posicion As Integer

posicion = InStr("Estoy tomando mate", "mate")
En este ejemplo la función encontró la cadena "mate" en la posición 15, o sea que la variable posición pasa a valer 15.
Si observamos bien, la función en el primer parámetro, denominado comienzo, nos pide que le digamos desde que posición comenzar a buscar. En nuestro ejemplo, este parámetro lo obviamos, esto quiere decir que comenzará desde la posición 0 de la cadena a buscar. Pero podríamos especificar una posición en particular, por ejemplo desde la 5 , 10 etc..., según lo que necesitemos hacer.

Otro ejemplo de InsTr :
Este ejemplo, muestra como buscar dentro de un control TextBox, el cual tiene dos opciones, un botón para buscar la primera frase, y otro que sigue buscando a partir de donde esté ubicda la selección.
Para armar el ejemplo colocar un Textbox llamado Text_Buscar que es donde se ingresará la frase y otro TextBox llamado Text1 que tendrá el texto. Este ultimo con la propiedad Multiline en True.
También colocar dos CommandButton: Command1 y Command2

vista del ejemplo buscador de frases mediante la función instr

Colocar el siguiente código fuente en el formulario:
Option Explicit

Private m_Pos As Integer


Sub buscar_cadena(ByVal Posicion As Integer)

Dim p As Integer, Frase As String

    Frase = txt_Buscar
    
    p = InStr(Posicion, Text1, Frase)
    
    If p > 0 Then
        m_Pos = p
        
        With Text1
            .SelStart = m_Pos - 1
            .SelLength = Len(Frase)
            .SetFocus
        End With
    Else
        MsgBox "No se encontró la frase", vbInformation
        Text1.SetFocus
    End If
End Sub

Private Sub Command1_Click()
'Busca a pratir de la primera pocición
Call buscar_cadena(1)
End Sub

Private Sub Command2_Click()
'Busca a partir del valor que tenga m_Pos

Call buscar_cadena(m_Pos + 1)

End Sub

Private Sub Form_Load()
Command1.Caption = "Buscar"
Command2.Caption = "Buscar siguiente"
Me.Caption = "Ejemplo de InStr "
End Sub 

Nota: también hay una función similar a Instr llamada InstrRev , y lo que hace es devolver la posición de la primera concurrencia de una cadena dentro de otra cadena, pero comenzando por el extremo derecho de la misma
En este enlace hay un ejemplo que usa la función instrRev
Extraer de un path o ruta, solo la extensión del archivo

Función Left, Right y Mid


Estas funciones son utilizadas para extraer partes de una cadena.
La función Left:
tiene 2 parámetros: El primero es la cadena de la cual se extraerán caracteres, y el segundo un número desde el cual comenzar a extraer caracteres desde la parte izquierda.
Ejemplo:
Dim Cadena As String

Cadena = Left("Ya es la madrugada", 9)

'Cadena, que es un string, sería igual a: "Ya es la"

Función Right:
Es igual que la función Left pero comienza a extraer caracteres desde el lado derecho de la cadena.
La función Mid:
Tiene la misma función que las anteriores pero posee tres parámetros. Su sintaxis es:
Mid (cadena, inicio, longitud)
El parámetro cadena es la cadena a extraer caracteres. El parámetro Inicio es donde comenzar y el parámetro longitud, es la cantidad de caracteres a extraer de la cadena de caracteres
Ejemplos:
Dim nombre As String
nombre = Mid("River perdió la copa", 7, 6)

'La variable nombre sería igual a: "perdió"

Este Otro ejemplo usa la función Mid para realizar un simple efecto tipo máquina de escribir.
Colocar en un formulario un CommandButton y el siguiente código fuente en el form.
Option Explicit

Sub Pausa(Segundos As Double)
    
    Dim inicio As Double
    
    ' Devuelve la cantidad de segundos desde que inicio windows
    inicio = Timer
    
    Do While (Timer - inicio) < Segundos
        ' pausa
        DoEvents
    Loop
End Sub

Private Sub Command1_Click()
            
    Dim texto As String
        
    texto = "... Hola mundo --->>> "
        
    Call MostrarTexto(texto, 0.1, Me)

End Sub

Private Sub MostrarTexto(Frase As String, _
                         Segundos As Double, _
                         Destino As Object)
    
    Dim LenFrase As Integer
    Dim i As Integer
    Dim Caracter As String
    Dim texto As String
    
    LenFrase = Len(Frase)
    
    Do While i <= LenFrase
        Destino.Cls
        
        DoEvents
            i = i + 1
            ' Obtiene el siguiente caracter
            Caracter = Mid(Frase, i, 1)
            ' texto actual
            texto = texto & Caracter
            Destino.Print texto ' Imprimi e/ dibuja el texto
            ' pausa o delay
            Pausa Segundos
        DoEvents
     Loop
End Sub

Private Sub Form_Load()
    Me.FontSize = 12
    Me.Font.Bold = True
    Me.ForeColor = vbRed
    Command1.Caption = " Efecto de texto con mid "
End Sub

Private Sub Form_Unload(Cancel As Integer)
    End
End Sub  



1.6 - Función Str y Val


La función Val convierte una cadena en un número yla función Str un número en una cadena.
Ejemplos:
cadena = "123456"
cadena = Val(cadena)

'Ahora cadena vale 123456

cadena2 = 123456
cadena2 = Str(cadena2)

'Ahora cadena2 vale "123456"



2 - Funciones para el tratamiento de números

Visual Basic posee muchas funciones para tratar números. A continuación las principales funciones.

2.1 - Función Round

La función Round se utiliza para redondear un número decimal, devolviendo un número entero.

Ejemplo:
Dim Mimumero As Long

Minumero = Round(245.8) '(La función devuelve 246)
Minumero = Round(245.3) '(La función devuelve 245)
Minumero = Round(245.5) '(La función devuelve 245)
Round posee un parámetro opcional por si queremos incluir los dígitos decimales.

2.2 - Rnd y Randomize - Números aleatorios

Para generar números aleatorios, Visual Basic incluye 2 funciones: Rnd y Randomize.
La función Rnd devuelve un número aleatorio, y esta posee un solo parámetro.
Ejemplo :
Rnd (número)

Pero para poder generar dichos números aleatorios, debemos utilizar previamente la función Randomize con la siguiente fórmula:
Dim LimiteInferior As Integer
Dim LimiteSuperior As Integer

LimiteInferior = 20

LimiteSuperior = 40


MsgBox Int((LimiteInferior - LimiteSuperior + 1) * Rnd + LimiteInferior)
En el ejemplo anterior, se generarán números aleatorios comprendidos entre el 20 y el 40
Nota: en este enlace podés ver un ejemplo que permite generar números aleatorios no repetidos

Funciones matemáticas

Las principales funciones matemáticas provistas por Visual Basic son:
  • Abs: Devuelve el valor absoluto de una expresión numérica.
  • Atn: Devuelve el arco tangente de un número.
  • Cos: Devuelve el coseno de un ángulo.
  • Exp: Devuelve el número "e" elevado a una potencia.
  • Log: Devuelve el logaritmo natural de un número.
  • Sgn: Devuelve un valor indicando el signo de un número.
  • Sin: Devuelve el seno de un ángulo.
  • Sqr: Devuelve la raíz cuadrada de un número.
  • Tan: Devuelve la tangente de un ángulo.




3 - Funciones de formato

Visual Basic posee varias funciones para darle formato a distintos tipos de datos e información. A continuación se ve algunos ejemplos de las principales funciones:
  • FormatCurrency: Esta función se utiliza para trabajar con números con formato en dinero. Ejemplo:
    si tenemos un número 3 y utilizamos la función nos devolvería "$3".
  • FormatPercent: Esta función es utilizada para trabajar con porcentajes. Ejemplo :
    si tendríamos un número 321, nos devolvería: "32,1%" .
  • FormatDateTime: Esta función trabaja con fechas y horas.
  • FormatNumber: Formatea expresiones números
 

Resultado = FormatPercent(321) 'devuelve: "32.100,00%"
Resultado = FormatCurrency(3)  'devuelve: "$3,00"
Resultado = FormatDateTime("6-8-1978")  'La función devolvería: "06/08/1978"

NumDigitsAfterDecimal: Parámetro de tipo opcional. Este indicará cuantos números decimales devolverá la función:

Ejemplo
cadena = FormatCurrency(325, 3) 'Devuelve: "$325,000"

Ejemplo de la función FormatDateTime

Esta función, en el primer parámetro se le debe pasar la fecha u hora a formatear, y el segundo parámetro es el tipo de formato, pueden ser 5 tipos.
vbGeneralDate, vbLongDate, vbShortDate, vbLongTime y vbShortTime.
Este parámetro es de tipo opcional. al colocar la coma dentro de la función , visual basic despliega la lista de constanetas mencionadas, como muestra el gráfico:
vista de la lista desplegable de la función FormatDateTime con las constantes disponibles

Un ejemplo para ver estos formatos utilizando FormatDateTime: Colocar cinco option Button, cada botón de opción mostrará los diferentes formatos en el caption del formulario, es decir en la barra de título.

vista del formulario con los option button para usar los diferentes valores para la función format

Código en el formulario:
 Private Sub Form_Load()

Option1.Caption = " vbGeneralDate "
Option2.Caption = " vbLongDate "
Option3.Caption = " vbShortDate "
Option4.Caption = " vbLongTime "
Option5.Caption = " vbShortTime "

End Sub
Private Sub Option1_Click()
Me.Caption = FormatDateTime(Now, vbGeneralDate)
End Sub

Private Sub Option2_Click()
Me.Caption = FormatDateTime(Now, vbLongDate)
End Sub

Private Sub Option3_Click()
Me.Caption = FormatDateTime(Now, vbShortDate)
End Sub

Private Sub Option4_Click()
Me.Caption = FormatDateTime(Now, vbLongTime)
End Sub

Private Sub Option5_Click()
Me.Caption = FormatDateTime(Now, vbShortTime)
End Sub

FormatNumber - Ejemplos:

Formatea 0.489698 a 0,49
Dim Numero As Double

Numero = 0.489698
Numero = FormatNumber(Numero, 2, vbFalse)

MsgBox Numero
Formatea 1.958754 a 1,96
Dim Numero As Double

Numero = 1.958754
Numero = FormatNumber(Numero, 2)

MsgBox Numero

Función Format:


La función Format es mas completa que las anteriores funciones, porque puede manejar mas tipos de datos, y no devuelve solo cadenas, esta también puede devolver números y fechas.
La función Format posee dos parámetros:
Format (Expresión, formato)

En el primero debemos colocar cualquier expresión válida. El segundo es opcional y a continuación veremos una descripción de los formatos de VB:
  • GeneralNumber: Devuelve el número sin formato.
  • Currency: Devuelve el número en formato moneda, con el símbolo "$" y 2 decimales a las derecha.
  • Fixed: Devuelve como mínimo un dígito a la izquierda y 2 ala derecha del decimal.
  • Standar: Similar a Fixed pero incluye un separador de miles.
  • Percent: Multiplica el número por cien y le agrega el símbolo "%"
  • True/False: Devuelve Verdadero para un valor distinto de 0,y Falso para 0.
  • On/OFF: Devuelve "Activado" para un valor distinto de 0, y "Desactivado" para 0.
La forma de pasar el parámetro es entre comillas.
Ejemplo:
cadena = Format(75, "Currency") ' Devolvería: "$75,00"

Nota: Si ingresamos un número decimal, debemos utilizar el "." y no la coma "," ya que la coma determina el comienzo de otro parámetro dentro de la función y Visual basic daría error de sintaxis

4 - Funciones de formato para fechas y hora


Ejemplos de los principales Formatos con nombre para el manejo de Fechas y Horas:

Funciones para Fechas

Dim cadena As String

cadena = Format("06/08/78", "General Date") ' Devuelve: "06/08/1978"
cadena = Format("19/08/79", "Long Date") ' Devuelve : "Jueves 19 de Agosto de 1979".
cadena = Format("19/8/79", "Medium Date") ' Devuelve: "19-Ago-1979"

cadena = Format("17:08", "Short Time") ' "05:08"

cadena = Format("17:08", "Medium Time") ' "05:08 PM"

cadena = Format("17:08", "Long Time") ' "05:08:00 PM"




4.1 - Funciones para calcular fechas

Visual basic cuenta con una serie de funciones que nos permiten calcular fechas y horas, por ejemplo generar un intervalo de fechas, sumar y restar fechas y horas y otras operaciones y cálculos
DateAdd : Devuelve un Variant que contiene una fecha que indica el intervalo de tiempo que se ha agregado
DateDiff : Devuelve el número de intervalos de tiempo entre dos fechas determinadas
DatePart : Devuelve una parte específica de una fecha dada
DateSerial : Devuelve un valor Date para un año, mes y día determinados

Ejemplos
El siguiente ejemplo utiliza la función DateDiff para mostrar el itervalo entre dos fechas. El intervalo lo muestra en segundos , minutos, dias, semanas meses y años, como muestra el siguiente gráfico
vista previa del ejemplo en visual basic para usar datediff

Colocar en el formulario un Command1.
Option Explicit

' recibe las dos fechas como parámetros
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Private Sub Calcular(Fecha_Inicial As Date, _
                     Fecha_Final As Date)

    
    Const Formato As String = "#,##0"
    
    Me.Cls
    Me.Print "Calcular Intervalos entre las fechas  " & Fecha_Inicial & _
             "  hasta :" & Fecha_Final & vbNewLine & String(150, "-") & vbNewLine
                                   
    
    Me.Print Format(DateDiff("s", Fecha_Inicial, Fecha_Final), Formato) & " segundos"
    Me.Print Format(DateDiff("n", Fecha_Inicial, Fecha_Final), Formato) & " minutos"
    Me.Print Format(DateDiff("h", Fecha_Inicial, Fecha_Final), Formato) & " horas"
    
    Me.Print Format(DateDiff("y", Fecha_Inicial, Fecha_Final), Formato) & " dias"
    Me.Print Format(DateDiff("WW", Fecha_Inicial, Fecha_Final), Formato) & " semanas"
    Me.Print Format(DateDiff("m", Fecha_Inicial, Fecha_Final), Formato) & " meses"
    Me.Print Format(DateDiff("yyyy", Fecha_Inicial, Fecha_Final), Formato) & " años"
    
End Sub

Private Sub Command1_Click()
    ' le pasa las dos fechas a la función
    Call Calcular("01/01/2000", Date)
End Sub

Private Sub Form_Load()

    Me.AutoRedraw = True
    Command1.Caption = "calcular intervalos "

End Sub

Ejemplo con DateAdd
Lo siguiente, muestra como añadir y restar fechas
' agrega 10 años a la fecha actual
MsgBox DateAdd("yyyy", 10, Date)

' Agrega cinco meses a la fecha actual
MsgBox DateAdd("m", 5, Date)

' resta 1 dias a la fecha actual ( usa el signo -)
MsgBox DateAdd("y", -1, Date)  

Nota: para restar, usar el signo negativo, como se usa en el último ejemplo.
Para poder restar y agregar segundos a una hora, usar en el parámetro intervalo la "S", para minutos usar la "n", para horas la "h", para restar y sumar semanas la "ww"

Truco: Solo letras en los TexTbox (Windows Forms) – VB y CSharp

Hay ocaciones que en nuestras aplicaciones debemos controlar lo que el USUARIO deberia escribir en los TextBox… recuerden que esas personitas son experto para hacer que nuestras aplicaciones den un error y mas en los campos que solo debe ir TEXTO en ves de numero… por ello aqui les dejo este pequeño truquillo.

Por cierto para que funcione deben codificar el evento KeyPress del TextBox.
En Visual Basic:
Private Sub txtPruebaTexto_KeyPress(ByVal sender As Object, _
                              ByVal e As System.Windows.Forms.KeyPressEventArgs) _
                              Handles txtPruebaTexto.KeyPress

    If Char.IsLetter(e.KeyChar) Then
        e.Handled = False
    ElseIf Char.IsControl(e.KeyChar) Then
        e.Handled = False
    ElseIf Char.IsSeparator(e.KeyChar) Then
        e.Handled = False
    Else
        e.Handled = True
    End If
End Sub
En Visual C#:
private void txtPruebaTexto_KeyPress(object sender, KeyPressEventArgs e)
       {
           if (Char.IsLetter(e.KeyChar))
           {
               e.Handled = false;
           }
           else if (Char.IsControl(e.KeyChar))
           {
               e.Handled = false;
           }
           else if (Char.IsSeparator(e.KeyChar))
           {
               e.Handled = false;
           }
           else
           {
               e.Handled = true;
           }
       }

Links donde puedes hacer diferentes menus

http://www.forosdelweb.com/f13/como-hacer-menu-con-java-script-537645/
http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm
http://www.tunait.com/javascript/generador/generadorformu.php
http://www.miguelmanchego.com/2009/dropdown-menu-desplegable-ajax-jquery/

Link para codigo de conexion en diferentes plataformas

http://www.connectionstrings.com/

Las hojas de estilo en cascada y explicamos una serie de efectos rápidos e interesantes que se pueden hacer con ellas.

CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores...

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera.

Para empezar

Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo. En un principio vamos a utilizar la manera más directa de aplicar estilos a los elementos de la página, mas adelante veremos la declaración en archivos externos. Para ello, y esto es la primera lección de este artículo, vamos a conocer un nuevo atributo que se puede utilizar en casi todas las etiquetas HTML: style.

Ejemplo:

<p style="color:green;font-weight:bold">El párrafo saldrá con color verde y en negrita</p>

Dentro del atributo style se deben indicar los atributos de estilos CSS separados por punto y coma (;). Durante este artículo vamos a conocer muchos atributos de CSS, los dos primeros que hemos visto aquí son:

Color: indica el color del contenido la etiqueta donde estemos utilizándolo, generalmente indica el color del texto.

Font-weight: indica el grosor del texto. Bold sirve para poner en negrita.

Color en los enlaces

Con HTML definimos el color de los enlaces en la etiqueta <body>, con lo atributos link, vlink y alink. Esto nos permite cambiar el color de los enlaces para todo el documento, pero ¿Y si queremos cambiar el color de un enlace en concreto, para que tenga otro color que el definido en la etiqueta <body>?

Para hacer esto utilizaremos el atributo style dentro del enlace:

<a href="mienlace.html" style="color:red">

Así saldrá el enlace en color rojo, independientemente de lo definido para todo el documento.

Espaciado entre líneas

Con CSS podemos definir el espacio que hay entre cada línea del documento, utilizando el atributo line-height. Por ejemplo, podemos definir que para todo un párrafo el espacio entre cada una de sus líneas sea 25 pixels:

<p style="line-height: 25px;">
Un párrafo normal en el que cada una de las líneas está separada 25 pixels de la otra. Hay que poner suficiente texto como para que se vean 2 líneas, así saldrán separadas
</p>


Espaciado entre caracteres

Se puede definir también el espacio entre cada carácter. Esto se hace con el atributo de CSS letter-spacing. Veamos un ejemplo:

<p style="letter-spacing:12cm">
Este párrafo tiene las letras espaciadas por 1 centímetro.
</p>


Este atributo, al igual que ocurre con muchos otros de CSS, no está soportado por todos los navegadores. En concreto Netscape, en su versión 4 todavía no lo incluye.

Enlaces sin subrayado

Uno de los efectos más significativos y fáciles de realizar con CSS es eliminar el subrayado de los enlaces de una página web. Existe un atributo que sirve para definir la decoración de un texto, si está subrayado, tachado, o si no tiene ninguna de estas "decoraciones". Es el atributo text-decoration, en este caso indicaremos en un enlace que no queremos decoración:

<a href="mipagina.html" style="text-decoration:none">

Incluir estilos para todo un sitio web


Una de las características más potentes de la programación con hojas de estilo consiste en definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas.

Veamos ahora todo el proceso para incluir estilos con un fichero externo.

1- Creamos el fichero con la declaración de estilos

Es un fichero de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es un poco distinta que la sintaxis que utilizamos dentro del atributo style. Sería erróneo incluir código HTML en este archivo: etiquetas y demás. Podemos ver un ejemplo a continuación.

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}


2- Enlazamos la página web con la hoja de estilos

Para ello vamos a colocar la etiqueta <LINK> con los atributos
  • rel="STYLESHEET" indicando que el enlace es con una hoja de estilo.
  • type="text/css" porque el archivo es de texto, en sintaxis CSS.
  • href="estilos.css" indica el nombre del fichero fuente de los estilos.
Veamos una página web entera que enlaza con la declaración de estilos anterior:

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
<p>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
</p>
</body>
</html>


Las CSS tienen mucho más jugo

Las Hojas de Estilo en Cascada son un estándar muy amplio, con unas especificaciones y posibilidades muy grandes. En este artículo hemos visto unos cuantos efectos interesantes que realizar aunque no tengamos ningún conocimiento previo. Sin embargo, lo mejor para trabajar con esta tecnología es conocerla bien, gracias a ello, los resultados serán mucho más sorprendentes.

Codigo para hacer pestañas

<html>
    <
head
>
        <
title
>
            
Pestañas
        
</title
>
        <
script language="javascript"
>
            function 
ocultarTodo
()    {
                
indicadores document.getElementById("cabecera").getElementsByTagName("div"
);
                for (var 
0indicadores.length
++)
                    
indicadores[i].style.display "none"
;

            }
        
</script>     </head>

    <body>
        <div align=center>
            <div id="cabecera" >
                <span onclick="ocultarTodo(); document.getElementById('cuerpo1').style.display = 'block'"
                    style="background-color: #eeeeee; border-width: 2px; border-style: ridge ridge none ridge; border-color: red;">
                    Mostrar capa 1
                </span>
                &nbsp;
                <span onclick="ocultarTodo(); document.getElementById('cuerpo2').style.display = 'block'"
                    style="background-color: #dddddd; border-width: 2px; border-style: ridge ridge none ridge; border-color: blue;">
                    Mostrar capa 2
                </span>
                <div id="cuerpo1" style="width: 80%; border: 1px none red; background-color: #eeeeee; display: block;">
                    Este es el contenido de la capa 1
                    <br />
                    <br />
                    <br />
                </div>
                <div id="cuerpo2" style="width: 80%; border: 1px none blue; background-color: #dddddd; display: none;">
                    Este es el contenido de la capa 2
                    <br />
                    <br />
                    <br />
                </div>
            </div>
        </div>
    </body
</html> 

Formularios

La forma más sencilla de lograr que nuestros usuarios se pongan en contacto con nosotros es utilizando el correo electrónico, con el enlace que vimos en el tema de enlaces. Pero a veces, necesitamos ir más allá, queremos una respuesta, o que el usuarios pueda elegir un entre una serie de opciones etc. Para este tipo de casos utilizamos formularios.
A través de los formularios se puede:

a) Permitir que nuestros usuarios nos envíen información, directamente a nosotros, en cuyo caso la información viaja a través del correo.
b) Si disponemos de un lenguaje del lado del servidor, podemos procesar los datos introducidos por el usuario y construir páginas específicas en función de los datos introducidos.


En este manual sólo vamos a tratar el envío de datos de los formularios a través de correo electrónico sin entrar en cgis o lenguajes del servidor puesto que nos saldríamos completamente del HTML. Si queréis saber más sobre programación del lado del servidor, podéis consultar el foro de páginas dinámicas o el manual de php.


ETIQUETAS BÁSICAS
<form> Abre un formulario
</form> Cierra un formulario
Nos quedaría así

@@|| Código: ||
|| <form>
   [Cuerpo del formulario con los distintos elementos y cajas del formulario
   [boton de envío y borrado]
</form> ||
@@


LA ETIQUETA DE INICIO:
La etiqueta de inicio de un formulario es muy importante puesto que en ella definimos muchas cosas como el método por el que vamos a enviar el formulario, de que tipo de datos se trata, y el nombre del formulario.
NOTA: Acostumbraos a ponerle nombre a los formularios desde el principio puesto que es el nombre el que identifica el elemento tanto en los correos que recibamos como si más adelante queremos hacer algo de programación necesitaremos esos nombres para referirnos a los distintos elementos del formulario.
En nuestro caso, que vamos a mandar nuestro formulario por correo electrónico nuestra etiqueta de inicio quedará así:

@@|| Código: ||
|| <form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo"> ||
@@


NOTA: En el caso de los formularios enviados por correo electrónico es necesario que el usuario tenga bien configurado el correo, de no ser así el formulario no funcionará.
El atributo ACTION le dice al navegador que acción debe emprender cuando se pulse el botón enviar del formulario, en este caso como lo vamos a enviar por email, lo indicamos así, tal y cómo lo haríamos en un enlace "mailto:correo@electronico.com" Si fuesemos a utilizar por ejemplo un script de php para que procesara el formulario, pondríamos aquí la dirección de ese script action="procesa_formulario.php".
El atributo METHOD=POST hace que los datos sean enviados directamente sin ningún tipo de proceso intermedio.
Con ENCTYPE="TEXT/PLAIN" conseguimos que los datos se envíen como un fichero de texto, sin codificar, si no añadiéramos esto, recibiríamos los datos codificados y no entenderíamos nada al recibir el correo. Si fuéramos a procesarlo, en vez de a enviarlo por correo, no podríamos este campo, así los datos cogerían su valor por defecto.
Con NAME="APRENDIENDO" le damos un nombre único a nuestro formulario, de momento para el HTML puro no nos va a servir de mucho, pero si después queremos procesar scripts va a ser fundamental. Otras veces os vais a encontrar con qué tenéis que maquetar un formulario para el cual ya existe un script en cuyo caso el "name" os lo dará un programador.
Antes de explicar los distintos campos de los formularios, vamos a explicar antes que nada el botón de envío y el botón de borrado. He decidido hacerlo así porque una de las cosas que más me desconcertó cuando aprendía los formularios es dónde se colocaba el elemento <form> respecto a las demás etiquetas; y cómo solían explicar cada campo por separado, no se veían ejemplos de cómo funcionaba un formulario completo. Así que vamos a ver lo en este orden: El botón de envío, el botón de borrado, y luego nos meteremos con los campos del formulario propiamente dichos.
EL BOTÓN DE ENVIO
Todos los formularios que queramos que sirvan para algo tienen que llevar un botón de envío, puesto que si el usuario no nos puede enviar los datos ¿para que sirve el formulario? Para adornar.

@@|| Código: ||
|| <input type="submit" value="Enviar" /> ||
@@


NOTA: imput no tiene etiqueta de cierre por lo que utilizamos />
Con type definimos que se trata de un botón de envío, y mediante value definimos el texto que aparece en el botón. En vez de "enviar" podríamos haber puesto "pulsame ya".
Ahora con un elemento más nuestro formulario nos quedaría así:

@@|| Código: ||
|| <form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">
   [Cuerpo del formulario con los distintos elementos y cajas del formulario]<br />
   <input type="submit" value="Pulsame ya" />
</form> ||
@@


Ya con esto hasta podemos ver cómo quedaría nuestro formulario en pantalla.
EL BOTÓN DE BORRADO
Los formularios suelen incorporar también un botón de borrado de datos, pulsando sobre este botón, se borran todos los datos que haya escritos en el formulario:@@|| Código: ||
|| <input type="reset" value="Borrar"> ||
@@


Con type definimos que se trata de un botón de borrado ("reset", y mediante value definimos el texto que aparece en el botón. En vez de "Borrar" podemos poner: "A la porra los datos". Y nuestro formulario quedaría ahora así:

@@|| Código: ||
|| <form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">
   [Cuerpo del formulario con los distintos elementos y cajas del formulario]<br />
   <input type="submit" value="Pulsame ya" />
                 <input type="reset" value=" A la porra los datos " />
</form> ||
@@


DANDO FORMA AL FORMULARIO CON UNA TABLA
Normalmente habréis visto formularios que aparecen muy ordenaditos, con todos los elementos alineados ¿Cóm lo hacen? Con una tabla, veamos:

@@|| Código: ||
|| <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es">
<head>
<title>Formulario en una tabla </title>
</head>
<body>
<h1>Nuestro formulario</h1>
<form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">
<table width="60%" align="center">
    <tr>
            <th width="60%">Nombre: </th>
         <td width="40%">Fila 1, 2ª Celda</td>
</tr>
   <tr>
         <th width="60%">Apellidos: </th>
         <td> Fila 2, 2ª Celda</td>
</tr>
<tr>
 
         <td colspan="2" align="center">
        <input type="reset" value="Borrar" />
             <input type="submit" value="Enviar" />
      </td>
</tr>
</table>
</form>
</body> </html> ||
@@



CAMPOS DE TEXTO
1.- Cajas de texto corto

@@|| Código: ||
|| <input type="text" name="nombre" /> ||
@@


Este tipo de cajas se suelen utilizar para datos cortos: Nombre, Apellidos, teléfono&#8230;. Utilizarlos para datos más largos, aunque a veces lo he visto, sólo lleva a confundir al pobre usuario que no puede ver lo que está escribiendo.
Otros atributos de las cajas de texto son:
Size: Define el tamaño de la caja, aunque lo definimos en número de caracteres, nos estamos refiriendo sólo al aspecto visual, no al número de caracteres que se pueden meter en la caja de texto. Es decir, si a una caja de texto le definimos de "size" 15, la caja ocupara lo que ocuparían 15 caracteres, y pero podemos escribir más de 15 caracteres.
Maxlength: Este sí indica el número máximo de caracteres que podemos escribir en un formulario

Value: Se trata de un valor predefinido. Si definimos el atributo value, lo que pongamos se verá dentro de la caja de texto. Se puede utilizar para dar pistas al usuario sobre lo que debe escribir dentro del campo de texto.
Vamos a ver un ejemplo completo, en el que hemos definido diferente "size" y "maxlength" jugad con estos atributos para tener clara la diferencia. Veréis que en el campo teléfono solo podéis escribir 9 números a pesar de que el "size" es de 15.

@@|| Código: ||
|| <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es">
<head>
<title>Formulario completo</title>
</head>
<body>
<h1>Nuestro formulario</h1>
<form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">
<table width="60%" align="center">
    <tr>
            <th width="60%">Nombre: </th>
         <td width="40%"><input type="text" name="nombre" size="15" maxlength="30" /></td>
</tr>
   <tr>
         <th width="60%">Apellidos: </th>
         <td> <input type="text" name="apellidos"  size="15" maxlength="30" /></td>
</tr>
<tr>
         <th width="60%">Telefono: </th>
         <td> <input type="text" name="telefono"  size="15" maxlength="9" value="999999999" /></td>
</tr>
<tr>
         <th width="60%">Código postal: </th>
         <td> <input type="text" name="codigo_postal"  size="7" maxlength="5" value="12345" /></td>
</tr>

<tr>
 
         <td colspan="2" align="center">
        <input type="reset" value="  Borrar  " />
             <input type="submit" value="  Enviar  " />
      </td>
</tr>
</table>
</form>
</body></html> ||
@@


2.- Contraseñas
A veces, queremos que el usuario introduzca una contraseña en nuestro formulario. Para que no la vea todo el mundo, se sustituyen los caracteres que introduce por *, lo habréis visto miles de veces. Se hace así:

@@|| Código: ||
|| <input type="password" name="pass"> ||
@@


3.- Campos ocultos
Los campos ocultos no aparecen el en formulario, el usuario no los ve. Pueden parecer inútiles pero, al contrario son muy utilizados cuando se usa programación. o simplemente para mandarnos a nosotros mismos información complementaria.

@@|| Código: ||
|| <input type="hidden" name="Donde" value="Formulario de quejas"> ||
@@


Si incluyéramos este código, en nuestro email nos llegaría:
Donde: Formulario de quejas
Y sabríamos inmediatamente que el mail llega desde el formulario de quejas y no, pongamos por ejemplo del formulario de contacto.

4.- Areas de texto
Es posible que necesitemos que nuestro usuario introduzca un texto más largo, quizá un comentario, una noticia, etc., para ello le proporcionaremos una caja de texto más amplia, de forma que pueda escribir con más comodidad.
Para definir las dimensiones de nuestra área de texto utilizamos:
rows : Número de líneas que va a ocupar el campo de texto. Se pueden escribir más líneas, esto define el tamaño de la caja no del texto.
Define el número de líneas del campo de texto.
cols ; Número de columnas que va a ocupar el campo de texto.

@@|| Código: ||
|| <textarea name="comentario" rows="10" cols="35"></textarea> ||
@@


Para tener un texto predefinido dentro del campo, lo escribimos entre las etiquetas:

@@|| Código: ||
|| <textarea name="comentario" rows="10" cols="35">Por favor díganos que opina de nuestra página</textarea> ||
@@

Mi menú ASP.NET no se ve en Internet Explorer 8: Solución rápida

Internet Explorer 8 ofrece una compatibilidad con los estándares de la W3C sin precedentes en los navegadores de Microsoft (incluso ha pasado el ACID2 test). Se trata de una gran noticia para los programadores Web ya que cuanto más estándar sean todos los navegadores menos esfuerzos para desarrollar interfaces pasaremos pues no hay que estar pegándonos para conseguir que funcione en todos ellos.
Por desgracia esta compatibilidad estricta hará que algunos sitios Web que funcionaban perfectamente en la versión anterior (la 7.0) de IE dejen de hacerlo ahora en la nueva versión, dado el modo diferente de tratar ciertos elementos (sobre todo CSS) que éste tenía. Esto es algo de lo que Microsoft es muy consciente y por eso ha incluído un modo de compatibilidad con IE7 en la última versión. Así, si entramos en una página que se veía perfectamente con IE7 pero ahora no vemos correctamente sólo tenemos que pulsar el botón a tal efecto colocado al lado de la barra de direcciones del navegador para conseguir que la página se renderice exactamente igual que se hacía antes, y problema resuelto:
Esto está bien cuando somos nosotros los usuarios, pero siendo programadores no es algo en lo que debamos confiar mucho. Quiero decir que va a ser mucho esperar que los usuarios de nuestras aplicaciones utilicen esta característica si nuestro sitio no se visualiza correctamente, ya que la mayoría ni siquiera sabrá que existe. Así que debemos ser proactivos y tratar de solucionar esos posibles problemas de visualización y no confiar en que el usuario pondrá la vista de compatibilidad.
La mayor parte de los controles Web que vienen con ASP.NET funcionan sin problemas con Internet Explorer 8. Pero hay uno que es especialmente problemático y que no funcionará tal y como viene de fábrica: el control Menu. Este control sirve para mostrar menús desplegables para navegar por nuestra aplicación.
Cuando añadimos un menú a un formulario Web y lo visualizamos con Internet Explorer 8 lo que pasará es que la parte desplegable del mismo se verá en blanco completamente, así:
Upps!, cosa mala.
¿Cómo podemos solucionarlo?
Obviamente una forma de conseguirlo es forzar que el navegador se comporte como lo hacía Internet Explorer activando desde nuestra página el modo de compatibilidad. Se puede hacer y seguramente lo explicaré en un próximo post, pero eso no deja de ser un "apaño" que deberíamos evitar pues no estamos solucionando el problema, sólo posponiéndolo.
Lo que tenemos que hacer es solucionarlo definitvamente y ello es más fácil de lo que parece. Si conocemos donde está el problema solucionarlo es inmediato. Según reconoce el propio equipo de ASP.NET el problema viene de que asumieron incorrectamente que el valor por defecto del estilo z-index (para posicionamiento vertical de los elementos en la página) de las capas que forman el menú desplegable era un valor concreto, cuando en realidad, según el estándar, este valor por defecto es "auto". El resultado es que IE8 sigue estrictamente el estándar y por lo tanto al no tener un z-index asignado la capa no se muestra.
Entonces, sabiendo esto, la solución es bien sencilla: apliquémosle un z-index a esa capa.
Asi, lo único que hay que hacer es crear un nuevo estilo en la página tal que así:
Como vemos lo único que hacemos es crear un estilo que asigna un valor de z-index. Cualquier valor mayor de 0 será suficiente, pero mejor ponerlo alto para asegurarnos de que las capas del menú pasan por encima de los demás elementos y que así siempre estarán visibles cuando se desplieguen.
Perfecto. Ahora sólo queda asignarle este estilo al control, para lo cual usaremos la propiedad CssStyle de su elemento DynamicMenuStyle:
A partir de ese momento el menú aplicará este estilo adicional a las capas de elementos adicionales (junto con cualquier otro que tuviésemos asignado para darle la estética deseada), y se verá perfectamente bajo IE8:
¡Listo!
Si queremos aplicárselo a todos los controles del mismo tipo podemos crear un archivo Tema de ASP.NET y definirlo dentro de un archivo .skin para reutilizarlo en todas las páginas.
Además, la gente de Microsoft ha sacado hace un mes unos parches para ASP.NET que solucionan, entre otros, este problema. Los podemos descargar desde aquí:

Cerrar ventanas del navegador mediante la programación Javascript

Para cerrar la ventana del navegador debemos utilizar el método close() del objeto window de la vetana que deseamos cerrar. Es muy sencillo, aun así, vamos a ver un ejemplo sobre cerrar ventanas.

El ejemplo consta de una página que tiene un botón que abre una ventana secundaria o popup. Además, tendrá otro botón que cerrará la ventana secundaria. Por su parte, la ventana secundaria tendrá un botón que permitirá cerrarse a ella misma. Luego de tratar este ejemplo comentaremos el caso especial de cerrar la ventana principal desde el popup y las pegas que tiene.

La página principal tendría esta forma:

<html>
<head>
<title>Ventana Principal</title>
<script>
//creamos la variable ventana_secundaria que contendrá una referencia al popup que vamos a abrir
//la creamos como variable global para poder acceder a ella desde las distintas funciones
var ventana_secundaria

function abrirVentana(){
//guardo la referencia de la ventana para poder utilizarla luego
ventana_secundaria = window.open("cerrar_window2.html","miventana","width=300,height=200,menubar=no")
}

function cerrarVentana(){
//la referencia de la ventana es el objeto window del popup. Lo utilizo para acceder al método close
ventana_secundaria.close()
}
</script>
</head>

<body>
Esta es la ventana principal
<form>
<input type=button value="Abrir ventana secundaria" onclick="abrirVentana()">
<br>
<br>
<input type=button value="Cerrar ventana secundaria" onclick="cerrarVentana()">
</form>

</body>
</html>


Contiene un script en la cabecera de la página con las funciones para abrir y cerrar la ventana. Además, como ya se indicó anteriormente en este manual, se debe guardar una referencia a la ventana que se acaba de abrir para poder realizar acciones sobre ella posteriormente, en este caso cerrarla. Como la referencia de la ventana se crea en la función abrirVentana() y luego se utilizará en la función cerrarVentana(), dicha referencia deberá declararse como global o de lo contrario sólo tendría validez mientras la función abrirVentana() estuviera ejecutándose y, cuando pretendiésemos utilizarla en la función cerrarVentana(), nos diría que esa referencia ya no existe.

Así que disponemos de una referencia global a la ventana que va a abrirse y dos funciones que abren el popup guardando la referencia y cerrar el popup utilizando la referencia de la ventana a cerrar. Estas dos funciones se llaman desde dos botones de la página, que hemos colocado dentro de un formulario.

Nota: Hay que señalar que puede haber un error javascript si se pretende cerrar la ventana antes de abrirla. Para evitarlo podemos controlar que realmente la ventana está abierta antes de ejecutar el método close() de su objeto window, pero esa es una práctica que veremos en ejercicios más adelante.

Por su parte, el popup tiene un código como el siguiente.

<html>
<head>
<title>Ventana Secundaria</title>
<script>
function cerrarse(){
window.close()
}
</script>
</head>

<body>

Esta es la ventana del popup

<form>
<input type=button value="Cerrar" onclick="cerrarse()">
</form>

</body>
</html>


Contine tan solo una función para cerrarse ella misma, que lo único que hace es ejecutar el método close() sobre su propio objeto window. También hemos colocado un botón que se ha configurado para llamar a la función que cierra la ventana cuando se le haga clic.


Un detalle sobre cerrar ventanas

En cualquier momento podemos cerrar una ventana secundaria utilizando el método close() del objeto window. En el ejemplo anterior hemos visto cómo se cierran ventanas y es muy sencillo. En cualquier momento podemos cerrar una ventana, pero si intentamos cerrar una ventana que no se ha abierto con Javascript (sin utilizar window.open()) nos saldrá una caja de confirmación que pregunta al usuario si de verdad quiere cerrar la ventana.

Podemos ver esta caja de confirmación al pulsar el botón siguiente, que intentará cerrar esta ventana.
 Es sólo un detalle que no tiene mucha importancia, pero para las personas que nunca han experimentado con el trabajo con ventanas secundarias en Javascript, resultará sorprendente que el navegador haga esa pregunta, que probablemente nunca hayamos visto. Una cosa más, sólo ocurre esto en navegadores modernos, aunque actualmente le va a pasar a casi todos los usuarios.

Como poner acentos en HTML

Hola a Todos
Pongo este tema, por si a alguien le interese, ya que no daba con la forma de ponerle acentos a mis textos en este programa

pero recuerdo que en una de las lecciones estaba
y para ahorrarles el trabajo (por si se les olvidó como a mí)
aqui los dejo solo hay que poner primero
este simbolo &( se usa como and en programacion)
á &aacute;
é &eacute;
í &iacute;
ó &oacute;
ú &uacute;
ñ &ntilde;
entonces si ponemos "reparación"
es: reparaci&oacute;n

Un simple control de servidor ASP.NET: cuadro de mensaje y un cuadro de confirmación

En aplicaciones basadas en web, buzón de mensajes, etc caja de confirmación se usa con mucha frecuencia para alertar al usuario o para pedir confirmación del usuario para una operación importante. En los formularios web, estos cuadros emergentes suelen ser implementado usando JavaScript que se ejecuta en el lado del cliente, por ejemplo, mediante alertas, confirmar las funciones, etc. Una desventaja de esta solución es que el tiempo emergente de las cajas del sistema de forma estática especificada en el lado del cliente en tiempo de diseño, por lo que no puede ser utilizado con flexibilidad en el lado servidor como un componente del lado del servidor, que es muy incómodo, especialmente para los complejos comerciales aplicaciones que tienen la lógica de negocio muy complejo, pero necesario para proporcionar la interfaz de usuario amigable.

En el artículo de Lee Gunn "funcionalidad simple cuadro de mensaje en ASP.NET", que sólo resolvió el problema de la caja de mensajes, pero no mencionó el tema cuadro de confirmación. En este artículo, vamos a introducir un control de servidor simple pero muy práctico que puede realizar la función de buzón de mensajes o cualquier cuadro de confirmación. Es más, la configuración y el uso de este control de servidor es también muy fácil.

Utilizando el código
Para utilizar el control de servidor en el código, primero que hay que añadir el control de servidor como de componentes. NET Framework a la aplicación web. Los pasos detallados son los siguientes:. Haga clic en la "componentes" en la pestaña de la caja de herramientas, haga clic en "Añadir / Eliminar elementos", hay una ventana pop arriba, en el NET Framework, haga clic en "Brower", y seleccionar y agregar el ejecutable de control de servidor desde donde se mantiene en su ordenador. El nombre del archivo es msgBox.dll. A continuación, arrastrar y soltar el control de servidor web a su formulario. (Tenga en cuenta aquí: por favor ponga el control de servidor en la última posición de la forma de la tela, de lo contrario habrá algún resultado inesperado).

El siguiente es el código WebForm1.aspx con el control de servidor en el interior.

<%@ Register TagPrefix="cc1" Namespace="BunnyBear" Assembly="msgBox" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
  AutoEventWireup
="false" Inherits="msgbox_app.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
  name="vs_targetSchema">

</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:Button id="Button1" runat="server" Text="Submit"></asp:Button>
<asp:TextBox id="TextBox1" runat="server" Width="232px" Height="32px">
</asp:TextBox>
<cc1:msgBox id="MsgBox1" runat="server"></cc1:msgBox>
</form>
</body>
</HTML>


Supongamos un escenario simple: al hacer clic en Button1, se abrirá un cuadro de mensaje si no hay entrada de texto en TextBox1, pero si no hay entrada en TextBox1, que se abrirá un cuadro de confirmación que le preguntará si quiere continuar. Correspondiente de clic de botón código de manejo de eventos se enumeran a continuación.

Para que aparezca un cuadro de mensaje, sólo tiene que llamar a alert (cadena de msg) método de control de servidor. Es muy fácil así que no se explican aquí. Principalmente nos presentará como para que aparezca un cuadro de confirmación aquí. El segundo parámetro del método de confirmar (msg cadena, cadena hiddenfield_name) es el nombre de un elemento de campo oculto del formulario web que el control de servidor también pertenece. No es necesario crear explícitamente el componente de campo oculto, el control de servidor va a crear una para usted, utilizando el nombre del campo oculto que proporciona, pero es necesario proporcionar un nombre único campo oculto que se diferencian de los otros componentes en el formulario de la web . El valor original del campo oculto es "0". Cuando el usuario haga clic en "ok" para confirmar la operación, el control de servidor va a cambiar el valor del valor del campo especificado previamente ocultos de "0" a "1".


private void Button1_Click(object sender, System.EventArgs e)
{
  //for the page with only one form  if(TextBox1.Text!=null && TextBox1.Text!="")
     MsgBox1.alert("Please input something in the text box.");
  else
     MsgBox1.confirm("Hello "+ TextBox1.Text +
          "! do you want to continue?", "hid_f");
}

Si el usuario responde al cuadro de confirmación haciendo clic en "OK" o el botón "CANCELAR", la página web se publicarán de nuevo, así que tienes que escribir el código correspondiente a la captura y el proceso que. Que parte del código se pone generalmente en el método Page_Load () del código subyacente de la página ASPX. Comprobando si el valor del elemento de campo oculto del formulario se cambia a "1", lo que significa que el usuario confirme, puede colocar el código de procesamiento correspondiente de la siguiente manera. Por favor, no olvide restablecer el valor del campo oculto de nuevo al valor original "0", de lo contrario algo va a estar mal la próxima vez para invocar el cuadro de confirmación.

private void Page_Load(object sender, System.EventArgs e)
{

   if(IsPostBack)
   {
    //PLEASE COPY THE FOLLOWING CODE TO YOUR Page_Load()     //WHEN USING THE SERVER CONTROL in your page    if(Request.Form["hid_f"]=="1")   //if user clicks "OK" to confirm     {
        Request.Form["hid_f"].Replace("1","0");
          //Reset the hidden field back to original value "0"
        //Put the continuing processing code         MsgBox1.alert("hello " + TextBox1.Text);

    }
    //END OF CODE TO BE COPIED   }
}
Eso es todo. Muy fácil y simple, ¿no? Todo lo anterior código C # está en WebForm1.aspx.cs, el código detrás de WebForm1.aspx.

La otra cosa que tenemos que mencionar es que en el escenario anterior, se supone que WebForm1.aspx sólo incluye un formulario web. En realidad, en ASP.NET, cada página ASPX sólo admite una forma de control de servidor web, por lo que para la mayoría de los casos, la solución anterior es suficiente. Sin embargo, hay también muy pocos los casos de tal manera que en alguna página ASPX, hay una forma de control de servidor web y otras formas tradicionales de HTML, es decir, la página incluye más de una forma web. Usando el control de servidor MsgBox también puede fácilmente resolver este problema. Lo que hay que hacer es poner el msgbox como un elemento de la forma de control de servidor Web y el formulario de la web debe ser el primer formulario de la página web. El proceso de resto se mantiene igual. El WebForm2.aspx en el proyecto de demostración se muestra este caso.
El elemento normal de formulario HTML no es un control de servidor por lo que no se puede publicar de nuevo al código subyacente de la página ASPX, por lo que necesita para escribir el código de procesamiento en otro lugar, en el siguiente ejemplo, los códigos de procesamiento se muestra en la misma página WebForm2.aspx.


<%@ Register TagPrefix="cc1" Namespace="BunnyBear" Assembly="msgBox" %>
<%@ Page language="c#" Codebehind="WebForm2.aspx.cs"
  AutoEventWireup
="false" Inherits="msgbox_app.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm2</title>
<%
if(Request.Form["btn"]!=null)
{

//for the page with more than one formsif(Request.Form["text1"]=="")
{
//Response.Write("Hi");  MsgBox1.alert(
"Button2 clicked. Please input something in the second text box.");
}
else
{
MsgBox1.confirm("Button2 clicked. Hello "+
  Request.Form["text1"].ToString() + "! do you want to continue?", "hid_f2");
}
}

if(Request.Form["hid_f2"]=="1") //if button2 is clicked and user confirmed{
//Your processing code hereMsgBox1.alert("Button2 Clicked and user confirmed. Hello "
  + Request.Form["text1"]);
Request.Form["hid_f2"].Replace("1","0");
}
%>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta
content=http://schemas.microsoft.com/intellisense/ie5
name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<DIV style="LEFT: 56px; WIDTH: 512px;
POSITION: absolute; TOP: 136px; HEIGHT: 128px"

ms_positioning="FlowLayout">
<FORM id="Form1" method="post" runat="server">
<asp:button id="Button1" runat="server" Text="Button1">
</asp:button><asp:textbox id="TextBox1" runat="server"
Width="232px" Height="40px">
</asp:textbox><cc1:msgbox id="MsgBox1" runat="server"></cc1:msgbox></FORM>
<FORM id="Form2" method="post">
<INPUT id="btn" type="submit" value="Button2" name="btn" runat="server">
<INPUT id="text1" style="WIDTH: 224px;
HEIGHT: 31px"
type="text" size="32" name="text1"
runat="server">
</FORM>
</DIV>
</body>
</HTML>


Acerca de los controles de servidor MsgBox
El mecanismo básico de control de servidor MsgBox es realmente muy simple, y puede necesitar más de mejora más adelante, pero la comodidad que trae es también enorme. La clave en el control de servidor es que las salidas del correspondiente código de JavaScript en HTML durante la fase de procesamiento del servidor de control, y utilizar JavaScript para cambiar el valor del campo oculto que se crea para que el campo oculto puede funcionar como una etiqueta que representa el comportamiento del usuario (respuesta del usuario para el cuadro de confirmación). Tenga en cuenta que el control de campo oculto es un elemento puro HTML, no un control de servidor. Sólo de esta manera, se puede acceder en el código JavaScript, y su valor también se publicará en el servidor cuando el formulario se publica. El siguiente es el código fuente para el control de servidor MsgBox, que es bastante fácil de entender si usted sabe un poco del ciclo de vida de servidor ASP.NET control.


using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Text;

namespace BunnyBear
{
/// <summary>/// Summary description for WebCustomControl1./// </summary>[DefaultProperty("Text"),
ToolboxData("<{0}:msgBox runat="server"></{0}:msgBox>")]
public class msgBox : System.Web.UI.WebControls.WebControl
{
//private string msg;private string content;

true
),
Category("Appearance"),
DefaultValue("")>

public void alert(string msg)
{
string sMsg = msg.Replace( "\n", "\\n" );
sMsg = msg.Replace( "\"", "'" );

StringBuilder sb = new StringBuilder();

sb.Append( @"<script language="'javascript'">" );

sb.Append( @"alert( """ + sMsg + @""" );" );

sb.Append( @"</script>" );

content=sb.ToString();
}

//confirmation boxpublic void confirm(string msg,string hiddenfield_name)
{
string sMsg = msg.Replace( "\n", "\\n" );
sMsg = msg.Replace( "\"", "'" );

StringBuilder sb = new StringBuilder();

sb.Append( @"<INPUT type=hidden value='0' name='" +
  hiddenfield_name + "'>");

sb.Append( @"<script language="'javascript'">" );

sb.Append( @" if(confirm( """ + sMsg + @""" ))" );
sb.Append( @" { ");
sb.Append( "document.forms[0]." + hiddenfield_name + ".value='1';"
  + "document.forms[0].submit(); }" );
sb.Append( @" else { ");
sb.Append("document.forms[0]." + hiddenfield_name + ".value='0'; }" );

sb.Append( @"</script>" );

content=sb.ToString();
}

/// <summary>/// Render this control to the output parameter specified./// </summary>/// <param name="output"> The HTML writer to write out to </param>protected override void Render(HtmlTextWriter output)
{
  output.Write(this.content);
}
}
}