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