Tải bản đầy đủ - 0 (trang)
Chapter 7. The MyBlog Gadget Revisited

Chapter 7. The MyBlog Gadget Revisited

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

dataaswellasforusercustomizationthanthoselistedhere.

Inarealscenario,usersshouldnotbelimitedtojustoneblog.

Theusershouldbeabletoviewandmanagemultipleblogsin

thesamegadget.Thereshouldbeoptionstoaddandeditblogs

fromthegadgetwithacustomizablesizefortheflyoutwindow.

Becausethedatainthefeedmaynotbecompletelyavailablein

RSSorAtomfeeds,theusermighthavetofollowthelinkinthe

feedtogototherespectivepage,whichcanbecodedinHTML

orXHTML.Therearelotsoffeaturesthatcanbeaddedtothe

gadgetifyouconsiderMyBlogGadgetinalargercontext.

Butjustaddingfeaturestoagadgetdoesn'tmakeitmore

attractive.Youhavetodecidewhatfeaturesareactually

requiredandaddrealvaluetothegadget.Therightsetof

featuresandproperimplementationisthekeytoasuccessful,

populargadget.

Keepthesetwoquestionsinmindwhileaddingfeaturestothe

gadget:

Isthefeaturerequiredanddoesitaddvaluetothegadget?

Howdoyouimplementthefeaturewithoutadding

complexitytotheuserexperience?Simplicityshouldalways

betheguidingprincipal.

ThefirstversionoftheMyBlogGadgetisasimple

implementationofaninformationgadgetanditdoesexactly

whatitsays(seeFigure7.1).Butasthischapterdemonstrates,

itneedsadditionalfeaturestobeatrulyusablegadget.

Figure7.1.Thesimplelayoutofthefirstversionofthe

MyBlogGadget.

[Viewfullsizeimage]



Chapter7.TheMyBlogGadgetRevisited

"Alwaysdesignathingbyconsideringitinitsnextlarger

context—achairinaroom,aroominahouse,ahousein

anenvironment,anenvironmentinacityplan."

—ElielSaarinen,Architect

INTHISCHAPTER

RecappingtheMyBlogGadget

TakingtheMyBlogGadgettotheNextLevel

Docked,Undocked,andMiniMeVersion



RecappingtheMyBlogGadget

TheMyBlogGadgetgetsyoustartedwithwhatcanbedone

withthegadgetplatform.Mostoftheinformationgadgetsuse

anonlinefeedintheformofAtomorRSSsyndication.Thisfeed

isdownloadedusingAjaxtechnologyandextractedusing

JavaScriptcode.Theinformationisstoredinthememoryandis

displayedontheflyoutwindow.

TheMyBlogGadgetinChapter5,"CreatingaSimpleGadget

withRSS/AtomFeed,"hadasimpleobjective:displaythelast

fiveblogspostedfromanonlinefeed.Itwasimplementedwith

thefollowingcharacteristics:

Displaysthelastfivetitlesinthegadgetwindow

Displaysblogentries,withdates,intheflyoutwindow

SupportsbothRSS2.0andAtom1.0

UsercanchangethedefaultfeedURLanddimensionsofthe

flyoutwindow

Creatingafeature-richgadgetrequiresmoreoptionsforthe



dataaswellasforusercustomizationthanthoselistedhere.

Inarealscenario,usersshouldnotbelimitedtojustoneblog.

Theusershouldbeabletoviewandmanagemultipleblogsin

thesamegadget.Thereshouldbeoptionstoaddandeditblogs

fromthegadgetwithacustomizablesizefortheflyoutwindow.

Becausethedatainthefeedmaynotbecompletelyavailablein

RSSorAtomfeeds,theusermighthavetofollowthelinkinthe

feedtogototherespectivepage,whichcanbecodedinHTML

orXHTML.Therearelotsoffeaturesthatcanbeaddedtothe

gadgetifyouconsiderMyBlogGadgetinalargercontext.

Butjustaddingfeaturestoagadgetdoesn'tmakeitmore

attractive.Youhavetodecidewhatfeaturesareactually

requiredandaddrealvaluetothegadget.Therightsetof

featuresandproperimplementationisthekeytoasuccessful,

populargadget.

Keepthesetwoquestionsinmindwhileaddingfeaturestothe

gadget:

Isthefeaturerequiredanddoesitaddvaluetothegadget?

Howdoyouimplementthefeaturewithoutadding

complexitytotheuserexperience?Simplicityshouldalways

betheguidingprincipal.

ThefirstversionoftheMyBlogGadgetisasimple

implementationofaninformationgadgetanditdoesexactly

whatitsays(seeFigure7.1).Butasthischapterdemonstrates,

itneedsadditionalfeaturestobeatrulyusablegadget.

Figure7.1.Thesimplelayoutofthefirstversionofthe

MyBlogGadget.

[Viewfullsizeimage]



TakingtheMyBlogGadgettotheNext

Level

AlthoughtheMyBlogGadgetcoversthebasicfunctionsandfile

structuresrequiredfortheframework,it'snotcomplete.An

informationgadgetneedscustomizabilityandmoredata

options.IntheMyBlogGadget,ifyouhavetodisplayanother

blogyouhavetocreateanotherinstanceofthegadget(see

Figure7.2).

