Diferencia entre revisiones de «Gambas/Elementos de la GUI»
Contenido eliminado Contenido añadido
Sin resumen de edición |
Sin resumen de edición |
||
Línea 5:
}}
'''Falta traducir!!! No borrar contenido tomado del libro Gambas 24 en ingles.'''
== '''Componentes comunes de la GUI''' ==
{{Consejo | Since Gambas offers GUI and desktop independence the descriptions of this section are in a very general sense, trying to fit the possible desktops managers.}}
The most common component, but at the same time the most ignored, is the pointer or cursor. By definition the cursor is the graphical image on the screen that indicates the location of the pointing device, and can be used to select and drag objects or to indicate commands on the screen. The typical pointer is an angled arrow, but it can vary within different status, operations, programs or operating systems. Most of the operations with the cursor are triggered by pressing the buttons of the mouse, task also known as click. The clicks with the left button are called just clicks; the clicks using the right button are called right-clicks (this is kind of unfair for the lefties, but you know, life isn’t fair).
{{Consejo | The drag action is performed by clicking in certain area of an object (icon, window, etc) and keeping the button pressed, the moving the cursor to the desired area.}}
The window is the area on the screen that displays information, whit its contents being displayed independently from the rest of the screen. An example of a window is what appears on the screen when you clicked the icon of your favorite web browser. It is easy for a user to manipulate a window: it can be opened or closed with a single click; it can be moved to any area by dragging it; it can be resized or minimized; it can be placed in front or behind another window, like the annoying popup windows of the sites you visit; its scrollbars can be used to navigate the sections within it; multiple windows can be open at one time with different applications, etc.
Menus allow the user to execute commands by selecting from a list of choices. The available options can be selected with the mouse or the keyboard. The use of menus minimizes the learning curve of the new user to understand the application.
* A menu bar is displayed mostly horizontal across the top of the windows. A pull-down menu is commonly associated with this type of menu. When the user clicks on a menu option the pull-down menu appears.
* A tool bar is a kind of menu bar that displays mostly icons instead of text.
* A menu has a visible title within the menu bar. Its contents are only shown when the user selects it with a click. The user is the able to select the items with in the pull-down menu. Normally, when the user clicks elsewhere the content of the menu disappears.
* A context menu is invisible until the user right-clicks over the object, or by moves the cursor over the object and presses the context-menu-key on the keyboard, then the context menu will appear near the cursor,
The menu extras are individual items within or at the side of a menu.
* An icon is a small picture that represents objects such a file, program, web page, or command. They are a quick way to execute commands, open documents, run programs, etcetera. The icon is designed in such way that no more explanation is required to understand what the small picture means.
== '''Controles de entrada''' ==
Controls or widgets are the interface elements the user interacts with. In Gambas you’ll find the following input components:
*Form and window. By now, you are familiar with the concept of window and form.
*Mouse cursor. You are also familiar with this concept.
*Text box and. It is a box-like representation in which you can enter text or numbers. Gambas offers the value box control that only allows numerical entries
*Date chooser. It is a window that shows a calendar and let the user select a date.
*Text box area. It is just like the text box, differs only in that the text box area allows multiple lines of text.
*Slider. It is a bar with an indicator that allows the user to set a value by dragging the indicator or by clicking on a point on the bar.
*Spinner or spin box. Commonly it is a a vertical bar with and up & down arrow buttons that the user use to adjust the value in the adjoining text box. The value can be increased or decreased depending on what button is being clicked.
*Button. It is a button-like picture you can push it by clicking over it.
*Combo box or drop-down list. A list of items from which to select. The list only displays items when the indicator is clicked.
*List box. A list of items from which to select one or more. The difference with the drop-down list is that the list box uses multiple lines and allows multiple selections.
*Tree view. This control presents a hierarchical view of information. Each item or node can have one or more sub-items that can be expanded to shown more contained sub-items, and collapsed to hide them.
*Check box. A box which indicates a true or false state via a check mark. In Gambas you’ll find also the toggle button.
*Radio button. It is a button, similar to the check box, except that only one item in a group can be selected. Selecting a new item from the set of options also deselects the previously selected button.
*Data grid or grid view. It is a spreadsheet-like grid that shows or allows numbers or text to be entered in rows and columns. In Gambas there is more than one control of this data-oriented type: column view, grid view, table view, data source and data view.
== '''Controles de salida''' ==
In a separate list are the output controls that have no interactivity:
*Label or text label. It function is to display some text in the form.
*Tool tip. It works in conjunction with the mouse cursor, when the user hovers the cursor over an item, without click it, a small ‘hover box’ appears with supplementary information regarding the object being hovered over.
*Progress bar. It is a bar-like control that shows the progress of a task as the file download you see a lot on the download windows of web browser.
== '''Contenedores''' ==
Getting controls on a form is the easy part. Arranging them so that they create an intuitive and attractive interface is the real challenge. Interface possibilities are nearly endless, so I can't tell you how to design any given interface. There are controls that contains other controls called containers that makes possible to optimize the ‘space’ (if such word is applicable to the GUI design world) of the form. Gambas provides a rich collection of containers, even you can see some of these in the Gambas IDE in self.
HBox. It is a horizontal container box that organizes its child controls into a single row.
VBox. It is vertical container, that arranges its child widgets into a single column.
HPanel. It is a container that arranges its child components from top to bottom, and then left to right.
VPanel. It is a container that arranges its children from left to right, and then top to bottom
HSplit. It is a horizontal splitter that lays out its child widgets horizontally, and allows the user to resize them by dragging the boundary between them.
VSplit. It is a vertical splitter that lays out its children vertically, and that allows the user to resize them by dragging the boundary between them.
Panel. It is a container with a changeable border that allows you to organizes related components under the same area.
Frame. It is a container with an etched border and a label that allows you arrange related controls under the same description and area.
Tab strip. It is a multi-container with a rectangular small box which contains a text label or graphical icon associated with a view pane. When activated the view pane displays the controls associated to that tab; groups of tabs allow the user to switch quickly between different widgets.
Scroll view. It is a rectangular container that allows scroll its contents displaying automatically scroll bars when some of its children controls are not fully visible.
Expander. It is a container that can shrink to hide its contents or expand to show them.
Side panel. It is a container that can be hidden or resized. This container should be put on one side of its parent.
Tool panel. It is a tool box container with multiple scrollable vertical toolbar panels
Wizard. It is a multi-container that provides a wizard-like functionality.
{{Consejo | Actually, there are no stone-written rules about GUI design but there are some guidelines that probably you may want to become familiar with. For KDE visit http://developer.kde.org/documentation/design/ui/, and for GNOME go to http://library.gnome.org/devel/hig-book/stable/}}
== '''Controles personalizados''' ==
There are other controls that are not included on the Gambas toolbox, but they can be easily created using a combination of controls:
Actually, many of the GUI components already described are indeed combination of other controls.
*Status bar. It is a control usually located at the bottom of windows to display information about the current status of the window or the application. Yyou see this control on web browsers and office software suites. You can build this control using panel containers, text labels, progress bars and other output controls.
*Info bar. It is a control mostly used on the web browser Firefox & Internet Explorer to display non-critical information to the user. Since info bar allows the user read extra information on their own time without interrupt any activity of the user, is being adopted increasingly instead of the info dialog boxes that you know also as info message boxes here in Gambas. By using panel containers, picture boxes, text labels and buttons.
*Apple Balloon help. This control display the help text in ‘balloons’, like those used on the comic books to show the dialogs and works pretty much like the tooltips but oriented to provide help to the user.
*Microsoft Office 2007 Ribbon. Ribbons are part of the recently introduced fluent user interface of Microsoft and replaces menus, tool bars and other task panes with contextual tabs and galleries. Sounds more fancy and complicated than what really is, actually it is a menu bar of a group of tabs that contains tool boxes and pull-down tool boxes called galleries.
*Tabbed tool bars. It is basically the same as ribbon but they are not intended to replace the menu bar nor toolbars as the four color logo company claims.
Obviamente, tu puedes crear tus propios controles basados en otros ya existentes.
{{Consejo | Existen algunas consideraciones legales que tal vez quieras investigar antes de utilizar usar el control Ribbon en tus aplicaciones.}}
{{navegar índice||libro=Gambas
| |||