Desenvolvedores.Net - TechBlog

Utilizando os componentes básicos

0
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (Sem votação.)
Loading...
28 de maio de 2014

Componentes_Basicos

Para um melhor entendimento deste Artigo veja o Índice (Rich Internet Applications com Ext.Net)

Ao longo deste tópico conheceremos os componentes, com exemplos de uso simples. Sem nos preocuparmos diretamente com os eventos, que serão explicados no artigo “Utilizando Listeners (Eventos no lado cliente) e DirectEvents (Lado Servidor)“.

Vou assumir que você vem acompanhando o artigo, e já tem a base para seus fontes criada. Desta forma irei postar apenas os exemplos.

Botões

Se você está acostumado com o uso do HTML, você usa a tag <input type=”button”> para criar um simples botão. Isto é útil, quando estamos falando de html.

Mas aplicações em Desktop têm muitas variações para os botões, como SplitButtons, MenuButtons entre outros .

Para isso o Ext.Net tem o próprio componente de botão. Vamos à alguns exemplos:

Com Listener (Iremos ver o que são listeners)

 <ext:Button ID="Button1" runat="server" Text="Clica eu">
 <Listeners>
 <Click Handler="alert('Opa! Fui clicado... ');" />
 </Listeners>
 </ext:Button>

Com DirectEvent (Iremos ver o que é também)

 <ext:Button ID="Button2" runat="server" Text="Clica eu">
 <DirectEvents>
 <Click OnEvent="Button_Click">
 <EventMask ShowMask="true" />
 <ExtraParams>
 <ext:Parameter Name="Item" Value="Fui clicado e respondi pelo server..." />
 </ExtraParams>
 </Click>
 </DirectEvents>
 </ext:Button>

Com ícones

<ext:Button ID="Button3" runat="server" Text="Texto do seu botão" Icon="Add" />

Com Tooltip

<ext:Button ID="Button5" runat="server" Text="Texto do seu botão">
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Title="Oi! Eu sou um título" Html="Só para não perder o hábito. Olá mundo..." />
</ToolTips>
</ext:Button>

Trocas

<ext:Button ID="Button6" runat="server" Text="Button1" EnableToggle="true" ToggleGroup="Group1"

 Pressed="true" />
 <ext:Button ID="Button7" runat="server" Text="Button2" EnableToggle="true" ToggleGroup="Group1" />
 <ext:Button ID="Button8" runat="server" Text="Button3" EnableToggle="true" ToggleGroup="Group1" />

 Menus

<ext:Button ID="Button9" runat="server" Text="Texto do seu botão">
<Menu>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Item 1" Icon="GroupAdd" />
<ext:MenuItem ID="MenuItem2" runat="server" Text="Item 2" Icon="GroupDelete" />
<ext:MenuItem ID="MenuItem3" runat="server" Text="Item 3" Icon="GroupEdit" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>

Divisor com menus

<ext:SplitButton ID="SplitButton1" runat="server" Text="Texto do seu botão">
<Menu>
<ext:Menu ID="Menu2" runat="server">
<Items>
<ext:MenuItem ID="MenuItem4" runat="server" Text="Item 1" Icon="GroupAdd" />
<ext:MenuItem ID="MenuItem5" runat="server" Text="Item 2" Icon="GroupDelete" />
<ext:MenuItem ID="MenuItem6" runat="server" Text="Item 3" Icon="GroupEdit" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>

Botão chato

<ext:Button ID="Button11" runat="server" Text="Eu sou chato" Icon="Accept" Flat="true" />

Para mais exemplos de botões e menus:

Labels

Simples

<ext:Label ID="Label1" runat="server" Text="Olá Mundo ... de novo" />

Com Html

<ext:Label ID="Label2" runat="server" Html="<i>Eu sou um HTML</i>" />

Com ícones

<ext:Label ID="Label3" runat="server" Text="Olá Mundo!" Icon="Accept" />

Ícone a direita

<ext:Label ID="Label4" runat="server" Text="Chega de Olá Mundo." Icon="Accept" IconAlign="Right" />

Campos de texto

Os campos de texto, “TextField”, são muito flexíveis quanto à sua utilização, com eles podemos mascarar valores, temos campos de senha, etc. Iremos ver abaixo várias utilidades para os campos de texto, inputs.

Campos simples

<ext:TextField ID="TextField1" runat="server" FieldLabel="Digite algo:">
    </ext:TextField>

Senhas

<ext:TextField ID="TextField2" runat="server" FieldLabel="Informe a senha">
        <Plugins>
            <ext:PasswordMask ID="PasswordMask1" runat="server">
            </ext:PasswordMask>
        </Plugins>
    </ext:TextField>

Para mais exemplos de senha:

Máscaras

As máscaras servem para formatar os campos do tipo texto. Estas máscaras podem ser usadas para a validação do formulário, bem como para a exibição.

