« 2008 achievements | Main | Importing REST web services in ActionScript with Flex Builder 4 »

How to use the Flex Dashboard Panel library

I've created a project to explain how to use the "Flex Dashboard Panel library", here the link of the live application complete of source code.

The principal component of the library are:

1) DashPanelContainer
A canvas Container where we place all the DashPanel window.

2) DashPanel
The window container where you can put all your content.

3) DashLayoutManager
A static multiton manager to control the dashboard.

4) DashPanelEvents
Control your panel programmaticaly using events.


DashPanelContainer properties:
1) dashed:
All DashPanels inside will be tiled to fit on the container and panels can be only switched with each others and not resized.

2) snapped, snapSize:
All DashPanels can be moved and resized constraint to the guide drawed on the background and the snap size can be changed trough the snapSize propeties

3) Nothing:
All DashPanel can be moved and resized without constraint.

DashPanel properties:
1) closable, minimizable, maximizable, draggable, resizable
Control what the panel can do

2) titleBarHeight="20" default 35
Set the height of the title bar if your skin need this.

3) icon, iconXOffset, iconYOffset
Set an icon property an control the position with the offset

4) title, titleColor, titleXOffet, showTitleText
Set the panel title and decide if you want to show or not and where with the offset

5) status
Return the current status of the panel. This status is defined trough constants property of the DashPanel

DashLayoutManager methods:
1) getManager(container.id)
Retrieve the pointer of the manager by passing the container id instance

2) getManager(container.id).tile();
All DashPanel elements will be tiled to fit the space.

3) getManager(container.id).cascade();
All DashPanel elements will be cascaded.

4) getManager(container.id).bringToFront( dashpanel )
Set in fron the element if this is inside the container.

5) getManager(container.id).getOpenedPanelList()
Return the list of current opened panels.

DashPanelEvents:
Using the events you can listen what happen at your panel, but also you can dispatch an event to force panel do something.

1) MAXIMIZE, MINIMIZE, RESTORE, CLOSE
Listen or dispatch this events to control your panel

2) PANEL_MOVING, PANEL_RESIZING
This events can be only listened and inform when panel is currently moving or resizing

3) STARTLOAD, STOPLOAD
Dispatching this events you will freeze the panel and a progress bar will be shown

That's all! Now you can create a fully dashboard application.
Flex Dashboard Panel library Example

TrackBack

TrackBack URL for this entry:
http://blog.comtaste.com/mt-tb.cgi/75

Comments (31)

Very nice indeed. What is the reliance on Flash 10 and do you see that being an obstacle to use in the short term

hsTed:

nice, but am i missing something? xmlns:components="com.comtaste.dashboard.components.*" doesn't seem to be included in the source files so doesn't compile for me.

Thanks!

Thank you,
@ Terry: the Dashboard library is compatible with the version 9 of the Flash Player, it does not rely on specific version 10 features.
@ ted: to use the com.comtaste.dashboard.components package, you need to download the Dashboard.swc you find in the libs folder when you View Source and add it to your libraries in the flex builder.

hsTed:

that has already been accomplished and is referenced correctly for flex builder. Getting about 12 of these error messages:

Cannot resolve attribute 'titleBarHeight' for component type com.comtaste.dashboard.components.DashPanel. DashboardExample/src DashboardExample.mxml line 33 1230926008101 24456

Try to download the complete zip package from here, and import into you flex builder as flex progect.

starCh:

@Liviu I've got the same error messages too.

@hsTed Try removing all 'titleBarHeight' and the application runs.

starCh:

@Liviu I've got the same error messages too.

@hsTed Try removing all 'titleBarHeight' and the application runs.

Persephone:

I got the same error : "Cannot resolve attribute titleBarHeight' for component type com.comtaste.dashboard.components.DashPanel."

And I downloaded the source from the zip package. Anyone having an idea?

Patricio:

Hi :
I'm traying this aplication, and this works really great.
And i want to know, if I you can share the FlexSkin_FOB.fla
Thanks in advanced

All I can say is Thank you! This is rad

Ed:

Good Job! Anyone get the events stuff to work? I am trying to get a dashpanel to minimize by sending it an alert but doesn't seem to work. If you have it working could you please post a snippet?
Thanks again for this super cool dashboard!

Christopher B:

This requires an internet connection doesn't it?

I get the same error as the others do after placing the swc file in the proper path.

We develop on standalone in case we only want application/desktop based,not needing web/internet reliance.

So, this may not work for our needs. thx!

David Coleson:

Receiving error
unable to open \Dashboard\bin\Dashboard.swc. Dashboard.swc is in the libs folder, where do I need to change the pathname?

GregM:

Very nice and so far works better than the original MDI for what I want to do. Trying to throw MINIMIZE event, to minimize a few of the panels in my init() function. Have tried a few ways to dispatch panel.minimize(); with no prevail. Please advise...

maoanz:

I also have the problem of "Cannot resolve attribute titleBarHeight".

Another question: is it possible to manage the position of each box and save them for example in the ShareObject.

Thanks for replying

A new version of the library is online. The example project is updated with the last features and bug fixed. View here. You can download the latest swc from here

GregM:

You did update but didn't put the swc in a place we can find it for download. Is there anyway we can get the non compiled component?

Fabio Almeida:

I can't download file Dashboard.swc. What's happening?

Guna:

can i have the source for the .swc file

Fabio Almeida:

How can I hide start button in DashPanelContainer?

maoanz:

Hi, it seems that the "save workspace" and "load workspace" in the start button in very useful. But how can we save the state in a sharedObject so that it can reload the previous state after starting up? And I also have the same question as Fabio, "how to hide the button".
Thanks

GregM:

The new SWC does fix the panelHeight problem but adds the new "start" button Fabio is asking about removing. I think I will go back to the broken SWC to remove the "Start" button, deal with the height issue, and still ask for the fix to NOT being able to call the MINIMIZE function for a panel.

GregM:

Does anyone ever reply to the requests? it is a very cool component but may have to stop using it as MINIMIZE, MAXIMIZE, and ability to remove the "start" button makes it unusable for me.
I hope to hear from someone on this.
Thanks

Potesy:

Hello.

Very good job.
Can we have the source of dashboard.swc ?
I 'd like to customize more.

Regards

McKANE:

Hi

Very good job!!
Like it is said bellow it will be interesting to know how to hide the start button.

Without hidding the button it will be unusable for me.

Best regards

how to customize the start button?

Nazz:

Very good example
Great Job

Even I would like to know how to hide start button?

Enrico:

Hi,
good job.
I'd like to know how to hide the Start button on the dashboard, or even to change the labels languages.

Best regards.

Shriram:

HI

Can you please suggest on how to hide the start button in the DashPanelContainer

miguel:

did anyone ever figuered out how to get rid of the start button?

Naveen:

Initializer for 'dock': values of type com.comtaste.dashboard.components.DashDock cannot be represented in text.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

About

This page contains a single entry from the blog posted on December 30, 2008 4:14 PM.

The previous post in this blog was 2008 achievements.

The next post in this blog is Importing REST web services in ActionScript with Flex Builder 4.

Many more can be found on the main index page or by looking through the archives.

Powered by
Movable Type 3.33