Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kss Extjs

3,197 views

Published on

Published in: Technology, Travel
  • Be the first to comment

Kss Extjs

  1. 1. <ul><li>RIA with KSS, ExtJS, and more </li></ul><ul><li>Plone Conference </li></ul><ul><li>Washington DC 2008 </li></ul><ul><li>Godefroid Chapelle - BubbleNet </li></ul>
  2. 2. <ul><li>Outline </li></ul><ul><li>Definitions </li></ul><ul><li>ExtJS </li></ul><ul><li>Goals </li></ul><ul><li>Code </li></ul>
  3. 3. <ul><li>Definitions – RIA </li></ul><ul><li>Buzzword ;-) </li></ul><ul><li>Rich Internet Application </li></ul><ul><li>like desktop application </li></ul><ul><li>lots of forms </li></ul>
  4. 4. <ul><li>Demo </li></ul><ul><ul><li>Tabellio </li></ul></ul><ul><ul><li>Legislative process management system </li></ul></ul><ul><ul><li>Parlement de la communauté française </li></ul></ul><ul><ul><li>Parlement francophone bruxellois </li></ul></ul>
  5. 5. <ul><li>Definitions – KSS </li></ul><ul><li>Javascript – Ajax library </li></ul><ul><li>layered approach </li></ul><ul><ul><li>CSS selectors </li></ul></ul><ul><ul><li>serialized commands </li></ul></ul>
  6. 6. <ul><li>Definitions – ExtJs </li></ul><ul><li>Javascript – Ajax library </li></ul><ul><li>Component-based </li></ul>
  7. 7. <ul><li>ExtJS – User wise </li></ul><ul><li>Lots of components </li></ul><ul><ul><li>Usual controls </li></ul></ul><ul><ul><li>Grids </li></ul></ul><ul><ul><li>Windows </li></ul></ul>
  8. 8. <ul><li>ExtJS – Developer wise </li></ul><ul><li>Clean JS code </li></ul><ul><li>Good documentation </li></ul><ul><li>License </li></ul>
  9. 9. <ul><li>ExtJS – Architecture </li></ul><ul><li>Highly configurable </li></ul><ul><li>Stylable </li></ul><ul><li>Event system </li></ul><ul><li>Data stores </li></ul>
  10. 10. <ul><li>Goals </li></ul><ul><li>Usability </li></ul><ul><li>Degradability </li></ul><ul><li>Ease of development </li></ul>
  11. 11. <ul><li>Usability </li></ul><ul><li>Form layout </li></ul><ul><ul><li>blueprint.css </li></ul></ul>
  12. 12. Definitions – blueprint.css <ul><li>CSS framework </li></ul><ul><li>grid layout </li></ul>
  13. 13. <ul><li>Ease of development </li></ul><ul><li>Genericity </li></ul><ul><ul><li>z3c.form </li></ul></ul><ul><ul><li>z3c.table </li></ul></ul>
  14. 14. Code – Server-side action <ul><ul><li>html = self.form.render() </li></ul></ul><ul><ul><li>config = dict( </li></ul></ul><ul><ul><li> title=view.label, height=height, </li></ul></ul><ul><ul><li>modal=True, html=html) </li></ul></ul><ul><ul><li>json = convertToJson(config) </li></ul></ul><ul><ul><li>extjs = self.getCommandSet('extjs') </li></ul></ul><ul><ul><li>extjs.jsonData(WINDOW_OPTIONS, json) </li></ul></ul><ul><ul><li>extjs.openModalWindow(WINDOW_OPTIONS, </li></ul></ul><ul><ul><li>self.getFirstWidgetId()) </li></ul></ul>
  15. 15. Code – Layout <ul><ul><li>class MeetingLocationViewForm(Form): </li></ul></ul><ul><ul><li>implements(IBlueprintLayoutable) </li></ul></ul><ul><ul><li>blueprint_layout = Layout([ </li></ul></ul><ul><ul><li>(&quot;span-16 append-8 last&quot;, &quot;area&quot;), </li></ul></ul><ul><ul><li>(&quot;span-16 append-8 last&quot;, [ </li></ul></ul><ul><ul><li>(&quot;span-7&quot;, &quot;public_id&quot;), </li></ul></ul><ul><ul><li>(&quot;span-7&quot;, &quot;name&quot;) </li></ul></ul><ul><ul><li>]), </li></ul></ul><ul><ul><li>(&quot;span-16 append-8 last&quot;, </li></ul></ul><ul><ul><li>&quot;comments&quot;) </li></ul></ul><ul><ul><li>]) </li></ul></ul>
  16. 16. <ul><li>Code – Eggs </li></ul><ul><li>collective.extjs </li></ul><ul><li>kss.plugin.extjs </li></ul><ul><li>collective.z3ctable.extjs </li></ul><ul><li>collective.blueprintcss </li></ul><ul><li>collective.z3cform.contentproviders </li></ul>
  17. 17. <ul><li>collective.extjs </li></ul><ul><li>ExtJS packaging </li></ul><ul><li>Zope 3 resources </li></ul>
  18. 18. <ul><li>kss.plugin.extjs </li></ul><ul><li>KSS-ExtJS events integration </li></ul><ul><li>KSS actions </li></ul><ul><ul><li>configuration </li></ul></ul><ul><ul><li>component </li></ul></ul>
  19. 19. <ul><li>collective.z3ctable.extjs </li></ul><ul><li>JSON views on z3c.table </li></ul>
  20. 20. <ul><li>collective.blueprintcss </li></ul><ul><li>default blueprint CSS packaging </li></ul><ul><li>content provider </li></ul>
  21. 21. <ul><li>collective.z3cform.contentproviders </li></ul><ul><li>widgets as content providers </li></ul>
  22. 22. <ul><li>Thanks !! </li></ul>

×