Desenvolvedores.Net - TechBlog

Monthly Archives: maio 2014

Utilizando o componente Window

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

Windows

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

Windows

Uma janela , é um classe filha da classe  “Panel“.

Podemos utilizar em um sistema desktop para exibir as janelas, elas podem ser redimensionadas, ancoradas, modais, maximizadas, minimizadas, resumindo, podemos fazer com que elas tenham o mesmo comportamento em uma aplicação Desktop tradicional.

Primeira janela

Para criar uma janela, utilizamos a seguinte sintaxe:

<ext:Window ID="Window1" runat="server" Title="Ext.NET by Desenvolvedores.net" Width="390"
 Height="290" Layout="FitLayout">
 <Items>
 <ext:Panel ID="Panel1" runat="server" Border="false" />
 </Items>
 </ext:Window>

Este código irá gerar uma janela simples, de tamanho 390×290, como não passamos a posição inicial será exibida no meio da página.

Chamando por botões

No código abaixo iremos chamar a janela por um botão, será criada em tempo de execução.

<ext:Button ID="Button1" runat="server" Text="Exibir Janela">
 <Listeners>
 <Click Handler="#{Window2}.show();" />
 </Listeners>
 </ext:Button>
 <ext:Window ID="Window2" runat="server" AnimateTarget="Button1" CloseAction="Hide"
 Height="200" Hidden="true" Icon="ApplicationCascade" Maximizable="true" Minimizable="true"
 Modal="true" Title="Minha janela modal" Width="300">
 <Listeners>
 <Minimize Handler="this.hide();" />
 </Listeners>
 </ext:Window>

Explicando algumas propriedades

No exemplo acima utilizamos algumas propriedades que valem a pena uma explicação:

  • AnimateTarget: É o nome (ID) do controle que vai receber a animação da janela, no caso ela vai sumindo sentido ao controle. É apenas para deixar o visual mais bonito, desta forma a janela não simplesmente “aparece” na tela;
  • CloseAction: É a ação que será executada quando a janela for fechada. Os valores possíveis são:
    • Destroy: A janela é destruída e não pode mais se utilizada. Pode ser usado em casos onde a janela deve ser exibida apenas uma vez;
    • Hide: Apenas esconde a janela no navegador. Esta opção permite que a janela possa ser exibida e escondida quantas vezes forem necessárias;
  • Minimizable e Maximizable: Cria os dois ícones de maximizar e minimizar a janela, no canto superior direito;
  • Modal: Exibe uma janela no topo das outras. A página ficará com um cor esmaecida, e só ficará visível a janela modal. Útil para janelas do tipo diálogo, caixas de mensagens, etc.

Chamando em Postback

Se houver a necessidade de um “postback” para depois abrir a janela, também é possível. Para isso temos  que:

  1. Setar a propriedade “AutoPostBack” do botão para “true“;
  2. Criar um método no lado servidor, (Code Behind), que irá chamar a sua janela.

Exemplos:

Code design:

<ext:Window ID="Window3" runat="server" CloseAction="Hide" Height="200" Hidden="true"
 Icon="House" Maximizable="true" Minimizable="true" Title="Minha janela postback"
 Width="300">
 </ext:Window>
<ext:Button ID="Button2" runat="server" Text="Exibir Janela com Postback" OnClick="Button2_Click" AutoPostBack="true"></ext:Button>

Code behind

protected void Button2_Click(object sender, EventArgs e)
 {
        this.Window3.Show();
 }

Caso o seu exemplo de PostBack não funcione, verifique se colocou os componentes dentro da tag:

<form runat="server"></form>

Caso contrário não irá funcionar.

Carregar página.

Podemos usar também o componente de janelas para exibir uma página ao ser exibida. Veja exemplo:

