[Tutorial] - Learning about Window (GUI) - a brief explanation!

[JScript]

This short tutorial is intended for beginners in programming GUIs!

Chapter 01 - Introduction (What is a Window?)

Of course, "Window" is the center of Microsoft Windows! It is so important that even the name of the OS is the same! But what is even a window? When you think of windows, the which comes quickly to mind is probably this:

Seriously, that's right, the brain goes into "conflict". But in terms of programming, Window is this:

Application Window

This type of window is called Application Window or Main Window, where typically there are frames, title bar, buttons: Minimize, Maximize Close, several elements of the standard interface called UI or GUI (User Interface or Graphical User Interface).

The frame or border is called non-client area of the window, is so called because the OS manages this area of ​​the window. The inner area is called client area: this is the part of the window in which your program controls!

Here is another form of Window:

Were you surprised? So you are new in programming Microsoft Windows! Know that the controls such as buttons and edit boxes are windows by itself! The biggest difference between a control window and a Application Window is that the control does not exist alone... Control is positioned relative to the coordinates of the window, ie, when you drag it, the control is also moved! As well as the control Window and communicate with each other.

So when you think about Windows, do not think only in Application Window, but that a Window is an application programmed where:

• It occupies an area of the screen (Desktop).
• Visible or not at a given time.
• Responds to user events or the OS.

Parent Window and Owner Window

In the case of a UI, the window becomes a child of Application Window, ie, a Application Window is the father of the window control. The parent window provides the coordinate system used to position the child window. Having a parent window affects other aspects of the appearance of the window, for example, a child window is shaped so that no part of you can come out of the coordinates of its parent window.

Another interaction is the relationship between a Application Window and a dialog box - MsgBox(). When an application displays a dialog box, a Application Window becomes the Owner Window and MsgBox() property of another (Owned Window). An Owned Windo always appears in front of your Owner Window . It will be hidden when the Owner Window is minimized and will be closed at the same time with its Owner window.

The following image shows an example:

A Application Window has the dialog box, the dialog box is the father of both windows controls (buttons). The following diagram shows these relationships:

Window Handles

Identifier

Windows are objects - both contain code and data - but are not classes! Instead, a program references a window using a value called Handles (identifier)​​. A handle is just a number that the OS uses to identify an object. You can imagine the OS as having a large table of all windows that were created. He uses this table to identify and manage each one. The acronym for Handles is HWND, which can be pronounced as "RaiUind." Handles are returned by functions that create the windows: GuiCreate() e _WinAPI_CreateWindowEx().

To run an event in a window, I'll give an example of a function that takes a value of $HWND as a parameter: MoveWindow, where in AutoIt would be _WinAPI_MoveWindow()

_WinAPI_MoveWindow($hWnd, $iX, $IY, $iWidth, $IHEIGHT [, $fRepaint = True])

The first parameter is the handle to the window (identifier) that you want to move, others parameters are the coordinates to move the window.

Screen coordinates and window.

The coordinates are measured in pixels (DIB -> device-independent), but it will be for another tutorial on GDI+. Depending on the application, we can measure the coordinates to the screen in relation to a window (including frame) or on the client area of a window. For example, you place a window on the screen using coordinates screen, but the controls are within the window will use the client coordinates (client area). In each case, where the origin is the upper left corner of the region having the coordinates X=0 and Y=0.

---

Chapter 02 - Creating your 1st window.

In this chapter we will learn how to create our first program with a window, using a standard that I believe will be gradually adopted by many because it is easy to learn, start reading and maintenance! This will be our starting point: later we will add graphics, text, user input "Input ()" and more.

Here's the source code:

; Includes variables with the constants used in the creation of the window.
#include <guiconstantsex.au3>
#include <windowsconstants.au3>

_Example()

Func _Example()
    Local $hForm1

    ; Sintaxe: GUICreate( "title" [, width [, height [, left [, top [, style [, exStyle [, parent]]]]]]] )
    $hForm1 = GUICreate("Learning about Windows.", 320, 240) ; Will create a dialog box that when displayed is centered
    If Not $hForm1 Then Return @error

    GUISetState(@SW_SHOW) ; Will display an dialog box

    ; Run the GUI until the dialog is closed
    While 1
        Switch GUIGetMsg()
            Case $GUI_EVENT_CLOSE ; = -3, if the user clicks the button [X]
                ExitLoop
        EndSwitch
    WEnd

    GUIDelete() ; Delete the Window.
EndFunc   ;==>_Example

Our Window should look like this:

---

To be continued...

Regards,

João Carlos.

Edited May 18, 2012 by JScript

[armoros]

Very nice Joao...

[guinness]

Indeed it's a great start and hopefully more to come. I have a couple of points about the example but that's just me being picky.

Edited May 17, 2012 by guinness

[JScript]

@guinness, @armoros and all

I accept suggestions, corrections, additions, after all: this tutorial is for all of us!

Regards,

João Carlos.

Edited May 17, 2012 by JScript

[jaberwacky]

Put it in the wiki?

[JScript]

Maybe, but I think that does not depend on me...

Regards,

João Carlos.