Home > Flex, Flex Development, Screencasts > Screencast: Example Flex Client for Google App Engine

Screencast: Example Flex Client for Google App Engine

April 22nd, 2008

Over the weekend I found a little time to get the Google App Engine SDK installed on my Mac and play with it a little. I have done a little Python hacking in the past, so everything looked fairly familiar. I wanted to see how easy it would be to build a very small and simple application that used Flex as the client. It turned out to be very easy indeed.

In case you’d like to follow along, I’ve included the Python and MXML files below. You do not need an App Engine account in order to use the SDK, but you will need to install the Google App Engine SDK locally first, and I recommend going through their Getting Started tutorials first.

Sendmail.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:HTTPService id="sm" url="http://localhost:8080/sendmail" useProxy="false"
 	method="POST" resultFormat="e4x">
 	<mx:request xmlns="">
 		<msgFrom>{msgFrom.text}</msgFrom>
 		<msgTo>{msgTo.text}</msgTo>
 		<msgSubject>{msgSubject.text}</msgSubject>
 		<msgBody>{msgBody.text}</msgBody>
 	</mx:request>
 </mx:HTTPService>  

<mx:VBox>

<mx:Label text="Flex Client for Google App Engine" fontSize="15" fontWeight="bold"/>
 	<mx:Form defaultButton="{sendMessage}">
            <mx:Label text="Compose a Mail Message"/>
 		<mx:FormItem label="From">
 			<mx:TextInput id="msgFrom"/>
 		</mx:FormItem>
 		<mx:FormItem label="To">
 			<mx:TextInput id="msgTo"/>
 		</mx:FormItem>
 		<mx:FormItem label="Subject">
 			<mx:TextInput id="msgSubject"/>
 		</mx:FormItem>
 		<mx:FormItem label="Body">
 			<mx:TextArea id="msgBody"/>
 		</mx:FormItem>
 		<mx:FormItem>
 			<mx:Button id="sendMessage" label="Send" click="{sm.send()}"/>
 		</mx:FormItem>
 	</mx:Form>

<mx:Label text="Previously Sent Messages"/>
 	<mx:DataGrid id="dg" dataProvider="{sm.lastResult.message}">
         <mx:columns>
             <mx:DataGridColumn headerText="From" dataField="from"/>
             <mx:DataGridColumn headerText="To" dataField="to"/>
             <mx:DataGridColumn headerText="Date" dataField="date"/>
             <mx:DataGridColumn headerText="Subject" dataField="subject"/>
             <mx:DataGridColumn headerText="Body" dataField="body"/>
         </mx:columns>
     </mx:DataGrid>
 </mx:VBox>

</mx:Application>

mail.py

#!/usr/bin/env python  

import cgi
import datetime
import wsgiref.handlers

from google.appengine.ext import db
from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.api import mail

class MailMessage(db.Model):
  msgTo = db.StringProperty()
  msgSubject = db.StringProperty()
  msgFrom = db.StringProperty()
  msgBody = db.StringProperty(multiline=True)
  msgDate = db.DateTimeProperty(auto_now_add=True)

class MainPage(webapp.RequestHandler):
  def get(self):
   self.response.headers['Content-Type'] = 'text/plain'
   self.response.out.write('\n')

messages = db.GqlQuery("SELECT * "
                            "FROM MailMessage "
                            "ORDER BY msgDate DESC LIMIT 10")

self.response.out.write('\n')

for msg in messages:
     self.response.out.write('  \n')
     self.response.out.write('    %s\n' % msg.msgTo)
     self.response.out.write('    %s\n' % msg.msgSubject)
     self.response.out.write('    %s\n' % msg.msgFrom)
     self.response.out.write('    %s\n' % msg.msgDate)
     self.response.out.write('    %s\n' % cgi.escape(msg.msgBody))
     self.response.out.write('  \n')

self.response.out.write('\n')

class Sendmail(webapp.RequestHandler):
  def post(self):
    msg = MailMessage()
    msg.msgFrom = self.request.get('msgFrom')
    msg.msgTo = self.request.get('msgTo')
    msg.msgSubject = self.request.get('msgSubject')
    msg.msgBody = self.request.get('msgBody')
    mail.send_mail(sender=msg.msgFrom, to=msg.msgTo, subject=msg.msgSubject, body=msg.msgBody)
    msg.put()
    self.redirect('/')

application = webapp.WSGIApplication([
  ('/', MainPage),
  ('/sendmail', Sendmail)
], debug=True)

def main():
  wsgiref.handlers.CGIHandler().run(application)

if __name__ == '__main__':
  main()

P.S. I used Mike Chambers’ Code Format Service on Google App Engine to format the code in HTML. Thanks Mike!

Technorati Tags: ,

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
Author: David Coletta Categories: Flex, Flex Development, Screencasts Tags:
  1. April 22nd, 2008 at 10:24 | #1

    David,

    Thanks for your tutorial. I know that a lot of people are interested in the Google App API.

    My question is about how you created your video tutorial. In my role as a user group manager and in my position as RIA Evangelist I’ve had many requests for video tutorials, but I’ve never found a good way to create them without a lot of post editing or a lot of reshooting.

    Your tutorial was really good, so I thought that I’d ask what hardware and software you were using to create this video tutorial?

    Leif

  2. David Coletta
    April 22nd, 2008 at 10:33 | #2

    Leif, see this post.

  3. April 22nd, 2008 at 13:45 | #3

    Thanks, David. That answers all of my questions.

  4. Keith Schulze
    April 23rd, 2008 at 01:39 | #4

    Hi David,

    Thanks for the tutorial, it was really good. Having not had much experience with flex, it’s a nice tutorial to start with.

    Not sure if it was intentional – the xml block identifiers in the msg class of main.py, which appear in your screencast, are not there in the version you posted.

    Thanks again.
    Cheers,
    Keith

  5. milan
    May 30th, 2008 at 10:59 | #5

    yes, seems that Code Format Service needs some polishing :)
    thanks for example!

  6. Eduardo
    June 6th, 2008 at 15:51 | #6

    Very impressive screencast, look forward to more in the future

  7. Fei
    July 20th, 2008 at 23:47 | #7

    Hi David,

    Thanks for the tutorial. It’s very nice. But I don’t understand how are the flex and app engine connect to each other. Is it the url in the HTTPService?

    Your tutorial is the only one thus far on the web that doesn’t require anything else (pyamf, etc.), so I really want to know the magic behind it.

  8. October 4th, 2008 at 11:30 | #8

    very well presented ! hats off
    App Engine + Flex looks very promising

  9. Tyler Gill
    October 15th, 2008 at 13:20 | #9

    Hi David,

    I was wondering how can you run it on the google app Engine account. And more importantly can the mxml reside there too.

  10. David Coletta
    October 15th, 2008 at 14:04 | #10

    Tyler,

    I don’t understand what you mean by “how can you run it on the google app Engine account.” As for the other part, no, the mxml can’t reside there — it has to be compiled into the Flex app.

Comments are closed.