PDA

View Full Version : HeaderToolbar Plugin in development - suggestions/comments welcom



jay@moduscreate.com
1 Jun 2009, 10:19 AM
I spent some time recently hashing out some issues and am pleased to announce that this is going alpha 1.0.

http://tdg-i.com/190/panelheadertoolbar-goes-alpha

Live examples:
http://tdg-i.com/js/examples/ext3/plugins/panelheader/
http://tdg-i.com/js/examples/ext3/plugins/panelheader/complex_layout_example.js


http://tdg-i.com/wp-content/uploads/2009/06/headertoolbar.png

demongloom
1 Jun 2009, 1:18 PM
It would be interesting plugin about integrating toolbar inline into panel header.

MD
1 Jun 2009, 7:15 PM
I would definitely use it. In fact, I'd much prefer to have the toolbars in the headers as opposed to now how they look like part of the body. This would add some nice flexibility.

MD

galdaka
1 Jun 2009, 10:43 PM
Excellent Jay!!

I hope your work!!

Greetings,

mystix
2 Jun 2009, 12:03 AM
Excellent Jay!!

I hope your work!!

Greetings,

wow, that's new.

i was half expecting another "Not work in IE6" remark from you. :>

Joe
2 Jun 2009, 4:44 AM
I like the idea.

Note: The live example does not work in IE7 (bad comma maybe).

Thanks again for yet another great idea and post Jay.

jay@moduscreate.com
3 Jun 2009, 7:05 AM
Thanks for the feedback all. I'm going to work on it more today and hopefully return with some good changes and probably beta 1.

Turns out that i have to license thise as GPL or FLOSS because it contains some Ext JS code to be modified. Just an FYI for those who want to this plugin.

tonedeaf
3 Jun 2009, 10:37 PM
How is the HeaderToolbar different from a regular ExtJS toolbar?

I think the screenshot indicates that the HeaderToolbar applies to the whole application instead of the current tab / panel. And there doesn't seem to any borders around the toolbar.

But it can be achived by inserting an extra panel above the center tabpanel / panel and hiding the borders using CSS.

Some description of the plugin features would clarify the functionality.

jay@moduscreate.com
4 Jun 2009, 3:33 AM
How is the HeaderToolbar different from a regular ExtJS toolbar?

I think the screenshot indicates that the HeaderToolbar applies to the whole application instead of the current tab / panel. And there doesn't seem to any borders around the toolbar.

But it can be achived by inserting an extra panel above the center tabpanel / panel and hiding the borders using CSS.

Some description of the plugin features would clarify the functionality.

Correct. The purpose of it is to have a Toolbar aesthetically abstracted for a Container, which is located in the header.


To most windows users, this does not make sense. But for OS X users, it does. Take a look at Firefox 3.x for OS X, you'll see a 'header toolbar' and what you know as a 'tbar'.
http://alexseifert.files.wordpress.com/2007/12/firefox-3-beta-2.png

jay@moduscreate.com
4 Jun 2009, 3:36 AM
Btw, injecting a 'panel' in a 'borderlayout' to achieve this is very wasteful due to extra DOM elements and calculations required to 'resize' the panel, for the layout.

My solution simply injects an element into the header and renders to the (slightly modified) toolbar to it.

Here is another example of a header toolbar in action.
http://osxhelp.com/wp-content/uploads/2008/01/os-x-finder-column-view.png

jay@moduscreate.com
4 Jun 2009, 3:41 AM
As an FYI,

This is one of my goals for my "OS Ext" desktop

http://tdg-i.com/img/screencasts/2009-01-19_2201.swf
http://tdg-i.com/img/extjs/osext_demo2.png

jay@moduscreate.com
4 Jun 2009, 6:13 AM
Last post ,I was just playing with Windows 7. it seems that this functionality is native to vista + windows 7.

http://www.techlivez.com/wp-content/uploads/2008/10/windows7-explorer.png

