Responsive Design

If you have being following trends in recent times, you would have noticed that web application design and development has taken a turn for the best. With the push of mobile development taking the front seat, design and development of web applications will never be the same again. This is true because there are more users of mobile devices than there are of the traditional desktops (thanks to Apple, Samsung, Blackberry, Motorola, Sony Ericsson etc.). So the case today is, if you want to reach more people, you have to build applications that would scale across different platforms.

Now you may wonder, how could this be done effectively and painlessly without having to build different versions of the same web application for example for all available devices? The answer is, Responsive Web Design. If you have not heard about this, then you must be living under a rock somewhere in Nevrasla (fictitious). Its like the next buzz word in the web development and design world (I have a feeling it has been around for a while but it seems it just caught some fire, when iPhone and iPads began to cause a stare!). Responsive design has joined its buzz word contemporaries in the software development community–interaction design, reflective design, intuitive design etc. It is referred to as Adaptive design by some folks.

In my own words,

Responsive design is the ability for a system to be flexible enough to adjust itself to suit the behavior of actors and the space it occupies within the system, without sacrificing important information.

I hope that made sense. Okay, if it didn’t, then here is another definition that is more specific to the web design and development plethora. Not by me this time.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market. Coutersy of Kayla Knight

Well, that just about sums it up. I would not say anymore, why not read up the article by Kayla herself here. Let me know what you think about this interesting development in our evolving world of web design and development.

Steve Jobs and his legacy

It seems everyone has written something about Steve Jobs that is very outstanding and I must say, the man deserves all the accolades. However, it beats me to note that people seem to get this super recognition status after they die. I suspect it has something to do with what you did when they were alive.
All of a sudden, Steve’s witty sayings have sprung out all over the internet like Aristotle. Or maybe it I wasn’t looking in the right direction. Because, you don’t have search hard this time to find Steve’s quotes. They are everywhere. He spoke outstanding words that should make us rethink the way we approach everything. And when I say everything, I mean everything!

I have read so many articles on Steve Jobs lately, I can almost say I know the man personally. But its really interesting though, that in his short 56 years, he left a legacy that changed our lives and world forever. The way we look at design, the way we look at technology, the way we look at style, the way we look at products, the way we give our services, the way we derive satisfaction, the things we should expect, the way we look at ourselves etc. He redefined what we commonly called user experience. He made us see the possibilities that we only longed for but seemed no one was giving it to us. He brought satisfaction to the bare. Whenever you picked up any Apple product, you can almost bet you have bought a perfect product. You try to look for flaws but its hard to find any. There might be but its not something you can’t live without. Thats the Apple trademark. Excellence.
Steve took Apple from bankruptcy to become the most valuable company in the world, beating ExxonMobil in its wake. This is a testimony to the incredible effort of Steve Jobs and the Apple family. He made us to understand how important it is to meet a need that people silently craved for. Something they will pay anything for but no one was providing it.

My First Experience

I remember my days in the University, everytime I picked up a text and I came across sections that spoke about how to do things on Macintosh Computers, most times, I would skip it. I wondered whether people used the Macintosh at all. Well maybe in the US or other parts of the world but here in my country Nigeria, I doubted that. People had not even appreciated using the PC except for Typing Documents and the likes. At the time, I was doing just fine with my PC and that was that.

When I got my first job, I was employed as a programmer and that was my first date with the Apple iMac. ‘My God! what was this?’ I looked at this sleek looking piece of Monitor sitting on the shiny green glass table. I became a little skeptical at first. After looking at it for sometime, it looked like a cute dump terminal. There was no CPU sitting anywhere around. So I wondered, does this make any sense because this Terminal looks sleek? A cute dump terminal is nothing but dump, period. Dump terminals my foot! But I saw my boss work up to the “Monitor”, switched it on and the thing just started up like a regular PC. Pretty sweet start up screen with all this matte looking icons sitting at the bottom of the screen. I was fascinated by this “Monitor” to say the least. He (my boss) then asked someone to pull another one from its pack and they laid it on the table. He switched that on as well and viola, this thing just came to life. The screen gave me goose pimples. It was so amazing. I know I might sound a little old-fashioned but that was three years ago. After that first encounter, the rest is history…