Figure7.2.Thegadgetshowingfeedsfromthree

differentblogs.



Instead,theusershouldbeabletoaddanynumberofblogsto

thegadgetandshouldbeabletoeasilytraversethroughthem.

Thegadgetisalsolimitedtoshowingonlythelastfiveblog

entries.Thereshouldbeawaytoincludemultiplepages(also

calledpaging)fortheblogentriesinthegadget.

Figure7.2showsthreeinstancesofthegadget,usingthree

differentfeeds:

http://widgets-gadgets.com/atom.xml

http://trickofmind.com/atom.xml

http://innovatewithgadgets.com/atom.xml

Optimizingthespaceofthegadgetisalsodesirable.Exercising

theoptiontodecreasethesizeofthegadgetcanimproveits

usability.



Finally,itshouldprovideanoptiontocustomizetheflyout

windowwidthandheightforeachdatafeed.

ThenextversionoftheMyBlogGadgetsupportsadvanced

pagingsothattheuserisnotlimitedtothelastfiveblog

entries,butcantraversethroughallthedataavailableinthe

feed.ItwillalsohaveaMiniMeversionforoptimumusageof

space.Figure7.3illustratesanoverviewofthegadgetyouwill

seebuiltinthischapter.Itcantakedatafromanynumberof

onlinefeedsandhasadvancedpagingschemes.

Figure7.3.ThelayoutofthenextleveloftheMyBlog

Gadget,showingfeedsfromthreedifferentblogs.

[Viewfullsizeimage]



TheadvancedMyBlogGadgetframeworkincludesthefollowing

features:

Multiplefeeds



Advancedpaging

DockedandMiniMeversion

Unobtrusivetraversing

Advanceddisplayandpresentation

HTMLandXHTMLdata

Thefollowingsectionsgothrougheachofthemonebyone.



AddingMultipleFeeds

Toaccommodatemultiplefeeds,optionsmustbeaddedinthe

gadgetwindowaswellastheSettingspage.Thegadget

windowneedsthefollowingadditions:

In-memorystorageforthemultiplefeedURLs

Defaultfeedstodisplaywhenthegadgetrunsthefirsttime

HTMLcodetodisplaythetitleoftheblog,alongwithleft

andrightarrowstotraversebetweentheblogs

changeFeed()functiontotraversethefeeds

AsillustratedinFigure7.4,theSettingspagerequiresthe

followingadditions:

Viewfeeds

Add,edit,anddeletefeeds

Resetfeedstodefaults

Figure7.4.TheSettingspageincludestheoptionto

includemultipleblogs,andthegadgetwindowinthetop

leftenablestheusertonavigatebetweenblogsby

clickingonleftandrightarrows.

[Viewfullsizeimage]



AddinganOptionforMultipleFeedstotheGadget

Window

Tostoremultiplefeedsinmemory,youneedthreearraysto

storetheURLsandthecorrespondingwidthandheightofthe

flyoutforthosefeeds:

90



varURLFeeds=newArray();

varURLFeedsW=newArray();

varURLFeedsH=newArray();



Next,youneedtoconfigurethedefaultfeedstodisplaywhen

thegadgetrunsforthefirsttime.Todothis,youmustcreatea

functionthatresetsthearraystotheirdefaultvalues.

90



functionDefaultFeeds()

{

URLFeeds[0]="http://innovatewithgadgets.com/atom.xml";

URLFeedsW[0]=600;

URLFeedsH[0]=600;

URLFeeds[1]="http://widgets-gadgets.com/atom.xml";

URLFeedsW[1]=700;

URLFeedsH[1]=600;

URLFeeds[2]="http://trickofmind.com/atom.xml";

URLFeedsW[2]=400;

URLFeedsH[2]=300;

}



NowyouneedsomeHTMLcodetodisplaytheblog'stitle,along

withsomenavigationarrows.Thefollowingtableisappended

withtheleftandrightnavigationarrowsandwithacalltothe

ChangeFeed()functionwhichisexecutedwhentheuserclicks

onthenavigationarrows.

90



CodeView:








<



VistaGadg



<

































Atthispointit'snearlytimetocodeintheChangeFeed()

function,whichallowsthegadgettotraversethevariousfeeds.

BeforecallingtheChangeFeedfunction,however,youfirstneed

tousetheReset()functiontoresettheblogtitlesinthe

gadgetwindow.

90



functionReset()

{

cell0.innerHTML='-/-
';

cell1.innerHTML='-/-
';

cell2.innerHTML='-/-';

cell3.innerHTML='-/-';

cell4.innerHTML='-/-';

}



WhyinvokethisReset()function?First,assumethattheold

feedhadfiveblogentriesandthenewonehadonlyfourblog

entries.So,ifyoudon'tresettheblogtitles,thefifthDIV

elementwillstillhavetheoldentries.Withthatdone,youcan

proceedtotheChangeFeed()function.

TheChangeFeed()functionhasaparameterindicatingthe

traversingdirectionas+1togoforwardor–1togobackward

throughthefeedlist.URLFeedsCurrentIdisavariabletostore

theindexofthecurrentlydisplayedfeed.Noteinthefollowing

codethatthecodehandleswrapfrombeginningtoendandend