Tải bản đầy đủ - 0 (trang)
Chapter 9. Connecting the User to Web Services

Chapter 9. Connecting the User to Web Services

Tải bản đầy đủ - 0trang

Chapter11.XFormsandAccessibility

Section11.1.XFormsEnablesUniversalAccess

Section11.2.DesignPrinciplesforAccessibleInterfaces

Section11.3.LeveragingXFormsAccessibilityFeatures

Section11.4.XFormsAccessibilityataGlance



4.2DynamicUserInteractionwith switch

Akeyfeatureofelectronicformsistheirabilitytoreacttouser

inputandusesuchdynamicupdatestoaidinrapidtask

completion.Thus,whereaspaperformsarestatic,electronic

formstypicallyaidtheuserinnavigatingthroughthevarious

stagesofacomplexinteractionbyappropriatelyrevealingor

hidingsectionsoftheform.Thisformofdynamicinteractionis

alsocommonlyusedtocreatetask-orientedwizardsthatguide

usersthroughagiveninteraction.Wedescribedconstruct

group inSection4.1forlogicallygroupinguserinterface

controls.Here,wedescribeconstruct switch ,whichcanbe

usedtohideorrevealselectivelysuchlogicalgroupsof

controls.



4.2.1AnatomyofConstruct switch

Userinterfaceconstruct switch holdssetsoflogicallygrouped

controlsandenablesanyoneoftheselogicalgroupstobe

displayedtotheuserselectively.Element switch takesall

commonuserinterfaceattributesdescribedinSection3.2,and

thesecanbeusedtoadvantageinstylingtheuserinterface.

Inaddition,XFormsbindingattributescanbeusedonelement

switch toestablishanXPathcontextandthusaidinauthoring

relativeXPathlocatorswithinbindingexpressionsthatappear

withinthebodyofconstruct switch .Eachlogicalgroupof

controlsisencapsulatedwithinchildelement case .Boolean

attributeselectedofelement case determinesthe case that

iscurrentlyactive,thatis,thegroupofcontrolscurrently

displayedtotheuser.Settingthisattributetotrueresultsin

thecontrolswithinthat case becomingactive.Ifnoneofthe

case childrenofa switch hasselectedsettotrue,thefirst

case indocumentorderismadeactive.



Each case isgivenauniqueidentifierviaattributeidthatis

usedlaterinactivatingagiven case .Element case canhold

alloftheXFormsuserinterfacecontrols,aswellasthevarious

aggregationconstructsdescribedinthischapter,including

construct switch itself.

Construct switch derivesitspowerfromtheuseofXML

Events.XFormsdefinesadeclarativeeventhandler, toggle ,

thatisspecificallydesignedforusewith switch .Asanevent

handlerdesignedforusewithXMLEvents,element toggle

usestheattributesdefinedbymoduleXMLEventsinbindingto

thedesiredevent.Attributecaseonhandler toggle identifies

aparticular case ina switch toactivate.Invokinghandler

toggle resultsinthespecified case becomingselected;asa

sideeffect,the case thatwaspreviouslyselectedbecomes

inactive.Thus,theeffectofinvokinghandler toggle witha

specificvalueforattributecaseis

Thecontaining switch islocated.

Thecurrentlyactive case inthat switch ismadeinactive

bysettingitsselectedattributetofalse.

The case identifiedbyattributecaseofelement toggle is

settotrue.

Thepresentationisupdatedtoreflectthenewlyactive

case .



4.2.2ASimpleExampleof switch

Weillustratetheuseofconstruct switch withasimple

exampleinFigure4.3.The switch constructshownhere

containstwo case elements.Thefirstoftheseisinitiallyactive



andcontainsaninputcontrolthatcollectstheuser'sfirstand

lastnames;weshowthevisualrenderingproducedbyX-Smiles

inFigure4.4.



Figure4.3 switch canselectivelyrevealorhide

portionsofaninterface.


xmlns:ev="http://www.w3.org/2001/xml-events"

ref="/person/name">



























Figure4.4.Initialstateoftheedit/viewinterface.



NoticethatwehaveusedXFormsbindingattributesonelement

switch tosetuptheXPathcontextfortherestofthis

example.Asaconsequence,alltheuserinterfacecontrols



appearingwithinthis switch canuserelativeXPath

expressionswhenbindingtotheunderlyingdatamodel.

Theinputcontrolthatcollectstheuser'slastnamecontainsan

eventbindingthatattacheshandler toggle toevent

DOMActivate.Thishandlerisinvokedwhentheinputcontrol

receivesaDOMActivateevent,thatis,theusercompletes

entryintheinputfield.Attributecaseofthis toggle handleris

settorefertothesecond case elementinthecontaining