<ext:Window ID="Window4" runat="server" CloseAction="Hide" Height="480" Hidden="true"
 Icon="House" Maximizable="true" Minimizable="true" Title="Site: Desenvolvedores.NET"
 Width="640">
 <Loader runat="server" Url="http://desenvolvedores.net" Mode="Frame">
 <LoadMask Msg="Carregando desenvolvedores.net" ShowMask="true">
 </LoadMask>
 </Loader>
 </ext:Window>
 <ext:Button ID="Button3" runat="server" Text="Carregar site">
 <Listeners>
 <Click Handler="#{Window4}.show();" />
 </Listeners>
 </ext:Button>

Explicando algumas propriedades

  • Loader: Define o que deverá ser carregado no componente.
    • URL: Define a URL que deverá ser carregada no componente.
    • Mode: Define que será carregado como um frame dentro do componente.
  • LoadMask: Define a mensagem que será carregada no componente.
    • ShowMask: Se true a mensagem é exibida, se não, oculta.

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

: Ajax, ASPX, C#, Desenvolvimento, Ext.Net, Javascript, Web
: , , ,
desenvolvedores.net

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

Utilizando os componentes básicos

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

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

: Ajax, ASPX, C#, Desenvolvimento, Ext.Net, Javascript, Web
: , ,
desenvolvedores.net

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

Visão geral dos componentes Ext.Net

2
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (Sem votação.)
Loading...
16 de maio de 2014
by Marcelo

Visao_Geral

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

o Ext.Net provê uma vasta quantidade de controles para utilizarmos no desenvolvimento das aplicações Web, como podemos ver na tabela abaixo, apenas um resumo das possibilidades.

Visualização de dados. DataView, GridPanel,PropertyGrid, TreePanel, Chart and Calendar
Manipulação dos dadaos Store, Proxy, Model, Reader/Writer
Contêineres Container, Panel, Window, ButtonGroup, Toolbar, ViewPort, TabPanel, Menu
Contêineres especiais Desktop e Portal
Controles Neste ponto temos vários, iremos ver sobres eles, tais como, Buttons, SplitButton,
LinkButton, Pickers (ColorPicker, DatePicker), Slider, ProgressBar … Etc.
Leiautes Accordion, Anchor, Border, HBox, VBox … Etc.
Formulários e Campos FormPanel, FieldContainer, TextField, NumberField, ComboBox, CheckBox, DataField,
DropDown, FileUpload … Etc.
Utilidades e Helpers DragDrop, KeyMap, KeyNav, XTemplate, TaskManager, Selection Model e XSxript

A lista não está completa, mas já temos uma visão da força que o Ext nós dá para desenvolvermos nossas aplicações Web, mais próximas da realidade em que o usuário Desktop está habituado.

Todos os controles são demonstrados no site de exemplos do Ext.Net, o site, para mim, é uma fonte de pesquisa que estou sempre utilizando.

A classe de base para os componentes é a “Component”, mas eu tenho por hábito, sempre criar meus componentes com base em um componente já pronto, por exemplo, se vou criar um campo de texto com alguma formatação específica, já faça a herança diretamente do componente “TextField”.

O Ext.Net provê várias formas de desenvolvimento de componentes do lado servidor, sem ter que nos preocuparmos com o lado cliente, pois todo o Javascript será gerado de forma automatizada. Mas, é interessante conhecer sobre o ExtJS, a comunidade está em constante crescimento e os exemplos são claros e objetivos.

Não é o intuito deste artigo explicar sobre ExtJS, para aprender um pouco mais sobre ExtJS a Loiane Groner escreveu um curso muito bom, segue o link:

No próximo artigo iremos ver sobre alguns componentes básicos e colocarmos a mão na massa. Até lá … 🙂

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

: Ajax, ASPX, C#, Desenvolvimento, Ext.Net, Javascript, Web
: , , ,
desenvolvedores.net

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

Instalando o Ext.Net

4
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (Sem votação.)
Loading...
6 de maio de 2014
by Marcelo

