dev-29: a deep dive into the advanced gui openedge ® 10.2a shelley chase openedge architect peter...

DEV-29: A Deep Dive into the Advanced GUI

OpenEdge® 10.2A

Shelley ChaseOpenEdge Architect

Peter JudgeOpenEdge Principal Software Engineer

© 2008 Progress Software Corporation2 DEV-29: A Deep Dive into the Advanced GUI

Get Ready… We’re Going Under

Attended Advanced GUI Intro Understand OO concepts

• Classes, Inheritance, Methods

Comfortable with OE Architect

Can hold your breath for a really long time…


Demo: Advanced GUI in AutoEdge

Existing application following OERA withOpenEdge GUI, Open Clients, WebSpeed®, Sonic™

• New: Advanced GUI– Main container– Customer maintenance form– Test drive scheduling form

• Existing: Architecture / Code– Replaced View only in existing MVP model

presentation layer– OERA business and data layers– Mix and match for remaining windows


D I S C L A I M E R

Under Development

This talk includes information about potential future products and/or product enhancements.

What I am going to say reflects our current thinking, but the information contained herein is preliminary and subject to change. Any future products we ultimately deliver may be materially different from what is described here.

D I S C L A I M E R


Agenda

ABL for the Advanced GUI• Advanced GUI Architecture

• ABL Container Classes

• Mix and Match Support

• ABL Data Binding

• ABL Event Handlers

• ABL Custom Controls

Using the Advanced GUI in AutoEdge


Advanced GUI Architecture

Single Process for OpenEdge Runtime and .NET™ Common Language Runtime (CLR)

OpenEdge RuntimeOpenEdge Runtime .NET CLR.NET CLR

.NET GUI.NET GUIfrm = NEW Form( ).frm:Closing:Subscribe( EventHdlr1 ).WAIT-FOR Application.Run( frm ).

EventHdlr1( ) …

frm = NEW Form( ).frm:Closing:Subscribe( EventHdlr1 ).WAIT-FOR Application.Run( frm ).

EventHdlr1( ) …

ABL LogicABL Logic

OpenEdge UI (Presenter)

.NET UI (View)BridgeBridgeBridgeBridge


Advanced GUI Architecture

Single Process for OpenEdge Runtime and .NET Common Language Runtime (CLR)


.NET GUI.NET GUIfrm = NEW Form( ).frm:Closing:Subscribe( EventHdlr1 ).WAIT-FOR Application.Run( frm ).

EventHdlr1( ) …

frm = NEW Form( ).frm:Closing:Subscribe( EventHdlr1 ).WAIT-FOR Application.Run( frm ).

EventHdlr1( ) …

ABL LogicABL Logic

OpenEdge UI (Presenter)

.NET UI (View)BridgeBridgeBridgeBridge

4

12

6

7 3 5


.NET Inheritance Stack

UI components inheritance stack includes .NET root class: System.Object

…

CustEntryForm (ABL)

System… Form

Progress. Windows.Form

System… Control

Infragistics… UltraButton

…

…

Progress.Lang.Object (ABL)

System.Object (.NET)

All .NET Classes ABL Forms .NET Controls

.NET Classes = GreenABL Classes = Blue


.NET Windows I/O Blocking Model

Application with a single main form

WAIT-FOR Application:Run( form ).• Used for dashboard and MDI applications

• Other forms are “children” of the main form

• Closing the main form automatically terminates WAIT-FOR

Application with several equal forms

WAIT-FOR Application:Run( ).• Forms shown at the same time or separately

• An event handler needs to terminate WAIT-FOR


ABL Forms in the Advanced GUI

ABL form classes inherit from one of the following:• Progress.Windows.Form

– ABL WINDOW

• Progress.Windows.Dialog– ABL FRAME VIEW-AS DIALOG-BOX

• Progress.Windows.MDIForm– No ABL equivalent

CLASS CustForm INHERITS Progress.Windows.Form:


.NET Controls and ABL Forms

ABL Forms are containers for .NET UI Controls• Microsoft® .NET Windows Form controls

• Advanced GUI Controls (Infragistics® WinForms)

• 3rd-party .NET controls

Other supported components• Non-visual controls

• Extender providers (UltraToolTipManager)

• User-defined ABL custom controls


Demo: ABL Forms

Create a login dialog


ABL Mix and Match UI for Migration

.NET forms and OpenEdge GUI windows can co-exist in same session• One can parent the other• All functionality maintained independently

OpenEdge GUI windows can be embedded in a .NET forms• Client area managed in ABL• Other functionality managed in .NET• Progress.Windows.MDIChildForm• Progress.Windows.WindowContainer


.NET Event Model

