Carlos WalzerVemn Sistemas

carlosw@vemn.com.ar

Creando interfaces de Web ricas con Internet Explorer (ASP.NET)

• La primera impresión es la que cuenta.

• La interfaz gráfica y la comodidad en el uso es lo primero que observará nuestro usuario en contacto con la aplicación.

Premisa

• HTML Avanzado

• CSS (Hojas de estilo en cascada)

• DHTML (HTML Dinámico)

• Data Islands con XML (islas de datos XML)

• XML Data Binding

• XMLHTTP (consultas remotas al servidor)

• Behaviors

Agenda

HTML Avanzado

Algunos tags

• FIELDSET• LEGEND• BUTTON • <LABEL ACCESSKEY="P" FOR="control">

<U>P</U>roceso:</LABEL>• Modificadores de TAGS

– TABINDEX=3 – ALT = “Un Tooltip”, TITLE tambien– DISABLED– READONLY

• DIV vs. Span

HTML Avanzado

CSS

Hojas de Estilo en Cascada

• Que son?• Formas de definir los estilos

– En lineaSTYLE="position:absolute; width:60; height:20;“

– En la página<STYLE> BODY {font-family:"Arial"; font-size:10pt; text-align:center} </STYLE>

– En un archivo externo<link rel="stylesheet" href=“MisEstilos.css">

• Los estilos se heredan• Son dinámicos: Objeto style

CSS – Hojas de estilo en Cascada

• Aspectos que modifican– Font y Text– Background y colores– Layout

• Bordes, margenes, padding

– Display– Posición– Impresión– Filtros

CSS – Hojas de estilo en Cascada

• Los Tags <DIV> y <SPAN>

• Propiedades de los estilos– Position (Absolute – Relative)– Display (NO ocupa lugar en el documento)– Visibility (ocupa lugar en el documento)– Overflow– Z-Index

CSS – Hojas de estilo en Cascada

• Algunos chiches– Zoom– Cursor– pageBreakAfter – pageBreakBefore– Filter– Scrollbar

CSS – Hojas de estilo en Cascada

DHTML

HTMLDinámico

DHTML

• Todos Los elementos de una página son objetos programables

• DOM (Document Object Model)• Características

– Estílos Dinámicos– Posicionamiento Dinámico– Contenido Dinámico– Data Binding

• Los lenguajes de scripting

DHTML

• Los objetos y las colecciones• Los objetos

– Window– Navigator– Document– Location– Screen– Frames– Forms– all

DHTML

• Las propiedades– ID – Para identificar un objeto– Name– Tagname – Nombre del Tag– ClassName – Nombre del estilo– Style – Acceso al objeto de estilo del elemento– innerHTML, outerHTML– Value, innerText– window.status– Readystate, Complete– Disabled, Readonly– Length– parentElement– Tabindex, Tabstop– Left, top, bottom, right– Rows, Cols

DHTML

• Los métodos– window.open– window.showModalDialog

• Pasando argumentos• Retornando un valor con window.returnvalue

– document.write– document.createElement– Focus, Blur– Moveto, moveby– Submit– setTimeOut– Print– insertAdjacentHTML, insertAdjacentText

• Los eventos– onClick, onDblClick, onChange– OnBlur, OnFocus– OnLoad, onBeforeUnload– onBeforeCopy, onBeforePaste, onBeforeCut (after)– onContextMenu– onDragOver, onDragStart, ….– onKeyDown, onKeyPress, onKeyUp– onMouse (down, enter, move, out, up, wheel)– onReadyStateChange– onSubmit

DHTML

• Los eventos• Event Bubbling

– cancelBubble• Accediendo al objeto que dispara el evento

con Event.srcElement• Cancelando: event.returnvalue = false• Propiedades Event

– altKey, altLeft, clientX, clientY, ctrlKey, KeyCode

– shiftKey, wheelData

DHTML

• Como suscribir eventos• Inline HTML

– <ELEMENT oncopy = "handler" ... > • All platforms

• Event property– object.oncopy = handler

• JScript only

– object.oncopy = GetRef("handler")• Visual Basic Scripting Edition (VBScript) 5.0 or later only

• Named script– <SCRIPT FOR = object EVENT = oncopy>

