Blueprint:Using Blueprint
From Adobe Labs
| Revision as of 15:17, 11 Jun 2009 Mira D (Talk | contribs) ← Go to previous diff |
Revision as of 15:17, 11 Jun 2009 Mira D (Talk | contribs) Go to next diff → |
||
| Line 9: | Line 9: | ||
| '''On the Mac the pre-specified keyboard shortcut is ''Control-B''. | '''On the Mac the pre-specified keyboard shortcut is ''Control-B''. | ||
| '''On Windows the pre-specified keyboard shortcut is ''Alt-B''. | '''On Windows the pre-specified keyboard shortcut is ''Alt-B''. | ||
| - | '''To change the keyboard shortcut or modify and specialized key scheme, open Window->Preferences, General->Keys.''' | + | '''To change the keyboard shortcut or modify a specialized key scheme, open Window->Preferences, General->Keys.''' |
| The first time you open Blueprint you will see a blank search box. | The first time you open Blueprint you will see a blank search box. | ||
Revision as of 15:17, 11 Jun 2009
Blueprint is a plugin for Flex Builder that lets developers query for sample code and look through examples found on the Web directly inside of Flex Builder. You can place Blueprint in a Flex Builder panel or you can open its window only when you need it.
To show you how you might use Blueprint, we take you through an example. As we go through the example, we will outline the main features of Blueprint.
You can open the Blueprint window by pressing on the Blueprint icon in the toolbar. You can also use a keyboard shortcut.
On the Mac the pre-specified keyboard shortcut is Control-B. On Windows the pre-specified keyboard shortcut is Alt-B. To change the keyboard shortcut or modify a specialized key scheme, open Window->Preferences, General->Keys.
The first time you open Blueprint you will see a blank search box.
You can type any query and Blueprint will return example code that corresponds to your query.
In our example, Jenny is trying to make a simple Flex application that lets the user query Flickr and displays images. She knows that she can use the HTTPService class so she types HTTPService into Blueprint.
Blueprint displays an example from the "Using HTTPService components" website and gives her some options for refining her query. Jenny sees that she can refine her query further by asking for an "httpservice example". She hits "Tab" to get to the query refinements and then uses the down arrow to get to "httpservice example." She clicks "enter" and the screen refreshes with her new query. She resizes the Blueprint window so that she can see more of the code example and then scrolls down to look at some more options.
To scroll down to the subsequent examples, Jenny uses the down arrow key and the scrollbar.
Jenny likes the short example that inludes the HTTPService and the DataGrid component. She highlights them and presses "Enter". Blueprint pastes the code into her file and keeps the window open in case she wants to paste more code into her file.
Next, Jenny starts working on displaying the Flickr images.
Since she is not sure exactly which component to use, she queries Blueprint for "displaying images." This time instead of first opening Blueprint and then typing the query, she types the query directly onto a blank line in her code. When she hits the Control-B hot key, Blueprint inspects the line of code where her cursor is located and queries the Web.
Jenny clicks on the Dock this query button in the top right corner of the Blueprint window, and Blueprint docs as a panel in the Flex Builder environment. It first appears at the bottom of the screen next to her debugging window. Jenny drags the panel and places it on the right (see below). Now Jenny can edit her code and keep the source webpage in view.
Jenny can also click on the hyperlinks to take her to the original webpages if she needs more context.
This Getting Started Guide is a work in progress. Please feel free to send us suggestions and improvements.
Your feedback is always welcome!
