Carlos Walzer

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

• Carlos Walzer
• Vemn Sistemas
• carlosw_at_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
• ltLABEL ACCESSKEY"P" FOR"control"gt
• ltUgtPlt/Ugtrocesolt/LABELgt
• Modificadores de TAGS
• TABINDEX3
• 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"positionabsolute width60 height20
• En la página
• ltSTYLEgt
• BODY font-family"Arial" font-size10pt
  text-aligncenter
• lt/STYLEgt
• En un archivo externo
• ltlink rel"stylesheet" hrefMisEstilos.css"gt
• 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 ltDIVgt y ltSPANgt
• 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
• ltELEMENT oncopy "handler" ... gt
• 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
• ltSCRIPT FOR object EVENT oncopygt
• Internet Explorer only

19
XML Data Islands

• Data Binding

20
Veamos un XML.

• ltCLIENTESgt
• ltCLIENTEgt
• ltCODIGOgtQA23lt/CODIGOgt
• ltNOMBREgtAmerico Dalla Vallelt/NOMBREgt
• ltDIRECCIONgtSalta 518 Avellanedalt/DIRECCIONgt
• ltTELEFONOgt4568-8984lt/TELEFONOgt
• lt/CLIENTEgt
• ltCLIENTEgt
• ltCODIGOgtFR56lt/CODIGOgt
• ltNOMBREgtMaria Laura Sampedrolt/NOMBREgt
• ltDIRECCIONgtBarzana 124 Villa
  Urquizalt/DIRECCIONgt
• ltTELEFONOgt4895-4674lt/TELEFONOgt
• lt/CLIENTEgt
• ltCLIENTEgt
• ltCODIGOgtDF56lt/CODIGOgt
• ltNOMBREgtJuan Jose Moarlt/NOMBREgt
• ltDIRECCIONgtHabana 548 Lomas del
  Miradorlt/DIRECCIONgt
• ltTELEFONOgt4568-0021lt/TELEFONOgt
• lt/CLIENTEgt

21
Introducción a XML

• Pero, parece HTML?

NO LO ES !!

• XML eXtended Mark-up Language
• Contiene datos que se autodefinen
• Separa el contenido de la presentación

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
• ltOBJECT width0 height0 classid"clsid550dda30-0
  541-11d2-9ca9-0060b0ec3d39" id"dsoClientes"gt
• lt? xml version1.0 encoding"UTF-7 ?gt
• ltCLIENTESgt
• ltCLIENTEgt
• ltCODIGOgtQA23lt/CODIGOgt
• ltNOMBREgtAmerico Dalla Vallelt/NOMBREgt
• ltDIRECCIONgtSalta 518 Avellanedalt/DIRECCIONgt
• ltTELEFONOgt4568-8984lt/TELEFONOgt
• lt/CLIENTEgt
• lt/CLIENTESgt
• lt/OBJECTgt

25
Como accedo Dinámicamente?

• ltXML SRCClientes.xml IDdsoCLientesgtlt/XMLgt
• 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
• ltINPUT TYPETEXTBOX DATASRC"dsoClientes"
  DATAFLDNombre"gt
• 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.
ltCOMPONENT URNVemnBehaviorExamplegt lt/COMPONENT
gt
41
Atendiendo Eventos

• Suscribiendo un Evento.
• Se unen a los manejadores de eventos existentes.

ltATTACH EVENT sElement FOR document
window element ONEVENT(vbs) HANDLER (js)
sEventHandler ID sID /gt

• Cualquier evento Standard
• OnContentChange OnDocumentReady

42
Disparando Eventos

• Los eventos disparados son atrapados por el
  documento.

ltEVENT EVENT sElement ID sID /gt
43
Propiedades
ltPROPERTY NAME sName ID sPropertyID INTERNA
L sInternalName GET sGetFunction PUT
sPutFunction PERSIST bPersist VALUE
vValue/gt

• OnPropertyChange
• Al definir una funcion PUT

sPropertyID.fireChange()
44
Métodos
ltmethodname"methodNameinternalName"functionNa
medispiddispIDgt ltparameter
name"parameterID"/gtlt/methodgt
45
Referenciando Behaviors

• Inline Style
• Embedded Style
• Objeto Style (asignación dinámica)

ltP STYLEbehaviorurl(Bhvr.htc)gt Hola lt/Pgt
ltSTYLEgt P behaviorurl(Bhvr.htc) lt/STYLEgt
ltSCRIPTgt function window_onload()
P1.style.behavior url(Bhvr.htc) lt/SCRI
PTgt
46
Hablando con Behaviors

• Referenciando Propiedades
• Llamando a Métodos
• Atrapando Eventos

ltP highlight800080 IDP1gt Hola
lt/Pgt ltSCRIPTgt P1.hightlight yellow alert
(El color es P1.hightlight) lt/SCRIPTgt
ltSCRIPTgt function window_onload() P1.Encender(
) lt/SCRIPTgt
ltP onApagardoApagar()gtHolalt/Pgt
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?
51
Muchas graciaspor su participación

• Carlos Walzer
• Vemn Sistemas
• carlosw_at_vemn.com.ar