Flex and Google Gears: sales force automation application with offline capabilities

salesbuilder.png

As a follow up to my previous post, here is the sample Sales Force Automation application I built to demonstrate the Flex/Google Gears integration, and that Kevin Lynch demonstrated during the Google Developer Day keynote last week in San Jose.

SalesBuilder uses the Google Gears Database API to save data to an embedded SQLite database, and the LocalServer API to enable offline access to the application.

In this hosted version, I removed the server component (to avoid having to watch all the bad things that can happen to a shared demo database). An XML document plays the role of server data. You work offline and the changes you make are saved to your local SQLite database. A simple data synchronization mechanism allows you to initially populate your local database, and to inform you of the changes that would be pushed to the server.

NOTE: Make sure you install Google Gears before running the application. Also, depending on the browser you use, make sure you check the security bar at the top of the content area: you may be required to explicitely allow Google Gears plugin (ActiveX in IE) to execute.

Part 1: Using the local database and simple data sync

  1. Click here to start the application.
  2. Click the Search button in the left drawer. Notice that there is no data (you haven’t populated your local database yet).
  3. Optionally start the SQLAdmin tool in another browser window/tab.
    • Enter “salesbuilder” as the database name
    • Click “New Query” in the menu bar
    • Type “select * from account” or “select * from contact”: no data
  4. In the SalesBuilder app, click the Sync button in the menu bar.
  5. Click the Search Button again: You now have data.
  6. If you started the SQLAdmin app, click the Execute button again and notice that your local database has been populated.
  7. In the SalesBuilder app, double-Click “Adobe” in the search results.
  8. Note that this is an MDI type of user interface. The list of open windows (panels) is available under “Open Items” in the drawer. You can click an item to restore it.
  9. Make some changes to the Adobe data (for example, change the phone number), and click “Save”.
  10. Click the Sync button again.
  11. On the Contacts tab, you can grab an org chart item with the mouse and move it around.
  12. To open the details view for a contact, either double-click an org chart item, or click “Show Grid” and double-click a contact in the datagrid.
  13. On the Market History tab, you can grab the chart with the mouse and move it left and right, adjust the time selection using the dividers in the bottom chart, etc.
  14. Continue to add and modify accounts and contacts, and click the Sync button to simulate data sync with the server.

Part 2: Accessing the application while offline

  1. Click here to access the application’s offline management page. Note that the options provided on this page could be integrated in the application itself.
  2. Click the Capture button. Wait a few seconds until the status message indicates that the application is available offline. The application has now been saved locally (in a Google Gears Managed Store).
  3. Disconnect from the network and disable your wireless connection.
  4. Clear your browser cache to make sure the application won’t be served from the cache
  5. Access the application again using its normal URL: http://coenraets.org/salesbuilder/salesbuilder.html
  6. You have access to the application and to your local database.

Source Code and Disclaimer

Click here to download the source code of the application.

It was definitely interesting to build this application and use some well known data access patterns at the client side of a web app. Look for example at the data access objects: AccountDAO and ContactDAO. In this application, I’m embedding SQL statements directly in the data access objects, but it is inevitable that layers of abstraction, ORM and data synchronization solutions will soon be available on top of the low level Gears API. In fact, the Flex Data Services provide a data synchronization API that could be integrated with Gears.

This application is a proof of concept and not a full featured application. Some modules of the application (like opportunities and activities) are not implemented in this version.

Apollo Version

Kevin also demonstrated an Apollo version of the same application. The Apollo version runs outside the browser just like a traditional desktop application. As such it also has additional features, like drag-and-drop between the app and the desktop, access to the file system, etc. I will make that version available as soon as the new Apollo beta goes public (very soon).

Credits to Mark Shepherd for the Springgraph component used for the org chart.

