Voorbeeldpraatje Aandachtsgebieden KC Web

1
VoorbeeldpraatjeAandachtsgebiedenKC Web
JavaDinsdag 23 Augustus 2005
2
Uitdaging van Aino en Wiene

• Houd een praatje
• Over een interessant, eventueel nieuw onderwerp
• Dat voor iedereen enigszins relevant is of wordt
• Waar je misschien wel wat onderzoek en
  uitzoekwerk voor moet doen
• Waar je in de toekomst misschien nog wel eens op
  aangesproken wordt (de eenoog is zo de koning)
• IN HOOGUIT 10 MINUTEN!!!

3
Eerste Uitdaging.Kies een onderwerp

• Byte Code generatie/manipulatie
• Oracle Rules
• JavaScript en DHTML
• ADF Faces/ Java Server Faces
• Hibernate
• AspectJ en Aspect Oriented Programming
• JFreeChart
• XUL, HTC, Flash, XForms en andere Client Side
  technologie
• Google Maps
• J2EE Design Patterns

4
AJAX

• Asynchronous JavaScript and XML

5
Working Definition of AJAX

• Any method for partially updating the web page
  displayed in the Browser
• based on server-interaction
• without losingfocus

WebServer
6
Working Definition of AJAX

• Any method for partially updating the web page
  displayed in the Browser
• based on server-interaction
• Without losing focus (asynchronous)

7
Relevance of AJAX
8
Implementations of AJAX

• Example Implementations
• Frame refresh
• Based on multiple frames and frame-refresh
• Oracle UIX Partial Page Rendering
• Based on (hidden) IFRAME and DOM Manipulation
• AJAX
• Based on (hidden) XmlHttpRequestObject and DOM
  Manipulation

9
Demo of Repository Object Browser

• Tree with Containers and Elements in Oracle
  Designer
• tree is contained in its own frame
• Whenever a node is expanded for the first time
• additional data is retrieved from the server in
  a hidden frame
• when the document is loaded in the hidden frame,
  it calls aJavaScript function in the top
• and the tree is redrawn by rewriting the
  tree-frame using JavaScript document.write()
• there is no full page refresh!

10
Demo of UIX Partial Page Refresh

• Detail Disclosure
• Tree
• Table sort/navigate
• LOV Select
• LOV Validation
• Derived attribute (manual)

11
Demo of AJAX proper

• Using XmlHttpRequest Object
• With text only response
• With XML contents
• Either GET or POST requests
• To any type of web server object PHP, Servlet,
  Static File, CGI etc.
• Either SYNCHRONOUS or ASYNCHRONOUS

12
The essence of AJAX JavaScriptStart the request
var httpRequest function
startAjaxRequest(url) if
(window.ActiveXObject)
httpRequest new ActiveXObject("Microsoft.XMLHTTP
") else
httpRequest new XMLHttpRequest()
httpRequest.open("GET", url, true)
httpRequest.onreadystatechange function ()
processRequest() httpRequest.send(nu
ll) // startAjaxRequest function
processRequest() ...
//processRequest
13
The essence of AJAX JavaScriptProcess the
response
var httpRequest function
startAjaxRequest(url) ...
function processRequest() var
contentViewer document.getElementById("contentVi
ewer") if (httpRequest.readyState 4)
// readyStates 0 uninitialized, 1 loading,
// 2
loaded, 3 interactive, 4 complete
if(httpRequest.status 200) //
process response as plain text or HTML
contentViewer.innerHTML httpRequest.responseTex
t // process response as XML document
(for example from WebService or static document)
// xmlDoc httpRequest.responseXML
else alert("Error
loading page\n" httpRequest.status ""
httpRequest.statusText)
contentViewer.innerHTML "Error cant get
content (" httpRequest.statusText ")"
else contentViewer.inner
HTML "ltb style'colorred'gtLoading....ltbgt"
//processRequest
14
AJAX Demo - Request HTML from JSP and merge
response into page using innerHTML
Ajax Request
HTML Response (pasted into DIV.innerHTML)
HTML Response (pasted into DIV.innerHTML)
AjaxDivContents.jsp
AjaxRefreshDiv.html
JSTL SQL
database
EMP records
15
Libraries, Resources

• AJAX in WikiPedia
• Introduction and good discussion
• JSON JavaScript Object Notation
• DWR Direct Web Remoting
• Introduction article
• Collection of AJAX Samples and Articles
• AJAX XmlHttpRequestObject with Baby Steps
• http//www.papermountain.org/demos/live/

16
What do you use AJAX for?

• Refresh Data (event-triggered or periodically)
• Derivation/calculation
• Hide/display data
• Fetch Data
• Detail Disclosure
• Expand Tree
• Populate select
• possibly based on other field, such as List of
  Cities constrained by the Continent and Country
• Validations (server side)

17
Discussion on using AJAX

• Perceived responsiveness and level of interaction
  of application
• Instant validations and derivations/calculations
• No loss of focus (asynchronous, no hourglass)
• Ease of XML processing, e.g. WebService
  consumption
• Effects on server and network-load
• More frequent requests
• Much smaller requests and responses
• Increased complexity of application
• Apart from UIX where it is built in, AJAX needs
  to be coded by hand in JavaScript (for Client
  Side of Ajax) use of DHTML and DOM Manipulation
  is pretty advanced stuff
• Less use of JSP or other standard View
  Technology, more Servlets and hand-written Java
  Code (again apart from UIX)

18
Discussion on using AJAX (2)

• JavaScript must be turned on in Browser
• What are the limits?
• You could have a single page in your application
  that has various areas that are partially
  refreshed all the time
• How do you decide what to use AJAX for?
• For example validation of form fields
• how you decide between Client Side JavaScript
  based validation
• and Server Side AJAX fused validation?
• Note both depend on JavaScript!

19
Right on time