5,3. Rasgos comunes de las piezas

5,3. Rasgos comunes de las piezas

Las classes de piezas bases i las interacciones distribuyen un largo numero de herramientas. Veamou las herramientas nessesarias mas comunes. Herramientas no documentadas pueden ser encontradas en la referencia Java API.

El cuadro de interacciones definen un numero de propiedades, que puedes recuperar o manipular con los correspondientes setter y getters.

5.3.1. Titulo

Un titulo es una etiqueta explicativa textual que acompanya una pieza de interaccion de usuario, normalmente mostrando por encima, al lado izquierdo, o dentro de la pieza. Los contenidos de un titulo son automaticamente entrecometizados, así que ningun codigo XHTML puede estar incluido en un titulo.

El texto de un titulo puede ser dado a veces como el primer codigo de un constructor, o de una pieza, o con “setCaption()”.


// New text field with caption "Name"
TextField name = new TextField("Name");
layout.addComponent(name);

El titulo de una pieza és, en estandard, manejado y mostrado a través de la pieza de dissenyo o pieza contenedora dentro del cual la pieza es colocada. Por ejemplo, la pieza “VerticalLayout” muestra los titulos izquierda alineados dentro de las piezas contenidas, mientras que la pieza “FormLayout” muestra los titulos en el lado izquierdo de los componentes expuestos verticalmente, con los Titulos i sus piezas associadas al lado izquierdo-alineado en sus propias columnas. Las PiezasPersonalizadas no manejan el titulo de su raíz compuesta, asi que si la pieza raiz tiene un titulo, no va a ser

The caption of a component is, by default, managed and displayed by the layout component or component container inside which the component is placed. For example, the VerticalLayout component shows the captions left-aligned above the contained components, while the FormLayout component shows the captions on the left side of the vertically laid components, with the captions and their associated components left-aligned in their own columns. The CustomComponent does not manage the caption of its composition root, so if the root component has a caption, it will not be assistidos.

Figure 5.5. Manejo de Titulos a través de “VerticalLayout” y piezas “FormLayout”.

Algunas piezas, como Botones y Paneles, manejan el Titulo por si mismos y lo muestran dentro de la pieza.

El icono (Ver capitulo 5.3.4 “Icono”) es muy parecido al titulo i suele mostrarse horizontal antes o despues, dependiendo de la pieza i del dissenyo contenido. También el indicador requerido en piezas de cuadro son usualmente mostradas antes o despues del titulo.

Un camino alternativo de herramientizar un titulo es usar otra pieza como Titulo, normalmente una Etiqueta, Cuadro de texto, o un Panel. Una etiqueta por ejemplo te permite “enmarcar” un accesso directo de teclado con XHTML marcado o encuadernando el titulo a fuentes de datos. El panel provee un camino facil para anyadir ambos un titulo i un marco alrededor de la pieza.

Reglas de los estilos CSS


.v-caption {}
 .v-captiontext {}
 .v-caption-clearelem {}
 .v-required-field-indicator {}

Un titulo es ser assistido dentro un elemento HTML que tiene la classe v-caption estilo CSS. El disenyo contenido puede abarcar un titulo dentro otros elementos titulos-relacionados.

Algunos disenyos ponen el texto del titulo en un elemento v-captiontext. Un v-caption-clearelem es usuando en algunos disenyos para limpiar una propiedad flotante CSS en un Titulo. Un indicador opcional requerido en piezas de cuadro es contenido en elementos separados con stilos v-required-field-indicator.

5.3.2. HerramientasConsejos y descripciones

Todas la piezas (que heredan AbstractComponent) tienen una descripcion que les separa de su titulo. La descripcion normalmente muestra una herramientaconsejo que aparece cuando el cursor del mouse se coloca encima de la pieza por un tiempo prolongado.

Puedes colocar la descripcion con “setDescription()” y recuperarla con “getDescripcion()”.


Button button = new Button("A Button");
button.setDescription("This is the tooltip");

La herramientacomentario es mostrada en Figura 5.6, "Descripcion de pieza con HerramientaConsejo)

Figura 5.6. Descripcion de pieza con HerramientaConsejo

Una descripcion es assistida como una herramientaconsejo en la mayoria de piezas. El formulario lo ensenya como texto en la area de arriba de la pieza, como se describe en la sección 5.19.1 “Formulario como pieza de interaccion del usuario”.

