Sérgio Berlotto - Site Pessoal : ExtJS – Mão na massa

Então, já conhecemos o Ext, e agora vamos botar a mão na massa !

Com um exemplo bem simples, podemos entender melhor como montar nossas paginas em Ext

Vamos iniciar com o Download do pacote do Ext:
Vá em extjs.com e clique no icone de “ExtJS for web developers”
Atualmente, a versão 3.1.1 é a que está disponivel.

Ah, para saberem, o ExtJS pode trabalhar em conjunto com mais algumas bibliotecas JS como: JQuery, Yahoo, Prototype e Scriptacuolus, porém eu nunca o utilizei desta forma.

Do Ext vamos precisar basicamente de 3 arquivos (veja o arquivo ./ext-3.1.1/INCLUDE_ORDER.txt) que serão referenciados na nossa pagina :
./ext-3.1.1/adapter/ext/ext-base.js
./ext-3.1.1/ext-all.js
./ext-3.1.1/resources/css/ext-all.css

Com o ext, podemos trocar o tema de cores das janelas e componentes, e no pacote padrão temos 3 temas, que se acrescentados depois do arquivo ext-all.css, funciona corretamente, alterando as cores.
./ext-3.1.1/resources/css/xtheme-access.css
./ext-3.1.1/resources/css/xtheme-blue.css
./ext-3.1.1/resources/css/xtheme-gray.css
E no fórum, pode-se achar mais alguma tema ou outro !

Bom, geralmente, eu tenho trabalhado com os JS separados do arquivo html, bem como os CSS, podendo assim reutilizar muitas coisas.
Então, vamos fazer assim também nossos exemplos.

Como o Ext faz todo o trabalho sujo de detectar o browser, ajustar coisas, resolver bugs de css e etc, então não precisamos nos preocupar com nada disto, e trabalhar como se montássemos uma simples interface em GTK ou QT por exemplo. Ok !

Vou colocar um exmplo simples abaixo, e depois vou explicar o que codifiquei:

Arquivo: index.html

[html]
    [head]
        [meta http-equiv="Content-Type" content="text/html; charset=utf-8" /]
        [title id='title']Ext HTML Sample[/title]

        
        

        

        
        
        < script src="http://moonmoon.archlinux-br.org//ext-3.1.1/adapter/ext/ext-base.js" type="text/javascript" >< /script >
        
        < script src="http://moonmoon.archlinux-br.org//ext-3.1.1/ext-all.js" type="text/javascript" >

        
        < script src="http://moonmoon.archlinux-br.org//index.js" type="text/javascript" >
    [/head]
    [body]
		 
    [/body]
[/html]

Ext.onReady(function(){
	Ext.ns("Index");

	Index.init = function(){

		win = new Ext.Window({
			layout:'fit',
			width:500,
			height:300,
			closeAction:'hide',
			plain: true,
			title: 'Janela de Exemplo - berlotto.blog.br',

			items: new Ext.TabPanel({
				activeTab:0,
				deferredRender:false,
				border:false,
				items:[{
					xtype: 'form',
					id: 'tabOne',
					title: 'Tab Um',
					bodyStyle: 'padding: 6px',
					items: [{
						xtype: 'textfield',
						id: 'txtCampoTabOne',
						fieldLabel: 'Campo 1'
					}]
				},{
					xtype: 'form',
					id: 'tabTwo',
					title: 'Tab Dois',
					//bodyStyle: 'padding: 6px',
					items: [{
						xtype: 'numberfield',
						id: 'txtCampoTabTwo',
						fieldLabel: 'Campo 2'
					}]
				}]
			}),

			buttons: [{
				text:'Enviar',
				handler: function(){
					Ext.Msg.alert('Exemplo ExtJS', 'Dados salvos com sucesso!');
				}
			},{
				text: 'Fechar',
				handler: function(){
					win.hide();
				}
			}]
		});

		win.show();

	};

	Index.init();

}); //end onReady

