Modelling Web Navigation by Statechart

UML,OOP,面向对象

HKU CSIS Tech Report TR-2000-01

ModellingWebNavigationbyStatechart

KarlR.P.H.LeungLucasC.K.HuiS.M.YiuRickyW.M.Tang

DepartmentofComputingandMathematics,

HongKongInstituteofVocationalEducation(TsingYi),

HongKong.

email:kleung@

DepartmentofComputerScienceandInformationSystems,

TheUniversityofHongKong,

HongKong.

emails:hui,smyiu,wmtang2@csis.hku.hk

Abstract

Thereisatrendofincreasingsizeofwebsitesandin-creasingcomplexityofwebpagesbydynamiccontentinre-centyears.Currentlyavailablewebnavigationmodelingtoolsareunabletocopewiththeneedofmodelingthesecontemporarywebsites,especiallythosewithdynamiccon-tent.Thisneedisanalyzedinthispaperandawebnav-igationmodelbasedonstatechartisproposedtomeettherequirements.Themodelwillserveasatoolforthemodel-ingandanalyzingnavigationofcomplexanddynamicwebsites.

per,wewillemploystatechart[3]tosolvethisproblemofmodelingwebnavigation.Asouraimistomodelwebnav-igation,presentationdetailsofweb,suchassize,positionandcolorofwebpageelements,althougharealsoofim-portancetothehumancomputerinteraction,willbeoutofscopeforthispaper.

InSection2,webnavigationandmodelingwillbeintro-duced,alongwithbackgroundinformationonStatechart.AdetailedanalysisondifferentkindsofwebnavigationwillbepresentedinSection3.OurmodelofwebnavigationwillbediscussedinSection4,andaconclusionofthispa-perwillbegiveninSection5.

1Introduction

TheexponentialgrowthoftheWorldWideWebandelectroniccommerceinrecentyearsgiverisetoaneedofmodelingandanalyzingthebrowsingsemanticsofwebsites,whichhaveincreasedinsizeandcomplexity.Asinanyothersoftwaredevelopment,adetailedmodeleasede-velopmentandmaintenanceofthewebsite.Inaddition,themodelcanhelpintheanalysisofnavigationinthemod-eledwebsite.Undesirablesituationscanbeidenti edandeliminated,andimprovementscanbemade.

Modelingwebnavigationmaynotbeaseasyasitseems.Webpageshasevolvedfromsimpletext,graphicsandhy-perlinksafewyearsagotothecontemporarydynamicwebpageswithvariesextensionsandscriptsandclientsidepro-gramsembedded.Previousworksonmodelingwebnaviga-tion[15,11]plex,dynamiccontemporarywebpages,whicharethemostinneedofmodeling,cannotbemodeled.Inthispa-1

2Background

2.1WebNavigation

WiththewidespreadacceptanceoftheWorldWideWeb,hypertext[13],whichistheinformationstructureusedinWWW,hasbecomethedefactostandardofinformationstorageandretrievalintheInternet.TheWWWcanbeviewedasthecollectionofwebserversthatcommunicateswithwebbrowserusingtheconnectionlessHTTPprotocolinrequest-replypairs,andstreamouttherequestedcon-tentwrittenintheHypertextMarkupLanguage(HTML).HTMLhasevolvedovertimeandwithotherWebtechnolo-gies,andthuscreatedsomenavigationfeaturesthatarenotavailablebyhypertextalone.

InWWW,ersnavigatefromawebpagetotheotherbyclickingonahy-perlink.Inadditiontothisbasicnavigationmethod,var-iousclientsidescriptsandprograms,suchasJavascript,

UML,OOP,面向对象

VBScript,JAVAandActiveX,provideotherwaystocon-troltravelingbetweendifferentwebpageswithoutclick-ingalink.DynamicHTML,ActiveXcomponentsarealsowidelyemployedtochangethecontentandhyperlinksofthecurrentlydisplayingwebpage.

Concurrentdisplayofwebpagesispossiblebytheuseofframesandwindows.Synchronizationbetweentheconcur-rentlydisplayedwebpagescanbeachievedwithfunctionsoftheclientsidescriptsandcontrolprograms.Detaileddis-cussiononnavigationofwebpagesisinSection3.

2.2WebModeling

Itisnothardtorealizethatthecomplicationsaddedbytheabovediscussedwebfeaturesmakesthewebpageandlinksnotnecessarilyadirectmappingfromtheinformationfragmentsandrelationshipsinhypertext.Somodelingtech-niquesusedinhypertext[13,16]maynotbedirectlyappli-cable.Theresearchesonwebmodelingarecomparativelyfewtothehypertextmodelresearches.

