You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1700 lines
63 KiB
1700 lines
63 KiB
<!--
|
|
<!DOCTYPE chapter PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN" "dtd/kdex.dtd">
|
|
|
|
-->
|
|
|
|
<sect1 id="designing-forms">
|
|
<title
|
|
>Desenhando Formulários</title>
|
|
|
|
<sect2 id="most-important-terms">
|
|
<title
|
|
>Termos mais importantes</title>
|
|
<glosslist>
|
|
<glossentry id="gloss-form">
|
|
<glossterm
|
|
>Formulário</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>Uma janela fornecida para propiciar uma fácil entrada e apresentação de dados na tela do computador. </para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-data-source">
|
|
<glossterm
|
|
>Fontes de dados de formulários</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>Uma tabela ou consulta de um banco de dados fornece os dados exibidos no formulário. A fonte de dados é necessário porque os formulários em si são apenas <emphasis
|
|
>ferramentas</emphasis
|
|
> para exibição e entrada de dados, enquanto tabelas e consultas são as fontes de dados. Formulários novos e vazios não possuem nenhuma fonte de dados atribuída, assim eles não estarão exibindo dados do seu banco de dados a menos que você atribua uma fonte de dados para eles. </para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-field">
|
|
<glossterm
|
|
>Campo de formulário</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>O equivalente direto da coluna em uma tabela ou consulta. Os campos são mais freqüentemente usados para exibir texto e números. Inserir um novo valor ou mudar um valor existente de um campo provoca uma mudança na coluna da tabela ou consulta atribuída ao campo (após a mudança ter sido aceita). </para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-design">
|
|
<glossterm
|
|
>Desenho do formulário</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>As tarefas que você executará para definir a aparência e funções do formulário. Para fazer isto, você precisa fornecer uma <glossterm linkend="gloss-form-data-source"
|
|
>fonte de dados</glossterm
|
|
>, inserir <glossterm linkend="gloss-form-field"
|
|
>campos de formulários</glossterm
|
|
> dos vários tipos e posicioná-los na posição adequada. </para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-widget">
|
|
<glossterm
|
|
>Elemento de formulário</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>Elementos do formulário. Os principais tipos de elemento são:</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Elementos que exibem informações, ⪚ uma caixa de texto ou uma caixa de imagem. Cada elemento deste tipo pode ser <emphasis
|
|
>ligado</emphasis
|
|
> a um campo da fonte de dados (coluna de uma tabela ou consulta). Como tal, estes tipos de campo são conhecidos também como <glossterm linkend="gloss-form-field"
|
|
>campos de formulário</glossterm
|
|
>. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Elementos capazes de executar uma determinada ação, ⪚ um botão que pode fechar o formulário atual. Dentro de outras aplicações, este tipo de elemento é algumas vezes chamado <firstterm
|
|
>controle do formulário</firstterm
|
|
> porque ele pode realizar ações previamente definidas de <emphasis
|
|
>controle</emphasis
|
|
> do comportamento de sua aplicação de banco de dados. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Outros elementos que permitem enriquecer a aparência do formulário, o <quote
|
|
>⪚elemento de linha</quote
|
|
> que pode separar visualmente duas áreas do formulário. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-container-widget">
|
|
<glossterm
|
|
>Elemento container</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>Um elemento que pode <emphasis
|
|
>conter</emphasis
|
|
> outros elementos dentro de sua área. Por exemplo, elemento de moldura ou elemento de aba são containers. A superfície do formulário em si é um container também. Um botão de comando não pode ser chamado de container porque não é possível inserir um elemento dentro dele. Em casos mais complexos, um elemento de container pode ser inserido dentro de outro container, assim o aninhamento é possível. </para>
|
|
<!--
|
|
<screenshot>
|
|
<screeninfo
|
|
>Example container widgets</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_01_widget_containers.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Example container widgets</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</glossdef>
|
|
</glossentry>
|
|
</glosslist>
|
|
</sect2>
|
|
|
|
<sect2 id="forms-versus-tables">
|
|
<title
|
|
>Formulários versus tabelas</title>
|
|
<para
|
|
>No capítulo 5.2 você aprendeu sobre como inserir dados diretamente em tabelas usando sua visão de dados da planilha. No entanto, em muitos casos formulários são mais adequados para entrada de dados: </para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Um tabela pode conter muitas colunas para exibí-las em sua tela. Um formulário pode exibir estes dados usando várias linhas. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Um formulário permites dividir os <glossterm linkend="gloss-form-field"
|
|
>campos</glossterm
|
|
> de dados visualmente em grupos lógicos, aumentando a legibilidade. Rótulos com informações adicionais podem ser inseridos para fornecer aos usuários dicas sobre como usar o formulário ou o quê o <glossterm linkend="gloss-form-field"
|
|
>campo</glossterm
|
|
> de dados significa. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Botões de comando podem ser usados neste formulários para os comandos normalmente usados de modo que os usuários podem usar os formulários de uma maneira semelhante a das aplicações independentes que eles conhecem. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Em uma visão de dados em planilha exibir <glossterm linkend="gloss-form-field"
|
|
>campos</glossterm
|
|
> de texto com múltiplas linhas ou imagens é tão fácil quanto em formulários. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</sect2>
|
|
|
|
<sect2>
|
|
<title
|
|
>Trabalhando com o desenhador de formulários</title>
|
|
<para
|
|
>Como no desenhador de tabelas ou consultas, você é capas de usar a <interface
|
|
>Visão em Dados</interface
|
|
> e a <interface
|
|
>Visão de Desenho</interface
|
|
>. O desenho do formulário é executado na <interface
|
|
>Visão de Desenho</interface
|
|
>. Nós freqüentemente nos referiremos à janela de desenho do formulário como <interface
|
|
>Desenhador de Formulário</interface
|
|
>. </para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Para criar um novo formulário vazio, selecione <menuchoice
|
|
><guimenu
|
|
>Inserir</guimenu
|
|
><guimenuitem
|
|
>Formulário</guimenuitem
|
|
></menuchoice
|
|
> no menu. Opcionalmente, você pode usar o comando <menuchoice
|
|
><guimenuitem
|
|
>Novo Formulário</guimenuitem
|
|
></menuchoice
|
|
> no botão de lista na barra de ferramentas do <interface
|
|
>Navegador do Projeto</interface
|
|
> ou o comando <menuchoice
|
|
><guimenuitem
|
|
>Criar Objeto: Formulário</guimenuitem
|
|
></menuchoice
|
|
> do menu de contexto. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Irá aparecer uma área nova, que você poderá dimensionar o formulário, movendo para isso as suas bordas. O formulário está coberto com uma grade, para simplificar o posicionamento preciso dos elementos. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>A window with design of a new form</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_03_new_empty_form.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>A window with design of a new form</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</step>
|
|
</procedure>
|
|
<para
|
|
>Como no desenho de tabelas, o <interface
|
|
>Desenhador de Formulário</interface
|
|
> fornece um <interface
|
|
>Painel de propriedades</interface
|
|
>. Para economizar espaço na tela, o painel possui três abas relacionadas ao formulário atualmente selecionado: </para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
>Aba <guilabel
|
|
>Propriedades</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Contém uma lista das propriedades para o elemento atualmente selecionado.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
>A página <guilabel
|
|
>Fonte de dados</guilabel
|
|
> </term>
|
|
<listitem>
|
|
<para
|
|
>Contém propriedades relacionadas especificamente à <glossterm linkend="gloss-form-data-source"
|
|
>fonte de dados</glossterm
|
|
> do elemento atualmente selecionado ou do formulário propriamente dito. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
>A página <guilabel
|
|
>Elementos</guilabel
|
|
> </term>
|
|
<listitem>
|
|
<para
|
|
>Contém uma hierarquia de todos os elementos do formulário. A lista simplifica a procura de elementos por nome e a navegação entre eles. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
<para
|
|
>Informações sobre o nome e tipo de elemento atualmente selecionado são exibidas na primeira e segunda abas. </para>
|
|
<para
|
|
>Barras de ferramentas adicionais estão também disponíveis:</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>A barra de ferramentas <guilabel
|
|
>Elementos</guilabel
|
|
> usada para inserir novos elementos no formulário </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>A barra de ferramentas <guilabel
|
|
>Formatação</guilabel
|
|
> usada para formatar os elementos do formulário (⪚, ajustar o tamanho dos elementos, agrupar elementos). Comandos de formatação estão também disponíveis no menu <guimenu
|
|
>Formatar</guimenu
|
|
>. Mais informações sobre estes comandos podem ser encontradas em <xref linkend="formatmenu"/>. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</sect2>
|
|
|
|
<sect2 id="using-the-widgets-tab">
|
|
<title
|
|
>Usando a aba <guilabel
|
|
>Elementos</guilabel
|
|
></title>
|
|
<para
|
|
>A aba <guilabel
|
|
>Elementos</guilabel
|
|
> no <interface
|
|
>Painel de propriedades</interface
|
|
> fornece uma lista de elementos do formulário e sua hierarquia. Cada elemento é apresentado dentro da hierarquia ao lado de outros elementos do mesmo nível (o mesmo container pai). Elementos filho (dentro dos containers) são apresentados usando nomes indentados. </para>
|
|
<!--<para
|
|
>In the picture below, the form (a container) contains two widgets:
|
|
<guilabel
|
|
>groupBox2</guilabel
|
|
> and <guibutton
|
|
>options</guibutton
|
|
> command button. In
|
|
turn, <guilabel
|
|
>groupBox2</guilabel
|
|
> (being a container itself) contains two check box
|
|
widgets.
|
|
</para>
|
|
<screenshot>
|
|
<screeninfo
|
|
>Using the <quote
|
|
>Widgets</quote
|
|
> tab</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_04_widgets_tab.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Using the <quote
|
|
>Widgets</quote
|
|
> tab</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
<para
|
|
>Cada elemento exibe seu nome e tipo. O tipo possui também um ícone relacionado - o mesmo que é exibido na barra de ferramentas quando o desenho do formulário é executado. </para>
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem
|
|
>
|
|
<para
|
|
>Mudar a seleção atual na lista provoca a seleção apropriada no formulário de desenho. Isto permite uma busca mais fácil de elementos por nome a uma fácil navegação. Por exemplo, é possível selecionar um elemento por nome, e então alternar para a aba de <guilabel
|
|
>Propriedades</guilabel
|
|
> para mudar as propriedades do elemento.</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Manter a tecla <keycap
|
|
>Ctrl</keycap
|
|
> pressionada enquanto um ítem na lista de elementos é selecionado permite que vários elementos sejam selecionados ao mesmo tempo. Manter a tecla <keycap
|
|
>Shift</keycap
|
|
> pressionada, permite selecionar listas inteiras de elementos.</para>
|
|
</listitem>
|
|
<!--<listitem>
|
|
<para>
|
|
When widget is inserted, it is recommended to give it a reasonable name.
|
|
For example, <guilabel
|
|
>green</guilabel
|
|
> check box widget has been named specifically
|
|
for its meaning, using the <guilabel
|
|
>Properties</guilabel
|
|
> tab
|
|
(<guilabel
|
|
>Name</guilabel
|
|
> property has been used to do that). Such change
|
|
can make it easier to find a widget within the list.
|
|
</para>
|
|
<screenshot>
|
|
<screeninfo
|
|
>Naming the widget as <guilabel
|
|
>green</guilabel
|
|
></screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_04_renaming_widgets.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Naming the widget as <guilabel
|
|
>green</guilabel
|
|
></phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
</listitem
|
|
>-->
|
|
</itemizedlist>
|
|
</note>
|
|
<para
|
|
>Atribuir nomes razoáveis aos elementos pode ser útil mas não é obrigatório. Note que o nome do elemento é uma propriedade que não é visível para o usuário do seu formulário. Usuários somente verão o texto do elemento, fornecido pela propriedade <varname
|
|
>Texto</varname
|
|
> ou similar. </para>
|
|
</sect2>
|
|
|
|
<sect2 id="inserting-widgets-text-fields">
|
|
<title
|
|
>Inserindo elementos - campos de texto</title>
|
|
<para
|
|
>Vamos criar um formulário fornecendo informações pessoais, isto é, um formulário conectado com a tabela <literal
|
|
>Pessoas</literal
|
|
>. </para>
|
|
<para
|
|
>Se o formulário que está sendo desenhado deve apresentar dados obtidos de um banco de dados, você precisa colocar os <glossterm linkend="gloss-form-field"
|
|
>campos</glossterm
|
|
> apropriados nele. Para fazer isto, use os botões da barra de ferramentas <guilabel
|
|
>Elementos</guilabel
|
|
>. Cada botão corresponde a um tipo de elemento único. </para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Clique no botão <guibutton
|
|
>Caixa de Texto</guibutton
|
|
> na barra de ferramentas <guilabel
|
|
>Elementos</guilabel
|
|
>. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Clique na superfície do formulário com o botão <mousebutton
|
|
>esquerdo</mousebutton
|
|
> do mouse. Um novo elemento de caixa de texto será posicionado no ponto onde você clicou. Antes de soltar o botão, você pode arrastar seu mouse para especificar o tamanho desejado para o elemento. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Se necessário, mova o elemento inserido usando o arrastar & soltar para a posição desejada. Você pode redimensionar o elemento posteriormente arrastando uma das pequenas caixas que aparecem próximas aos cantos. Note que as caixas só estarão visíveis quando o elemento estiver selecionado. Se você selecionar outro elemento ou a superfície do formulário, as caixas desaparecerão. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Clique novamente no botão <guibutton
|
|
>Caixa de Texto</guibutton
|
|
> da barra de ferramentas e clique na superfície do formulário para inserir outro elemento. Repita esta ação uma vez mais até que você possua três caixas de texto inseridas em seu formulário. Por questão de simplicidade, nós nos limitaremos a três <glossterm linkend="gloss-form-field"
|
|
>campos</glossterm
|
|
> de dados. </para>
|
|
</step>
|
|
</procedure>
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Existe um menu de contexto disponível no modo de desenho de formulário, ativado por um clique do botão <mousebutton
|
|
>direito</mousebutton
|
|
> do mouse no elemento desejado ou na superfície do formulário. O menu oferece comandos como <guimenuitem
|
|
>Cortar</guimenuitem
|
|
>, <guimenuitem
|
|
>Copiar</guimenuitem
|
|
>, <guimenuitem
|
|
>Colar</guimenuitem
|
|
>, <guimenuitem
|
|
>Excluir</guimenuitem
|
|
>, dentre outros mais complexos. Muitos dos comandos também são fornecidos a partir do <guilabel
|
|
>Menu</guilabel
|
|
>, normalmente no ítem <guimenuitem
|
|
>Editar</guimenuitem
|
|
>. Atalhos de teclado estão também disponíveis para estes comandos. Alguns dos comandos somente estão disponíveis para determinados tipos de elementos. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Os comandos <guimenuitem
|
|
>Cortar</guimenuitem
|
|
>, <guimenuitem
|
|
>Copiar</guimenuitem
|
|
> e <guimenuitem
|
|
>Colar</guimenuitem
|
|
> tornam possível mover ou copiar elementos entre formulários, até mesmo formulários de diferentes projetos de bancos de dados </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Mantendo a tecla <keycap
|
|
>Ctrl</keycap
|
|
> pressionada enquanto clica um elemento permitirá selecionar vários elementos ao mesmo tempo. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Ao invés de usar os comandos <guimenuitem
|
|
>Copiar</guimenuitem
|
|
> e <guimenuitem
|
|
>Colar</guimenuitem
|
|
> para duplicar um elemento dentro do mesmo formulário, você pode manter a tecla <keycap
|
|
>Ctrl</keycap
|
|
> pressionada enquanto move um elemento. Após a tecla <keycap
|
|
>Ctrl</keycap
|
|
> ser solta, o elemento arrastado não será movido mas copiado para a nova posição. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</note>
|
|
</sect2>
|
|
|
|
<sect2 id="assigning-data-sources">
|
|
<title
|
|
>Atribuindo fontes de dados</title>
|
|
<para
|
|
>Os <glossterm linkend="gloss-form-field"
|
|
>campos</glossterm
|
|
> que você inseriu não possuem nenhuma <emphasis
|
|
>fonte de dados</emphasis
|
|
> atribuída a eles ainda, assim eles não são capazes de exibir informações do banco de dados. Para atribuir uma fonte de dados, use a página <guilabel
|
|
>Fonte de Dados</guilabel
|
|
> do <interface
|
|
>Painel de propriedades</interface
|
|
>. </para>
|
|
<para
|
|
>O primeiro passo é especificar a <glossterm linkend="gloss-form-data-source"
|
|
>fonte de dados do formulário</glossterm
|
|
>, isto é, o local de onde os dados exibidos serão buscados. Como mencionado acima, você usar a tabela <literal
|
|
>pessoas</literal
|
|
> como <glossterm linkend="gloss-form-data-source"
|
|
>fonte de dados</glossterm
|
|
> para o nosso novo formulário. </para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Clique na superfície do formulário, de modo a alterar as suas propriedades.</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Alterne para a aba <guilabel
|
|
>Fonte de Dados</guilabel
|
|
> e insira o nome da tabela <literal
|
|
>pessoas</literal
|
|
> na lista <guilabel
|
|
>Fonte de dados do formulário</guilabel
|
|
>. Em alternativa, você pode selecionar este nome a partir da lista. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Entering <glossterm linkend="gloss-form-data-source"
|
|
>form's data source</glossterm
|
|
> name</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_05_entering_form_data_source.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Entering <glossterm linkend="gloss-form-data-source"
|
|
>form's data source</glossterm
|
|
> name</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</step>
|
|
</procedure>
|
|
<para
|
|
>Você atribuiu a <glossterm linkend="gloss-form-data-source"
|
|
>fonte de dados do formulário</glossterm
|
|
>. Agora você precisa especificar a fonte de dados para os elementos. </para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Clique no primeiro elemento de campo de texto no topo do formulário.</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Na página <guilabel
|
|
>Fonte de Dados</guilabel
|
|
> do painel de propriedades insira o nome do campo <varname
|
|
>nome</varname
|
|
> na lista <emphasis
|
|
>Fonte de dados do elemento</emphasis
|
|
>. Alternativamente, você pode selecionar este nome a partir da lista. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Entering widget's data source name</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_05_entering_text_field_data_source.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Entering widget's data source name</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Clique no próximo elemento de campo de texto e insira <varname
|
|
>sobrenome</varname
|
|
> como fonte de dados.</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Insira como fontes de dados <varname
|
|
>rua</varname
|
|
>, <varname
|
|
>numero_casa</varname
|
|
> e <varname
|
|
>cidade</varname
|
|
> para os demais <glossterm linkend="gloss-form-field"
|
|
>campos</glossterm
|
|
> de texto de maneira semelhante. </para>
|
|
</step>
|
|
</procedure>
|
|
<para
|
|
>Você pode agora salvar o desenho do formulário (isto não é obrigatório para testar o funcionamento do formulário). Para salvar, clique o botão <guilabel
|
|
>Salvar mudanças do objeto</guilabel
|
|
> na barra de ferramentas ou use o menu <menuchoice
|
|
><shortcut
|
|
><keycombo action="simul"
|
|
><keycap
|
|
>Ctrl</keycap
|
|
><keycap
|
|
>S</keycap
|
|
></keycombo
|
|
></shortcut
|
|
> <guimenu
|
|
>Arquivo</guimenu
|
|
><guimenuitem
|
|
>Salvar</guimenuitem
|
|
></menuchoice
|
|
>. Ao salvar, será solicitado que você insira o nome do formulário. Insira <literal
|
|
>Pessoas</literal
|
|
> como título e clique no botão <guibutton
|
|
>OK</guibutton
|
|
>. O nome do formulário será preenchido automaticamente. </para>
|
|
<para
|
|
>Este é o momento certo para testar o seu formulário. Clique o botão <guibutton
|
|
>Alternar para a visão de dados</guibutton
|
|
> na barra de ferramentas. A menos que você tenha cometido algum erro ao inserir as fontes de dados, você deverá ver <glossterm linkend="gloss-form-field"
|
|
>campos do formulário</glossterm
|
|
> preenchidos com dados da tabela <literal
|
|
>pessoas</literal
|
|
>. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>The <literal
|
|
>Persons</literal
|
|
> form in data view after inserting text fields and assigning data sources</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_06_form_with_text_fields.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>The <literal
|
|
>Persons</literal
|
|
> form in data view after inserting text fields and assigning data sources</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Se você deseja remover a atribuição de <glossterm linkend="gloss-form-data-source"
|
|
>fonte de dados</glossterm
|
|
> para um elemento do formulário, você pode usar o botão <guibutton
|
|
>Limpar fonte de dados do elemento</guibutton
|
|
> próximo à lista <guilabel
|
|
>Fonte de dados do elemento</guilabel
|
|
>. Do mesmo modo, você pode usar o botão <guibutton
|
|
>Limpar fonte de dados</guibutton
|
|
> próximo à lista <guilabel
|
|
>Fonte de dados do formulário</guilabel
|
|
>. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Use o botão <guibutton
|
|
>Ir para fonte de dados selecionada</guibutton
|
|
> para selecionar a tabela ou consulta apropriada no <interface
|
|
>Navegador do Projeto</interface
|
|
>, de modo que você possa rapidamente abrir uma tabela ou consulta como <glossterm linkend="gloss-form-data-source"
|
|
>fonte de dados</glossterm
|
|
> do formulário. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<!-- TODO: mention about creating Auto Fields by using drag & drop -->
|
|
</note>
|
|
</sect2>
|
|
|
|
<sect2 id="inserting-text-labels">
|
|
<title
|
|
>Inserindo rótulos de texto</title>
|
|
<para
|
|
>Para tornar fácil para o usuário do formulário identificar o significado de cada elemento de campo, eles podem ser acrescidos de rótulos de texto com os títulos apropriados. Para criar rótulos de texto, o elemento <literal
|
|
>Rótulo</literal
|
|
> é usado. </para>
|
|
<para
|
|
>Insira três elementos de rótulos de texto no formulário, colocando-os à esquerda dos campos de texto (ou à direita se seu sistema operacional usa um layout direita-para-esquerda). Ao inserir um novo rótulo, um cursor de texto aparece na posição onde você pode inserir o título desejado. Insira consecutivamente: <literal
|
|
>Nome</literal
|
|
>, <literal
|
|
>Sobrenome</literal
|
|
> e <literal
|
|
>Rua</literal
|
|
>. Adicionalmente, no topo do formulário insira outro rótulo exibindo o nome do formulários, isto é, <literal
|
|
>Pessoas</literal
|
|
>. Aumente o tamanho deste rótulo e configure uma fonte maior usando o menu <menuchoice
|
|
><guimenu
|
|
>Formatar</guimenu
|
|
><guimenuitem
|
|
>Fonte</guimenuitem
|
|
></menuchoice
|
|
>. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Ready to use form after adding text labels</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_06_form_with_labels.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Ready to use form after adding text labels</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</sect2>
|
|
|
|
<sect2 id="actions">
|
|
<title
|
|
>Ações</title>
|
|
<para
|
|
>Uma <literal
|
|
>Ação</literal
|
|
> é um atividade única isolada na aplicação, disponível para o usuário executar. Ela pode ser executada automaticamente como uma reação para um determinado evento (⪚, após abrir um formulário). </para>
|
|
|
|
<sect3 id="assigning-actions-to-form-buttons">
|
|
<title
|
|
>Atribuindo ações aos botões do formulário</title>
|
|
<para
|
|
>A maioria das ações podem ser atribuídas aos botões do formulário. A ação atribuída é executada após o botão ser clicado. </para>
|
|
<para
|
|
>Para atribuir uma ação:</para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Alterne para a visão de <interface
|
|
>Desenho do formulário</interface
|
|
> se você ainda não tiver feito isto.</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Selecione o elemento de botão existente clicando nele ou colocando um novo elemento de botão no formulário. Se você inserir um novo botão, insira seu título e pressione <keycombo action="press"
|
|
><keycap
|
|
>Enter</keycap
|
|
></keycombo
|
|
>. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Clique no elemento de botão com o botão <mousebutton
|
|
>direito</mousebutton
|
|
> do mouse para exibir o menu de contexto. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>A partir do menu de contexto, selecione o comando <guimenuitem
|
|
>Atribuir ação...</guimenuitem
|
|
>. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Uma janela para <guilabel
|
|
>Atribuir Ação para o Botão de Comando</guilabel
|
|
> surgirá apresentando uma lista das ações disponíveis. Uma das ações estará selecionada se o elemento já tiver uma ação atribuída. Caso contrário a lista <guilabel
|
|
>Tipo de ação</guilabel
|
|
> terá como ítem selecionado o <guilabel
|
|
>Nenhum tipo</guilabel
|
|
>. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Na lista <guilabel
|
|
>Tipo de ação</guilabel
|
|
> selecione o ítem <guilabel
|
|
>Aplicação</guilabel
|
|
>. As ações disponíveis a nível da aplicação serão listadas. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Selecione uma das ações na lista (⪚, <guilabel
|
|
>Excluir Linha</guilabel
|
|
>).</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Clique no botão <guibutton
|
|
>OK</guibutton
|
|
> ou pressione a tecla <keycombo action="press"
|
|
><keycap
|
|
>Enter</keycap
|
|
></keycombo
|
|
> para aceitar sua seleção. </para>
|
|
</step>
|
|
</procedure>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Assigning <guilabel
|
|
>Delete Row</guilabel
|
|
> action to a form's button</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_07_assigning_action_to_button.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Assigning <guilabel
|
|
>Delete Row</guilabel
|
|
> action to a form's button</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
<para
|
|
>Após alternar para a <emphasis
|
|
>visão de dados</emphasis
|
|
> do formulário, você pode experimentar se a ação funcione. Por exemplo, se você atribuiu a ação <guilabel
|
|
>Excluir Linha</guilabel
|
|
>, clicando no botão a linha atualmente selecionada no banco de dados será excluída, da mesma maneira que executando o comando de menu <menuchoice
|
|
><shortcut
|
|
><keycombo action="simul"
|
|
><keycap
|
|
>Ctrl</keycap
|
|
><keycap
|
|
>Delete</keycap
|
|
></keycombo
|
|
></shortcut
|
|
><guimenu
|
|
>Editar</guimenu
|
|
><guimenuitem
|
|
>Excluir Linha</guimenuitem
|
|
></menuchoice
|
|
> (dependendo das suas configurações, pode ser solicitada uma confirmação para exclusão). </para>
|
|
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Para remover uma atribuição de uma ação, selecione o ítem <guilabel
|
|
>Nenhum tipo</guilabel
|
|
> na lista <guilabel
|
|
>Tipo de ação</guilabel
|
|
> da janela <guilabel
|
|
>Atribuir Ação para Botão de Comando</guilabel
|
|
>. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Ações somente funcionam na <emphasis
|
|
>visão de dados</emphasis
|
|
> do formulário. Nem toda atribuição de ação é razoável. Por exemplo, ações de <guimenuitem
|
|
>Fonte...</guimenuitem
|
|
> estão disponíveis na visão de dados do formulário, mas somente se você tiver um elemento selecionado na <interface
|
|
>Visão de desenho</interface
|
|
>. Se você fizer mudanças nas configurações de fonte, as mudnças serão aplicadas ao texto daquele elemento selecionado. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</note>
|
|
</sect3>
|
|
</sect2>
|
|
|
|
<sect2 id="widget-layouts">
|
|
<title
|
|
>Disposição dos elementos</title>
|
|
<para
|
|
>Na maioria dos casos os elementos do formulário deverão ser convenientemente posicionados e alinhados. Posicionar, alinhar e redimensionar elementos manualmente não é fácil e estes parâmetros não serão ajustados quando o usuário redimensiona o formulário. De fato, a situação pode ser ainda pior porque você não pode considerar que um determinado formulário requer um determinado espaço uma vez que os usuários usam diferentes tamanhos de fonte e resoluções de tela. </para>
|
|
<!--
|
|
<para>
|
|
The following example presents a form where text fields and labels were
|
|
placed by hand. Some of them cannot fit in the form's window.
|
|
</para>
|
|
<screenshot>
|
|
<screeninfo
|
|
>An example form with widgets that cannot not fit in the window</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_no_fit.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>An example form with widgets that cannot not fit in the window</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
<para
|
|
>Usar a ferramenta especial chamada disposição de elementos pode ajudá-lo a dispor automaticamente os elementos do formulário. Disposição de elementos é uma ação de grupar dois ou mais elementos de modo que eles estejam bem posicionados e possuam tamanhos apropriados. </para>
|
|
<para
|
|
>Usar esta disposição em um formulário melhora o alinhamento. Além do mais, seu espaço é melhor aproveitado. Campos de texto estão próximos um do outro e o espaçamento é constante. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Example form with layout used</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_well_fit.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Example form with layout used</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
<para
|
|
>Existem dois métodos para criar uma disposição de elementos.</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Selecionar dois ou mais elementos que devem ser colocados em uma disposição comum, e selecionar um dos tipos de disposição a partir do ítem <guilabel
|
|
>Disposição de Elementos</guilabel
|
|
> do menu de contexto. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Clique em um elemento container (ou na própria superfície do formulário), onde os elementos serão inseridos e selecione um dos tipos de disposição a partir do ítem Disposição de Elementos do menu de contexto. Todos os elementos existentes no container ou no formulário, sendo do mesmo nível, serão colocados em uma disposição comum única. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<para
|
|
>Em cada um destes casos, você pode também usar o menu <menuchoice
|
|
><guimenu
|
|
>Formatar</guimenu
|
|
><guimenuitem
|
|
>Disposição dos Elementos</guimenuitem
|
|
></menuchoice
|
|
>. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Selecting widgets that will be put into a layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_selecting.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Selecting widgets that will be put into a layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
<screenshot>
|
|
<screeninfo
|
|
>Four widgets are selected</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_selected.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Four widgets are selected</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
<screenshot>
|
|
<screeninfo
|
|
>Using the context menu for putting the widgets into a grid layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_popup.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Using the context menu for putting the widgets into a grid layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
<para
|
|
>A disposição de elementos é apresentada na visão de desenho usando uma caixa azul, verde ou vermelha desenhada com uma linha tracejada. Esta linha é exibida somente na visão de desenho do formulário. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Widgets within a grid layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_grid.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Widgets within a grid layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
<para
|
|
>Além do tipo grade, existem outros tipos de disposição de elementos.</para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
>vertical</term>
|
|
<listitem>
|
|
<para
|
|
>Disposição de elementos vertical</para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Vertical widget layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_vertical.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Vertical widget layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
>horizontal</term>
|
|
<listitem>
|
|
<para
|
|
>Disposição de elementos horizontal</para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Horizontal widget layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_horizontal.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Horizontal widget layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</listitem>
|
|
</varlistentry>
|
|
<!-- TODO podzia poziomy / pionowy
|
|
<br
|
|
><img src="img/05_04_08_form_layout_vertical_splitter.png">
|
|
<br
|
|
><br>
|
|
<br
|
|
><img src="img/05_04_08_form_layout_horizontal_splitter.png">
|
|
<br
|
|
><br>
|
|
</li
|
|
> -->
|
|
</variablelist>
|
|
|
|
<sect3 id="springs-in-widget-layouts">
|
|
<title
|
|
>Molas em disposições de elementos</title>
|
|
<para
|
|
>Uma <emphasis
|
|
>mola</emphasis
|
|
> em uma disposição de elementos é um elemento especial e invisível que permite ajustar a posição e o tamanho dos elementos dentro de uma disposição. Como uma mola, ele estica e comprime um elemento à direita, na base ao à esquerda, de modo que ele possua a posição e tamanhos desejados. </para>
|
|
<para
|
|
>Para usar uma mola:</para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Selecione o ícone de mole na barra de ferramentas de <guilabel
|
|
>Elementos</guilabel
|
|
>. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Clique no ponto selecionado do formulário para inserir a mola.</para>
|
|
</step>
|
|
</procedure>
|
|
<!--<para>
|
|
For the following example, the spring has been inserted on the left
|
|
hand of the text label "Persons". The label is thus displayed on the
|
|
right hand of the form. To make the spring work, it has been put into
|
|
a common horizontal layout with the label.
|
|
</para>
|
|
<screenshot>
|
|
<screeninfo
|
|
>Horizontal layout containing a spring and a text label</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_spring.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Horizontal layout containing a spring and a text label</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
<para
|
|
>Para fazer a mola funcionar, você precisa criar uma disposição global de elementos, isto é, uma disposição para o formulário propriamente dito. Após isso, molas podem usar os lados do formulário como limite para expansão. </para>
|
|
</sect3>
|
|
<!--
|
|
|
|
TODO: The entire text in this section is built around a screenshot
|
|
example, so it's commented out for now.
|
|
|
|
<sect3 id="advanced-widget-layouts">
|
|
<title
|
|
>Advanced widget layouts</title>
|
|
<para>
|
|
Widget layouts can be combined (or nested). On the following example
|
|
you can identify two nested layouts:
|
|
</para>
|
|
<orderedlist>
|
|
<listitem>
|
|
<para>
|
|
Horizontal layout with a spring, aligning the <literal
|
|
>Persons</literal>
|
|
text label to the right.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Grid layout grouping widgets on the whole form.</para>
|
|
</listitem>
|
|
</orderedlist>
|
|
<screenshot>
|
|
<screeninfo
|
|
>Two widget layouts combined: horizontal layout inside of a grid layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_advanced_layout.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Two widget layouts combined: horizontal layout inside of a grid layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
<para>
|
|
The horizontal layout is treated in the example as a single widget by
|
|
the grid layout - it takes exactly one <quote
|
|
>cell</quote
|
|
> of the grid.
|
|
After opening a form designed this way in the data view, you can notice
|
|
(by resizing the form) that:
|
|
</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
<literal
|
|
>Persons</literal
|
|
> text label thanks to the spring used is constantly
|
|
aligned to the to the right side of the form.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Text fields take all of the available width thanks to putting them
|
|
into the grid layout.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
All the form's widgets are pushed to the top thanks to the spring
|
|
used at the bottom of the form.
|
|
</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<screenshot>
|
|
<screeninfo
|
|
>The form using the two layouts displayed in data view</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_advanced_layout_view.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>The form using the two layouts displayed in data view</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
</sect3
|
|
>-->
|
|
|
|
<sect3 id="removing-widget-layouts">
|
|
<title
|
|
>Removendo disposições de elementos</title>
|
|
<para
|
|
>Para remover uma disposição de elementos sem remover os elementos, execute uma destas a ações: </para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Clique com o botão <mousebutton
|
|
>direito</mousebutton
|
|
> do mouse na borda da disposição e selecione o comando <guimenuitem
|
|
>Quebrar Disposição</guimenuitem
|
|
> a partir do menu de contexto. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Clique com o botão <mousebutton
|
|
>esquerdo</mousebutton
|
|
> do mouse na borda da disposição e selecione o menu <menuchoice
|
|
><guimenu
|
|
>Formatar</guimenu
|
|
><guimenuitem
|
|
>Quebrar Disposição</guimenuitem
|
|
></menuchoice
|
|
>. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<note>
|
|
<para
|
|
>Remover uma disposição de elementos usando o comando <guimenuitem
|
|
>Quebrar Disposição</guimenuitem
|
|
> não removerá os elementos contidos na disposição. Se você deseja remover os elementos também, apenas selecione a disposição clicando em sua borda e pressione a tecla <keycap
|
|
>Delete</keycap
|
|
> ou use o menu <menuchoice
|
|
><guimenu
|
|
>Editar</guimenu
|
|
><guimenuitem
|
|
>Excluir</guimenuitem
|
|
></menuchoice
|
|
> ou o comando equivalente do menu de contexto. </para>
|
|
</note>
|
|
</sect3>
|
|
|
|
<sect3 id="size-policies-for-widgets-within-a-layout">
|
|
<title
|
|
>Política de tamanhos para elementos dentro de uma disposição</title>
|
|
<para
|
|
>Ao invés de usar um tamanho fixo para seus elementos, no &kexi; você pode escolher entre várias políticas de tamanho de elementos. Um <emphasis
|
|
>política de tamanho</emphasis
|
|
> é uma estratégia flexível para controlar como um elemento é esticado (ou encolhido) dependendo dos elementos vizinhos e do espaço disponível no formulário. </para>
|
|
<para
|
|
>Após colocar os elementos em uma <emphasis
|
|
>disposição</emphasis
|
|
>, normalmente cada elemento obtém uma proporcional política de tamanho (<guilabel
|
|
>Preferencial</guilabel
|
|
>). Estes elementos serão automaticamente redimensionados com as configurações preferenciais, dependendo do seu tipo e tamanho da disposição em si. Por exemplo, três botões colocados em uma disposição horizontal serão redimensionados para manter seus textos visíveis. </para>
|
|
<para
|
|
>Para cada elemento inserido no formulário, haverão configurações para política de tamanho disponíveis no <interface
|
|
>Editor de Propriedades</interface
|
|
>. As configurações são apresentadas como grupos de propriedades chamados <guilabel
|
|
>Política de Tamanho</guilabel
|
|
>. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>A group of properties for defining a widget's size policy</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_09_size_policy_properties.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>A group of properties for defining a widget's size policy</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
<para
|
|
>Este grupo de propriedades contém:</para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Política de Tamanho Horizontal</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>definindo o tamanho horizontal do elemento,</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Política de Tamanho Vertical</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>definindo o tamanho vertical do elemento,</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Esticamento Horizontal</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>definindo a força da atividade da <guilabel
|
|
>Política de Tamanho Horizontal</guilabel
|
|
>, </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Esticamento Vertical</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>definindo a força da atividade da <guilabel
|
|
>Política de Tamanho Vertical</guilabel
|
|
> </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
|
|
<sect4>
|
|
<title
|
|
>Valores para as políticas de tamanho</title>
|
|
<para
|
|
>Os seguintes valores estão disponíveis na lista para as propriedades da <guilabel
|
|
>Política Horizontal de Tamanho</guilabel
|
|
> e <guilabel
|
|
>Política Vertical de Tamanho</guilabel
|
|
> visíveis no <interface
|
|
>Editor de Propriedades</interface
|
|
>: </para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Fixo</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>este valor significa que o elemento não pode ser automaticamente redimensionado; ele deve manter um tamanho constante definido durante o desenho (largura e altura), </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Mínimo</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>este valor significa que o tamanho original do elemento é configurado como o mínimo permitido, ele é suficiente e não há necessidade de expandir o elemento, mas o elemento será expandido se necessário. Este tipo de política pode ser usada para forçar que o elemento seja expandido para a largura ou altura totais, especialmente se você configurar um valor de esticamento maior que 0. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Text field and two buttons within a grid layout (Minimum horizontal size policy is set for both buttons, so these are slightly wider than needed)</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_09_size_policy_minimum.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Text field and two buttons within a grid layout (Minimum horizontal size policy is set for both buttons, so these are slightly wider than needed)</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Máximo</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>este valor significa que o tamanho original do elemento está configurado para o máximo permitido e que pode ser diminuído sem quebrar a usabilidade e legibilidade do elemento se outros elementos necessitarem de mais espaço, </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Preferencial</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>este valor significa que o tamanho original do elemento é o mais adequado ou preferencial; no entanto, o elemento pode ser encolhido ou expandido e ele permanecerá legível, </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_09_size_policy_preferred.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Expansível</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>este valor significa que o tamanho original do elemento é razoável mas o elemento pode também ser encolhido; ele pode ser expandido também para tomar tanto espaço quanto possível, </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Expansão Mínima</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>este valor significa que o tamanho original do elemento é permitido; ele pode ser expandido para tomar tanto espaço quanto possível, </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Ignorado</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>este valor significa que o tamanho original do elemento é ignorado; o elemento pode ser expandido para tomar tanto espaço quanto possível mas outros elementos normalmente não permitirão isso </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
<para
|
|
>Tipos diferentes de elementos possuem políticas de tamanho padrão variadas; por exemplo, elementos de botão possuem a política de tamanho padrão configurada para <guilabel
|
|
>Mínimo</guilabel
|
|
> (em ambas direções), enquanto elementos de campo de texto possuem a política de tamanho vertical configurada para <guilabel
|
|
>Fixo</guilabel
|
|
>. </para>
|
|
<para
|
|
>As políticas de tamanho mais freqüentementes usadas são <guilabel
|
|
>Preferencial</guilabel
|
|
>, <guilabel
|
|
>Mínimo</guilabel
|
|
> e <guilabel
|
|
>Máximo</guilabel
|
|
>. </para>
|
|
</sect4>
|
|
|
|
<sect4>
|
|
<title
|
|
>Esticamento horizontal e vertical</title>
|
|
<para
|
|
>As propriedades de <guilabel
|
|
>Esticamento Vertical</guilabel
|
|
> e <guilabel
|
|
>Esticamento Horizontal</guilabel
|
|
> aceitam valores inteiro maiores ou iguais a 0. Estas propriedades permitem um ajuste fino do comportamento das políticas de tamanho. O valor padrão para a maioria das propriedades é 0. Um valor maior de esticamento significa que o elemento será expandido mais do que os outros elementos que possuem um valor menor configurado. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Size of button widgets affected by setting Vertical Stretch property of the second button to 1</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_09_size_policy_vertical_stretch.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Size of button widgets affected by setting Vertical Stretch property of the second button to 1</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</sect4>
|
|
</sect3>
|
|
</sect2>
|
|
|
|
<sect2 id="setting-widgets-size-and-position-by-hand">
|
|
<title
|
|
>Configurando a posição e tamanho dos elementos manualmente</title>
|
|
<para
|
|
>Caso o seu formulário não possua nenhuma disposição principal configurada para posicionamento e redimensionamento automáticos, você provavelmente desejará modificar o tamanho e posição dos elementos de modo que o formulário pareça limpo e fácil de usar. O desenhador de formulários do &kexi; simplifica esta tarefa oferecendo os seguintes grupos de comandos: </para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Ajustar tamanhos dos elementos selecionados. Os comandos estão disponíveis na opção <menuchoice
|
|
><guimenu
|
|
>Formatar</guimenu
|
|
><guisubmenu
|
|
>Ajustar Tamanho dos Elementos</guisubmenu
|
|
></menuchoice
|
|
> do menu ou na opção <menuchoice
|
|
><guisubmenu
|
|
>Ajustar Tamanho dos Elementos</guisubmenu
|
|
></menuchoice
|
|
> do menu de contexto. O botão <guibutton
|
|
>Ajustar Tamanho dos Elementos</guibutton
|
|
> da barra de ferramentas também está disponível. </para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aofit.png" class="icon"
|
|
>--><guilabel
|
|
>Para Caber</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Os tamanhos dos elementos selecionados serão alterados de modo que cada elemento será redimensionado para um tamanho que caiba seu conteúdo; por exemplo, o tamanho dos rótulos de texto serão mudados para caber o seu texto. A posição dos elementos não será mudada. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aogrid.png" class="icon"
|
|
>--><guilabel
|
|
>À Grade</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Os tamanhos dos elementos selecionados serão alterados de modo que cada canto do elemento será colocado em um ponto da grade do formulário (ou outro container). A posição dos elementos pode ser levemente alterada. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aoshortest.png" class="icon"
|
|
>--><guilabel
|
|
>Para o Menor</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>A altura dos elementos selecionados será alterada de modo que todos eles terão a mesma altura do menor. A posição dos elementos não será mudada. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aotallest.png" class="icon"
|
|
>--><guilabel
|
|
>Para o Mais Alto</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>A altura dos elementos selecionados será alterada de modo que todos eles terão a mesma altura do mais alto. A posição dos elementos não será mudada. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aonarrowest.png" class="icon"
|
|
>--><guilabel
|
|
>Para o Mais Estreito</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>A largura dos elementos selecionados será alterada de modo que todos eles terão a mesma largura do mais estreito. A posição dos elementos não será mudada. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aowidest.png" class="icon"
|
|
>--><guilabel
|
|
>Para o Mais Largo</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>A largura dos elementos selecionados será alterada de modo que todos eles terão a mesma largura do mais largo. A posição dos elementos não será mudada. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Alinhar as posições dos elementos selecionados. Os comandos estão disponíveis na opção <menuchoice
|
|
><guimenu
|
|
>Formatar</guimenu
|
|
><guisubmenu
|
|
>Alinhar Posição dos Elementos</guisubmenu
|
|
></menuchoice
|
|
> do menu e a opção <menuchoice
|
|
><guisubmenu
|
|
>Alinhar Posição dos Elementos</guisubmenu
|
|
></menuchoice
|
|
> do menu de contexto. O botão de lista <guibutton
|
|
>Alinhar Posição dos Elementos</guibutton
|
|
> da barra de ferramentas também está disponível. </para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aoleft.png" class="icon"
|
|
>--><guilabel
|
|
>À Esquerda</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Todos os elementos selecionados serão alinhados com o lado esquerdo do elemento mais à esquerda dentre os selecionados. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aoright.png" class="icon"
|
|
>--><guilabel
|
|
>À Direita</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Todos os elementos selecionados serão alinhados com o lado direito do elemento mais à direita dentre os selecionados. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aotop.png" class="icon"
|
|
>--><guilabel
|
|
>Ao Topo</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Todos os elementos selecionados serão alinhados com o lado superior do elemento mais acima dentre os selecionados. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aobottom.png" class="icon"
|
|
>--><guilabel
|
|
>Ao Fundo</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Todos os elementos selecionados serão alinhados com o lado inferior do elemento mais abaixo dentre os selecionados. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aopos2grid.png" class="icon"
|
|
>--><guilabel
|
|
>À Grade</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Todos os 'cantos superiores esquerdo dos elementos selecionados serão movidos de modo que fiquem posicionados no ponto da grade mais próximo. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
<para
|
|
>Nenhum dos comandos acima redimensiona os elementos.</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<para
|
|
>Existem também alguns comandos adicionais disponíveis: <guimenuitem
|
|
>Trazer Elemento para Frente</guimenuitem
|
|
> (isto é, acima de todos os outros elementos) e <guimenuitem
|
|
>Enviar Elemento para Trás</guimenuitem
|
|
> (isto é, abaixo de todos os outros elementos). Estes dois comandos são raramente usados, uma vez que não é muito comum colocar um elemento acima do outro (exceto quando um container contém outro elemento dentro). Note também que clicar em um elemento com o botão do mouse é o suficiente para trazer o elemento para frente. </para>
|
|
</sect2>
|
|
|
|
<sect2 id="setting-the-tab-order">
|
|
<title
|
|
>Configurando a ordem de tabulação</title>
|
|
<para
|
|
>O foco do elemento determina a disponibilidade de atividade do elemento usando o teclado. O foco é relacionado aos elementos exibidos na visão de dados do formulário. Somente um elemento de formulário pode ter o foco por vez. O uso mais freqüente do foco é a entrada de texto (quando um campo de texto está ativo, isto é, com foco). Outro exemplo é o elemento de botão - quando dispõe do foco, é possível <quote
|
|
>pressioná-lo</quote
|
|
> usando a tecla <keycombo action="press"
|
|
><keycap
|
|
>Enter</keycap
|
|
></keycombo
|
|
> ou <keycombo action="press"
|
|
><keycap
|
|
>Espaço</keycap
|
|
></keycombo
|
|
> ao invés do botão do mouse. </para>
|
|
<para
|
|
>Existem alguns métodos para tornar os elementos ativos (mover o foco para o elemento): clicar com o botão do mouse, rodar a roda do mouse sobre o elemento, ou usar a tecla <keycombo action="press"
|
|
><keycap
|
|
>Tab</keycap
|
|
></keycombo
|
|
>. O último método é freqüentemente usado devido à sua velocidade e conveniência para os usuários. A disponibilidade de métodos de obtenção do foco é controlada pela propriedade <guilabel
|
|
>Política de Foco</guilabel
|
|
> de um determinado elemento. </para>
|
|
<para
|
|
>Existe uma relação entre focar (ativar) elementos usando a tecla <keycombo action="press"
|
|
><keycap
|
|
>Tab</keycap
|
|
></keycombo
|
|
> e a configuração de tabulação de um formulário. Após pressionar a tecla <keycombo action="press"
|
|
><keycap
|
|
>Tab</keycap
|
|
></keycombo
|
|
>, o próximo elemento deverá receber o foco, de modo que o formulário deve conhecer a ordem de tabulação. </para>
|
|
<para
|
|
>Para alterar a ordem de tabulação para um elemento de formulário:</para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Alterne para a visão de desenho do formulário.</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Execute o comando de menu <menuchoice
|
|
><guimenu
|
|
>Editar</guimenu
|
|
><guimenuitem
|
|
>Editar Ordem de Tabulação...</guimenuitem
|
|
></menuchoice
|
|
>. A janela <guilabel
|
|
>Editar Ordem de Tabulação</guilabel
|
|
> aparecerá com as configuração para este formulário. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>A window for editing tab order for a form</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_11_tab_stop_dialog.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>A window for editing tab order for a form</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
<para
|
|
>A janela contém uma lista com duas colunas: a primeira coluna exibe os nomes dos elementos, e a segunda os tipos dos elementos. Para tornar mais fácil reconhecer o significado dos nomes e tipos para o usuário, ícones relacionados com os tipos são também exibidos. A lista contém somente elementos que possuem política de foco que permite o uso da tecla <keycap
|
|
>Tab</keycap
|
|
>. A janela permite que você mude a ordem de tabulação ou configure a ordem de tabulação automática. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Para mudar a ordem de tabulação, você pode:</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Clicar no nome do elemento desejado na lista de elementos e arrastá-lo para a posição desejada (acima ou abaixo) usando o mouse. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Clicar o nome do elemento desejado na lista de elementos e usar os botões <guibutton
|
|
>Mover Acima</guibutton
|
|
> ou <guibutton
|
|
>Mover Abaixo</guibutton
|
|
>, para mover os elementos para a posição desejada. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Ativar a opção <guilabel
|
|
>Manipular ordem de tabulação automaticamente</guilabel
|
|
> para configurar a ordem automática de tabulação para o formulário. Se esta opção for ativada, qualquer mudança feita na lista de elementos manualmente não será levada em consideração - o &kexi; manipulará a ordem de tabulação por si mesmo. A ordenação automática implica em que o elemento superior-esquerdo receberá o foco primeiro (ou superior-direito se seu sistema operacional usar uma disposição da direita-para-esquerda), e a ordem vai da esquerda para direita (ou da direita para esquerda, respectivamente) e de cima para baixo. </para>
|
|
<!--<screenshot>
|
|
<screeninfo
|
|
>Automatic tab order for a form</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_11_auto_tab_stop.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase
|
|
>Automatic tab order for a form</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot
|
|
>-->
|
|
</listitem>
|
|
</itemizedlist>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Clique no botão <guibutton
|
|
>OK</guibutton
|
|
> para aceitar as mudanças ou no botão <guibutton
|
|
>Cancelar</guibutton
|
|
> para descartá-las. </para>
|
|
</step>
|
|
</procedure>
|
|
</sect2>
|
|
</sect1>
|