WebCenter User Experience and Interaction From iPads to Xbox

More documents

Recommendations

Info

Touch Events & Gestures: Integrating with Touch Screens Touch integrations with both websites and applications are now playing a major role in both the mobile and tablet world with touch screen monitors and laptops just around the corner. We can already see that Microsoft has put in a great amount of effort with Windows 8 allowing its next generation OS to be fully touch interactive and incorporating Rich HTML5-driven applications. More importantly Oracle also is also recognizing this with its latest WebCenter PatchSet5 released in February. ADF DVT Touch Graph Solution Current Oracle PS5 ADF Touch Enhancements o Data Visualization (DVT) Graph and Gauge now support HTML5 output format, supporting touch gestures for all the major interactivity features, such as selection, zoom and scroll, legend scrolling, time selector, data cursor and magnify lens. A new web.xml context parameter oracle.adf.view.rich.dvt.DEFAULT_IMAGE_FORMAT was introduced to change the default output format to HTML5. In addition, a new value for the imageFormat attribute imageFormat="HTML5" is now supported to allow for explicit usage. o Redistributing Touch Events for Tablets For tablet devices that support touch screens and do not have a mouse, the browser simulates some mouse events, but not all. In order to achieve functional equivalency for these platforms, client components need to be broadcast touch events. A new touch event object AdfComponentTouchEvent has been made available to components when agents support single or multiple "touchScreen" capabilities. Component peers can conditionally register for touch event handling using the same mechanism. © 2012. Fishbowl Solutions, Inc.
ADF Example: AdfDhtmlPanelSplitterPeer.InitSubclass = function(){ // Register event handlers specific to touch devices AdfRichUIPeer.addComponentEventHandlers(this, AdfComponentTouchEvent.TOUCH_START_TYPE, AdfComponentTouchEvent.TOUCH_END_TYPE, AdfComponentTouchEvent.TOUCH_MOVE_TYPE); }; AdfDhtmlPanelSplitterPeer.prototype.HandleComponentTouchMove = function(componentEvent) {...} AdfDhtmlPanelSplitterPeer.prototype.HandleComponentTouchStart = function(componentEvent) {...} AdfDhtmlPanelSplitterPeer.prototype.HandleComponentTouchEnd = function(componentEvent) {...} o o Simulating Context Menu and Tooltip Activation from Touch Gestures for Tablets Webkit on iOS and Android platforms does not raise contextMenu events. Under the desktop platform the contextMenu event is derived from the right mouse click. The tooltip is also not supported by these platforms. For desktop browsers the tooltip is shown on mouse over of elements that have a title attribute. Since these tablet devices do not fire contextMenu events or show tooltips, Oracle has added an enhancement to simulate this event from touch gestures. The default gesture is tap+hold (500ms). However, this gesture is also used to active component drag-and-drop. To resolve this conflict in the cases where drag-and-drop behaviors exist for a component, the context menu and tooltip will be activated on tap+hold+finger-up. Only single finger gestures can be used to active context menus and tooltips. Drag and Drop on Touch Devices On touch devices like tablets, the component drag-and-drop has a different gesture than with the mouse. An item that can be dragged must be activated by a tap-and-hold gesture. The item will change its appearance to indicate that it can be dragged once held long enough. The same gesture applies to reordering table columns. Tap-and-hold the column header, then drag it to reorder the columns. Developing With Other Frameworks When developing with WebCenter Content, Sites or Portal you can incorporate your own touch events if ADF Mobile does not provide the functionality out of the box, and you are looking for a lightweight solution to be supported across devices. o jQuery & ZeptoJS jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development and is one of the most widely used Javascript Frameworks. Currently it does not have support for touch guestures (although you can write your own and there are a wide variety of touch plugins available). If you are planning to support mobile devices, I would recommend taking a look at ZeptoJS; it is a minimalist JavaScript framework for modern web browsers, with a jQuery-compatible syntax aimed to support mobile devices and also incorporates a number of Touch Guestures – [tap, doubleTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown, pinch, PinchIn, PinchOut]. © 2012. Fishbowl Solutions, Inc.
Page 1 and 2: WebCenter User Experience and Inter
Page 3 and 4: Advertisements, Tags, and highlight
Page 5 and 6: Example Xbox Metro UI with Voice En
Page 7 and 8: var flashvars = {speechServer : "ht
Page 9: } // Called if something bad happen
Page 13 and 14: • Example: element.addEventListen
Page 15: 1. Plug the Kinect into your PC or

WebCenter User Experience and Interaction From iPads to Xbox

Create successful ePaper yourself

Delete template?

Save as template?