Nick Ager                              @nickagerlunes 3 de septiembre de 12
Plan                     • Overview of jQueryMobile                     • Seaside integration with jQueryMobile           ...
Installation                              http://jquerymobile.seasidehosting.stlunes 3 de septiembre de 12
Follow along                              http://jquerymobile.seasidehosting.stlunes 3 de septiembre de 12
#1 jQuerylunes 3 de septiembre de 12
#2 jQuery Mobile                              Progressive enhancementlunes 3 de septiembre de 12
Widely usedlunes 3 de septiembre de 12
Demo                JQMAdmin register: WACounter asApplicationAt: example1.lunes 3 de septiembre de 12
HiJax                               JQueryMobile orchestrates the                              transition between the two ...
HiJax                               JQueryMobile orchestrates the                              transition between the two ...
HiJax                               JQueryMobile orchestrates Next page downloads in                                      ...
HiJax                               JQueryMobile orchestrates Next page downloads in                                      ...
HiJax                               JQueryMobile orchestrates the                              transition between the two ...
Seaside adds surrounding page div      WACounter>>renderContentOn: html      ! html heading: count.      ! html anchor    ...
Seaside changes the binding                              document>>addLoadScript:       JQMEvents>>renderOrientationChange...
JQMAdmin       JQMAdmin register: WACounter asApplicationAt: example1.       JQMAdmin class>>register: aComponentClass asA...
ids: session unique VS page unique      JQMRenderPhaseContinuation>>createRenderContext      ! | renderContext |      ! "c...
Demo                JQMAdmin register: WACounter2 asApplicationAt: example2.                              Removing address...
Seaside’s modular architecture                         made it possible to plug-in                        components to mo...
Precaching                JQMAdmin register: WACounter3 asApplicationAt: example3.                 WACounter3>>renderConte...
Seaside call: & answer:       JQMAdmin register: JQMSampleFlickrHome asApplicationAt:           jqm-samples/flickr.     Re...
JQMSampleFlickrHome     JQMSampleFlickrHome>>renderContentOn: html     ! html div     ! ! jqmContent;     ! ! with: [     ...
answer:              JQMSampleFlickrBase>>initialize              ! super initialize.              !              ! self a...
Widgets                                            • Provides consistent widget set                                       ...
DEMOlunes 3 de septiembre de 12
Widget styling occurs                       (mainly) automatically                     JQMFormBase>>renderSliderOn: html  ...
JQMFormBase>>renderRadioButtonPetsOn: html                      ! "*Slider>http://jquerymobile.com/test/docs/forms/radiobu...
JQMFormBase>>renderFlipSwitchOn: html         "*Flip Toggle Switch>http://jquerymobile.com/test/docs/forms/switch/"       ...
JQMFormBase>>renderCheckButtonFontStylingOn: html                         self renderFormElementOn: html element: [       ...
jQuery Mobile specific                     • layout grids                     • collapsible content blocks                 ...
Mobile apps                                DEMOlunes 3 de septiembre de 12
Step #1                        [self.webView loadRequest:                            [NSURLRequest requestWithURL:        ...
Step #2            CGRect bounds = self.window.bounds;            self.webView = [[[UIWebView alloc] initWithFrame: bounds...
Outstanding                     • Making a builder                     • Android & Windows 8 ports                     • R...
Acknowledgements                     • Louis Andriese                     • Esteban                     • John Macintosh  ...
Questions?lunes 3 de septiembre de 12
Prochain SlideShare
Chargement dans…5
×

Building An App Based On JQuery Mobile And iOs Pharo

2 980 vues

Publié le

ESUG 2012, Ghent

Publié dans : Technologie
  • Soyez le premier à commenter

Building An App Based On JQuery Mobile And iOs Pharo

  1. 1. Nick Ager @nickagerlunes 3 de septiembre de 12
  2. 2. Plan • Overview of jQueryMobile • Seaside integration with jQueryMobile • Building an app with Pharo, Seaside jQueryMobile • Questionslunes 3 de septiembre de 12
  3. 3. Installation http://jquerymobile.seasidehosting.stlunes 3 de septiembre de 12
  4. 4. Follow along http://jquerymobile.seasidehosting.stlunes 3 de septiembre de 12
  5. 5. #1 jQuerylunes 3 de septiembre de 12
  6. 6. #2 jQuery Mobile Progressive enhancementlunes 3 de septiembre de 12
  7. 7. Widely usedlunes 3 de septiembre de 12
  8. 8. Demo JQMAdmin register: WACounter asApplicationAt: example1.lunes 3 de septiembre de 12
  9. 9. HiJax JQueryMobile orchestrates the transition between the two pageslunes 3 de septiembre de 12
  10. 10. HiJax JQueryMobile orchestrates the transition between the two pageslunes 3 de septiembre de 12
  11. 11. HiJax JQueryMobile orchestrates Next page downloads in the transition between the two pages backgroundlunes 3 de septiembre de 12
  12. 12. HiJax JQueryMobile orchestrates Next page downloads in the transition between the two pages backgroundlunes 3 de septiembre de 12
  13. 13. HiJax JQueryMobile orchestrates the transition between the two pageslunes 3 de septiembre de 12
  14. 14. Seaside adds surrounding page div WACounter>>renderContentOn: html ! html heading: count. ! html anchor ! ! jqmTransitionFlip; ! ! callback: [ self increase ]; ! ! with: ++. ! html space. ! html anchor ! ! jqmTransitionFade; ! ! callback: [ self decrease ]; ! ! with: -- <div data-role="page" id="pageId1"> <h1>0</h1> <a data-transition="flip" href="/example1?_s=pd7WE5NXDZgQ645v&_k=_cTKIFL5PeEz1RRS&1">++</a> &nbsp; <a data-transition="fade" href="/example1?_s=pd7WE5NXDZgQ645v&_k=_cTKIFL5PeEz1RRS&2">--</a> </div>lunes 3 de septiembre de 12
  15. 15. Seaside changes the binding document>>addLoadScript: JQMEvents>>renderOrientationChangeEventOn: html html heading level4; id: html nextId; with: Text changes on new orientation. html document addLoadScript: (html jQuery page onOrientationChange: ($("#, html lastId, ").text("Orientation: " + event.orientation) asFunction: #(event))) <div data-role="page" id="pageId5"> <h4 id="id1">Text changes on new orientation</h4> <script type="text/javascript">/*<![CDATA[*/$("#pageId5").bind("pageinit", function(){$("#pageId5").bind("orientationchange",function(event){$ ("#id1").text("Orientation: " + event.orientation)});});/*]]>*/</script> </div> /javascript/jquery-mobile/Eventslunes 3 de septiembre de 12
  16. 16. JQMAdmin JQMAdmin register: WACounter asApplicationAt: example1. JQMAdmin class>>register: aComponentClass asApplicationAt: aString ! | application | ! application := super register: aComponentClass asApplicationAt: aString. ! application preferenceAt: #scriptGeneratorClass put: JQMScriptGenerator. ! application preferenceAt: #rootDecorationClasses put: #(). ! application preferenceAt: #renderPhaseContinuationClass put: JQMRenderPhaseContinuation. ! ^ applicationlunes 3 de septiembre de 12
  17. 17. ids: session unique VS page unique JQMRenderPhaseContinuation>>createRenderContext ! | renderContext | ! "create a custom render context - which in turn creates a custom callback registry which provides callback ids (html nextId) which are session unique, rather than page unique" ! ! renderContext := JQMRenderContext new. ! ! renderContext visitor: (WARenderingGuide client: renderContext visitor). ! ! ^ renderContext JQMEvents>>renderOrientationChangeEventOn: html html heading level4; id: html nextId; with: Text changes on new orientation. html document addLoadScript: (html jQuery page onOrientationChange: ($("#, html lastId, ").text("Orientation: " + event.orientation) asFunction: #(event)))lunes 3 de septiembre de 12
  18. 18. Demo JQMAdmin register: WACounter2 asApplicationAt: example2. Removing address bar dipping JQMTestPageBase>>rendererClass    ^ JQMHtmlCanvas JQMHtmlCanvas>>anchor ! | anchorBrushClass | ! anchorBrushClass := self requestContext request jqmUserAgent isIOS ! ! ifTrue: [ JQMIOSAnchorTag ] ! ! ifFalse: [ WAAnchorTag ]. ! ! ! ^ self brush: anchorBrushClass newlunes 3 de septiembre de 12
  19. 19. Seaside’s modular architecture made it possible to plug-in components to modify page rendering add rewire the page script initialisationlunes 3 de septiembre de 12
  20. 20. Precaching JQMAdmin register: WACounter3 asApplicationAt: example3. WACounter3>>renderContentOn: html ! html heading: count. ! html anchor ! ! jqmPrefetch; ! ! callback: [ ! ! ! (Delay forSeconds: 5) wait. ! ! ! self increase ]; ! ! with: ++. ! html space. simulating a slow net work ! html anchor ! ! jqmPrefetch; ! ! callback: [ ! ! ! (Delay forSeconds: 5) wait. ! ! ! self decrease ]; ! ! with: --lunes 3 de septiembre de 12
  21. 21. Seaside call: & answer: JQMAdmin register: JQMSampleFlickrHome asApplicationAt: jqm-samples/flickr. Repository: http://ss3.gemstone.com/ss/jQueryMobileSamples DEMO http://vimeo.com/31600152lunes 3 de septiembre de 12
  22. 22. JQMSampleFlickrHome JQMSampleFlickrHome>>renderContentOn: html ! html div ! ! jqmContent; ! ! with: [ ! ! ! html paragraph: Enter a tag to retrieve Flickr photos:. ! ! ! self renderFormOn: html ] JQMSampleFlickrHome>>renderFormOn: html ! html form: [ ! ! html textInput ! ! ! on: #flickrTag of: self. ! ! html submitButton ! ! ! callback: [ self show: (JQMSampleFlickrSlideShow flickrTag: self flickrTag) ]; ! ! ! with: View Slide Show ]lunes 3 de septiembre de 12
  23. 23. answer: JQMSampleFlickrBase>>initialize ! super initialize. ! ! self addDecoration: JQMSampleFlickrToolbar new. ! self addDecoration: JQMIOSHomescreenBookmarkDecorator new. JQMSampleFlickrToolbar>>renderContentOn: html ! html div ! ! jqmHeader; ! with: [ ! html anchor ! ! ! jqmIcon: home; ! ! ! jqmReverse; ! ! ! jqmIconNoText; ! ! ! callback: [ self decoratedComponent answer ]. ! ! html heading ! level1; ! with: Flickr photos ]. ! ! super renderContentOn: html.lunes 3 de septiembre de 12
  24. 24. Widgets • Provides consistent widget set closely matching iPhones native widgets • Degrades gracefully for less capable browsers • Uses Html & Html 5 widgets http://jquerymobile.seasidehosting.st/seaside/javascript/jquery-mobile/Form-element-gallerylunes 3 de septiembre de 12
  25. 25. DEMOlunes 3 de septiembre de 12
  26. 26. Widget styling occurs (mainly) automatically JQMFormBase>>renderSliderOn: html ! "*Slider>http://jquerymobile.com/test/docs/forms/slider/*" ! self renderFormElementOn: html element: [ ! ! html label ! ! ! for: html nextId; ! ! ! with: Input slider:. ! ! ! ! ! html rangeInput ! ! ! id: html lastId; ! ! ! value: 50; ! ! ! min: 0; ! ! ! max: 100 ].lunes 3 de septiembre de 12
  27. 27. JQMFormBase>>renderRadioButtonPetsOn: html ! "*Slider>http://jquerymobile.com/test/docs/forms/radiobuttons/*" ! self renderFormElementOn: html element: [ ! ! html fieldSet ! ! ! jqmControlGroup; ! ! ! with: [ ! ! ! ! | pets | ! ! ! ! pets := #(Cat Dog Hamster Lizard). ! ! ! ! html radioGroup ! ! ! ! ! selected: pets first; ! ! ! ! ! with: [ :group | ! ! ! ! ! ! html legend: Choose a pet:. ! ! ! ! ! ! pets do: [ :each | ! ! ! ! ! ! ! html label ! ! ! ! ! ! ! ! for: html nextId; ! ! ! ! ! ! ! ! with: each. ! ! ! ! ! ! ! html radioButton ! ! ! ! ! ! ! ! group: group; ! ! ! ! ! ! ! ! value: each; ! ! ! ! ! ! ! ! id: html lastId ] ] ] ].lunes 3 de septiembre de 12
  28. 28. JQMFormBase>>renderFlipSwitchOn: html "*Flip Toggle Switch>http://jquerymobile.com/test/docs/forms/switch/" self renderFormElementOn: html element: [ html label for: html nextId; with: Flip switch:. html select list: #(On Off); jqmSlider; id: html lastId ]lunes 3 de septiembre de 12
  29. 29. JQMFormBase>>renderCheckButtonFontStylingOn: html self renderFormElementOn: html element: [ html fieldSet jqmControlGroup; jqmHorizontal; with: [ html legend: Font styling:. html label for: html nextId; with: b. html checkbox id: html lastId. html label for: html nextId; with: [ html emphasis: i ]. html checkbox id: html lastId. html label for: html nextId; with: u. html checkbox id: html lastId ] ].lunes 3 de septiembre de 12
  30. 30. jQuery Mobile specific • layout grids • collapsible content blocks • accordions • theminglunes 3 de septiembre de 12
  31. 31. Mobile apps DEMOlunes 3 de septiembre de 12
  32. 32. Step #1 [self.webView loadRequest: [NSURLRequest requestWithURL: [NSURL URLWithString: @"http://jquerymobile.seasidehosting.st"]]];lunes 3 de septiembre de 12
  33. 33. Step #2 CGRect bounds = self.window.bounds; self.webView = [[[UIWebView alloc] initWithFrame: bounds] autorelease]; [self.webView setAutoresizingMask: UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth ]; [self.window addSubview:self.webView];lunes 3 de septiembre de 12
  34. 34. Outstanding • Making a builder • Android & Windows 8 ports • Remote development to an ‘i’devicelunes 3 de septiembre de 12
  35. 35. Acknowledgements • Louis Andriese • Esteban • John Macintosh • Seaside teamlunes 3 de septiembre de 12
  36. 36. Questions?lunes 3 de septiembre de 12

×