Cincom® ObjectStudio® New Native GUI Implementation Preview - Andreas Hiltner and Dirk Verleysen

7/28/2019 Cincom ObjectStudio New Native GUI Implementation Preview - Andreas Hiltner and Dirk Verleysen

1/41

1

World Headquarters

Cincinnati, Ohio

Cincom ObjectStudio

New Native GUIImplementation Preview:

A Technical Overview


2/41


3/41

OverView

Intention and Goals

Some Windows Definitions

Architectural Overview

Announcements

Class TestUI

3


4/41

Intention and Goals

Modernize the UI Controls / Widgets

Eliminate Primitives and use DLLCC

Easy to Maintain and Extend

4


5/41

Some Windows Definitions

Window Classes

Window Procedure

Window Messages

5


6/41

Window Classes

A window class is a set of attributes that the system uses

as a template to create a window. Every window is a

member of a window class. All window classes are

process specific.

6


7/41

Window Procedure

Every window class has an associated window

procedure a function that processes all messages

sent or posted to all windows of the class.

All aspects of a window's appearance and behaviordepend on the window procedure's response to these

messages.

7


8/41

Window Messages

Each window has a function, called a window procedure,

that the system calls whenever it has input for the

window.

Windows do not make explicit function calls to obtaininput. Instead, they wait for the system to pass input to

them.

The system passes all input for an application to the

various windows in the application.

8


9/41

Architectural Overview

UIView

UITransparentWindow

UIChildWindow

UIControl

Windows GDI

GDI+

9


10/41

UIView

UIView class

registerClass

WndProc

MessageMap

UIView

privateCreate

10


11/41

UIView class>>registerClass

11


12/41

UIView class>>WndProc

12


13/41

UIView class>>MessageMap

13


14/41

UIView>>privateCreate

14

15


15/41

UIChildWindow

Superclass for all child windows

Subclasses are window classes like

UITabPage

UIDrawPad

UIImgDisplay

()

15

16


16/41

UIControl

Superclass for all controls / widgets

Subclasses are Controls / Widgets like

UITreeView

UIListView

UIButton

UIEdit

()

16

17


17/41

Windows GDI

The Microsoft Windows graphics device interface (GDI)

enables applications to use graphics and formatted text

on both the video display and the printer.

With the introduction of Windows XP, GDI wasdeprecated in favor of its successor, the C++ based

GDI+ subsystem.

THE original way of drawing for Windows applications.

17

18


18/41

GDI+

GDI+ adds anti-aliased 2D graphics, floating point

coordinates, gradient shading, more complex path

management, intrinsic support for modern graphics-file

formats like JPEG and PNG, and support for composition

of affine transformations in the 2D view pipeline.

18

19


19/41

GDI+

Windows GDI+ exposes a flat API that consists of about

600 functions

It is not a high-speed 2D rendering framework.

The speed is good for business and drawing applications

19

20


20/41

Used In

UIBitmapDisplay

UIImgDisplay

UIDrawPad

UIChart

20

21


21/41

Announcements

Announcement is the core of class-based event

notification framework superseding the older symbol-

based trigger-event framework and the changed/update

mechanism.

21

22


22/41

Class TestUI

Singleton

Implements a test for every UI class implemented

Controlled by class side methods

Each line in the class method contain a single operation

Execute line by line(!) to see the effect

22

23


23/41

Some Controls / Widgets

23

24


24/41

24

25


25/41

25


26/41

O Wi d


27/41

openself

openInitialization;

buildWindow;

addWidgets;

initializeWidgets;

setupAnnouncements;

postOpenInitialization

hookup

hookup

creation main window

build widgets

initalize widgets

announcements

Open Window

28


28/41

28

buildWindow

self mainWindow: UIView new.

self mainWindow

position: self position;

extent: self extent;text: self title;

create;

setDefaultEvents;

setDefaultStyle;

redisplay;

updateWindow

buildWindow

29


29/41

self

add: #pbRegister

class: UIButton

rect: (Array with: 792 with: 476 with: 127 with: 35)

options: nilform: self mainWindow

text: 'Register'.

Add Widgets

UIButton

30


30/41

widget := self

add: #tlbClassesclass: UIListView