O que ocorre ? Vamos por parte, como diria Jack:
1.
Ext.onReady(function(){ …
Este é um evento do ext que é chamado quando ele for corretamente inicializado, e em 99% dos casos, os nossos codigos do Ext estará dentro deste método, garantindo que o FW estará carragado e OK para funcionar.

2.
Ext.ns(“Index”);
Definimos nosso Namespace, como detalhado no post anterior.

3.
Index.init = function(){ …
Dentro do nosso namespace chamado “Index”, criamos um objeto chamado “init”, que por sua fez recebeu uma function. Então agora temos uma nova função que pode ser chamada com: Index.init(), como visto no final no nosso arquivo index.js

4.
Conteúdo da nossa página ! O Ext tem vários tipos de componentes/widgets, e para que possamos utilizar temos que adicioná-los em um Container, que neste caso é nossa janela ( Ext.Window ). Os containers do Ext podem ser por exemplo: Ext.BoxComponent, Ext.Panel, Ext.Window, Ext.form.FormPanel, Ext.Toolbar, entre outros.

5.
Cada widgets tem suas propriedades e características, no Ext, temos uma imensidão de objetos que podemnos utilizar nas nossas aplicações, e com o que temos hoje, podemos criar muita coisa, sem ter que customizar nada mesmo, ou utilizar widgets criados pela comunidade ! Mas tem uma priedade especial: xtype.
O que ela faz ? Ela indica qual o tipo de objeto que será criado, assim:
Foi dito que no ext um Ext.form.FormPanel também é conhecido por “form”, OK !
Então quando criamos, no nosso exemplo, o nosso TabPanel, dentro da Window, dissemos que os items deste TabPanel são dois forms, porém você não vê um “new Ext.form.FormPanel” ali, você vê um “xtype: ‘form’” correto ? Sim, isto funciona, pois já temos um “new” acontecendo no objeto pai, então quando ele encontrar alguns objetos JSON com a propriedade xtype definida, ele tentará dar um new no respectivo objeto, conforme podemos ver neste link da documentação:
http://www.extjs.com/deploy/dev/docs/?class=Ext.Component

6.
Nestes mesmos dois forms que foram criados, temos a propriedade “bodyStyle”, 1 comentada e a outra não, para que vocês vejam, que apenas um pouquinho de conhecimento de CSS poderemos alterar alguns detalhes interessantes nos nossos widgets. Esta é apenas 1 das formas de se fazer isto.

7.
Neste exemplo, eu coloquei dois botões na janela e em um deles, coloquei uma mensagem de sucesso, porém não faz nada além de mostrar a mensagem, como podemos ver. E como geralmente gostamos de mostrar mensagens para ver se algum evento ou objeto está funcionando corretamente, nada mais justo que utilizar o proprio ext para isto neh !
Ah, detalhe: Nada no Ext é SINCRONO, ou seja, tudo é chamado, e nada fica trancado aguardando retorno, como as chamadas Ajax, esta chamada para a MessageBox mesmo, a chamada daquele “win.show()”, etc… é tudo ASINCRONO. Lembre sempre disto. Porém o Ext tem algumas ferramentas que nos ajudam quando precisamos montar algumas chamadas mais criticas, que necessitam ser ordenadas ( ver: http://www.extjs.com/deploy/dev/docs/?class=Function ).

Bom, acho que já ficou bem grandinha esta aula, então façam assim: olhem na documentação, as propriedades, eventos e métodos que estes componentes, por nós utilizados, tem e façam suas alterações e testes, nesta mesma tela. E voltem aqui para deixar suas perguntas, caso fiquem com alguma duvida. Ok !

PS.: Desculpem a codificação do index.html, pois não mostrou corretamente o codigo aqui no blog, então tive que alterar as tags.
codigo-ext-js (0)

Thadeu Penna : Como uma mancha cresce

Como uma mancha cresce

Eu já comentei aqui, o problema do caminho aleatório (Random Walk). Falei no post do O azeite bêbado e fiz algumas simulações com o Processing.js, disponíveis na página do curso de Física Estatística que estou ministrando neste semestre. A experiência que eu quero realizar é medir como o diâmetro de uma mancha de tinta em uma folha de papel varia com o tempo. Vale ressaltar que este probleminha é inspirado em um outro que mostrou que átomos existem, ou comportamentos em mercados de ações, como um gás venenoso se espalha pelo ar, etc.

O que eu fiz foi o seguinte: filmei uma gota de tinta que cai no papel.

Agora eu retiro frames do vídeo, em intervalos regulares. O vídeo foi gravado a 30 fps, com uma câmera digital comum. O problema que eu enfrentei é que eu não quero todos os frames (são 7 segundos de filme, com 30 por segundo seriam 210 para analisar e eu queria por volta 15). Os programas que havia testado ou retiravam todos os frames ou só faziam snapshots de 1 em 1 segundo. A dica para resolver isto foi passada pelo Armando M. Baratti, na lista do Arch Linux. O que devemos fazer pelo ffmpeg é o seguinte: ele só tira frames de 1 em 1s, mas podemos mudar a velocidade do filme. Se repassarmos o filme em 15 fps por segundo, então 0.5s do filme original vai ser 1s do filme repassado. A sintaxe então é simples:

ffmpeg -i mvi_6484.avi -r 10 -ss 00:00:04 -t 00:00:06 extracted_images/images%03d.png

que faz o seguinte: pega o arquivo mvi_6484.avi, a partir do quarto segundo, com duração de seis segundos e tira 10 fotos por segundo. As fotos são salvas no diretório extracted_images, e com um rótulo que indica a ordem do frame. Eu pego cada foto e uso o Gimp para medir o tamanho da mancha. Depois uso o Gnuplot para medir o tamanho em função do número do frame (nem precisa saber quanto tempo em unidades tradicionais como minuto ou segundo). O resultado está no gráfico abaixo do tamanho em pixels versus o índice do frame

Observe que a gota não cresce com velocidade constante, mas é mais lenta à medida que o tempo passa. Na verdade, o raio da gota cresce com a raiz quadrada do tempo (como mostrado por Einstein em 1905). Eu não vou dar detalhes aqui pois isto é um trabalho para os estudantes da disciplina :) . Prometo que depois eu conto o resto.

física, gimp, linux

Albino Biasutti Neto :: Blog : Programação – Linguagem C

Saudações… Estou estudando esta linguagem porque é um das mais interessantes e um código que com ela irá aprender vários outras. Um breve resumo sobre o C. Retirado da Wikipedia. O desenvolvimento inicial de C, ocorreu no AT&T Bell Labs, entre 1969 e 1973. Não se sabe se o nome “C” foi dado à linguagem porque muitas de [...]

Marcelo Cavalcante - kalib : FLISOL Fortaleza 2010

Saudações pessoal!

Quem é vivo sempre aparecer…

Não, eu não abandonei o blog. Apenas estava sem recursos para continuar postando. Meu notebook resolveu apresentar problemas sérios depois de 4 anos na luta e acabei tendo de comprar outro. Ainda não chegou, portanto ainda está difícil conseguir postar por aqui.. mas cá estou.

Como todos já devem saber sou militante do movimento de Software Livre e como tal sempre estou engajado em algum projeto/evento que envolva liberdade e compartilhamento de conhecimento. Neste momento estou me focando no FLISOL Fortaleza 2010.

Para quem ainda não conhece o FLISOL, Festival Latinoamericano de Instalação de Software Livre, é um evento anual que acontece, como o próprio nome indica, simultaneamente em toda a América Latina. Mais de 150 cidades sediam o evento com organizações locais que trocam informações e ajuda entre si para tal.

Desde 2005 estou direta ou indiretamente engajado na organização do mesmo aqui em Fortaleza, portanto neste ano não poderia ser diferente. Um dos grandes diferenciais, e minha maior motivação, deste ano é o fato de estarmos, também, comemorando o aniversário de 5 anos da Comunidade Tux-CE.

O evento se baseia em, basicamente, instalar Software Livre nas máquinas dos visitantes que não possuem experiência ou não se sintam seguros para o fazerem sozinhos, porém em algumas cidades, como é o caso aqui em Fortaleza, optamos por fazer mais do que simplesmente instalações. Sempre temos palestras, apresentações, demonstrações, distribuição de mídias com distribuições Linux e outros softwares livres, etc…

Neste ano estamos adotando o recurso de “Páginas Amigas” como uma forma de ajudar e ser ajudado! Bem a cara do Software Livre, certo?!

Se você possui um site, blog ou qualquer coisa que o valha, pode submeter-se como uma página amiga do FLISOL. Com isso você terá um banner de seu site, blog ou coisa que o valha exposto em nossa página do FLISOL em troca de um banner do evento no seu. É uma espécie de ajuda mútua onde ambos se beneficiam. Para conseguir mais detahes sobre como se tornar uma página amiga do FLISOL, visite este link.

Amanhã mesmo teremos uma reunião de organização do evento na qual discutiremos mais alguns detalhes sobre o mesmo.

Em breve volto a publicar maiores detalhes.

Abraços!