Gabriela Trindade Perry: HCI, Design Cognition, Flex

Pra quem não entendeu, “não é bolinho” significa “não é fácil”. Este desabafo tem a ver com um fato que acabou de acontecer comigo (numa manhã de terça feira chuvosa em Porto Alegre) .

Estava eu trabalhando no Flex, construindo uma interface super bacana para um programa que estou fazendo. A idéia é ótima, olha só:

Daí? Bala, né?

Pois então, imagina que esse mapa aí atrás tem um navegador, zoom e pan,  e que os balõezinhos acompanham o mapa à medida que tu interage com ele – cara! – e não aumentam de tamanho! Pois eu espremi o meu cérebro do tamanho de uma cereja e me saí com um super-método de transformação de coordenadas que não é uma gambiarra! Eu tava aqui me sentindo o máximo – tô aqui cheia de Matrix e Points e etc…

Bem, depois que eu finalmente consegui colocar essa coisa toda pra funcionar (tava pensando: acho que vou no cinema hoje de tarde), coloquei mais uns personagens no meu XML e…

Cinema?

Moral da história para programadores: UML? Não! Desenhe cada tela antes de começar. Faça cenários. Desenhe os cenários. Depois, só depois, UML. Esse erro vai me custar horas de planejamento do sistema. Só que eu não tenho tempo pra isso.

Moral dois (ainda para programadores): Quando vocês tiverem uma idéia bala e diferente para interfaces, mesmo que achem que saibam como implementar, dupliquem o prazo do projeto.

Moral três (é, ainda): Provavelmente os padrões vão salvar o meu dia (e com esperança o meu cinema, que talvez role um pouco mais tarde).
Moral da história para designers: não odeiem os programadores. Eles (a gente?) não consegue prever tudo.

This is pretty easy, but also pretty usefull.

It removes all the children of a given object. You can use with Flex or Flash.

/**************************************/

Muito fácil, mas também muito útil.

Remove todos os filhos de um dado objeto. Você pode usar com Flex ou Flash.

Read the rest of this entry »

Well, now I realize I dont konw how to call this component. Im sure it has a known name… Maybe I should look at interactions patterns…

Well, what it does: a Button owns a DraggableWindow, so when we click on that Button the DW shows. When we close the DW, it fades into the Button.

It has three states:

-TIED: the DW is beside its owner, it has just opened

- LOOSE: the DW was dragged

-CLOSE: the DW is closed
Theres a WindowOwnerModelLocator, which is responsible for assuring that only one DW is TIED at a time.

Click here to see the app and here to see the source (why the heck didnt I exported it all in one piece I cant remember…)

/***************************************

Bem, agora eu me dou conta que não sei como chamar esse componente. Tenho certeza que ele tem um nome conhecido… Talvez eu devesse procurar nos padrões de interação…

Bem, o que ele faz: um Button tem um DraggableWindow, então quando se clica nesse Button a DW aparece. Quando fechamos a DW ela some em diração ao Button.

Ele tem três estados:

-TIED: a DW está do lado do Button, foi recém aberta.
- LOOSE: a DW foi arrastada.
-CLOSE: a DW foi fechada.
Tem um WindowOwnerModelLocator, que é responsável por certificar que apenas um DW está TIED por vez.

Clique aqui para ver o componente e aqui para ver o source (porque diabos eu não exportei tudo junto eu não consigo lembrar…)

Pretty straightforward. If is a multiline button what you need, then a multiline button is what you have!

Check also: http://flexrays.wordpress.com/2007/04/24/multilined-label-for-a-button/ and http: blogs.adobe.com/aharui/2007/04/multiline_buttons.html
Both are great references.

Read the rest of this entry »

I am working on a component that is going receive some instance and drag it arround and minimize, maximize and close. And also this component (the one that drags) is going to be attached to some other component (its owner), which will propably be a Button, and once you drop this container over its owner, it will close. Much like the menus on eclipse and Flex Builder.

The first part is this thing, which could be released alone.

So, I didn’t want to use MDI (nothing against it, really, great code, but too many features…), and plus I didn’t got the idea behind the DragManager. Why do I have to share an action between two objetcs (the dragEnter event has to be on the target)?

Also take in account that I wanted to do it on my own .

So, you can see the result here. View source enabled, of course.
It is pretty simple, in fact. Ah! check also the great link by Hasseg: Collapsible Panel Component for Flex

And it was built over Cairngorm It really makes your life easier… Big fan.

/***********************************/

Estou trabalhando num componente que vai recerb uma instância de outro componente e arrastar, minimizar, maximizar e fechar.
E também esse componente (o que arrasta) vai estar atachado a outro componente (seu dono), que provavelmente será um Button, e quando você
largar o componente sobre ele ele vai fechar. Bem parecido com os menus que tem no Eclipse e no Flex Builder.
A primeira parte é essa aqui, que pode ser lançada sozinha.

Então, eu não usei MDI (nada contra, grande código, mesmo, mas tem mutas funcionalidades…), e depois eu não entendi a idéia do DragManager.
Porque eu tenho que dividir uma ação entre dois objetos (o evento DragEnter tem que estar no alvo)?

Também considere que eu queria fazer isso sozinha

