MobileSystem Demo: GUI-Demodialoge

HelloWorld.plt

Der be­rühm­te Hel­lo World Dia­log als Aus­gangs­punkt Ih­rer Ex­pe­ri­men­te; zeigt die Grund­struk­tur ei­ner BML-Da­tei so­wie eine ein­fa­che Lis­te mit dem Text "Hel­lo world".

SimpleList.plt

Kaum eine pro­fes­sio­nel­le App kommt ohne Lis­te aus. Das Bei­spiel zeigt eine ein­fa­che Lis­te mit ei­ni­gen Bei­spielein­trä­gen; durch Tap auf einen Li­stein­trag kann ein be­lie­bi­ger Fol­ge­dia­log an­ge­zeigt wer­den. Das Bei­spiel er­läu­tert die Nut­zung von Lis­ten, zeigt ei­ni­ge der ver­füg­ba­ren Li­st­op­tio­nen so­wie er­klärt, wie Dia­log­fol­gen mit Hil­fe ein­fa­cher Events er­stellt wer­den kön­nen.

ComplexList_1.plt

ComplexList_2.plt

Auf­bau­en auf dem vo­ri­gen Bei­spiel (ein­fa­che Lis­te) wer­den wei­te­re Li­st­op­tio­nen und -funk­tio­nen de­mons­triert. Das Bei­spiel zeigt die viel­fäl­ti­gen Mög­lich­kei­ten, Li­stein­trä­ge zu for­ma­tie­ren so­wie auch hoch­gra­dig kom­ple­xe Lis­tin­hal­te dar­stel­len zu kön­nen.

BigList.plt

BML bie­tet nicht nur viel­fäl­ti­ge Dar­stel­lungs­mög­lich­kei­ten son­dern kann auch mit lan­gen Lis­ten, d.h. Lis­ten mit meh­re­ren BHun­dert oder Tau­send Ein­trä­gen um­ge­hen. Durch die "na­ti­ve" Im­ple­men­tie­rung steht die vol­le Per­for­man­ce des je­wei­li­gen Geräts zur Ver­fü­gung; le­dig­lich die Über­tra­gung der Lis­te kann - je nach Da­ten­vo­lu­men und Ver­bin­dungs­art - ei­ni­ge Se­kun­den in An­spruch neh­men. Die Da­ten der Lis­te wer­den zur Über­tra­gung je­doch kom­pri­miert, so dass letzt­lich eine sehr gute Per­for­man­ce er­reicht wer­den kann.

EditDialog.plt

