Weather and Answers Mashup

This is a simple example, which demonstrates how to utilize the Answers API within Flex Builder 2. This application is a browser for the Answers content, allowing you to search for specific questions. Once you have made a search, the resulting questions (if results are yielded), will show below the search box, allowing you to select them individually.

Once an individual question is selected, the application displays two additional panels on the right. The top panel will show the full question content, and the panel below it will show all the answers for this question (if they exist).

The Application Setup

The main application sits inside a Flex Panel container, and it could easily be turned into some sort of sidebar widget for a website or blog. In the base state, a simple search form allows the user to input their zip code and whether they prefer to use Fahrenheit or Celsius.

<mx:Panel id="weatherNode" title="Yahoo! Weather" layout="vertical" horizontalAlign="center"> <mx:Form id="searchForm"> <mx:FormItem label="Zip Code:"> <mx:TextInput id="locationField" text=""/> </mx:FormItem> <mx:FormItem label="Units:"> <mx:RadioButtonGroup id="units"/> <mx:RadioButton group="{units}" label="Fahrenheit" data="f" selected="true" /> <mx:RadioButton group="{units}" label="Celsius" data="c" /> </mx:FormItem> <mx:FormItem> <mx:Button id="getWeatherButton" label="Get Weather" right="0" /> </mx:FormItem> </mx:Form> </mx:Panel>

API Communication

With a click of the Get Weather button, we're accessing the Yahoo! Weather API. Calling the getWeather function on the main WeatherService object sends out the request to the server.

weatherService.getWeather(this.locationField.text, this.units.selection.data.toString());

When results get returned, the application enters the "ViewWeather" state which removes the search for and adds additional controls for visualizing the details of the current weather conditions. It also adds a New Search button to let the user search again if they wish.

This new state also adds another component to the Panel, the AnswersViewer. Using the description of the current weather conditions, a value such as "Cloudy" or "Mostly Sunny", we send a request to the answers API to find some relevent questions. These questions are then displayed in the AnswersViewer component, and the user may click next and previous buttons to look at each individual question.

this.answersService.searchQuestionsByTerm(currentConditions);

The Yahoo! Answers API has many different search options. In our case, we just want to look for a particular word or phrase, so we'll searchQuestionsByTerm with the current conditions as the query parameter.

View this example live in your browser.

Download the Yahoo! ASTRA Web APIs library to access full source code for this example.

Summary

Please feel free to dig into the code a bit more and discover some of the other goodies in there. It utilizes many Flex features like states, transitions, history management, input validation, and the AnswersViewer is a simple custom component that might help you take your first steps from a Flex application developer to a Flex component developer.

I recommend looking further into the APIs in this application. The Weather API accepts locations other than US Zip Codes. It's just as easy to learn what it's like in London, England as it is in New York, NY. Perhaps you could expand the application to allow the user to enter a city and state, and a webservice could automatically convert it to the correct zip code. Maybe the AnswersViewer component should be expanded to include the best answer.

Also see: Answers Browser example