Cuando un error de pieza ha sido colocado con “setComponentError()”, el error es usualmente tambien mostrado en la herramientaconsejo, debajo de la descripcion (el formulario muestra en el fondo de la area del formulario). Las piezas que estan en estado de error van a mostrar el indicador de error. Ver Seccion 4.7.1 “Mensaje y indicador de error.”

La descripcion no suele ser solo de texto, puedes usar XHTML tags para formarlo. Como cualquier texto rico descriptivo puede contener elementos HTML, incluyendo imagenes.


button.setDescription(
    "<h2><img src=\"../VAADIN/themes/sampler/icons/comment_yellow.gif\"/>"+
    "A richtext tooltip</h2>"+
    "<ul>"+
    "  <li>Use rich formatting with XHTML</li>"+
    "  <li>Include images from themes</li>"+
    "  <li>etc.</li>"+
    "</ul>");

El resultado es mostrado en la Figura 5.7 “Un rico texto herramientaconsejo”

Figure 5.7. Un rico texto herramientaconsejo

Date cuenta que el setter i el getter estan definidor para todos los cuadros en el cuadro de interaccion del cuadro, y no para todas las piezas en el cuadro de interaccion de las piezas.

5.3.3. Disponible

La propiedad disponible controla si el usuario puede usar la pieza. Una pieza no disponible es visible, pero engrisada para indicar que esta en estado no disponible.

Las piezas siempre estan disponible en standard. Puedes no disponibilizarlas con “setEnable(false)”.


Button enabled = new Button("Enabled");
enabled.setEnabled(true); // The default
layout.addComponent(enabled);
        
Button disabled = new Button("Disabled");
disabled.setEnabled(false);
layout.addComponent(disabled);

La figura 5.8, “Boton disponible i no disponible” muestra los botones disponibles y en estado no disponibles.

Figura 5.8 Boton disponible y no disponible.

Una pieza no disponible es automaticamente puesta en estado de solo lectura. Ninguna interaccion del cliente con esta pieza es enviada al server, y como importante herramienta de seguridad, las piezas del lado del server no reciben actualizaciones de estado de parte del cliente en el estado de solo lectura. Esta herramienta existe en todos las piezas “built-in” en Vaadin y son automaticamente manejadas por todas las piezas Cuadro para los cuadros de valor de propiedad. En el caso de App personalizadas (Widgets), tienes que estar seguroque el mono de solo lectura este controlado en el lado del server para todas las variables-criticas de un modo seguro.

Reglas CSS de estilo

Las piezas no disponibles tienen el “v-disabled” estilo CSS ademas del estilo de pieza especifico. Para unir una pieza con los dos estilos, tienes que usar la classe de nombre de los estilos con puntos como en el ejemplo de acontinuación.


.v-textfield.v-disabled {
    border: dotted;
}

Esto hará el borde de todos las piezas no disponibles “en puntos”.


TextField disabled = new TextField("Disabled");
disabled.setValue("Read-only value");
disabled.setEnabled(false);
layout.addComponent(disabled);

El resultado es ilustrado en la Figura 5.9, “Estilando las piezas no disponibles”.

Figura 5.9. Estilando las piezas no disponibles

5.3.4. Icono

Un icono és una etiqueta gráfica explicatoria que acompanya a la pieza de interaccion del usuario, normalmente mostrada por arriba, a la izquierda, o dentro de la pieza. El icono esta aproximadamente relacionada a los Titulos (Ver seccion 5.3.1 “Titulos”) i suele ser mostrada horizontalmente despues o antes del icono, dependiendo de la pieza y del disenyo del contenedor.

El icono de una pieza puede ser colocado con el codigo “setIcon()”. La imagen es distribuida como un recurso, quizá mas comun un “ThemeResource”.


// Component with an icon from a custom theme
TextField name = new TextField("Name");
name.setIcon(new ThemeResource("icons/user.png"));
layout.addComponent(name);
        
// Component with an icon from another theme ('runo')
Button ok = new Button("OK");
ok.setIcon(new ThemeResource("../runo/icons/16/ok.png"));
layout.addComponent(ok);

El icono de una pieza és, por estandard, manejada y mostrada por la pieza de disenyo o pieza contenedor en el cual la pieza esté hubicada. Por ejemplo, la pieza “VerticalLayout” muestre los iconos izquierda-alineados por encima de las piezas contenidas, mientras que “FormLayout” muestra los iconos en el lado izquierdo de las piezas colocadas verticalmente, con los iconos y sus piezas associadas izquierda-alineadas en sus propias columnas. El “CustomComponent” no maneja el icono de su raíz compuesta, asi que si la raiz compuesta tiene un icono, no va a ser assistido.

