Tuesday, November 25, 2014

Javascript: Cloning an object...

In Case, you need to do a complete clone of an object in Javascript and you want the original to remain unaffected, then you probably can give this method a go. :)


* 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.

Sunday, November 16, 2014

Towards the end of 2014...

Less than 8 more weeks to the end of 2014. And it's time to start the countdown for the last IT Show for the year 2014...

Image taken from 'SITEX 2014' website.

The venue for the upcoming event is pretty far, but it's
worth travelling all the way down. As compared to the
venue at 'Suntec Convention & Exhibition Centre', I prefer
the huge spacious space at Singapore Expo. Most importantly,
I can roam around the place freely and quickly, whhich is a
very big (+). :)
Venue:
  • Date: 27 - 30 November 2014
  • Opening Hours: 11am to 9pm
  • Venue: Singapore Expo Convention & Exhibition Centre
                 Halls 5 & 6

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

Sunday, November 9, 2014

Javascript: Some useful sites that helps.

Frankly speaking, I don't have a fantastic memory and in case, you don't have a fantastic memory, you probably can use the following sites to search for useful examples and references. Even though these sites doesn't provide an example for all everything, but it's a great place to start searching.

W3Schools
This has been around for quite some time.
Not only it covers 'Javascript', it also covers coding environment
like 'PHP', 'SQL', 'ASP.NET', etc... Though most of the time it
covers only the basic stuff, but it's a great place to get you
started.

JavaScripture
This covers JavaScript only. But with the number of examples that
was provided on the site itself to demonstrate the usage of the
different types of JavaScript syntax, makes this a pretty good
place to start searching.

Sunday, October 26, 2014

Apache Ant: Pushing your Ant script to a whole new level...

If you have been using Apache Ant quite a bit, you will soon realize that it can be pretty annoying at times. You couldn't open up and read a file, you couldn't create Arrays, etc... Therefore there's actually a way to work around it. You can actually use Javascript + Java inside the Ant script environment. And on top of that you can actually manipulate simple basic Ant variables in the Javascript + Java environment.

 <macrodef name="getIndexHtmlContents">
  <sequential>      
   <script language="javascript">
    <![CDATA[
     //Import the necessary Java classes
     importClass(java.io.File);
     importClass(java.io.FileReader);
     importClass(java.io.BufferedReader);

     //We will be reading the value from the Ant Project Property 'filenameProp'
     var filenameProp = GWR.getProperty("filenameProp");

     //Then we will be using BufferedReader and FileReader to read the contents of the file
     var reader = new BufferedReader(new FileReader(new File(filenameProp)));

     //Next we will loop through all the contents of the file and store it in a temporary variable
     var sCurrentLine;
     var strEverything = "";
     while ((sCurrentLine = reader.readLine()) != null) {
      strEverything += sCurrentLine;
     }

     //We will printout the contents of the file/temporary variable on the ant console output
     println(strEverything);

     //Writing the value of the temporary variable and saing it in the Ant Project Property 'fileContents'
     GWR.setProperty("fileContents", strEverything);
    ]]>
   </script>
  </sequential>
 </macrodef>
Though you have specified that you will be writing some script in 'Javascript' syntax, it actually allows Java codes to be written inside that <script> block too.

* Click here to find out more about 'Apache Ant'.

Friday, October 17, 2014

Linux: Mass find and replace a folder of files

In the Linux environment, it is pretty easy to loop through a particular type of files to find and replace a particular string using shell script. I hope this helps.

The following will give you an idea how to get it done.
You need to replace all the {value} with the corresponding values.
#!/bin/bash

varReplace={string_to_replace}
find ./{the_folder}/ -name \*.{file_extension} -type f -print0 | while read -d $'\0' file; do
    echo "Processing $file"
    sed -i 's/{string_to_look_for}/'$varReplace'/g' $file
done
The following example will go through all the files with extension (.js)
in the folder 'output', find the string '{my_version}' and replace it with
the string 'v1.0.122'.
#!/bin/bash

varReplace=v1.0.122
find ./output/ -name \*.js -type f -print0 | while read -d $'\0' file; do
    echo "Processing $file"
    sed -i 's/{my_version}/'$varReplace'/g' $file
done

Friday, October 10, 2014

Simple Javascript Timer Implementation

Well basically this is a post meant for myself. I keep forgetting how to get this done. Basically this is a simple implementation of a Timer in Javascript.


* 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.

Friday, October 3, 2014

AngularJS: Input type number and maxlength fix

Well, there might be situations that you need to limit the number of characters that you are allowing the user to enter in a numerical text field. Therefore, here's a fix for 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.

Sunday, September 28, 2014

AngularJS: ng-repeat with conditioning styling

Well, in order to reduce the amount of work, you might be using quite a bit of 'ng-repeat' in your views/html files that uses angularJS. However, there might be a need to style the individual items differently. Therefore...


* 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.

Saturday, September 20, 2014

Problem opening an image with alpha transparent channel

There might be situations that you might be opening up a png file that was created by someone else and you have to edit it. So here's the question, how can you workaround the problem?

You have a png like the above.

Outcome when you open it using Photoshop.
There's a strange black border around the image.

So here's a workaround for it.

First click here to open up 'Photo editor online - Pixlr.com'.

Reopen and save the image as a new file.

This would be the new file that I have created using "Pixlr.com".

Now, when you open it using Photoshop, you won't be getting anymore
unnecessary black color border. :D Case closed. Happy Days...

* Click here for the official website of 'Pixlr.com'.