Controls define events they publish• Strongly-typed events

• Support a list of handlers (callbacks)

Controls fire an event when an action occurs• All subscribed handlers get called

Subscribe ABL event handlers to events• Information passed in from .NET


Event Handling in the Advanced GUI

Use the Subscribe( ) method to add event handlers written in ABL• Method or internal procedure

• Support for multiple subscribers to one handler

Event handler called when events fires• Two parameters passed in

– Object firing the event ( System.Object )– Event specific arguments ( System.EventArgs)

CustForm:FormClosing:Subscribe( FormClosingHdlr ).


Demo: Event Handler

Validate user on OK button click


.NET Data Binding Model

Progress.Data.BindingSource• Provides data for .NET UI Controls

– How: Provides required APIs to .NET Controls (IList)– Why: OpenEdge data provided as .NET needs– What: Any ABL Query, Buffer or ProDataSet


Progress.Data. BindingSource

ProDataSetCustomer

Lift Line SkiingUrpon FrisbeeHoops Croquet

Order

1 53 01/01/932 81 01/04/933 66 01/04/93

Query

12

3


Power of Progress.Data.BindingSource

Brings ABL data-centric behavior to .NET–Automatic data synchronization

–Automatic updating

–Automatic batching

–Automatic currency

Properties– Updating: AllowEdit, AllowNew, AllowRemove– Current row state: NewRow, RowModified– Typed screen value: InputValue, ChildInputValue– General Information: Position, Count


Data Binding Examples

Simple .NET control ( UltraEdit )

.NET browse-like control ( UltraGrid )

.NET list control ( UltraListView )

editBox:DataBindings:Add ( “Text”, pBS, “OrderNum” ).

list:DataSource = pBS.list:DataTextField = “State”.list:DataValueField = “State-Name”.

grid:DataSource = pBS.


Demo: Databinding

Bind a list of UI styles to the login dialog


ABL Custom Controls: User Controls

Inherits from Progress.Windows.UserControl• Custom ABL control container

• Gives common behavior, look and feel to UI

• Add to control toolbox in Visual Designer

Examples of user controls• Label and editbox

• Address block

• Grid and viewer

CLASS AddrViewer INHERITS Progress…UserControl:


ABL Custom Controls: Inherited Controls

Inherits from existing .NET UI control• Customize existing control

• Gives common behavior, look and feel to UI

• Add to control toolbox in Visual Designer

Sample inherited controls• OK button

• Cancel button

• Read-only grid

CLASS OkButton INHERITS Infragistics…UltraButton:


Demo: User-defined ABL Controls

Create ExplorerBar user control


Agenda

ABL for the Advanced GUI• Advanced GUI Architecture

• ABL Container Classes

• Mix and Match Support

• ABL Data Binding

• ABL Event Handlers

• ABL Custom Controls

Using the Advanced GUI in AutoEdge


Outlook-style Container for AutoEdge

Advanced GUI main form• Dashboard / Container

• Dynamic menu and toolbar– Hook up events

• Re-use existing architecture– OERA and MVP

Run using WAIT-FOR Application:Run ( ).


Demo

AutoEdge main container form


MDI Child Forms

Progress.Windows.MDIChildForm• Hosts OpenEdge GUI windows

– Only client area used– Uses window handle of .w– Menu, statusbar, etc. on main form

Progress.Windows.Form• New Advanced GUI form

– Infragistics: UltraGrid, UltraTree, Ribbon– ParentMDI property on child– Menu, statusbar, etc. on main form


Demo

MDIChild forms and GUI windows


In Summary

Modern, competitive UI in ABL• Uses .NET objects

– Object-oriented ABL– .NET object features (methods, properties, events)– WYSIWYG Visual Designer– Unlimited controls available

• Leverages what you know– ABL (events, business logic, data constructs)– Event-driven programming (WAIT-FOR)– OpenEdge Architect


Relevant Exchange Sessions

DEV-2: Making OpenEdge Architect Work for You DEV-6: Introduction to the OpenEdge Advanced GUI DEV-16: Leveraging the Power of Advanced GUI DEV-32: Using the Advanced GUI, Structured Error

Handling and SonicMQ to build a Semi-Disconnected Point of Sales

DEV-20: Sex and Sizzle – Developing with .NET and OpenEdge 10

DEV-40: Using SmartDataObjects (SDO) with the Advanced GUI


Questions?


Thank You

dev-29: a deep dive into the advanced gui openedge ® 10.2a shelley chase openedge architect peter...

Documents

progress software corporation

openedge gui windows

advanced guiopenedge

ui view

advanced guiabl form

remaining windows

match ui

abl formsabl forms