Mime Apple’s Mac OS X shutdown dialog

I needed to notify the user whenever there was an update and he need to take an action either allow the system run its course and restart itself using a timer and user activity. I have always loved the shut dialog for Apple’s Mac . So I came up with this Mac OS X shut down style dialog window. I just did a rush job but i think it suffices for now. Please note I did not style or skin it for time constraints.  I would try and make it look a little more eye-candy when time allows me. In the mean time, I’d like you to use this and send me updates if you make any. Sorry I have tried to use the WordPress HTML processor so the blog looks more readable but I guess I did not succeed as it is. If you have a good hang of it, please feel free to send me a comment on how to do the better. I guess its an issue with all the open close tags. Anyway, the code’s below. Copy from the <?xml version=”1.0″ encoding=”utf-8″?> true to the </mx:TitleWindow> as the RestartDialog.mxml file and paste it in your flex actionscript editor as a component. Then the rest of the code should be easy to understand.

Code after the jump

RestartDialog.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:TitleWindow xmlns=”com.orangepoint.widgets.*”
xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
width=”450″ height=”150″
creationComplete=”init()”
showCloseButton=”false”/>;

<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;

/**
* Countdown Timer
*/
private var countdownTimer:Timer;

/**
* Countdown Number
*/
[Bindable]
private var countdownNumber:Number = 60;

/**
* Initialise and start the timer with a delay of 1millisecond that runs 60
* times equivalent to the 60seconds a minute countdown
*/
private function init():void
{
countdownTimer = new Timer(1000, 60);
countdownTimer.addEventListener(TimerEvent.TIMER, onTimer);
countdownTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);
countdownTimer.start();
}

/**
* Close the window/dialog handler
*/
private function closeWindow():void
{
PopUpManager.removePopUp(this);
}

private function restart():void
{
// code to restart the application
}

/**
* Stops the count down and closes the dialog
*/
private function cancel():void
{
countdownTimer.stop();
closeWindow();
}

/**
* Reduces the countdown by 1 as the timer ‘ticks’
*/
private function onTimer(e:TimerEvent):void
{
countdownNumber--;
}

/**
* When timer comepletes, the dialog is removed from the screen
*/
private function onComplete(e:TimerEvent):void
{
closeWindow();
}

]]>
</mx:Script>
<mx:Label id=”messageTitle”
text=”Are you sure you want to restart the Application now?” fontStyle=”normal”
fontWeight=”bold”
fontSize=”14″
fontFamily=”Tahoma”/>
<mx:Label id=”message”
text=”If you do nothing, the system will shut down automatcally in {countdownNumber} seconds”/>
<mx:ControlBar width=”100%” height=”100%”>
<mx:Button label=”Restart” click=”restart()”/>
<mx:Button label=”Cancel” click=”cancel()”/>
</mx:ControlBar>
</mx:TitleWindow>

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

NOTE: You now include this in your application likecode below say on an event trigger (button click for example)

private function showRestartDialog(event:MouseEvent):void
{
var restart:RestartDialog = PopUpManager.createPopUp(this, RestartDialog, true) as RestartDialog;
restart.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, closePopUpWindow);
PopUpManager.centerPopUp(restart);

}

/** removes the dialog whenever the user click outside the dialog.
* You can take this away if you do not need it by commenting out the
"restart.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, closePopUpWindow);" line in the showRestartDialog() method above */

private function closePopUpWindow(evt:Event):void
{
PopUpManager.removePopUp(restart);
}

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

Feel free to let me know your take on this.

Advertisements

Blinking Image in Flex

I posted a blog Blinking Label some days ago so I decided to make it a little more interesting. I figured if you could do it for a Label, you could also do it for an Image.

I wanted to create an alert/warning utility either as an image or a label that blinks to catch the user’s attention so I decided to come up with the blinking image.

Code after the jump:

BlinkImage.as

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Image xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; creationComplete=”init()”>