79 Responses to Flex and Google Gears: sales force automation application with offline capabilities

  1. Mike Brunt June 8, 2007 at 8:37 pm #

    Christophe this is indeed very exciting. I recall at Webapper, my last company, we were intrigued by what Central could offer and now we see the re-emergence of those on-line off-line capabilities.

    I am really looking forward to the Apollo version also.

  2. Mike Brunt June 9, 2007 at 5:49 am #

    FYI Christophe I am getting an, “Error DB Has No Properties” prompt when I try to follow your instructions above.

  3. christophe June 9, 2007 at 7:52 am #

    Mike,
    Did you install Gears, and did you check the security bar at the top of the content area of your browser: you may be required to explicitely allow Google Gears plugin (ActiveX in IE) to execute.
    Christophe

  4. Eugene June 12, 2007 at 4:22 am #

    Cool Demo ! Am trying to set it up on an internal IIS server to try it out but i don’t see the “salesbuilder.html” file in the source zip. Am I missing something ?

  5. Ahtsham Ali June 17, 2007 at 12:01 pm #

    AOA
    I have dowloaded the code of SalesForce automaton tool from
    http://coenraets.org/blog/2007/06/flex-and-google-gears-sales-force-automation-application-with-offline-capabilities/.
    When I run it online version, it works well, but when I download the
    sourcecode, I donot able to understand how to run it. Any body let me
    know how to run it.

    Regards,
    Ahtsham

  6. kwpzwvjwvo June 18, 2007 at 8:38 am #

    Hello! Good Site! Thanks you! uamowutont

  7. RioVic July 3, 2007 at 12:52 pm #

    This is interesting as a standalone client. But the really interesting things would happen when the connection becomes available again, and the database would synchronize. Where is this part? Am I missing something?

  8. RioVic July 3, 2007 at 1:10 pm #

    OK, now I get it. This is really super cool!

  9. rockhowse July 5, 2007 at 11:01 am #

    Awesome demo app Christophe! I ran into an issue that might help out people using flex builder in eclipse. I was able to take the source and build the project just fine, but after accessing it, nothing seemed to work other than the dashboard =( After poking around a bit, I figured out that I had to add the gears specific .js includes to the auto generated .html that flex builder creates. I added the following to the bin\salesbuilder.html and it worked like a charm =)

  10. rockhowse July 5, 2007 at 11:05 am #

    Hmmm stripped out the script includes. Second try

    <script type=”text/javascript” src=”gears_init.js” >< /script >
    <script type=”text/javascript” src=”flex_gears.js”>< /script>

  11. Loanser November 30, 2007 at 6:42 pm #

    Hi!i glad to see U!
    .geico auto insurance

  12. Andy December 19, 2007 at 9:51 am #

    Oh, and did not know about it. Thanks for the information …

  13. rocknrollcar July 24, 2008 at 2:18 pm #

    Thank you for the great tutorial

  14. sohbet August 22, 2008 at 6:39 am #

    Cool Demo !

  15. chat August 22, 2008 at 6:39 am #

    Thanks for the information …

  16. çet August 22, 2008 at 6:40 am #

    Thank you for the great tutorial

  17. Vagner April 24, 2009 at 2:16 pm #

    Good afternoon
    You would post an example of how to work with gears with flex + blazeds or explain how its integration with gears which create the local bank in sqlite and where he called the flex ..?
    thanks

  18. mendonca April 29, 2009 at 12:29 pm #

    Ola…
    Poderia me explicar qual é o tipo de comunicação que faz depois que baixa os fontes para maquina local do cliente, e depois para enviar dados atualizados para o servidor, qual e o tipo de cominicação e qual e papel do sqlite nesta sua aplicação quando executado o arquivo go_offline.js?

  19. medyum July 12, 2009 at 3:33 am #

    Cool Demo ! Am trying to set it up on an internal IIS server to try it out but i don’t see the “salesbuilder.html” file in the source zip

  20. aöf July 17, 2009 at 3:56 pm #

    Very good, congratulations article

  21. radyo dinle July 19, 2009 at 10:08 am #

    Awesome demo app Christophe! I ran into an issue that might help out people using flex builder in eclipse. I was able to take the source and build the project just fine, but after accessing it, nothing seemed to work other than the dashboard =( After poking around a bit, I figured out that I had to add the gears specific .js includes to the auto generated .html that flex builder creates. I added the following to the bin\salesbuilder.html and it worked like a charm =)

  22. ssk July 23, 2009 at 9:36 am #

    Cool Demo ! Am trying to set it up on an internal IIS server to try it out but i don’t see the “salesbuilder.html” file in the source zip. Am I missing something ?

  23. zerrin egeliler July 23, 2009 at 11:51 am #

    This is interesting as a standalone client. But the really interesting things would happen when the connection becomes available again, and the database would synchronize. Where is this part? Am I missing something?

  24. zerrin egeliler September 29, 2009 at 2:27 pm #

    thanks very good page and cool page super

  25. chat odası November 24, 2009 at 6:27 am #

    how are you babyy

  26. vinoddanims November 25, 2009 at 10:17 am #

    superb

  27. Sohbet January 13, 2010 at 10:38 pm #

    good demo ..

  28. Eryaman hali yikama June 15, 2010 at 7:02 am #

    Good information and good way your blog post. Good luck blogger man.

  29. chat June 19, 2010 at 4:07 pm #

    Well done and good luck with your very great work thanks

  30. rottweiler July 16, 2010 at 9:28 pm #

    thanks for information

  31. canlı chat çet July 28, 2010 at 6:17 pm #

    thank

  32. matbaa August 8, 2010 at 8:54 am #

    Well done and good luck with your very great work thanks

  33. medyum August 20, 2010 at 11:53 am #

    Very nice sharing.thanks

  34. medyum August 20, 2010 at 11:54 am #

    great thank you. I wish you continued success

  35. chat September 22, 2010 at 6:24 pm #

    cabuk ekle cok fena yaparım :)

  36. hunting gears November 24, 2010 at 8:06 am #

    I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! Keep up the excellent work!

  37. baris January 12, 2011 at 2:44 pm #

    ekle hemen ekle

  38. diş üniti January 12, 2011 at 2:44 pm #

    diş üniti teknik servis

  39. hosting January 16, 2011 at 8:30 am #

    good

  40. health insurance January 16, 2011 at 10:14 am #

    I believed it was likely to be some boring old post, but it really compensated for time. I am going to post a hyperlink to this page on my blog. I’m sure my visitors will find that very useful

  41. chat February 16, 2011 at 3:11 pm #

    sohbet , sohbet odaları , chat odaları , chat , sohbet ve eglence platformu sizler icin Chat, Sohbet çet, Gurbetçilerle chat, Sohbet çet, Avrupa Sohbet çet, ögretmenlerle Sohbet çet, chat sohbet odalari, chatten flirten, Avrupa sohbet, chat, kizlarla, erkeklerle Sohbet çet, Almanya sohbet, Chatyap, Sohbetyap, Sohbetim Odalari

  42. hosting March 24, 2011 at 12:16 pm #

    very nice this blog thanks admin

  43. chat April 9, 2011 at 10:59 am #

    visiting your site. It’s really a pleasure knowing a site like this packed with great information.Good bolg, thank you for sharing.

  44. chat April 9, 2011 at 10:59 am #

    visiting your site. It’s really a pleasure knowing a site like this packed with great information.Good bolg, thank you for sharing.
    visiting your site. It’s really a pleasure knowing a site like this packed with great information.Good bolg, thank you for sharing.

  45. amerikan kapı April 24, 2011 at 9:16 pm #

    Like a host with a domain to create a site talking about all the gossip in the world with an extensive team to be the largest in Brazil, a country with extensive development online.

  46. amerikan kapi April 24, 2011 at 9:16 pm #

    Like a host with a domain to create a site talking about all the gossip in the world with an extensive team to be the largest in Brazil, a country with extensive development.

  47. Coletta Shambrook July 16, 2011 at 11:45 am #

    My partner and I absolutely love your blog and find most of your post’s to be exactly what I’m looking for. Do you offer guest writers to write content for you? I wouldn’t mind composing a post or elaborating on most of the subjects you write with regards to here. Again, awesome website!

  48. Canlı sohbet July 17, 2011 at 6:42 pm #

    Like a host with a domain to create a site talking about all the gossip in the world with an extensive team to be the largest in Brazil, a country with extensive development.

  49. ferrari perfume July 28, 2011 at 1:00 am #

    Great information. I got lucky and found your site from a random Google search.

  50. botox glasgow August 19, 2011 at 8:06 am #

    We like your site theme can you tell us the name of it and where you purchased it? cheers.

  51. porno June 26, 2012 at 2:04 am #

    thank you

  52. porno June 26, 2012 at 2:06 am #

    Flex and Gear actually can work together!

  53. klima servisi August 23, 2014 at 6:09 pm #

    Güzel çalışma ellerinize sağlık Başarılarının devamını dilerim

  54. Matt August 31, 2014 at 4:49 am #

    Its a very nice application. It’s good to know that the application can also be accessed offline.

  55. most forgiving irons September 3, 2014 at 3:11 am #

    utilizza Gears per l’accesso al database locale, e una applicazione AIR (Apollo) che invece utilizza direttamente il supporto per il database SQLite nativo del framework A

  56. Jakarta Hipnoterapi September 18, 2014 at 9:15 pm #

    Like a host with a domain to create a site talking about all the gossip in the world with an extensive team to be the largest in Brazil, a country ,,with extensive development.,,

  57. jaket gunung waterproof September 20, 2014 at 2:39 am #

    Just want to say your article is as amazing. The clearness in your post is simply excellent and i could assume you are an expert on this subject. Well with your permission let me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please carry on the enjoyable work…

  58. jual jaket kulit asli October 7, 2014 at 9:21 pm #

    Just want to say your article is as amazing. The clearness in your post is simply excellent and i could assume you are an expert on this subject. Well with your permission let me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please carry on the enjoyable work…

  59. sandal wanita murah October 24, 2014 at 3:33 am #

    information you give is very inspiring once, thanks to the author

  60. chiller January 19, 2015 at 3:36 am #

    chiller sistemlerinde dizaynını değiştiren http://www.sogutmaservisiistanbul.com firmasının yapmış olduğu çalışmalar insanları büyüleyici halde dir.

  61. chiller servisi January 19, 2015 at 3:37 am #

    Chiller servisimiz 7/24 hizmet sağlıyarak müşteri memnuniyeti kapılarını daima açık tutmuştur.

    http://www.sogutmaservisiistanbul.com

  62. ikinci el klima January 19, 2015 at 3:38 am #

    İkinci el klimalar da yaklaşık 7.000 takım klima hacmine sahip olan firmamız sizlere daha iyi hizmet verebilmek için seçeneklerini çoğaltmıştır.

  63. ikinci el klima January 19, 2015 at 2:18 pm #

    ikinci el klimalarda kampanyaları başlamıştır.

  64. cara menghilangkan bekas jerawat January 20, 2015 at 8:20 am #

    truly inspire all existing posts in his blog this article,,, look nice too

  65. penghancur batu empedu February 24, 2015 at 10:02 pm #

    si yo entiendo lo que dices Definitivamente voy a impresionar a todos gracias

  66. jam tangan online March 16, 2015 at 11:22 pm #

    thanks for sharing

  67. Chat October 27, 2015 at 2:24 pm #

    Thxn for u!

  68. Sohbet November 1, 2015 at 5:22 pm #

    obrg gracias

  69. Yemek November 1, 2015 at 5:23 pm #

    thnx bro

  70. forma imalatı November 26, 2015 at 7:31 am #

    http://www.jonsunsport.com/yeni-urunler.html.güzel çalışmalar ve basarılar

