Carlos WalzerVemn Sistemas
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?