rect: (Array with: 16 with: 220 with: 793 with: 239)

options: ((IdentityDictionary new)

at: #style put: (LVS_OWNERDATA | LVS_REPORT | LVS_SHOWSELALWAYS |

LVS_ALIGNTOP | LVS_SHAREIMAGELISTS | WS_CHILD | WS_OVERLAPPED |

WS_VISIBLE);

yourself)form: self mainWindow.

widget setFullRowSelect.

widget allowDragDrop: true.

Add Widgets

UIListView

31


31/41

31

(UIListViewLayout new)

title: 'Instructor';

accessPath: [ :anObject | anObject instructor firstname];

width: 150;align: #center;

yourself

Column Layout Simple definition

32

C l L t S ti


32/41

32

(UIListViewLayout new)title: 'Hours';

accessPath: #hours;

sortAccessPath: #(timeframe startDate asTime);

width: 150;align: #center;

yourself

Column Layout - Sorting

33Column Layout - Image


33/41

33

imageList := ImageList new.

imageList

create: 14

y: 14

mask: nilinitial: 2

grow: 2.

imageList

add: (Icon loadFile: male.ico');

add: (Icon loadFile: 'female.ico');

yourself

(UIListViewLayout new)title: 'G';

imagePath: [:obj | obj member male ifTrue: [0] ifFalse: [1]];

accessPath: [:obj | ''];

width: 25;align: #left;

yourself

Column Layout - Image

34Column Layout - Font


34/41

3


title: Name';

accessPath: #(#healthClass #name);formats: (UIControlFormat

font: (Font newArray: {#Bold {#FontFace #'Times New

Roman'} {#PointSize 12}})

textColor: (RGBColor red: 255 green: 252 blue: 12)

backgroundColor: (RGBColor red: 29 green: 152 blue: 71));

width: 250;

align: #center;

yourself

Column Layout - Font

35Column Layout Conditional Format


35/41


title: 'Name';

accessPath: #fullName;

formats: ((IdentityDictionary new)

at: #maleFormat put: (UIControlFormat

font: (Font newArray: (#(#Bold #(FontFace Arial) #(PointSize 13))))

textColor: RGBColor blue

backgroundColor: RGBColor white);

at: #femaleFormat put: (UIControlFormat

font: (Font newArray: (#(#Bold #Italic #(FontFace Arial) #(PointSize 13))))textColor: RGBColor red

backgroundColor: RGBColor white);

yourself);

decisionBlock: [:obj | obj male

ifTrue: [#maleFormat]

ifFalse: [#femaleFormat]];width: 250;

align: #left;

yourself

Column Layout Conditional Format

36

I iti li Wid t


36/41

(self itemsAt: #efRoom) text: Spinning Room.

Initialize Widgets

(self itemsAt: #imgPerson)

filename: self member picture.

Entry Field

Image Field

37

I iti li Wid t


37/41

| item rows |

rows := CheckInOut checkedIn.

item := self itemsAt: #tlbEntries.

item setDetailsView;

setImageListSmall: imageList;

layout: self initializeEntriesListLayout;

objects: rows;updateWindow

Initialize Widgets

List View

Announcements


38/41

item := self itemsAt: #tlbClasses.

item

when: UILVItemSelected send: #tlbClassesChanged: to: self;

when: UILVHeaderItemClickedsend: #lvClassesHeaderClicked: to: self;

when: UIDropAnnouncement send: #tlbEntryDropped: to: self.

.

item := self itemsAt: #tlbEntries.

item

when: UILVItemSelected send: #tlbEntriesChanged: to: self;

when: UIDropAnnouncement send: #tlbClassDropped: to: self.

Announcements


39/41


40/41

Contact Information

Star Team (Smalltalk Strategic Resources)

Suzanne Fortman ([email protected])Cincom Small talk Program Director

Arden Thomas ([email protected])Cincom Small talk Product Manager

Jeremy Jordan ([email protected])Cincom Small talk Market ing Manager

http://www.cincomsmalltalk.com


41/41

Thanks for listening

Documents

Cincom® ObjectStudio® New Native GUI Implementation Preview - Andreas Hiltner and Dirk Verleysen