Creando interfaces de Web ricas con Internet Explorer (ASP.NET) Carlos Walzer Vemn Sistemas carlosw@vemn.com.ar

Premisa 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.

Agenda 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

HTML Avanzado Algunos tags

HTML Avanzado 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

Hojas de Estilo en Cascada CSS Hojas de Estilo en Cascada

CSS – Hojas de estilo en Cascada Que son? Formas de definir los estilos En linea STYLE="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

DHTML HTML Diná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 document.write Pasando argumentos Retornando un valor con window.returnvalue document.write document.createElement Focus, Blur Moveto, moveby Submit setTimeOut Print insertAdjacentHTML, insertAdjacentText

DHTML 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 Event property Named script <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

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> <CODIGO>FR56</CODIGO> <NOMBRE>Maria Laura Sampedro</NOMBRE> <DIRECCION>Barzana 124 Villa Urquiza</DIRECCION> <TELEFONO>4895-4674</TELEFONO> <CODIGO>DF56</CODIGO> <NOMBRE>Juan Jose Moar</NOMBRE> <DIRECCION>Habana 548 Lomas del Mirador</DIRECCION> <TELEFONO>4568-0021</TELEFONO> </CLIENTES>

XML = eXtended Mark-up Language Contiene datos que se autodefinen Introducción a XML Pero, parece HTML? XML = eXtended Mark-up Language Contiene datos que se autodefinen Separa el contenido de la presentación NO LO ES !!

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 Para una Tabla <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,

Consultas remotas al servidor 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 Métodos Propiedades onReadyStateChange abort responseBody responseStream responseText responseXML status statusText Métodos abort getResponseHeaders open send setRequestHeader

Personalizados y Standards 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 ATTACH EVENT METHOD PROPERTY Urn ID Name PARAMETER PROPERTY

Objetos DOCUMENT ELEMENT element.document !!

Comencemos…. <COMPONENT URN=“VemnBehaviorExample”>

Atendiendo Eventos Cualquier evento Standard 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 Standard + OnContentChange + OnDocumentReady

Disparando Eventos Los eventos disparados son atrapados por el documento. <EVENT EVENT = sElement ID = sID />

Propiedades OnPropertyChange Al definir una funcion PUT <PROPERTY NAME = sName ID = sPropertyID INTERNAL = sInternalName GET = sGetFunction PUT = sPutFunction PERSIST = bPersist VALUE = vValue /> OnPropertyChange Al definir una funcion PUT sPropertyID.fireChange()

Métodos <method name="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: Links XML IE5 IE5 Dynamic HTML Editorial Wrox IE5 Dynamic HTML 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?

Muchas gracias por su participación Carlos Walzer Vemn Sistemas carlosw@vemn.com.ar