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.

Tuesday, October 15, 2013

Flex: XML appending

How to append a new node into a XML object in Flex/as3? Here's a simple example that teaches you how to append a XML node. Here's a guide on how to do it. But do take note that you have to use either _ or a letter for the first character of the name of the new node that you are trying to insert. However if you want to use numbers for the first character, there's a way to do it too. :P Besides for the ways that I have listed in this post, you can use dot notation (.) to append a new node too. :)

Source Code for the main application - 'SimpleXMLManipulation.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="creationCompleteEvt(event)" 
      xmlns:local="*">
 <fx:Declarations>
  <local:SimpleXMLConverter id="converter"/>
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   protected function creationCompleteEvt(e:FlexEvent):void
   {
    converter.init();
   }
  ]]>
 </fx:Script>
 <s:VGroup width="100%" 
     height="100%" 
     verticalAlign="middle" 
     horizontalAlign="center">
  <s:Label text="Original XML"/>
  <s:TextArea text="@{converter.simpleXML}"/>
  <s:Spacer height="10"/>
  <s:HGroup>
   <s:VGroup horizontalAlign="center">
    <s:Label text="Modified XML using appendChild()"/>
    <s:TextArea text="{converter.simpleXML1}" 
       editable="false"
        width="30%" 
       minWidth="300"/>  
   </s:VGroup>
   <s:VGroup horizontalAlign="center">
    <s:Label text="Modified XML using []"/>
    <s:TextArea text="{converter.simpleXML2}"
       editable="false"
       width="30%" 
       minWidth="300"/>   
   </s:VGroup>
  </s:HGroup>
 </s:VGroup>
</s:Application>

Source code for the XML manipulating class
package
{
 import flash.events.Event;
 import flash.events.EventDispatcher;
 
 [Bindable]
 public class SimpleXMLConverter extends EventDispatcher
 {
  //XML String
  private var simpleXMLString:String = "" +
   "";
  
  //XML that contains the above simpleXMLString
  private var _simpleXML:XML;
  
  [Bindable(event="simpleXMLChanged")]
  public function get simpleXML():String
  {
   return _simpleXML;
  }

  public function set simpleXML(value:String):void
  {
   //If the input value isn't a valid XML,
   //we will set it to empty.
   try
   {
    _simpleXML = XML(value);
   }catch(e:Error)
   {
    _simpleXML = new XML();
   }
   
   //Modified XML using appendChild()
   simpleXML1 = XML(_simpleXML.toXMLString());
   if(simpleXML1)
   {
    var dummyXMLNode:XML;
    var dummyXMLNodeStr:String;
    dummyXMLNodeStr = "<" + name1Str + name2Str + ">";
    dummyXMLNodeStr += valueStr;
    dummyXMLNodeStr += "";
    dummyXMLNode = new XML(dummyXMLNodeStr);
    simpleXML1.appendChild(dummyXMLNode);
    if(simpleXML1.level1.length() > 0)
    {
     for(var i:int = 0; i < simpleXML1.level1.length(); i ++)
     {
      simpleXML1.level1[i].appendChild(dummyXMLNode);
     }
    }
   }
   
   //Modified XML using []
   simpleXML2 = XML(_simpleXML.toXMLString());
   if(simpleXML2)
   {
    simpleXML2[name1Str + name2Str] = 
     valueStr;
    if(simpleXML2.level1.length() > 0)
    {
     for(i = 0; i < simpleXML2.level1.length(); i ++)
     {
      simpleXML2.level1[i][name1Str + name2Str] = 
       valueStr;
     }
    }
   }
   
   //dispatching the 8 event to update the
   //respective text area
   dispatchEvent(new Event("simpleXML1Changed", 
    true, true));
   dispatchEvent(new Event("simpleXML2Changed", 
    true, true));
  }
  
  //XML that contains the modified XML based
  //on the above simpleXMLString and appendChild()
  private var _simpleXML1:XML;

  public function get simpleXML1():XML
  {
   return _simpleXML1;
  }

  [Bindable(event="simpleXML1Changed")]
  public function set simpleXML1(value:XML):void
  {
   _simpleXML1 = value;
  }
  
  //XML that contains the modified XML based
  //on the above simpleXMLString and []
  private var _simpleXML2:XML;

  public function get simpleXML2():XML
  {
   return _simpleXML2;
  }
  
  [Bindable(event="simpleXML2Changed")]
  public function set simpleXML2(value:XML):void
  {
   _simpleXML2 = value;
  }
  
  //The name of the empty node - part1
  private var name1Str:String = "empty";
  //The name of the empty node - part2
  private var name2Str:String = "node";
  
  //The value of the empty node
  private var valueStr:String = "dummyValue";
  
  public function init():void
  {
   simpleXML = new XML(simpleXMLString);
   
   //dispatching the event to update the main
   //respective text area
   dispatchEvent(new Event("simpleXMLChanged", 
    true, true));
  }
 }
}
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.