Trackbacks/Pingbacks

  1. links for 2007-06-09 - June 9, 2007

    […] Christophe Coenraets » Flex and Google Gears: sales force automation application with offline capabilities SalesBuilder uses the Google Gears Database API to save data to an embedded SQLite database, and the LocalServer API to enable offline access to the application. (tags: application adobe Flex gears google java web) […]

  2. Web2.0Blog » Blog Archive » Flex e Google Gears - June 14, 2007

    […] L’applicazione, creata proprio da Coenraets, è una applicazione di Sales Force Automation costruita in Flex che usa Gears per salvare i dati in un database locale SQLite quando si sta lavorando offline e sincronizza i dati con un server online una volta che ci si è nuovamente connessi. L’applicazione esiste in una versione browser-based, che utilizza Gears per l’accesso al database locale, e una applicazione AIR (Apollo) che invece utilizza direttamente il supporto per il database SQLite nativo del framework Adobe. […]

  3. Christophe Coenraets » SalesBuilder on AIR: Local Database, Data Sync, and Native Drag-and-Drop - June 14, 2007

    […] This is the AIR version of the browser-based application I recently posted here. The database-related instructions below are therefore very similar. […]

  4. SemanticFind » » Google Gears - June 25, 2007

    […] Волна июньских постов блогеров прошла про Google Gears .Напишу и я ;). Google Gears – это опенсорсное расширение для браузера которое помогает разработчикам создавать веб-приложения оффлайн.Google Gears состоит из трех модулей :Локальный сервер SQLite, База данных и AJAX-сковский WorkerPool Уже существует интеграция с фреймверками Flex , Dojo ну и естественно GWT Англицкий туториал Установить себе […]

  5. Matsiya » Archive du blog » Flex et Google Gears - July 30, 2007

    […] Son Post : Flex and Google Gears: sales force automation application with offline capabilities […]

  6. empulse » Blog Archiv » Wo bleiben die Offline-Anwendungen? - August 9, 2007

    […] Vorschub wird der zukünftigen Nutzung allerdings die Integration von Google Gears in verschiedene AJAX-Libraries wie Flex und Dojo geben. […]

  7. Adobe AIR vs Google Gear | Solution Hacker - April 16, 2008

    […] Flex and Gear actually can work together! (Someone demonstrates this combination via building a sales force application) Share and Enjoy: These icons link to […]

  8. Offline SalesForce.com with Flex & Google Gears « Jeff Douglas - Technology, Coding and Bears… OH MY! - November 18, 2008

    […] Coenraets has an interesting blog post of an offline SalesForce.com application written in Flex (an Apollo version is also available) that […]

Leave a Reply

css.php