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
![Page 1: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/1.jpg)
Under the hood
v10 IDE
Gerton LeijdekkerSoftware Architect Amsterdam Lab
![Page 2: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/2.jpg)
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
![Page 3: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/3.jpg)
V10 IDE Demo
Uniface 10
Uniface 7
Uniface 9
Uniface 5
Uniface 6
Uniface 8
![Page 4: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/4.jpg)
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
![Page 5: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/5.jpg)
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
![Page 6: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/6.jpg)
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
![Page 7: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/7.jpg)
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
![Page 8: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/8.jpg)
MVC
Model View Controller
Controller View
Model
User
uses
manipulates refreshes
shows
![Page 9: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/9.jpg)
MVC
Model View Controller
Model Data
Controller View
Data
User
uses
manipulates refreshes
shows
![Page 10: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/10.jpg)
MVC
Controller View
Data
User
uses
manipulates refreshes
shows
navigatessets preferences
Model View Controller
Model Data
Controller:
- Data updates
- ViewState updates
![Page 11: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/11.jpg)
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
![Page 12: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/12.jpg)
(SVC)
ViewView
MVC - Implementation
Controller View(form)
Data
User
uses
manipulates refreshes
shows
navigatessets preferences
![Page 13: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/13.jpg)
Controller(svc) View
(frm)
View(frm)
View(frm)
MVC - Implementation
![Page 14: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/14.jpg)
MVC - Implementation
layout layout layout
Struct
data Frame in frame
Event Handler
ViewState(.zip)
$data$$viewState$
Refresh
Modifies
Repository
![Page 15: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/15.jpg)
ide.exe
Event Handler
MVC - Implementation
ViewFRM
ViewFRM
ViewFRM
ControllerSVC
![Page 16: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/16.jpg)
ide.exeView
FRMView
FRMView
FRM
ViewFRM
ViewFRM
ViewFRM
Event Handler
MVC - Implementation
ViewFRM
ViewFRM
ViewFRM
ControllerSVC
ControllerSVC
ControllerSVC
![Page 17: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/17.jpg)
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
![Page 18: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/18.jpg)
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
![Page 19: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/19.jpg)
ViewController ViewViewView
![Page 20: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/20.jpg)
View
View
Controller View
View
![Page 21: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/21.jpg)
Controller
![Page 22: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/22.jpg)
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
![Page 23: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/23.jpg)
Controller
Container View
Data View
Data View
Data View
![Page 24: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/24.jpg)
Controller
Container View
Data View
Data View
Data View
![Page 25: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/25.jpg)
Controller
FormHTML Form
HTML FormHTML Form
![Page 26: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/26.jpg)
FormContainer
FormContainer
FormContainer
![Page 27: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/27.jpg)
FormContainer
![Page 28: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/28.jpg)
FormContainer
FormContainer
![Page 29: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/29.jpg)
FormContainer
![Page 30: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/30.jpg)
FormContainer
FormContainer
FormContainer
FormContainer
FormContainer
![Page 31: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/31.jpg)
![Page 32: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/32.jpg)
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
![Page 33: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/33.jpg)
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
![Page 34: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/34.jpg)
Paint versus HTML canvas
![Page 35: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/35.jpg)
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
![Page 36: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/36.jpg)
HTML Controls
• HTML 5 controls set
• AttributesOnly (Field and Occurrence level)
• StaticText
• RawHTML
• Picture
• …
![Page 37: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/37.jpg)
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)
![Page 38: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/38.jpg)
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…
![Page 39: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/39.jpg)
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
![Page 40: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/40.jpg)
Text Entry Overlay
• Separate overlay form (popup)
• Started on demand
• Only one!
• No (pre) distribution info Data type Syntax definition
• Functional rich
![Page 41: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/41.jpg)
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
![Page 42: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/42.jpg)
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
![Page 43: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/43.jpg)
Summary
• Technology: Uniface
• GUI Technology: HTML Forms
• Architecture: MVC
• View Containment, FormContainer, Popup
• Data Views, HTML Forms
• Text Entry, Scintilla, Code Box
![Page 44: Uniface 10 IDE Under the Hood](https://reader038.vdocuments.site/reader038/viewer/2022102519/54b7a9944a7959d3328b45a8/html5/thumbnails/44.jpg)
Under the hood
v10 IDE
Thank you