Zur Da­ten­er­fas­sung oder auch -an­zei­ge wer­den in­ter­ak­ti­ve Dia­lo­ge mit Platt­for­m-s­pe­zi­fi­schen Con­trols (Wid­gets) ver­wen­det. Das Bei­spiel zeigt einen Dia­log mit un­ter­schied­li­chen Ele­men­ten (Wid­gets) zur Ein­ga­be von Da­ten un­ter­schied­li­cher Ty­pen und For­ma­te; der Dia­log ist recht kom­plex und be­steht u.a. aus ei­ner Rei­he von Un­ter­dia­lo­gen, d.h. Fol­ge­sei­ten, die durch Tap auf einen Ein­trag auf­ge­ru­fen wer­den kön­nen (ein ty­pi­sches Bei­spiel der­ar­ti­ger Dia­lo­ge ist der "Ein­stel­lun­gen"-Dia­log von iOS.

MailSettings.plt

Als Bei­spiel für einen kom­ple­xen Dia­log im­ple­men­tiert die­se Da­tei den "Ein­stel­lun­gen"-Dia­log von iOS (z.B. iPho­ne) in ei­ner ähn­li­chen (be­wusst nicht ex­ak­ten Wei­se) nach. Das Bei­spiel zeigt ei­ni­ge der Mög­lich­kei­ten, rel. kom­ple­xe Ein­ga­be- bzw. Edi­tier­dia­lo­ge mit­tels BML ein­fach und struk­tu­riert im­ple­men­tie­ren zu kön­nen. Das Bei­spiel zeigt u.a., wie man mit BML-Mit­teln un­ter­schied­li­che Ima­ges für nor­ma­le und Re­tina-Dis­plays ver­wen­den kann.

Siblings.plt

Viel­fach wer­den auf heu­ti­gen mo­bi­len Platt­for­men wie iOS (App­le) ähn­li­che Dia­log­sei­ten "ne­ben­ein­an­der" an­ge­zeigt, wo­bei der Wech­sel zwi­schen den Sei­ten durch eine ho­ri­zon­ta­le Wisch­be­we­gung er­mög­licht wird. Das Bei­spiel zeigt den Auf­bau ei­nes Da­logs mit drei sog. "Sib­ling"-Sei­ten (Ge­schwis­ter-Sei­ten) in­kl. der ty­pi­schen Sei­ten­an­zei­ge durch Punk­te im un­te­ren Be­reich der Dia­log­sei­ten.

TabBar.plt

Tool­bars und Tab­bars sind häu­fig an­zu­tref­fen­de Be­dienele­men­te zur Aus­wahl ähn­li­cher Sei­ten (als Al­ter­na­ti­ve zu Sib­lings, sie­he oben) oder zum Aus­lö­sen von Ak­tio­nen. Das Bei­spiel zeigt den Um­gang mit die­sen Ele­men­ten in­ner­halb von BML so­wie die Mög­lich­kei­ten, un­ter­schied­li­che Con­trols (But­tons oder Seg­men­ted Con­trol­s/Ra­dioBut­tons) in­ner­halb von Tool­bars dar­zu­stel­len.

Toolbar_1.plt

Toolbar_2.plt

Tool­bars und Tab­bars sind häu­fig an­zu­tref­fen­de Be­dienele­men­te zur Aus­wahl ähn­li­cher Sei­ten (als Al­ter­na­ti­ve zu Sib­lings, sie­he oben) oder zum Aus­lö­sen von Ak­tio­nen. Das Bei­spiel zeigt den Um­gang mit die­sen Ele­men­ten in­ner­halb von BML so­wie die Mög­lich­kei­ten, un­ter­schied­li­che Con­trols (But­tons oder Seg­men­ted Con­trol­s/Ra­dioBut­tons) in­ner­halb von Tool­bars dar­zu­stel­len.

Layouter.plt

In ei­ni­gen Fäl­len sind spe­zi­el­le bzw. sehr in­di­vi­du­el­le Lay­outs mit un­ter­schied­li­chen Ele­men­ten er­for­der­lich. BML bie­tet hier­zu einen sehr fle­xiblen Lay­ou­ter, um Con­trols Tex­te oder Ima­ges auf ei­ner Dia­log­sei­te zu pla­zie­ren. Im Ggs. zu HTML be­fin­det man sich im­mer auf der "na­ti­ve" Ebe­ne und kann auf alle Funk­tio­nen des ge­rä­tes zu­grei­fen bzw. die vol­le Per­for­man­ce nut­zen. Das Bei­spiel zeigt einen Dia­log, der mit Hil­fe des Lay­ou­ters ge­stal­tet wor­den ist.

MailList.plt

Ne­ben den zahl­rei­chen Bei­spie­len ent­hält die­ser Dia­log die Mail-Ein­gangs­lis­te und dient da­mit als ty­pi­sches Pra­xis­bei­spiel bzw. des­sen Um­set­zung mit­tels BML.

WebView.plt

Selbst­ver­ständ­lich steht auch das Brow­ser-Con­trols (bei iOS UIWe­bKit) als Con­trol zur Ver­fü­gung, so dass für die An­zei­ge kom­ple­xer Lay­outs auch auf HTML zu­rück­ge­grif­fen wer­den kann. Das Bei­spiel zeigt das Brow­se-Con­trol zu­sam­men mit ei­ni­gen wei­te­ren Con­trols in ei­nem "ge­misch­ten" Dia­log.