Gambas/Elementos de la GUI

Falta traducir!!! No borrar contenido tomado del libro Gambas 24 en ingles.

Componentes comunes de la GUI

consejo

Puesto que Gambas ofrece independencia de GUI y de escritorio las descripciones en esta sección son muy generales, tratando de amoldarse en los mas posible a los posibles manejadores de escritorio.

El componente mas común, pero al mismo tiempo el mas ignorado, es el apuntador o cursor. Por definición el cursor es la imagen gráfica sobre la pantalla que indica la localización del dispositivo apuntador, y puede ser usado para seleccionar y arrastrar objetos o indicar comandos sobre la pantalla. El apuntador típico es una flecha inclinada, pero puede variar según los diferentes estatus, operaciones, programas o sistemas operativos. La mayoría de las operaciones con el cursor son disparadas al presionar los botones del raton, tarea que es conocida como hacer click. El click que se hace con el botón izquierdo es llamado solamente click; el click que se hace usando el botón derecho es llamado click derecho.

consejo

La acción de arrastrar es realizada al hacer click en cierta área de un objeto (ya sea un icono, una ventana, etc) y manteniendo el botón presionado, mover el cursor a otra área deseada.

La ventana es el área sobre la pantalla sobre la que se muestra información, con su contenido siendo mostrada independientemente del resto de la pantalla. Un ejemplo de ventana es la que aparece en la pantalla cuando haces click en el icono de tu navegador de internet favorito. Es fácil manipular una ventana: puede ser abierta o cerrada con un simple click; pude moverse a cualquier area mediante arrastrarla; puede cambiarse su tamaño o minimizarse; puede colocarse enfrente o detrás de otra ventana, como las molestas ventanas en esos sitios que visitas; sus barras de desplazamiento pueden ser usadas para navegar las secciones que contiene; multiples ventanas pueden ser abiertas al mismo tiempo con diferentes aplicaciones, etc.

Los menús permiten al usuario ejecutar comandos seleccionándolos de una lista de opciones. Las opciones disponibles pueden seleccionarse usando el ratón o el teclado. El uso de menús acelera la curva de aprendizaje de un nuevo usuario para entender una aplicación.

• La barra de menu es mostrada horizontalmente a lo largo de la parte superior de la ventana. El menú desplegable es comúnmente asociado con este tipo de menús. Cuando el usuario hace click sobre la opción el menú desplegable aparece.
• La barra de herramientas es un tipo de menú que muestra mayormente iconos en vez de texto.
• El menú tiene un titulo visible dentro de la barra de menú. Su contenido solo es mostrado cuando el usuario lo selecciona con un click. El usuario puede seleccionar los elementos dentro del menú desplegable. Normalmente, cuando el usuario hace click en cualquier otra parte del contenido el menu desaparece.
• El menú contextual es invisible hasta que el usuario hace click derecho sobre el objeto, o al mover el cursor sobre el objeto y presionar la tecla de menú contextual del teclado, entonces el menú contextual aparecerá cerca del cursor.
• Los extras son elementos individuales dentro o al lado de un menú.
• Un icono es una pequeña imagen que representa objetos como archivos, programas, paginas web, o comandos. Estos son una manera rápida de ejecutar comandos, abrir documentos, ejecutar programas, etc. Los iconos están diseñados de tal manera que no se requiera mayor explicación para entender que significa la pequeña imagen.

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

En una lista separada estan los controles de salida que no tienen interactividad alguna:

• Label o text label. Esta función despliega algún texto en el formulario.
• Tool tip. Funciona en conjuto con el cursor del raton, cuando el usuario posa el cursor sobre un elemento, sin hacer click sobre el, un pequeño recuadro aparece con información suplementario sobre el objeto.
• Progress bar. Es un control tipo barra que despliega el progreso de una tarea como cuando descargas un archivo en tu navegador de internet.

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.