PDA

View Full Version : Screenshots - Toolbar and Menus



jack.slocum
22 Jan 2007, 12:03 PM
Newly revised Toolbar with MenuButton (aero theme):

http://www.jackslocum.com/blog/images/screenshots/tb-menu.gif

New menus (only 1 theme so far):

http://www.jackslocum.com/blog/images/screenshots/menu-check.gif

The menus include full keyboard support and work like desktop menus (no auto hide, they are click to hide).

The menus weigh in at 10kb which is much less than YUI 46kb + 40kb (container core). They may be missing a few features (like the menubar component) in this version, but it does support something extra I think will prove to be useful. Along with the built-in MenuItem types, items can be any HTML element and can be rendered from a template. This will allow Office 2007 style menus. I will come up with some example of this functionality before the official release.

Stephan
22 Jan 2007, 3:19 PM
Wow, that looks absolutely incredible !

Do plan to include this menu component in the 0.40 release ?
If so, 0.40 will be a huge step with tons of great killer features. :)

jack.slocum
22 Jan 2007, 4:03 PM
Yep. I updated the screenshot to include the color picker menu item as well. I think it is a good example of a custom menu item that was easy to make. :)

ilazarte
22 Jan 2007, 6:30 PM
Jack that looks incredible.

Condor70
22 Jan 2007, 10:59 PM
The menu looks great! I can't wait to use it in my application...

I have just a small comment about the second screenshot:

Shouldn't the Support menu item be highlighted if menu is dropped down ?

Luc
22 Jan 2007, 11:30 PM
That looks great!

Can they also be used as contextmenu?

brian.moeskau
22 Jan 2007, 11:32 PM
Shouldn't the Support menu item be highlighted if menu is dropped down ?

I assume that you just glanced at it quickly and didn't notice that "Help Forums" is the highlighted parent menu :)

Condor70
22 Jan 2007, 11:53 PM
@bmoeskau:

The screenshot shows a 3 level menu: Support > Help Forums > Radio Caption 4.

IMHO all 3 selected menu items should be highlighted.

Animal
23 Jan 2007, 12:40 AM
'kin' 'ell! I can't wait to get my hands on that! The YUI menu-min.js is 55K, and it's an unwieldy system extending the heavyweight container class, Overlay which requires container-min.js at 66K.

Will it be possible to build the menu from markup and have the constructor/initialization massage the DOM into shape, or will it be from Jacascript only?

concept
23 Jan 2007, 1:07 AM
Looks great

Are you going to support Rich menu tab (like ribbon UI in Office 2007)
http://www.raizlabs.com/blog/2006/09/firefox-ribbon-ui-and-screen-space.html

Or more traditional menu tab
http://www.html.it/articoli/niftycube/nifty4.html#
http://dhtml-menu.com/dhtml-tab-menu/tab-menu-xp.html
http://www.dhtmlgoodies.com/scripts/dhtmlgoodies-tabmenu/dhtmlgoodies-tabmenu-images.html
http://www.cssplay.co.uk/menus/sliding_doors.html

Works great on small screens (smartphones)

brian.moeskau
23 Jan 2007, 3:09 AM
@Condor:

Sorry, you said "Support menu" which I interpreted as "Commercial Support menu." I didn't notice the top-most parent, but I agree now that I look at it that it should probably be highlighted too.

jack.slocum
23 Jan 2007, 6:01 AM
> The screenshot shows a 3 level menu: Support > Help Forums > Radio Caption 4.

Actually that top level is not a menu. There is no menubar component (as stated in the orginal post). What is in the screenshot is a 2 level menu triggered by a MenuButton on a Toolbar. Since the MenuButton was created before there was a Menu currently it just has a handler for when the arrow part is clicked (and in that handler I am showing the menu). It actually make sense to make it "Menu Aware" since there is actually built-in Menu support now.

@Luc - Yes. In fact, as I get time, many of the components in Ext are going to get some default context menus (like the grid headers).

@concept - The ribbon bar is hideous and there is no plan to create one. As for tabs, there's already a TabPanel component.

@Animal - Menus from existing markup will be supported. In fact some other components as well are getting a new static function "fromMarkup" or "readMarkup" to generate them from markup. e.g.

var menu = Ext.menu.Menu.fromMarkup('my-menu');

Animal
23 Jan 2007, 6:22 AM
Cool. It will be easier to generate nested markup in Java on the server, and go from there.

Will the menu items all have to have <A> elements like the YUI ones? Will it be easy to specify an onclick from markup, or will a known menu item have to be retrieved, and an onclick handler programatically added?

