Einsatz von jQTouch
jQTouch basiert auf dem JavaScript-Framework jQuery und hat sich innerhalb kürzester Zeit zu einem der beliebtesten Frameworks für iPhone-Webanwendungen entwickelt. JQTouch liefert zwei Styles mit: Einer ähnelt stark der iPhone-OS Oberfläche, der andere ist in schwarz gehalten.
Beim Einbinden von jQTouch wird auch das entsprechende Stylesheet mit eingebunden. Auch dies erledigen Sie über „page.headerData“. Die Einstellungen aus Listing 3 benötigen Sie dabei nicht, da sich jQTouch um die Umleitung kümmert.
page.headerData.71 = TEXT
page.headerData.71 {
value (
<style type="text/css" media="screen">@import "fileadmin/jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "fileadmin/themes/jqt/theme.css";</style>
<style type="text/css" media="screen">@import "fileadmin/style.css";</style>
<script xsrc="fileadmin/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script xsrc="fileadmin/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
)
}
Listing 4
Neben den beiden JavaScript-Dateien (jQuery als zugrundeliegendes Framework und jQTouch selbst) müssen Sie auch mehrere Stylesheets einbinden. Das Haupt-Stylesheet „jqtouch.min.css“ enthält alle wichtigen Styles von jQTouch selbst (z. B. für Transitions), „theme.css“ enthält die Themes und „style.css“ ihre eigenen Styles.
Es folgt die Grundkonfiguration. Hier müssen Sie ein paar Eigenheiten von TYPO3 ausmerzen:
page {
config {
#entfernt diverse Header-Angaben
disableAllHeaderCode = 1
#Standard-Div-Wrap um pi deaktivieren
disableBaseClassWrap = 1
#entfern die HTML-Kommentare
disablePrefixComment = 1
}
}
Listing 5
Jetzt können Sie jQTouch initialisieren. Dazu verwenden Sie diesen kurzen Code, den Sie einfach in „page.headerData“ einfügen:
<script type="text/javascript" charset="utf-8">
$.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'fileadmin/themes/jqt/img/chevron_white.png',
'fileadmin/themes/jqt/img/bg_row_select.gif',
'fileadmin/themes/jqt/img/back_button.png',
'fileadmin/themes/jqt/img/back_button_clicked.png',
'fileadmin/themes/jqt/img/button_clicked.png',
'fileadmin/themes/jqt/img/grayButton.png',
'fileadmin/themes/jqt/img/whiteButton.png',
'fileadmin/themes/jqt/img/loading.gif'
]
});
</script>
Listing 6
Als HTML-Vorlage reicht fürs Erste ein wenig Code mit einigen Markern:
<html> <head> </head> <body> <!-- ###DOCUMENT### --> <div id="home"> <div class="toolbar"> <h1>###TITLE###</h1> ###BUTTON### </div> ###MENU### </div> <!-- ###DOCUMENT### --> </body> </html>
Listing 7
Wenn Sie jetzt noch das folgende TypoScript einbinden, haben Sie schon mal eine grundsätzlich einsatzbereite Website, allerdings noch ohne Navigation:
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/index.html
page.10.workOnSubpart = DOCUMENT
page.10.marks {
TITLE=TEXT
TITLE.field = title
}
page.10.marks.MENU < styles.content.get
page.10.marks.BUTTON = TEXT
page.10.marks.BUTTON.value = <a class="back" href="#home">Home</a>
Listing 8
Um die Navigation aufzubauen, nutzen Sie folgendes TypoScript:
temp.menu = COA
temp.menu.1 = HMENU
temp.menu.1 {
entryLevel=0
1 = TMENU
1 {
expAll = 0
noBlur = 1
wrap = <ul>|</ul>
NO = 1
NO {
allWrap = <li class="forward">|</li>
}
}
}
Listing 9
Damit ist Ihre Website lauffähig. Zwar gibt es jetzt noch großen Spielraum für Optimierungen, aber der Anfang ist gemacht.
iPhone-App für TYPO3
Wenn Sie TYPO3-Websites von unterwegs per iPhone warten und mit Inhalten befüllen möchten, sollten Sie die kostenlose iPhone-App der Hannoveraner TYPO3-Agentur naw.info ausprobieren [3]. Voraussetzung für die Nutzung der App ist die Installation der Extension „typo3_webservice", die TYPO3 um einen Webservice erweitert, der von verschiedensten Applikationen angesprochen werden kann.
Als Proof-of-Concept für den Webservice hat naw.info eine iPhone-App entwickelt und veröffentlicht, die Sie über den AppStore installieren können. Im Moment ist es damit lediglich möglich, tt_news-Beiträge anzulegen und diese zu editieren. Da der Quellcode der App aber frei zugänglich ist, können Sie die Applikation leicht weiterentwickeln.
Alexander Ebner arbeitet als TYPO3-Developer bei einem Münchner Reiseveranstalter. Als Entwickler setzt er seit Jahren auf PHP/MySQL und lernte dadurch auch TYPO3 als CMS kennen und schätzen. Seit einiger Zeit beschäftigt er sich zudem intensiv mit der Entwicklung für das iPhone.
6 Antworten
von Mobile Entwicklung: Der ultimative Über… 22.03.2010 (15:03Uhr) 1.
[...] der findet in unserem Magazinarchiv weitere Texte. So gibt es in t3n Nr. 19 einen Artikel, um TYPO3 für das iPhone zu optimieren. Von Ausgabe Nr. 13 an findet man zudem einen mehrteiligen Kurs, in dem eine iPhone-Webapplikation [...]
von Mit einfachen Mitteln zur mobilen Websit… 12.07.2010 (09:11Uhr) 2.
[...] einer iPhone-optimierten Website. Unser Beitrag aus t3n Magazin Nr. 19 zeigt, wie leicht das geht. Er steht jetzt kostenlos im Heftarchiv zur Verfügung. Zudem kannst Du t3n Nr. 19 versandkostenfrei in unserem Shop bestellen. Ads_BA_AD('CAD2'); typo3 [...]
von Alexander Weber 03.05.2011 (02:39Uhr) 3.
hallo, mit der t3m_iphoneweb extension soll man ja auch recht schnell ans ziel kommen. ich hatte damit so meine probleme und es fehlen auch viele dinge. daher habe ich selber auch eine extension geschrieben. wann ich sie veröffentlicht kann ich noch nicht mit bestimmtheit sagen. aber ein demo ist hier schon zu finden: http://www.blog.exotec.de/?p=482
von mirco 26.07.2011 (15:51Uhr) 4.
Hallo
Vielen Dank für die Anleitung.
Habe z.Z. doch noch ein kleines Problem das Menü ist eingebunden, wenn ich aber einen Link auswähle erscheint eine schwarze Seite. Ich denke ich habe einfach nur einen denkfelher was das einbinden des Menüs betrifft.
MENU < temp.menu.1
Vielen Dank voraus für Ihre Hilfe
MFG
Mirco
von iPhone Navigation mit TMENU JQTouch - TY… 26.07.2011 (17:47Uhr) 5.
[...] [...]
von typo3+iphone - TYPO3 Forum & Portal 20.12.2011 (07:45Uhr) 6.
[...] [...]