I would do it much earlier because lot of projects had to be done using other programming languages. But it’s not me who lost money due to the limitations of AIR. They have to know the reasons why they make those limitations, and degraded AIR to be a widget creation tool.

The original post (hope it’s meaningless now):

I don’t know what Adobe thinks, but ignoring user (their customers) is a really dangerous thing to do.

I have a problem with launching external application from an AIR apllication. I don’t want it because I have nothing else to do, I need to do it. ( Actually the client needs to do it, so I have to be able to do it.)  I think lots of people had/have this problem.

I don’t know what’s the point that even some music player software has bigger privileges than I could dream off with AIR? If we develop dekstop application, we have to have the same possibilities as other applications have. The installer could warn the users that this application is capable of doing that, and that’s it.

It’s not so funny to make some installers and try to bypass this stupid restriction! Adobe even doesn’t allow to distribute just the files and make what how I want things to work, I have to use their installer. (As I know useing shu-player is not as much legal, but I might end up useing it anyway)

So I could ask: How to solve it? I don’t know what are the plans in Adobe with AIR, but I cannot see bright future for it if Adobe will ignore what people need. If there will be other choice I will surely go that way. I don’t like to be in this kind of situation (be a hostage), when I am fully in a hands of some company (who doesnt really care).

Uff.

Ps: If you agree with me, don’t just pray for some change. Let them know what you want!

There is a property called modalWindowClass that if you set, it will be used as a shield.(Actually the graphics object of this class will be cleared even that time, there is a little mess in the code in the PopUpManagerImpl class.)

I did a little repair, with this it works beter for me. I avoid to draw to the graphics object when the class is set. I added a condition:

466
467
468
469
470
471

if(!modalWindowClass){    
	        g.clear();
	        g.beginFill(c, 100);
	        g.drawRect(s.x, s.y, s.width, s.height);
	        g.endFill();
        }

The application code:

466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300" applicationComplete="init();">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
 
			import mx.managers.PopUpManagerImpl;
 
			import mx.core.mx_internal;
 
			use namespace mx_internal;
 
			private function init():void{
				var impl:PopUpManagerImpl=PopUpManagerImpl.getInstance() as PopUpManagerImpl;
				impl.modalWindowClass=CustomPopUpShield;
			}
 
			private function openPopUp():void{
 
 
				Alert.show("hehe","Try pop up");
			}
 
		]]>
	</mx:Script>
 
	<mx:Style>
		/*With these settings I practically turned off the default behavior. The transparency have to be 1, 
		because it will be the transparency for the whole shield.(with 0 we would not see anything)*/
		Application{
			horizontalGap:"0";
    		modalTransparency:"1";
    		modalTransparencyBlur:"0";
    		modalTransparencyColor:"#ffffff";
    		modalTransparencyDuration:"0";
		}
 
	</mx:Style>
 
	<mx:HBox horizontalGap="0" height="100%">
		<mx:VBox width="60" height="100%">
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
			<mx:Button label="Click!" click="openPopUp()"/>
		</mx:VBox>
		<mx:Canvas width="240" height="100%" backgroundColor="#0000ff">
			<mx:Button x="102" y="47" label="click" click="openPopUp()"/>
 
		</mx:Canvas>
	</mx:HBox>
</mx:Application>

The custom pop up shield class (The target is to make the buttons unclickable of course, but over the left side I don’t want to see visible shield. Not the whole screen will be filled with color. I made the shield animated too):

466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517

package
{
	import flash.display.Sprite;
	import flash.filters.BlurFilter;
	import flash.filters.GlowFilter;
	import flash.geom.Rectangle;
 
	import gs.TweenMax;
	import gs.easing.Back;
 
	import mx.core.Application;
 
	public class CustomPopUpShield extends Sprite
	{
 
		private var _base:Sprite;//this will be an invisible shape over the whole screen to prevent clicking on the buttons
		private var _animatingContent:Sprite;//this will animate
 
		override public function CustomPopUpShield(){
			super();
 
			var sc:Rectangle=Application.application.screen;
 
			_base=new Sprite();
			_base.graphics.beginFill(0x000000,0);
			_base.graphics.drawRect(0,0,sc.width,sc.height);
			_base.graphics.endFill();
			this.addChild(_base);
 
			_animatingContent=new Sprite();
			_animatingContent.graphics.beginFill(0x00ff00,0.4);
			_animatingContent.graphics.drawRect(60,0,sc.width,sc.height);
			_animatingContent.graphics.endFill();
			this.addChild(_animatingContent);
 
			var filter:GlowFilter=new GlowFilter(4,4);
			_animatingContent.filters=new Array(filter);
 
			activate();
		}
 
		private function activate():void{
			TweenMax.to(_animatingContent, 1, {tint:0x000000,yoyo:true,ease:Back.easeIn});
		} 
 
 
 
 
 
 
	}
}

