Flex Reader on Google App Engine

This entry is part of 3 in the series Flex on GAE

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.

Figure 6: Add comment dialog.

addComment small thumb

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()

Figure 7: Login screen.

login small thumb

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

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

Series Navigation
0saves
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
Share
This entry was posted in programming and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">