This is multipart tutorial, and this is second part of this tutorial. part 1 of this tutorial is here.
Lets move ahead and try to call google weather API. for this lets first make result component(Text Area) to read-only, because we just wanted to display XML result from google weather API in result Field. here is the code.
package { //Because Label are Components we must call him. import fl.controls.Button; import fl.controls.Label; import fl.controls.TextArea; import fl.controls.TextInput; import flash.display.MovieClip; public class mainClass extends MovieClip { private var labelComponent:Label; private var cityInputComponent:TextInput; private var goButton:Button; private var result:TextArea; public function mainClass() { //calling componentSetup() function in Constructor Function. componentSetup(); } private function componentSetup():void { //placing components in Stage remember to import fl.controls.Label for Label Control // First of all lets place Label and move it x=20 and y=20 px in stage labelComponent = new Label(); labelComponent.text = "City Name"; labelComponent.move(20, 20); addChild(labelComponent); //Now add TextInput component Remember to Import fl.controls.TextInput cityInputComponent = new TextInput(); cityInputComponent.move(100, 20); cityInputComponent.width = 200; addChild(cityInputComponent); //Adding Button Control. Remember to import fl.controls.Button; goButton = new Button(); goButton.move(320, 20); goButton.label = "Show Weather"; addChild(goButton); // Now time to add TextArea Component..Remember to import fl.controls.TextArea for TextArea Component result = new TextArea(); result.width = 400; result.height = 200; result.move(20, 50); // lets make result field READ-ONLY result.editable = false; addChild(result); } } }
line 43 - makes result field read only.
now its time to call XML data from google weather API , i want to display XML data into result component when someone enter City Location in cityInputComponent and pressed Show Weather Button. here we go -
package { //Because Label are Components we must call him. import fl.controls.Button; import fl.controls.Label; import fl.controls.TextArea; import fl.controls.TextInput; import flash.display.Loader; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.net.URLLoader; import flash.net.URLRequest; public class mainClass extends MovieClip { private var labelComponent:Label; private var cityInputComponent:TextInput; private var goButton:Button; private var result:TextArea; private var loader:URLLoader; public function mainClass() { //calling componentSetup() function in Constructor Function. componentSetup(); goButton.addEventListener(MouseEvent.CLICK, getLocation); } private function getLocation(event:Event):void { if (cityInputComponent.text != null || cityInputComponent.text != "") { loader = new URLLoader(new URLRequest("http://www.google.com/ig/api?weather=" + cityInputComponent.text)); loader.addEventListener(Event.COMPLETE, downloadWeather); } } private function downloadWeather(event:Event):void { var weatherData = new XML(event.target.data); result.text = weatherData; } private function componentSetup():void { //placing components in Stage remember to import fl.controls.Label for Label Control // First of all lets place Label and move it x=20 and y=20 px in stage labelComponent = new Label(); labelComponent.text = "City Name"; labelComponent.move(20, 20); addChild(labelComponent); //Now add TextInput component Remember to Import fl.controls.TextInput cityInputComponent = new TextInput(); cityInputComponent.move(100, 20); cityInputComponent.width = 200; addChild(cityInputComponent); //Adding Button Control. Remember to import fl.controls.Button; goButton = new Button(); goButton.move(320, 20); goButton.label = "Show Weather"; addChild(goButton); // Now time to add TextArea Component..Remember to import fl.controls.TextArea for TextArea Component result = new TextArea(); result.width = 400; result.height = 200; result.move(20, 50); // lets make result field READ-ONLY result.editable = false; addChild(result); } } }
Line 23 – added a Event Listener and attached MouseEvent.CLICK to Show Weather (goButton component) Button. and we imported required flash.event.MouseEvent class in Line number 10.
Line 25-30 – created a private function getLocation which is called by Show Weather button. Line26-29 checks if cityInputComponent is not blanks.
Line 27 – loader variable (which is type of URLLoader declared in Line 19, and base class is imported in Line 11.) downloads data from a URL http://www.google.com/ig/api?weather=+cityInputComponent.text . for example if value of cityInputComponent is New York then loader variable downloads data from http://www.google.com/ig/api?weather=New York . try to click the link which opens weather information from google weather api which display XML data of New York in New Browser Window.
Line 28 – added a event Listener with loader variable which calls downloadWeather function.
Line 31-34 – function to handle and show downloaded XML into result Field.
As i mentioned earlier in part 1 i am unable to show you working example of .swf file because of Adobe’s new Cross-Domain Policy. but we will discuss about that later. here is the screenshot of my working copy and you can download it from Here which runs perfectly in your desktop-
Now everything OK. result Component is displaying XML from google weather API. here is sample xml
As you see in XML data,now we have current condition data, forecast condition data, temperature in Celsius and Fahrenheit, wind direction and speed, and level of humidity etc. but we may limited and interested only to current condition. in next and final part we will insert those data directly from google, and discover what are Adobe’s new cross-domain policy?, why we are unable to show it into our website?, and how to overcome that problems too..
Recent Comments