Warning: DOMDocument::loadXML(): AttValue: " or ' expected in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): attributes construct error in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Couldn't find end of Start Tag font line 1 in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): AttValue: " or ' expected in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): attributes construct error in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Couldn't find end of Start Tag font line 1 in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: b line 1 and font in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): AttValue: " or ' expected in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): attributes construct error in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Couldn't find end of Start Tag font line 1 in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: td line 1 and font in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): AttValue: " or ' expected in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): attributes construct error in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Couldn't find end of Start Tag font line 1 in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: tr line 1 and font in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): AttValue: " or ' expected in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): attributes construct error in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Couldn't find end of Start Tag font line 1 in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: table line 1 and font in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): AttValue: " or ' expected in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): attributes construct error in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Couldn't find end of Start Tag font line 1 in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: div line 1 and font in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): AttValue: " or ' expected in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): attributes construct error in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Couldn't find end of Start Tag font line 1 in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: body line 1 and font in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: html line 1 and font in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Warning: DOMDocument::loadXML(): Extra content at the end of the document in Entity, line: 1 in /home/desenvol/public_html/techblog/wp-content/plugins/tubepress/src/main/php/add-ons/youtube/classes/tubepress/addons/youtube/impl/provider/YouTubePluggableVideoProviderService.php on line 257

Instalando_Ext.Net

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

Instalando o Ext.Net manualmente.

Neste tópico eu vou falar da instalação do Ext.Net, mas da forma trabalhosa, manualmente.

Ao final do artigo, tem o link para o vídeo do Geoffrey McGill, que demonstra como instalar utilizando o NuGet Package. (Mas ai não tem graça)

Então, mãos à obra.

Primeiramente, baixe a versão 2.5 WebForms do Ext.Net em Ext.NET.WebForms.Pro.2.5.1.zip.

Ao final do download descompacte o arquivo baixado, será criado alguns diretórios e arquivos, mas iremos nos ater apenas ao diretório “lib“.

Neste diretório existem 4 diretórios, onde cada diretório representa a versão do Framework que será utilizado para o desenvolvimento da sua aplicação, no nosso caso será o 4.0.

Dentro do diretório “~\lib\net40\” existe o arquivo “Ext.Net.dll“, é este que iremos referenciar mais logo a seguir.

Baixar as versões públicas do “Ext.Net.Utilities” e do “Transformer.NET” em https://github.com/extnet/

Compilar as versões baixadas.

Agora vamos ao Visual Studio, crie uma nova aplicação web vazia, pois iremos começar do zero.

Faça referência aos arquivos:

  1. “~\lib\net40\Ext.Net.dll“, ou a versão do Framework que você estiver utilizando;
  2. Ext.Net.Utilities.dll (dentro da pasta bin release/debug que foi compilado o projeto);
  3. Transformer.NET.dll (dentro da pasta bin release/debug que foi compilado o projeto);

Configurando o Web.Config

Abra o Web.Config no editor e vamos colocar a mão na massa:

Apague todo o conteúdo criado no web.config e vamos fazer uma sessão de cada vez:

  • Neste ponto definimos que a sessão de configuração do Ext.NET não necessita de nenhuma configuração especial no quesito segurança, para que possa sera acessada pela aplicação:
<configSections>
 <!--
 Para um melhor entendimento do atributo requirePermission:
 http://msdn.microsoft.com/en-us/library/system.configuration.sectioninformation.requirepermission.aspx
 -->
 <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false" />
 </configSections>
  • Definir o padrão de tema. O tema padrão pode ser um dos valores:
    • Default;
    • Gray;
    • Neptune;
    • Acess
<!--Define o tema padrão do ext.net-->
 <extnet theme="Gray" />
  • Definir os handlers, manipuladores, do Ext.Net
note-taking

O que são handlers (manipuladores)?

Os handlers, ou manipuladores, normalmente processam as requisições e não têm interatividade com o usuário, como páginas ou controles, e normalmente são responsáveis por camadas lógicas dentro da aplicação.

Podemos utilizar um handler quando precisamos executar algo no servidor sem a necessidade de intervenção do usuário final.

