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. :)
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 (+). :) |
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. |
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.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
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.
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.
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...
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... |
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' | |
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.
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.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.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... |
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
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.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)
<!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>
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.
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... |
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.
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.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>
//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);
// 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.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>
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);
}
}
}
<?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>
<?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.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...
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.
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... |
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.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.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. |
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 |
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>
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;
}
}
}
}
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.;
}
}
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.