jQueryMobile mit Extbase/Fluid
Upcoming SlideShare
Loading in...5
×
 

jQueryMobile mit Extbase/Fluid

on

  • 1,991 views

Vortrag zum Thema "jQueryMobile mit Extbase/Fluid" vom TYPO3 Camp Munich 2012

Vortrag zum Thema "jQueryMobile mit Extbase/Fluid" vom TYPO3 Camp Munich 2012

Statistics

Views

Total Views
1,991
Views on SlideShare
1,961
Embed Views
30

Actions

Likes
1
Downloads
20
Comments
0

2 Embeds 30

http://dev.peterschuhmann.de 29
http://www.peterschuhmann.de 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

jQueryMobile mit Extbase/Fluid jQueryMobile mit Extbase/Fluid Presentation Transcript

  • JQUERY MOBILE MIT EXTBASE/FLUIDPeter Schuhmann, Dynamic Lines GmbH
  • VorbereitungjQuery Mobile herunterladenhttp://jquerymobile.com/download/Hinweis: jQuery Mobile setzt jQuery voraus. Im Package sind entsprechende Examples vorhanden, die besonders am Anfangunterstützen und bei der Einbindung helfen können. Bei allen Examples ist auch eine Version von jQuery enthalten. Besonders zuBeginn empfiehlt es sich diese Version zu verwenden um Inkompatibilitäten mit einer neueren Version zu vermeiden.Beim Upload der Files muss der Order „images“ ebenfalls hochgeladen werden und sich im selben Verzeichnis wie die CSS-Dateien befinden, in meinem Fall wäre der richtige Pfad fileadmin/templates/css/images/ Oder man passt den Pfad in den CSS-Dateien an.Peter Schuhmann, Dynamic Lines GmbH
  • VorbereitungCSS Einbindenpage.includeCSS { file1 = fileadmin/templates/css/jquery.mobile.structure-1.1.1.min.css file1.media = all file2 = fileadmin/templates/css/jquery.mobile.theme-1.1.1.min.css file2.media = all file3 = fileadmin/templates/css/jquery.mobile-1.1.1.min.css file3.media = all}Javascript Einbindenpage.includeJS { file1 = fileadmin/templates/js/jquery.js file2 = fileadmin/templates/js/jquery.mobile-1.1.1.min.js}Wichtig: jQuery muss vor jQuery Mobile eingebunden werden.Peter Schuhmann, Dynamic Lines GmbH
  • zu jQuery MobileTemplate Aufbau<!DOCTYPE html><html>! <head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />! <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>! <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script></head><body><div data-role="page">! <div data-role="header">! ! <h1>My Title</h1>! </div><!-- /header -->! <div data-role="content">!! ! <p>Hello world</p>! !! </div><!-- /content --></div><!-- /page --></body></html>Die einzelnen Subparts des Templates werden mit den Rollen festgelegt („data-role“).Wichtig: Auf jQueryMobile.com findet man eine umfangreiche Dokumentation und Beispiele. Sollte man nicht wissen, wie dasBeispiel zustand gekommen ist, kann man einfach in den Seitenquelltext schauen, da dort der reine Quellcode ausgezeigt wird,bevor Javascript diesen manipuliert hat.Peter Schuhmann, Dynamic Lines GmbH
  • Template-Umsetzung mit FluidDa sowohl Header als auch Footer auf allen Seiten gleich sein sollen, bietet es sich an, diese Teile in Partials auszulagern.Layouts/Default.html<div data-role="page"> <div data-role="header"> <f:render partial="Header"/> </div> <div data-role="content"> <f:render section="main" /> </div> <div data-role="footer"> <f:render partial="Footer"/> </div></div>Somit liefert der jeweilige ViewController die Inhalte für den Content-Bereich.Peter Schuhmann, Dynamic Lines GmbH
  • jQuery Mobile „Stolpersteine“ mit ExtbaseAJAXjQuery Mobile läd Inhalte standardmäßig via AJAX und setzt anschließend die geladene URL als location.href. Durch diesesVorgehen funktionieren die Redirects von Extbase nicht mehr. Es gibt aber zwei Möglichkeiten um dieses Problem zu lösen. Zumeinen kann man AJAX permanent deaktivieren, allerdings sind somit keine Page-Transitions mehr möglich. Als akzeptableAlternative bietet es sich an, AJAX nur für die Actions zu deaktivieren, die ein Redirect auslösen. Um dies mit Extbase/Fluidrealisieren zu können, kann man die Extension „mak_html5_viewhelper“ verwenden, was ich in den weiteren Slides erläuternwerde.Peter Schuhmann, Dynamic Lines GmbH
  • Partial „Header“header.htmlIn der header.html legen wir die Navigation fest. Ziel ist dabei folgende Darstellung:Code:<div data-role="navbar"> <ul> <li><f:link.action action="list" controller="Teacher">Teacher</f:link.action></li> <li><f:link.action action="list" controller="Student">Student</f:link.action></li> <li><f:link.action action="list" controller="Parent">Parent</f:link.action></li> </ul></div><!-- /navbar -->Ergebnis:Peter Schuhmann, Dynamic Lines GmbH
  • Partial „Footer“footer.htmlIn der footer.html legen wir in diesem Fall nur eine Überschrift fest. Weitere Beispiele für Footers findet man hier:http://jquerymobile.com/demos/1.1.1/docs/toolbars/docs-footers.htmlCode: <h4>School Management</h4>Ergebnis:Peter Schuhmann, Dynamic Lines GmbH
  • ListenansichtList View (List.html):<f:layout name="Default" />{namespace x=Tx_MakHtml5Viewhelper_ViewHelpers} Ergebnis:<f:section name="main"><x:link.action action="new" controller="Student" attributes="{data-role :button, data-icon : plus, data-theme: e, data-iconpos: right, data-mini : true}">New Student</x:link.action><f:flashMessages /><ul data-role="listview" data-inset="true"> <li data-theme="a"><h3>Listing for Student</h3></li> <f:for each="{students}" as="student"> <li><f:link.action action="show" arguments="{student :student}">{student.firstname} {student.lastname}</f:link.action></li> </f:for></ul></f:section>Peter Schuhmann, Dynamic Lines GmbH
  • DetailansichtShow View (Show.html):<f:layout name="Default" />{namespace x=Tx_MakHtml5Viewhelper_ViewHelpers}<f:section name="main"><f:flashMessages /><x:link.action action="edit" controller="Student" arguments="{student :student}" attributes="{data-role : button, data-icon : arrow-r, data-theme:e, data-iconpos: right, data-mini : true}">Edit</x:link.action><ul data-role="listview" data-inset="true"> <li data-theme="a"> <h3>Details zu {student.firstname} {student.lastname}</h3> </li> Ergebnis: <li>Firstname: {student.firstname}</li> <li>Lastname: {student.lastname}</li></ul></f:section>Peter Schuhmann, Dynamic Lines GmbH
  • BearbeitenEdit View (Edit.html):<f:layout name="Default" />{namespace x=Tx_MakHtml5Viewhelper_ViewHelpers}<f:section name="main"><f:flashMessages /><f:render partial="FormErrors" /><ul data-role="listview" data-inset="true"> <li data-theme="a"><h3>Edit Student</h3></li> <li> Ergebnis: <x:form action="update" name="student" object="{student}"attributes="{data-ajax : false}"> <f:render partial="Student/FormFields"arguments="{student:student}" /> <f:form.submit value="Save" /> </x:form> </li></ul></f:section>Hinweis: Beim Absenden des Formulars wird die Seite nicht via AJAX übermittelt.Verantwortlich dafür ist die Angabe attributes="{data-ajax : false}"Peter Schuhmann, Dynamic Lines GmbH
  • AnlegenNew View (New.html):<f:layout name="Default" />{namespace x=Tx_MakHtml5Viewhelper_ViewHelpers}<f:section name="main"><f:flashMessages /><f:render partial="FormErrors" /><ul data-role="listview" data-inset="true"> <li data-theme="a"><h3>New Student</h3></li> Ergebnis: <li> <x:form action="create" name="student" object="{student}"attributes="{data-ajax : false}"> <f:render partial="Student/FormFields"arguments="{student:student}" /> <f:form.submit value="Create" /> </x:form> </li></ul></f:section>Hinweis: Beim Absenden des Formulars wird die Seite nicht via AJAX übermittelt.Verantwortlich dafür ist die Angabe attributes="{data-ajax : false}"Peter Schuhmann, Dynamic Lines GmbH
  • ThemingStandard Themes:Ein Theme wird immer über das Attribut „data-theme“ festgelegt. Ein Beispiel dafürfindet man in der List View (List.html).Peter Schuhmann, Dynamic Lines GmbH
  • Darstellung optimierenViewport:Bei wem die Darstellung auf dem mobilen Endgerät noch nicht optimal aussieht, dem fehlt wahrscheinlich der Viewport-Parameter. Der nachfolgende Code sollte das Problem beheben:page.headerData.5 = COApage.headerData.5 { 10 = HTML 10.value = <meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />}Genauere Beschreibung des Viewport-Parameters:https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tagPeter Schuhmann, Dynamic Lines GmbH
  • LinksjQuery Mobilehttp://jquerymobile.comjQuery Mobile Exampleshttp://jquerymobile.com/demos/1.1.1/index.htmlFeedbackPeter.Schuhmann@dynamiclines.dePeter Schuhmann, Dynamic Lines GmbH