The Evolving Web UI
description
Transcript of The Evolving Web UI
![Page 1: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/1.jpg)
Avrom Roy-FadermanSenior Instructor and Programmer
May 15, 2008
The Evolving Web UI
![Page 2: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/2.jpg)
About Me
• Former member of Oracle JDeveloper/ADF teams
• Eight years’ experience with JDeveloper and ADF
• J2EE consultant for 3 years• [email protected]
![Page 3: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/3.jpg)
Agenda
• A Brief History of Web UIs• Web 2.0 in ADF Faces 10g• Web 2.0 in ADF Faces 11g• Is This the Year of AJAX?• Q&A
![Page 4: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/4.jpg)
A Brief History of Web UIs
• Applets• Traditional Web Applications• “Web 2.0”
![Page 5: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/5.jpg)
Applets
• Java Applications• Stored on Server• Downloaded with HTML Page• Run by a Java Runtime Environment (JRE)
on the Client
![Page 6: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/6.jpg)
Applets: UI Lifecycle
User Interacts with Applet
Applet Contacts Server if needed
Applet Changes Display
Browser Downloads
Applet
Browser Downloads
Page
![Page 7: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/7.jpg)
Applets: Pro and Cons
• Pro:– Highly Interactive
• Cons:– Download Time– Write Once, Debug Everywhere– IE Stopped Supporting Them
• Java applets are virtually dead as a technology
![Page 8: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/8.jpg)
A Brief History of Web UIs
• Applets• Traditional Web Applications• “Web 2.0”
![Page 9: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/9.jpg)
Traditional Web Applications
• Java Applications• Run on Server• Produce HTML
– And possibly Javascript• HTML (+ Javascript) is all that is
downloaded• As far as the user is concerned, just an
HTML page
![Page 10: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/10.jpg)
Traditional Web Applications: UI Lifecycle
ServerCreates
Page
UserInteracts
withForm
BrowserDownloads
Page
UserSubmits
Form
BrowserRequests
Page
![Page 11: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/11.jpg)
Traditional Web Applications: Pros and Cons
• Pros:– Quick Initial Download– HTML is universal; Javascript nearly so
• Cons:– Terrible interactivity– Static feel
![Page 12: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/12.jpg)
A Brief History of Web UIs
• Applets• Traditional Web Applications• “Web 2.0”
![Page 13: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/13.jpg)
Web 2.0 Applications
• Are web applications, like any other• But a very different lifecycle
![Page 14: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/14.jpg)
Web 2.0 Applications: UI Lifecycle
ServerCreates
Page
UserInteracts
withPage
BrowserDownloads
Page
Form andServer
CommunicateConstantly
BrowserRequests
Page
![Page 15: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/15.jpg)
AJAX
AsynchronousJavascriptandXML
![Page 16: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/16.jpg)
AJAX
• Javascript– Can be invoked during use of controls, not just
links/buttons– Sends messages to server– Translate’s server’s responses into page changes
• XML– The format of the sent/received messages
• Asynchronous– Messages can be sent/received in the background– Lets user keep using the page
![Page 17: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/17.jpg)
The Year of AJAX
• 2004• 2005• 2006• 2007• 2008?
![Page 18: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/18.jpg)
Agenda
• A Brief History of Web UIs• Web 2.0 in ADF Faces 10g• Web 2.0 in ADF Faces 11g• Is This the Year of AJAX?• Q&A
![Page 19: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/19.jpg)
Web 2.0 UI Lifecycle Redux
ServerCreates
Page
UserInteracts
withPage
BrowserDownloads
Page
Form andServer
CommunicateConstantly
BrowserRequests
Page
![Page 20: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/20.jpg)
Partial Page Refresh
User Manipulate
s Component
Javascript Event
Fires
Form Submitted to Server
Server Re-Renders
Components
Changes Downloaded as XML
Javascript Makes
Changes to Page
![Page 21: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/21.jpg)
Simple PPR Example
<af:inputText id="myTextField" autoSubmit="true" partialSubmit="true" />
...<af:outputText id="myTextOutput"
value="#{homeBean.calculatedVal}" partialTriggers="myTextField" />
• Manual PPR fires on change– Text field blurs with new value– New selection from dropdown list– …
![Page 22: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/22.jpg)
Automatic PPR• Some components are enabled for
automatic PPR• This fires at various times, depending on
component functionality– Table column sort– Table pagination– Table detail expansion– Tree expansion– …
![Page 23: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/23.jpg)
PPR: Advantages• Bandwidth use is quite small• Server only needs to recreate a portion of
the page• Much more interactive than a traditional
form
![Page 24: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/24.jpg)
PPR: Limitations• Doesn’t help with latency• Helps some with processing time on
server, but doesn’t eliminate it• Submits complete form, so be careful with
file attachments• Not really asynchronous, so interrupts user
![Page 25: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/25.jpg)
Should You Use PPR?
Occasional PPR =
Constant PPR =
GOOD
BAD
![Page 26: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/26.jpg)
Agenda
• A Brief History of Web UIs• Web 2.0 in ADF Faces 10g• Web 2.0 in ADF Faces 11g• Is This the Year of AJAX?• Q&A
![Page 27: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/27.jpg)
ADF Faces 11g• Currently in Technical Preview 4
– With rest of ADF and JDeveloper– Seems pretty stable– Not a production release!
• Targeted for production by end of year• Will include ADF Rich Client
![Page 28: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/28.jpg)
ADF Rich Client• Components with strong Web 2.0 feel• Based on “Active Data Framework”
– Extensive Javascript Framework for interacting with components on the client
– Confusing name
ActiveDataFramework
ApplicationDevelopmentFramework≠
![Page 29: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/29.jpg)
Drag-and-Drop
![Page 30: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/30.jpg)
Tables that Load on Scrolling
![Page 31: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/31.jpg)
Rich Text Editor
![Page 32: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/32.jpg)
Pulse• A pulse can send a request to the server
every few seconds• This can act as a “keep-alive” notice that
the browser window is still open• Keep the session active while it’s
accessible, but shut it down quickly to– Increase security– Unlock rows (for pessimistic locking)– Free resources faster
![Page 33: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/33.jpg)
Selectable Content Delivery• Can limit PPR for tables, trees, popups, etc
– lazy (default) – load a (specifiable) number of rows/nodes as needed, or load popup when first requested
– immediate – load all rows/nodes/popups on page load, and just hide them
• Lazy load is necessary if you have large amounts of content
• For small amounts of content, immediate load ups the interactivity
![Page 34: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/34.jpg)
Immediate Load: Example
<af:table summary="#{nls['example']}" var="row" id="exampleTable" value="#{bindings.Exmp.collectionModel}" contentDelivery="immediate" > . . .</af:table>
![Page 35: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/35.jpg)
Custom Rich Interaction• Server listeners
– Trigger PPR on any Javascript event– Can include rollover, selection, dragging on, etc.– Much richer than old onChange PPR
• Client listeners– Listeners for any Javascript event– Call other Javascript functions– Invoking Javascript (rather than PPR) means no
network round-trip
![Page 36: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/36.jpg)
Client Listeners
• Many different event types
<af:table . . . > . . . <clientListener method="myJavascriptFn" type="selection" /></af:table>
. . .
<af:outputText clientComponent="true" . . . />
• Javascript function can call active data framework
• Need to create client components for function to work on
![Page 37: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/37.jpg)
Agenda
• A Brief History of Web UIs• Web 2.0 in ADF Faces 10g• Web 2.0 in ADF Faces 11g• Is This the Year of AJAX?• Q&A
![Page 38: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/38.jpg)
What Would Make the Year of AJAX?• An AJAX framework that was
– Declarative– Easy to use– Able to take full advantage of AJAX technology
• Is ADF Faces 11g Rich Client that framework?
![Page 39: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/39.jpg)
Oh Man, It’s Close
AsynchronousJavascriptandXML
![Page 40: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/40.jpg)
What I’d Like to See in 12g• Background validation
– Keep on typing when you leave a field– The field is highlighted as soon as the server
notices the problem• Background loading
– Load the first few rows/nodes (as in lazy loading)
– Start loading the rest in the background– Show “Fetching Data” only when the user scrolls
faster than the asynchronous load can keep up with
![Page 41: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/41.jpg)
Asynchronicity And Server Load• There’s a general tradeoff between server
load and interactivity– Traditional web app: Lots of think time– PPR: Less think time– Continuous AJAX: Almost no think time
• Can artificially add client-side delays to pull the tradeoff back in the other direction
![Page 42: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/42.jpg)
Asynchronicity Isn’t for Everything• Dependent selections
– Dropdown lists– List boxes– Radio buttons
• You need the later selection options to refresh before users can select things from them– But could load all possibilities and apply a filter
client-side– A declarative way to do that would be very nice
![Page 43: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/43.jpg)
What to Do in the Meantime• Know that this is still pretty state-of-the-art• Use immediate/lazy loading appropriately• Consider learning the Active Data
Framework and implementing some pure Javascript solutions
• If you’re feeling ambitious, learn about asynchronous calls and do some yourself– Need to know active data framework– Need to know how server listeners get invoked
![Page 44: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/44.jpg)
About Quovera• Books co-authored with
Peter Koletzke and Dr. Paul Dorsey
ORACLE9iJdeveloperHandbook
Also co-authoredwith Duncan
Mills
OracleJdeveloper 10gHandbook
OracleJdeveloper 11gHandbook
Comingsoon
• www.quovera.com• Founded in 1995
• Strong High-Tech industry background• 200+ clients/300+ projects
• Oracle Partner• Design – Development – Instruction –
Mentoring• More technical white papers and
presentations on the web site
![Page 45: The Evolving Web UI](https://reader038.fdocuments.us/reader038/viewer/2022102719/56815d8e550346895dcb9fc1/html5/thumbnails/45.jpg)
Q&A