SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Downloaden Sie, um offline zu lesen
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.




Peter Schuhmann, Dynamic Lines GmbH
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.




Peter Schuhmann, Dynamic Lines GmbH
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><!-- /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 das
Beispiel 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 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.




Peter Schuhmann, Dynamic Lines GmbH
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.




Peter Schuhmann, Dynamic Lines GmbH
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><!-- /navbar -->




Ergebnis:




Peter Schuhmann, Dynamic Lines GmbH
Partial „Footer“

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




Code:
 <h4>School Management</h4>




Ergebnis:




Peter Schuhmann, Dynamic Lines GmbH
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>




Peter Schuhmann, Dynamic Lines GmbH
Detailansicht

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

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

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

Standard Themes:




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




Peter Schuhmann, Dynamic Lines GmbH
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




Peter Schuhmann, Dynamic Lines GmbH
Links
jQuery Mobile
http://jquerymobile.com



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



Feedback
Peter.Schuhmann@dynamiclines.de




Peter Schuhmann, Dynamic Lines GmbH

Weitere ähnliche Inhalte

Ähnlich wie jQueryMobile mit Extbase/Fluid

JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)Michael Kurz
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notesdominion
 
DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDNUG e.V.
 
Agiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific LanguagesAgiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific LanguagesDominik Hirt
 
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...kaftanenko
 
JavaServer Faces - Ein schneller Schnelleinstieg
JavaServer Faces - Ein schneller SchnelleinstiegJavaServer Faces - Ein schneller Schnelleinstieg
JavaServer Faces - Ein schneller Schnelleinstiegtimbrueckner
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigerThomas Kratz
 
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...Timon Hartung
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop IINico Steiner
 
원주출장샵『카톡op399』업체안전보장(저렴한가격)원주모텔출장 원주노콘출장 원주조건만남 원주콜걸.pdf
원주출장샵『카톡op399』업체안전보장(저렴한가격)원주모텔출장 원주노콘출장 원주조건만남 원주콜걸.pdf원주출장샵『카톡op399』업체안전보장(저렴한가격)원주모텔출장 원주노콘출장 원주조건만남 원주콜걸.pdf
원주출장샵『카톡op399』업체안전보장(저렴한가격)원주모텔출장 원주노콘출장 원주조건만남 원주콜걸.pdfcipami5764
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Stephan Hochdörfer
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5Torsten Landsiedel
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Sven Haiges
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzeRalf Lütke
 

Ähnlich wie jQueryMobile mit Extbase/Fluid (20)

JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
 
DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdf
 
Agiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific LanguagesAgiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific Languages
 
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
 
JavaServer Faces - Ein schneller Schnelleinstieg
JavaServer Faces - Ein schneller SchnelleinstiegJavaServer Faces - Ein schneller Schnelleinstieg
JavaServer Faces - Ein schneller Schnelleinstieg
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
Schema.org 101: 
Warum die neuen Meta Daten wichtig sind - Mini FAQ & Impleme...
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
 
원주출장샵『카톡op399』업체안전보장(저렴한가격)원주모텔출장 원주노콘출장 원주조건만남 원주콜걸.pdf
원주출장샵『카톡op399』업체안전보장(저렴한가격)원주모텔출장 원주노콘출장 원주조건만남 원주콜걸.pdf원주출장샵『카톡op399』업체안전보장(저렴한가격)원주모텔출장 원주노콘출장 원주조건만남 원주콜걸.pdf
원주출장샵『카톡op399』업체안전보장(저렴한가격)원주모텔출장 원주노콘출장 원주조건만남 원주콜걸.pdf
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
Html5 einführung
Html5 einführungHtml5 einführung
Html5 einführung
 
Mvc public
Mvc publicMvc public
Mvc public
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 

jQueryMobile mit Extbase/Fluid

  • 1. JQUERY MOBILE MIT EXTBASE/FLUID Peter Schuhmann, Dynamic Lines GmbH
  • 2. 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. Peter Schuhmann, Dynamic Lines GmbH
  • 3. 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. Peter Schuhmann, Dynamic Lines GmbH
  • 4. 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><!-- /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 das Beispiel 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. 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. Peter Schuhmann, Dynamic Lines GmbH
  • 6. 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. Peter Schuhmann, Dynamic Lines GmbH
  • 7. 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><!-- /navbar --> Ergebnis: Peter Schuhmann, Dynamic Lines GmbH
  • 8. Partial „Footer“ footer.html In 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.html Code: <h4>School Management</h4> Ergebnis: Peter Schuhmann, Dynamic Lines GmbH
  • 9. 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> Peter Schuhmann, Dynamic Lines GmbH
  • 10. Detailansicht Show 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. Bearbeiten Edit 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. Anlegen New 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. Theming Standard Themes: Ein Theme wird immer über das Attribut „data-theme“ festgelegt. Ein Beispiel dafür findet man in der List View (List.html). Peter Schuhmann, Dynamic Lines GmbH
  • 14. 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 Peter Schuhmann, Dynamic Lines GmbH
  • 15. Links jQuery Mobile http://jquerymobile.com jQuery Mobile Examples http://jquerymobile.com/demos/1.1.1/index.html Feedback Peter.Schuhmann@dynamiclines.de Peter Schuhmann, Dynamic Lines GmbH

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n