switch ;thus,finishingentryintotheinputcontrolresultsin

thesecond case becomingactive.Theuserinterfacenow

switchestodisplayingtherenderingshowninFigure4.5.



Figure4.5. switch canalternatebetween

differentportionsofaninterface.



Thissecond case elementcontainsalabelthatdisplaysa

greetingusingthevaluesjustentered.This case containsa

triggerthatfunctionsasaconceptualeditbuttonbyinvokinga

toggle handlerthatactivatesthefirst case element.

Noticethatasaconsequence,the switch showninFigure4.3

functionsasaread-onlydisplayoftheuser'snamethatwhen

activatedturnsitselfintoaninputcontrolthatallowstheuser

toupdatethevalue.



4.2.3ModelandInteraction-BasedSwitching

Construct switch isusedtoenabledynamicnavigation

throughcomplexinterfaces.It'salsousefulwhendeliveringa

userinterfacetodeviceswithsmalldisplayswhereitis



advantageoustorevealprogressivelyauserinterface.Notice

thatactivationanddeactivationof case elementswithin

construct switch isdriventhroughtheuserinterface,thatis,

casesaremadeactiveorinactivebasedonuserinteraction

events.

ContrastthiswiththerestoftheXFormsuserinterface,where

allupdatestothepresentationhappenasaresultofchangesto

theunderlyingmodel.Thisinteraction-basedswitching

introducedbyconstruct switch isbydesignandisnotan

oversightonthepartoftheXFormsworkinggroup.Wefeelthat

interaction-basedswitchingisasufficientlyusefulfeaturetobe

treatedasafirst-classcitizen,givenourinterestinbeingable

todelivercomplexuserinterfacestosmalldevices.

XFormssupportsanalternativeformofdynamismthatis

completelymodeldriven;thisisachievedviamodelproperty

relevantdetailedinSection5.3.Modelpropertyrelevantisa

booleanvaluethatiscomputeddynamicallyatrun-timeandcan

affecttheavailabilityofportionsoftheinterfacethatbindto

relevantportionsofthemodel.Model-basedswitchingisa

powerfulXFormsfeatureandcanoftenleadtomoreflexible

interfacesthanthepureinteraction-basedswitchingaffordedby

construct switch .Asanexample,noticethat switch can

activateoneandonlyoneofthecontainedlogicalgroupings

encapsulatedwithinthevarious case children.Incontrast,

model-basedswitchingcanhideorrevealmorethanone

sectionofauserinterface.



4.2.4CreatingMultipageTabDialogsUsing

switch

Construct switch canbeusedtoadvantageinauthoring

multipagewizardsthatallowtheusertocompleteacomplex

task.Whensuchataskconsistsofseveralconceptualpages,



construct switch enablesthedeliveryofarichend-user

experiencebyavoidingclient-serverround-tripswhenswitching

betweenthevariouspagesmakingupthetask.

NoticethattheWebmetaphorofservingaWebpageforeach

dialogturninacomplextaskworkswellforlargedisplays

wheretheuserinterfacecanencompassmultipleentryfieldsin

agivenpage.Asaconsequence,matchingeachdialogturnwith

aclient-serverround-tripcanstilldeliverasatisfactoryenduserexperience.

Butwhendeployingtosmalldevices,thequantityof

informationthatcanbedisplayedatagiventime,and

consequentlytheamountofdatathatcanbecollectedonany

givenpage,isrelativelysmall.Inthecaseofapurelynonvisual

interface,thismaybeassmallasasingleitemofinformation.

Introducingclient-serverround-tripsforeachturninsucha

man-machineconversationcanleadtorapiddegradationofthe

end-userexperience.

Construct switch canbeusedtoalleviatethisproblem.A

complextaskconsistingofmultipleconceptualpagescanbe

organizedwithinconstruct switch witheach case containing

aportionoftheuserinterfacethathasbeentailoredtothe

smalldisplay.Control trigger withineach case elementcan

beusedtocreatenavigationcontrolsthatallowtheuserto

movethroughthevariousstagesofthetask.Noticethatinthis

case,thereisnoclient-serverround-tripastheusertransitions

betweenvariousstagesofthetask.Usingconstruct switch in

thesesituationsimprovestheend-userexperience.Italso

eliminatestheneedtowriteontheserveradevice-specific

controllercomponentthatmanagestheuser'snavigation

throughthevariouspagesmakingupthetask.

ConsiderthemultipageinsuranceformshowninFigure4.6.The

formisdividedintologicallyseparatepages,witheachpage

containedwithinanindividual case element.



Figure4.6Usingconstruct switch tonavigate

throughacomplextask.


ref="/insurance/policy-form">