Os handlers implementam a interface IHttpHandler, o HttpHandler é responsável por atender as requisições do browser e a interface IHttpHandler possui as assinaturas necessárias para que estas requisições sejam atendidas.

 
<!--Define os handlers (manipuladores) do ext.net-->
 <httpHandlers>
 <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false" />
 </httpHandlers>
  •  Define os módulos do Ext.NET
note-taking

O que são modules (módulos)?

Os módulos HTTP são executados antes e depois do handler (manipulador) e nos fornece métodos para interagir com a requisição (HttpRequest). Os módulos devem implementar a interface System.Web.IHttpModule.

São normalmente sincronizados com os eventos da classe System.Web.IHttpModule (implementado dentro do Global.asax.cs ou. vb).

A seguir uma lista de eventos que devem ser considerados na implementação do módulo:

  • BeginRequest
  • AuthenticateRequest
  • AuthorizeRequest
  • ResolveRequestCache
  • AcquireRequestState
  • PreRequestHandlerExecute
  • PostRequestHandlerExecute
  • ReleaseRequestState
  • UpdateRequestCache
  • EndRequest
  • * PreSendRequestHeaders
  • * PreSendRequestContent
  • * error

Os eventos identificados por um asterisco (*) pode ocorrer a qualquer momento dentro da requisição, todos os outros estão listados em sua ordem de chamada.

 
<!--Define os módulos do ext.net-->
 <httpModules>
 <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" />
 </httpModules>
  • Definir a marcação “ext” para toda página ou componente que for criado para o “ext”;
<pages>
 <controls>
 <!--Indica que toda página criada irá ter a diretiva "ext" como padrão para ser usada como marcação na criação.-->
 <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" />
 </controls>
 </pages>
  • Se estiver executando o IIS 7 como servidor, devemos utilizar a seguinte configuração no Web.Config;
<!-- Configurações para o IIS7 -->
 <system.webServer>
 <validation validateIntegratedModeConfiguration="false" />
<modules>
 <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net" />
 </modules>
<handlers>
 <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler" />
 </handlers>
 </system.webServer>
  • E por fim, informe os runtimes adicionais que serão utilizados no projeto;
 <runtime>
 <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
 <dependentAssembly>
 <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
 <bindingRedirect oldVersion="1.0.0.0-5.0.8" newVersion="6.0.0" />
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23" />
 <bindingRedirect oldVersion="0.0.0.0-2.3.0" newVersion="2.4.0" />
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7" />
 <bindingRedirect oldVersion="0.0.0.0-2.1.0" newVersion="2.1.1" />
 </dependentAssembly>
 </assemblyBinding>
 </runtime>

Ao final seu arquivo Web.Config deverá estar como abaixo, ou semelhante.

<?xml version="1.0"?>
<configuration>
 <configSections>
 <!--
 Para um melhor entendimento do atributo requirePermission:
 http://msdn.microsoft.com/en-us/library/system.configuration.sectioninformation.requirepermission.aspx
 -->
 <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false"/>
 </configSections>
 <!--Define o tema padrão do ext.net-->
 <extnet theme="Gray"/>
 <system.web>
 <!--Define os handlers (manipuladores) do ext.net-->
 <httpHandlers>
 <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false"/>
 </httpHandlers>
 <!--Define os módulos do ext.net-->
 <httpModules>
 <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
 </httpModules>
 <pages>
 <controls>
 <!--Indica que toda página criada irá ter a diretiva "ext" como padrão para ser usada como marcação na criação.-->
 <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext"/>
 </controls>
 </pages>
 <compilation debug="true"/>
 </system.web>
 <!-- Configurações para o IIS7 -->
 <system.webServer>
 <validation validateIntegratedModeConfiguration="false"/>
 <modules>
 <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net"/>
 </modules>
 <handlers>
 <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler"/>
 </handlers>
 </system.webServer>
 <runtime>
 <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
 <dependentAssembly>
 <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed"/>
 <bindingRedirect oldVersion="1.0.0.0-5.0.8" newVersion="6.0.0"/>
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23"/>
 <bindingRedirect oldVersion="0.0.0.0-2.3.0" newVersion="2.4.0"/>
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7"/>
 <bindingRedirect oldVersion="0.0.0.0-2.1.0" newVersion="2.1.1"/>
 </dependentAssembly>
 </assemblyBinding>
 </runtime>