Então, você pode ver o resultado aqui. Com viewsource habilitado, é claro.É bem simples, na verdade. Ah! veja também esse grande link do Hasseg: Collapsible Panel Component for Flex

E foi construído com Cairgorm Ele realmente simplifica a vida… Sou uma grande fã.

These (localToGlobal and globalToLocal) are very useful methods that might be not as well known as they should. As now I’m a blogger, and I just wrote code using it, I took some time to draw a (I think) very didactid image about it. There’s no source, no code. Just read the figue and you should be able to understand.

And a warning: there are other pair of methods in Flex (globalToContent and contentToGlobal), which are intended to be used when your containers have borders.

Check also this amazing link: http://rjria.blogspot.com/2008/05/localtoglobal-vs-contenttoglobal-in.html

Enjoy.

And here we have another example:

I am an onPress orphan. Now I said it… How do you know your user is efectively pressing something? Of course, you say, there is the MOUSE_DOW, but noooo, I want to know he is pressing all the time he is pressing.

So, here’s my ugly hack for me beloved onPress.

/******************************/

Sou uma órfã do onPress. Pronto, falei… Como você sabe que seu usuário está efetivamente pressionando alguma coisa? É claro, você pensa, tem o MOUSE_DOWN, mas nããããão, eu quero saber enquanto ele pressiona.

Por isso, aqui está meu POG para o amado onPress.

[code lang="actionscript"]package examples{
import flash.events.MouseEvent;
import mx.containers.Canvas;

public class PressMe extends Canvas    {

private var somecanvas:Canvas= new Canvas();

public function PressMe()        {
super();

addChild(somecanvas);
somecanvas.setStyle("backgroundColor", 0xFFFFFF);
somecanvas.width=100;
somecanvas.height=100;
somecanvas.addEventListener(MouseEvent.MOUSE_DOWN, start);
}

private function start(evt:MouseEvent):void{
somecanvas.startDrag();
somecanvas.addEventListener(MouseEvent.MOUSE_UP, stop);
}

private function stop(evt:MouseEvent):void{
somecanvas.removeEventListener(MouseEvent.MOUSE_UP, stop);
somecanvas.stopDrag();
}
}
}[/code]

This is something that worths sharing. For those, like me, that are learning to create custom components, a tip on the measure method. Check this script. Check the docs.
/********************************************

Isso é algo que vale a pena compartilhar. Para todos que, como eu, estão aprendendo a criar componentes customizados, uma dica sobre o método measure. Dá uma olhada no script. Dá uma olhada nos docs.

[code lang="actionscript"]package examples
{
import mx.containers.Canvas;
import mx.controls.LinkButton;

public class Measuring extends Canvas {

private var _closeButton:LinkButton;

public function Measuring(){
super();
}

override protected function createChildren():void{
super.createChildren();

if(!_closeButton){
_closeButton= new LinkButton;
_closeButton.label="FOO";
addChild(_closeButton);

trace("/******* createChildren *******/")
trace("LinkButton width: "+_closeButton.width); //WTF! 0!
trace("LinkButton explicitWidth: "+_closeButton.explicitWidth); //WTF! NaN!
trace("LinkButton measuredWidth: "+_closeButton.measuredWidth); //WTF! 0!
trace("/******* createChildren *******/")
}
}

override protected function measure():void{
super.measure();
trace("/******* measure *******/")
trace("LinkButton width: "+_closeButton.width); //WTF! 0!
trace("LinkButton explicitWidth: "+_closeButton.explicitWidth); //WTF! NaN!
//Of course… it MEASURES… Now it makes sense…
trace("LinkButton measuredWidth: "+_closeButton.measuredWidth); //Good kid: 45
trace("/******* measure *******/")
}

}
}[/code]

Essa classe converte um UIComponent num bitmap. Eu devia ter marcado o link de onde saiu isso…

[code lang="actionscript"] package utils
{
import mx.core.UIComponent;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Matrix;public class UIComponentToBitmap extends UIComponent{

private var _contentBitmap:Bitmap;

public function UIComponentToBitmap():void{
super();
}

public static function draw(content:UIComponent):Bitmap{
var bitmapData:BitmapData = new BitmapData(content.width,
content.height,
true,
0xFFFFFF);
var m:Matrix= new Matrix();
bitmapData.draw(content, m);
return new Bitmap(bitmapData,"auto", false);
}
}
}[/code]

E aqui um exemplo de uso:
[code lang="actionscript"]
import mx.core.UIComponent;
import utils.UIComponentToBitmap;

public function initApp():void{
	var mypanel:Panel=new Panel;
        addChild(mypanel);

        var comp:UIComponent=new UIComponent;
	addChild(comp);

	var uic2bmp:Bitmap= UIComponentToBitmap.draw(mypanel);
	comp.addChild(uic2bmp);
}
[/code]

This problem raised on Flex-Brasil (read the post, in portuguese, of course). After a google search I found it was very common, and the solution is pretty widespread, but thought that it worth a post ;0)

See the example (view source enabled, as always).

***************************************************

Esse problema surgiu na Flex-Brasil (leia o post). Depois de procurar no google vi que era um problema bem comum, e que a solução era bastante divulgada, mas achei que valia um post ;0)
Veja o exemplo (com view source, como sempre).