<ext:TextField ID="TextField1" runat="server" FieldLabel="Telefone">
        <Plugins>
            <ext:InputMask ID="InputMask1" runat="server" Mask="(999) 999-9999" />
        </Plugins>
    </ext:TextField>
    <ext:TextField ID="TextField2" runat="server" FieldLabel="CPF">
        <Plugins>
            <ext:InputMask ID="InputMask2" runat="server" Mask="999.999.999-99">
            </ext:InputMask>
        </Plugins>
    </ext:TextField>
    <ext:TextField ID="TextField3" runat="server" FieldLabel="CNPJ">
        <Plugins>
            <ext:InputMask ID="InputMask3" runat="server" Mask="99.999.999/9999-99">
            </ext:InputMask>
        </Plugins>
    </ext:TextField>
    <ext:TextField ID="TextField4" runat="server" FieldLabel="CEP">
        <Plugins>
            <ext:InputMask ID="InputMask4" runat="server" Mask="99999-999">
            </ext:InputMask>
        </Plugins>
    </ext:TextField>

Campos Numéricos

Os campos numéricos herdam da classe “TextField“, eles exibem um ícone de rolagem para facilitar  aos usuários informarem o valor.

Estes campos só permitem que sejam digitados números.

<ext:NumberField ID="NumberField1" runat="server" FieldLabel="Digite um número" MinValue="0"
 MaxValue="100" AllowDecimals="true" DecimalPrecision="1" Step="0.5" Number="3" />

No nosso exemplo temos o valor inicial setado como 3, devido a propriedade “Number“. Podemos também definir um limite para os números que são digitados usando as propriedades “MinValue” e “MaxValue“.

Em nosso exemplo, é exibido um botão de incremento, que pode ser escondido utilizando a propriedade “HideTrigger“, para “true” ou “false“, de acordo com a necessidade. Este incremento foi colocado na propriedade “Step“, que pode ser definida, caso contrário será 1 (um).

Data

Os campos de data possuem um pequeno calendário para auxiliar o usuário a informar a data corretamente. E também fazem a validação destes valores, evitando assim o usuário informar uma data errada.

Simples

<ext:DateField ID="DateField1" runat="server" FieldLabel="DateField">
</ext:DateField>

Calendário

<ext:DatePicker ID="DatePicker1" runat="server">
</ext:DatePicker>

CheckBox

Os campos do tipo checkbox permitem que você tenha cada um com sua label ou apenas uma label escondendo as outras.

Cada um com sua label

<ext:Checkbox runat="server" BoxLabel="Impala 68">
 </ext:Checkbox>
 <ext:Checkbox runat="server" BoxLabel="Mustang GTO">
 </ext:Checkbox>
 <ext:Checkbox ID="Checkbox1" runat="server" BoxLabel="Ford Tudor">
 </ext:Checkbox>

Label em comum

<ext:Checkbox ID="Checkbox2" runat="server" BoxLabel="Impala 68" FieldLabel="Carros Preferidos">
 </ext:Checkbox>
 <ext:Checkbox ID="Checkbox3" runat="server" BoxLabel="Mustang GTO" HideEmptyLabel="false">
 </ext:Checkbox>
 <ext:Checkbox ID="Checkbox4" runat="server" BoxLabel="Ford Tudor" HideEmptyLabel="false">
 </ext:Checkbox>

Radio Buttons

A declaração dos Radiobuttons é parecida com a declaração dos Checkboxes, só que ao invés de usar a classe “Checkbox”, usamos a classe “Radio”.

note-taking Para o html entender em qual grupo deverá validar os Radiobuttons, estes deverão ter o mesmo nome (name) definido, no caso eu chamei os meus de “radinho”.

Cada um com sua label

<ext:Radio ID="Radio1" Name="radinho" runat="server" BoxLabel="Impala 68">
</ext:Radio>
<ext:Radio ID="Radio2" Name="radinho" runat="server" BoxLabel="Mustang GTO">
</ext:Radio>
<ext:Radio ID="Radio3" Name="radinho" runat="server" BoxLabel="Ford Tudor">
</ext:Radio>

Label em comum

<ext:Radio ID="Radio4" runat="server" BoxLabel="Impala 68" FieldLabel="Carro Preferido">
</ext:Radio>
<ext:Radio ID="Radio5" runat="server" BoxLabel="Mustang GTO" HideEmptyLabel="false">
</ext:Radio>
<ext:Radio ID="Radio6" runat="server" BoxLabel="Ford Tudor" HideEmptyLabel="false">
</ext:Radio>
note-taking Este foi deixado sem nome propositalmente para vermos a diferença de “com nome” e “sem nome

Vimos aqui alguns componentes básicos. Nos próximos capítulos, iremos ver componentes mais complexos, como ComboBox, GridPanels, Windows , etc.


É isso ai pessoal 🙂
Até o próximo
♦ Marcelo

Compartilhe!

About Marcelo

Nascido em Juruaia/MG em uma fazenda de criação de búfalos, e residindo na região Sul do Brasil. Trabalha com desenvolvimento de aplicações desde os 17 anos. Atualmente é Arquiteto Organizacional na Unimake Software. Para saber mais ... http://desenvolvedores.net/marcelo []'s

Deixe uma resposta

O seu endereço de e-mail não será publicado.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>