Friday, July 11, 2014

Devices in the same network...

Well, though you might not be doing this frequently, but there might be instance where you might need to scan through the whole network looking for the IP Address of a particular device.

I have tried entering the command 'arp -a' in command prompt, but
the results ain't as good as the following...

(Logo taken from 'SoftPerfect Research' website.)

'SoftPerfect Network Scanner'
As compared to the command 'arp -a', this produces a much more
detail results and though there's the troublesome step that requires
you to enter the range of ip that you are scanning, but the results
are far more cleaner and better than the 'arp -a' command. :)

Screengrabs of the software 'SoftPerfect Network Scanner'

* Click here to download the software 'SoftPerfect Network Scanner'.
^ Click here to find out more about 'SoftPerfect'.

Saturday, July 5, 2014

AngularJS: Simple Debugging...

In case you are given an Angular JS based project and you are supposed to do some debugging work, here's a way to get you started with some simple message logging.


* 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.

Sunday, June 29, 2014

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.

Saturday, June 21, 2014

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.

Sunday, June 15, 2014

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.

Wednesday, June 11, 2014

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.)

Thursday, May 29, 2014

AngularJS: IE and inline dynamic style...

We saw this interesting bug with AngularJS and inline style with IE browsers. And we finally managed to find a workaround for this problem. And the solution requires ng-style and a separate function. :D


* 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.

Friday, May 23, 2014

Flex: Showing and Hiding the Origins of a chart

There might be cases where you wanted to show or replace the vertical and horizontal origin's of the chart with a different type of line. Here's a simple example to demo the hiding and showing of the origin of the chart..

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    creationComplete="completeHandler(event)">
 <mx:Script>
  <![CDATA[
   import mx.charts.HitData;
   import mx.charts.series.LineSeries;
   import mx.collections.ArrayCollection;
   import mx.collections.Sort;
   import mx.collections.SortField;
   import mx.events.FlexEvent;
   import mx.events.ListEvent;
   import mx.formatters.DateFormatter;
   
   //Records used in the chart
   [Bindable]
   private var myData:XML = 
    <records>
     <record>
      <x>-7.81</x>
      <y>-4.98</y>
     </record>
     <record>
      <x>-2.84</x>
      <y>-4.62</y>
     </record>
     <record>
      <x>-8.66</x>
      <y>2.52</y>
     </record>
     <record>
      <x>3.56</x>
      <y>6.86</y>
     </record>
     <record>
      <x>-9.54</x>
      <y>-8.05</y>
     </record>
     <record>
      <x>7.48</x>
      <y>0.37</y>
     </record>
     <record>
      <x>9.2</x>
      <y>9.5</y>
     </record>
     <record>
      <x>9.32</x>
      <y>-1.59</y>
     </record>
     <record>
      <x>1.77</x>
      <y>-0.86</y>
     </record>
     <record>
      <x>-8.61</x>
      <y>-1.75</y>
     </record>
    </records>;
   
   private var dateCollection:ArrayCollection;
   
   protected function completeHandler(event:FlexEvent):void
   {
    // Parsing the xml data into ArrayCollection
    var objArray:ArrayCollection = new ArrayCollection();
    var tempObj:Object;
    for(var i:int = 0; i < myData.record.length(); i ++)
    {
     tempObj = new Object();
     tempObj.x = myData.record[i].x;
     tempObj.y = myData.record[i].y;
     objArray.addItem(tempObj);
    }
    
    // Create the new series and set its properties.
    var localSeries:LineSeries = new LineSeries();
    localSeries.dataProvider = objArray;
    localSeries.yField = "y";
    localSeries.xField = "x";
    
    // Back up the current series on the chart.
    var currentSeries:Array = mainChart.series;
    // Add the new series to the current Array of series.
    currentSeries.push(localSeries);
    // Add the new Array of series to the chart.
    mainChart.series = currentSeries;
   }
   
   //We are customizing the datatip / tool tip of the
   //chart data.
   public function myDataTipFunction(e:HitData):String {
    var s:String = "";
    s += "x: " + e.item.x + "<br>";
    s += "y: " + e.item.y;
    return s;
   }
  ]]>
 </mx:Script>
 <mx:VBox verticalGap="5" width="100%" height="100%" 
    verticalAlign="middle">
  <mx:HBox width="100%" horizontalAlign="center">
   <mx:LineChart id="mainChart" 
        showDataTips="true" 
        width="95%"
        dataTipFunction="myDataTipFunction">
    <mx:Stroke weight="2" 
         alpha="1" 
         color="#00FF00" 
         id="horiOriginStroke"/>
    <mx:Stroke weight="2" 
         alpha="1" 
         color="#FF0000" 
         id="vertOriginStroke"/>
    <mx:backgroundElements>
     <mx:GridLines direction="both"
          horizontalShowOrigin="{chkHori.selected}"
          horizontalOriginStroke="{horiOriginStroke}" 
          verticalShowOrigin="{chkVert.selected}"
          verticalOriginStroke="{vertOriginStroke}"/>
    </mx:backgroundElements>
   </mx:LineChart>
  </mx:HBox>
  <mx:HBox width="100%"
     horizontalAlign="center">
   <mx:CheckBox id="chkHori" 
       selected="true"       
       label="Show Horizontal Origin"/>
   <mx:CheckBox id="chkVert" 
       selected="true" 
       label="Show Vertical Origin"/>   
  </mx:HBox>
 </mx:VBox>
</mx:Application>
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

