Making a Search Widget With Dashcode

Backheads101 here. Today, this is a Dashcode tutorial. In this tutorial, you're going to be learning how to make a Google search widget. Now, you're going to be doing this with Dashcode, which comes and installs with Xcode. You can click to find it, and here's Dashcode.

The first time it'll open up, it'll be under "Web Application." You just want to click "Dashboard Widget" and then click "Custom," then click "Choose." For the first time you open it, it'll come up looking something like this. You want to open up the layout interface if it's not already open, and we can design our interface.

I don't like this label here, so I'll click it and delete it. So now when you've had the layout interface selected, you have to click "Library," and under "Parts," you're going to want to drag on two things: "Search Field" and the "Button." So I'll just find the button.

Okay, now, yeah, so we drag the button up right here and search field up. We'll resize this later. I guess it doesn't matter if it's ugly; it's just a test application. Let's just resize it, and let's double click this button and make it say "Search."

Now we want to right-click on this button, so hold Ctrl and click on the button, the search button. Go to "Events" and "On Click." I'll call it "My Click Handler." So now, under "Code," we want to find "Get Text Field Text." So I'll just start that, "Text Field Text," and we want to drag it in here to this "My Click Area," "My Click Handler."

By the way, I will have all this code in a link in the description, so if you have any problems with this code and can't find it or whatever, just click the link in this description. I'll take you to a website with the code.

So now right here, we see under "Untitled Front," we have "Search Field," which is the name of this right there. You can see it right here on the side and "Glass Button." So this is called "Search Field," and this is called the "Glass Button," as you can see indicated right here. So this is the official name: "Search Field" and "Glass Button."

Now we want to set this text field value equals document.getElementById from the code we dragged in from the library. Under "Code," we want to change the element ID to be the name of the search field. So in this case, it was named "Search Field," as I just went over, so we do that.

Okay, now the text field value we're going to want to change to TextFieldValue.value to SearchFieldValue.value. Okay, so this is great. Right here, we've gotten the text field value, and that's what it's called now.

So now we want to hit enter, and under the library, which we got to once again by clicking the library button, we want to go to "Code" again and "External Access" then "Show Website." Okay, so now we want to just drag this "Show Website" icon right into here.

Okay, so now we've dragged the code for "Show Website" and showing a website into this code. Right now, this will open google.oraple.com. This is good so far. So now we can click "Run," and it'll open it up, and we click "Search," and it opens apple.com. It's pretty cool, right?

Um, but we're going to want to change this to google.com, and now we have to learn how Google's search engine works. We want to go to Safari now, go to google.com, and all this code will be in the description. So if you don't get this, just copy the code from the description.

You want to let's just search "Mac Kids 101" on Google. Okay, so you see all this stuff from Backheads101, and you can see at the top the address is google.com/search?hl=en&?q=macheads101.

So you can see this is kind of complicated, so I'll just show you what I'm going to do. Obviously, this is where the text you're searching is going to go. So if I change in the URL "mac," is what I want to be high; he would search "hot."

So say I copy this. I'm going to copy up to the equals right before "hi," as you can see. So copy, and now later in my code, I'll put whatever they searched instead of "hi." So I'll copy right up to there, go back here, and paste that in right there instead of "apple.com" or http://www.apple.com.

So that's good. As you can see, this is what it says now. How do we put this text field value that we got with our code into this website URL, which we're setting with our code?

Well, outside the quotation, the close quotation for this website URL, you do space plus space and then the name of the variable you want to add to that string. My case, it's TextFieldValue. Okay, great. So now I've added "websiteURL" to be the real Google search thing.

So here is my completed code in my click handler event. So what we want to do now is run, and we'll search "Mac Heads 101" with our application and click "Search." What do you know? It's opened up Google; it searched "Mac Heads 101." It's great!

So here's our search widget. Back in Dashcode, we can click the red stop button to stop running it. Now, here's something cool. So we've designed this Google search thing, and now you can do really a search for any website.

If you want to, like instead of that Google code for searching with Google, you can go to Apple's website, search "hi," and you can make your application search for Apple's website. So I can just change this right here.

So now instead of the website URL being http://google.com, it's http://www.apple.com/search/?q=TextFieldValue. Now let's run it. "Mac Heads 101." Let's search it on Apple's website. Zero search results found for "MacHeads101." That makes sense; I don't see why there would possibly be any search results.

But anyway, so that's pretty cool. Now I'll just save this and call this "Google Search Widget." Save it. But anyway, you can edit the icon; you can do whatever you want with Dashcode, and it's pretty cool.

So, um, thank you for watching "Mac Kids 101." Subscribe, and goodbye!