1. DEV-3: Introduction to the OpenEdge® GUI for .NET
Hope you will walk away with sense of power of environment
Jim Lundy
Principal Product Manager

2. Agenda What is the New UI GUI for .NET Overview Architectural Overview
Visual Designer Demo
Q & A
What we will cover today:
Overview of the New UI project
Discussion of OpenEdge GUI for .NET
A deeper look at the architecture
Demo of new Visual Designer
Questions

3. Under Development D I S C L A I M E R
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.
We are discussing an unreleased technology, so our plans are subject to change.
D I S C L A I M E R

4. What is the New UI?
The New UI is…
A Microsoft® .NET™ based Windows graphical user interface that can replace or be integrated into an existing OpenEdge GUI Client
This is a big project, have working on it for years, completely revitalizes the user interface possibilities
Folks ask: What is it?
New UI
.NET based GUI
Enables you to write new apps, or add onto existing apps within OpenEdge
You don’t have to rip out and replace your app

5. OpenEdge GUI for .NET
Based on Microsoft .NET GUI Technology (WinForms)
De-facto standard for state-of-the-art desktop applications
Purposed for line of business applications
Data-centric UI controls
ADO.NET maps well to a ProDataSet™
Wealth of .NET controls
Microsoft and Infragistics®
Other 3rd party controls
Why focus on a .NET GUI?
95% of desktops are running Windows, making it the de facto UI standard
Purposed for business applications through design patterns, and data-centric architecture.
Provides access to an entire ecosystem of development components:
.NET controls from Microsoft and others
.NET Extenders that work across controls
Even write your own controls

6. What is it Called? New UI New control set
Project name: “OpenEdge Advanced GUI”
Not a product…
A feature of OpenEdge
Develop using OpenEdge Architect or ABL development products
New control set
Project name: “OpenEdge Advanced UI Controls”
Will be a product… optional add-on
Add-on to OpenEdge development products
Bundle of controls from Infragistics that extends the .NET UI development capability
We are calling the new UI capability the “OpenEdge Advanced GUI”.
This is a project name and is expected to change before FCS
Important to understand: this is not a product, it will be a feature of OpenEdge
The Advanced GUI is optimized for OE Architect, but works with other tools
Optional set of controls from Infragistics called “OpenEdge Advanced UI Controls”
This is an optional, add-on product.
These controls have been selected to enhance the default Microsoft development environment

7. What is it Called? New UI New control set
Technology name: “OpenEdge GUI for .NET”
Not a product…
A feature of OpenEdge
Develop using OpenEdge Architect or ABL development products
New control set
Product name: “OpenEdge Ultra Controls for .NET”
Will be a product… optional add-on
Add-on to OpenEdge development products
Bundle of controls from Infragistics that extends the .NET UI development capability
The Advanced GUI technology will be called “OpenEdge GUI for .NET” and
The new controls product will be called “OpenEdge Ultra Controls for .NET

8. Who is the target audience?
ABL Developers using OpenEdge Architect…
Seeking to build extremely modern and appealing .NET graphical user interface…
Through the ease of ABL
Target is ABL developers…building modern apps… with ease of ABL

9. Target audience characteristics
ABL Developers using OpenEdge Architect…
For customers on OpenEdge
Comfortable with Object Oriented concepts
Seeking to build extremely modern and appealing .NET graphical user interface…
Windows oriented for development and user client
Through the ease of ABL
Desires an OpenEdge-centric development environment
This is for customers on OE, and familiar with OO
Focus on Windows… not UNIX
Want to develop in OpenEdge… Not Visual Studio
Advantage: ABL-Infragistics integration
Folks that said: “.NET is too hard” will have an easier time in OpenEdge
Users of .NET with OpenClient can come back… (not an assessed effort)
Everyone can start now, and we plan to add productivity enhancements in future versions that will help customers that are more turn-key oriented with their migration projects

10. Primary Features and Benefits
Leverages the ABL
Single language; No need to learn C#, VB.NET
Data binding between ABL data sources and UI controls
Event binding between ABL methods and UI events
Single design center: OpenEdge Architect
No need to purchase, learn or use non-OpenEdge products (Visual Studio®)
Benefits:
Shorter ramp-up  Higher productivity
Built-in data binding  Purposed for business applications
Built on OpenEdge: Deployment and data source flexibility
Our added value:
Connected .NET to ABL… taught both sides how to play together.
Key features:
Leverages power of (familiar) ABL
Within OE Architect design center
Benefits:
Less to learn, faster ramp-up, more productive
Can stay with ABL for powerful business apps with flexibility of OE

