|
Inferno #10
30 апреля 2007 |
|
For Coderz - Building a graphical user interface.
Building
graphic
UI
Vitamin / CAIG
Good day, dear reader
Teli! Our today we will talk about
Some aspects of the graphic
user interface (GUI, if
on-bourgeois). Hopefully, interested in
this issue will find themselves something
useful. Maybe someone will show art
Xia overly structured and decomposed
Noah on the shelves, but in my opinion, this beam
shy way of structuring information.
0. General framework
What is the interface? Totality
collection of tools to display information
tion and feedback polzovatelem.Inymi
words, the interaction. Therefore, you
risovyvayutsya three most important parts
system:
- Means of entering information;
- Means of displaying information;
- Nucleus for organizing the relationship of these
components.
1. Input means
Historically, for the Spectrum
used 3 main tool for
User input: Clavey
Atur, joystick and mouse. As the most universal
versal component, the keyboard is often
stands and the only way to enter.
Joystick or a mouse may be a different
degree of comfort proemulirovany on it.
But for the most comfortable use
created a software product is necessary
Dimo provide support and those lips
devices (especially mice). The use of cluster
viatury to input information can be
as follows:
- Enter the text information;
- Emulate joystick;
- The combined use of different
variants.
Enter the text information, I think not
represents slozhnosti.Pechatnye Sim
oxen, all firmly fixed on the functional
nye keys also exist de facto standard
dards.
Joystick emulation is based on binding
different keyboard combinations, respectively
sponding appropriate combinations of contact
Comrade joystick. There are several standard
combinations: QAOPSpace, QAOPM, SXOPSpace,
QCsOPSpace, Sinclair1 / 2, Cursor, etc. Oba
chno presents no great difficulties
implement support for multiple
standards so that users who are accustomed
to any particular option, not ispy
Tyva inconvenience.
Combined use podrazu
MEVA ispolzovavnie keyboard and how
joystick, and text entry information
tion. This is usually done switching solutions
regimes (input control), support for grief
sneeze keys.
Working with the mouse, too, is not
too much difficulty, except for the presence
different standards for its connection. But
support the most common variant
anta Kempston Mouse will support
most of the available equipment. From
Other features of the mouse
it is worth noting the definition of functional
keys (fixed or "first pressing
Taya ") and use the last squeak can
hole - video (see articles in the DonNews).
2. Display facilities
The main (and, perhaps, only)
mapping tool we have is an ordinary
LIMITED Spectrum screen size of 6912
bayt.V due to the lack of honest word
regime in the "standard" Spectrum, all that
drawn on this screen will be
graphics. What and how to draw - the CCA
Of special.
A cursory glance at the existing park
system (not only) software, both
Sintered can select more than one STI
Lei design a custom interface
sa:
- "Text" mode on the functional
keys (usually inherent in the text results
daktoram, IS-DOS). Characterized by unifying
tsirovannym style of display items
interfeysa.Vozmozhny blotches graphics
elements;
- "Text" mode, using
graphic / text cursors. Very
similar to the previous mode, only hot
keys are replaced or supplemented by the possibility
completely control the cursor. The items
Management "text" style use
camping, basically, to simplify the construction
the interface. Example - ZXZip;
- Simplified the graphics mode. Use
The use of graphic elements (frame, values
chkov, etc.), and text fields are often
arbitrary position of the press (not tied
Noah to the global screen grid). Tools
I can be very different. Example -
Real Commander (especially versions prior to 2.0);
- A more sophisticated graphics mode. ISPO
lzovanie overlapping windows, image
and text controls, etc.
Typical means of entry - a graphic chickens
Sor. Is also possible to support the hot cluster
vish. Text input is applied to situations
tion. A typical representative - BGE (and yes
Almost all image editing - in
them in the genus is written).
2.1. Organization "text" mode
Techniques and subtleties in the realization of this
Nogo regime there is a huge set.
Starting from the full text emulation
mode (the text buffer, redrawing the whole
screen during the upgrade) to the Pec
Tew on demand of individual elements.
The second way is usually more efficient because
allows more efficient use of
CPU time (to erase data in screening
not instead of plugging gaps and characters
etc.) and memory and to combine text output
with graphics.
2.2. Organization graphics mode
In this mode, the subtleties of the organization
more. The usual concept - pryamougo
lnye region (box) with elements of control
of them. The first asked questions -
how to organize one. drawing and 2. recovered
update folder background? The first question can be at
think about such decisions:
- Drawing the windows and controls
going directly to the screen area;
- Drawing is carried out in a
screen context, inferred entirely on
screen;
- Combined version. Applied
if necessary, more frequent updates
lshoy of windows at the main job
with an off-screen context (an analogue
DirectDraw)
The second question also has the answers:
- Remember the background behind the window in front will draw
koy.Pri closing the window background to recover;
- Redraw the previously unseen side
screen when the situation changes.
As the depth of the material can
consider some advantages and nedos
tatki different combinations of the above
solutions (the third variant of the organization is negative
shovels will not be considered, it is essentially
expanded second edition).
1) Saving / restoring the background, Rizo
tion in the display area:
+ Is a simple implementation;
+ Maximum speed tradeoff · fundamental
ktsional;
- Great difficulty in changing the order
ka display of overlapping windows.
2) Redraw the invisible parts, rice
of a screen area:
+ Sometimes leads to a gain in the update
lenii small areas;
+ The most economical option for storage;
- Usually the slowest option;
- The complexity of updating the elements
ntov management.
3) Saving / restoring the background, Rizo
tion in context:
* The pros and cons of drawing
in context;
- Not the fastest option (a consequence of
Drawing in context);
- High cost of memory (2 times the pain
option 1 above).
4) Redraw the invisible parts, rice
of the context:
+ The most functional option out of all
listed;
* Memory consumption similar to option 1;
* The pros and cons of drawing
in context;
- The slowest of these variant
Antes (maybe sometimes faster option 2).
We should also talk about vysheupomya
nutyh pros and cons of drawing
in context:
+ Appears on the screen is actually a
object;
+ Comparative ease of updating Fra
gmentov window;
- The complexity of the drawing elements of governance
of - depends on the method and attributes before
representation of context in the memory;
- Slow enough.
Selecting a particular way of organizing
rests on the shoulders of the developer. From itself to
Bavli, which implemented the options 1 and 4 and
I can quite objectively judge their
advantages and disadvantages.
3. Kernel user interface
As was clear from the foregoing, the kernel
performs a linking function between Used for
tvam input and display devices and
provides the necessary functionality for
organization. Actually, the structure of this
kernel in a nutshell repeat structure of the whole
Custom Interface:
Input means
|
v
Procedures for survey input devices
The logic of interaction NUCLEUS
Procedures for working with the screen
|
v
Screen
Set of procedures for the survey of entry for
depends exclusively on the set of supports
Mykh sredstv.Neskolko recommendations on this
Therefore occasion.
1) The simultaneous survey of several mouth
REFER. Devices operating on the principle of
joystick (the joystick itself and its
analogues on the keyboard) better poll
procedures, the return status of pressed
button. In this case, the usual association
results will give the final set of flags:
Driving call KJoy; bit0 - left
; Bit1 - right
; Bit2 - up
; Bit3 - down
; Bit4 - fire
ld c, a
call sinc1; bit0 - '6 '
; Bit1 - '7 '
; Bit2 - '9 '
; Bit3 - '8 '
; Bit4 - '0 '
or c
ld c, a
call KBD; bit0 - 'O'
; Bit1 - 'P'
; Bit2 - 'Q'
; Bit3 - 'A'
; Bit4 - 'Space'
or c
ld c, a
call KBD1; bit2 - 'S'
; Bit3 - 'X'
; Bit4 - 'M'
or c
ld c, a
call MouseFire; bit4 - 'mouseL | R'
or c
ret
2) is also useful to have another one bit
under the "Cancel" button. Some models of Joy
sticks support not one but two buttons -
second you can use for this purpose. On
the keyboard is a button can be any
fight mix - Break, Edit, Extend etc.
3) Mouse interrogated separately by
its specificity. Poll of the keys can be de
lat in a loop polling the keypad (as long as
shown above).
Procedures for working with the screen entirely and
fully depends on the concept
function draw (either directly or through con
text) and update (in whole or in hour
tyam). Any more or less sophisticated coder
write the required set (or use
of a set of ready-made, the benefit of their bulk in time
GOVERNMENTAL editions).
So we slowly get to the
interesting part of the nucleus responsible for the logs
Since the interaction of the above components
nent.Tipichny cycle of the nucleus at
is applicable to one object, the window looks at
roughly as follows:
1) Creating a window;
2) The registration window in the nucleus;
3) Construction of the window;
4) The cycle of polling the input devices;
5) Implementation of the activated functions;
6) Go to step 4, if the process does not insti
rshen;
7) The deregistration of the windows in the nucleus.
Few details on each item:
1) From the perspective of the kernel, the window is
a descriptor in the memory area is described
yuschy that the kernel should be displayed. In
simplest case is performed on stage
compiled by static filling
necessary structures;
2) Handle to the window (or copy link)
sisteme.V registered in the simplest case
case we have a stack of currently open
windows. If necessary, you can organize a coherent
list;
3) Creating a graphical information, not
directly displayed to the user -
substrate and the component window. More will be
reviewed below;
4) Obtaining information about the actions of
lzovatelya - pressing buttons on a keyboard
moving the mouse, etc. More will be
reviewed below;
5) is directly related to point 3 - in
Depending on what is created, we will
respond differently to the actions of users
Vatel;
7) Perform action, return step 2. Phi
Physically, the handle is usually still there
sponded, and can be reused
van.
Desktriptor window is typically from
a comprehensive system information
about the object:
- The dimensions and position on the
screen;
- Style information display (Draw
leniya);
- Information about the current (s) of context
degree (s);
- Where the window keeps the background (if
stores) and where to store its context
(If stored);
- A list posted on the window components;
- Other options.
Typically, the following methods
organization of the list of components:
1) Reservation of pointers to arrays
objects of appropriate types. Exactly
works SupremeGui from BGE - handle
window contains pointers to arrays of inscription
This, buttons, check boxes, etc.;
2) array / list of heterogeneous objects
different signatures (IDs).
Procedures for handling objects range over all
items on the list and, depending on the ideal
ntifikatora, differently treated further
The further information in the facility;
3) Use a list of objects with defined
graduations in implementing object methods.
With the first two methods, it is clear -
They are simple to implement, but has
exist one big disadvantage - weak extension
ryaemost. Adding new types of objects
require the completion (or even recycling)
core kernel code.
To understand the third method, it should be
some idea of polymorphism (from
object-oriented programming
formation - the PLO). The essence of it in the next - for
perform actions on the object meets
the object itself. In other words, in addition to describing
object (the way of presenting it to memory
ty) to determine the number of functions explained
the project, which will be called by the system in
certain situations. In the code, it can
look like this:
; Underlying window handle (and the window object):
Window dw vfpt; pointer to the table
; Virtual functions
db x, y, w, h; window size
dw Flags; flags, etc.
dw Context; pointer to context
dw Sibling; pointer
, The next window in list
dw Childs; pointer to the list
; Child windows
... ; Other data
vfpt dw Create; function pointer
; Create a window
dw Show; function pointer
; Display window
dw Update; function pointer
; Window update
dw OnInput; function pointer
; Input processing
... ; Pointers to other functions
And if the system wants to refresh the window,
it will comply with this code:
; IX-object SysUpdate
ld hl, 4; offset table
; Virtual functions
jp VCall; call Wirth. function
...
VCall ld a, (ix)
add a, l
ld l, a
ld a, (ix +1)
add a, h
ld h, a; HL indicates adr.f-tion
ld a, (hl)
inc hl
ld h, (hl)
ld l, a; HL contains the address of the function
jp (hl); function call
Quite cumbersome. But! Instead, we
we get almost unlimited possibilities
surface enlargement - can create new
types of components, it is absolutely not touching the core!
Importantly - to observe the basic interface.
With this approach, the kernel is essentially "xy
deet - it is only logical
"Skeleton" of the call virtual functions under
support the basic components (corresponding
function, which may well use
Xia descendants - t.n.nepolnaya overload form
rtualnyh functions). All other components
Options are implemented entirely autonomously, the core
and know do not know what they are in exactly
STPs represent. In addition to solving problems
creation and display of objects removed
challenge response to user input
- Each component is also able to self-
by yourself to respond to emerging
"Outside world" events.
The attentive reader will probably replace
Teal in the example of the descriptor field is not clear
Sibling. What is it? "And this is another idea
associated with the organization hierarchy of objects
Comrade. For those who may not have fully understood
the essence of what is happening, I will explain: the above
object describes in general any object in the pa
mkah windowing - ranging from no
windows directly to the last
button on most of these windows. All differences
differs only implementation of specific
GOVERNMENTAL funktsiy.Ukazannye field - at least, it is
necessary sary for the frame. The specific type of
object has the full right to extend the set
these fields (disguised as "other
Data ") and use these extensions.
The main thing - to keep intact the base. Since then
chki of the PLO, this process is called
Inheritance ("heirs" are all
property "parent") and, in some ways, John
enclosure (of "other data" kernel does not
knows they are used only by those who know
"Successor").
Note. In what follows the word "heritage
nick "will be mentioned in the context of hierarchical
hierarchy of object instances and not in the context of
the notion of "inheritance" of the PLO.
Consequently, we are able storage
thread objects in the "tree" - a hierarchical
structure, which greatly facilitated our lives.
The first level - directly to the window. They
make a list - replacing the above
stack of windows. As a "child" windows can
perform nested hierarchical structure
parameters:
..- (Sibling) -> Window - (sibling )->...
| (Child)
v
Frame-> Button1-> Button2
|
v
Radio1-> Radio2-> Checkbox
That the screen might look like:
Window
Frame
o Radio1
o Radio2
v Checkbox
[Button1] [Button2]
Child objects inherit properties
their "parents" - measured its position
mapping with respect to the "parent", inherit
general properties (freezing, style and
etc.)
Any system procedure to work with
windows and objects will work with the horizontal
zontally tier hierarchy tree - re
move between levels should be maintained
direct object. Let me explain. Assumption
Suppose we need to update (redraw) all
window. Some kind of system procedure gets
on entry to the list of available windows in system
(On the "tree" - the upper line). She
doing very little - for each object
calls the virtual method to update
and moves to the next element in the call list
Re. When you call the element may recur
recursively apply the same procedure for Spies
ka its "descendants" (previously having
opportunity to fulfill some of his action
conditions), which, in turn, can also
has deepened. Example code calling
virtual function in the chain:
; IX - start object, HL - vfpt offset
ChainVCall
push hl
ld l, (ix +10); shift to
ld h, (ix +11); field Sibling
ex (sp), hl
push hl
call VCall
pop hl, ix
ld a, hx
or lx
jr nz, ChainVCall
ret
And if we have to be like this
structure (describing the example
above):
Window1 dw WinVfpt
db ...
dw ...
dw ...
dw Window2; sleduyusch.okno in the chain
dw Win1Childs
...
Win1Childs
Win1Frame
dw FrameVfpt
db ...
dw ...
dw ...
dw Win1Button1
dw Win1FrameChld
...
Win1FrameChld
Win1Radio1
dw RadioVfpt
db ...
dw ...
dw ...
dw Win1Radio2
dw 0; a switching-Chairman not "descendants"
...
Win1Radio2
dw RadioVfpt
db ...
dw ...
dw ...
dw Win1Checkbox
dw 0; ...
...
Win1Checkbox
dw CheckboxVfpt
db ...
dw ...
dw ...
dw 0; last window of tier
dw 0; not "descendants"
Win1Button1
dw ButtonVfpt
db ...
dw ...
dw ...
dw Win2Button2
dw 0; ...
...
Win1Button2
dw ButtonVfpt
db ...
dw ...
dw ...
dw 0; similarly Win1Checkbox
dw 0
... Then we can draw the following table
virtual functions:
WinVfpt
dw WindowCreate
...
FrameVfpt
dw FrameCreate
...
ButtonVfpt
dw ButtonCreate
...
RadioVfpt
dw RadioCreate
...
CheckboxVfpt
dw CheckboxCreate
...
In this case, all functions in the virtual
GOVERNMENTAL tables inside - it's part of the function
functional core of basic services component
components. Function might look like this:
... Create
... ; To do something useful
jp IterateChildren
...
IterateChildren
push hl
ld l, (ix +12); take the "children"
ld h, (ix +13)
ld a, l
or h
jr z, nochilds
ex (sp), hl
pop ix
jp ChainVCall
nochilds; if the object has no "children"
pop hl
ret
If the object can not be guaranteed
have the "heirs", instead of switching to
IterateChildren need to perform simple
then return.
Now, suppose we want instead of Oba
chnyh buttons to implement their own. Very easy
- A description of the object buttons instead of the decree
Telja the standard virtual table
function pointer to put his own
vennuyu table:
Win1Button1
dw MyButtonVfpt
...
MyButtonVfpt
dw MyButtonCreate
... ; Not necessarily override
... , All functions can be
... ; To use and available
MyButtonCreate
... ; Make something of their own
jp ButtonCreate; and can pass
; System further management and possible
, And do everything myself - even to decide
; Transmit a control "descendants"
Not tired? Not scared? :) Actually
everything is quite simple. Importantly - representatives
vit whole thing in the subtleties of sufficient
for the understanding of the processes, but not
overloaded, so as not to get confused.
Finally we can say a few words
effektivnosti.Privedenny example of the realization
tion polymorphism is almost completely
Copied from existing implementations in other
elastic platforms. You can try different
Options:
Window dw CallbackFunc
db ...
CallbackFunc
and a
jp z, Create
dec a
jp z, Show
dec a
jp z, Update
...
And the corresponding system call:
VCall push hl
ld l, (ix)
ld h, (ix +1)
ex (sp), hl
ret
T.e.vmesto pointer to a table of functions
put function pointer to a dispatcher.
This example of a more secure and
can be very effective for small
set of virtual functions - despite
shorter feature virtual vyzo
Islands, there are overheads manager
parametrization.
As an exotic option can be
briefly consider the option of asynchronous
(Delayed) call metodov.Danny approach
can be used in multithreaded applications
zheniyah. (Yes, it's not a typo - can
be, and will such early or late, and not
necessarily with the advent of a hypothetical OS
- The application itself is running).
The essence of the method is that instead of calling
object sends a message (placed in
message queue), and it can be formed
nerdy later in the message loop
flow.
On this optimistic note here Pos
Bolte leave. Waiting for reviews, questions and
ideas.
Other articles:
Similar articles:
В этот день... 30 April