Conallen[2]discussedusingthecommonbehaviorpackageinUni edModelingLanguage(UML)[10]tomodelthebusinesslogicinwebapplications.Clientpages,Serverpages,FormsandFramesarede nedasclassesinUML,withtheircontentsmodeledasstereotypedattributesoftheclass.Linksbetweenwebpagesaremodeledasasso-ciationsbetweenthelinkedclasses.Themodelingisviewedfromtheperspectiveofbusinesslogicinstructureandfunc-tionalview,sosomeuserinterfaceattributesaffectingpre-sentationandbrowsingsemanticsareintentionallyleftoutfromthismodel.Thesuggestedmodelingmethodcanbeusedasacomplimenttoourmodeltosupplyinformationaboutbusinesslogic.

Onthesametrackwithus,HMBS[15](HypertextModelBasedonStatecharts)usesstatechart(seesec-tion2.3)asamodelingtool.HMBSaimstosupportbe-havioralmodelinginthedesignofhypermediabythesug-gestedmodel.Anhypermediaauthoringtoolisalsodevel-opedtoachievethisgoal.Inthemodel,hypermediapagesaremappedtostatesinstatechartbyamappingfunction,whichcanbealteredfordifferentstatechartstomakeabstractionofphysicalpagespossible.isheldstaticforaparticularstatechart,andcannotbechangedduringnav-igation.Thisfreedominde nitionof

maybefeasibleinhypermediaauthoringasthedesignercande nearbi-trarily,andthenalldevelopmentthereafterwilladheretoit.Problemarisesifmultiplepartieswishtomodelanexistingsetofhypermediapages,asitisnotclearthathowcanbede nedinaconsistentwaybydifferentmodelers,theremaybevastdifferencebetweenresultantmodelsofthesamesetofwebpages.Wewillsolvethisproblembyprovidingaconsistentwaytomapwebpagesinournavigationmodel.HMBSismoreconcernedwiththehierarchicalstruc-turingofhypermediapagesthanothernavigationmethodsbetweenpages.VisibilitylevelLisde nedtomanagethevisibility(state)ofhierarchicalpagesduringhierarchicalnavigation.Allothernavigationmethodsaregenerallyde-scribedaseventsrepresentingtransitionofstates,withnodetailsondifferentkindsofeventsgiven.Treatingallkindsofeventsequallywillintroducedif cultiesinmodelingdif-ferentkindsofhyperlinksintheweb,suchasbetweenanordinaryhyperlinkandaserversidescriptwhichactsonparameterssentalongwiththehyperlinktransition.Wean-alyzeandidentifydifferentwaystomodeldifferentkindsofhyperlinkinSection3and4.

ItisalsonotclearthathowcantheHMBSmodelsupportmodelingofdynamichypermediapages,whichareusedex-tensivelyincontemporarywebdevelopment.Evenwiththechangeablemappingfunction,itisimpossibletomodelphysicalhypermediapagesthatchangestheircontentdur-ingnavigation,orcontainsdifferentcontentwhendifferentlinksareused(events)toenterthepage.Thisisbecausemustbeheldstaticinanavigationsession.Thisises-peciallytrueforthosepagesthatchangestheirlinks(tran-sitions)tootherpages(states)duringnavigation,llowupworksofHMBS,themodelingfocushadshiftedtotimingandsynchronizationofmultimediacontentinhyperdocuments[11,12],andthedevelopmentofhyperdocumentauthoringsoftware[14],sotheaboveproblemsstillsremainunresolved.InSection4,wewilldiscussedhowtoovercomeallthesedif cultiesbyournavigationmodel.

Therearealsosomeresearchesonhypermediamodel-ing,whichisthemodelingofmultimediahyperlinkedcon-tents.HMData[6]isanobjectorientedmodelingmethodforstorageandretrievalofhypermedia.Thismodularap-proachdiscourageslinkagesbetweenindividualelementsofdifferentmodules,andmaynotbesuitableforthewebwhereextensive,spaghettilinkagesbetweenwebpagesofdifferentsitesisthenorm.EFSM[7]isanextended nitestatemachinetomodeltemporalsynchronizationoftem-poralinteractivewebcontent.Theanalysisismainlyfo-cusedinsynchronization,andthemodelmaybeblownuptounmanageablesizeifthequantityofmediaislargeandlinkagebetweenmediaextensive,duetothenatureof nitestatemachine.

Anotherapproachingtomodelthenavigationofthewebisbyusingwebpagecontentinadditiontotheirintra-linkages[1,9].Thegeneralideaistousethecontentsim-ilaritybetweenpagestostructurethem,providingabetterunderstandingandsenseoforientationfortheuserofthein-formationspace.Thesemodelsgivegeneralshapeofthein-formationspace,browsingthewebpagesinan“overview”mode,andisnotsuitableforanalysisonbrowsingseman-ticsbetweenindividualpages.

UML,OOP,面向对象

(a) (b)

Figure1.XORgroupingofstates2.3Statechart

Statechartis rstproposedbyHarelin1987[3,5].Itisavisualformalismtoextendstatediagramsformodelingofcomplexsystemsthatinvolveslargenumberofconcur-rentstates,synchronizationsandactiontriggers.Therearenumerousextensionstostatecharttosupportdifferentmod-elingneeds,wewillintroducethebasicandtherelevantpartofstatechartweusedinthispaperhere.