The result:

Everything is hardcoded in this example. You may need to manage resizing etc. But you can make this way your very own pop up shield, whatever you want.

Source for this project: CustomModalWindowBackground.zip

In this post I will show why would you have to change the flex classes code.
I had hard times with this problem. When both scrollers appear in a container in the same time, a white rectangle is created in the corner. First I thought it’s something with the scroller (that’t why I didn’t find the solution). But I’ve found it! And I have to ask a question: Why is that the the rectangle have to be white, and it is hardcoded there?

The code from the Container class:

4525
4526
4527
4528
4529
4530
4531
4532
4533
4534
4535
4536
4537
4538
4539
4540
4541
4542
4543
4544

        // Create or destroy the whiteBox.
        // If both scrollBars are active, there's an empty space
        // between the two scrollBars in the lower right corner.
        // The whiteBox fills that space, so that the container's
        // children aren't visible when they scroll underneath.
        if (horizontalScrollBar && verticalScrollBar)
        {
            if (!whiteBox)
            {
                whiteBox = new FlexShape();
                whiteBox.name = "whiteBox";
 
                var g:Graphics = whiteBox.graphics;
                g.beginFill(0xFFFFFF);
                g.drawRect(0, 0, verticalScrollBar.minWidth, horizontalScrollBar.minHeight);
                g.endFill()
 
                rawChildren.addChild(whiteBox);
            }
        }

The default container with the white rectangle:

So let’s make an quick change. I will just put there a public property so I can change it easily (I can set the color just on creation, to make a better solution use styles).

I added

 public var whiteRectangleColor:uint=0xFFFFFF;

and made this change

g.beginFill(whiteRectangleColor);

in the Container Class. So now every class that extends container can change that whiteRectangle color, and actually the default behavior was not changed.

So the code that uses this is:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300">
 
	<mx:Panel width="100%" height="100%">
		<mx:Canvas width="100%" height="100%" backgroundColor="#00ff00" whiteRectangleColor="#00ff00">
			<mx:Canvas width="400" height="400" backgroundColor="#0000ff">
				<mx:Text x="10" y="10" text="Did you ever tried to find out why is that white rectangle there in the down-right corner? (Between the scrollers)" 
					width="253" height="236" fontSize="25"/>
 
			</mx:Canvas> 
		</mx:Canvas>
	</mx:Panel>
</mx:Application>

And the result: a super good looking green rectangle (with grey it would look better, atually i could change the size it looks a little big for me):

Actually this is not the best example for such a hack. You cannot control the drawing the container, because it’s a private funtion. It will use white color, but the whiteBox variable is protected, so there is access to it. (You have to clear the graphics for it, and draw other rectangle with different color after the rectangle was created. And you have to do it every time, when both the scrollers appear, because the rectangle is always destroyed if not needed. So this hack is an easier solution, but not the only for this problem)

Source for this project: TheWhiteRectangleAttacks.zip

So as I see it: It will take the values first rather as a ratio. If you set 3 columns like 30,60,10 pixels width, it will result in columns as 30,60,10 percent of the width of the datagrid.
But when you start to resize it the ratio will disapear. After some resizes of the datagrid you will see that the columns will likely to be the same size at the end. (I think that this is a bug.)