MD
4 Jun 2009, 3:38 PM
"OS Ext" -- haha, nice!

MD

syscobra
5 Jun 2009, 6:55 AM
Hi Jay

I just found when you click on the window of your example on the collapse button (the window that can freely move) you get a problem with the shadow after moving the window the problem disappear but its still there if you click again it. (it takes the shadow on the title size + the header bar size i think)

stever
5 Jun 2009, 7:01 AM
To most windows users, this does not make sense.

Only to Windows users that are using a version of Windows released in the '90s. ;)

jay@moduscreate.com
5 Jun 2009, 7:53 AM
Only to Windows users that are using a version of Windows released in the '90s. ;)

=D> touche!

I tried vista and forgot about it due to it being so gosh darn slow! I'm now using Windows 7, which i'm fond of. So yes, that comment was absolutely incorrect ;)

jay@moduscreate.com
5 Jun 2009, 8:38 AM
Hi Jay

I just found when you click on the window of your example on the collapse button (the window that can freely move) you get a problem with the shadow after moving the window the problem disappear but its still there if you click again it. (it takes the shadow on the title size + the header bar size i think)


As updated here:
http://tdg-i.com/128/a-quick-update-to-the-headertoolbar

I’m currently working on the following features:
- Animated Collapse
- Showing Raw buttons (option)
- Add “collapse header toolbar” tool (matches feature from OS X);

Known issues:
- not fully compatible with IE7 & IE8 - surprised?
- Shadow for window out of sync.
- Expand/Collapse animations are not fully functional.
Click here for a quick demonstration: http://tdg-i.com/js/examples/ext3/plugins/panelheader/

MD
5 Jun 2009, 2:53 PM
Jay,

I noticed that in the Windowed one, the click-n-hold-to-drag of the header area doesn't exclude the toolbar items. You can click and hold on a button, on the combo's text field, combo's button, anything. Would you consider adding a config option to allow exclusion of the toolbar as a drag area? I assume that would be a matter of testing if the click event occurred within the toolbar's container.

MD

syscobra
5 Jun 2009, 7:13 PM
hi Jay,

how about having a non-toolbar component in the header?, for example, if i want to make a full component in the top, something like a tabPanel with a lot of other group buttons or toolbars in it. Not only a toolbar. Or i can add in the toolbar for example a Panel with information? or a tabPanel inside the toolbar? is that possible?

I can imagine making something like this:
http://lh6.google.com/davidtse916/R1h5HC2t1dI/AAAAAAAACdo/B-acJPVlXFw/s800/1.jpg

Of course without the big circle button and the small toolbar in top, just that i can see the Desktop example application with a big tabPanel options and group-buttons inside a Main Window, not as the current one that has the start-menu like links for options of an application.

I don't know if you understand me very well but imagine making a normal application, with a mainmenu and the toolbars in the bottom of it. Just a suggestion. ~o)

jay@moduscreate.com
5 Jun 2009, 7:51 PM
I understand what you're saying. I think it would not be hard to make it configurable for that.

MD
6 Jun 2009, 7:14 PM
That was in response to me or Syscobra?

MD

jay@moduscreate.com
7 Jun 2009, 2:20 AM
Jay,

I noticed that in the Windowed one, the click-n-hold-to-drag of the header area doesn't exclude the toolbar items. You can click and hold on a button, on the combo's text field, combo's button, anything. Would you consider adding a config option to allow exclusion of the toolbar as a drag area? I assume that would be a matter of testing if the click event occurred within the toolbar's container.

MD

Hi MD,

Yes - this indeed a bug. My first guess has to do with the fact that they are using event capture instead of bubble for the header. I need to look into this more. Thanks for bringing this to my attention.

jay@moduscreate.com
13 Sep 2009, 5:13 PM
Just a quick update, i've edited the first post. It's now alpha 1.0: http://tdg-i.com/190/panelheadertoolbar-goes-alpha