Astatechartcanbede nedasthebasicsetofele-ments:states,transitions,primitiveevents,primitivecon-ditionsandvariables,plustheextendedsetofevents,con-ditions,expressionsandlabelsandtheirinter-relations[5].isde nedasthesetofstates.Ahierarchyfunction

,isde nedtomapeachstatetoitssub-states.meansisabasicstate.Atypefunc-tionde neswhetherisacomposedAND/ORstateornot.isthesetofhistorysymbols.Itisrelatedtobyafunction.Thedefaultfunction,de nestheinitialstatesin.isde nedasthesetofvariablesandthesetofexpressions,,isde nedon.Thesetofprimitivecon-ditionsisde nedasandwitharethede nedsetofasconditionsthesetofprimitive

de nedonit.Similarly,eventsandeventsrespectively.

isde nedasthesetofactions.isthesetoflabelsontransitions.Thesetoftransitions,,isde nedas.Forclarity,statenameswillbeshowninboldandeventlabelswillbeshowninsansinthispaper.

Likeastatediagram,astatechartmodelstartsinaninitialstate.Whenaneventhappens,thesystemwilltransittothenextstatebyatransitiontriggered(labeled)bythatevent.Anoptionalactivitycanbeaddedtothetransitionlabel,in-dicatingthattheactivitywilltakeplacewhenthetransitionhappens.Thetriggeredactivitycaninturnreceivedbythesystemasanothereventtotriggerothertransitions.

StatecanbegroupedtogetherbyXORforef cientuseoftransitionarrows.Figure1showsthesavingsfromtheexpanded(a)tothemoreconcise(b).ThesystemcanbeexclusivelyinstateAOR

B.Concurrentstates,likeinde-Figure2.ANDgroupingof

states

Figure3.Abstractionofstates

pendentmodulesinasystem,canbemodeledbyorthogo-nalANDofsub-statesthatexistconcurrently(Figure2).Inthe gure,beingsub-statesofthecomposedstateA,A1,A2andA3maintainstheirownstate.

Abstractionofstatechartcanbedonebyhidingdetailsofsub-states.Figure3aisabstractedtoFigure3bbyhidingthedetailsoftheXORsub-states.Thestubbedtransitionarrowofe2representsthatthetransitionisavailablefromsomeofthesub-statesofAonly.Theselectconnectivecanbeusedtoreducethenumberoftransitionarrows.EventseinFigure4bisde nedasthedisjunctionofeventse1,e2inFigure4a.ereplacese1,e2bypointingtotheselectcon-nective,meaningthatAwill

transittoB1orB2dependingone1ore2happened.

Figure4.Selectconnective

UML,OOP,面向对象

Figure5.ParameterizedOR

Eventscanaffectstatesglobally.Thisglobaleffectofalloccurredeventisdescribedasbroadcastingofeventstoallpartsofthesystem.Allactivities/eventsareconsideredinstant(zerotime),sosynchronizationcanbesupportedbythetriggeringofsomelimitingeventsonallconcurrentpar-titions.

WewillalsousethesuggestedparameterizedORexten-siontostatechart[3]forsituationswherelargequantityofsimilarstatesareencountered(Figure5).Eventewillhap-penwithaparameterparam.InB,paramwillbeevaluatedandthesystemwilltransittotheappropriatestate,outofthegroupofstatesstateparam,basedonthisevaluation.Thereareproblemsofundeterminedstatewhenevents/activityarede nedaszerotime,asdescribedin[3,5,8].Wewilltakethemicro-stepapproach[8]tosolvedthisproblem.

3WebNavigationAnalysis

3.1WebPage

Awebpageisde nedasthesequenceofHTMLrepliedbythewebservertoaclientmakingarequestofaURLthroughHTTP.Othernavigationrelatedmaterialsinthewebpage,suchasscriptsandclientsideprograms,arecon-sideredcomponentsofthewebpage.Non-navigationre-latedmaterials,suchasgraphicsoraudioclipscontainedinthewebpage,arenotconsideredinthisanalysis.

AstaticwebpageisawebpagethatretainsthesameHTMLforalltheclientrequestsofthesameURL.Itmustalsocontainnoreactiveorexecutablecomponents.Adynamicwebpageisde nedasawebpagethatre-turnsdifferentHTMLforclientrequestsofthesameURL(serversidedynamics),orcontainsreactiveorexecutablecomponents(clientsidedynamics).

3.2Hyperlink

