注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

神魔破杜梓的叨叨堂

Programming every day!

 
 
 

日志

 
 
 
 

了解Flex Builder 工作台  

2008-06-25 11:29:08|  分类: My Tech |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
原文来自InsideRIA

Adobe Flex Builder 3 Links:
- Try Flex Builder 3
- Upgrade to Flex Builder 3
- Buy Flex Builder 3
- See upgrade details
- More purchase options

Having covered the finer points of installing Flex Builder last time, both in it's standalone form and as a plugin, we'll now focus on making sense of the work environment within Flex Builder. Novice Flex users should expect to take away from this article an understanding of the organizational structure of the Flex development environment within Flex Builder 3, as well as an appreciation for the power of the Flex Builder workbench.

Perhaps the easiest way to get those new to Flex Builder started is to revisit a past installment in LFFS with some sample code that can be imported into Flex Builder. If you would, please, point your browsers here.... http://flexglossary.net/lffs/lffs-10-calculator-continued/calculator-code-reviewed/srcview/

Importing an Existing Flex Project

Even though we haven't corrected the "beta" issues with this calculator as of yet, it will do just fine as an example as to how to import a project into Flex Builder. In this example I'm mainly using the Flex Builder plugin in Eclipse, but I'll also discuss any unique processes for importing into the standalone version.

After you have downloaded the .zip file and saved it to your preferred location, you can now import that project into Flex Builder in the following manner:

If you're using Eclipse, the I.D.E. startup procedure includes a prompt for you to declare a workspace. Before I altered the workspace location, the workspace launcher had as its default "C:Documents and SettingsAdminworkspace". Let me explain to you why I chose not to just simply "click on through" at this point.

selectAWorkspace.jpg

I set a unique workspace by typing "C:Documents and SettingsAdminworkspacecalculator".

In doing this, I'm safeguarding myself against confusing other projects I may be working on with the current one. This can be a real time saver, potentially avoiding the headache of having projects referencing the wrong files. So then, it is recommended that you set up a unique workspace for each individual project, and avoid checking the "use this as the default and don't ask again" box.

Once the Eclipse I.D.E. launches, if the Flex perspective is not viewable, navigate to: Window-->Open Perspective-->Flex Development.

chooseflexperspectiveineclipse.jpg

Once we're in the Flex perspective, to import the calculator application we navigate to File-->Import-->General-->Existing Projects Into Workspace.

importIntoEclipse.jpg

If you're using the Flex Builder standalone, your import process is similar, with only a few subtle differences. Launching the standalone brings you straight into the Flex Builder workbench. Here, you can navigate to File-->Import-->Flex Project, or File-->Import-->Flex Project.

importInStandalone.jpg

At this point you are prompted to choose the location of the archived project file, as well as to choose a source directory for your project. I created a folder named "calculator" on my local disc "C" to be the source directory.

chooseProjectLocation.jpg

There may be an unexpected error at this point regarding the absence of a "libs" folder. Flex Builder stores archived components and other assets in what's known as an SWC file, which is kept in the libs folder. Our calculator's project has an empty libs folder, since we don't have a for any specialized components or frameworks, but Flex Builder still asks that we have it in our file directory nonetheless. Simply find your way up to the Navigator window, and under the projects root folder, right click and choose "new" and "folder". Name this folder "libs", and you should be all set.

addingLibsFolderToNavigator.jpg

By the way, the Navigator panel displays the Flex projects and their hierarchies that are within a particular workspace. The types of projects that can be listed here are: web applications, like what we're currently dealing with, AIR applications, which we'll get to in future posts, and library projects, which would contain code compiled into a SWC file that can be shared between projects.

Let's launch the calculator. Near the top of the screen you should see three green triangles.

toolBarGreenArrows.jpg

The larger one on the left is the one you want at this point. This button runs the application. When Flex Builder runs an application, it goes through what's known as a "build" process. (Flex Builder, get it?) During this process, Flex Builder saves the application and generates the required SWF file that the Flash Player needs to run it. I prefer for now to have "Build Automatically" set in my preferences under Project-->Build Automatically.

buildAutomaticallySelected.jpg

Go ahead and click on the larger of the three green arrows, and you'll see the calculator application build and launch. The application launches within a browser window. Keep in mind that although we'll be keeping the default build settings in place for now, Flex Builder gives you the freedom to customize the build process to your liking.

Once back in Flex Builder, take a look at the window named "Outline". This panel displays the visual component hierarchy in your application.

designViewWithOutlineOpen.jpg

At the top of the main window, you'll see two buttons labeled "Source" and "Design".

sourceAndDesignButtons.jpg

Using these controls you can toggle between a code editor view, and a WYSIWYG view. When you're in Design view, a new panel becomes available called "Components".

components.jpg

This panel lists all of the built in visual components available to you. You can simply click and drag these components into your application, and Flex Builder will help you align them correctly. You can click within any of the components, and you'll notice that information about that component will show up in the Properties panel.

designViewButtonSelected.jpg

The properties panel allows for the editing of a number of things, such as color, size, text, etc. Your choice of how to view the available properties is provided by three buttons labeled: "Standard View", "Category View", and "Alphabetical".
Standard View

flexProperties.jpg

Category View

propertiesCategoryView.jpg

Alphabetical View

propertiesAlphabetical.jpg

We'll cover the use of the "States" panel in future posts, but for now understand that your Flex application can have more than one view state, and those different states are outlined here.

states.jpg

Back up at the top, some of the important drop-down menus are "File", "Edit", "Project", "Run", "Window", and "Help". Although there are useful features available in the others, for now we'll concern ourselves with these few. We've already been acquainted with the File menu when we imported our project. Looking into the Edit drop-down, we find a useful feature that we can use to search for terms within our code. Find/Replace can be a handy tool, especially when your project's code gets to be more than a few lines long.

editFindReplace.jpg

The Project menu is where you tell Flex Builder to "Build Automatically", and it's also where you would create a "release build" when you'd like to publish your application online, for example.

projectMenu.jpg

The Run menu provides a number of options, much of which we'll cover in future posts. For our current purposes, we can get by with running the application by using the "Run" button on the toolbar however.

runMenu.jpg

The Window menu, like in many applications, gives choices for what panels can be displayed in the workbench.

windowMenu.jpg

And finally, the Help menu should be a frequent stop for beginning Flex developers.

helpMenu.jpg

The first time you use the "dynamic help" option, Flex Builder will compile an indexed help section which you can use to get a better understanding of the Flex environment. Using this menu is a great way to learn about Flex in a hands-on type of way.

Finally, like other Adobe products, Flex Builder allows you the freedom to re-arrange your workbench any way you'd like. If you use one panel more than another, you can put that panel in a spot that's convenient for you if it improves your workflow.

workspaceRearranged.jpg

If you're new to Flex, this should give you just enough information to get started using Flex Builder. Try experimenting by importing projects, as well as by starting new ones of your own by clicking File-->New-->Flex Project, and then going through the standard project setup wizard. Remember that if things get too messed up, you can always re-import the project and start over. Make good use of the Help menu, and have fun!


  评论这张
 
阅读(499)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017