Screencast: Example Flex Client for Google App Engine
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: Flex, Google App Engine




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
Leif, see this post.
Thanks, David. That answers all of my questions.
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
yes, seems that Code Format Service needs some polishing
thanks for example!
Very impressive screencast, look forward to more in the future
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.
very well presented ! hats off
App Engine + Flex looks very promising
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.
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.