Uniface 10 IDE Under the Hood
•Download as PPTX, PDF•
1 like•3,658 views
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 mechanism
Recommended
More Related Content
Similar to Uniface 10 IDE Under the Hood
Similar to Uniface 10 IDE Under the Hood (20)
More from Uniface
More from Uniface (20)
Recently uploaded
Recently uploaded (20)
Uniface 10 IDE Under the Hood
- 1. Under the hood v10 IDE Gerton Leijdekker Software Architect Amsterdam Lab
- 2. Agenda 1. V10 IDE Demo 2. Requirements / Design principles 3. Technology 4. Architecture – MVC 5. Architecture – View Containment 6. Architecture – Data Views 7. Architecture – Text Entry
- 3. V10 IDE Demo Uniface 10 Uniface 7 Uniface 9 Uniface 5 Uniface 6 Uniface 8
- 4. Agenda 1. V10 IDE Demo 2. Requirements / Design principles 3. Technology 4. Architecture – MVC 5. Architecture – View Containment 6. Architecture – Data Views 7. Architecture – Text Entry
- 5. 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
- 6. GUI Technology: HTML Arguments 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
- 7. Agenda 1. V10 IDE Demo 2. Requirements / Design principles 3. Technology 4. Architecture – MVC 5. Architecture – View Containment 6. Architecture – Data Views 7. Architecture – Text Entry
- 8. MVC Model View Controller Controller View Model User uses manipulates refreshes shows
- 9. MVC Model View Controller Model Data Controller View Data User uses manipulates refreshes shows
- 10. MVC Controller View Data User uses manipulates refreshes shows navigates sets preferences Model View Controller Model Data Controller: - Data updates - ViewState updates
- 11. 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 navigates sets preferences
- 12. (SVC) ViewView MVC - Implementation Controller View (form) Data User uses manipulates refreshes shows navigates sets preferences
- 14. MVC - Implementation layout layout layout Struct data Frame in frame Event Handler ViewState (.zip) $data$$viewState$ Refresh Modifies Repository
- 17. ide.exe View FRM View FRM View FRM View FRM View FRM View FRM Event Handler MVC - Implementation View FRM View FRM View FRM Controller SVC Controller SVC Controller SVC Component Editor Entity Editor Include Library Editor … Main Controller SVC View FRM View FRM View FRM
- 18. Agenda 1. V10 IDE Demo 2. Requirements / Design principles 3. Technology 4. Architecture – MVC 5. Architecture – View Containment 6. Architecture – Data Views 7. Architecture – Text Entry
- 21. Controller
- 22. 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
- 23. Controller
- 24. Controller
- 25. Controller
- 27. FormContainer
- 29. FormContainer
- 32. Agenda 1. V10 IDE Demo 2. Requirements / Design principles 3. Technology 4. Architecture – MVC 5. Architecture – View Containment 6. Architecture – Data Views 7. Architecture – Text Entry
- 33. 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
- 34. Paint versus HTML canvas
- 35. 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
- 36. HTML Controls • HTML 5 controls set • AttributesOnly (Field and Occurrence level) • StaticText • RawHTML • Picture • …
- 37. 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)
- 38. 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…
- 39. Agenda 1. V10 IDE Demo 2. Requirements / Design principles 3. Technology 4. Architecture – MVC 5. Architecture – View Containment 6. Architecture – Data Views 7. Architecture – Text Entry
- 40. Text Entry Overlay • Separate overlay form (popup) • Started on demand • Only one! • No (pre) distribution info Data type Syntax definition • Functional rich
- 41. 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
- 42. Agenda 1. V10 IDE Demo 2. Requirements / Design principles 3. Technology 4. Architecture – MVC 5. Architecture – View Containment 6. Architecture – Data Views 7. Architecture – Text Entry
- 43. Summary • Technology: Uniface • GUI Technology: HTML Forms • Architecture: MVC • View Containment, FormContainer, Popup • Data Views, HTML Forms • Text Entry, Scintilla, Code Box
- 44. Under the hood v10 IDE Thank you