Sumário
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>
<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:
- http://examples.ext.net/#/Form/TextField/Password_Validation
- http://examples.ext.net/#/Form/TextField/Password_Mask
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”.
 |
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>
|
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