Code: (I used the same code for all the examples but I switched off my solution to get the default behavior when it was needed)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:gridOld="mx.controls.*"
	xmlns:gridNew="*" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="500" height="220">
 
    <mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>
 
	<mx:Script>
		<![CDATA[
			[Bindable]
			private var startSize:Number=300;//change this startSize, and recompile to see the changes
		]]>
	</mx:Script>
 
	<mx:Style>
		DataGrid {
			   alternatingItemColors: #006699, #006655;
			}
	</mx:Style>
  		<mx:Label text="datagrid startSize: {startSize}"/>
        <gridNew:EditedDatagrid headerHeight="0" showHeaders="false"  id="dg" width="{startSize}" height="104" rowCount="5" dataProvider="{employees}">
            <gridNew:columns>
                <mx:DataGridColumn dataField="name" headerText="Name" width="30"/> 
                <mx:DataGridColumn dataField="phone" headerText="Phone" width="60"/>
                <mx:DataGridColumn dataField="email" headerText="Email" width="10"/>
            </gridNew:columns>
        </gridNew:EditedDatagrid >
        <mx:Text text="Change the size with this slider 10-20 times to see what I am talking about." height="33" width="231"/>
        <mx:HSlider value="{startSize}" width="400" minimum="{this.width/2}" maximum="{this.width}" snapInterval="1" enabled="true" change="dg.width=slider.value;" id="slider" liveDragging="true"/>
 
</mx:Application>

The first build with datagrid width 300.(default datagrid behavior, watch the ratios on creation and after resizes)

The first build with datagrid width 500. (default datagrid behavior, watch the ratios on creation and after resizes)

You can see the ratios changing! And the columns surely don’t have the good widths.

I decided to make the ratio always the same.(You could fix the column sizes too, but you may not see some columns if the datagrid is small. Fixing size is not the best thing to do.)

I don’t know if it can be done other way but it works this way for sure.
One function „calculateColumnSizes” was made protected in the DataGrid class (this is the original DataGrid made by Adobe) so EditedDatagrid class can override it.