Friday, May 16, 2014

AngularJS: 2D Array binding

Here's a simple example to demo 2D array binding with 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.

Saturday, May 10, 2014

Playing with Google Search :)

Google search isn't just a search tool. It also comes with...

'Calculator'
Click here to give the 'Calculator' a go.

'Unit Converter'
Click here to give the 'Unit Converter' a go.

Click here for more interesting search results in Google.

Friday, April 25, 2014

HTML: Post your data into a popup window

Rather than posting the data to a new page, you might need have to post the data to a popup. Therefore, this would help you to get a rough idea on how to do that. (Things get pretty interesting when you learn new stuff everyday. :D)

Source code of the main html file - index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Form</title>
<script language="javascript" type="text/javascript">
  function submitForm(formName){
 var popupWin = window.open("",formName,"status,height=540,width=500,resizable=yes,scrollbars=yes");
 popupWin.focus();
  }
</script>
</head>
<body>
<form action="formResults.php" method="post" name="myForm" target="popupWin" onsubmit="javascript:submitForm(this.target);">
Name:<br /><input name="name" type="text" size="50" maxlength="50" /><br />
Address:<br /><input name="address" type="text" size="50"/><br />
<input name="submit" type="submit" value="Submit the form data to a popup"/>
</form>
</body>
</html>

Here's the simple form that I would be posting the data to - formResults.php
Your name is: 
<br />
<?php
  echo $_REQUEST["name"]
?>
<br />
<br />
Your address is: 
<br />
<?php
  echo $_REQUEST["address"]
?>
* Click here for the demo shown in this post.

Sunday, April 20, 2014

I have more time to prepare for this...

This would be second IT show of the year 2014 and we are 7 weeks away from it. And since there's a lot of time left, I can begin my simple game of comparison and decide what are the new stuff that I should be getting. :P

Image taken from 'PC Show 2014' website.

By the way, by accessing the official website of 'PC Show 2014', you can
also gain access to information like, 'How to get there', 'The floor plan',
'On-site and Online Contests', etc...

Venue:
  • Date: 5 - 8 June 2014
  • Opening Hours: 12pm to 9pm
  • Location: Singapore Expo Halls 5 & 6

* Click here to find out more about 'PC Show 2014'.
^ Click here for the unofficial 'PC Show 2014' site.
  (You can gain access to all the pricelist of all the Exhibitor @ 'PC Show 2014'.
  Although currently there isn't a lot but the list will gradually increase once
  the 'show' starts.)

Thursday, April 10, 2014

AngularJS: Select element + filter function

If you are going to use a <select> element in your website that is going to build on top of AngularJS, and at the same time if you ended up using a mixture of normal <option> element and <select> element with ng-repeat, rather than using ng-show to hide some of the elements, it might be better to use a filter function.


* 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.

Sunday, April 6, 2014

Checking for Unicode Characters using Regular Expressions

When there's a need to validate a mixture of strings and unicode characters, it's kinda irritating when you have to throw in all the crazy conditioning statements. Luckily now there's Regular Expressions that can help us to make our job much more easier for example...

* Click here to view a demo of unicode characters matching using Regular Expression.
^ Click here for the list of ascii characters and their corresponding entities.

Saturday, March 29, 2014

AngularJS: Moment + timezone example

At my current workplace, they were using this javascript class to handle the time for different time zones, therefore I have created a simple example to showcase this class. :D

Main HTML file - index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Moment Timezone</title>
</head>
<!-- stitch this with the module declare in Javascript -->
<body ng-app="myApp">
  <div ng-controller="SelectCtrl">The time in
    <select ng-model="selectedItem" ng-options="item.label for item in myData  | orderBy:'label'" ng-change="updateTime()"></select> is {{formattedTime}}.
  </div>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/controller.js"></script>
  <script type="text/javascript" src="js/moment.min.js"></script>
  <script type="text/javascript" src="js/moment-timezone.min.js"></script>
  <script type="text/javascript" src="js/moment-timezone-data.js"></script>
</body>
</html>

