Community Code: SCircles

1,770 views

Published on

Custom Components, Theming, Drag-and-drop - Building a Social Network Engine with Ext JS 4 This showcase will demonstrate that Ext JS is not only suitable for internal corporate applications, but can be used for powerful consumer servies as well. ‘SCircles’ is an application that looks so different to normal Ext JS apps that it is hard to recognize it uses Sencha technology at all - and will serve as a demonstration of custom theming, custom components, and the use of the framework’s drag-and-drop capabilities.

Tobias Uhlig works with the Sencha Frameworks on a fulltime basis since he joined the Sencha Community at the very beginning in May 2007. As a passionate User Interface Engineer for over a decade, besides building amazing Rich Internet Applications, he has specialized in creating Custom Components and Extensions on top of the Sencha Frameworks as well as Theming and Performance Improvements. After working on one of the worlds largest Ext JS Applications at Refined Labs for 1.5 years, he is now joining Sencha to bring in his experience and knowledge. Tobias founded the Sencha Usergroup in Munich, Germany

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,770
On SlideShare
0
From Embeds
0
Number of Embeds
130
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Community Code: SCircles

  1. 1. COMMUNITY CODE S-CIRCLES
  2. 2. AGENDA· THE TEAM· WHAT IS S-CIRCLES?· THE PERSPECTIVE· CODING SESSION· LIVE DEMO· QUESTIONS S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  3. 3. THE TEAM MAX WIDDRA · Occupation: Art Director at WINCOMMUNICATION (http://www.wincommunication.de) ·Specialized in: Web, interface and editorial-design, User Experience · Tools: Photoshop, Illustrator, Indesign, mindmaps · Online projects since 2001 S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  4. 4. THE TEAM BASTIAN HAUSTEIN · CEO of source lounge (http://www.source-lounge.de) · Works mainly as consultant · Uses PHP, MySQL, HTML and JavaScript but is specialized in HTML5 and software architecture · Loves to be a „front end freak“, giving modern apps the feeling of being native, but even cooler ;-) S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  5. 5. THE TEAM TOBIAS UHLIG · Woking fulltime with the Sencha Frameworks since May 2007 · User Interface engineer at Refined Labs for the last 1.5 years (http://www.refinedlabs.com/en/) · Extthemes.com · fieldmanager S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  6. 6. WHAT IS S-CIRCLESWELCOME TO OUR SOCIALMEDIA EXPERIMENT· S-Circles is a prototype of a brand new community platform· The idea of the name: custom subdomains like → Tobias-Uhlig.sCircles.net· Users shall use it everywhere with native support for their environment ( Ext JS 4 +Sencha Touch Version)· S-Circles communities can exist in the open space but we will focus usage oncompany intranets· Development still in progress (beta is scheduled for the end of 2011)·Long TODO List including connecting to other neworks that offer API access, webinars(Video Chat), an own API, ST 2 version + Phonegap to upload fotos, ... S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  7. 7. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  8. 8. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  9. 9. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  10. 10. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  11. 11. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  12. 12. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  13. 13. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  14. 14. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  15. 15. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  16. 16. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  17. 17. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  18. 18. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  19. 19. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  20. 20. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  21. 21. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  22. 22. THE PERSPECTIVE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  23. 23. CODING SESSIONSO, LETS BUILD A CIRCLE· To keep it simple, we are not using the Ext JS MVC Pattern· The first structure: S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  24. 24. CODING SESSIONSO, LETS BUILD A CIRCLE· We start with an Ext Window S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  25. 25. CODING SESSIONSO, LETS BUILD A CIRCLE· The Custom Component S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  26. 26. CODING SESSIONSO, LETS BUILD A CIRCLE· The Custom Component S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  27. 27. CODING SESSIONSO, LETS BUILD A CIRCLE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  28. 28. CODING SESSIONSO, LETS BUILD A CIRCLE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  29. 29. CODING SESSIONSO, LETS BUILD A CIRCLE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  30. 30. CODING SESSIONSO, LETS BUILD A CIRCLE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  31. 31. CODING SESSIONSO, LETS BUILD A CIRCLE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  32. 32. CODING SESSIONSO, LETS BUILD A CIRCLE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  33. 33. CODING SESSIONSO, LETS BUILD A CIRCLE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  34. 34. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  35. 35. CODING SESSIONSO, LETS BUILD A CIRCLE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  36. 36. CODING SESSIONSO, LETS BUILD A CIRCLE S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  37. 37. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  38. 38. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  39. 39. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  40. 40. CODING SESSIONSO, LETS BUILD A CIRCLE· Contact Icons S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  41. 41. CODING SESSIONSO, LETS BUILD A CIRCLE· Custom Positions S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  42. 42. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  43. 43. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  44. 44. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  45. 45. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  46. 46. CODING SESSIONSO, LETS BUILD A CIRCLE· Contact Icons → mouseenter, mouseleave S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  47. 47. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  48. 48. CODING SESSIONSO, LETS BUILD A CIRCLE· Drag & Drop S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  49. 49. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  50. 50. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  51. 51. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  52. 52. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  53. 53. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  54. 54. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  55. 55. CODING SESSION S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  56. 56. LIVE DEMO· Ext JS Version:http://circles.source-lounge.de (Webkit only!)· Sencha Touch Version:http://circles.source-lounge.de· Sencha Touch Version for non mobile device:http://circles.source-lounge.de/mobile/SCirclesMobile/app/frame_debug.html· Coding Session:http://circles.source-lounge.de/SenchaCon/Circles/ S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.
  57. 57. QUESTIONS?uhlig@extthemes.comSencha Forum Topic:http://www.sencha.com/forum/showthread.php?152143Via S-Circles soon! S-CIRCLES 2011. ALL RIGHTS RESERVED. UHLIG, HAUSTEIN, WIDDRA.

×