11. Primary Features and Benefits
Integrates with existing GUI (at container level)
Independent of deployment topology (C/S or n-tier)
Extensible with 3rd party controls and custom controls
Adaptable to future UI enhancements or other emerging UIs
Benefits:
Adopt at your own pace
Contemporary Windows look and feel without compromise
Architected for investment protection
Coexist GUI as discussed
Independent of deployment topology
Extensible as discussed… with Infragistics, 3rd-party controls, user controls
Architecture adaptable to future UI technologies
Benefits:
Get contemporary UI without development compromise

12. How does it compare to other OpenEdge UI Technologies?
UI Technology
Primary Use
Tools to Use
OpenEdge GUI for .NET
Build modern state-of- the-art .NET™ GUIs in ABL
OpenEdge Architect 10.2A or above
Progress Dynamics® OpenEdge Studio OpenEdge Architect
Build Windows 95 user interface look and feel
Progress® GUI
Build thick client GUI with thin client deployment characteristics
OpenEdge Studio OpenEdge Architect
WebClient™
Provides the capability to add alternate UIs (.NET & Java™) to OpenEdge Apps
We just added modern UI Development to Progress development tools.
Nothing is going away
OpenClient Toolkit
OpenClient
WebSpeed®
Build Web-browser based apps with zero client footprint
WebSpeed Workshop
OpenEdge Architect OpenEdge Studio 4GL Development System
Character
Build traditional green-screen user interfaces

13. n-Tier Distributed Computing
How does it compare to other OpenEdge UIs?
n-Tier Distributed Computing
Zero Client Footprint
Thin Client Footprint
2-Tier Computing
OpenEdge GUI for .NET
Progress GUI
OpenClient .NET & Java™
No matter what sort of UI style you desire, we have a UI solution to meet your need.
WebSpeed
Progress Character

14. OpenEdge GUI Architecture “Classic”
OpenEdge GUI ( Windows, Frames )
DataSets, Temp-tables
OpenEdge Runtime
Common Infrastructure
Data Access
By now you are all familiar with the Open Edge Reference Architecture (OERA).
This provides a guideline of how to implement a Service Oriented Architecture (SOA) application.
Data Sources

15. GUI for .NET Architecture “New”
Bridge
CLR
.NET GUI
OpenEdge GUI ( Windows, Frames )
GUI Visualization
User interaction and events
Bridge
UI Logic ( events, data binding )
Single Process
GUI components
Data access
I/O blocking
Event handlers
DataSets, Temp-tables
OpenEdge Runtime
Common Infrastructure
CLR and AVM in a single process
Benefit: tight integration, very fast performance. We built the “bridge” (yellow boxes) to make this possible.
The bridge transforms information from the AVM to the CLR.
<click>
Although you wrote ABL code (NEWing .NET objects), the CLR handles the UI visualization, and user interaction.
CLR request such as “run ABL method” is transmitted from CLR to AVM across bridge
In the AVM you define components, access data, do I/O blocking (such as a wait-for statement), and write event handlers.
Data Access
Data Sources

16. ABL Extensions Progress.Windows.Form Progress.Data.BindingSource
ABL forms inherit from this class
InitializeComponent method (generated)
Progress.Data.BindingSource
New ABL object to access Progress data sources
Extends .NET BindingSource class
Binds .NET control to ABL data source (query)
Event Subscription
Subscribe method added to every .NET event
Takes an ABL method / procedure name
Several extensions to Progress GUI environment… our “secret sauce”
Progress.Windows.Forms class
Extends form so Progress GUI windows can work with .NET forms
Progress.DataBindingSource extends .NET binding source so that it can supply ABL data to a .NET control
Can bind to query for ProDataSet, temp table, DB table… supports batching
Events… Added a “subscribe” method that allows you to provide an ABL method or procedure name

