O degrafa é uma ferramenta que ajuda em muito no desenvolvimento de Skins nas aplicações Flex. Hoje eu utilizo ele em vários projetos, principalmente para backgroung. As aplicações abaixo foram retiradas do próprio site da degrafa em http://code.google.com/p/degrafa/source/.
O código fonte esta disponível aqui.
/** Eduardo Kraus adverte * Este POST pode causar sérios danos a sua mente * se lido completamente sem intervalo para café * * As complexidade destes exemplo farão seu cérebro entrar em loop, * que pode causar paranóias iguao ao do Tarso (Novela das 8 da Globo) */
No primeiro exemplo, é criado um circulo com o componente Surface. Internamente é adicionado um grupo, para receber as figuras geométricas criadas. Neste caso foi inserido um circulo, que recebe o Raio de um HSlider, o stroke e o fill.
<degrafa:Surface top="450" horizontalCenter="0">
<degrafa:GeometryGroup>
<degrafa:Circle radius="{radiusSlider.value}"
fill="{linearGradFill}"
stroke="{solidStroke}"/>
</degrafa:GeometryGroup>
</degrafa:Surface>
O fill recebe valores do LinearGradientFill da biblioteca do degrafa. O LinearGradientFill gerencia as cores do centro do crirculo.
<degrafa:LinearGradientFill id="linearGradFill" angle="{fillAngleSlider.value}">
<degrafa:GradientStop alpha="{alphaSlider1.value}"
color="{colorPicker1.selectedColor}"/>
<degrafa:GradientStop alpha="{alphaSlider2.value}"
color="{colorPicker2.selectedColor}"/>
</degrafa:LinearGradientFill>
O stroke recebe valores do SolidStroke da biblioteca do degrafa. O SolidStroke gerencia as cores das bordas.
<degrafa:SolidStroke id="solidStroke"
alpha="{alphaSlider3.value}"
color="{colorPicker3.selectedColor}"
weight="{weightSlider.value}"/>
Agora veja abaixo como ficou o exemplo acima.Este aqui é excelente para fazer upload de fotos, aonde tem que recortar uma área interna. Neste caso a imagem esta definida duas vezes: a primeira vês que a imagem aparece, ela será a imagem que ficará escura de fundo, e a segunda será a imagem mais clara que aparecerá.
/* As duas imagens devem estar uma igual a outra e em cima da mesma */
Aqui temos dois grupos destro do Surface, O primeiro grupo define o estilo fora em volta da mascara, ou seja, a cor que ofuscará a imagem de baixo. Já o segundo grupo define a borda desta mascara.
<degrafa:SolidStroke color="#000" weight="2" id="stroke1"/>
<degrafa:SolidFill color="#FFF" alpha="1" id="fill1"/>
<degrafa:Surface>
<degrafa:GeometryGroup id="topMask"
x="{maskXSlider.value}"
y="{maskYSlider.value}"
rotation="{maskAngleSlider.value}">
<degrafa:RegularRectangle width="{maskWidthSlider.value}"
height="{maskHeightSlider.value}"
fill="{fill1}"
stroke="{stroke1}"/>
</degrafa:GeometryGroup>
<degrafa:GeometryGroup id="topFrame"
x="{maskXSlider.value}"
y="{maskYSlider.value}"
rotation="{maskAngleSlider.value}">
<degrafa:RegularRectangle width="{maskWidthSlider.value}"
height="{maskHeightSlider.value}"
stroke="{stroke1}"/>
</degrafa:GeometryGroup>
</degrafa:Surface>
Veja como ficou o exemplo descrito acima:
Arquivo CroppingSample.mxmlEste exemplo abaixo é o que mais utilizo, o degrafa para CSS. Bom, neste exemplo o degrafa é utilizado apenas no CSS para definir alterações para o background-image.
Para o Application apenas é adicionado a opção repeat. Outro detalhe é que aqui esta sendo utilizado cor de fundo e imagem de fundo o que normalmente não é aceito no Flex. O repeat, faz com que a imagem referenciada seje repetida ao invés de esticada.
Mais não para por ai, visto que a imagem é transparente, a cor de fudo é repetida conforme o primeiro parâmetro que referencia o angulo. os demais são as cores que podem ser adicionados e são intercalados. isso em apenas poucas linhas.
Application {
background-color: "-45deg #990000 #000000 #990000";
background-image: Embed("assets/designer.png");
background-repeat: repeat;
background-position: center;
background-blend: add;
border-skin: ClassReference("com.degrafa.skins.CSSSkin");
}
No Panel a história é mais complexa. Bom, muito mais complexo.
Na propriedade border-color é informado quatro cores, para as quatro bordas, sendo top, right, bottom, e left. e a propriedade border-width referencias os seus tamanhos na mesma ordem do border-color.
As propriedades border-top-right-radius e border-bottom-left-radius fazem com que apenas as duas bordas sejam arredondadas. As demais são deixadas como padrão.
Como eu disse antes este é complexo. Para cor de fundo há agora são definidos 4 diferentes, e para a segunda opção são definidos várias novas opções. Como são três imagens é necessário uma classe auxiliar para estas imagens, referenciado na classe assets-class.
Panel {
color: #FFFFFF;
border-alpha: 0.8;
border-color: "#002255 #001144 #001144 #002255";
border-width: "30px 10px 10px 10px";
border-top-right-radius: 24px;
border-bottom-left-radius: 24px;
background-image: GRUNGE, "-90deg #666666 120px #FFFFFF 90% #AAAAAA", KITCHEN, RETRO;
background-repeat: stretch, stretch, repeat-y, repeat;
background-position: center, center, "top 85%", "top center";
background-blend: multiply, multiply, normal, normal;
asset-class: ClassReference("skins.Assets");
border-skin: ClassReference("com.degrafa.skins.CSSSkin");
}
Veja como ficou o exemplo acima:
Arquivo CSSSkin.mxmlEste exemplo é muito estenso para esplicar, e se quiser usar, terás que dar uma vasculhada nos códigos dele.
Arquivo DegrafaClock.mxmlUm exemplo para projetos gráficos em Flex.
Aqui ele utiliza o Surface com uma instância do VerticalLineRepeater e uma do HorizontalLineRepeater.
<degrafa:Surface>
<degrafa:GeometryGroup>
<degrafa:VerticalLineRepeater count="{countSlider.value}"
stroke="{whiteStroke}"
x="0"
y="0"
y1="{Application.application.height}"
offsetX="0"
offsetY="0"
moveOffsetX="{Application.application.width/countSlider.value}"
moveOffsetY="0"/>
<degrafa:HorizontalLineRepeater count="{countSlider.value}"
stroke="{whiteStroke}"
x="0"
y="0"
x1="{Application.application.width}"
offsetX="0"
offsetY="0"
moveOffsetX="0"
moveOffsetY="{Application.application.width/countSlider.value}"/>
</degrafa:GeometryGroup>
</degrafa:Surface>
as
Arquivo GridSample.mxmlAqui é um exemplo excelente e que tem muitas utilidades. Aqui é gerado uma moldura em volta da imagem.
Este aqui é tão complexo que utiliza a classe RoundedRectangleComplex. No Surface ele recebe duas instância da classe RoundedRectangleComplex.
A primeira instância refere-se a mascara que irá esconder os cantos. isso mesmo, já que as bordas não serão suficiente para isso. A segunda só poderia ser a borda propriamente dita.
<degrafa:SolidFill color="#FFF" alpha=".5" id="fill1"/>
<degrafa:LinearGradientStroke weight="5" angle="90" id="outlineStroke">
<degrafa:GradientStop color="#fff" ratio="0"/>
<degrafa:GradientStop color="#000" ratio="1"/>
</degrafa:LinearGradientStroke>
<degrafa:Surface>
<degrafa:GeometryGroup id="theMask" x="{img1.x}" y="{img1.y}">
<degrafa:RoundedRectangleComplex x="0"
y="0"
width="{img1.width}"
height="{img1.height}"
fill="{fill1}"
bottomLeftRadius="20"
topRightRadius="20"/>
</degrafa:GeometryGroup>
<degrafa:GeometryGroup id="theFrame" x="{img1.x}" y="{img1.y}">
<degrafa:RoundedRectangleComplex x="0"
y="0"
width="{img1.width}"
height="{img1.height}"
stroke="{outlineStroke}"
bottomLeftRadius="22"
topRightRadius="22"/>
<degrafa:filters>
<mx:DropShadowFilter alpha=".5"/>
<mx:BevelFilter/>
</degrafa:filters>
</degrafa:GeometryGroup>
</degrafa:Surface>
Veja o resultado:
Arquivo MaskingSample.mxmlMais simples, já que apenas é necessário referenciar as classes. Para alterar as cores, tem que ser via Style.
<mx:Button width="50"
height="50"
verticalCenter="0"
horizontalCenter="0"
upSkin="skins.SphereButtonUp"
overSkin="skins.SphereButtonOver"/>
Arquivo SphereSkinSample.mxml