La Figura 5.10. Mostrando un icono desde el recurso Theme.

Algunas piezas, como un Botón y Panel, manejan el icono ellos mismos y lo muestran dentro la pieza.

Reglas de estilo CSS

Un icono va a ser assistido dentro un objeto HTML que tenga la classe “v-icon” de estilo CSS. El disenyo contenido quiza abarque un icono y un titulo dentro los objetos relacionados al Titulo, como en “v-caption”.

5.3.5. Lugar

La propiedad de lugar definie el pais y el lenguage usado en la pieza. Puedes usar la informacion de lugar conjuntamente con un esquema internacionalizado para adquirir recursos de localizacion. Algunas piezas, como “DateField” usa el lugar para piezas de localizacion.

Puedes colocar el lugar de una pieza (o de la App) con “setLocale()”.


// Component for which the locale is meaningful
InlineDateField date = new InlineDateField("Datum");
        
// German language specified with ISO 639-1 language
// code and ISO 3166-1 alpha-2 country code. 
date.setLocale(new Locale("de", "DE"));
        
date.setResolution(DateField.RESOLUTION_DAY);
layout.addComponent(date);

El resultado del cuadro de fecha es mostrado en Figura 5.11 “Colocar lugar para cuadro de fecha en linea”

Figura 5.11. “Colocar lugar para cuadro de fecha en linea”

Puedes reciber el lugar de una pieza con “getLocale()”. Si el lugar no es definido para una pieza, que és, no explicitamente colocada, el lugar de la pieza pariente és usado. Si ninguna de las piezas parientes tiene un lugar cologado, el lugar de la App és usado, i si esta no és colocada, el sistema standart de lugar es colocado, dado por “Locale.getDefault()”.

Devido al requerimiento de que la pieza debe ser fusionada a la App, és torp usar “getLocale()” para la internacionalizacion. No puedes usarlo en el constructor, asi que deveras recibir el lugar en “attach()” como se muestra en el siguiente ejemplo:


Button cancel = new Button() {
    @Override
    public void attach() {
        ResourceBundle bundle = ResourceBundle.getBundle(
                MyAppCaptions.class.getName(), getLocale());
        setCaption(bundle.getString("CancelKey"));
    }
};
layout.addComponent(cancel);

Normalmente es una practica mejor de recibir el lugar de un codigo “application-global” y usarlo para recibir el recurso lugarizado justo cuando la pieza és creada.


// Captions are stored in MyAppCaptions resource bundle
// and the application object is known in this context.
ResourceBundle bundle =
    ResourceBundle.getBundle(MyAppCaptions.class.getName(),
                             getApplication().getLocale());
        
// Get a localized resource from the bundle
Button cancel = new Button(bundle.getString("CancelKey"));
layout.addComponent(cancel);

Seleccionando un lugar.

Una tarea tipica en muchas App és seleccionando un lugar. Esto es hecho en el siguiente ejemplo co la pieza “Select”.


// The locale in which we want to have the language
// selection list
Locale displayLocale = Locale.ENGLISH;
        
// All known locales
final Locale[] locales = Locale.getAvailableLocales();
        
// Allow selecting a language. We are in a constructor of a
// CustomComponent, so preselecting the current
// language of the application can not be done before
// this (and the selection) component are attached to
// the application.
final Select select = new Select("Select a language") {
    @Override
    public void attach() {
        setValue(getLocale());
    }
};
for (int i=0; i<locales.length; i++) {
    select.addItem(locales[i]
);
    select.setItemCaption(locales[i]
,
                          locales[i]
.getDisplayName(displayLocale));
    
    // Automatically select the current locale
    if (locales[i]
.equals(getLocale()))
        select.setValue(locales[i]
);
}
layout.addComponent(select);

// Locale code of the selected locale
final Label localeCode = new Label("");
layout.addComponent(localeCode);

// A date field which language the selection will change
final InlineDateField date =
    new InlineDateField("Calendar in the selected language");
date.setResolution(DateField.RESOLUTION_DAY);
layout.addComponent(date);
        
// Handle language selection
select.addListener(new Property.ValueChangeListener() {
    public void valueChange(ValueChangeEvent event) {
        Locale locale = (Locale) select.getValue();
        date.setLocale(locale);
        localeCode.setValue("Locale code: " +
                            locale.getLanguage() + "_" +
                            locale.getCountry());
    }
});
select.setImmediate(true);