Javascript file that stores the respective time zone data - moment-timezone-data.js
//The data of the time zone of the various time zone.
tzData = {
    "zones": {
        "Asia/Singapore": [
            "6:55:25 - LMT 1901_0_1 6:55:25",
            "6:55:25 - SMT 1905_5_1 6:55:25",
            "7 - MALT 1933_0_1 7",
            "7:20 - MALST 1936_0_1 7:20",
            "7:20 - MALT 1941_8_1 7:20",
            "7:30 - MALT 1942_1_16 7:30",
            "9 - JST 1945_8_12 9",
            "7:30 - MALT 1965_7_9 7:30",
            "7:30 - SGT 1982_0_1 7:30",
            "8 - SGT"
        ],
        "Australia/Sydney": [
            "10:4:52 - LMT 1895_1 10:4:52",
            "10 Aus EST 1971 10",
            "10 AN EST"
        ],
        "EST5EDT": [
            "-5 US E%sT"
        ],
        "Europe/Amsterdam": [
            "0:19:32 - LMT 1835 0:19:32",
            "0:19:32 Neth %s 1937_6_1 1:19:32",
            "0:20 Neth NE%sT 1940_4_16_0 0:20",
            "1 C-Eur CE%sT 1945_3_2_2 1",
            "1 Neth CE%sT 1977 1",
            "1 EU CE%sT"
        ],
        "Europe/London": [
            "-0:1:15 - LMT 1847_11_1_0 -0:1:15",
            "0 GB-Eire %s 1968_9_27 1",
            "1 - BST 1971_9_31_2",
            "0 GB-Eire %s 1996",
            "0 EU GMT/BST"
        ]
    },
    "rules": {
        "Aus": [
            "1917 1917 0 1 7 0:1 0 1",
            "1917 1917 2 25 7 2 0 0",
            "1942 1942 0 1 7 2 0 1",
            "1942 1942 2 29 7 2 0 0",
            "1942 1942 8 27 7 2 0 1",
            "1943 1944 2 0 8 2 0 0",
            "1943 1943 9 3 7 2 0 1"
        ],
        "AN": [
            "1971 1985 9 0 8 2 2 1",
            "1972 1972 1 27 7 2 2 0",
            "1973 1981 2 1 0 2 2 0",
            "1982 1982 3 1 0 2 2 0",
            "1983 1985 2 1 0 2 2 0",
            "1986 1989 2 15 0 2 2 0",
            "1986 1986 9 19 7 2 2 1",
            "1987 1999 9 0 8 2 2 1",
            "1990 1995 2 1 0 2 2 0",
            "1996 2005 2 0 8 2 2 0",
            "2000 2000 7 0 8 2 2 1",
            "2001 2007 9 0 8 2 2 1",
            "2006 2006 3 1 0 2 2 0",
            "2007 2007 2 0 8 2 2 0",
            "2008 9999 3 1 0 2 2 0",
            "2008 9999 9 1 0 2 2 1"
        ],
        "US": [
            "1918 1919 2 0 8 2 0 1 D",
            "1918 1919 9 0 8 2 0 0 S",
            "1942 1942 1 9 7 2 0 1 W",
            "1945 1945 7 14 7 23 1 1 P",
            "1945 1945 8 30 7 2 0 0 S",
            "1967 2006 9 0 8 2 0 0 S",
            "1967 1973 3 0 8 2 0 1 D",
            "1974 1974 0 6 7 2 0 1 D",
            "1975 1975 1 23 7 2 0 1 D",
            "1976 1986 3 0 8 2 0 1 D",
            "1987 2006 3 1 0 2 0 1 D",
            "2007 9999 2 8 0 2 0 1 D",
            "2007 9999 10 1 0 2 0 0 S"
        ],
        "Neth": [
            "1916 1916 4 1 7 0 0 1 NST",
            "1916 1916 9 1 7 0 0 0 AMT",
            "1917 1917 3 16 7 2 2 1 NST",
            "1917 1917 8 17 7 2 2 0 AMT",
            "1918 1921 3 1 1 2 2 1 NST",
            "1918 1921 8 1 8 2 2 0 AMT",
            "1922 1922 2 0 8 2 2 1 NST",
            "1922 1936 9 2 0 2 2 0 AMT",
            "1923 1923 5 1 5 2 2 1 NST",
            "1924 1924 2 0 8 2 2 1 NST",
            "1925 1925 5 1 5 2 2 1 NST",
            "1926 1931 4 15 7 2 2 1 NST",
            "1932 1932 4 22 7 2 2 1 NST",
            "1933 1936 4 15 7 2 2 1 NST",
            "1937 1937 4 22 7 2 2 1 NST",
            "1937 1937 6 1 7 0 0 1 S",
            "1937 1939 9 2 0 2 2 0",
            "1938 1939 4 15 7 2 2 1 S",
            "1945 1945 3 2 7 2 2 1 S",
            "1945 1945 8 16 7 2 2 0"
        ],
        "C-Eur": [
            "1916 1916 3 30 7 23 0 1 S",
            "1916 1916 9 1 7 1 0 0",
            "1917 1918 3 15 1 2 2 1 S",
            "1917 1918 8 15 1 2 2 0",
            "1940 1940 3 1 7 2 2 1 S",
            "1942 1942 10 2 7 2 2 0",
            "1943 1943 2 29 7 2 2 1 S",
            "1943 1943 9 4 7 2 2 0",
            "1944 1945 3 1 1 2 2 1 S",
            "1944 1944 9 2 7 2 2 0",
            "1945 1945 8 16 7 2 2 0",
            "1977 1980 3 1 0 2 2 1 S",
            "1977 1977 8 0 8 2 2 0",
            "1978 1978 9 1 7 2 2 0",
            "1979 1995 8 0 8 2 2 0",
            "1981 9999 2 0 8 2 2 1 S",
            "1996 9999 9 0 8 2 2 0"
        ],
        "EU": [
            "1977 1980 3 1 0 1 1 1 S",
            "1977 1977 8 0 8 1 1 0",
            "1978 1978 9 1 7 1 1 0",
            "1979 1995 8 0 8 1 1 0",
            "1981 9999 2 0 8 1 1 1 S",
            "1996 9999 9 0 8 1 1 0"
        ],
        "GB-Eire": [
            "1916 1916 4 21 7 2 2 1 BST",
            "1916 1916 9 1 7 2 2 0 GMT",
            "1917 1917 3 8 7 2 2 1 BST",
            "1917 1917 8 17 7 2 2 0 GMT",
            "1918 1918 2 24 7 2 2 1 BST",
            "1918 1918 8 30 7 2 2 0 GMT",
            "1919 1919 2 30 7 2 2 1 BST",
            "1919 1919 8 29 7 2 2 0 GMT",
            "1920 1920 2 28 7 2 2 1 BST",
            "1920 1920 9 25 7 2 2 0 GMT",
            "1921 1921 3 3 7 2 2 1 BST",
            "1921 1921 9 3 7 2 2 0 GMT",
            "1922 1922 2 26 7 2 2 1 BST",
            "1922 1922 9 8 7 2 2 0 GMT",
            "1923 1923 3 16 0 2 2 1 BST",
            "1923 1924 8 16 0 2 2 0 GMT",
            "1924 1924 3 9 0 2 2 1 BST",
            "1925 1926 3 16 0 2 2 1 BST",
            "1925 1938 9 2 0 2 2 0 GMT",
            "1927 1927 3 9 0 2 2 1 BST",
            "1928 1929 3 16 0 2 2 1 BST",
            "1930 1930 3 9 0 2 2 1 BST",
            "1931 1932 3 16 0 2 2 1 BST",
            "1933 1933 3 9 0 2 2 1 BST",
            "1934 1934 3 16 0 2 2 1 BST",
            "1935 1935 3 9 0 2 2 1 BST",
            "1936 1937 3 16 0 2 2 1 BST",
            "1938 1938 3 9 0 2 2 1 BST",
            "1939 1939 3 16 0 2 2 1 BST",
            "1939 1939 10 16 0 2 2 0 GMT",
            "1940 1940 1 23 0 2 2 1 BST",
            "1941 1941 4 2 0 1 2 2 BDST",
            "1941 1943 7 9 0 1 2 1 BST",
            "1942 1944 3 2 0 1 2 2 BDST",
            "1944 1944 8 16 0 1 2 1 BST",
            "1945 1945 3 2 1 1 2 2 BDST",
            "1945 1945 6 9 0 1 2 1 BST",
            "1945 1946 9 2 0 2 2 0 GMT",
            "1946 1946 3 9 0 2 2 1 BST",
            "1947 1947 2 16 7 2 2 1 BST",
            "1947 1947 3 13 7 1 2 2 BDST",
            "1947 1947 7 10 7 1 2 1 BST",
            "1947 1947 10 2 7 2 2 0 GMT",
            "1948 1948 2 14 7 2 2 1 BST",
            "1948 1948 9 31 7 2 2 0 GMT",
            "1949 1949 3 3 7 2 2 1 BST",
            "1949 1949 9 30 7 2 2 0 GMT",
            "1950 1952 3 14 0 2 2 1 BST",
            "1950 1952 9 21 0 2 2 0 GMT",
            "1953 1953 3 16 0 2 2 1 BST",
            "1953 1960 9 2 0 2 2 0 GMT",
            "1954 1954 3 9 0 2 2 1 BST",
            "1955 1956 3 16 0 2 2 1 BST",
            "1957 1957 3 9 0 2 2 1 BST",
            "1958 1959 3 16 0 2 2 1 BST",
            "1960 1960 3 9 0 2 2 1 BST",
            "1961 1963 2 0 8 2 2 1 BST",
            "1961 1968 9 23 0 2 2 0 GMT",
            "1964 1967 2 19 0 2 2 1 BST",
            "1968 1968 1 18 7 2 2 1 BST",
            "1972 1980 2 16 0 2 2 1 BST",
            "1972 1980 9 23 0 2 2 0 GMT",
            "1981 1995 2 0 8 1 1 1 BST",
            "1981 1989 9 23 0 1 1 0 GMT",
            "1990 1995 9 22 0 1 1 0 GMT"
        ]
    },
    "links": {}
};