<mx:Script>
<![CDATA[

import mx.effects.Parallel;
import mx.effects.Fade;

private var fadeTimer:Timer = new Timer(700);
private var count:int = 0;
private var _relay:Number;

private function init():void
{
fadeTimer.addEventListener(TimerEvent.TIMER, timerFunction);
fadeTimer.addEventListener(TimerEvent.TIMER_COMPLETE, relayRelapse);
fadeTimer.start();
}

public function startBlink():void
{
activeplay.end();
activeplay.play();
}

private function timerFunction(event:TimerEvent):void
{
startBlink();
count++;
trace(“ok count is ” + count + ” for capturing…”);
}

private function relayRelapse(event:TimerEvent):void
{
trace(“ok reached completion”);
var relayTime:Timer = new Timer(relay, 1);
relayTime.addEventListener(TimerEvent.TIMER, notreprocess);
relayTime.addEventListener(TimerEvent.TIMER_COMPLETE,restartFadeTimer);
}

private function notreprocess(event:TimerEvent):void
{
trace(“ok reading something….relay”);
}

private function restartFadeTimer(event:TimerEvent):void
{
fadeTimer.stop();
fadeTimer.start();
}

public function get relay():Number
{
return _relay;
}

public function set relay(value:Number):void
{
_relay = value;
}
]]>
</mx:Script>

<mx:filters>
<mx:BlurFilter blurX=”0″ blurY=”0″/>
</mx:filters>

<mx:Parallel id=”activeplay”>
<mx:Fade id=”fadeIn” alphaFrom=”0.0″ alphaTo=”1.0″ target=”{this}” duration=”250″/>
<mx:Fade id=”fadeOut” alphaFrom=”1.0″ alphaTo=”0.0″ target=”{this}” duration=”250″/>
</mx:Parallel>

</mx:Image>

Now for its usage, all you have to do is add it to your application like any flex component. You would need to specify the image source, so I would use an image source with the assumption that you have your images in your source directory like this assets/images/blink.png. Note that any image png, gif, jpg would do the job. Though with some slight variations.

<widgets:BlinkingImage  id=”blinkeer” source=”assets/images/blink.png” relay=”5000″/>

So I hope this helps somebody. Just note that I have not tested the memory usage of the component and I would like anyone who could help me with that  to send me his/her findings to this blog. I hardly have time for doing this test these days as my hands are full.

Blinking Label in Flex

I was working on a project and I had to come up with a BlinkingLabel; label/text that blinks giving the user some alert/messaging signal. After trying the internet to no avail, I had to deep my head in the toolbox and cook something up. I hope this helps someone. I would also love any bug, improvement and the likes posted to this blog.

Code after jump::

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Label xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; creationComplete=”init()”>

<mx:Script>
<![CDATA[
import mx.effects.Parallel;
import mx.effects.Fade;

private var fadeTimer:Timer = new Timer(700);

private function init():void
{    
fadeTimer.addEventListener(TimerEvent.TIMER, timerFunction);
fadeTimer.start();
}

public function startBlink():void
{
activeplay.end();
activeplay.play();
}

private function timerFunction(event:TimerEvent):void
{
startBlink();
}

]]>
</mx:Script>

<mx:filters>
<mx:BlurFilter blurX=”0″ blurY=”0″/>
</mx:filters>

<mx:Parallel id=”activeplay”>
<mx:Fade id=”fadeIn” alphaFrom=”0.0″ alphaTo=”1.0″ target=”{this}” duration=”250″/>
<mx:Fade id=”fadeOut” alphaFrom=”1.0″ alphaTo=”0.0″ target=”{this}” duration=”250″/>
</mx:Parallel>

</mx:Label>

So to use this just add it into your application, say, <widgets:BlinkingLabel text=”I am blinking”/> and that should do it.

Note that the name of the component as I named it is BlinkingLabel as you must have guessed.

 

Enjoy