NavigationintheWWWisdonebyactivatinghyper-links.Hyperlinksaredirectionallinksbetweenasourceandatargetwebpage,whichcanbethesamepage,solinkingtodifferentsectionsofthesamewebpageispossible.Whenahyperlinkisactivated,thecurrentwebpageinviewwillbereplacedbythetargetwebpage.Ahyperlinkcanbeinformoftextstrings,graphicsorvideo,activatedexplicitlybytheusers,usingamouseclickforexample.Hyperlinkscanalsobeincludedinclientsideprograms/scripts,tobeinvokedautomaticallybythebrowseronsomeprede nedevents.Examplesoftheseeventsincludestimeout,mousemove-mentsandwindowfocus.Asinhypertext,thesequenceofhyperlinkactivation,nomatterbymouseclickorotherevents,isthenavigationpath.

3.3Webbrowsereffects

Inadditiontothenavigationprovidedbyhyperlinks,webbrowserscanprovideadditionalnavigationfunctionsthatisoutofcontrolofthewebpages,suchasscrolling,back,forwardbuttonsandahistorylist.Wedonotintendtodis-cussionthisformofnavigationhere,sowebnavigationbywebbrowserfunctionsareoutofscopeforthispaper.

3.4Intra-pageNavigation

Thisformofwebnavigationinvolvesonlyonewebpage.Inawebpage,hyperlinkscanbede ercanalsoscrolltodifferentsectionsofthepageifthepageisdisplayedinascrollbarenabledframeorwindowtoobtainthesamere-sult.

3.5Inter-pageNavigation

Thismostcommonformofwebnavigationisbyactivat-ingahyperlinkonasourcewebpage,tojumptoatargetwebpagewhichthehyperlinklinksto.

3.6Frame-basedNavigation

Framesinsideabrowserwindowmakesconcurrentviewingofwebpagespossible(Figure6).Abrowserwin-dowcanbedividedintoframes,eachcontainingasepa-ratewebpageforviewing.Thecontainedwebpagescanbeanotherwebpagecontainingframes.Navigationwithinaframecanhappenindependently.Navigationoutofaframedwebpagecanalsobedonebyactivatingahyper-linkthatspeci esthetargetistoreplacethewholeframedpage.Allframesinawindowarecreatedanddestroyed

UML,OOP,面向对象

Figure6.Screenshot:

Frames

Figure7.Screenshot:MultipleWindowstogether.Framescanbesetscrollableorunscrollable,andeachframemaintainsitsownscrollpositionindependently.Webpagesindifferentframescanaffecteachotherbyusingclientsidescriptsorprograms.Changesthatcanbedoneincludespresentationappearanceandchangingthewebpagedisplayinginanotherframe.Scriptsandprogramsindifferentframesmayalsointeractwitheachothertocre-atecomplicatedreactivebehavior.

3.7NavigationofMultipleWindows

Multiplebrowserwindowscanbeusedtosupportcon-currentviewingofwebpagesinanotherway(Figure7).Windowsdiffersfromframesinthesensethattheycanbecreatedordestroyedindependentlyatdifferenttime,andtheyaremanagedbytheoperatingsystemswindowsman-ager.Clientsidescriptandprogramscanaffectmultiplewindowsinthesamewayasinmultipleframes.

3.8DynamicContent

Thecontentandhyperlinksofawebpagecanbedy-namicwhileviewing.Therearetwolevelsofdynamics,

clientsideandserverside.3.8.1ServerSide

Anexampleofthiskindofdynamicwebpageisthesearchresultpageofasearchengine.Whendifferentsearchstringsareentered,differenthyperlinkswillappearintheresultspagedependingonthekeywordinputedinthesearch.ThiskindofdynamicwebpagegenerationisusedextensivelyintheWWWtoday.

Thisisdonebythewebservergivingoutdifferentwebpagestorequestsofthesamehyperlinktarget(sameURL).UsersactivatingthesamehyperlinkofthesametargettwicemaynotgetthesamereturnedHTML.ServersidescriptsandCGIprogramscanbeusedtogeneratethesewebpages.Atemplateisusedtode nethestructureofthedocumentandcontentis lledinruntime.Thismakesthereturnedwebpagehavesimilarstructurebutwithdifferentcontentandhyperlinks.Notethateveryscriptorprogramcanusemorethanonewebpagetemplateandeverytemplatecanbeusedbymorethanonescriptorprogram.

Serversidedynamicpagegenerationcanalsoemploywebforms,asintheabovesearchengineexample.Thesourcewebpagewillcontainaformwithdata,whentheformissubmittedandthenewpagerequested,theformdataissentalongtothewebserverandanewwebpageisre-turned.Thisisequivalenttoactivatingahyperlinkwithruntimegeneratedparametersinthesourcewebpage,andthenapropertargetwebpageisconstructedinthewebserverandreturnedbasedontheparameters.3.8.2ClientSide

AnexampleofclientsidedynamicwebpageisaJavapro-gramonawebpage.TheJavaprogrammayhaveascrollinglistofhyperlinks,thoselinksscrolledoutofviewcannotbeactivatedwhilethosenewlyscrolledintoviewcanbeacti-vated.