moment.tz.add(tzData);

Javascript file that stores our AngularJS Application - app.js
// declare a module
var myApp = this.angular.module('myApp', ['myAppControllers']);
Javascript file that stores our Angularjs Controllers - controller.js
// declare a controller
angular.module('myAppControllers', []).
  controller('SelectCtrl', function ($scope) {
    //the selections for the time zone drop down
    $scope.myData = [{
      label: "Singapore",
      value: "Asia/Singapore"
    }, {
      label: "Sydney",
      value: "Australia/Sydney"
    }, {
      label: "EST5EDT",
      value: "EST5EDT"
    }, {
      label: "Amsterdam",
      value: "Europe/Amsterdam"
    }, {
      label: "London",
      value: "Europe/London"
    }];

 //Preselect the first item in the array
    $scope.selectedItem = $scope.myData[0];
    $scope.formattedTime = "";
    $scope.timer;
 //This function will pick up the selected item from the
 //drop down and display the corresponding time of the
 //time zone
    $scope.updateTime = function () {
   var tempDate;
   var strTz = $scope.selectedItem.value;
      tempDate = moment.tz(strTz);
      $scope.formattedTime = tempDate.format('MMMM Do YYYY, h:mm:ss a');
   $scope.$apply();
    }
    $scope.updateTime();
 //We will run the function updateTime every second
    setInterval(function () {
      $scope.updateTime()
    }, 1000);
  });
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.
~ Click here to find out more about 'AngularJS'.
* Click here to find out more about 'moment.js'.
^ Click here to find out more about 'Moment Timezone'.
~ Click here to generate the data for the respective time zone for 'Moment Timezone'.

Saturday, March 22, 2014

Flex 4: Accessing the renderers of a DataGroup

There might be situations where you might be creating a list of items in a horizontal or vertical manner. And you might be using a <DataGroup> to get things done. But after you have successfully created a list, you might have to disable 1 of the items, but how are you going to access the individual items of the <DataGroup>? I hope that this post would give an idea on how do access the individual item of a <DataGroup>.