• Internet Explorer only

DHTML

XML Data Islands

Data Binding

Veamos un XML.

<CLIENTES>

<CLIENTE>

<CODIGO>QA23</CODIGO>

<NOMBRE>Americo Dalla Valle</NOMBRE>

<DIRECCION>Salta 518 Avellaneda</DIRECCION>

<TELEFONO>4568-8984</TELEFONO>

</CLIENTE>

<CLIENTE>

<CODIGO>FR56</CODIGO>

<NOMBRE>Maria Laura Sampedro</NOMBRE>

<DIRECCION>Barzana 124 Villa Urquiza</DIRECCION>

<TELEFONO>4895-4674</TELEFONO>

</CLIENTE>

<CLIENTE>

<CODIGO>DF56</CODIGO>

<NOMBRE>Juan Jose Moar</NOMBRE>

<DIRECCION>Habana 548 Lomas del Mirador</DIRECCION>

<TELEFONO>4568-0021</TELEFONO>

</CLIENTE>

</CLIENTES>

Introducción a XML

• Pero, parece HTML?

NO LO ES !!XML = eXtended Mark-up LanguageContiene datos que se autodefinenSepara el contenido de la

presentación

Data Islands de XML.

• Isla de datos

• Define datos en HTML.

• A partir de Internet Explorer 4.0

¿Para que sirven las Data Islands?

• Para consultas remotas al servidor

• Pueden ser representadas en Tablas

• Pueden ser dinámicamente atadas a objetos de entrada de datos (data binding).

• Pueden agregarse, modificarse o eliminarse sus datos.

Definiendo una Isla de Datos

• En un documento HTML para IE 4.0

<OBJECT width=0 height=0 classid="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" id="dsoClientes">

<? xml version=“1.0” encoding="UTF-7“ ?>

<CLIENTES>

<CLIENTE>

<CODIGO>QA23</CODIGO>

<NOMBRE>Americo Dalla Valle</NOMBRE>

<DIRECCION>Salta 518 Avellaneda</DIRECCION>

<TELEFONO>4568-8984</TELEFONO>

</CLIENTE>

</CLIENTES>

</OBJECT>

¿Como accedo Dinámicamente?

<XML SRC=“Clientes.xml“ ID=“dsoCLientes”></XML>

• DSO (Data Source Object)– Recordset (similar al de ADO)– XMLDocument (XMLDOM)

¿Con que objetos uso Data Binding?

• Tablas– Table

• Objetos de entradas de datos– Input (text, radio, checkbox, password …)– Textarea– Select, etc.

• Otros Objetos– IFrame– Div– Span– Img, etc.

Data Binding, sintaxis.

• Para un elemento– <INPUT TYPE=TEXTBOX DATASRC="#dsoClientes"

DATAFLD=“Nombre">

• Para una Tabla– DATASRC, DATAFLD– DATAPAGESIZE

• tblClientes.firstPage(), tblClientes.lastPage()• tblClientes.nextPage(), tblClientes.previousPage()

– DATAFORMATAS

DSO (Data Source Object)

• Propiedades– Recordset ( obj similar al de ADO)

• fields• movefirst, moveLast, moveNext, etc.• recordcount• absolutePosition• addNew, update, delete, etc.

– namedRecordset (mantener Jerarquía)– xmlDocument (DOM)

• Eventos– ondatasetcomplete, ondatasetchanged, onrowenter,

onrowexit,

XMLHTTP

Consultas remotas al servidor

iXMLHttpRequest

• Disponible en Microsoft XML 3.0

• Instalado por IE 5.0

• Comunicación HTTP.

• Consultar al servidor sin recargar la página. Que bueno !!!

• Sincrónico o Asincrónico.

iXMLHTTPRequest

• Propiedades– onReadyStateChan

ge– readyState– responseBody– responseStream– responseText– responseXML– status– statusText

• Métodos– abort– getResponseHeaders– open– send– setRequestHeader

Behaviors

Personalizados y Standards

Que es un Behavior

• Comportamiento

• Es un Objeto que potencializa y extiende al Internet Explorer.

• Es una forma de encapsular código Script.

