You are on page 1of 16

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

ActiveX UI Architecture

Open UI Architecture

ActiveX UI Controls

JavaScript UI Controls

JavaScript Library

Client/Browser

JQuery Library Design time Configurable Objects Custom Browser Scripts ActiveX Proxy Custom Browser Scripts Layout Data & Data bindings JavaScript Proxy Siebel Open UI JavaScript Extension API Pre-compiled Objects Customizations Run time configurable UI Objects

Siebel HI Client

Styling Style Sheets

Styling

Layout

Static: served by App / Web Server

Style Sheets

Layout

HTML Composition

Conditional Rendering

Siebel Object Manager Siebel Tools Configuration

HTML Composition

Conditional Rendering

Dynamic: served by App / Web Server

Siebel Web Templates

Siebel Web Templates

Add or Modify any CSS

Dynamically adjusted
State is saved in user preferences Can be configured Can be rendered in various styles customized through 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

Different behaviors between desktop and mobile

Employee Training June 2012

2011 Oracle Corporation Proprietary and Confidential

Base Open UI Framework


CSS Styling Custom CSS Styling

Java Script
Render the data Physical Renderer Physical Renderer Extension

Formats the data and applies logic

Presentation Model

Presentation Model Extension

Holds Runtime & Metadata

Client Proxy

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

Java Script Code

2011 Oracle Corporation Proprietary and Confidential

Connecting the Dots


Client
Contact Form Request

Server
Contact Form - Applet User Props
Physical_Renderer : PartialRefreshRenderer Presentation_Model : PartialRefreshPModel

Web Server

Application Server

Manifest File
CSS Files partialrefreshpm.js partialrefreshpr.js <KEY NAME="PartialRefreshPModel"> partialrefreshpm.js <FILE_NAME> siebel/applet.js </FILE_NAME> partialrefreshpr.js <FILE_NAME> siebel/pmodel.js </FILE_NAME> <FILE_NAME> siebel/custom/partialrefreshpm.js </FILE_NAME> </KEY>

Java Script Files

Script Directory
partialrefreshpm.js partialrefreshpr.js

2011 Oracle Corporation Proprietary and Confidential

Demo: Partial Page Refresh

2011 Oracle Corporation Proprietary and Confidential

Presentation Model - Example


Create the Javascript Namespace

Register the current physical model against the applets physical model

Construct the super class Extend the Base Model to support additional logic

2011 Oracle Corporation Proprietary and Confidential

Presentation Renderer - Example


Create the Javascript Namespace

Register the current physical render against the applets physical renderer

Construct the super class Set what gets invoked when ShowJobTitleRelatedField changes.

2011 Oracle Corporation Proprietary and Confidential

OPENUI TECHNICAL DEEP DIVE

You might also like