AngularJS: Simple Animation

Here's a simple example on ho to create an animation using AngularJS.

* Click here to access the demo that I have created on 'JSFiddle'.
^ Click here to test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code
  editor.

Flex: Different FillMode of the Spark Image Component

The Flex Spark Image component has this interesting property known as 'FillMode' and this should give you a rough idea what each individual type of 'FillMOde' represents.

Source Code for the main application - 'SimpleImageFillMode.mxml'

<?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:mx="library://ns.adobe.com/flex/mx"
      width="100%"
      height="100%"
      backgroundColor="#CDCDCD">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   [Embed(source="assets/avatar.png")]
   [Bindable]
   public var imgClass:Class;
  ]]>
 </fx:Script>
 <s:VGroup width="100%"
     height="100%" 
     horizontalAlign="center" 
     verticalAlign="middle">
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Original Image"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="450">
    <s:Image source="{imgClass}" 
       width="100" 
       height="100"/>
   </s:HGroup>
  </s:HGroup>
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup width="150"/>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Fill Mode: clip"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Fill Mode: repeat"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Fill Mode: scale"/>
   </s:HGroup>
  </s:HGroup>
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Size (80 * 80)"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="80"
       height="80"
       fillMode="clip"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="80"
       height="80"
       fillMode="repeat"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="80"
       height="80"
       fillMode="scale"/>
   </s:HGroup>
  </s:HGroup>
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Size (100 * 150)"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="100"
       height="150"
       fillMode="clip"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="100"
       height="150"
       fillMode="repeat"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="100"
       height="150"
       fillMode="scale"/>
   </s:HGroup>
  </s:HGroup>
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Size (150 * 100)"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="100"
       fillMode="clip"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="100"
       fillMode="repeat"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="100"
       fillMode="scale"/>
   </s:HGroup>
  </s:HGroup>
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Size (150 * 150)"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="150" 
       fillMode="clip"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="150"
       fillMode="repeat"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="150"
       fillMode="scale"/>
   </s:HGroup>
  </s:HGroup>
 </s:VGroup>
</s:Application>

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

Flex: Hiding the border on a side of a Group...

In flex 4, the style 'boderSides' has been taken out, but there's another way to hide the border of a selected side of a box away. And here's a simple example to give you a rough idea on how to get it done. :)

Source Code for the main application - 'SimpleSelectedBorderExample.mxml'

<?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:mx="library://ns.adobe.com/flex/mx" 
      creationComplete="creationCompleteEvent(event)" xmlns:Container="Container.*">
 <fx:Script>
  <![CDATA[
   import Container.SimpleGroup;
   
   import mx.events.FlexEvent;
   
   protected function creationCompleteEvent(e:FlexEvent):void
   {
    var tempBox:SimpleGroup;
    for(var i:int = 0; i < 8; i ++){
     for(var j:int = 0; j < 8; j ++){
      tempBox = new SimpleGroup();
      tempBox.x = i * 50 - 0.5;
      tempBox.y = j * 50 - 0.5;
      container.addElement(tempBox);
     } 
    }
   }
  ]]>
 </fx:Script>
 <s:BorderContainer width="100%"
        height="100%" 
        borderVisible="false">
  <s:layout>
   <s:VerticalLayout verticalAlign="middle"
         horizontalAlign="center"/>
  </s:layout>
  <!-- All the boxes will appear inside this container -->
  <s:BorderContainer width="400"
         height="400"
         id="container"
         borderVisible="false"/>
 </s:BorderContainer>      
</s:Application>