• Al aplicarlo a distintos elementos HTML, estos se ‘comportarán’ de cierta manera.

Facilidad en el diseño Web

• Se aplica un Behavior de la misma forma que una propiedad de “Style”.

• El código puede existir en un solo lugar del Site.

• Cada página que requiera su funcionalidad debe referirse a la almacenada en el Behavior.

Encapsulamiento

• Definido por su Interface, de la misma manera que un objeto COM.

• Su interface provee como todo Objeto:– Propiedades– Métodos– Eventos

Includes Vs. Behaviors

• Es un Objeto.

• Puede ser aplicado a diversos elementos HTML.

• Es capaz de atender a eventos del Documento y reaccionar a ellos.

• No está atado al ID de un objeto

Creando Behaviors

• Su interfaz se define en XML.

• Se pueden escribir en VbScript o JScript.

• Todo esto guardado en un archivo de texto .HTC (HTML Component).

Elementos XML

• COMPONENT– Urn– ID– Name

• ATTACH

• EVENT

• METHOD– PARAMETER

• PROPERTY

Objetos

• DOCUMENT• ELEMENT

• element.document !!

Comencemos….

<COMPONENT URN=“VemnBehaviorExample”>

</COMPONENT>

Atendiendo Eventos

• Suscribiendo un Evento.• Se unen a los manejadores de eventos existentes.

<ATTACH

EVENT = sElement

FOR = “document” | “window” | “element”

ONEVENT(vbs) | HANDLER (js) = sEventHandler

ID = sID

/>

Cualquier evento StandardCualquier evento Standard

+ OnContentChange+ OnContentChange + OnDocumentReady + OnDocumentReady

Disparando Eventos

• Los eventos disparados son atrapados por el documento.

<EVENT

EVENT = sElement

ID = sID

/>

Propiedades

<PROPERTY<PROPERTYNAME = sNameNAME = sNameID = sPropertyIDID = sPropertyIDINTERNAL = sInternalNameINTERNAL = sInternalNameGET = sGetFunctionGET = sGetFunctionPUT = sPutFunctionPUT = sPutFunctionPERSIST = bPersistPERSIST = bPersistVALUE = vValueVALUE = vValue

/>/>

• OnPropertyChange

• Al definir una funcion PUT

sPropertyID.fireChange()

Métodos

<methodname="methodName“internalName="functionName“dispid=dispID>

[<parameter name="parameterID"/>]</method>

Referenciando Behaviors

• Inline Style

• Embedded Style

• Objeto Style (asignación dinámica)

<P STYLE=“behavior:url(Bhvr.htc)”> Hola </P>

<STYLE>P {behavior:url(Bhvr.htc)}</STYLE>

<SCRIPT>function window_onload() {

P1.style.behavior = url(“Bhvr.htc”);}

</SCRIPT>

Hablando con Behaviors

• Referenciando Propiedades

• Llamando a Métodos

• Atrapando Eventos

<P highlight=“#800080” ID=“P1”> Hola </P><SCRIPT>

P1.hightlight = “yellow”;alert (“El color es “ + P1.hightlight);

</SCRIPT>

<SCRIPT>function window_onload(){

P1.Encender();}

</SCRIPT>

<P onApagar=“doApagar()”>Hola</P>

Behaviors Standards del IE

• SaveFavorite• SaveHistory• saveSnapshot• UserData• ClientCaps• Download• HomePage• AnchorClick• httpFolder

Data Persistance

Librería de Behaviors

• calendar • colorpick • coolbar • coolbutton • dataselect • imageRollover • mask • menu • moveable • mpc • rowover • slider • soundRollover • tooltip

Referencias

• Bibliografía:– XML IE5

• Editorial Wrox

– IE5 Dynamic HTML• Editorial Wrox

– A fondo Dynamic HTML• Mc Graw Hill

• Links– www.vemn.com.ar– www.microsoft.com/scripting– www.microsoft.com/xml– http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/

methods.asp?frame=true– www.javascripts.com– www.24fun.com/– www.siteexperts.com– www.asptoday.com– www.actionjackson.com/

Preguntas?

Carlos WalzerVemn Sistemas

carlosw@vemn.com.ar

Muchas graciaspor su participación