Source Code for the main application - 'SimpleDataGroup.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%" 
      creationComplete="creationCompleteEvent(event)">
 <fx:Script>
  <![CDATA[
   import events.RendererEvent;
   
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   
   import renderers.HorizontalRenderer;
   import renderers.VerticalRenderer;
   
   private var dataArray:Array = [{
    label: 'Item 1',
    value: 'A'
   },{
    label: 'Item 2',
    value: 'B'
   },{
    label: 'Item 3',
    value: 'C'
   },{
    label: 'Item 4',
    value: 'D'
   },{
    label: 'Item 5',
    value: 'E'
   },{
    label: 'Item 6',
    value: 'F'
   },{
    label: 'Item 7',
    value: 'G'
   },{
    label: 'Item 8',
    value: 'H'
   }];
   
   //Our Data
   [Bindable]
   private var dataCollection:ArrayCollection = 
    new ArrayCollection(dataArray);
   
   //This will be our simple result text string.
   [Bindable]
   private var resultStr:String = "";
   
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    this.addEventListener(RendererEvent.RENDERER_CLICK_EVENT,
     clickEvent);
   }
   
   //Upon clicking on one of the buttons, we will loop through
   //all the buttons in the DataGroup and change their state
   //accordingly.
   private function clickEvent(event:RendererEvent):void
   {
    var tempHRenderer:HorizontalRenderer;
    var tempVRenderer:VerticalRenderer;
    for(var i:int = 0; i < hData.numElements; i ++)
    {
     tempHRenderer = 
      HorizontalRenderer(hData.getElementAt(i));
     if(tempHRenderer.data.label == event.label)
     {
      tempHRenderer.currentState = "selected";
     }else{
      tempHRenderer.currentState = "init";
     }
    }
    for(i = 0; i < vData.numElements; i ++)
    {
     tempVRenderer = 
      VerticalRenderer(vData.getElementAt(i));
     if(tempVRenderer.data.label == event.label)
     {
      tempVRenderer.currentState = "click";
      resultStr = "You have click on the button " +
       "labeled '" + tempVRenderer.data.label + 
       "' with a value of '" + 
       tempVRenderer.data.value + "'";
     }else{
      tempVRenderer.currentState = "norm";
     } 
    }
   }
  ]]>
 </fx:Script>
 <s:VGroup width="100%" 
     height="100%" 
     horizontalAlign="center" 
     verticalAlign="middle">
  <s:Label text="Try clicking on a button."/>
  <s:DataGroup width="100%" 
      id="hData"
      dataProvider="{dataCollection}"
      itemRenderer="renderers.HorizontalRenderer">
   <s:layout>
    <s:HorizontalLayout gap="0" 
         verticalAlign="middle" 
         horizontalAlign="center"/>
   </s:layout>
  </s:DataGroup>
  <s:DataGroup width="100%"
      id="vData"
      dataProvider="{dataCollection}"
      itemRenderer="renderers.VerticalRenderer">
   <s:layout>
    <s:VerticalLayout gap="0"
          verticalAlign="middle" 
          horizontalAlign="center"/>
   </s:layout>
  </s:DataGroup>
  <s:Label text="{resultStr}"/>
 </s:VGroup>
</s:Application>

And here's the custom event class for the renderers - 'RendererEvent.as'
package events
{
 import flash.events.Event;
 
 public class RendererEvent extends Event
 {
  //We will dispatch this event when we 
  //click on a renderer.
  public static const RENDERER_CLICK_EVENT:String = 
   "RenderClickEvent";
  
  //Used to stores the label 
  public var label:String = "";
  
  public function RendererEvent
   (type:String, 
    bubbles:Boolean=false, 
    cancelable:Boolean=false, 
    _label:String="")
  {
   super(type, bubbles, cancelable);
   label = _label;
  }
  
  override public function clone():Event
  {
   return new RendererEvent(type, 
    false, 
    false, 
    label);
  }
 }
}

And here's the horizontal item renderer - 'HorizontalRenderer.mxml'
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    autoDrawBackground="true" 
    mouseChildren="false" 
    click="clickHandler(event)" 
    buttonMode="true">
 
 <fx:Script>
  <![CDATA[
   import events.RendererEvent;
   
   //When we click on this Renderer, 
   //we will dispatch an event.
   protected function clickHandler(event:MouseEvent):void
   {
    this.dispatchEvent(
     new RendererEvent(
      RendererEvent.RENDERER_CLICK_EVENT, 
      true, 
      false, 
      this.data.label));
   }
  ]]>
 </fx:Script>
 <s:states>
  <s:State name="init"/>
  <s:State name="selected"/>
 </s:states>
 <s:BorderContainer height="30" 
        width="80">
  <s:backgroundFill.init>
   <s:LinearGradient rotation="90">
    <s:GradientEntry color="0xFFFFFF"/>
    <s:GradientEntry color="0xCCCCCC"/>
   </s:LinearGradient>
  </s:backgroundFill.init>
  <s:backgroundFill.selected>
   <s:LinearGradient rotation="90">
    <s:GradientEntry color="0xFFFFCC"/>
    <s:GradientEntry color="0xCCFF99"/>
   </s:LinearGradient>
  </s:backgroundFill.selected>
  <s:borderStroke> 
   <mx:SolidColorStroke 
    color="black" 
    weight="1"/> 
  </s:borderStroke>
  <s:VGroup width="100%" 
      height="100%"
      horizontalAlign="center"
      verticalAlign="middle">
   <s:Label text="{data.label}"
      color="0x000000"/>
  </s:VGroup>
 </s:BorderContainer>
