JQUERY MOBILE MIT EXTBASE/FLUIDPeter Schuhmann, Dynamic Lines GmbH
VorbereitungjQuery Mobile herunterladenhttp://jquerymobile.com/download/Hinweis: jQuery Mobile setzt jQuery voraus. Im Pac...
VorbereitungCSS Einbindenpage.includeCSS {	    file1 = fileadmin/templates/css/jquery.mobile.structure-1.1.1.min.css	    f...
zu jQuery MobileTemplate Aufbau<!DOCTYPE html><html>!    <head>!    <title>My Page</title>!    <meta name="viewport" conte...
Template-Umsetzung mit FluidDa sowohl Header als auch Footer auf allen Seiten gleich sein sollen, bietet es sich an, diese...
jQuery Mobile „Stolpersteine“ mit ExtbaseAJAXjQuery Mobile läd Inhalte standardmäßig via AJAX und setzt anschließend die g...
Partial „Header“header.htmlIn der header.html legen wir die Navigation fest. Ziel ist dabei folgende Darstellung:Code:<div...
Partial „Footer“footer.htmlIn der footer.html legen wir in diesem Fall nur eine Überschrift fest. Weitere Beispiele für Fo...
ListenansichtList View (List.html):<f:layout name="Default" />{namespace x=Tx_MakHtml5Viewhelper_ViewHelpers}             ...
DetailansichtShow View (Show.html):<f:layout name="Default" />{namespace x=Tx_MakHtml5Viewhelper_ViewHelpers}<f:section na...
BearbeitenEdit View (Edit.html):<f:layout name="Default" />{namespace x=Tx_MakHtml5Viewhelper_ViewHelpers}<f:section name=...
AnlegenNew View (New.html):<f:layout name="Default" />{namespace x=Tx_MakHtml5Viewhelper_ViewHelpers}<f:section name="main...
ThemingStandard Themes:Ein Theme wird immer über das Attribut „data-theme“ festgelegt. Ein Beispiel dafürfindet man in der ...
Darstellung optimierenViewport:Bei wem die Darstellung auf dem mobilen Endgerät noch nicht optimal aussieht, dem fehlt wah...
LinksjQuery Mobilehttp://jquerymobile.comjQuery Mobile Exampleshttp://jquerymobile.com/demos/1.1.1/index.htmlFeedbackPeter...
Upcoming SlideShare
Loading in...5
×

jQueryMobile mit Extbase/Fluid

1,829

Published on

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

Published in: Devices & Hardware
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,829
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • jQueryMobile mit Extbase/Fluid

    1. 1. JQUERY MOBILE MIT EXTBASE/FLUIDPeter Schuhmann, Dynamic Lines GmbH
    2. 2. 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
    3. 3. 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
    4. 4. 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
    5. 5. 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
    6. 6. 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
    7. 7. 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
    8. 8. 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
    9. 9. 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
    10. 10. 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
    11. 11. 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
    12. 12. 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
    13. 13. 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
    14. 14. 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
    15. 15. LinksjQuery Mobilehttp://jquerymobile.comjQuery Mobile Exampleshttp://jquerymobile.com/demos/1.1.1/index.htmlFeedbackPeter.Schuhmann@dynamiclines.dePeter Schuhmann, Dynamic Lines GmbH
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×