Web i tome slično... IvanIlijasic.com » Degrafa http://www.ivanilijasic.com Stranice koje svaki pošteni IT-jevac stavlja na zadnje mjesto Mon, 07 Nov 2011 11:00:53 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Novosti u Degrafi 3.2 http://www.ivanilijasic.com/2009/11/novosti-u-degrafi-3-2/ http://www.ivanilijasic.com/2009/11/novosti-u-degrafi-3-2/#comments Mon, 02 Nov 2009 12:49:22 +0000 admin http://www.ivanilijasic.com/?p=998 Degrafa VideofillZa one koji ne znaju, Degrafa je deklarativni MXML framework za grafičko programiranje. Novi FXG format uveden u novom Flex 4 SDK ima svoju primarnu ulogu, a to je definiranje izgleda, no za programiranje te grafike preporučam da pogledate što nudi Degrafa. U navedenom primjeru pokazano je kako koristiti VideoFill i VideoStream objekte u novom izdanju SWC libraryja. Aktualna verzija Degrafe je 3.1. U ovom primjeru možete vidjeti kako koristiti VideoFill na VideoStream objektu, kroz koji se može pogledati i trailer za nadolazeći film Jamesa Camerona – Avatar.

Degrafa 3.2 Demo – VideoFill Basic Demo

]]> http://www.ivanilijasic.com/2009/11/novosti-u-degrafi-3-2/feed/ 0 Google Mate projekt http://www.ivanilijasic.com/2009/06/google-mate-projekt/ http://www.ivanilijasic.com/2009/06/google-mate-projekt/#comments Fri, 12 Jun 2009 06:27:02 +0000 admin http://www.ivanilijasic.com/?p=435 Google MateEvo još jedne odlične Flex aplikacije. Google Mate je AIR open source aplikacija preko koje možete pretraživati Google, ali ono što je bitnije je to što možete vidjeti jedan odličan program u kojem su korištene razne tehnologije. Krenimo od Mate Frameworka, odlično event handler “MVC” frameworka.  Google Mate koristi tehnike pohrane podataka AIR aplikacije u SQL Lite bazu podataka, koja se koristi za internu pohranu podataka na AIR platformi. Za pojedine tranzicije unutar aplikacije korišten je Efflex library, poznati dodatak standarnim Flex tranzicijama i animacijama. Degrafa se koristi za vizualizaciju sučelja, a kako bi Google Mate opravdao svoje ime, koristi se i Google AS3 API.

Google Mate

]]> http://www.ivanilijasic.com/2009/06/google-mate-projekt/feed/ 1 Usporedba: Geometrijski oblici pomoću ActionScripta i Degrafe http://www.ivanilijasic.com/2009/05/usporedba-geometrijski-oblici-pomocu-actionscripta-i-degrafe/ http://www.ivanilijasic.com/2009/05/usporedba-geometrijski-oblici-pomocu-actionscripta-i-degrafe/#comments Sat, 23 May 2009 15:46:20 +0000 admin http://www.ivanilijasic.test/?p=210 Degrafa logoDegrafa je deklarativni grafički framework za Flex. To znači da ne morate kodirati grafičke objekte u Actionscriptu već pomoću Degrafa tagova možete stvarati grafiku. Kada sam prošlo ljeto otkrio Degrafu, prva motivacija mi je bila ugraditi obične geometrijske oblike bez korištenja Shape klase. Nakon nekoliko dana jedan moj kolega, hardcore actionscriptaš je htio vidjeti kako može nabrzinu složiti kvadrat, krug i slične objekte, a da taj kod bude jednostavn i intuitivan. U dvije minute sam mu složio dolje navedeni primjer :)

Degrafa uistinu nudi puno mogućnosti, no evo i vama na uvid koliko je logičnije stvaranje grafike i geometrije pomoću Degrafe.

       var roundObject:Shape = new Shape();
       var square:Shape = new Shape();
       var circle:Shape = new Shape();
       // pravokutnik
        square.graphics.beginFill(0xFF0000, 0.5);
        square.graphics.drawRect(10, 10, 100, 100);
        square.graphics.endFill();
        // krug
        circle.graphics.beginFill(0x0000FF, 1);
        circle.graphics.drawCircle(170, 60, 50);
        circle.graphics.endFill();
        // zaobljeni pravokutnik
        roundObject.graphics.beginFill(0x00FF00);

        canvasAS.rawChildren.addChild(square);
        canvasAS.rawChildren.addChild(circle);
        roundObject.graphics.moveTo(280, 10);
        roundObject.graphics.curveTo(330, 10, 330, 60);
        roundObject.graphics.curveTo(330, 110, 280, 110);
        roundObject.graphics.curveTo(230, 110, 230, 60);
        roundObject.graphics.curveTo(230, 10, 280, 10);
        roundObject.graphics.endFill();
        canvasAS.rawChildren.addChild(roundObject);
