Not sure if all of you had went down to the PC Show at Expo, but it seems that some of the latest gadgets were bundled with the latest 'Haswell' processor. And some of the bigger IT stores in Sim Lim are selling motherboard bundles that comes with the 'Haswell' processor too. So if you have been looking forward to the release of the 'Haswell' processor, I think that you probably want to make a trip down to Sim Lim Square or the PC Show (Today, June 9 2013, is the last day.) and take a look.
* Click here to find out more about the 'Haswell' processor.
Sunday, June 9, 2013
Saturday, June 1, 2013
AS 3: Opening a url with utf-8 encode parameters
Not sure if any of you out there might encounter the following problem, but with all these social networking sites floating around the Internet, there might be a requirement that requires you to open up a website with some parameters. Therefore...
Here's the source code of my main application - SimpleTwitterPost.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"
backgroundColor="#CDCDCD">
<fx:Script>
<![CDATA[
//A default message.
private var msg:String = "僕は男性です。";
//URL of Twitter.
private var strTwitter:String = "http://www.twitter.com";
//Label
private var strLabel:String = "Please enter your " +
"message in the text box provided below."
//Upon clicking on one of the buttons,
protected function clickHandler(event:MouseEvent):void
{
var tempStr:String = txtInput.text;
if(event.currentTarget == btn1)
{
//encode the message in utf-16,
//which is not supported across most browsers.
tempStr = escape(tempStr);
}else{
//encode the message in utf-8,
//which is supported across all browsers.
tempStr = encodeURIComponent(tempStr);
}
tempStr = strTwitter + "?status=" + tempStr;
var tempURLReq:URLRequest;
tempURLReq = new URLRequest(tempStr);
//Open the URL in a new window.
navigateToURL(tempURLReq, "_blank");
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup verticalAlign="middle"
horizontalAlign="center"
width="100%"
height="100%">
<s:Spacer height="100%"/>
<s:Label text="{strLabel}"/>
<s:TextArea maxChars="140"
id="txtInput"
heightInLines="4"
width="50%"
text="{msg}"/>
<s:Button label="Using escape()"
click="clickHandler(event)"
width="200"
id="btn1"/>
<s:Button label="Using encodeURIComponent()"
click="clickHandler(event)"
width="200"
id="btn2"/>
<s:Spacer height="100%"/>
</s:VGroup>
</s:Application>
* Click here for the demo shown in this post.^ Click here for the source files for the demo.
Thursday, May 30, 2013
Facebook: Tools that can help us
Well basically, playing or working can ended up to be pretty annoying, but luckily there are all sorts of tools to help us to reduce some of the workload.
There's the 'Graph API Explorer' that can help us to figure out the correct commands to use.* Click here for the 'Graph API Explorer'.
There's the 'Facebook API Reference' that tell us what are the commands that are available.
* Click here for the 'Facebook API Reference'.
There are also all sorts of tools that can help us to cipher/format the big chunk of JSON data into something readable.
* Click here for the website 'Json Parser Online'.
^ Click here for the website 'JSON Editor Online'.
~ Click here for the software 'JSON Viewer'.
Friday, May 24, 2013
PC Show 2013
2 more weeks to PC Show and I think I need to get quite a lot of electronics gadget from this show.
 |
| Details of the upcoming PC Show as follows: 6 - 9 June Singapore Expo Hall 5 & 6 12noon - 9pm daily |
* Click here to find out more about 'PC Show 2013'.
^ Click here for some useful tips in finding your way around the upcoming 'PC Show'.
Friday, May 17, 2013
Charles: Tampering Data
Being a developer or user, there might be numerous situations where you are going to send/fecth some data to a web service. And there might be numerous situations where there's a need to tamper some of the data. Therefore...
 |
| 'Charles' Click here to download and install 'Charles' before moving on to the next step. |
 |
| Step 1 - Open up the website that you are going to tamper and also run the 'Charles' application. |
 |
| Step 2 - Right Click on the domain that you are going to tamper in 'Charles'. |
 |
| Step 3 - Make sure that the option 'Breakpoints' have been selected on the Right-Click Menu. |
 |
|
Step 4 - As you send an request out to the domain, the you will be given the option of tampering the request under the 'Breakpoints' tab in 'Charles'. Remember to click on the 'Execute' button to send out the tampered request. |
 |
|
Step 4.1 - As you receive some data from the domain, you can also tamper the data too. It will also appear under the 'Breakpoints' tab in 'Charles'. Similar to the previous step you will also need to click on the 'Execute' button to fetch the tampered response. By the way, if it is a Request, the tab 'Edit Request' will be shown and the tab 'Edit Response' will be shown for a Response. Enjoy playing with all the tampered data. |
Friday, May 10, 2013
Flex: Stacking Column Chart
There might be a situation where you would want to stack 2 different set of column data together. (For example, you are managing a toys department and you wanted to show the total of the number of toy cars and toy aeroplane that you have sold on that day. On top of that, you also want to find out the breakdown of the number of toy cars and toy aeroplanes that you have sold that particular day.) So how to stack all the column data together? Here's a simple example that I have created.
Here's the source code of my main application - SimpleStackingColumn.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"
backgroundColor="#CDCDCD"
creationComplete="creationCompleteEvent(event)">
<fx:Declarations>
<!--
We need to specify the types of animations over here
-->
<s:Parallel id="parallelEffect">
<s:Fade duration="1000" alphaFrom="0" alphaTo="1"/>
<mx:SeriesSlide duration="1000" direction="up"/>
</s:Parallel>
<s:Parallel id="parallelCarEffect">
<s:Fade duration="1000" alphaFrom="0" alphaTo="1"/>
</s:Parallel>
</fx:Declarations>
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import mx.charts.HitData;
import mx.charts.chartClasses.IChartElement2;
import mx.charts.chartClasses.Series;
import mx.charts.series.ColumnSeries;
import mx.charts.series.LineSeries;
import mx.collections.ArrayCollection;
import mx.collections.Sort;
import mx.collections.SortField;
import mx.events.FlexEvent;
import mx.formatters.DateFormatter;
import mx.graphics.Stroke;
import spark.events.IndexChangeEvent;
//Records used in the chart
[Bindable]
private var myData:XML =
<records>
<record>
<date>01/09/2013</date>
<people>63</people>
<car>23</car>
</record>
<record>
<date>02/09/2013</date>
<people>61</people>
<car>81</car>
</record>
<record>
<date>03/09/2013</date>
<people>67</people>
<car>47</car>
</record>
<record>
<date>04/09/2013</date>
<people>75</people>
<car>95</car>
</record>
<record>
<date>05/09/2013</date>
<people>65</people>
<car>45</car>
</record>
<record>
<date>06/09/2013</date>
<people>32</people>
<car>52</car>
</record>
<record>
<date>07/09/2013</date>
<people>66</people>
<car>46</car>
</record>
<record>
<date>08/09/2013</date>
<people>85</people>
<car>105</car>
</record>
<record>
<date>09/09/2013</date>
<people>37</people>
<car>57</car>
</record>
<record>
<date>10/09/2013</date>
<people>80</people>
<car>100</car>
</record>
</records>;
private var localSeries:ColumnSeries = new ColumnSeries();
private var localCarSeries:ColumnSeries = new ColumnSeries();
protected function creationCompleteEvent(event:FlexEvent):void
{
//Create the SortField object for the "time" field in
//the ArrayCollection object, and make sure we do a
//numeric sort.
var dataSortField:SortField = new SortField();
dataSortField.name = "time";
dataSortField.numeric = true;
//Create the Sort object and add the SortField object
//created earlier to the array of fields to sort on.
var numericDataSort:Sort = new Sort();
numericDataSort.fields = [dataSortField];
// Parsing the xml data into ArrayCollection
var objArray:ArrayCollection = new ArrayCollection();
var tempObj:Object;
var dateArray:Array;
var tempDate:Date;
for(var i:int = 0; i < myData.record.length(); i ++)
{
tempObj = new Object();
dateArray = String(myData.record[i].date).split("/");
//Convert the date data into a Date Object
tempDate = new Date(dateArray[2],
Number(dateArray[1]) - 1,
dateArray[0]);
tempObj.date = tempDate;
tempObj.time = tempDate.time;
//Adding the values of all the series together
tempObj.data = Number(myData.record[i].people) +
Number(myData.record[i].car);
//Create a new object for the data tooltip
tempObj.people = myData.record[i].people;
tempObj.label = dateFormatter(tempDate);
objArray.addItem(tempObj);
}
objArray.sort = numericDataSort;
objArray.refresh();
//Create the new series and set its properties.
localSeries.dataProvider = objArray;
localSeries.yField = "data";
localSeries.xField = "date";
//Create alternate colors for the columns
localSeries.setStyle("fill", 0xCDFFCD);
//Create the strokes for the columns
localSeries.setStyle("stroke",
new Stroke(0xFFFFFF, 0.1, 0.5));
localSeries.displayName = "col_people";
objArray = new ArrayCollection();
for(i = 0; i < myData.record.length(); i ++)
{
tempObj = new Object();
dateArray = String(myData.record[i].date).split("/");
//Convert the date data into a Date Object
tempDate = new Date(dateArray[2],
Number(dateArray[1]) - 1,
dateArray[0]);
tempObj.date = tempDate;
tempObj.time = tempDate.time;
//Don't need to adding the values of all the
//series together
tempObj.data = myData.record[i].car;
//Create a new object for the data tooltip
tempObj.car = myData.record[i].car;
tempObj.label = dateFormatter(tempDate);
objArray.addItem(tempObj);
}
objArray.sort = numericDataSort;
objArray.refresh();
//Create the new series and set its properties.
localCarSeries.dataProvider = objArray;
localCarSeries.yField = "data";
localCarSeries.xField = "date";
//Create alternate colors for the columns
localCarSeries.setStyle("fill", 0xCDCDFF);
//Create the strokes for the columns
localCarSeries.setStyle("stroke",
new Stroke(0xFFFFFF, 0.1, 0.5));
localCarSeries.displayName = "line_car";
//We will remove all the series attach to the chart
//first
chart.series = null;
//End all the effects first, else some glich will
//appear.
parallelEffect.end();
parallelCarEffect.end();
//Base on the type of animation selected, attach
//the effect to the column
localSeries.setStyle("creationCompleteEffect",
parallelEffect);
localCarSeries.setStyle("creationCompleteEffect",
parallelCarEffect);
// Back up the current series on the chart.
var currentSeries:Array = chart.series;
// Add the new series to the current Array of series.
currentSeries.push(localSeries);
currentSeries.push(localCarSeries);
// Add the new Array of series to the chart.
chart.series = currentSeries;
}
//This function will return a string based on the
//Date format DD/MM/YYYY.
private function dateFormatter(tempDate:Date):String
{
var fmt:DateFormatter = new DateFormatter();
fmt.formatString = "DD/MM/YYYY";
return fmt.format(tempDate);
}
//We are customizing the datatip / tool tip of the
//chart data.
public function myDataTipFunction(e:HitData):String {
var s:String = "";
var tempDate:Date = e.item.date as Date;
s += "Date: " + dateFormatter(tempDate) + "<br>";
if(Series(e.element).displayName == "col_people")
{
s += "No. of People: " + e.item.people;
}else{
s += "No. of Cars: " + e.item.car;
}
return s;
}
//This function will be used to change the date labels of
//the chart to match the data.
public function createDate(s:Date):Date {
var newDate:Date = new Date();
newDate.time = s.time;
//We need to increase a day to the labels.
newDate.date += 1;
return newDate;
}
]]>
</fx:Script>
<s:VGroup width="100%"
height="100%"
verticalAlign="middle"
horizontalAlign="center">
<s:BorderContainer width="100%"
backgroundAlpha="0"
borderVisible="false">
<s:HGroup verticalAlign="middle" horizontalAlign="center"
width="100%"
height="100%">
<!-- Need to set the gutterLeft and
gutterTop of the chart -->
<mx:CartesianChart id="chart"
gutterTop="0"
gutterLeft="50"
showDataTips="true"
width="80%"
height="80%"
dataTipFunction="myDataTipFunction">
<mx:horizontalAxis>
<mx:DateTimeAxis dataUnits="days" id="dateAxis"
alignLabelsToUnits="false"
parseFunction="createDate"/>
</mx:horizontalAxis>
</mx:CartesianChart>
</s:HGroup>
</s:BorderContainer>
</s:VGroup>
</s:Application>
* Click here for the demo shown in this post.^ Click here for the source files for the demo.
Saturday, May 4, 2013
Facebook: Symbols and Emotions
Facebook, one of the biggest social networking website in the world with more than 1 billion users across the globe. From time to time, you will/might be coming across numerous situation where posting an image is much more appropriate than typing a big chunk of text. But how do all the users out there do it?
Well basically, it seems that there are numerous websites that helps us to create all these cute and interesting symbols and emotions for your comments and chats. The following are some examples of such websites. Do take a look. I personally find them pretty interesting. :D |
 |
Subscribe to:
Posts (Atom)