Creando interfaces de Web ricas con Internet Explorer (ASP.NET)
description
Transcript of Creando interfaces de Web ricas con Internet Explorer (ASP.NET)
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?