....
....

        <degrafa:Surface>
             <degrafa:fills>
             <degrafa:SolidFill color="#FF0000" id="rectFill" alpha="0.5" />
             <degrafa:SolidFill color="#0000FF" id="circleFill" alpha="1" />
             <degrafa:SolidFill color="#00FF00" id="roundedFill" alpha="1" />
             </degrafa:fills>
        <degrafa:GeometryGroup>
             <degrafa:RegularRectangle x="10" y="10" width="100" height="100" fill="{rectFill}"/>
             <degrafa:Circle centerX="170" centerY="60" radius="50" fill="{circleFill}"  />
             <degrafa:RoundedRectangle x="230" y="10" width="100" height="100"
                 cornerRadius="43" fill="{roundedFill}" /></degrafa:GeometryGroup>
     </degrafa:Surface>
....

Više o Degrafi možete saznati na http://www.degrafa.org, a čitav kod ovog primjera možete skinuti ovdje: Degrafa vs. Actionscript

]]> http://www.ivanilijasic.com/2009/05/usporedba-geometrijski-oblici-pomocu-actionscripta-i-degrafe/feed/ 0 Povezivanje Flex komponenata s vizualnim komponentama pomoću Degrafe http://www.ivanilijasic.com/2009/05/povezivanje-flex-komponenata-s-vizualnim-komponentama-pomocu-degrafe/ http://www.ivanilijasic.com/2009/05/povezivanje-flex-komponenata-s-vizualnim-komponentama-pomocu-degrafe/#comments Sat, 23 May 2009 15:42:18 +0000 admin http://www.ivanilijasic.test/?p=204 Degrafa dresFlex Builder nam služi kako bismo napravili RIA aplikacije bez mučenja sa HTML kodom i prilagodbom za sve browsere. Ipak, da bismo napravili nekakav dizajnerski dodatak, trebamo ili Photoshop ili Flash. Prošlo proljeće sam otkrio Degrafu i oduševio sam se njenim mogućnostima. Degrafa je Flex framework za stvaranje grafičkih elemenata pomoću tagova ili SVG krivulja, koje možemo napraviti u bilo kojem kvalitetnijem grafičkom alatu.

Za demonstraciju Degrafe napravio sam jedan mali demo. Kolegi sam prije nekoliko tjedana  demonstrirao Degrafu. Prvo sam u Illustratoru (alatu koji sam našao kod kolege na laptopu) nacrtao nogometni dres, dodao rubove rukava i horizontalne i vertikalne pruge. Tada sam tu grafiku spasio u SVG formatu i dobio sam sve potrebno za slaganje. U Flex Builderu sam složio sučelje s color pickerima i check boxovima kojima se definira da li će dres imati horizontalne ili vertikalne pruge.