Today, I have a MacBook Pro and I tell you, it is one of the most valuable assets in my possession. Not because of its price, but because of its worth. I have never worried about virus attack for its three years as my baby. Now that’s one edge over my now-museum-looking PC (I will keep the make of this PC anonymous not to course any issue) that I have had to use almost half of its hard drive space for Antivirus. This baby (my MacBook Pro) just never goes down. The ease of use, the ruggedness and the sheer total user experience is something else. Quality in design and attention to detail has become a signatory we associate we Apple computers and other Apple devices today. Thanks to Steve Jobs.

Steve was/is a genius

Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.

Indeed, Steve found what he loved and settled. With the advent of the Apple iPad, the world has not remained the same again. Most times when a new product like the Tablets is presented to consumers, there will be some difficulties of use, changes that needs to be made and all that. When the iPad came, it just sat on top on the everyone’s purchase list. It became the next thing not just because it is natural for humans to crave for something new but the quality of what this new invention met. Don’t forget, the iPhones has raised the bar on smartphones already.

I don’t intend to write a whole lengthy article on my respect for Steve Jobs, his legacy and the Apply Family but I have to say this, Steve taught us how to raise the bar whether as consumers or as producers. The i prefix on Apple products was originally meant to denote Internet, but I must say, Steve made it sound like Ingenious, Incredible, Invincible to me. The iPhones, the iPads, the iMacs, the MacBooks Pros, the MacBook Air and all other products we have come to love would always be a benchmark for devices of its like for a very long time, until someone beats this legacy which I doubt. Rather, people would build on it.

With much love to Steve Jobs’ family and the entire Apple family, I celebrate the life of a man we have all come to love and are grateful he left us a legacy that the next generation would be proud of. We would never build products without user experience and satisfaction as number one factor again. We would never stop or settle until we get the best of the best. We would never give up until we produce inventions that defies the norm. Never again.

Thanks Steve. RIP.

If you are interested, you may want to read up the last two articles I read; Steve Jobs, a designer at heart and The Foolish Road of Steve Jobs and how it can work for you.

Django, the best Python web-framework

I got started with Django about 5 months ago and its been a relief. The whole framework is built with ease of use in mind. I mean you can get a working web application, from authentication to authorization, from the administrative console to a full web application in one short and quick swoop. Its amazing!
The caveat though is it being a Python Web framework i.e you must be a Python developer to use Django. For me, coming from a little bit of Java, then Flex, and PHP development, learning Python took me two months when I also started to use Django. I can’t call myself a Python Guru yet, but with Django I’m learning very fast. If you are a software developer and you want to wet your appetite, give Python and Django a try, I can bet, you would not be disappointed.

They usually say not everything that glitters is gold, but I would dare say that everything Python and Django is gold. Yeah! I have not lost my love for Flex though. So for those of you who are saying, what happened to my love for flex? I’m still a Flex developer even though I have not opened my Flex builder in a while. I hope when I do, I do not have to run off my desk because I have spiders, roaches and ants running all over my Flex Builder 🙂

But at the moment I am firing on all cylinder with Django and I don’t see an end of the road with this framework yet. Phew!

Before I bore you, let me just give you the path to find peace of mind as a web developer as I have found. Why not see it for yourself; http://docs.djangoproject.com/en/1.3/

I have been able to improve on some Django utilities I came up with in the process of my web development. I would be posting them as soon as I can. Still have to clean up loads of stuff.

Cheers guys,

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.

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

 

 

Creating a pager for the Datagrid Component in Flex

I had to page a flex datagrid component, so I came up with a decent fix. I hope this helps someone. Please so not hesistate to let me know if it helped and any changes you think I could include.

Code after the jump.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” creationComplete=”initApp()”>
<!– Created by Oluwaseun Ladeinde, 13, May 2010.

A pager bundled with the datagrid component.

You can replace the next and previous buttons with images. I have used the text input to get the row size from the user, you can decide your design. Just copy and paste this code and it should work if there are no issues with the quotes–>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;

[Bindable]
private var myColl:ArrayCollection;
private var innerprovider:Array =[];
private var splitted:Array =[];

private var pageCount:int=0;
private var pageSize:int=0;
private var stopMove:Boolean=false;
private var rowSize:int;