</s:ItemRenderer>

And here's the vertical item renderer - 'VerticalRenderer.mxml'
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    autoDrawBackground="true" 
    mouseChildren="false" 
    click="clickHandler(event)" 
    buttonMode="true">
 
 <fx:Script>
  <![CDATA[
   import events.RendererEvent;
   
   //When we click on this Renderer, 
   //we will dispatch an event.
   protected function clickHandler(event:MouseEvent):void
   {
    this.dispatchEvent(
     new RendererEvent(
      RendererEvent.RENDERER_CLICK_EVENT, 
      true, 
      false, 
      this.data.label));
   }
  ]]>
 </fx:Script>
 <s:states>
  <s:State name="norm"/>
  <s:State name="click"/>
 </s:states>
 <s:BorderContainer height="30" 
        width="80">
  <s:backgroundFill.norm>
   <s:LinearGradient rotation="90">
    <s:GradientEntry color="0xCCCCCC"/>
    <s:GradientEntry color="0x666666"/>
   </s:LinearGradient>
  </s:backgroundFill.norm>
  <s:backgroundFill.click>
   <s:LinearGradient rotation="90">
    <s:GradientEntry color="0xCCFFFF"/>
    <s:GradientEntry color="0x00FFCC"/>
   </s:LinearGradient>
  </s:backgroundFill.click>
  <s:borderStroke> 
   <mx:SolidColorStroke 
    color="black" 
    weight="1"/> 
  </s:borderStroke>
  <s:VGroup width="100%" 
      height="100%" 
      horizontalAlign="center" 
      verticalAlign="middle">
   <s:Label text="{data.label}"
      color.norm="0xFFFFFF"
      color.click="0x000000"/>
  </s:VGroup>
 </s:BorderContainer>
</s:ItemRenderer>
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

Wednesday, March 12, 2014

AngularJS: Select + Option in Angular

If you are going to use a <select> element in your website that is going to build on top of AngularJS, rather than using a mixture of <select> and <option> element, it would be best if you use a combination of <select> and the attribute 'ng-options'. As for the reason why, you can take a look at the demo below, and take a look at it again across browsers like 'Internet Explorer 8/9', 'Mozilla Firefox', etc...


* 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.

Tuesday, March 4, 2014

AngularJS: Alternate Background Row Styles

When you have a table with fixed contents, it is pretty easy for you to apply styling that applies different set of styles on alternate table rows. However, things get more and more tricky when you are hiding and showing some of the rows. Therefore, here's a simple example that I have created using 'AngularJS' that helps you to overcome the problem of alternate background styles + hidden rows.


* 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.

Tuesday, February 25, 2014

The first for the year 2014...

I suddenly remembered that it's 2+ days away to the first IT Show for the year 2014. In fact I'm pretty surprise that my Facebook wall isn't flooded with all the ads on the upcoming IT Show located at Marina Bay Sands. Therefore if you are thinking of getting a new gadget or if you are thinking of changing your existing internet connection plan, you can consider making your way down to 'IT Show 2014'.

Image taken from 'IT Show 2014' website.

By the way, by accessing the official website of 'IT Show 2014', you can
also gain access to information like, 'How to get there', 'The floor plan',
'On-site and Online Contests', etc...

Venue:
  • Date: 27 Feb - 2 Mar 2014
  • Opening Hours: 12pm to 9pm
  • Location: Marina Bay Sands Level 1 & B2

* Click here to find out more about 'IT Show 2014'.
^ Click here for the unofficial 'IT Show 2014' site.
  (You can gain access to all the pricelist of all the Exhibitor @ 'IT Show 2014'.
  Although currently there isn't a lot but the list will gradually increase over
  the next few days.)

Monday, February 24, 2014

Hiding a Option element in your webpage

By applying a style="display:none" to the <option> element in your webpage will not give you the desired results across all the browsers. Therefore, you either remove or add the <option> element when needed or create 2 different set of <select> element to provide the user the correct set of menu.

Here's the source code of the page that I have created, try viewing it using different browsers like 'Internet Explorer', 'Mozilla Firefox' and 'Google Chrome' and you can spot the difference.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hide a menu option</title>
</head>
<body>
Fruits:
<select>
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="pear" style="display:none">Pear</option>
    <option value="pineapple">Pineapple</option>
</select>
</body>
</html>
* Click here for the demo shown in this post.

Wednesday, February 12, 2014

Managing plugin detection on IE11

If you have been creating and managing various type of contents online, you might want to take note of the change on IE11. It seems that in order to make the life of the developers much more easier, IE11 now supports the javascript code "navigator.plugins". However, it seems that this doesn't really return the desired outcome. I have run the script on IE11 and it only returns 'Microsoft Silverlight', whereby my Chrome and Firefox has much more results. (Ex: Flash, Quicktime, etc...) Therefore if you are detecting browser plugins, you should still check for ActiveXObject first followed by "navigator.plugins". But looking on the bright side, seems that Microsoft is trying to make everyone's life much more easier which is a (+). However, it looks like they have to spend a bit more time improving it.

* Click here to check the results of "navigator.plugins" on your browser.
^ Click here for the changes that Internet Explorer 11 has.

Friday, January 17, 2014

Problems with special characters on the web...

Sometimes when I was writing or editing a post on my blog, I'm encountering numerous situations where a ' or a " can mess up your contents when you publish it. The same problem also occur when I'm creating the asdocs for flex projects. If you have entered > or < characters not as a html node but part of your text, you might have problems creating the asdocs.