El cuadro de interaccion del usuario es mostrado en la Figura 5.12, “Seleccionando un lugar”

Figura 5.12, “Seleccionando un lugar”

5.3.6. Solo-Lectura

Esta propiedad define si el valor de la pieza puede ser canviado. La propiedad en general és utilizable a las piezas de cuadro, como tienen un valor que puede ser editado por el usuario.


TextField readwrite = new TextField("Read-Write");
readwrite.setValue("You can change this");
readwrite.setReadOnly(false); // The default
layout.addComponent(readwrite);
        
TextField readonly = new TextField("Read-Only");
readonly.setValue("You can't touch this!");
readonly.setReadOnly(true);
layout.addComponent(readonly);

El resultado del cuadro de texto solo-lectura es mostrado en la Figura 5.13, “Una pieza solo-lectura”

Figura 5.13, “Una pieza solo-lectura”

Colocando un disenyo o cualquier otro contenedor de piezas como lectura-solo no suele hacer que las piezas contenidas sean solo-lectura (recursively) para los recursos. Esto es distino de, por ejemplo, el estado no disponible, que suele ser usado (recursively) para los recursos. La pieza de formulario es una excepcion, porque ejecuta el estado de solo-lectura a los cuadros de formulario.

Date cuenta que el valor de una pieza de seleccion es la selecion, no no sus objetos. Una seleccion de solo-lectura no te permite su selección ser canviada, pero otros canvios pueden ser posibles. Por ejemplo, si tienes una Tabla solo-lectura en modo editable, sus cuadros contenidos y su modelo/pasos de datos pueden seguir siendo editados, i el usuario puede organizarlo y ordenarlo en columnas.

Las modificaciones de estado del lado del cliente no van a ser comunicadas al lado del server, y mas importante aun, las piezas de cuadro del lado del server no van a acceptar canvio al valor de la pieza de cuadro solo-lectura. El “tardador” (latter) es una herramienta importante de seguridad, porque un usuario malicioso no puede fabricar canvios de estado en un cuadro de solo-lectura. Estos es manejado al nivel de “AbstractField” en “setValue()”, así que no puedes canviar el valor programaticamente despues. Llamando “setValue()” en un cuadro de solo-lectura resulta en “Property.ReadOnlyException”.

Date cuenta tambien que aunque el status de solo-lectura se ejecuta automaticamente3 al valor de propiedad del cuadro, no se ejecuta en otros transfomables de otras piezas. Una pieza solo-lectura puede acceptar algunos otros canvios de transformables del lado del cliente i algunos de esos canvios podrían ser acceptables, como un canvio en la posicion del scroll-bar de la tabla. App (widgets) personalizados deverían checkear el estado de solo-lectura a las variables encuadernadas con datos de negocio.

Reglas de Estilo CSS.

Colocando normalmente una pieza editable en estado solo-lectura puede canviar su apariencia al no permitir editar su valor. Ademas estilizando en CSS, tambien las estructuras HTML pueden canviar. Por ejemplo, “TextField” pierde la caja de editar y aparece mas bien como una Etiqueta.

Una pieza de solo-lectura va a tener v-readonly estilo. La siguiente regla CSS va a hacer el texto en todo solo-lectura las piezas TextField aparecer en Italic.


.v-textfield.v-readonly {
    font-style: italic;
}

5.3.7. Nombre Estilo

La propiedad del nombre del estilo define uno o varias nombres de classes para piezas de estilos personalizados CSS. El “getStyleName()” devuelve el nombre del estilo actual como una lista espacio-separada. El “setStyleName()” reemplaza todos los estilos con el nombre de estilos dado o una lista de nombres espacio-separado. Tambien puedes sumar i sacar nombres de estilo individuales con “addStylename()” y “removeStyleName()”. Un nombre de estilo tiene que ser un nombre de estilo CSS válido.


Label label = new Label("This text has a lot of style");
label.addStyleName("mystyle");
layout.addComponent(label);

El nombre de estilo va a aparecer en las piezas de objetos HTML en dos formas: literalmente dadas y prefijadas con el nombre de estilo especifico de la classe de pieza. Por ejemplo, si quieres sumar un nombre de estilo “mystyle” a un boton, la pieza va a recibir ambos estilos “mystyle” y “v-button-mystyle”. De esta forma va a crear un conflicto con los nombres de los estilos preconstruidos de Vaadin o GWT. Por ejemplo, el estilo “focus/atencion” va a conflictir con el estilo preconstruido con el mismo nombre, y una opcion de estilo para la pieza seleccionar va a conflictir con el estilo preconfigurado “v-select-option”.