</configuration>

Testando a instalação

Adicione um novo webform ao projeto chamado “Default.aspx”.

Neste form, como de praxe :), Iremos criar um “Olá Ext.Net”.

Não se preocupe com o código em questão, pois será discutido nos próximos artigos.

Em Code Design adicione o seguinte código:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ext.Net.Tutorial.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <ext:ResourceManager runat="server">
    </ext:ResourceManager>
    <form id="form1" runat="server">
    <ext:Button runat="server" ID="btnOla" Text="Olá Ext.Net">
        <DirectEvents>
            <Click OnEvent="btnOla_Click">
            </Click>
        </DirectEvents>
    </ext:Button>
    </form>
</body>
</html>

Em Code Behind adicione o seguinte código:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Ext.Net.Tutorial
{
    public partial class Default: System.Web.UI.Page
    {
        protected void btnOla_Click(object sender, DirectEventArgs e)
        {
            X.Msg.Show(new MessageBoxConfig
            {
                Title = "Ext.NET",
                Buttons = MessageBox.Button.OK,
                Icon = MessageBox.Icon.INFO,
                Message = "Olá Ext.NET"
            });
        }
    }
}

Execute a aplicação e clique no botão. A mensagem “Olá Ext.NET” deverá ser exibida em uma caixa de mensagem do navegador.

Se isto acontecer, o Ext.NET foi configurado corretamente e podemos continuar com nosso aprendizado.

Se foi lançado algum erro, verifique se é um dos listados abaixo, caso não for, verifique a solução no fórum:

Fórum Oficial: http://forums.ext.net/

Nosso Fórum: forum/ext-net/

Resolvendo erros

The ResourceManager Control is missing from this Page.

Adicione a marcação

<ext:ResourceManager runat="server">
</ext:ResourceManager>

logo após a tag <body>.

Marca de servidor desconhecida: ‘ext:<name>’.

Verifique se no Web.Config se a diretiva <add assembly> foi informada.

 <pages>
<controls>
<!--Indica que toda página criada irá ter a diretiva "ext" como padrão para ser usada como marcação na criação.-->
<add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext"/>
</controls>
</pages>

CS1061: ‘ASP.default_aspx’ não contém uma definição para ‘btnOla_Click’ e nenhum método de extensão ‘btnOla_Click’ aceita que um primeiro argumento de tipo ‘ASP.default_aspx’ seja encontrado (você não está usando uma diretriz ou referência de assembly?)

Quando definimos um “DirectMethod” pelo Code Design é necessário que o método que irá tratar o evento seja definido como “protected” ou “public” no Code Behind.

The web.config file for this project is missing the required DirectRequestModule.

Inserir a diretiva

<httpModules>
<add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
</httpModules>

pois o Ext.NET depende do módulo “DirectRequest” para construir o lado cliente.

Instalando usando o NuGet Package

E como prometido, segue o vídeo da instalação pelo NuGet.

Could not parse XML from YouTube

Conhecendo os arquivos.

  • Ext.Net.dll: Assembly principal do Ext.NET;
  • Ext.Net.xml: Arquivo de IntelliSense para ajudá-lo enquanto você codifica;
  • Ext.Net.Utilities.dll: Utilitários do Ext.NET framework (Muito úteis);
  • Ext.Net.Utilities.xml: IntelliSense para o utilitário;
  • NewtonSoft.Json.dll:  Json.NET framework utilizado pelo Ext.NET;
  • NewtonSoft.Json.xml: O  IntelliSense do Json.NET;
  • Transformer.NET.dll: Um biblioteca  .NET para análise e transformação de dados;
  • Transformer.NET.xml:  IntelliSense do Transformer.NET;

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