Nakon toga sam na panel dodao Degrafa surface i na nju dodao objekte za definiranje fillova  i ruba dresa.  Fill objekti su povezani s color pickerima.  Da bi se nacrtao dres, iskoristio sam pojedine krivulje iz SVG-a, za rub dresa, rubove rukava i crte na dresu. Malo po malo i složio sam zgodni primjer.

	<degrafa:Surface verticalCenter="-130" horizontalCenter="-130">
		<!-- Creating fills. -->
		<degrafa:fills>
			<paint:SolidFill id="homeShirtFill" color="{cpHomeShirtColor.selectedColor}"/>
			<paint:SolidFill id="homeShirtSleavesBorderFill" color="{cpHomeShirtSleavesColor.selectedColor}"/>
			<paint:SolidFill id="homeShirtVerticalStripesFill" color="{cpHomeShirtVerticalStripesColor.selectedColor}" alpha="0"/>
			<paint:SolidFill id="homeShirtHorizontalStripesFill" color="{cpHomeShirtHorizontalStripesColor.selectedColor}" alpha="0"/>
		</degrafa:fills>
		<!-- Creating Strokes. -->
		<degrafa:strokes>
			<paint:SolidStroke id="homeShirtStroke" color="#000000" alpha="1" weight="0"/>
		</degrafa:strokes>
		<!-- Home shirt -->
		<degrafa:GeometryGroup>
			<geometry:Polygon fill="{homeShirtFill}">
			<geometry:data>	70.395,195.667 70.395,93.334 61.889,105.336 35.333,84.053 70.395,41.001 108.835,41.001
							127,48.667 145.835,41.001 184.335,41.001 219.396,84.053 192.841,105.336 184,93.334
							184.335,93.334 184.335,195.667
			  </geometry:data>
	 		  </geometry:Polygon>
			<geometry:Polygon fill="{homeShirtSleavesBorderFill}" stroke="{homeShirtStroke}" id="homeShirtRightSleave">
				<geometry:data>216.264,80.157 219.396,84.053 192.841,105.336 190.725,101.587</geometry:data>
			</geometry:Polygon>
			<geometry:Polygon fill="{homeShirtSleavesBorderFill}" stroke="{homeShirtStroke}" id="homeShirtLeftSleave">
				<geometry:data>39.07,80.157 36.059,84.053 61.598,105.336 64.609,101.587</geometry:data>
			</geometry:Polygon>
		</degrafa:GeometryGroup>
		<!-- home shirt vertical stripes -->
		<degrafa:GeometryGroup>
			<geometry:Polygon fill="{homeShirtVerticalStripesFill}"  id="homeShirtVerticalStripe1">
				<geometry:data>70.395,41.001 90.395,41.001 90.395,195.667 70.395,195.667</geometry:data>
			</geometry:Polygon>
			<geometry:Polygon fill="{homeShirtVerticalStripesFill}"  id="homeShirtVerticalStripe2">
				<geometry:data>108.835,41.001 127,48.667 145.835,41.001 145.835,195.667 108.835,195.667</geometry:data>
			</geometry:Polygon>
			<geometry:Polygon fill="{homeShirtVerticalStripesFill}"  id="homeShirtVerticalStripe3">
				<geometry:data>164.335,41.001 184.335,41.001 184.335,195.667 164.335,195.6677</geometry:data>
			</geometry:Polygon>
		</degrafa:GeometryGroup>
		<!-- home shirt h stripes -->
		<degrafa:GeometryGroup>
			<geometry:Polygon fill="{homeShirtHorizontalStripesFill}"  id="homeShirtHorizontalStripe1">
				<geometry:data>70.395,175.667 184.335,175.667 184.335,195.667 70.395,195.667</geometry:data>
			</geometry:Polygon>
			<geometry:Polygon fill="{homeShirtHorizontalStripesFill}"  id="homeShirtHorizontalStripe2">
				<geometry:data>70.395,135.667 184.335,135.667 184.335,155.667 70.395,155.667</geometry:data>
			</geometry:Polygon>
			<geometry:Polygon fill="{homeShirtHorizontalStripesFill}"  id="homeShirtHorizontalStripe3">
				<geometry:data>70.395,95.667 184.335,95.667 184.335,115.667 70.395,115.667</geometry:data>
			</geometry:Polygon>

		</degrafa:GeometryGroup>
		<!-- home shirt border - extracted to prevent loss of border parts while stripes are displayed -->
		<degrafa:GeometryGroup>
			<geometry:Polygon stroke="{homeShirtStroke}">
			<geometry:data>	70.395,195.667 70.395,93.334 61.889,105.336 35.333,84.053 70.395,41.001 108.835,41.001
							127,48.667 145.835,41.001 184.335,41.001 219.396,84.053 192.841,105.336 184,93.334
							184.335,93.334 184.335,195.667
			  </geometry:data>
	 		  </geometry:Polygon>
		</degrafa:GeometryGroup>
	</degrafa:Surface>

Primjer funkcionalnosti možete vidjeti na ovom linku: Degrafa dres
Kod primjera: Degrafa dres

Više o Degrafi možete saznati na http://www.degrafa.org

]]> http://www.ivanilijasic.com/2009/05/povezivanje-flex-komponenata-s-vizualnim-komponentama-pomocu-degrafe/feed/ 0 Predavanje: Degrafa http://www.ivanilijasic.com/2008/10/predavanje-degrafa/ http://www.ivanilijasic.com/2008/10/predavanje-degrafa/#comments Fri, 17 Oct 2008 11:07:55 +0000 admin http://www.ivanilijasic.com/?p=353 Degrafa logoDegrafa je deklarativni grafički Framework za Flex SDK. Pomoću njega možete stvarati grafiku unutar Flex aplikacije bez potrebe za pisanjem kompliciranog Actionscript koda, već se pomoću Degrafa tagova definiraju grafički elementi. Degrafa nudi i mogućnost stvaranja custom grafičkih oblika, ubacivanje putanja iz grafičkih alata u SVG formatu, napredni skinning Flex aplikacija. Više o Degrafi možete saznati sa snimke predavanja koje sam održao na Adobe ZgFlex grupi.

Snimka prezentacije: Degrafa
Prezentacija: Degrafa prezentacija@Slideshare
Kod: Degrafa projekt

]]> http://www.ivanilijasic.com/2008/10/predavanje-degrafa/feed/ 0