Source Code for the Group Class that we are using to repeat the pattern - 'SimpleGroup.mxml'

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx" 
   width="50" 
   height="50" 
   creationComplete="creationCompleteEvent(event)">
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   //Are we going to show the left border?
   [Bindable]
   private var _boolLeft:Boolean = false;
   
   //Are we going to show the right border?
   [Bindable]
   private var _boolRight:Boolean = false;
   
   //Are we going to show the top border?
   [Bindable]
   private var _boolTop:Boolean = false;
   
   //Are we going to show the bottom border?
   [Bindable]
   private var _boolBottom:Boolean = false;
   
   //-1 = border is outside the box
   //-0.5 = border is in the middle
   //0 = border is inside the box
   [Bindable]
   private var _typeValue:Number = 0;
   
   //Thickness of the border
   [Bindable]
   private var _borderThickness:Number = 0;
   
   //Color of the border
   [Bindable]
   private var _borderColor:uint = 0x333333;
   
   protected function creationCompleteEvent(e:FlexEvent):void
   {
    //Randomized the showing and hiding of the borders 
    var rand:Number = Math.round(Math.random());
    if(rand == 1){
     _boolLeft = true;
    }
    rand = Math.round(Math.random());
    if(rand == 1){
     _boolRight = true;
    }
    rand = Math.round(Math.random());
    if(rand == 1){
     _boolTop = true;
    }
    rand = Math.round(Math.random());
    if(rand == 1){
     _boolBottom = true;
    }
    
    _typeValue = Math.round(Math.random() * 2);
    if(_typeValue == 1){
     _typeValue = -0.5;
    }else if(_typeValue == 2){
     _typeValue = -1;
    }
    
    _borderThickness = Math.round(Math.random() * 2) + 1;
    
    _typeValue = _typeValue * _borderThickness;
   }
  ]]>
 </fx:Script>
 <!-- Left -->
 <s:Line left="{_typeValue}"
   top="{_typeValue}"
   bottom="{_typeValue}" 
   visible="{_boolLeft}">
  <s:stroke>
   <s:SolidColorStroke weight="{_borderThickness}"
         color="{_borderColor}"/>
  </s:stroke>
 </s:Line>
 <!-- Bottom -->
 <s:Line left="{_typeValue}"
   right="{_typeValue}"
   bottom="{_typeValue}"
   visible="{_boolBottom}">
  <s:stroke>
   <s:SolidColorStroke weight="{_borderThickness}"
        color="{_borderColor}"/>
  </s:stroke>
 </s:Line>
 <!-- Right -->
 <s:Line right="{_typeValue}"
   top="{_typeValue}"
   bottom="{_typeValue}"
   visible="{_boolRight}">
  <s:stroke>
   <s:SolidColorStroke weight="{_borderThickness}"
        color="{_borderColor}"/>
  </s:stroke>
 </s:Line>
 <!-- Top -->
 <s:Line left="{_typeValue}"
   right="{_typeValue}"
   top="{_typeValue}"
   visible="{_boolTop}">
  <s:stroke>
   <s:SolidColorStroke weight="{_borderThickness}"
        color="{_borderColor}"/>
  </s:stroke>
 </s:Line>
</s:Group>

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

Disappointed with the last one... I hope that the next one will be better...

Went all the way to Expo for the 'PC Show 2014' and this is probably the first time I left a 'PC/IT Show' empty handed... (Not even a single Memory Card...=.=""") Anyway, though this is damn early, but...

Image taken from 'COMEX 2014' website. And this time round, the location is far more friendlier. It's held at 'Suntec City', which means that you don't need to travel all the way to 'Expo' to purchase all your IT gadgets. By the way, by accessing the official website of 'COMEX 2014', you can also gain access to information like, 'How to get there', 'The floor plan', 'On-site and Online Contests', etc...

Venue:

• Date: 28 - 31 August 2014
• Opening Hours: 12pm to 9pm
• Venue: Suntec Singapore International Convention & Exhibition Centre
              Levels 4 & 6

* Click here to find out more about 'COMEX 2014'.
^ Click here for the Facebook page of 'COMEX 2014' site.
~ Click here for the unofficial 'COMEX 2014' site.
  (You can gain access to all the pricelist of all the Exhibitor @ 'COMEX 2014'.
  Although it isn't available yet but it will be populated with lots of price lists and
  brochure as the 'show' approaches.)