1 / 51

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

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.

masako
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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. 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 HTMLDiná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 • 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 • <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>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>

  21. 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: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>

  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 • <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. 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 • Propiedades • onReadyStateChange • readyState • responseBody • responseStream • responseText • responseXML • status • statusText • Métodos • abort • getResponseHeaders • open • send • setRequestHeader

  32. 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 • Urn • ID • Name • ATTACH • EVENT • METHOD • PARAMETER • PROPERTY

  39. Objetos • DOCUMENT • ELEMENT • element.document !!

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

  41. 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 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/> sPropertyID.fireChange()

  44. Métodos <methodname="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: • 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/

  50. Preguntas?

More Related