2.5 Adding comments
If you press c a window pops up with a comment form as shown in Figure 6. The form consists of a text box, a rating drop down box with possible values from 0 to 5 and a submit button.
Listing 17: Add comment dialog – AddComment.mxml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <?xml version="1.0" encoding="utf-8"?> <iic:ClosableTitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Add Comment" xmlns:iic="net.ivanidris.flex.components.*"> <mx:Script> <![CDATA[ import flash.net.navigateToURL; import flash.net.URLRequest; import flash.net.URLVariables; public function onAdd():void { useHttpService(); } public function useHttpService():void { var request:URLRequest = new URLRequest("/addComment.py"); request.method = URLRequestMethod.POST; var variables:URLVariables = new URLVariables(); variables.comments = this.comments.text; variables.url = this.url.text; variables.title = this.t.text; variables.rating = this.rating.value; request.data = variables; navigateToURL(request); removeMe(); } ]]> </mx:Script> <mx:Form> <mx:FormItem label="Fill in comment"> <mx:TextArea id="comments"/> </mx:FormItem> <mx:FormItem label="Rating"> <mx:NumericStepper id='rating'/> </mx:FormItem> <mx:FormItem> <mx:Button id="addComment" label="Add Comment" click="onAdd();"/> </mx:FormItem> </mx:Form> <mx:Label x="63" y="170" text="Label" enabled="true" id="url" visible="false"/> <mx:Label x="97" y="205" text="Label" id="t" visible="false" enabled="true"/> </iic:ClosableTitleWindow> |
The text box in Listing 17 is actually a Flex TextInput. The rating is chosen with a NumericStepper. After the submit button is clicked, a POST request is sent to addComment.py to add a comment and rating for the current item. The URL and title of the item are sent along too. In case you are as paranoid as I am
, let me assure you , that I as administrator of the application, do not see any of your private information or your password.
Listing 18: Adding comments on Google App Engine – addComment.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | import cgi from net.ivanidris.flexreader import Feed from google.appengine.api import users from google.appengine.ext import webapp from google.appengine.ext.webapp.util import run_wsgi_app class MainPage(webapp.RequestHandler): def post(self): user = users.get_current_user() if user: self.putComment() else: self.redirect(users.create_login_url(self.request.uri)) def putComment(self): form = cgi.FieldStorage() comments = form.getfirst("comments", "") rating = form.getfirst("rating", "0") url = form.getfirst("url", "") title = form.getfirst("title", "") comment = Feed.EntryComment(key_name = url, link = url, title = title, rating = int(rating), comments = comments, user = users.get_current_user()) comment.put() application = webapp.WSGIApplication( [('/addComment.py', MainPage)], debug=True) def main(): run_wsgi_app(application) if __name__ == "__main__": main() |
addComment.py in Listing 18 uses the Google App Engine User API, requiring you to be logged in under your Google account. The FlexReader application tries to get the User instance for the current user by summoning the users.get_current_user() function. users.create_login_url() requires a URL where you are redirected back to after signing in. If the user is logged in, the comment is stored in the datastore.
3. Resources
- AsFusion Aqua Skin – http://www.asfusion.com & http://www.fillcolors.com. Created by Nahuel Foronda and company
- Kyle Hayes – http://kylehayes.info. Created carbon background, used as the application background
- FlexReader
- Google App Engine datastore
- Google App Engine Users API
- FlexUnit
- ECMAScript for XML (E4X)
- Flash ExternalInterface
- Flex 3
- GQL
- Flex Search on Google App Engine
- Google App Engine User API
4. Conclusion
“Sharpen the vim saw” made the front page of Delicious for a few hours, after being popular on Reddit a week or so before that. I hope you will like this tutorial as well. In this article I wrote about, the Google App Engine datastore and Users API, FlexUnit, E4X and the Flash ExternalInterface. Unsurprisingly, next time I will write about another Flex on Google App Engine project – the third in a series of four. The project in question has something to do with Picasa …
More From ivanidris
ivanidris Recommends
- Seven Characteristics of Stepper Motors | Solder In The Veins (Solder In The Veins)
- 10 Questions with Facebook Research Engineer – Andrei Alexandrescu (Server-Side Magazine)