Intheseclientsidedynamicpages,thetargetofahyper-linkcanbedynamicallyde ned,enabled,ordisabledwhileawebpageisdisplaying,withoutcontactingthewebserver.Basedonuserselectionsorotherexternalfactorssuchascurrenttime,thetargetofahyperlinkcanbedifferentwhenitisactivated.Thiskindofwebnavigationissupportedinvariousclientsidescriptsandprograms,suchasJavaScriptandJava.Thesescriptsandprogramshavetheirownstateandreactivebehavior,andcanaffectthecontentandnaviga-tionofthehostingwebpage.Theycannotexecutewithoutahostingwebpage.

Aspecialpropertyoftheseclientsidescriptsandpro-gramisthattheirlifetimeisthesameasthewebpagehost-ingthem.Ifthewebpageisreplacedbyanotherorwindowisclosed,alltheattachedscriptsandprogramswillbeter-minatedimmediately.

UML,OOP,面向对象

Figure8.De ningSystemUnderDescription

4MappingfromWebNavigationtoState-chartModeling

Inthissection,webnavigationwillbemodeledbyusingStatechart.Ingeneral,webpagesandtheiraccompaniedclientprogramsandscriptsaremodeledasstatesintheStat-echart,andthehyperlinkbetweenwebpagesaremodeledastransitions,governedbytheeventsthattriggersthetran-sition.Onlythenavigationrelatedelementsaremodeledtosuitourgoal.Becauseofthecomplexityofthecontem-poraryWWW,themodelingscopewill rstbediscussed,thenwewillintroducemodelingofwebnavigationthatap-pliestoallwebpages,followedbywebnavigationmodelextensionsfordynamicwebpages.

4.1ModelingScope

Inthewebenvironment,itisnotpossibletomodelallwebpageshyperlinkeddirectlyandindirectlytothepagesweareinterestedin.Thisisbecausetherearerarelyany“deadend”ofwebpagesthatdonothaveanyhyperlinkoutofit,sobysimplyfollowinghyperlinks,onecannavigatetosomemillionsofwebpages.Wemustthereforelimitthescopeofthesystemunderdescription.

Thesetofwebpagesthatareofinterestis rstidenti ed,thenthescopeofthesystemunderdescriptionislimitedtoanywebpagethatbelongstothesetorisdirectlyhyper-linkedbyanywebpagebelongstotheset.AsshowninFigure8,somewebpageswiththeirhyperlinksarerepre-sentedbyasimpledirectedgraph.Theinterestsetis rstidenti edaswebpagesP1toP5.TheimmediatelylinkedpagesareQ1andR1.Sothesystemunderdescriptionin-cludeswebpagesP1,P2,P3,P4,P5,Q1,R1.

Thereasontoincludethisextra“layer”ofpagesinthemodelisthatnavigationpathsleadingoutoftheinterestsetofpagesisalsoimportantfornavigationmodeling,astheyactasthe“exit”ofthesystem,andthedestinationsofthese

exitpathswillalsobeofimportance.

Bythesameprincipal,itisarguablethatwebpagesthatleadintotheinterestsetshouldalsobemodeled.Butbythedirectionalnatureofhyperlink,thetargetwebpageofahyperlinkcannotknowwhatisthesourcewebpage.Soitisimpossibletoidentifywhichwebpages,ifany,leadsintotheinterestset.Moreover,afterarrivingattheinterestset,the“entrancepage”isofnomorevaluetonavigationashy-perlinkisnotbi-directionalandthereisnowaytonavigatebacktoit.If,however,thereisalinkbacktothe“entrancepage”intheinterestset,that“entrance”willbemodeledasanexitpath.

Exitpathdestinationpagesaremodeledasbasicstates.Notethattheseexitpagesarenotnecessarilyterminalstates,unlesseverycomponentofthesystemhasenteredtheseexitpagestates,thesystemcancomebackfromthesestates.SeeClientSideinSection4.2.5foranexampleofre-enteringtootherstatesfromanexitpagestateforpartofthesystem.

4.2WebNavigationModeling

4.2.1Intra-page

Forintra-pagewebnavigations,whenscrollingisnotpos-sible(eitherlimitedbyashortpagelengthorbyintention-allydisablingthescrollbar)andthereisnoselftargetedhyperlink,thewebpageismodeledbyanbasicstate(Fig-ure9a).1

Inothercases,sub-statesareusedtorepresentthedif-ferentpositionsofthewebpageinview.We rstde nejp(target,pos)istheeventtojumptopositionposofatar-getwebpagetargetbyahyperlink.Bothtargetandposarede nedasprimitivevariablesinthestatechartmodel.Theeventofactivatingaselftargetedhyperlinkismodeledbysettingtargettothecurrentwebpage.Thepageismodeledasacomposedstateandeverypossiblebrowsingpositionofthepageismodeledasapossiblesub-stateofthepage.Whenthepageisinaparticularsub-state,furtherintra-pagehyperlinkjumpingeventswillcauseittoleavethecurrentsub-statetothenewappropriateonebytheselectconnec-tiveinStatechart.Thepropernewsub-stateisselectedbythevaluepos(thenewdisplayarea)oftheeventtore ectthenewbrowsingposition(Figure9b).4.2.2Inter-page