/**
* Say an XML reference, may be a result form a query
* or some xml file somewhere.
*/
public var xmlporvider:XML =
<result>
<data>
<profit>5000</profit>
<expenses>20000</expenses>
<month>January</month>
</data>
<data>
<profit>1000</profit>
<expenses>22000</expenses>
<month>Febuary</month>
</data>
<data>
<profit>9000</profit>
<expenses>17500</expenses>
<month>March</month>
</data>
<data>
<profit>6000</profit>
<expenses>26000</expenses>
<month>April</month>
</data>
<data>
<profit>5000</profit>
<expenses>24950</expenses>
<month>May</month>
</data>
<data>
<profit>2590</profit>
<expenses>9040</expenses>
<month>June</month>
</data>
<data>
<profit>4600</profit>
<expenses>18500</expenses>
<month>July</month>
</data>
<data>
<profit>3500</profit>
<expenses>22500</expenses>
<month>August</month>
</data>
<data>
<profit>7850</profit>
<expenses>21000</expenses>
<month>September</month>
</data>
<data>
<profit>7000</profit>
<expenses>20000</expenses>
<month>October</month>
</data>
<data>
<profit>6250</profit>
<expenses>25000</expenses>
<month>November</month>
</data>
<data>
<profit>7000</profit>
<expenses>28000</expenses>
<month>December</month>
</data>
</result>;

//// this function takes the xml and convert it to an array
//// i had to do this because of the [aging support I want to implement
/// this was also needed for a project I was working on where I needed to use an arraycollection
/// instead of XML
private function initApp():void
{
var provider:Array = [];
var list:XMLList = xmlporvider.data;

for(var w:int=0; w<list.length(); ++w)
{
provider.push({node:list[w], children:list[w].children()});
}

for(var q:int=0; q<provider.length; ++q)
{
var newObject:Object = {};
for(var win:int=0; win<provider[q].children.length(); ++win)
{
var element:XML = provider[q].children[win];
var nodeName:String = element.localName();//children[q].localName();
var nodeValue:String = element.text()[0];
newObject[nodeName] = nodeValue;
}

this.innerprovider.push(newObject);
}
}

private function config():void
{
var enteredValue:* = rowcount.text;
if(enteredValue<=0 || int(enteredValue)==0)
{
Alert.show(“Please enter a valid number greater than 0”);
}
else
{
var currentPager:int=0;
this.rowSize = int(rowcount.text);
this.pageSize = innerprovider.length/this.rowSize;
if((innerprovider.length % this.rowSize)>0)
{
++this.pageSize;
}

if(this.splitted.length>0)
this.splitted = [];

var endIndex:int = this.rowSize;
for(var startIndex:int=0; startIndex<innerprovider.length;)
{
var newArray:Array = innerprovider.slice(startIndex, endIndex);
startIndex = startIndex + this.rowSize;
endIndex = startIndex + this.rowSize;
this.splitted.push(newArray);
}

if(this.pageCount>0)
this.pageCount=0;
this.myColl = new ArrayCollection(this.splitted[this.pageCount]);
this.grid.dataProvider = this.myColl;
this.grid.rowCount = this.rowSize;
setPagerText();
}

}

private function next():void
{
trace(“next page”);
if(this.pageCount < this.pageSize-1)
{
++this.pageCount;
this.myColl = new ArrayCollection(this.splitted[this.pageCount]);
this.grid.dataProvider = this.myColl;
this.grid.rowCount = this.rowSize;

setPagerText();
}

/* if(this.pageCount == this.pageSize-1)
{
nextBtn.enabled = false;
}
else
{
nextBtn.enabled = true;
}     */
}

public function setPagerText():void
{
var pageNumber:int=this.pageCount+1;
pager.text = pageNumber + “/” + this.pageSize;
}

private function prev():void
{
trace(“previous page”);
if(this.pageCount>0)
{
–this.pageCount;
this.myColl = new ArrayCollection(this.splitted[this.pageCount]);
this.grid.dataProvider = this.myColl;
this.grid.rowCount = this.rowSize;

setPagerText();
}

/* if(this.pageCount == this.pageSize-1)
{
prevBtn.enabled = false;
}
else
{
prevBtn.enabled = true;
}     */
}

]]>
</mx:Script>
<mx:Form>
<mx:FormItem label=”Enter Row Size and Hit Enter:”>
<mx:TextInput id=”rowcount” text=”” enter=”config()”/>
</mx:FormItem>
</mx:Form>

<mx:HBox width=”400″>
<mx:Button id=”prevBtn” label=”prev” click=”prev()”/>
<mx:Label id=”pager” text=”0″/>
<mx:Button id=”nextBtn” label=”next” click=”next()”/>
<mx:Spacer width=”100%”/>
</mx:HBox>
<mx:DataGrid id=”grid” width=”400″/>
</mx:Application>