View
144
Download
11
Category
Preview:
DESCRIPTION
Siebel Open UI fundamentals describes basics of the new Siebel Open UI framework.
Citation preview
OPENUI TECHNICAL
OVERVIEW
© 2011 Oracle Corporation Proprietary and Confidential
Agenda
• Open UI Architecture
• Demo one of the labs
• Deep dive into the lab
• Best Practices
• Do labs 1, 2, 3• Do labs 1, 2, 3
ActiveX UI Architecture Open UI Architecture
Custom
Browser
Scripts
ActiveX Proxy
JavaScript UI
Controls
JavaScript
Library
JQuery Library
JavaScript
Proxy
Layout Data
& Data
bindings
Client/Browser
Design time
Configurable Objects
Pre-compiled Objects
Customizations
Run time configurable
ActiveX UI Controls
Custom
Browser
Scripts
JavaScript
Extension
API
HTML
Composition
Conditional
RenderingLayout
Siebel Web Templates
Styling
Style Sheets
Siebel Object
Manager
Styling
Style Sheets
Layout
HTML
Composition
Conditional
Rendering
Siebel Web
Templates
Siebel HI Client Siebel Open UI
Dynamic: served by App /
Web Server
Run time configurable
UI Objects
Siebel Tools
Configuration
Static: served by App /
Web Server
Add or Modify any CSS
• Dynamically adjusted
– State is saved in user
preferences
– Can be configured
– Can be rendered in
various styles customized
through extensionsthrough extensions
Presentation Model
• Works with the Proxy Data
– Runtime Data
– Metadata
• Determines what logic should be applied
– Client side scripting without requiring the need of the Siebel Server
• Captures behaviors
– Did the user leave a control?
• Exposes properties
– Collect field values
– Set properties
• Supports different logic for different platforms
© 2011 Oracle Corporation Proprietary and Confidential
Physical Renderer
• Simply builds the UI
• Implementation to plug in a third party UI control.
• The same list of records (i.e. same Presentation Model)
can be shown as
• A list applet
• A carousel
© 2011 Oracle Corporation Proprietary and Confidential
•Employee Training – June 2012
• Different behaviors between desktop and mobile
Base Open UI Framework
CSS Styling
Physical RendererPhysical
Renderer
Extension
Custom CSS
Styling
Render the data
Java Script
Presentation ModelPresentation
Model
Extension
Client ProxyHolds Runtime &
Metadata
Formats the data and
applies logic
Manifest File
• Determines what java script files need to be
downloaded to the client browser
• Key Areas:
– Common
– Platform_Common
– Key_Common
– Platform_Key_Common
• Links applet user properties (key values) to java script
files
© 2011 Oracle Corporation Proprietary and Confidential
Presentation Model - Example
© 2011 Oracle Corporation Proprietary and Confidential
Physical Renderer - Example
© 2011 Oracle Corporation Proprietary and Confidential
Custom Extension Mapping
Siebel Tools
Core Manifest File
© 2011 Oracle Corporation Proprietary and Confidential
Java Script Code
Connecting the Dots
Web Server
Client Server
Application Server
Contact Form Request Physical_Renderer : PartialRefreshRenderer
Presentation_Model : PartialRefreshPModel
<KEY NAME="PartialRefreshPModel">
<FILE_NAME> siebel/applet.js </FILE_NAME>
partialrefreshpm.js
Contact Form - Applet User Props
Manifest File
© 2011 Oracle Corporation Proprietary and Confidential
Java
Script
Files
<FILE_NAME> siebel/applet.js </FILE_NAME>
<FILE_NAME> siebel/pmodel.js </FILE_NAME>
<FILE_NAME> siebel/custom/partialrefreshpm.js </FILE_NAME>
</KEY>
partialrefreshpm.js
partialrefreshpr.js
partialrefreshpr.js
partialrefreshpm.js
partialrefreshpr.js
CSS Files
Script Directory
Demo: Partial Page Refresh
© 2011 Oracle Corporation Proprietary and Confidential
Presentation Model - Example
Create the Javascript
NamespaceRegister the current physical model
against the applet’s physical model
Construct the super
class
Extend the Base Model to
support additional logic
© 2011 Oracle Corporation Proprietary and Confidential
support additional logic
Presentation Renderer - Example
Create the Javascript
NamespaceRegister the current physical render
against the applet’s physical renderer
Construct the super
class
Set what gets invoked when
“ShowJobTitleRelatedField”
© 2011 Oracle Corporation Proprietary and Confidential
“ShowJobTitleRelatedField”
changes.
OPENUI TECHNICAL DEEP DIVE
Recommended