www.it-ebooks.info Pro Web Gadgets Across iPhone, Android, Windows, Mac, iGoogle and More ■■■ Sterling Udell www.it-ebooks.info Pro Web Gadgets Across iPhone, Android, Windows, Mac, iGoogle and More Copyright © 2009 by STERLING UDELL All rights reserved No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher ISBN-13 (pbk): 978-1-4302-2551-5 ISBN-13 (electronic): 978-1-4302-2552-2 Printed and bound in the United States of America Trademarked names may appear in this book Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark President and Publisher: Paul Manning Lead Editor: Ben Renow-Clarke Developmental Editors: Tony Campbell and Matthew Moodie Technical Reviewer: Jeffrey Sambells Editorial Board: Clay Andres, Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Duncan Parkes, Jeffrey Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Coordinating Editor: Kelly Moritz Copy Editor: Kim Wimpsett Compositor: Mary Sudul Indexer: Toma Mulligan Artist: April Milne Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013 Phone 1-800-SPRINGER, fax 201-348-4505, e-mail ordersny@springer-sbm.com, or visit http://www.springeronline.com For information on translations, please e-mail info@apress.com, or visit http://www.apress.com Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use eBook versions and licenses are also available for most titles For more information, reference our Special Bulk Sales–eBook Licensing web page at http://www.apress.com/info/bulksales The information in this book is distributed on an “as is” basis, without warranty Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work The source code for this book is available to readers at http://www.apress.com www.it-ebooks.info For Dick and Maureen, who always believed I would write www.it-ebooks.info Contents at a Glance Contents vi About the Author xv About the Technical Reviewer xvi Introduction xvii PART 1: WEB GADGET FUNDAMENTALS .1 ■ Chapter 1: Introducing Web Gadgets .3 ■ Chapter 2: Designing the Core Gadget 17 ■ Chapter 3: Developing for Multiple Platforms .51 PART 2: WEB PLATFORMS .75 ■ Chapter 4: Netvibes .77 ■ Chapter 5: iGoogle 95 PART 3: DESKTOP PLATFORMS .135 ■ Chapter 6: Windows 137 ■ Chapter 7: Mac OS X Dashboard 161 ■ Chapter 8: Opera 189 PART 4: MOBILE PLATFORMS 209 ■ Chapter 9: Windows Mobile .211 ■ Chapter 10: Symbian S60 245 iv www.it-ebooks.info ■ CONTENTS AT A GLANCE ■ Chapter 11: iPhone 267 ■ Chapter 12: Android 289 ■ Chapter 13: The Future of Web Gadgets 307 ■ Appendix A: Gadget Platform Cross-Reference 317 ■ Appendix B: The crossPlatform Abstraction Layer 323 ■ Appendix C: The Moon Phase Gadget 331 Index .345 v www.it-ebooks.info ■ CONTENTS Contents Contents at a Glance iv About the Author xv About the Technical Reviewer xvi Introduction xvii PART 1: WEB GADGET FUNDAMENTALS .1 ■ Chapter 1: Introducing Web Gadgets .3 What Is a Web Gadget? A Miniature Web Application… …That Distributes Your Web Assets… …Beyond Your Own Site The Distributed Web Why Build Web Gadgets? .10 Increased Exposure 10 Small Code Footprint 12 Cross-platform Compatibility 13 Cross-platform Development Strategies 14 Option 1: Self-contained 14 Option 2: A Middleware Layer 14 Summary 14 ■ Chapter 2: Designing the Core Gadget 17 Creating the Concept .17 Suitable for a Small Presentation 17 vi www.it-ebooks.info ■ CONTENTS A Single, Well-Defined Function 18 Dynamic Content 18 Immediate Usability 19 Mobile Considerations 19 Case Study: Hello, Moon! 20 Designing the User Interface 21 Look and Feel 21 Chrome 21 Size 23 Use of Space 24 Branding 27 Mobile Considerations 28 Case Study: Moon Phase’s User Interface 28 Architecting the Gadget 32 Structural Organization 32 Scripting and Functionality 33 Cross-browser Compatibility 36 Security 36 Mobile Considerations 38 Case Study: Architecture on the Moon 38 Considering External Design Issues .44 Title 44 Description 45 Icons and Thumbnails 45 Screenshot 46 Case Study: The Face of the Moon 46 Deploying the Core Gadget 47 Your Gadget As a Mobile Version of Your Site 48 Embedding Your Gadget Within Another Page 49 Supplying Your Gadget to Other Webmasters 49 vii www.it-ebooks.info ■ CONTENTS Summary 50 ■ Chapter 3: Developing for Multiple Platforms .51 Platform Detection 51 Detecting the API 52 Using the Results 53 Retrieving Content 54 Cross-domain Issues 56 Caching 56 Saving State 59 User Interfaces for Configuration 59 User Interface Alternatives 63 Storage Mechanisms 65 The Storage Class 67 Size-Related Functions 70 Utility Functions .71 Summary 72 PART 2: WEB PLATFORMS .75 ■ Chapter 4: Netvibes .77 Introducing Netvibes 77 Developing for Netvibes 78 Adapting the Core Gadget 79 Adding to crossPlatform 84 Testing and Debugging 86 Deploying to Netvibes 87 Listing in the Ecosystem 87 Promoting Your Netvibes Widget 90 Deploying Beyond Netvibes 91 Using Netvibes-Specific Extensions 91 viii www.it-ebooks.info ■ CONTENTS Inline Style and Script 91 Additional Preference Types 92 Learning More About Netvibes 94 Summary 94 ■ Chapter 5: iGoogle 95 Introducing iGoogle Gadgets 95 Developing an iGoogle Gadget .96 Adapting the Core Gadget 98 Additions to crossPlatform 106 Testing and Debugging 110 Adding Gadgets to iGoogle 110 Utilizing the Developer Gadgets 112 Deploying iGoogle Gadgets 115 Other Gadget Containers 116 Specialized Gadget Containers 122 Google-Specific Optimizations .128 Specifying Style and Script Inline 128 Using Additional Preference Types 128 Leveraging the Google Cache 131 Internationalization 132 Learning More About iGoogle Gadgets 133 Summary .133 PART 3: DESKTOP PLATFORMS .135 ■ Chapter 6: Windows 137 Introducing Windows Gadgets .137 Developing a Windows Gadget 137 Adding a Border 139 Adapting the Core Gadget 140 ix www.it-ebooks.info 72 '.&$'!&, 290 &)'! *'+.) -$'(%&+ #!+ 6 72 !&*+$$!& !&+' $!(*, 295 &)'! -!)+,$ -!  7, 290 &)'!&!*+3/%$2 ' $!*+!&, 298 '%()!& +  %)!+* ' &)'! & ! '&, 289 '&*'$3$', 293 '&*'$!+!& + )*',)* !&  *!&$ !)+')0, 294 )+!&  -!)+,$ -!, 290 )+!& & (($!+!'& !'& ') +  &)'! $,& ), 294 )+!& &+!- &)'! (($!+!'&*, 294 $-!# , '&!+') )-! 7, 292 ($'0!& &)'! (($!+!'&*, 303 -$'() '&*'$, 304 !*$!& +  ,+'!% +,), 291 !*+)!,+!& 0',) '.& &)'! (($!+!'&, 305 $!(*2 '.&$'!& & !&*+$$!&, 295 $!(*2 ''$5* ($,4!& '), 295 !++!&  + !+ !& & -)  &)'! *)&, 298 !*+')0 ', 289  ' $!*+!& ') +  ''&  * +, 300 !'&3(&, 294 - -$'(%&+ !+ 6 72 !&*+$$!&, 290 %!& - *',) !$2 ' $!*+!&, 299 %!&3/%$2 ' $!*+!&, 298 ''&  * +2 -!.!& !& +  &)'! )'.*), 292  &)'! )'"+ !$' '/, 297 '&$!& -$'() )*',)*, 306 (& &*+ $$!& 6 7, 289 (,$!* !& & ,(+ +' & (($!+!'&, 305 ),&&!&  (($!+!'&*, 292 +*+!& & ,!&, 303 ,*!&   ' +' $!&# +'  %)#+ $!*+!&, 305 ,*!& $!(* +' ,!$  *!& -)*!'& ' & (($!+!'&, 303 ,*!& !&(&&+ %)#+($* ') (($!+!'& !*+)!,+!'&, 305  !+ )&)!& &!&, 289 ! $**, 294 + '&*+!+,+*  &+!- (($!+!'&, 294 (! -)!$, 52–53 (($ ,++'&, 184 (($ -$'() '&&+!'&2 )!*+)!& '), 180 (($ $!), 184 (($4* ')4)!'& ),$, 175 (($ &' ,++'& '"+, 178 345 www.it-ebooks.info ■ INDEX (($4%'!$4.4((4($ +, 271 (($4%'!$4.4((4*++,*4)4*+0$ +, 271 (($!+!'& ()')%%!& !&+)*  *7 (! -)!$, 52–53 )+!&  *!&$ (*,'4  , 14 ++!& +   , 52 ++!& +  +-!*  , 84 +*38  , 95 ''$ + !*,$!1+!'&  , 126 ''$ +*  , 93, 95 0 +*  , 95 '"'  , 313 () !+*  , 189 $+')% )-!*  , 263 ''$) ,++'&  , 124 &!-)*$ !+  6 7, 77, 84 !&'.* *#+'( +  , 52 ,+''%($+ ,&+!'&$!+0, 33 ■B #.)* '%(+!$ $** ''#,(, 170 $' !*+)!,+!'&, 91 $'), 119  &!+!+!- -$'(!&  ($+')%4&'*+! %'!$  , 312  ') '!$ !+*, 312 (& '!$ )%!&$ $+')% 67 '),%, 312  *!+ $'+!'&, 312 )'.*)  , 58 )'.*)* ($'0!&  +* '& %'!$ )'.*)*, &+)&+ /($')), 36 %'!$ )'.*) *,((')+ ') ($,4!&*, (), 36 )!, 36 ■C 3 !$*, 138  !& -&+* & !*-&+* '   &$!&, 56 )'.*)  , 58   ()%+), 57 $!&+4*!   '&+)'$, 57 !&!+!'& ', 56 + ($+')%  , 58 +** !$, 57  )*2 *(!0!&, 57 $-)!& +  ''$  , 131 &+.')#  , 58 *)-)4*!   '&+)'$, 57 +#!& '&+)'$ ' *',) '  !&, 58 &-* $%&+ '%()!& +'  )( !*, 311 $)!& !&  9, 308 ).!&  *!%($ $'#2 -)!(+ ' $!*+!&, 309 )( !$ $$* +' +  '&+/+, 310 () *,((')+ '), 311 &-* %', 102, 104 ,&$ !*($0%, 169 ,&$ &+!!), 169 ,&$%, 169 ,&$ ')+)*!'&+)!&, 169 ,&$)*!'&, 169  )'% !& ') !&!-!,$ ($+')%*, 21 !&!+!'& ', 21 )'% , 314–315 $!&+4*!   '&+)'$, 57 $'* '/ &*+ & $'* '/ &*+, 169 $', '%(,+!&2 ,*!& ') *-!& *++, 66 '4*!&!& )+!!+, 150 '!& !& ,+''%($+ ,&+!'&$!+0, 33 '!& $$ + ,&+!'&$!+0 !& -)!(+, 33 '&*!)+!'&* ') %'!$ -!*, 38 )+!& & !)% )((), 50 %!&  + !& & !)% $%&+, 49 *(  ,&+!'&, 37 ' *+ +' ')&!1  +5* ', 32 !&'))+ ' ( ,*, 37 %#!& + )+)!-$* ,$+ +'$)&+, 38 %!&!%!1!& +  + +'  '.&$', 38 &-) +),*+!& ',+*! +, 37 ()'$%* )!*!& )'% $!&+4*! ($,4!&*, 36 *)!(+!& & ,&+!'&$!+0, 33 *()+ !$* & %!&+!&!$!+0, 32 *()+ !$* -)*,* %'&'$!+ ! ', 32 *+)+!* ') &%!& &%*(*, 35 *+),+,)!& ' !+ !&  -)!(+ &%*(, 34 346 www.it-ebooks.info ■ INDEX )+&&%(*$ #+"*&" (%-)(), 36 *.*( "#$*, 50 +)$ $ -)"/, 38 +)$  %( "" $*-%(! %&(*%$), 37 +)$ ,(&* (#-%(! "((), 33 ,"*$ $ )$*0$ +)( $%(#*%$, 37 - *), 32   **&'+)* 5 6 ""), 33 %#&*"*/1 (%))3&"*%(#, 13 %$2.#" )) "#$*), 195 % ")*$, 193 %$*$* "#$*, 196 (*$ %( $%-) %", 223 %)* "#$*, 195 %$ "#$*, 194  "#$*, 194 $*-%(! **(+*, 193 %&$$ $ &(, 203 &%(* "#$*, 195 &(%*%%" "#$*, 196 )+(*/ "#$*, 194, 196 -* "#$*, 193 %$(# +$*%$, 150 %$)%"2"%, 181, 249, 270, 293 %$*$* "#$* $,) #%, 102, 104 %&/$ "$!1 )*/"1 $ )(&* "#$*), 104 #&%(*$ * *4) #$   %, 105 )&/$ #+"*&" %$*$* "#$*) %( ($* ,-), 103 */& **(+*, 101 +(" %$*$* */&, 103 ,- **(+*, 102 %$*$* (*(," $, 56 "$*3)  %$*(%", 57 % ")*$, 54 %$*$* ",(/ $*-%(! 6, 56 (%))3%#$ ))+), 56 * (%+*$, 55 *.* +$*%$, 55 *  +$*%$, 55  &(%./1 +)$, 56 $%"+ +$*%$, 55 )#3%($ &%"/, 56 )(,(3)  %$*(%", 57 %$*(%" (%$)1 $$, 175 %$*(%") %$*$(, 26 %%!) "$*3)& $*+( %, 66 ,(&* +$*%$) *% ), $ (*(, %%! ,"+), 65 "#**%$) %$ +)$, 66 +)$ ) )*%( #$)#), 65 (%$*, 344 (%))"*%(# )*(*%$ "/(  +)*0 +$*%$, 110  +)*0 #*%1 $ %( * , 180 & ,(", 52–53 $) ('+( %( $%-) %", 227 $$ %$*$* )0 $  %%", 109 !$ %( * )%( &"*%(#, 179 %#&"* ,(&* )%+( % ")*$, 324 %$*$( ,(", 107 %$*$* (*(," +$*%$) %(  %%", 109 (*$ $ ($  * *", 283 (%))"*%(#2* % *, 284 **$ $ %$, 283 **$ * $(% &"*%(#, 302 **$ * %%" * %)* %$*$(, 106 **$ * $%-) * &"*%(#, 145 .+*'" +$*%$, 285 .*$$ &"*%(# )$$ %( &(, 201 )%"*$ (%# *  &$$), 51 "%$ $ ),$ &(($ *, 179 #%/$ %(  %%" %#&*"*/, 106 #%/$ %( * %$, 283–285 %&$ *) +$*%$, 284 &())*$* )*%(, 108 &"*%(#2 )1 %#&"* % ")*$, 324 &"*%(#3&$$* &(%&(*)1 *" %, 323 &"*%(#3**%$ % %(  %%"4) *  ), 106 &(($ ,"+1 (*(,$ $ ),$, 108 &(($ %( / +$*%$, 179 &() ,("1 )**$, 106 87 &"*%(# **%$1 % ")*$, 257 ),$ * ! *% * &*%( *", 284 )*(($ %( / +$*%$, 179 **$) )*%( $#)&, 145 )+&&%(* %( /$# * )0$ $ $%-), 146 347 www.it-ebooks.info ■ INDEX  )()$ $ *$ %' ) %$, 285 +'(%$ +'"0 ())$, 106 %+' #%' $ $" +(, 26 #&%')$ ()." ()( $)% )+(, 81 %%$ ( )0  % "()$, 29 %&) &'%&')., 25 &(1((0 %#&") % "()$, 333 *($   &(*%2$#(&, 30 ■D "+! * %$)%' '+ 50 %,$"%$ $ *($, 292 (%' ,)( &&" +"%&' %$$)%$, 180 &&"2(%'2'%$ '*", 175 &&" $% *))%$ % ), 178 (.$'%$%*( (.()# ""(, 186 !$ %' ) (%' &")%'#, 179 %$*')%$ &$0 ($$, 165 %$%'#$ )% )  *(' $)', 163 %$()'*)$ &"*2$( *($ %% $  )+2 , 186 %$)'%" '%$(0 $$, 175 ')$ $, (%*' "( %' 2(& %, 171 ')$ ) $%'#)%$ &'%&') "(), 168 (%'2(& -)$(%$(, 183 (%'2(& +'&), 176 (%, 180–181 *")1&$, 164 &"%.$ (%' ,)(, 182 ('&)%$ %, 161 +"%&$, 163 $"$ !'%*$(0 %''(0 $ (%,(, 163  .. .Pro Web Gadgets Across iPhone, Android, Windows, Mac, iGoogle and More ■■■ Sterling Udell www.it-ebooks.info Pro Web Gadgets Across iPhone, Android, Windows, Mac, iGoogle and More Copyright... categories: other web sites, desktop operating systems, and handheld devices www.it-ebooks.info CHAPTER ■ INTRODUCING WEB GADGETS Other Web Sites The Web is where gadgets started, and it’s still... web applications anywhere And gadgets are the natural medium for doing so Designed from the ground up for minimal screen size and focused operation, web gadgets have a built-in affinity for web- enabled