Thisisamoretrivialkindofmappingfromhyperlinkstostatetransitions.Abstractionisdonehereonindividualpagesincomposedstate,detailsofsub-statesarehidden

UML,OOP,面向对象

productA.html

(a)

(b)

Figure9.Intra-pageModeling

forsimplicity.Everyhyperlinkfromonepagetotheotherisrepresentedbyastatetransitionarrow,thehyperlinkac-tivationistheeventthattriggersthetransition.Ifmulti-plehyperlinksonawebpagepointtothesametarget,theyareconsideredequivalentandonlyonetransitionarrowisneededtorepresentthem.Thehyperlinkscanbeavailablefromallpagesub-states(Figure10a)oronlyavailablefromsomeofthem(Figure10b).Targetofthehyperlinkisal-waysoneofthesub-statesofthetargetwebpage,sothiscanberepresentedbydefaultingtotheselectconnective(Figure10c).Thechangeofstaterepresentsthechangeofdisplayingcurrentwebpagetothetargetwebpageofthehyperlink.

TheXORdecompositionofStatechartplaysanimpor-tantroleheretosimplifythediagram.Webpageshav-inghyperlinksofcommontargetcanbegrouped.Themodelofacommontree-likemenustructureofwebpagesisshowninFigure11atoillustratethis.jp(menu,pos)ofproductA.htmlandproductB.htmlaregroupedtogethertoberepresentedbyonetransitionarrow.

Theselectconnectivecanalsobeusedtogroupallhy-perlinktargetsofapage.In gure11b,menu.jpeventfromstatemenu.htmlisde nedasthedisjunctionofthetwolowerleveleventsjp(productA,pos)andjp(productB,pos)in gure11a.Thisde nitionshouldaccompanythestate-chartsoexpansionbacktoFigure11aispossibleifdesired.4.2.3Frame-based

AwebpagewithframesismodeledastheorthogonalANDofthestateofitsframes(Figure12).Anoptionalstatename,suchasframe1,frame2andframe3inthe gurecanbegiventoeachframe.frame2andframe3,havingtwoormorepossiblesub-states,hasadefaultstatetoindicatethedefaultwebpageloadedinthatframe.ThisisindicatedbythedefaultarrowintheStatechart.Thesub-statescanbeasimplewebpageoranotherframedpage,Navigationfromaframedwebpagetoanotherpagecanbemodeledasthe

Figure10.Inter-pageHyperlinks

Figure11.Inter-pageModeling

UML,OOP,面向对象

Figure12.Modelingframedpage

eventjp(next,pos)inFigure12.

Synchronizationbetweenframescanbedonebyeventsofclientsidescriptsandprograms.Mostoftheeventsgen-eratedhaveoneintendedreceivertosynchronizewith.ThissynchronizationismodeledbyeventbroadcastofState-chart.Everyeventisreceivedbyallframestoreactupon,sothattheirstatescanbesynchronizedbyevents.Thediffer-encebringaboutbyusingbroadcastinthestatechartmodelinsteadofunicasteventscanbesolvedbyaddingthere-ceiver’sidenti ertotheeventnamewhenmodeling,sothateveniftheeventisbroadcasted,onlytheintentionalreceiverwillactonit.Othercomponentscanrealizetheeventisnotforthemanddiscardit.

Figure13demonstratesthis.Awebpagenext.htmlneedstohaveitsproductinformationandphotogallerydisplayedinsynchronization.AmenuframeisusedfordisplayinginformationofproductAandproductB.Aphotoframeisusedfordisplayingthephotogalleryofthecurrentlydisplayingproduct.Synchronizationbe-tweenthedisplayingproductanditsphotogalleryisbythejp(target,pos)events(Figure14).Initially,thepageisinthesub-statesmenu.htmlandgeneral.html.Wheneventjp(productA,pos)happens,framemenutransittostatepro-ductA.htmlandframephototransittostatephotoA(Fig-ure15).InphotoA,thephotogalleryofproductAcanrunbytheeventsjp(2,pos)andjp(3,pos).Thetwoframesaresynchronized.Eventsjp(productB,pos)andjp(menu,pos)performssimilarly.4.2.4MultipleWindows

ConcurrentviewingofwebpagesbymultiplewindowsismodeledbyusingaseparateStatechartforeachwindow.ThisismodeledinFigure16.Thesystem rststartedwithonewindowmainWin.Wheneventjp(next,pos)happened,anewwindowispoppedupcontainingads.html.ThisisrepresentedbyspecifyingthenameoftheanotherstatechartadsWin(whichisofthenewlycreatedwindow)astheac-

Figure13.SynchronizationinFrames

Figure14.InitialStateofFigure13

Figure15.Aftereventjp(productA,pos)

UML,OOP,面向对象

Statechart mainWin

