jQueryMobile mit Extbase/Fluid

JQUERY MOBILE MIT EXTBASE/FLUID

Peter Schuhmann, Dynamic Lines GmbH

Vorbereitung
jQuery Mobile herunterladen
http://jquerymobile.com/download/

Hinweis: jQuery Mobile setzt jQuery voraus. Im Package sind entsprechende Examples vorhanden, die besonders am Anfang
unterstützen und bei der Einbindung helfen können. Bei allen Examples ist auch eine Version von jQuery enthalten. Besonders zu
Beginn 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.


Vorbereitung
CSS Einbinden
page.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 Einbinden
page.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.


zu jQuery Mobile
Template 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>

! <div data-role="content">!
! ! <p>Hello world</p>! !
! </div>

</div>

</body>
</html>

Die einzelnen Subparts des Templates werden mit den Rollen festgelegt („data-role“).

Wichtig: Auf jQueryMobile.com ﬁndet man eine umfangreiche Dokumentation und Beispiele. Sollte man nicht wissen, wie das
Beispiel zustand gekommen ist, kann man einfach in den Seitenquelltext schauen, da dort der reine Quellcode ausgezeigt wird,
bevor Javascript diesen manipuliert hat.

Template-Umsetzung mit Fluid
Da 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.


jQuery Mobile „Stolpersteine“ mit Extbase

AJAX
jQuery Mobile läd Inhalte standardmäßig via AJAX und setzt anschließend die geladene URL als location.href. Durch dieses
Vorgehen funktionieren die Redirects von Extbase nicht mehr. Es gibt aber zwei Möglichkeiten um dieses Problem zu lösen. Zum
einen kann man AJAX permanent deaktivieren, allerdings sind somit keine Page-Transitions mehr möglich. Als akzeptable
Alternative bietet es sich an, AJAX nur für die Actions zu deaktivieren, die ein Redirect auslösen. Um dies mit Extbase/Fluid
realisieren zu können, kann man die Extension „mak_html5_viewhelper“ verwenden, was ich in den weiteren Slides erläutern
werde.


Partial „Header“

header.html
In 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>

Ergebnis:

Partial „Footer“

footer.html
In der footer.html legen wir in diesem Fall nur eine Überschrift fest. Weitere Beispiele für Footers ﬁndet man hier:
http://jquerymobile.com/demos/1.1.1/docs/toolbars/docs-footers.html

Code:
<h4>School Management</h4>

Ergebnis:


Listenansicht

List 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>


Detailansicht

Show View (Show.html):


<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>

<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>


Bearbeiten

Edit View (Edit.html):


<f:flashMessages />

<f:render partial="FormErrors" />


<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'}"


Anlegen

New View (New.html):


<f:flashMessages />

<f:render partial="FormErrors" />

<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'}"


Theming

Standard Themes:

Ein Theme wird immer über das Attribut „data-theme“ festgelegt. Ein Beispiel dafür
ﬁndet man in der List View (List.html).


Darstellung optimieren

Viewport:
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 = COA
page.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_tag


Links
jQuery Mobile
http://jquerymobile.com

jQuery Mobile Examples
http://jquerymobile.com/demos/1.1.1/index.html

Feedback
Peter.Schuhmann@dynamiclines.de


jQueryMobile mit Extbase/Fluid

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie jQueryMobile mit Extbase/Fluid

Ähnlich wie jQueryMobile mit Extbase/Fluid (20)

jQueryMobile mit Extbase/Fluid

Hinweis der Redaktion