After look through numerous sites, I think that 'HTML entities' is one of
the better alternatives for Encoding and Decoding HTML Entities. On top of
that, it has also provided a list that shows all the special characters
and the corresponding HTML Entities.

* Click here for the website 'HTML Entities'.
^ Click here for my previous post on how to create asdocs for your flex projects.

Sunday, January 12, 2014

Playing with timestamp...

While playing with timestamp across various types of platform / coding environment, it can get pretty annoying as you manipulate the data. And if you are going to create a countdown timer to a particular date, you would have to find the difference of today's date and the selected date, and that's when timestamp will step into the picture. Luckily there's...

Epoch Converter
That can help us to make our work much more easier.
Besides for the tool that helps you to identify the actual date from the given
timestamp, there's tools to help you to identify the difference between 2 dates,
the week of the current date, etc... It also provides a guide that provides the
syntax for finding timestamp across the various types of platform too. :D
And if you playing/working with all these date data on a daily basis, you will
definitely find this website to be pretty helpful. :D

* Click here for the 'Epoch Converter' website.

Friday, January 3, 2014

Flex: JSON Deserialization

JSON a much shorter and faster response as compared to XML. Therefore, although some third party api out there still gives you the option of returning the results in XML format, it also gives you the option of getting the results in JSON format too. So I'm just doing up a simple JSON Deserialization example. :D

Main Application Class - SimpleJSONDeserialize.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">
 <fx:Declarations>
  <s:HTTPService url="http://maps.googleapis.com/maps/api/geocode/json" 
        method="GET" 
        concurrency="single" 
        useProxy="false" 
        id="httpService" 
        result="httpServiceResultEvent(event)" 
        fault="httpServiceFaultEvent(event)">
   <s:request xmlns="">
    <address>{txtInput.text}</address>
    <sensor>false</sensor>
   </s:request>
  </s:HTTPService>
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import com.adobe.serialization.json.JSON;
   
   import model.MapResult;
   import model.MapServiceResult;
   
   import mx.collections.ArrayCollection;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   
   import org.osflash.vanilla.Vanilla;
   
   private var mapResult:MapServiceResult;
   
   [Bindable]
   private var resultCollection:ArrayCollection;
   
   //Upon clicking on the button, we will trigger the request
   protected function searchBtnClickHandler(event:MouseEvent):void
   {
    httpService.send();
   }
   
   //Upon making a successful request
   protected function httpServiceResultEvent(event:ResultEvent):void
   {
    //Converts the json result to a Object.
    var tempJSONObject:Object = JSON.decode(String(event.result));
    
    //Converts the Object into a Object of class type MapServiceResult
    mapResult = new Vanilla().extract(tempJSONObject, MapServiceResult);
    
    //Since we couldn't bind a Vector to a Datagrid directly,
    //we will just push the results to a ArrayCollection and
    //bind it to a DataGrid.
    resultCollection = new ArrayCollection();
    for each(var item:MapResult in mapResult.results)
    {
     resultCollection.addItem(item);
    }
    resultCollection.refresh();
   }
   
   //Upon making a failure request
   protected function httpServiceFaultEvent(event:FaultEvent):void
   {
   }
  ]]>
 </fx:Script>
 <s:VGroup width="100%" 
     height="100%" 
     verticalAlign="middle" 
     horizontalAlign="center">
  <s:Label text="Please enter an address:"/>
  <s:HGroup horizontalAlign="center">
   <s:TextInput id="txtInput"/>
   <s:Button label="Search Now!" 
       id="searchBtn" 
       click="searchBtnClickHandler(event)"/>
  </s:HGroup>
  <s:DataGrid dataProvider="{resultCollection}" 
     width="400" 
     height="300">
   <s:columns>
    <s:ArrayList>
     <s:GridColumn headerText="Formatted Address"
          dataField="formattedAddress"/>
    </s:ArrayList>
   </s:columns>
  </s:DataGrid>
 </s:VGroup>
</s:Application>

Model class for HttpServiceResults - MapServiceResult.as
package model
{
 public class MapServiceResult
 {
  public var status:String;
  private var _results: Vector.;

  public function get results():Vector.
  {
   return _results;
  }

  /**
   * Vanilla class will handle all these mapping, hence
   * it will map the object results into the Vector
   * of type MapResult.
   * 
   * But when we are getting a empty string rather than
   * an Array, we will have to handle such a condition 
   */
  public function set results(value:*):void
  {
   _results = new Vector.;
   if(String(value) != "")
   {
    _results = value; 
   }
  }
 }
}

Model class for individual Result - MapResult.as
package model
{
 public class MapResult
 {
  //Vanilla will map all the values of 
  //address_components into the Vector 
  //addrComponents.
  [Marshall (field="address_components")]
  public var addrComponents: Vector.;
  [Marshall (field="formatted_address")]
  public var formattedAddress:String;
  public var types: Vector.;
 }
}

Model class for individual address_components - AddrComponents.as
package model
{
 public class AddrComponents
 {
  //Vanilla will map the value of the field 
  //long_name to longName 
  [Marshall (field="long_name")]
  public var longName:String;
  [Marshall (field="short_name")]
  public var shortName:String;
  public var types: Vector.;
 }
}
* Click here for the source files for the demo.
  (This requires a valid Google Geocoding API key, but currently it will work if you
  are running it locally.)
^ Click here to find out more about the Vanilla as3 library.
~ Click here to find out more about the as3corelib.