Statechart adsWin

Figure16.ModelingMultipleWindowstionoftheevent.TheyarenotmodeledasorthogonalANDbecausenotallofthewindowswillco-existallofthetime,eitherbydesignorbyusermanuallycreatingorclosingnewwindows,sotherearetimeswhenthesystemisnotinallofthesub-statessimultaneously.

Synchronizationbetweenwindowsisstillpossiblebythesamemechanismasinframes.Eventscanbedirectedtoadifferentwindowthanthegeneratingone.Modelingthissynchronizationisdoneby“broadening”theeffectofbroadcastofeventstoeveryStatechartinthemodel.4.2.5DynamicContent

Dynamicwebpagesgiverisetodif cultiesinwebnaviga-tionmodeling,asnotallstatesareknowninadvance(asofstaticwebpages)andthesizeofthesetofpossiblestatecanbeverylargeevenifknown.Thesetofpossiblenavigationpathsofthesedynamicpagescanalsobedynamic.Thefollowingsdiscussthemodelingmethodofthesedynamicrelationships.

ServerSide

Tomodelserversidedynamiccontent,itisimpossibletolistouteverypossibleresultpageasaseparatestateinthemodelbecauseofthesheerquantity.parameterized-ORisusedheretosolvetheproblem.Allpagesgeneratedfromthesametemplateareconsideredtobeasingleparameter-izedstate(result.html-Figure17).Aneweventsm(target,param)isde nedastheactionofsendingoutapagerequesttotargetwithparametersparam.Bothtargetandparamareprimitivevariablesinthestatechartmodel.Therewillbeasetofpossiblereturnpagesandtheoneactuallyreturnedwillbeselectedorgeneratedusingparambyserversideprogramsatruntime.

Hyperlinksleadingoutoftheparameterizedstate

Figure17.ServerSideDynamicPages

havetwotypes.Forthehyperlinksthatarepresentinallparameterizedpages,theparameterizedsetofwebpagecanbetreatedasasinglestatewiththetransitionleadingoutnormallyasshownbytheeventjp(search,pos)fromresult.html.Forallotherhyperlinks,iftheirquantityistoolargeorcannotbepredetermined,adisjunctionofalltheselowerleveleventsneedtobede nedtoconnecttoaselectconnective.InFigure17,theeventresult.jpfromresult.htmlisde nedasthedisjunctionofeventssm(order,p)andjp(outOfStock,pos),whichinturnrepre-sentsjumpingtotheorderpageoftheselectedproductpandaOutofStockpagerespectively.ClientSide

Wearenotconcernedwiththestatechangeinclientsidescriptsandprogramsthatdonothaveanyimplica-tiononnavigation.Sotheyaremodeledasanyotherex-ecutableobjectthatmaintainstheirownstatebyState-chart[4].Outwebnavigationmodelwillnotcovermod-elingofexecutableobjects.TheStatechartobtainedfromexecutableobjectmodelingisorthogonalAND-edwiththewebpagestatewhichhoststhescriptorprogramtoformthenewcomposedstaterepresentationofthepage.Be-causethescriptsandprogramsareinitializedanddestroyedwiththehostingwebpage,thesystemwillbeinallofthesesub-statesconcurrently.Thisissimilartothemodelingofframes,butsub-statesofaclientsideprogramarenotwebpagestatesandtransitionsarenotfromhyperlinkactivation.

UML,OOP,面向对象

highlightCwillgiveadifferenttargettotheaction,andthisactionwillbereceivedbythedisplaystateasaeventtotriggertransition.Thenamedisplayisinsertedbeforethejp(target,pos)eventtopreventambiguity.

Regardingthescopeofsystemunderdescription,notethatsome,orallofA.html,B.htmlandC.htmlcanbeoutsidetheinterestset.ControlactionsfromtheJAVAprogrammakeitpossibleforthesystemtoreturnfromthosestatesevenifnohyperlinkleadingoutofthemismodeled.Thisshowsthattheyarenotterminalstates.

5Conclusion

Wehavepointedoutprevioushyperdocumentmodelingtechniquesofwebnavigationcannotmodeldynamicwebnavigation,whichisusedextensivelyincontemporarywebpages.Mostofthesepreviousmodelsonlyaddresshyper-media,withoutthesupportfordynamiccontent.Weana-lyzeddifferentkindsofwebnavigationmethods,andawebnavigationmodelingmethodusingstatechartisproposedtoprovideamorecomprehensivemodelingofwebnavigation.Thisnewmodelprovidesasimplewaytomodelcomplex,dynamicwebnavigation.Futureworkswillbecarriedoutonre nementofthemodelandtheanalysisofwebnaviga-tionusingthemodel.

Figure18.ClientSideDynamicPagesTheyareprogramstatesandeventsinstead.