La siguienta regla CSS podría ejecutar el estilo a cualquier pieza que tenga el estilo “mystyle”.


.mystyle {
    font-family: fantasy;
    font-style:  italic;
    font-size:   25px;
    font-weight: bolder;
    line-height: 30px;
}

La pieza estilo resultante es mostrada en la Figura 5.14, “Pieza con estilo personalizado”.

Figura 5.14, “Pieza con estilo personalizado”.

Pieza con estilo personalizado.

5.3.8. Visible

Las piezas pueden ser escondidas colocando la propiedad visible en falsa. Tambien el titulo, iconos y cualquier otra pieza herramienta se vuelven escondidas. Piezas escondidas no són solamente invisibles, pero su contenido no es comunicado al browser del todo. Esos és, no estan hechas cosmeticamente invisibles solamente con reglas CSS. Esa herramienta es importante para la seguridad, si tienes piezas que contienen informacion crítica de seguridad esa dever ser ensenyada en especificos estados de la App.


TextField readonly = new TextField("Read-Only");
readonly.setValue("You can't see this!");
readonly.setVisible(false);
layout.addComponent(readonly);

El resultado de la pieza invisible es mostrada en la Figura 5.15, “Una pieza invisible”.

Figura 5.15, “Una pieza invisible”.

Cuidado con cosas invisibles porque pueden dejar huellas. La celda de disenyo contenedora que lo mantiene invisible la pieza no se va a ir a ninguna parte, pero va a mostrar en el disenyo un espacio extra vacio. Tambien radios expandidos trabaja solo como si la pieza fuera visible - és el disenyo de la celda que se expande, no la pieza.

Si nessesitas hacer una pieza cosmeticamente invisible, deverias usar una tematica personalizada para colocarla para mostrar el estilo “display: none”. Esto en general és util para ciertas piezas en especial como és un “ProgressIndicator”, que tiene efectos incluso cuando se ha hecho invisible en CSS. Si la pieza ocultada no tiene un tamanyo definidoi es encerrado en un disenyo que tampo tiene un tamanyo definido, el layout contenedor va a colapsar cuando la pieza desaparezca. Si quieres tener la pieza manten su tamanyo, tienes que hacerla invisible gracias a programando todas sus fuente i otros rasgos para ser transparentes. En esos casos, el contenido invisible de la pieza puede ser hecho visible facilmente en el navegador.

Una pieza hecha invisible con la propiedad visible no tienen en particular ninguna classe de estilo CSS para indicar de que és escondida. El elementosigue existiendo, pero tiene el estilo “display: none”, que ser sobremonta a cualquier estilo CSS.

5.3.9. Programando tamanyo de las piezas.

Las piezas de Vaadin son tamanyizables; no en la escencia de que son ligeramente largas o de que los numeros de las piezas y sus herramientas son tamanyables, pero en la escencia de que tu puedes hacerlas ligermanet mas largas en la pantalla si quieres, o mas pequenyas, o cual sea el tamanyo.

El cuadro de interacciones tamanyizables, compartidos por todas la piezas, distribuye un numero de codigos de manipulación y constantes para poner la altura i la anchura de una pieza en absoluto o unidades relativas, o para dejar el tamanyo sin definir.

El tamanyo de una pieza puede ser colocado con los codigos “setWidth()” y “setHeight”. El codigo coje el tamanyo como un valor de punto-flotante. Tienes que dar la unidad de medida como segundo parametro par los siguientes codigos. Las unidades disponibles estan mostradas en la "Tabla 5.1, “Unidades de tamanyo”.


mycomponent.setWidth(100, Sizeable.UNITS_PERCENTAGE);
mycomponent.setWidth(400, Sizeable.UNITS_PIXELS);

Como alternativa, puedes especificar el tamanyo de una cadena. El formato como una cadena tiene que seguir los Estandard HTML/CSS de medidas específicas.


mycomponent.setWidth("100%");
mycomponent.setHeight("400px");

El valor percentual 100% hace que la pieza todo el tamanyo disponible en la dirección particular (observa la descripción de “Sizeable.UNITS_PERCENTAGE” en la taba de acontinuación). Tambien puedes usar el codigo accessodirecto “setSizeFull()” para colocar el tamanyo 100% en ambos direcciones.

