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

Presentación del tema: "Creando interfaces de Web ricas con Internet Explorer (ASP.NET)"— Transcripción de la presentación:

1 Creando interfaces de Web ricas con Internet Explorer (ASP.NET)
Carlos Walzer Vemn Sistemas

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

3 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

4 HTML Avanzado Algunos tags

5 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

6 Hojas de Estilo en Cascada
CSS Hojas de Estilo en Cascada

7 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

8 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

9 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

10 CSS – Hojas de estilo en Cascada
Algunos chiches Zoom Cursor pageBreakAfter – pageBreakBefore Filter Scrollbar

11 DHTML HTML Dinámico

12 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

13 DHTML Los objetos y las colecciones Los objetos Window Navigator
Document Location Screen Frames Forms all

14 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

15 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

16 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

17 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

18 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

19 XML Data Islands Data Binding

20 Veamos un XML. <CLIENTES> <CLIENTE>
<CODIGO>QA23</CODIGO> <NOMBRE>Americo Dalla Valle</NOMBRE> <DIRECCION>Salta 518 Avellaneda</DIRECCION> <TELEFONO> </TELEFONO> </CLIENTE> <CODIGO>FR56</CODIGO> <NOMBRE>Maria Laura Sampedro</NOMBRE> <DIRECCION>Barzana 124 Villa Urquiza</DIRECCION> <TELEFONO> </TELEFONO> <CODIGO>DF56</CODIGO> <NOMBRE>Juan Jose Moar</NOMBRE> <DIRECCION>Habana 548 Lomas del Mirador</DIRECCION> <TELEFONO> </TELEFONO> </CLIENTES>

21 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 !!

22 Data Islands de XML. Isla de datos Define datos en HTML.
A partir de Internet Explorer 4.0

23 ¿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.

24 Definiendo una Isla de Datos
En un documento HTML para IE 4.0 <OBJECT width=0 height=0 classid="clsid:550dda d2-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> </TELEFONO> </CLIENTE> </CLIENTES> </OBJECT>

25 ¿Como accedo Dinámicamente?
<XML SRC=“Clientes.xml“ ID=“dsoCLientes”></XML> DSO (Data Source Object) Recordset (similar al de ADO) XMLDocument (XMLDOM)

26 ¿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.

27 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

28 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,

29 Consultas remotas al servidor
XMLHTTP Consultas remotas al servidor

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

31 iXMLHTTPRequest Métodos Propiedades onReadyStateChange abort
responseBody responseStream responseText responseXML status statusText Métodos abort getResponseHeaders open send setRequestHeader

32 Personalizados y Standards
Behaviors Personalizados y Standards

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

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

35 Encapsulamiento Definido por su Interface, de la misma manera que un objeto COM. Su interface provee como todo Objeto: Propiedades Métodos Eventos

36 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

37 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).

38 Elementos XML COMPONENT ATTACH EVENT METHOD PROPERTY Urn ID Name
PARAMETER PROPERTY

39 Objetos DOCUMENT ELEMENT element.document !!

40 Comencemos…. <COMPONENT URN=“VemnBehaviorExample”>

41 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

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

43 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()

44 Métodos <method name="methodName“ internalName="functionName“ dispid=dispID> [<parameter name="parameterID"/>] </method>

45 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>

46 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>

47 Behaviors Standards del IE
SaveFavorite SaveHistory saveSnapshot UserData ClientCaps Download HomePage AnchorClick httpFolder Data Persistance

48 Librería de Behaviors calendar colorpick coolbar coolbutton dataselect
imageRollover mask menu moveable mpc rowover slider soundRollover tooltip

49 Referencias Bibliografía: Links XML IE5 IE5 Dynamic HTML
Editorial Wrox IE5 Dynamic HTML A fondo Dynamic HTML Mc Graw Hill Links

50 Preguntas?

51 Muchas gracias por su participación
Carlos Walzer Vemn Sistemas