Onthenavigationaspects,thesescriptsandprogramscanpostconstrains(enable/disable)onthehyperlinks,thisisnaturallymodeledasconstrainsonthetransitiontrigger-ingevents.Dynamicde nitionofhyperlinktargetismod-eledbyvariablesoftransitions.targetofahyperlinkisavariableinthemodel,whichthescriptsandprogramscanchangethevalueatruntimeandachievetheeffectofdy-namicallyde ningahyperlink.Notethatsomescriptsandprogramscanpostconstrainsonhyperlinksofpagesotherthanthehostingpage.

Figure18illustratesthis.Thesystemstartswiththestateagreement.JScriptisusedwithacheckboxtomaketheuseragreetosometermsandconditionsbeforeproceeding.Thisismodeledbytheconstrainontheeventjp(menu,pos).TheconditionJScript.in(agreed)istrueonlyifthesub-stateJScriptisinagree,andthetransitionisallowedonlyifthisconditionistrue.

Inmenu,aJAVAmenu,embeddedinmenu.html,isdis-playedinseparateframeswiththeinformationpagesA,BandC.TheJAVAmenuismodeledasanorthogonalsub-stateofthemenustate.Itwill rstshowanopeninganima-tionwheninitialized,andwillproceedtodisplaythemenuitemsaftertheanimationhasended,orwhentheuserclicksamousebutton.

ActionsinstatedisplaymenushowshowtheJAVApro-gramcontrolnavigationonanotherframe.WhenamouseclickeventisreceivedbytheJAVAprogram,itwillreplacethecurrentcontentofthedisplayframewiththepagethecurrentlyhighlighteditemrepresents.Thisismodeledbytheactiondisplay.jp(target,pos)oftheeventmouseClick.mouseClickindifferentstateshighlightA,highlightB,

References

[1]ChaomeiChen.Structuringandvisualisingthewww

bygeneralisedsimilarityanalysis.InProceedingsofthe8thACMConferenceonHypertext(Hypertext’97),pages177–186,Southamption,UK,1997.[2]municationsoftheACM,42,No.10:63–70,1999.[3]D.Harel.Statecharts:avisualformalismforcom-putersystem.ScienceofComputerProgramming,8,No.3:231–274,1987.[4]D.HarelandE.Gery.Executableobjectmodeling

withstatecharts.InProceedingofthe18thInt.Conf.Soft.Eng.,pages246–257.IEEEPress,March1996.[5]D.Harel,A.Pnueli,J.P.Schmidt,andR.Sherman.On

theformalsemanticsofstatecharts.InProceedingsofthe2ndIEEESymp.onLogicinComputerScience,pages54–64.IEEEPress,1987.[6]DenisHelic,HermannMaurer,andNickScherbakov.

IntroducinghypermediacompositestoWWW.Jour-nalofNetworkandComputerApplications,22,No.1:19–32,1999.

UML,OOP,面向对象

[7]Chung-MingHuangandMing-YuheJang.Interac-tivetemporalbehaviousandmodellingformultimediapresentationsintheWWWenvironment.TheCom-puterJournal,42,No.2:112–128,1999.[8]C.Huizing.SemanticsofReactiveSystems:Compari-sonandFullAbstraction.PhDthesis,EindhovenUni-versityofTechnology,March1991.Chap.1.[9]SougataMukherjeaandYoshinoriHara.Fo-cus+contextviewsofworld-widewebnodes.InPro-ceedingsofthe8thACMConferenceonHypertext

(Hypertext’97),pages187–196,Southamption,UK,1997.[10]OMG.OMGUni edModelingLanguageSpeci ca-tion,1.3edition,June1999.[11]F.B.Paulo,P.C.Masiero,andM.C.F.Oliveira.Hy-percharts:Extendedstatechartstosupporthypermediaspeci cation.IEEETransactionsonSoftwareEngi-neering,25(1):33–49,January/February1999.[12]F.B.Paulo,M.A.S.Turine,M.C.F.Oliveira,and

P.C.Masiero.XHMBS:Aformalmodeltosupporthypermediaspeci cation.InProceedingsofthe9thACMConferenceonHypertext(Hypertext’98),pages161–170,Pittsburgh,PAUSA,1998.[13]P.DavidStottsandRichardFuruta.Petri-net-based

hypertext:Documentstructurewithbrowsingseman-tics.ACMTransactionsonInformationSystems,7,No.1:3–29,1989.[14]M.A.S.TurineandM.C.F.Oliveira.HySCharts:A

statechart-basedenvironmentforhyperdocumentau-thoringandbrowsing.MultimediaToolsandApplica-tions,8:309–324,1999.[15]M.A.S.Turine,M.C.F.Oliveira,andP.C.Masiero.

Anavigation-orientedhypertextmodelbasedonstate-charts.InProceedingsofthe8thACMConferenceonHypertext(Hypertext’97),pages102–111,Southamp-tion,UK,1997.[16]ingstatechartsto

modelhypertext.InProceedingsoftheACMconfer-enceonHypertext,pages242–250,1992.

本文来源：https://www.bwwdw.com/article/zpxj.html