El tamanyo puede ser definido en una o las dos dimensiones, que quiere decir que la pieza va a tomar el espacio necessario. La mayoria de las piezas tiene un tamanyo indefinido por defecto, pero alguno disenyo tienen el tamanyo maximo en la direccion horizontal. Puedes colocar la altura o la anchura como indefinida con el codigo “Sizeable.SIZE_UNDEFINED” para “setWidth()” y “setHeight()”.

Tienes que siempre mantener en tu mente que un disenyo con tamanyo indefinido no va a contener piezas con el tamanyo relativo definido, como “full size”. Ver seccion 6.12.1, “Tamanyo del disenyo” para mas detalles.

La Tabla 5.1, “Unidades de tamanyo” muestra una lista de las unidades disponibles i sus codigos definidos en el cuadro de interaccion tamanyizable.

Tabla 5.1.Unidades de tamanyo

UNITS_PIXELS px 1 Píxel es la medidia basica especifica-hardware de una pantalla de pixels fisica.
UNITS_POINTS pt El point és una unidad de tipo typografica, i suele usarso definiendo 1/72 inches o usando 0.35 mm. Sin embargo, en las pantalas el tamanyo puede variar significadamente dependiendo de la metrica de la pantalla.
UNITS_PICAS pc La pica és una unidad typografica, definida como 12 puntos, o 1/7 inches o con 4.233 mm. En las pantallas, el tamanyo puede variar dependiendo en la metrica de la pantalla.
UNITS_EM em És una unidad relativa a la fuente usada, la anchura de las letras mayusculas.
UNITS_EX ex És una unidad relativa a la fuente usada, la altura de las letras minusculas.
UNITS_MM mm És una unidad física, milimetros encima de la superficia fisica de la pantalla. El tamanyo actual depende de la pantalla, su metrica en el sistema operativo y en el navegador.
UNITS_CM cm És una unidad física de longitud, centimentro en la superficie de la pantalla. El tamanyo actual depende segun la pantalla, su metrica en el sistema operativo, y el navegador.
UNITS_INCH in És una unidad de longitud física, inches en la superfícies de la pantalla. El tamanyo actual depende en la pantalla, su metrica en el sistema operativo i el navegador.
UNITS_PERCENTAGE % És un porcentaje del tamanyo disponible. Por ejemplo de arriba de la pantalla a abajo se vuelve el valor 100%. El porcentaje se tiene que dar entre 0 o 100.

Si la pieza dentro “HorizontalLayout” o “VerticalLayout” tiene el tamanyo maximo fulsize en la misma direccion que el dissenyo, la pieza se va a expandir para agarrar todo el espacio disponible nessesario por las otras piezas. En la seccion 6.12.1, “tamanyo del dissenyo” para mas detalles.

5.3.10. Manejando enfoque introductor

Cuando el usuario clica en la pieza, la pieza recibe el enfoque introductor, que es indicada a través de iluminar en acuerdo a los estilos definidos. Si la pieza te permite introducir texto, el enfoque i el punto de insertar son indicados a través de un cursor. Pulsando la tecla Tab mueve el enfoque a la siguiente pieza en el orden de enfoque.

El enfocar es soportado por todas las piezas de cuadro y tambien por el “Form” y “Upload”.

El orden del enfoque o indice del tab de una pieza es definido como un valor integro positivo, que se puede colocar con “setTabIndex()” i recibir con “getTabIndex()”. El indice del tab es manejado en el contexto de la Ventana nivel-App en el cual las piezas son contenidas. El orden del enfoque puede saltar entre 2 contenedores de piezas cualquiera de nivel-bajo, como una sub-ventana o paneles.

El orden de enfoque estandard es determinado por el orden de la jerarquia natural de las piezas en el orden en el quan ellas fueren anyadidas bajo sus parientes. El indice tab estandard és 0.

Dando un integro negativo como el indice tab és removido el componenete del orden de enfoque enteramente.

Reglas de estilo CSS

La pieza que tiene el enfoque va a tener una classe de estilo adicional con el sufijo “the-focus”. Por ejemplo, un “TextField”, que normalmente tiene el estilo “v-textfield”, va a tener adicionalmente el estilo “v-textfield-focus”.

Por ejemplo, lo siguiente va a tner un cuadro de texto azul cuando tenga el focus.


.v-textfield-focus {
    background: lightblue;
}