Bild

MobileSystem Demo: BML-Tutorial

Hin­weis: Die­se Be­schrei­bung rich­tet sich an Soft­wa­re-Ent­wick­ler, die be­reits ein we­nig Er­fah­rung mit der De­fi­ni­ti­on von GUI-Da­tei­en für iOS so­wie mit der Ver­wen­dung von XML ha­ben.

Die­ses Tu­to­ri­al führt Sie in we­ni­gen ein­fa­chen Schrit­ten in die Dia­lo­g-De­fi­ni­ti­on mit Hil­fe von BML ein. Nach­dem Sie die­ses Tu­to­ri­al durch­ge­ar­bei­tet ha­ben, soll­ten Sie ein Grund­ver­ständ­nis der ein­zel­nen Ba­sis­bau­stei­ne von BML so­wie der Grund­struk­tur ei­ner BML-Da­tei ha­ben. Mit die­sem Hand­werk­zeug aus­ge­rüs­tet soll­ten Sie in der Lage sein, alle als Bei­spiel ver­füg­ba­ren BML-Dia­lo­ge zu ver­ste­hen, zu än­dern oder voll­kom­men neue Dia­lo­ge zu de­fi­nie­ren.

Voraussetzungen

Bevor Sie beginnen können, benötigen Sie

Die B-Wise XA MobileClient App

Ein Benutzerkonto auf dem BISS Demo-Server

Einen Texteditor Ihrer Wahl (z.B. Notepad, Notepad++ oder Ultraedit)

Ein entsprechendes mobiles Gerät, um sich die Früchte Ihrer Arbeit anschauen zu können; aktuell werden iPhone und iPod mit iOS ab Version 5 unterstützt.

Was ist BML?

BML (B-Wise Markup Language) ist eine auf XML basierende Auszeichnungssprache, die zur Beschreibung von Dialogen bzw. einzelnen Dialogelementen genutzt wird. Dabei werden die einzelnen Komponenten des Dialogs wie z.B. Eingabefelder, Listen oder Texte mit Hilfe einzelner "Tags" (XML-Anweisungen) beschrieben. Jede BML-Datei beschreibt normalerweise genau einen Dialog (auch wenn sich dies mit Hilfe entsprechender Anweisungen wie z.B. <bw:include> auch anders gestalten lässt). Die gesamte BML-Dialogdatei wird auf dem Server transformiert und im Anschluss zum Client übertragen, dort analysiert und schließlich als Vorschrift verwendet, um den entsprechenden Dialog mit Hilfe nativer (also gerätespezifischer) Controls des jeweilgen Systems (z.B. iOS) aufzubauen und darzustellen.

BML kann so­wohl für PCs (mit Win­dows) oder für mo­bi­le Gerä­te wie Smart­pho­nes oder Ta­blets ver­wen­det wer­den. Gera­de für Smart­pho­nes er­mög­licht eine lo­gi­sche Dia­log­be­schrei­bung die De­fi­ni­ti­on von Dia­lo­gen un­ab­hän­gig vom ver­wen­de­ten Ziel­ge­rät. Dies bie­tet die Mög­lich­keit, einen ein­mal de­fi­nier­ten Dia­log je­weils op­ti­mal in der Um­ge­bung des je­wei­li­gen Gerä­tes dar­zu­stel­len und auch zu be­die­nen.

Das vor­lie­gen­de Tu­to­ri­al be­zieht sich auf die mo­bi­le Va­ri­an­te von BML. Soll­ten Sie In­ter­es­se auch an der PC-Va­ri­an­te ha­ben, fin­den Sie ei­ni­ge An­re­gun­gen und Hin­wei­se so­wie ein Tu­to­ri­al in der BML-Do­ku­men­ta­ti­on im PDF-For­mat oder Sie neh­men mit uns Kon­takt auf .

Ihre erste (mobile) BML-Dialogseite

Hin­weis: Sie fin­den die­sen BML-Dia­log un­ter dem Na­men "Hel­lo world" in den Dia­lo­g-Bei­spie­len .

Jede BML-Datei besteht aus dem sog. Root-Element <bw:portlet> mit einigen Attributen. Wichtig dabei sind die Attribute id sowie target. Das id-Attribut dient der eindeutigen Adressierbarkeit des Dialogs aus dem (Server-) Code heraus, das target-Attribut definiert, wo der Dialog auf dem Zielgerät angezeigt werden soll. In der Smartphone-Variante gibt es aktuell nur ein Ziel, daher könnte man das Attribut auch weglassen, allerdings verhält es sich auf dem PC bzw. auf einem Tablet anders, so dass es hilfreich bzw. sinnvoll ist, sich die Nutzung des target-Attributs anzugewöhnen. Das title-Attribut definiert schließlich den Titel des Dialogs, der z.B. beim iPhone in der NavBar angezeigt wird.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<bw:portlet
  xmlns:bw="http://www.biss-net.com/2001/bwise/ehtml"
  id="SCOUT_Hallo"
  title="Hello world"
  target="cont">

  ... weitere Inhalte wie z.B. Eingabefelder, Listen o.ä.

</bw:portlet>