Come of our menu items are links, some call javascript functions. (Although even for links, I hook the onclick anyway, stop propagation, and load the href into a ContentPanel)

jon.whitcraft
23 Jan 2007, 6:59 AM
Jack has anyone ever told you that you are the man?? becuase if they they should.

jack.slocum
23 Jan 2007, 7:06 AM
The screenshot was updated - the Ext.Toolbar.MenuButton is now aware of it's menu (it can take a 'menu' config option) and stays highlighted while the menu is visible.

brian.moeskau
23 Jan 2007, 7:08 AM
Man, that took you an entire hour to fix? You're slacking on us :)

jack.slocum
23 Jan 2007, 7:10 AM
@Animal - Yeah the default version will require A elements. To attach custom onclick handlers, you will have to look the item up and add it manually. However, since the markup reading is not actually part of the component, you will be free to edit it and make it parse whatever structure (or inline onclick handlers) you want.

jack.slocum
23 Jan 2007, 7:15 AM
Brian, I am getting slow and senile in my old age.... ;)

Animal
23 Jan 2007, 8:21 AM
@Animal - Yeah the default version will require A elements. To attach custom onclick handlers, you will have to look the item up and add it manually. However, since the markup reading is not actually part of the component, you will be free to edit it and make it parse whatever structure (or inline onclick handlers) you want.

OK, as long as they can be looked up... I had to extend YUI's Menu system to add that capability so that menu items created from markup could be looked up and be postconfigured: have handlers added!

jack.slocum
23 Jan 2007, 8:31 AM
All menu register themselves with the MenuMgr. The menu items are a MixedCollection and can be accessed by id or index. So...

var menu = Ext.menu.MenuMgr.get('menu-id');
menu.items.get('item-id').on('click', ... );

Icons are a little different than YUI as well. They can either be done with a CSS class:



// menu item config
{text: 'Forum Menu Item', cls: 'forums'....

// css
.forums .ext-menu-item-icon {
background-image: url(/deploy/yui-ext.0.40-alpha/docs/resources/forum.gif);
}

or in the config directly (easier, but css is preferred):


// menu item config
{text: 'Forum Menu Item', icon: '/deploy/yui-ext.0.40-alpha/docs/resources/forum.gif' ....

leathekd
23 Jan 2007, 11:33 AM
Awesome! Having suffered thru setup and usage of YUI menus this will be a welcome alternative.

The problem I was trying to solve involved dynamic context menus- that is, when you right-click on a table row an ajax request is made to retrieve the appropriate menu items and submenu items from the server. The problem I ran into with YUI menu is that it is very heavy and difficult to optimize for this purpose. It worked well for static menus, but these dynamic menus were a nightmare.

Have you considered this case?

Preston
23 Jan 2007, 3:49 PM
Wow! This looks absolutely fabulous!!!

I canĀ“t wait to get my hands on this fine code... Is there an ALPHA version floating around somewhere?

stever
24 Jan 2007, 12:02 PM
The subtly of the Ribbon Bar is that it always takes up a fixed amount of a page, and that it shows items in various ways based on the developers sense of priority. I'll see if I can't get a budget to help tilt you towards the idea... :D

Really awesome stuff! I can't wait to junk all our other scripts and just use one kit!

Wolfgang
24 Jan 2007, 1:06 PM
Really impressive work!

Best Regards

Wolfgang

whouseit
27 Jan 2007, 7:39 AM
Newly revised Toolbar with MenuButton (aero theme):

http://www.jackslocum.com/blog/images/screenshots/tb-menu.gif

New menus (only 1 theme so far):

http://www.jackslocum.com/blog/images/screenshots/menu-check.gif

The menus include full keyboard support and work like desktop menus (no auto hide, they are click to hide).

The menus weigh in at 10kb which is much less than YUI 46kb + 40kb (container core). They may be missing a few features (like the menubar component) in this version, but it does support something extra I think will prove to be useful. Along with the built-in MenuItem types, items can be any HTML element and can be rendered from a template. This will allow Office 2007 style menus. I will come up with some example of this functionality before the official release.

hi, jack
I'm so glad you will add cool menubar to your yui-ext lib. When will the new version be published?
I hope that you will keep yui-ext small, smart and cool. If the js libs are beyond # MB, that seems
to too large such as bindows, etc. :)

zsx

dn2965
22 Feb 2007, 5:25 AM
i guess http://www.cssplay.co.uk is your web

if i want use the example like this http://www.cssplay.co.uk/menus/magnifier.html[url]

what should i do ,i am not commercial worker



thanks