WWDC2004 Session 440

Transcript

Kind: captions Language: en thank you all for coming today I'm sure you're here to here Andy and me speak and there's nothing going on here about a powerbook demo a power but give away or anything okay so this is dash board this is desk for development in depth what we're going to do today is show you a little bit about the architecture of the dashboard what how it works and they're going to basically get right into creating a gadget we had a little mix up here and we're not quicktime and digital media but they you know they have a pretty slide okay so there we go it's beautiful okay so i'm john lauch and this is andy gugino hello and basically Andy and I are the engineers responsible for the dashboard project okay so what is the dashboard for you what is the dashboard it is expose for your information so Annie what does that mean I have absolutely no idea right that's the marketing line yeah okay so X is a for information basically it's an accessory layers that comes and goes quickly not inferior with your workflow very similar to what expose it's kind of a modal interface you can interact with it you can go back to whatever you're using before and nothing you know everything is exactly the same way ok let's talk about the pieces of the dashboard there's basically four things there's a dashboard server there's a clot there's clients is basically one client for every gadget okay and in in this clients there is a gadget and the gadget can also contain a native code plugin and we'll get to that a little bit later ok so the dashboard server it's a very lightweight process that manages the dashboard client really all it's doing is launching and relaunching but the dashboard client what that means is if the if the gadget for some reason crashes we instantly relaunch it and you almost won't be able to tell this or the user almost won't be able to tell this there might be some data loss if there's a crash of course we prevent crash loops and only do this three times in some period I forget the exact amount of time it's also responsible for delivering or Marshall and event from the from the system to the clients back and forth it allows us to do a lot of powerful things which you saw in the demo you know that server side dragging and that type of thing it's the main thing is the other main thing it does is it does all be dashboard specific user interface you guys have seen the clothes boxes you've seen the riffles you've seen the configuration spins anything that's not in the gadget that is really related is in the dashboard server that's what's doing the work for you ok so the desk for client this is a very small app get process and really it's just a web view there'll be lots of sessions about web view and web technologies throughout today the other things it does is it probably a bridge between the dashboard server and the dashboard and the and the client so you know this is how you get data back and forth between them this is all hidden from you but that's what it's one of its responsibilities are the the other thing it does in the main thing that's important for you writing a gadget is it provides this gadget object this is a JavaScript object rejected the object that is bridged into into the JavaScript runtime that allows you to do the things like flips and other things will mention soon ok ok so a gadget it's just a web page it's that easy it really is just an HTML webpage the few things that requires is a gadget extent is a bundle sorry just a bundle and you all familias bundles in in on our system same same same structural you're always just familiar with we actually use a flat bundle that you may or may not be familiar with this is just everything kind of at the top level so valid bundle format any bundle former will actually work it requires a gadget extension something to note here to you probably hear in the words widget and gadget interchangeably that the name is not really to the payments in transition I think and basically everything on your DVD has a dot gadget extension so if you're developing these you have to use the doc gadget stuff and that's what's cool what you see in the interface on the DVDs so inside of the bundles there hasn't have an info.plist you have a default image the default image has to be a PNG file this is not this is just a requirement for WWDC and then you have an HTML file they'd when I said when we say HTML file it doesn't necessarily mean one file there just has to be a starting place and an HTML file of course can reference all other kinds of web content other CSS style pages JavaScript what have you any even network resources and then you can have a native code plug in as well ok so writing a gadget what andy and i found was the best the best way to start is go find a gadget copy it that's just you know it's the easiest thing to do we have my I think seven gadgets on the disk for you plus some in the SDK you just copy those you can go look in there there's all the codes already there for you and and that's the best place to start so you recopy the gadget you go in you go into the bundle and you go to the info.plist and start em you start enough massaging the info.plist to match what your what your gadget needs you to change the keys and whatnot and then launch Safari Safari is the debuggers choice for this for this environment and you can use any text editor to do video editing I think Andy and I use bbedit but you can use anything text edit bbedit I you could use Microsoft Word right okay so let's get coding and Andy here I 22 yes alright so we are on demo machine all right I followed this slide phone ones look at any second we're new at this so we thought we'd start today by writing a sample gadget now I already wrote this yesterday but we're going to go through the exercise of putting one together the thing we're going to write today is a validator now there's a million things that you've probably found that can go wrong when you try to put together a gadget you know some key is wrong you're missing something so we thought it'd be kind of cool to put together gadget whose sole purpose is to validate a gadget that you've already written so all it does is you bring up dashboard actually what you do is you start a drag of your gadget you bring up dashboard and you drop your gadget on to what we're going to write today and what it's going to do is it's going to generate a report for you using HTML and it's going to launch Safari and it's going to tell you what's wrong hey Andy yeah do we have a little mission to make here you have a little admission to make if I'm such a loser coder actually the thing that you guys have available to you doesn't actually validate it well ours always is more of an info.plist Walker but what i fixed it this morning very early and so actually this guy will glow validate it it's kind of interesting because it's really true that you know if you really easy to make mistakes but really easy to fix them in this environment because it's interpreted in fact we shipped some gadgets to it's a few minor issues with them on your den yours developer TBD and so maybe what we could do is just fix them for them let's start by fixing a bug actually you guys can follow along if you want I think the one we're going to attack is calculator aside from just being ridiculously wrong in some of its mass at sandia don't be mad as I'm sure you found yeah I'm not really good like that yeah so all the gadgets are stored inside of / library gadget we'll go ahead and go there you guys can do this too you'll see calculator gadget now all of our code is you know plain as day inside of this window closes up let me mention one thing here to what you notice is auntie is going to show package content that's because it gadgets extensions claim is what's called a package that means in the finder and other open save channels you can't actually go inside of it without going through a custom interface better experience for the end user can they can drag these things around and they don't actually go into them but makes a little hard to develop okay so let's fix the bug the bug that we're going to fix is going to go ahead and launch Safari if you drop calculator on to Safari you'll see that it has this font it's actually Helvetica but you'll notice on Steve's machine he had a segmented LCD display you guys have a tube it's just I'm a moron so what you have to do is open up your calculator HTML file and the actual bug is this guy right here you see where we set the font this is a CSS so you see we're set the pharmacist does DB LCD temp that's the name of our font so we're just kind of that's the bug so this is real I mean it's on you which is actually her name again now you'll see that is fun there's your font so you guys can actually fix our bugs yeah please please okay so that's the person we what we just wanted to get that other way so you guys can actually do this too and if there's some technique that you saw on any of the gadgets that you've played with feel free copies you copy the technique we have some animation stuff in there that's actually kind of interesting we have some workarounds with some bugs that we've come across and those are you know scatter throughout their because obviously you know where engineers we don't we don't put comments and anything so it's best if you just you know learn by seeing what we've done so let's go ahead and get something working what we have here is hello world gadget is on the sdk that you guys don't have so I'm going to start by copying that now you'll see validator gadget well this is actually i'm going to call it Bella degraded someone to call it validator temp and I'm going to call this guy there we go about the data via the validator it's really not that cool show package contents okay now you'll see we have a few things in this folder we've got a default paying the hello world in the info.plist if you haven't seen it already all it does is just chili world not that exciting so what we're going to do is we're going to modify the info.plist go ahead and double-click it few few things inside of here allow multiple instances that's just if you want to have something like stickies or you can keep dragging your gadget off by default if that's set to get if that's set to know you're going to get a great out title in your in the configuration bar the thing you absolutely have to change is the CF bundle identifier these have to be unique across all the all the gadgets on the system so we're going to call this just plain old validators the next thing is a fee a bundle name so this is the display name that's going to show up in the config bar so you can make this you know pretty looking so we'll just call it the validator we call the config bars of plus the power you just drag everything to in front ok the next thing you know these versions I don't really matter the default image what that should be is the a pink file at the top level of your gadget you don't put the dot paying extension on I think that's a buzz here well so that should just be you know your name so if you have uniboob r dot paying just call it simple the next thing you're going to see is the height and width these are the numbers that we use to specify the width and height of your image for the drag now if you put a big number in there I think what we're going to do is stretch the image to fill that number if the image does not match the fries you put their that default image will be stretched channel exam so what we're going to do is in my temp we're going to go ahead and show package contents here's my what the hell did I just do Oh is right cut the mic he's out yeah sorry yeah okay so we're going to do is go ahead and move I think there's a book and find out what that doesn't actually work so if you go ahead and move the fall ping in there that's a new picture did you know that at to a fanny yeah we're going to see this in icon view so Andy and I are actually artists on the side you'll be picking this up to so this is our picture it looks pretty lame and high give a guy freak okay so you'll see in Safari that it tells us how big this picture so it's 150 x 150 pixels so we're going to go ahead and go in here change that to 150 150 now last thing we have is the main HTML file and we're going to want that to be the validator HTML file so there is our validator HTML here's our hello world we're going to just toss that guy go ahead and move the validator in find a bug nice okay so we now have the basic structure now we're going to get into this in just a little bit but this plugin requires this Desai this gadget requires a native code plug-in to do something will tell you in about a bit so what I'm gonna do is I'm going to go ahead and put my plugin and since we'll get to this again in a little bit that these plugins need to be owned by root and we'll tell you why in just a second desktop because it validator bucks gadgets plugin hi kya and now we're going to do a pseudo channeling the week validator okay so now we have a gadget let's go ahead and try it out so a couple ways you can get these into dashboards right so if we go ahead and bring up dashboard we just have this you can either double click it or you can start a dragon i'm going to show you this because this is how we're going to use micro go ahead and start a drag go and bring up dashboard and let go that looks bad doesn't it and actually there's probably something wrong in our validator so fiscal to validation of the fix so okay we have our enthalpy list we go through everything oh you know the big problem is I didn't change this guy right so these are little gadgets that can get you we know it's a pain we're going to try and make this better this is just like a bun in st. battle format you set your resources the names have to match everything it's a budget right resources okay we've done that good try it again better and it's going to actually stick around that means it's there okay now let's try it out let's bring up hello world this guy takes a drop target and it's actually going to go ahead and do the Safari thing now I think because I screwed that up I'm going to again ignore all this stuff you can actually you know if that's for this actually I don't ignore this now don't acknowledge dashboard sometimes get into kind of a funky state what were they developed or dvd this is a developer whoa easy okay what you may have to do sometimes is kill the dashboard it's going to restart itself all you gotta do is bring it up so just like that it's also a note you should note that the dashboard server is obviously are so lightweight that they do really start up almost instantly right right you might feel like it's not restarted but it has so the next thing is so now we have you'll notice it still didn't work and that's because inside of this code we have a plug-in and one more key that we're going to show you in just a bit I promise is that we need to specify that so I'm going to go ahead and add a new child i'm going to call it plugin p l ug IM ok and we're going to call it the valid date you know i spell things out as i type i don't know why got gadget flow again I'll see if that works and just to be parent item I couldn't do that just sprinkle those around when things work I mean really ok now let's give it another world go ahead and drop this guy I worked ok so what it did is generated this little bit of HTML and it tells us that it exceeded now I've actually mopped up a bad demo or I'm sorry bad dunya telling a bad gadget and now this is going to tell us that this gadget failed because we're missing the whiskey right so you guys can come get this from a the fixed version of all this in the lab will go through that simply you look in the populace you'll see that on the whole we have a height but no wit and then together with and then I don't know what it was and then it should actually work this time well okay it didn't well you get the idea remember that whole thing about the bad it was fun ready this last night yeah so I think that's all we have for writing league if we go back to life yes ok so we just wrote a gadget and had a demo alright so that was a very that was very simple gadget one of the things you saw Andy do was he caused the dashboard layer to disappear and have safari to launch this is done through the gadget extension I was telling you about before a JavaScript object that we push into the environment that lets you do a few things there's a couple there's a couple there's a couple of methods that you should know about the gadget op there's this is all documented in the SDK so you can read what all the message do and what not there's a couple we should call out let's start actually here at the bottom not resizing your guess you're sliding your gadget or widget your your gadget exists inside of a window the window has to be the exact size of your gadget or a lot of the animations don't work the ripple effects the closed box whatnot they all look at the window slices and try to determine what to do so we have here is a gadget resize two methods there's actually two method resides to Andres eyes by the pretty pretty self-evident takes a width and a height or Delta wits and a delta height there's this is very close officer filling with client-side javascript is very similar to the window the window recite surah size 5 method they're a little bit different and that these don't have limitations on size where the where the window one does okay so that's resides in your widget we also have the configuration flip I'm assuming all you've seen the demo but you can click we want we want you need some place in the in the dashboard of store preferences so what we came up with this idea is that well you flip everything around and put that on the back so it doesn't interfere with your work but it's easy to get to we have a real simple way to do this inside of this we catch it objects it's basically three methods and that's it there's a start edit a finish edit and a run at a transition what let me tell y'all just works all you do is you say start edit start at it takes it basically takes a screen capture of your gadget whatever is on the screen at that time then it's freezing up they all updates to the to the to the monitor then all you do is call run edit transition sorry then what you do is you change your HTML in a variety of different ways you know you can add elements remove stuff do whatever you need to do and none of this will go to the screen because the screen is frozen then you say run edit transition then what we do behind the vent and pine your gets back is we take those two sides and we do the open jail flip and then we also have the backwards version which is finished finish at it that's the same thing its start at it but it flips in the opposite direction going back from your edits lied to your actual gadget really important thing to realize you must call run edit transition if you do not call run edit translation all screen updates not just for the schedule all screen updates or stops this is a limitation of the DVD not necessarily a limitation going to be in Tiger if you don't do it we actually do have a timer because we don't want to don't doesn't want to stop whole system and will cause for you i'm not actually familiar with the granularity of the timer i think it's like 35 seconds something like that okay so that's that's how we do the configuration flip another thing i was talking about is how we do the server side dragging you're familiar with this you know and in-app skating carbon apps work if an application tongue you can still move the window around this is really nice we wanted to take that same behavior into the gadget or the dashboard layer so no matter what's wrong with a gadget you can take it you can move it around you can even close it right get rid of it so if you have a bad gadget you know you can can spank it thank ya accusing I think we need more practicing here ok so in case the server-side dragon is really great but there's times when you don't want that I mean you have say a slider you have any type of tracking control you want to recite something whatever right when you have that we have the message for you to help you out here these are only just a few of them basically we have what are called control regions or control areas and what that comes down to the circles and Rex what's important is there's always been open and a closed when you open some control Rex you set them and then you close them when you close them they go to the server if you don't close them nothing's going to happen all right okay same thing is also you need to open and close when you clear your ex yeah sure that's a common mistake we always make yeah you can't just call clear at all controller extra clay our control wreck everything is between an open and closed closure ok let's move along ok so you saw Andy you saw Andy having to do some nasty things in the terminal we really want you guys to try to stay in sight of HTML as much as possible just HTML and JavaScript and the reason why is because it's a cleaner environment to the end user it's a sandbox environment whether there's not much they can do and they can't hurt your machine but eventually you're going to run against the wall for something you're going to create and that's why we have the ability to write objective-c code that then link since into the gadget we call these gadget plugins all these are is a cocoa bundle and to create a cocoa bundle you launch out you launch Xcode I believe there's a template for that is called Coco bundle so you create one of these things and they live either in system life or gadget plugins or they live for they can live also implies a bundle the important thing is they have to be owned by root and the reason why we did that it so that if a user guides one of these gadgets they have to put in the administrator password to actually install it so they can install malicious code on their system the important thing to note there is that just because own where it doesn't mean you're actually right running is rewrite these none of this is running x rays this is all running by the user so this is just a file permission issue ok so you use the gadget plug it extension and you have to have a principal class this is creating plugins as simple there's basically two api's you have this principle class and there's two methods that you have to implement on that principle class and it was webview is the first one and it was webview we find we never we almost never use it right Eddie yeah it's what we do is if you need it whatever you allows you to access to the web view as of the web the web view as it's loading stuff allows you to set up any initialization you might want to do or what not the major method is Windows Script object available this this message gets called this method gets called before any javascript is executed executing a web page this allows you to do what we did with the gadget slugs at the gadget extension so you can stick any you can stick any objective c object and push it through the binding system of a WebKit and it goes into the JavaScript runtime allowing you to do anything literally anything alright so that's the windows script object available ok when we do with demos complaining a little more about how you write a how you write a code plugin right so back to demo 20 here we go I've got the source code for the validator plug-in right here the next code project I'm going to take you through just a couple things on the project so when you create a new plugin and you Coco bundle you're going to get an empty project inside of what is it targets you're going to have a default target if we get info on that target you're going to see a properties panel now you can set your identify here doesn't really matter the interesting thing to us is you have to set your principal class so when you go ahead and create a new object a new sorry new objective c object using xcode just set its principal class right here the other thing you're going to want to do is go to the build tab and there's a little thing down here called rapper extension by default on a on a cocoa bundle it's going to say bundle you know one change that to gadget plugin no technically this is not as force that might be a force in this feature so should we go to the youth extension now yeah okay so let's take a quick look through the code here we see thee and it was very can you guys see this is that too small too small all right i'm gonna make it bigger on bigger rock solid Oh preferences any expert expert nothing we just to HTML know Oh syntax this guy nice yeah I use this a lot we really are engineers by the way okay so is that better okay so let's take a look here we have our net with love you it does nothing I was going to have some big grand plans but I'd you know doesn't do anything in there right now we have addy Alec here's the interesting part the window Script object available so your past a web Script object this comes from WebKit and you're going to call a method so you actually just going to do set value for key on that object that you're passed in and which we set for that value so we're going to set ourself and that means tell the JavaScript binding system to look at ourselves store any message that we want to explore it into the json' time by the way this is all documented in another session coming later today I think we have another slide it explains this process more in detail whole body mix it is it will be tomorrow it will be talking about him the key is in this case validator so that's how you're going to access this object inside of the jf runtime so it's going to be a global object called validator dot whatever now the rest of this do I show them that in the HTML okay awesome in a sec so here we have excuse me web script name for selector this is also called by the WebKit and what this allows you to do is set a pretty name for the names of your methods so this map sasa objective-c selector to a javascript name by default these guys come up with a pretty ugly name i think it's underscore underscore you know whatever your method name is that can get kind of tedious but that's done so there aren't any collisions in the namespace so we just remap everything to check plug-in permissions in this case you know save results to 10 the other thing we can do is you can exclude things from the job the JS findings so by default the bindings use object introspection to find out what methods are going to be available in the runtime so you don't necessarily want your knit and d alec and all this other stuff in there so in the example here we have a opt-in approach so we're going to exclude everything except you know check plug informations and save results attempt and all we do is we set a bull we return the bowl the other thing is the same exact concept applies to ivars in your object so this key is you know JavaScript we prevent anything with an underscore from being mapped into the binding system now it turns out we actually don't have any other variables but you guys can use that now we have two methods here check plug-in permissions all this guy does in this validator gadget is just checks it returns a bool and it says if the plug in the past that you pass in is owned by root this is what we talked about before we're unfortunate it's routine this now is the melody will actually check that to make sure your plugin is is that correctly and this is real I mean all we do you know you could do what you do whatever you want but in this case we just call else that and we just do something you'll notice what's interesting here is that we don't actually do any marshaling of arguments between the j s in the objective-c world that's all hang up for us by the binding system so any object i believe any scalar type any scalar type creo you can go type any object can be passed back and forth with you don't you deal with it just happens for free right and same thing so we just use any strings everything just just works and I tell you build a native code let's show you how lets it show you what looks like inside of the code something to go back to this guy validator catch it so you'll see in our HTML file it's going to be real simple there's just going to be a validator so the way we will see this this style inside of our code we just do a check to see if the object exists and all we do that for so that you can run this guy inside of Safari I am important we also you feed it through out all our sources if yeah there's any gadget acts that you see if gadget then we're actually used to gadget this lets you debug insight is Safari where the gadget objects does not exist right the second you start adding native code plugins things get just a little bit hairier so we just do this quick check if this operates available then go ahead and call validator you know save results to temp and you just pass it over variable you want that's all it looks like all right let's go back to spice alright thank you Andy okay so there's a couple tips would like to get across this is type of stuff well first let me tell you something I'm Andy and I when we came to this project knew absolutely what less than zero HTML we knew basically something with a dot HTML extension went to a web browser so we had no experience in HTML I think we had both idle maybe a little experience in JavaScript so we basically you know doing the same type of learning that you may or may not be doing so we can't we came across a couple tips that really helped us out one way we debug mostly is with alerts and exceptions both alerts and exceptions in the dashboard layer go to the consult you can always go and look at your console and we find errors and whatnot the exceptions are only on only go to your console for the WWDC bills in the future they would not go there because I was flood you know what the end user but it's helpful if you have a runway you know especially if something like an event handler that keeps throwing an extension that keeps happening you can find it really quickly in something like this one of the other things we added primarily for development is ability to reload your gadget inside of the dashboard layer I have to do is bring up the dashboard select it hit command are and they'll all they smell really load this makes it really easy just to go into your HTML if you need to change some CSS changing speed HTML change from JavaScript whatever hit reload and bam it's right there and entertain you great so it's a quick way to test changes okay so now we've shown writing a writing a plug-in and you're ready to plug in over here and so if you're like Andy you might have some issues with your with your code if I my trash or something else or you might need to bug something just for a while is all right so unfortunately it's a little hard to debug these things it's unfortunate for you fortunate for the end user this is what happens is the server is launching the client process you don't have access to the server or the client process you're only writing these plugins either in these gadgets sorry which are in HTML or these plugins being loaded in by the client process so you need to find the pit to get to those process to attach to them via g to be i'm not going to go too deep and attach with gdb but we can show you that later we need to find it unfortunately unfortunately that doesn't show up in top or any the normal unix tools it does show up in some higher-level tools we have we have a great yeah we have great utility and application utilities called activity monitor if you double click on that you'll find that the name the name of your gadget is something like dashboard it's something mainly gadget dashboard client you would only see that in this pit so you can go there look at it get the paint and then attach the other thing that you're going to have maybe have troubles in this environment is that the dashboard layer takes over your whole screen so it's very hard to GDB it at the same time in fact they almost impossible so dual machine debugging is the best way to go at that point until one of you write a slayer GDB gadget we really want that yeah that'd be really cool alright i quote powerbook we really want that gadget okay okay so another thing just was just a short coming in the system we have right now if we reload automatically syncs until the library gadgets and library gadgets / library gadgets we do not do this once the dashboard is loading so that's only when it starts up so if you've done something there you're not gonna it's not gonna automatically load for you what you can do is when any kind of show before you can either double-click on them brings up the dashboard layer or you can drag them then they're added then the folks that config borrow the dashboard so everybody knows about them okay let's go to the next slide Oh another thing part of this your alpha most cash reporter properly or maybe maybe not crash reporter gives you this great way to get back traces on code plugins or anything else that are crashing unfortunately for developer no background applications crashed reporters are actually shown they're all hidden so what you need to do is go to another another utility called crash reporter pressed inside of a developer application utilities and there is I think a radio one that says developer as soon as you hit that any background application will allow you to will will then show crash reports and that will help you debug there's a great thing that the app state team advice yeah there's a great thing that's a web-sight team at it too many kit seems at Apple it's called a good bug menu and you see here is a command to turn that on its that thing defaults write combat apples that Safari include debug menu this is a great tool in fact the Safari Safari team added I think a new new menu called JavaScript console the JavaScript console will be really really helpful for tracking down exceptions and whatnot inside of your JavaScript code and also has stupid editors and whatnot that we talked about another session the other thing they added by the way is the ability to make the Safari window I know so it's kind of flaky but it allows you to make the Safari window look like the dashboard so it turns off background drawing makes the window transparent so you can basically see a web page you know floating yeah you can get an idea what your cash it looks like it's really great I just takes away makes it look like a really kind of funny actually we can show that for those you're not familiar with unix programming and you need you need to make your plug-in route like we're talking about for security reasons here's the command to do it if you need to do it from the commandment or you can build those routes there's a lot of alternatives there all right fleur tips we have a lot of sessions coming up that will help you write gadget most of them are the WebKit related sessions we kind of same here i'm not going to go into them I think the building visually can play web pages is special you'd be interesting for you all right we also there's we have a reference library I think we have I think we have lots of examples on disk in the SDK we have documentation there's tutorials there's a there's an interesting what does it have because picture gadget in there yes that's what's done it's actually done by one of our documentation people who picked this up and did it in two days could give you an idea same thing for the I think you guys can do the same thing for the contest and there's two books the two books andy and i think we sleep with these books at this point right possibly help it yeah these views books are great news books really helps us out if you're starting out the defending the guy but David plan again javascript and the cascading style sheets these will really help you out learning how to write HTML learning how to use CSS incorporating all that all right we also have a lab we kind of went through this writ kind of quickly it's kind of hard to kind of take it in so we're going to have is a lab today from 12 to five where Andy and myself and Thal WebKit team Richard away from david Hyde and maybe a few others will be around to you know help you out answer any questions step you through steps where you going for the day until five o'clock five o'clock right so we're gonna be there two three will be drinking heavily after yes there's something thanks for rent