Nachdem wir das Root-Element eingefügt haben, können wir die gewünschten Dialog-Inhalte definieren.

Dialog-Inhalte

Un­ser ein­fa­cher Dia­log be­steht aus ei­ner Lis­te, in der in ei­ner Zei­le der Tex­te "Hel­lo world" und in ei­ner zwei­ten Zei­le der Text "Mein ers­ter Dia­log" an­ge­zeigt wer­den sol­len. Die ent­spre­chen­de De­fi­ni­ti­on sieht wie folgt aus:

  ...

	<bw:mlist id="LI_1">
		<bw:mcontent>
			<bw:mdata>
				<bw:mli id="Item_1">
					<bw:mlit>Hello World</bw:mlit>
				</bw:mli>
				<bw:mli id="Item_2">
					<bw:mlit>Mein erster Dialog</bw:mlit>
				</bw:mli>
			</bw:mdata>
		</bw:mcontent>
	</bw:mlist>

  ...

Das verwendete Dialog-Element ist die <bw:mlist>, also die "mobile list", die Definition einer Liste auf mobilen Geräten. Die Struktur diese Liste besteht aus dem Listeninhalt (<bw:mcontent>), in dem sich die eigentlichen Daten (<bw:mdata>) befinden. Diese wiederum bestehen aus den einzelnen Listenelementen (<bw:mli>, den "mobile list item"), wobei jedes Listenelement ein id-Attribut enthält, das eine eindeutige Adressierung eines jeden Listenelements ermöglicht. Die "mobile list items" sind sozusagen "Container", in denen unterschiedliche Elemente mit den darzustellenden Inhalten plaziert werden können. Für unseren ersten Dialog verwenden wir das <bw:mlit> Element ("mobile list item text"), das sich für die Darstellung von Texten eignet. Die exakte Form der Darstellung wird an den Style-Guide des jeweiligen Endgeräts angepasst.

Vollständige Dialogdatei

Die voll­stän­di­ge Dia­log­da­tei un­se­res "Hel­lo world"-Dia­logs sind ab­schlie­ßend wie folgt aus:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<bw:portlet
  xmlns:bw="http://www.biss-net.com/2001/bwise/ehtml"
  id="SCOUT_Hallo"
  title="Hello world"
  target="cont">

  <bw:mlist id="LI_1">
	<bw:mcontent>
		<bw:mdata>
			<bw:mli id="Item_1">
				<bw:mlit>Hello World</bw:mlit>
			</bw:mli>
			<bw:mli id="Item_2">
				<bw:mlit>Mein erster Dialog</bw:mlit>
			</bw:mli>
		</bw:mdata>
	</bw:mcontent>
  </bw:mlist>

</bw:portlet>

Dialogdatei auf dem mobilen Gerät betrachten

La­den Sie die Dia­log­da­tei auf den De­mo-Ser­ver hoch . Sie wird da­bei in ei­nem Ver­zeich­nis ge­spei­chert, das Ihrem Be­nut­zer­kon­to zu­ge­ord­net ist; an die­se Da­tei­en kom­men da­her nur Sie (o­der wir) her­an.

Wenn Sie den Dia­log auf dem mo­bi­len Gerät be­trach­ten , pas­siert fol­gen­des:

Wenn Sie den Da­tei- bzw. Dia­lo­gna­men in der Lis­te der Test- bzw. De­mo-Dia­lo­ge an­tip­pen, si­gnai­li­sie­ren Sie dem Ser­ver, wel­chen Dia­log Sie an­zei­gen möch­ten. Der Ser­ver lädt da­her die BML-Da­tei und "trans­for­miert" sie zu­nächst. Da­bei wer­den alle in der Da­tei vor­han­de­nen BML-An­wei­sun­gen (das kön­nen Schlei­fen, Be­din­gun­gen oder Va­ria­blen­zu­wei­sun­gen sein) aus­ge­führt und das re­sul­tat die­ser Trans­for­ma­ti­on wird an den Cli­ent (z.B. iPho­ne) ge­sen­det. Auf dem mo­bi­len Gerät ana­ly­siert der Mo­bi­leC­li­ent den Da­tei­in­halt, baut an­hand der An­wei­sun­gen die ent­spre­chen­den Dia­lo­g­ele­men­te auf und stellt sie auf dem Bild­schirm dar.

Das Er­geb­nis sieht letzt­lich wie folgt aus:

Bit­te be­ach­ten Sie, dass in den De­mo-Dia­lo­gen die Na­vBar (al­so die Ti­tel­zei­le des Dia­logs) nicht von Ih­nen ge­än­dert wer­den kann. In der Pro­duk­ti­vum­ge­bung ist dies selbst­ver­ständ­lich mög­lich. In der Demo dient die Na­vBar der Na­vi­ga­ti­on zu­rück zur Lis­te der De­mo-Dia­lo­ge so­wie zum er­neu­ten La­den des an­ge­zeig­ten Dia­logs vom Ser­ver (z.B. wenn Sie eine Än­de­rung vor­ge­nom­men und die Da­tei er­neut auf den Ser­ver hoch­ge­la­den ha­ben). Letz­te­res wird durch den "Re­fres­h"-But­ton er­mög­licht.