17. A Closer Look into the GUI for .NET Presentation Layer
One Process for OpenEdge and .NET Runtime
.NET GUI
frm = NEW Form( ).
frm:Closing:Subscribe( EventHdlr1 ).
WAIT-FOR Application.Run( frm ).
EventHdlr1( ) …
This slide shows a walk through of how the New UI works.
Overview of the ABL Program:
A. There is an ABL statement that NEWs a form (frm).
B. The code subscribes to an event on the form specifying the event handler (EventHdlr1)
Event handler one, EventHdlr1, is a method defined later in the code.
C. The code goes into a blocking state (WAIT-FOR).
The wait-for is waiting on Application.Run, a Microsoft object, and will wait until the form (frm) closes.
Bridge
Bridge
ABL Logic
OpenEdge Runtime
.NET CLR
AVM: ABL Virtual Machine CLR: Common Language Runtime

18. A Closer Look into the GUI for .NET Presentation Layer
DEF VAR frm AS Form.
frm = NEW Form( ).
frm:Closing:Subscribe( FrmClose ).
WAIT-FOR Application.Run( frm ).
Method VOID FrmClose( )
MESSAGE “BYE” VIEW-AS
ALERT-BOX.
END.
.NET GUI 1 4 7 3 5 2
Flow:
NEW a form object.
Since it is a .NET object, it passes the request over the bridge to CLR
The request to NEW a form appears to C# program in the CLR just like any other NEW request.
The form gets NEWed and shown to the user; application goes into WAIT-FOR.
User does some work and closes the form.
Message that the form is closing goes to the CLR.
The event for closing, which is an ABL event, fires.
The CLR recognizes trying to run ABL code so passes the request over the bridge to the OpenEdge AVM.
The AVM runs the event handler, displaying a message.
Bridge
Bridge
ABL Logic 6
OpenEdge Runtime
.NET CLR

19. GUI for .NET ABL Language
Create form and controls
Event subscription & handler methods (default)
Binding to ABL data
Form.cls
Form / Data
.p / .i’s
Alternate location for event handlers
Data source definition and query
Some of what we will see in the demo… easier to reference here.
3 main components when creating a GUI application:
ABL class/program contains all UI items in one place including: control initialization and definition, event subscription and handling.
The programs (.p) or includes (.i) that contain the data.
Contains data source definition and/or query code, and alternate location for Event handlers… You don’t have to code these in the form class.
A startup procedure that provides an entry point to running the application.
You must always start your session with a .p and then you can call an ABL class (or .NET class).
Window
Startup.p
Entry point to run GUI
NEW’s Form.cls
Performs WAIT-FOR

20. GUI for .NET – IDE Architecture
Eclipse, OpenEdge and .NET work together
OpenEdge Architect
Visual Designer
ABL
Editor
Bridge
.NET GUI
CLR
Eclipse
(foundation platform)
AVM
UI Logic
Bridge
Since it would be too tedious to code by hand, there is a Visual Designer. The Visual Designer is a plug-in to Architect.
Just to go over the technology involved – Environment includes Eclipse, which is written in Java, the OpenEdge Architect ABL Editor, which is written in Java, The Visual Designer, which is written in C#.
The Visual Designer uses the same CLR that is embedded for the OpenEdge Client. No need to startup another CLR for the Visual Designer.
An interesting note about the Visual Designer is that it makes use of a lot of the same Microsoft .NET design time architecture that Microsoft Visual Studio uses. Microsoft makes available the .NET design time architecture classes that are used in building Visual Studio, so there was no reason for Progress to write their own classes from scratch since we could use those classes as a starting point. While both OpenEdge Visual Designer and Microsoft Visual Studio use the .NET design time architecture, both also customize these classes in providing their unique features and functionality.

21. Visual Designer WYSIWYG Form creation and editing Class Browser
Built as an Eclipse plug-in for OpenEdge Architect
WYSIWYG Form creation and editing
Define Form
Add .NET controls
Set properties of controls and components
Define data binding objects
Add event subscriptions
Class Browser
Displays class member information about ABL and .NET classes
This slide lists the major features include in the Visual Designer.
You also get a Class Browser tool. This allows you to see classes, methods, data members, properties, parameters, signatures, …
So for example the Class Browser can help when you need to know the available methods and parameters to call .NET objects. The Class Browser allows you to browse these classes, methods, and parameters to see what it available.
The Class Browser can be used to browse on ABL Classes, in addition to .NET classes.

