uniface 10 ide under the hood
DESCRIPTION
You might have seen a screenshot, or live demo of the new Uniface 10 IDE and you immediately wondered: How was it built, with what technology and what fancy new Uniface features were used? This is your chance to get a peek “under the hood” of the new Uniface 10 IDE. Topics: • Requirements – how did we get to the functional feature set • Design principles – what design principles were used • Technology – what technology is used for the implementation • Architecture – a new Uniface UI concept: view containment • Architecture – data views built with new HTML Forms • Architecture – a single reusable text entry mechanismTRANSCRIPT
Under the hood
v10 IDE
Gerton LeijdekkerSoftware Architect Amsterdam Lab
Agenda1. V10 IDE Demo
2. Requirements / Design principles
3. Technology
4. Architecture – MVC
5. Architecture – View Containment
6. Architecture – Data Views
7. Architecture – Text Entry
V10 IDE Demo
Uniface 10
Uniface 7
Uniface 9
Uniface 5
Uniface 6
Uniface 8
Agenda1. V10 IDE Demo
2. Requirements / Design principles
3. Technology
4. Architecture – MVC
5. Architecture – View Containment
6. Architecture – Data Views
7. Architecture – Text Entry
Technology: Rebuild in Uniface• Arguments pro:
• Dog food new/improved features Hi focus on usability
(short cycle between designer and user)
• Available skill set
• Compatible repository
• No dependency on third party environment
Arguments cons:• No integrated environment
with other technologies• No external communities
GUI Technology: HTMLArguments pro:
• Rich and flexible(HTML5 + CSS3)
• Presentation-logic split
• Unlimited possibilities
• Future proof
Arguments cons:• Additional backlog
– New component type– New widget set
• Unknowns (risk)
• Unlimited possibilities take time
Agenda1. V10 IDE Demo
2. Requirements / Design principles
3. Technology
4. Architecture – MVC
5. Architecture – View Containment
6. Architecture – Data Views
7. Architecture – Text Entry
MVC
Model View Controller
Controller View
Model
User
uses
manipulates refreshes
shows
MVC
Model View Controller
Model Data
Controller View
Data
User
uses
manipulates refreshes
shows
MVC
Controller View
Data
User
uses
manipulates refreshes
shows
navigatessets preferences
Model View Controller
Model Data
Controller:
- Data updates
- ViewState updates
ViewView
MVC
Controller View
Data
User
uses
manipulates refreshes
shows
Model View Controller
Model Data
Controller:
- Data updates
- ViewState updates
Multiple views on the same data
navigatessets preferences
(SVC)
ViewView
MVC - Implementation
Controller View(form)
Data
User
uses
manipulates refreshes
shows
navigatessets preferences
Controller(svc) View
(frm)
View(frm)
View(frm)
MVC - Implementation
MVC - Implementation
layout layout layout
Struct
data Frame in frame
Event Handler
ViewState(.zip)
$data$$viewState$
Refresh
Modifies
Repository
ide.exe
Event Handler
MVC - Implementation
ViewFRM
ViewFRM
ViewFRM
ControllerSVC
ide.exeView
FRMView
FRMView
FRM
ViewFRM
ViewFRM
ViewFRM
Event Handler
MVC - Implementation
ViewFRM
ViewFRM
ViewFRM
ControllerSVC
ControllerSVC
ControllerSVC
ide.exeView
FRMView
FRMView
FRM
ViewFRM
ViewFRM
ViewFRM
Event Handler
MVC - Implementation
ViewFRM
ViewFRM
ViewFRM
ControllerSVC
ControllerSVC
ControllerSVC
Component EditorEntity Editor
Include Library Editor…
Main ControllerSVC
ViewFRM
ViewFRM
ViewFRM
Agenda1. V10 IDE Demo
2. Requirements / Design principles
3. Technology
4. Architecture – MVC
5. Architecture – View Containment
6. Architecture – Data Views
7. Architecture – Text Entry
ViewController ViewViewView
View
View
Controller View
View
Controller
Controller
FormContainer widget
FormContainer widget
FormContainer widget split-bar
split-bar
edit-boxes / buttons / tab-strips / grids
edit-boxes / buttons / tab-strips / grids
edit-boxes / buttons / tab-strips / grids
Controller
Container View
Data View
Data View
Data View
Controller
Container View
Data View
Data View
Data View
Controller
FormHTML Form
HTML FormHTML Form
FormContainer
FormContainer
FormContainer
FormContainer
FormContainer
FormContainer
FormContainer
FormContainer
FormContainer
FormContainer
FormContainer
FormContainer
Agenda1. V10 IDE Demo
2. Requirements / Design principles
3. Technology
4. Architecture – MVC
5. Architecture – View Containment
6. Architecture – Data Views
7. Architecture – Text Entry
Data Views: HTML Form NEW in v10
• Mix of FRM and DSP component
• Window, caption, contained, secondary, …
• Paint canvas HTML canvas
• Native Windows widgets HTML widgets
• Paint Tableau HTML Editor
Paint versus HTML canvas
Data Views: HTML Form NEW in v10
• Presentation logic split (id-based binding style)
• Share JavaScript/HTML-runtime with DSPs
• Connected + stateful (implicit websave/webload)
• Shares HTML rendering engine with HTML Widget
HTML Controls
• HTML 5 controls set
• AttributesOnly (Field and Occurrence level)
• StaticText
• RawHTML
• Picture
• …
HTML Forms in IDE
• Custom set of static controls (build in HTML/4GL)
• Look like widgets(Combobox, Tabstrip, Button, Editbox, Grid cell, Column heading)
• Show static text only + Mouse-clickable areas
• All repetition done with occurrences (no valreps)
Popup/Dropdowns
• Separate HTML Popup Forms
• Started on demand
• Reusable
• No proactive distribution of info
• Allows for any fancy layout
• Allow nested tabs, cascading /popup/dropdowns, edit boxes, etc…
Agenda1. V10 IDE Demo
2. Requirements / Design principles
3. Technology
4. Architecture – MVC
5. Architecture – View Containment
6. Architecture – Data Views
7. Architecture – Text Entry
Text Entry Overlay
• Separate overlay form (popup)
• Started on demand
• Only one!
• No (pre) distribution info Data type Syntax definition
• Functional rich
Advanced Text Entry box
• Sort of super ProcBox (Scintilla, Notepad++)
• Syntax highlighting, code folding, line numbers, …
• Code completion dropdown
• Syntaxes: Proc, JavaScript, HTML, CSS, Properties, …
• Used for ALL text entry: Single-line Prop Value entry Multi-line Code Editbox Search box, U-Bar
Agenda1. V10 IDE Demo
2. Requirements / Design principles
3. Technology
4. Architecture – MVC
5. Architecture – View Containment
6. Architecture – Data Views
7. Architecture – Text Entry
Summary
• Technology: Uniface
• GUI Technology: HTML Forms
• Architecture: MVC
• View Containment, FormContainer, Popup
• Data Views, HTML Forms
• Text Entry, Scintilla, Code Box
Under the hood
v10 IDE
Thank you