Code: (EditedDatagrid overrides the calculateColumnSizes function. In the DataGrid I just changed private to protected. You can download all the files.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

package
{
	import mx.controls.DataGrid;
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.core.mx_internal;
 
	use namespace mx_internal;
 
	public class EditedDatagrid extends DataGrid{ 
		public function EditedDatagrid()
		{
			super();
		}
 
	    private var firstRun:Boolean=true;
	    private var ratioSizes:Array;
 
	    protected override function calculateColumnSizes():void{
	    	var  n:int = visibleColumns.length;
	    	var i:int=0;
 
	       if(firstRun){
		       ratioSizes=new Array(n);
		       for (i = 0; i < n; i++){
		         	ratioSizes[i]=(visibleColumns[i] as DataGridColumn).width;//remenber the widths before calling calculateColumnSizes
		       }
		       firstRun=false;
	       }
	       /*it was needed to call this even if the result is overriden, 
	         it inicializes some things that would be missed*/       
	       super.calculateColumnSizes();
 
	       //return; /*uncomment this "return" to see the default behaviour*/
 
	    	//setting the previous ratios for the columns
 
	    	var newWidths:Array=new Array(n);
	    	var dataGridWidth:Number=this.width;
	    	var ratioNum:Number=sum(ratioSizes);
	    	var ratioDivider:Number=0;
 
	    	if(ratioNum==0){  
				throw new Error("cannot divide with 0");
	    	}else{
	    		ratioDivider=100/ratioNum;	    		
	    	}
 
			for(i = 0; i < n-1; i++){//we dont care about the last column now (so n-1)
	            (visibleColumns[i] as DataGridColumn).setWidth((ratioSizes[i]*ratioDivider/100)*dataGridWidth);//the previouse width will be set to it
	            }
 
			/* The calculation is this strange because the ratios could be 40+70+90=200 % (youdont have to make the sum 100%)
			 * ratioDivider=0.5;  (100/200  100% is the max) 
			 * so for the first column ((0.5*40)/100)*width  (/100 to make it percent)			  
			 */			
			return;   	
	    }
 
		private function sum(arr:Array):Number{
			var sum:Number=0;
			for(var i:int=0;i<arr.length;i++){
				if(arr[i] is Number){
					sum+=arr[i];
				}else{
					throw new Error("something is really wrong!");
				}
			}
 
			return sum;
		}	
	}
}

The first build with datagrid width 300.(changed datagrid behavior)

The first build with datagrid width 500.(changed datagrid behavior)

Now the ratios doesn’t change!

There are usually problems when you try to hack a component, always think, how big change you need. Maybe it would be better to make your own component. This hacking works well if there is just one little problem. (It can take some time to play/debug with the code, to find the function that makes the problems.)

If you know other way to fix the column size/ratio send a comment.

I used this just as an example, how to deal with such a problems, when you have to override private functions. On the next post I will show when this won’t be enough to succeed.

Source for this project: OverrideComponents.zip

The better way is to copy the frameworks class to your source folder, and make changes in that. This way you can make changes to some really base classes too,not just what you want to extend. You will need to maintain the package structure, without that you would never know which version you actually use. Flex builder will prefer the classes from your source folder over the swc of the framework. So the one in your source folder will be used to compile this project. I think it may slow down the compilation, not sure. If later the sdk will be changed and these classes will not be updated, it can be a problem.

The flex framework source folder on my pc is in (we want to the skd-3): c:\Program Files\Adobe\Flex Builder3\sdks\3.0.0\frameworks\projects\framework\src\mx\

There is a notice in that folder:
All of the files contained in this directory and any subdirectories are considered “SDK Source Files” under the terms of the end user license agreement that accompanies this product. Please consult such end user license agreement for details about your rights with respect to such files.

So I don’t really know if I am allowed to make these changes, but I will show you how to do them. (It would be a lot easier to write: You cannot use these files! You can use these files!) Sometimes you will need to use them.

There can be several files included in the class, you will have to add those to the source folder too. Many classes include some code, you will need them to compile the code.

There can be problems with the Flex builder, it may keep delete the next lines of code if Flex is set to manage imports. Check the original files where these lines have to go.

import mx.core.mx_internal;
use namespace mx_internal;

Just be aware of this.

Now you can start!
The best thing to do is just to change private functions to protected ones. There is not big risk. Then you can extend the class and override the functions. Whatever you want. Theoretically you should do always this, make changes to the base class to allow more changes, but use it’s extended version in your code. Problems can for example that the function should be called after something else was set, and you will mess things up. This can happen with variables too, the components will be in inconsistent state after you set some variable by your own way. It’s your own risk.

Sometimes this is not enough, you have to make change in the code. It’s really important to not change the default behavior of the class. If you change something it will affect it’s every instance. Other developers in your team (working on the same project) may not really like what you did. Because you probably use SVN everybody will have the same changed version of the basic class, with the same changed functionality. So be avare what are you doing! You can put some conditions, to not change the default behavior. Make sure the functionality didn’t change! The changed class may be copied, and used in different project by different people, they will go mad.

I decided to divide this post. To Datagrid ColumnWidht with fixed ratio! and The white rectangle attacks!

sources for those posts:
OverrideComponents.zip
TheWhiteRectangleAttacks.zip

Lets see the original swf what we will use for embedding. There is a Ball symbol with a SimpleRectangle child. The Ball resizes on mouse over/out events. The rectangle rotates and changes color on mouse over/out events.

This is the original swf (which has the ball on the stage) file symbolSource.swf:

All the actions are done in the classes.

If you try to embed the symbol (Ball) you will lost all the functionality:

 
		<!--[CDATA[
 
			[Embed(source="assets/symbolSource.swf", symbol='Ball')]-->

And the result functionality, nothing:

And now try the other way, embed the whole SWF file:

 
		<!--[CDATA[
 
			[Embed(source="assets/symbolSource.swf")]-->

And everything works:

The trick is that even if you embed the whole SWF, when you make new instance you have to wait while it is loaded, and after you can get the classes from the SWF file.

The whole source:EmbeddingSymbol.rar

The most annoying thing is that it seems that there are more actual solutions (so the problem can be very frustrating).

There are more solutions to this problem like:
http://kb.adobe.com/selfservice/viewContent.do?externalId=758bf58b&sliceId=2

I found that my problem was the same as in this site:
http://therush.wordpress.com/2008/03/11/resolved-flex-builder-3-debugger-stopped-working/

But it just doesnt make any sense. The solution for them was to change the debugger from “localhost” to 127.0.0.1. (Right click on the flash player and choose debugger) But why? For me setting the new IP (127.0.0.1) for the debugger worked. They are the same I thought.
So I checked the hosts file. I opened:

C:\WINDOWS\system32\drivers\etc\hosts

And it had this in it:
::1 localhost //this is the problem (not sure that ::1 was the IP but it doesnt matter)
127.0.0.1 localhost

So I had 2 localhost defined (one with some strange thing)

I remoded the bad IP (::1) so just the
127.0.0.1 localhost
remain and of course it works now!

I don’t have any idea how (and why) could it happen, that Flex (or any other program) wrote that stupid thing in my host file (I checked for viruses but I didn’t find anything…)

I try sum the possible solutions here:

1. Restart Flex
2. check you host file

If you have some other ideas I will sum them up here.