22. Generated code for a form
ABL Editor
(source code tab)
Form class
Define form
property
Define control
variables
This screen shot is showing the ABL Editor (source code tab associated with the Design tab), as opposed to the Visual Design Editor (Design tab) of the file.
The annotations are generated by the Visual Designer when it generates the code. Some of these annotations are read at the time a file is reopened. If the annotations are modified and removed then the Visual Designer may not be able to open the file in Design mode, and instead it will be opened in the Editor. There is no easy way to know what to fix if you ‘break’ this by manually editing the class file and changing the annotations. For this reason, Do not delete or modify the annotations generated by the Visual Designer.
If you do need to recover then you many be able to go back to a previous version using Local History (see the on-line documentation for more information on how to use local history).
The rest of this slide points out the primary code areas that are at the beginning of the generated code including:
The define of the form property - used by ABL to refer to this form
A Constructor – which runs the InitializeComponent procedure to initialize the form and its components
A Destructor – which deletes the object created elsewhere in the code. If the objects are not deleted it creates a memory leak.
Each of these areas is covered in more detail later in this session.
Constructor
Initialize form
and components 22

23. Visual Designer Perspective
Toolbox
Properties
view
Control
Before we start the demo, I just want to point a few things that we will see.
The significant new feature is the Visual Designer.
Central to the Visual Design Perspective are the Design Canvas, the Toolbox, and the Properties view.
Note that the Design Canvas and the Toolbox together makeup the Visual Designer Editor. Although the Toolbox is not a view, there are options to allow you to change the location of the Toolbox relative to the Design Canvas.
Note that depending on the selected object, the properties view changes. A common way to change this is to select a form or control in the design canvas.
Selected
property
Form
Class Browser

24. GUI for .NET Demo
Let’s take a look at the GUI for .NET…

25. Visual Designer Perspective
Properties
view
Toolbox
Control
During the demo, we had a chance to see all of the major functions of the Visual Designer…
Selected
property
Form
Class Browser

26. What reviewers are saying…
“OpenEdge 10.2A offers a superior interface that not only streamlines developer productivity but also allows us to enhance the look-and-feel of our applications for our end-users”
Tony Vertenten, Intris
What one reviewer is saying…
Tony Vertenten of Intris has used the GUI for .NET to add a new code module to his warehousing/logistics application.

27. Areas for Learning in GUI for .NET
ABL
Object-oriented ABL
Create and access UI objects
Call methods, access properties
Subscribe to UI events
.NET Windows Form Framework Classes
.NET Infragistics Windows Form Classes
OpenEdge Architect
WYSIWYG Visual Designer
Properties View and Control Toolbox
Object-oriented Class Browser
What prerequisites do you need in order to start working with the OpenEdge GUI for .NET?
The GU for .NET uses the latest ABL techniques, so knowing OO-ABL and .NET classes from Windows and Infragistics are needed.
The GUI for .NET also utilizes the latest OpenEdge Architect features for Visual Design and Class Browsing.

28. For more information
Tomorrow…
DEV-15 Deep Dive into Developing with OpenEdge GUI for .NET
Shelley Chase, Product Architect, Progress
8:30am, Pacific A/B 28

29. For more information DEV-2 Introduction to the Advanced GUI
Jim Lundy, Product Manager, Progress
DEV-16 Leveraging the Power of the Advanced GUI
Intris, Belgium
DEV-29 Deep Dive into Developing with Advanced GUI
Shelley Chase, Product Architect, Progress
DEV-32 Using the Advanced GUI, Structured Error Handling and SonicMQ to build a Semi-Disconnected Point of Sale
BCP Software, UK
DEV-40 Using SmartObjects with Advanced GUI
ConsultingWerk, Germany
PSDN
+ Beta forum
+ Beta website 29

30. When will it be available?
Development Methodology
Early POC and Usability input from customers
Structured “Technology Preview” approach; Beta; GA
Expected dates
Technology Previews released during 2007
Beta test started Q3 2008
General Availability target Q4 2008
Technology preview approach during 2007
Beta test Q3 2008
Product ship in Q4 2008
You should submit a beta application and get your hands on this hot new technology!

31. Preparing for OpenEdge GUI for .NET
Steps You Can Take Now…
Move to OpenEdge 10… Ideally 10.1C
Separate logic from UI
Consider UI Design
Get familiar with new concepts
Ready?
Beta is under way!
What you should to do now to prepare:
Get to OE10, and OEA now!
Move UI logic to methods (ON trigger)
Consider your UI design… is it still appropriate?
Get familiar with new concepts such as: OO
Sign up for Beta! (At Exchange or back home)
…Ride the Wave!

32. ?
Questions
What are your questions?

33. Thank You
Thank you for your time.