PDA

View Full Version : Diagramatical overview



techno_adi
4 Oct 2006, 11:43 PM
Hi,

Can you provide a diagramatical schema of the YUI framework/ YUI-ext framework (like we usually have in VS 2005). This would help us get an overview of the connection between various classes and interaction between them.

The diagram for the container.js in the yui page is very basic but atleast good for a start.

This is necessary when one needs to build upon the existing controls to have a customized one (like say for the tab control, i need it to be scrollable?). Unless one has a basic idea of the underlying stucture, he/she cannot build upon it!

So, it my suggestion as to include a diagramatic schema also with the documentation ( both in YUI and YUI-ext).

BTW is there a tool which could reverse-engeenier the js files, guess that would make our job easier.. :)

jack.slocum
5 Oct 2006, 12:04 AM
The tools for JS are rather limited but I will look into it further.

To make a TabPanel scrollable you can set a height + overflow:atuo on the body. In one of the examples I've done that.

techno_adi
5 Oct 2006, 12:47 AM
The tools for JS are rather limited but I will look into it further.

To make a TabPanel scrollable you can set a height + overflow:atuo on the body. In one of the examples I've done that.

You got me wrong. I do not want the Tab Panels content to be scrollable.
The problem here is, i want to add as many tabs as user wants to the control, but assume that width of tab panel is some fixed pixel(say 500px).
Now a time comes when the width for the tabset goes beyond my body width and here comes the problem to make it scrollable. here the scrolling is done for the tabs itself rather than content ( hope u getting my point).
Try it out - just try this and u might understand the problem


#jtabs {width:450px;}

javascript
var jtabs = new YAHOO.ext.TabPanel('jtabs');
jtabs.addTab('jtabs-1', "Settings");
jtabs.addTab('jtabs-2', "Staffing");
jtabs.addTab('jtabs-3', "Financials - I am very big to fit into the tab width");

here tabset scrolling would have a better effect

jack.slocum
5 Oct 2006, 4:01 AM
I see what you mean. If you get that implemented please send me the code. I'd like to see it and possibly integrate it?

Jack

alexb
5 Oct 2006, 4:39 AM
I'd be interested as well :)

alexb
8 Oct 2006, 9:01 PM
Hi Jack,

This is my first try to solve it:


YAHOO.ext.TabPanelEx = function(container, width, scrollBy){
YAHOO.ext.TabPanelEx.superclass.constructor.call(
this,
container
);
this.width = width;
this.scrollBy = scrollBy || 100;
this.addScroller();
}

YAHOO.extendX(YAHOO.ext.TabPanelEx, YAHOO.ext.TabPanel, {
addScroller : function(){
var w = 25;
var stripBox = this.stripWrap.getBox();
var elBox = this.el.getBox();

stripBox.width = elBox.width - w;
this.stripWrap.setWidth(stripBox.width);
this.stripWrap.setStyle('position', 'relative');
//how to calc it automatically???
this.stripEl.setWidth(this.width || elBox.width);

this.stripWrap.clip();

//--------------------------------
var scroller = document.createElement('div');
YAHOO.util.Dom.setStyle(scroller, 'width', w);

var scrL = document.createElement('span');
scrL.innerHTML = '«';
var scrR = document.createElement('span');
scrR.innerHTML = '»';

YAHOO.util.Dom.setStyle([scrL, scrR], 'font-size', '150%');

var animL = new YAHOO.util.Scroll(this.stripWrap.dom, { scroll: { by: [-this.scrollBy, 0] } });
YAHOO.util.Event.on(scrL, 'click', animL.animate, animL, true);
var animR = new YAHOO.util.Scroll(this.stripWrap.dom, { scroll: { by: [this.scrollBy, 0] } });
YAHOO.util.Event.on(scrR, 'click', animR.animate, animR, true);

scroller.appendChild(scrL);
scroller.appendChild(scrR);

this.stripWrap.dom.parentNode.appendChild(scroller);
var id = YAHOO.util.Dom.generateId(scroller, 'scroller');
var scEl = getEl(id);
scEl.setStyle('position', 'absolute');
scEl.setStyle('left', (stripBox.x + stripBox.width - 2) + 'px' );
scEl.setStyle('top', (stripBox.y - 5) + 'px');
}
});


Have a look

Alex

jack.slocum
8 Oct 2006, 9:26 PM
Alex, I dropped it into my tabs example page locally and changed the width to 200 pixels to trigger scrolling.

http://www.jackslocum.com/blog/images/tabs-scroll.gif

Did I miss something? Is there a CSS change I need to disable the wrapping?

BTW, your code and very nice and well organized. I like it.

alexb
8 Oct 2006, 9:48 PM
Use it like this:


var jtabs = new YAHOO.ext.TabPanelEx('jtabs', 1000/*tab strip width, not tab body*/);


I couldn't solve the problem of calculating the width and left this comment in the code
//how to calc it automatically???
:)

jack.slocum
9 Oct 2006, 2:16 AM
tabstrip.scrollWidth

If the scrollWidth <= the offsetWidth, the scrollers should probably be hidden.

alexb
9 Oct 2006, 2:27 AM
tabstrip width on the screen (offsetWidth) is equal to its container width.

The tabstrip width that I need is the width of the tabstrip UL in ONE row which is different from the width above. I thought about cloning the list and putting it in another div and getting it's offsetWidth.

Or there may be other alternatives.

jack.slocum
9 Oct 2006, 3:11 AM
oh, are you creating multiple rows of tabs? My thought was make the tabstrip container clip overflow, then measure it's scrollWidth to see how much room you have to scroll. if there's no overflow, then no scrolling is needed. But with the floated tab items, get a true scrollWidth could be a problem since they are likely to wrap.

If Yahoo's new tab control is too heavyweight (coming out soon) I will probably revist the yui-ext tab control and add in a bunch of new features, including positioning the tabs instead of floating.

By the way, can you go to a blog post on the main site and check out the new comments system. let me know if it works for you?

alexb
10 Oct 2006, 1:00 AM
By the way, can you go to a blog post on the main site and check out the new comments system. let me know if it works for you?

It was time to go home :) You must know it by now :)



oh, are you creating multiple rows of tabs?

No



But with the floated tab items, get a true scrollWidth could be a problem since they are likely to wrap.

That's exactly the case

You know sometimes this behavior (floating tab items) is preferable, but there is a slight issue. If you look at the image you posted earlier, there is space beneath the 1st item that disappears after you click any item. If you have time or decide to extend this widget, could you fix it?

Alex

jack.slocum
10 Oct 2006, 1:10 AM
That problem should be corrected.



The "extra tab appearing mysteriously on render and disappearing when you clicked or resized window) issue that you were having, i finally duplicated it when creating the comments system on my blog. The problem was actually in Element. When you call setVisible (or show/hide) on an element, it first checked whether it was already shown/hidden, then if it was a change it updated it. The problem stemmed from trying to set an elements visibility property while it was in a parent with display none, it would itself have a display of none and therefore the visibility setting would get ignored. That check was removed and if you call setVisible,show or hide, it just sets the property regardless of the current state. That fixed the ghost tabs issue.

the fix will be in the next release.