This document discusses how Flex can meet HTML5 capabilities through various APIs. It summarizes Flex's ability to leverage the HTML5 Web Storage API, Geolocation API, and Web SQL Database through corresponding ActionScript libraries. The Web Storage API allows storing key-value pairs in the browser through Session Storage and Local Storage. The Geolocation API obtains the user's location. And the Web SQL Database provides an SQL interface for storing data locally. Flex can interface with these HTML5 APIs through ActionScript using ExternalInterface to call JavaScript functions, enabling offline Flash applications using HTML5 features.

1. Flex meets HTML5 Family
@shoito
2010/09/11(Sat)

2. / shoito

3. → [4Y]

5. • HTML5 HTML5 Family
• Web Storage API as3webstorage
• Geolocation API as3geolocation
•

6. HTML5 HTML5 Family

7. Indexed Database
Web workers API
Web Storage Geolocation API
HTML5
WebSocket File API
Web SQL Database ...etc
HTML5 & HTML5 Family

8. Web Storage API
as3webstorage

9. KEY : VALUE
KEY : VALUE
KEY : VALUE
Web Storage API

10. Session Storage
•
•
sessionStorage.setItem(“key”, “value”);
sessionStorage.removeItem(“key”);
sessionStorage.clear();

11. Local Storage
•
•
•
localStorage.setItem(“key”, “value”);
localStorage.removeItem(“key”);
localStorage.clear();

12. as3webstorage
ActionScript3 Web Storage

13. Flash
Flash
HTML SharedObject
100KB ( )
Web Storage
5MB
:

14. ActionScript <-> JavaScript
ExternalInterface

15. flash.external.ExternalInterface
ActionScript function hoge( ):void
(Flash)
ExternalInterface ExternalInterface
.call(funcJ); .addCallback(“funcA”, hoge);
function funcJ( ) { } funcA();
JavaScript
(HTML)

16. Geolocation API
as3geolocation

17. Geolocation API

18. as3geolocation
ActionScript3 Geolocation

22. Web SQL Database
Flash + HTML 5:
Offline Flash Apps using DataStore API

24. • Flex
ActionScript <-> JavaScript
• ExternalInterface AS <-> JS XML
• AS <-> JS

25. Thanks!
@shoito
2010/09/11(Sat)