...







...







...





...



Noticethatall(exceptthelast) case elementsusea group

toestablishtheXPathevaluationcontextforrelativeXPath

locatorsappearingwithinthatgroup.Thefinal case showsa

summaryoftheinformationcollectedtypically,suchasummary

displayskeyvaluescollectedbyalloftheearlierpagesinthe

form.Thissummaryusesthecontextsetupbythecontaining

switch forevaluatingrelativeXPathlocators.

Asdescribedearlier,navigationamongthecasescanbe

enabledbycreating trigger controlsthatinvokehandler

toggle .Handler toggle achievesitseffectbydispatchingthe

appropriateeventstothe switch tochangethe case thatis

active.

NoticethatthisdesignenablesXFormsclientstoenhancethe

end-userexperiencebybindingplatform-specifickeysthat



navigatethroughthedifferent case elementsina switch

construct.Forexample,consideranXFormsbrowserdesigned

foruseonacellphonewithforwardandbacknavigationkeys.

Pressingthesekeystypicallyraisesaplatform-specificevent;

theXFormsclientforthisplatformcanmapthesedevicespecificeventstothecorrespondingXFormseventstoallow

navigationthroughamultipageuserinterfacecreatedvia

construct switch .



4.2.5CreatingWizardsUsing switch

Userinterfacewizardsaidsinrapidtaskcompletion.The

combinationofinteraction-basedswitchingprovidedby

construct switch canbecombinedwithmodel-basedswitching

viamodelpropertyrelevantincreatingtask-basedwizards.

Application-specificknowledgecanbecodifiedintheXForms

model;thus,inaninsuranceform,theportionoftheuser

interfacepertainingtoquestionsaboutanapplicant'schildren

canbeselectivelyrevealedbasedontheuser'sresponsetoan

earlierquestion.

Bindingattributesonthenavigationcontrolsusedtomove

amongthedifferent case groupingsina switch construct

canbeusedtoensurethattheuserdoesnotleaveaportionof

theinterfacewithoutprovidingcriticalitemsofinformation.As

anexample,considerauserinterfacethatcollectsthe

necessaryinformationbeforeconfiguringthewirelessnetwork

onamobiledevice.Thisinformationmightincludeauthorization

informationsuchasauseridandpassword.Assumefurther

thatthistaskhasbeenfactoredintoasetoflogicallygrouped

pagestocreateamultipagedialogusingconstruct switch

(seeFigure4.7).Thecorrespondingvisualinterfaceproduced

byX-SmilesisshowninFigure4.8.



Figure4.7Taskwizardauthoredusing switch .




xmlns:ev="http://www.w3.org/2001/xml-events">

XFormsWizard


xmlns:xsd="http://www.w3.org/2001/XMLSchema"

schema="mobile.xsd">
















relevant=

"string-length(instance('m')/id)>0

andstring-length(instance('m')/pin)>0"/>






ref="/auth">



...

...


ev:event="DOMActivate">







...







Figure4.8.Visualrepresentationoftaskwizard

authoredusing switch .



Theapplicationauthorcanensurethattheuserprovidesthe

requisiteinformationbeforemovingofftheauthenticationpage

byattachinganappropriatebindingexpressiontothe trigger

thatnavigatesfromthispage.Inthisexample,themodel

containsasecond instance thatholdsastatevariablepincheckusedforthispurpose.Thisfielditselfdoesnotcollecta

value;instead,itisusedtoenableordisablethenavigation

controlthatallowstheusertomovefromtheauthorization

pagetotheservicespage.Withinthemodel,anXForms

bindingexpressioncreatedvia bind isusedtobindmodel

propertyrelevanttoinstance('s')/pin-check.Thevalueof

thisproperty,anXPathexpression,isevaluatedatrun-timeto

returnabooleanvalue.Inthisexample,wehave



relevant="length(instance('m')/pin)>0

andlength(instance('m')/id)>0"

tospecifythatpin-checkgetsmodelpropertyrelevant=true

ifandonlyifthelengthofthevaluecollectedfor

instance('s')/pinisgreaterthan0.Withintheuserinterface,

control toggle inthe case thatcollectsauthorization

informationbindstoinstance('m')/pin-check.Asa

consequence,thiscontrolbecomesavailabletotheuseronlyif

the/auth/idand/auth/pinvalueshavebeenprovided.

Thefunctionalitydescribedhereenhancesend-userexperience.

TheXFormsmodelenablestheapplicationauthortodeclare

specificportionsoftheinstancetoberequired,thatis,theuser

maynotsubmittheformuntiltheserequiredvalueshavebeen



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 9. Connecting the User to Web Services

Tải bản đầy đủ ngay(0 tr)

×