Site Blog
15
Nov objectHandles 2.0 - create custom handles with Adobe Flash Builder 4 (Flex 4)in Flex & AIR
 SonicE
Comments: 0
I'm writing this blog post because it was a nightmare for me to find useful information about using of objectHandles 2.0 with Flex 4 SDK. If you decide to use this library in your project and your project is based on Flex 4 SDK, then you should prepare your self for a real battle.
We are currently working on a project for online creation of Photo books, and our "book customizer" is written in Flex 4. I need to tell you that I'm not a flash, flex or AS 3 guru, but with my earlier experience in AS 2 it was not so difficult to start learning AS 3, Flex SDK, AIR etc. So this blog post is for what I've learned these days working on this project. Let start with building our custom handles. First you need to crate a new HandleFactory. Open a new AS 3 file and place this code inside: /src/CustomFlex4HandleFactory.as
// ActionScript file
package
{
import mx.core.IFactory;
public class CustomFlex4HandleFactory implements IFactory
{
public function CustomFlex4HandleFactory()
{
}
public function newInstance():*
{
return new MyCustomHandlesClass();
}
}
}
As you can see this code is only used to create a new instance of of custom handle, so we need to create now a class which will define or custom handle visual style. Create a new file called "MyCustomHandlesClass.as" /src/MyCustomHandlesClass.as
// ActionScript file
package
{
import com.roguedevelopment.objecthandles.HandleDescription;
import com.roguedevelopment.objecthandles.IHandle;
import flash.events.MouseEvent;
import spark.core.SpriteVisualElement;
public class MyCustomHandlesClass extends SpriteVisualElement implements IHandle
{
private var _descriptor:HandleDescription;
private var _targetModel:Object;
protected var isOver:Boolean = false;
public function get handleDescriptor():HandleDescription
{
return _descriptor;
}
public function set handleDescriptor(value:HandleDescription):void
{
_descriptor = value;
}
public function get targetModel():Object
{
return _targetModel;
}
public function set targetModel(value:Object):void
{
_targetModel = value;
}
public function MyCustomHandlesClass()
{
super();
addEventListener( MouseEvent.ROLL_OUT, onRollOut );
addEventListener( MouseEvent.ROLL_OVER, onRollOver );
//redraw();
}
protected function onRollOut( event : MouseEvent ) : void
{
isOver = false;
redraw();
}
protected function onRollOver( event:MouseEvent):void
{
isOver = true;
redraw();
}
public function redraw() : void
{
graphics.clear();
if( isOver )
{
graphics.lineStyle(1,0x3dff40);
graphics.beginFill(0xc5ffc0 ,1);
}
else
{
graphics.lineStyle(1,0);
graphics.beginFill(0xaaaaaa,1);
}
graphics.drawRect(-5,-5,10,10);
graphics.endFill();
}
}
}
Well this is a good start. To create your own style you should edit the redraw() function. What we have done in this example is to replace the default rectangular handle with circle. Now is time to use this code in our project. In your application file place this code:
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:objecthandles="com.roguedevelopment.objecthandles.*"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="300" creationComplete="application1_creationCompleteHandler(event)" viewSourceURL="srcview/index.html"> <fx:Script> <![CDATA[
import net.freesource.CustomFlex4HandleFactory;
import com.roguedevelopment.objecthandles.Flex4ChildManager;
import com.roguedevelopment.objecthandles.HandleDescription;
import com.roguedevelopment.objecthandles.HandleRoles;
import com.roguedevelopment.objecthandles.ObjectHandles;
import mx.events.FlexEvent;
protected var objectHandles:ObjectHandles;
override protected function initializationComplete() : void
{
var handles:Array = [];
handles.push( new HandleDescription( HandleRoles.RESIZE_UP + HandleRoles.RESIZE_LEFT,
new Point(0,0) ,
new Point(-16,-16) ) );
handles.push( new HandleDescription( HandleRoles.RESIZE_UP + HandleRoles.RESIZE_RIGHT,
new Point(100,0) ,
new Point(-16,-16) ) );
handles.push( new HandleDescription( HandleRoles.RESIZE_DOWN + HandleRoles.RESIZE_RIGHT,
new Point(100,100) ,
new Point(-16,-16) ) );
handles.push( new HandleDescription( HandleRoles.RESIZE_DOWN + HandleRoles.RESIZE_LEFT,
new Point(0,100) ,
new Point(-16,-16) ) );
objectHandles = new ObjectHandles( mainGroup ,
null,
new CustomFlex4HandleFactory(),
new Flex4ChildManager()
);
objectHandles.registerComponent( img, img );
super.initializationComplete();
}
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
//This line can be removed, is for axample only
objectHandles.selectionManager.addToSelected(img);
}
]]> </fx:Script> <s:Group id="mainGroup" width="100%" height="100%"> <s:layout> <s:BasicLayout /> </s:layout> <mx:Image id="img" source="@Embed('/assets/images/phone.jpg')" x="50" y="50" /> </s:Group></s:Application>
Demo: objectHandles 2.0 - create custom handles with Adobe Flash Builder 4 (Flex 4) Download: objectHandlesWithFlex4.zip
13
Feb
I'm just sitting in a public area and testing veskoto's new nokia phone and its browser. Well, I need to say 'Good job to all from the FS Team'. There are some small JS bugs, but I'll fix them in a zero time :). It is a time that we need to start optimize all of our work not only for all major browsers, but also for mobile phones. Until then - it's party time!
PS: Sorry for any typos, I'm typing on phone keyboard.
03
Feb  OverviewThe 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem (source http://960.gs) In addition to this I need to say that you can use this great grid system not only with 12 or 16 columns grid. You can also create your own grid based on 18, 20, 22, 24 ... XX columns. The point of 960px is that it subdivides nicely into lots of equal column sizes so is a very versatile width. It also happens to be slightly less than the minimum width you can actually use when a browser is maximized on a 1024 pixel wide display. As you might have heard, we've already created an e107 theme Blue City using this great concept. In this blog post I'll try to explain you how to use 960 Grid System in your e107 themes. All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with. Why using a grid sytem?The answer is very simple. It saves time when writing your HTML and CSS code and is easy to use. It is also very useful in creating the graphic design for your theme. ToolsYou can use various tools in your theme creation process.
Graphic DesignWell I'm not a guru in creating graphic concepts, because we have one of the best designers in e107 (and not only e107) Stoewarius, nevertheless I'll show you how to use 960 Grid System in your graphic design. I my all day work I prefer to use Adobe Fireworks for slicing but you can also us Adobe Photoshop. Go to http://960.gs and download the template package.  Inside this package you can find useful templates for your preferred graphic software. I'll use the 12 column one for Fireworks. Browse the package to /templates/fireworks and open 960_grid_12_col.png. As you can see there are 12 red columns and this is your working grid. Every column is 60px wide with 10px left and 10px right margin. The whole width is 960px and the real content width is 940px.  With this template you can easy create you layout. Let say you need in your header logo and banner areas, left column, center column and two menu areas after the header area. I'll not create a real design for a theme, I'll only show you how to use this grid system for your layout.  Using 960.cssThe ZIP you've already downloaded (download again) comes with a lot of stuff to help you design with the 960 system, including PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop, Visio, and CSS framework with demo HTML. We'll only used the CSS files, which is all you need for coding your site. The system comes with 3 CSS files.
960.css uses the following classes to structure the page:
There are lot of tutorials over the web on how to combine and use all this classes. 960 in actionNow it is a time to start creating your first 960gs based theme. Copy 960.css to your theme folder. Open theme.php and add these lines to the theme_head function.
function theme_head() {
echo '
<link rel="stylesheet" href="'.THEME_ABS.'960.css" type="text/css" media="all" />
';
}
Because theme_head function will load after the main style.css file we need to put the contents of reset.css at the top of your style.css. Copy the code from reset.css and paste it to the top of style.css The last step is to create your $HEADER and $FOOTER. You can easy create your HTML code for the layout without any line of CSS code. Everthing is don by 960.css. //In the code below remove the empty space after the " { " (left curly brace )
$HEADER = '
<div class="container_12 clearfix">
<!-- HEADER BOF -->
<div class="grid_5">
<!-- Add your LOGO and SITENAME content here -->
</div>
<div class="grid_7">
<!-- Add your BANNER SHORCODE here -->
</div>
<div class="clear"></div>
<!-- HEADER EOF -->
<!-- AREA 2 BOF -->
<div class="grid_6">
{ SETSTYLE=menu_area}
{ MENU=2}
</div>
<!-- AREA 2 EOF -->
<!-- AREA 3 BOF -->
<div class="grid_6">
{ SETSTYLE=menu_area}
{ MENU=3}
</div>
<!-- AREA 3 EOF -->
<div class="clear"></div>
<!-- AREA 1 BOF -->
<div class="grid_4">
{ SETSTYLE=menu_area}
{ MENU=1}
</div>
<!-- AREA 1 EOF -->
<!-- MAIN CONTENT BOF -->
<div class="grid_8">
{ SETSTYLE=center}
';
$FOOTER = '
</div>
<!-- MAIN CONTENT EOF -->
<div class="clear"></div>
<!-- FOOTER BOF -->
<div class="grid_12">
<!-- Add your footer content here -->
</div>
<div class="clear"></div>
<!-- FOOTER EOF -->
</div>
';
As you can see your layout is done by these few lines. The only thing you need to remember is that you always need to add DIV with class CLEAR after every grid column combination. Every grid_xx is floated to the left and you need to clear these floats to start a new "row" with columns. I hope this post was helpful. Just try 960.gs and you'll find how easy to use is this grid system and how many time you'll save when writing your code. Happy coding !!! |
Blog categories |
Member Login
|
|