: Ajax, ASPX, C#, Desenvolvimento, Ext.Net, Javascript, Web
: , ,
desenvolvedores.net

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

Apresentando o Ext.Net

0
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (1 votos, média: 5,00 de 5)
Loading...
5 de maio de 2014
by Marcelo

Apresentando_Ext.Net

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

O que é Ext.NET?

Ext.NET é um framework de código fonte aberto, de componentes  ASP.NET  (WebForm + MVC) integrado ao framework Ext JS.

O site oficial Ext.NET é:

Site oficial do Sencha:

Ext.NET  (pronuncia-se -eee-ecks-T dot NET), eu pronuncio “EXT.NET” mesmo 🙂 .

Em outras palavras, é um conjunto de controles e classes, que geram JavaScript , HTML e CSS sempre que necessário, e, que este JavaScript tem como base a estrutura do Ext JS.

O Ext.NET também inclui componentes que não são encontrados em Ext JS, estende várias classes, sempre que necessário, proporcionando assim sua própria camada JavaScript.

O Ext.NET é uma abstração do Ext JS. Esta abstração não é uma camada fraca ou
restritiva, se assim desejar, você pode escrever diretamente na camada Ext JS baseada em JavaScript.

note-taking Eu particularmente escrevo todos os componentes do lado servidor quando preciso de um novo.
Tenho esta visão devido à facilidade que é oferecida pelo Ext.Net no lado servidor.

Uma outra forma de ver, é pensar no Ext.NET como uma ponte entre Ext JS no
lado cliente e ASP.NET no lado servidor.

A relação com ASP.NET

note-taking A escolha da linha de desenvolvimento, WebForms ou MVC não é importante para este artigo como um todo. Mas toda a apresentação será feita em WebForms.

Se você está acostumado com a criação de aplicações ASP.NET usando controles que seguem o padrão ASP.NET, que mantêm seu estado no ViewState, o Ext.NET pode parecer familiar, mas com muitas melhorias:

  • O “ViewState” não é requerido pelo Ext.NET, podemos desligar e economizaremos uma quantidade de bytes para a aplicação cliente.
    • A não ser que você esteja usando “FormAuthentication”;
  • Uma aplicação ASP.NET Web Forms requer um único “<runat = “server” >” e já adicionará todos os eventos, métodos e propriedades e assim por diante ao componente. Com Ext.NET isto é opcional como será demonstrado;
  • Ao desenvolver aplicações ASP.NET, os controles são adicionados na coleção “Controls” do componente recipiente. Com Ext.NET, você normalmente adiciona componente filhos ao componente pai, usando a coleção “Items”. Tenha isso em mente, irá nos ajudar nos próximos capítulos;

Vamos nos concentrar um pouco no ViewState.

Em um desenvolvimento ASP tradicional, WebForms, o ViewState e o modelo PostBack são pontos chaves para recriar os controles complexos no estado em que o desenvolvedor e usuário espera que eles existam.

São feitos vários posts e esperado vários retornos; “response”; para as páginas que trafegam este “ViewState”.

Com Ext.NET, criamos uma interface rica, onde o estado dos controles não precisam ser mantidos no lado servidor.

As aplicações desenvolvidas utilizando Ext.Net utilizam-se da tecnologia AJAX, o que significa que podemos recarregar apenas o ponto em questão da página, ou fazer uma consulta sem modificar nada na página.

Exemplo:

Para validar algo no banco de dados e exibir uma mensagem ao usuário.

Para o lado cliente, o Ext.NET framework lida com toda a complexidade da manutenção dos controles, como a instanciação, destruição, layout e redesenho.

Mas, se mesmo assim você ainda precisar de mais, a API do Ext.NET é bastante flexível para que você possa colocar a mão na massa e desenvolver seu próprio componente, como será visto no artigo “Criando componentes no lado Servidor“.

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

: Ajax, ASPX, C#, Desenvolvimento, Ext.Net, Javascript, Web
: , , ,
desenvolvedores.net

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
HyperSmash