.png)
Hi
Can anyone help me with a bit of ScriptUI. I am building a dialog box that contains a tabbed panel containing a single tab. I am filling this window with rows of editText boxes. Is it possible to make the tabed panel scrollable? There will be times when the screen is not deep enough, and need to be able to scroll up and down.
Cheers
Roy
1 Correct answer
Hi Roy,
Ignoring the Tabbed bit, the basic way of making a scrollable panel is like this.
With a bit of thought you should be able to adjust it to your needs.
Regards
Trevor
P.s. Maybe you can change the name of the post to a bit of a more informative one 
...// By Trevor http://forums.adobe.com/thread/1229123?tstart=0
var w = new Window ("dialog","My Scrollable Panel",[100,100,400,400]),
p1= w.add('panel',[0,50,300,250]),
p2= p1.add('panel',[0,0,280,800]),
s = p1.add('scrollbar', [280,0
20
Replies
Hi Roy,
Ignoring the Tabbed bit, the basic way of making a scrollable panel is like this.
With a bit of thought you should be able to adjust it to your needs.
Regards
Trevor
P.s. Maybe you can change the name of the post to a bit of a more informative one 
// By Trevor http://forums.adobe.com/thread/1229123?tstart=0
var w = new Window ("dialog","My Scrollable Panel",[100,100,400,400]),
p1= w.add('panel',[0,50,300,250]),
p2= p1.add('panel',[0,0,280,800]),
s = p1.add('scrollbar', [280,0,300,170]);
for (var n = 0; n < 20; n++) p2.add('edittext',[0,n*30,280,20+n*30], "Hi Roy #"+n );
s.onChanging = function () {p2.location.y = s.value*(p1.bounds[3]-p1.bounds[1])/100 - s.value*(p2.bounds[3]-p2.bounds[1])/100};
w.show();
Hi Peter
Glad that I got your attention
For aesthetics this is really quite nice.
Not to be scared of the arithmetic, it's the computer who has to make the calculations.
I have been working a lot on an advanced SUI and look forward to showing it of to you soon.
I have both your SUI and your Grep guides open on my computer practically from one restart to the next.
Regards
Trevor
P.s. Now that I have written this, some bright spark can figure our how to make a horizontally scrolling panel 
// By Trevor http://forums.adobe.com/thread/1229123?tstart=0
var w = new Window ("dialog","My Scrollable Panel",[100,100,430,400]),
padding = 5,
innerPanelHeight = 800,
outerPanelHeight = 200;
if ($.os.match(/Windows/i))
{
var scrollbar = w.add('scrollbar', [275, 50 + padding , 296, 50+ outerPanelHeight -padding]),
outerPanel = w.add('panel',[10, 50, 300, 50 + outerPanelHeight]);
}
else // Mac
{
var outerPanel = w.add('panel',[10, 50, 300 , 50 + outerPanelHeight]),
scrollbar = w.add('scrollbar', [275, 50 + padding , 296, 50 + outerPanelHeight -padding]);
}
var innerPanel = outerPanel.add('panel',[0, 0, 350, innerPanelHeight]);
scrollbar.jumpdelta = 100 * outerPanelHeight / innerPanelHeight; // Make size of bar whatdoyoucallit (drag thing) propotional to the size of the windows
scrollbar.visible = (scrollbar.jumpdelta < 100) ? 1 : 0;
for (var n = 0; n < 20; n++) innerPanel.add('edittext',[50,15+n*30,200,35+n*30], "Hi Peter #"+n );
innerPanel.location.x -= padding;
innerPanel.location.y -= padding;
scrollbar.onChanging = function () {innerPanel.location.y = scrollbar.value*(outerPanel.bounds[3]-outerPanel.bounds[1])/100 - scrollbar.value*(innerPanel.bounds[3]-innerPanel.bounds[1])/100 - padding *(1-scrollbar.value/100) };
w.show();
Hi Trevor,
Peter's guides are opened on many desktops, I am sure
You inspired me for practice. Do you mean "horizontal scrollbar" alike this:
// based on Trevor's code and Peter's guide
var w = new Window ("dialog","Trevor's Scrollable Panel",[100,100,430,400]),
padding = 5,
innerPanelWidth = 800,
outerPanelWidth = 300,
outerPanelHeight = 280,
outerPanel = w.add('panel',[10, 50, outerPanelWidth, outerPanelHeight]),
scrollbar = outerPanel.add('scrollbar', [0, 0, 285, 20]),
innerPanel = outerPanel.add('panel',[0, 0, innerPanelWidth, outerPanelHeight]);
scrollbar.visible = true; //(scrollbar.jumpdelta < 100) ? 1 : 0;
for (var n = 1; n < 7; n++) {
innerPanel.add('edittext',[50,10+n*30,255,35+n*30], "Hi Trevor #"+ n );
innerPanel.add('edittext',[305,10+n*30,505,35+n*30], "Hi Trevor #"+ Number(n + 6) );
innerPanel.add('edittext',[555,10+n*30,755,35+n*30], "Hi Trevor #"+ Number(n +12) );
}
scrollbar.onChanging = function () {
innerPanel.location.x =
scrollbar.value*(outerPanel.bounds[2]-outerPanel.bounds[0])/100 -
scrollbar.value*(innerPanel.bounds[2]-innerPanel.bounds[0])/100 -
padding *(1-scrollbar.value/100) };
w.show();
Hi all,
I made an easy to use scrollable panel function.
There is one significant change from the methodology used above. That is the use of maximumSize, without using this the size of the inner panel is limited to the size of the screen.
Enjoy,
Trevor
// By Trevor http://forums.adobe.com/thread/1229123?tstart=0
function addScrollablePanel (toTheParent,
locationX,
locationY,
outerPanelWidth,
outerPanelHeight,
innerPanelWidth /* leave blank if not scrolling horizontally*/,
innerPanelHeight /* leave blank if not scrolling vertically*/,
barThickness /* optional */)
{
var padding = 2, innerPanel, outerPanel, scrollbarH, scrollbarV;
innerPanelWidth || innerPanelWidth = outerPanelWidth; // if the optinal variables are not defined then define them
innerPanelHeight || innerPanelHeight = outerPanelHeight;
barThickness || barThickness = 15;
innerPanelWidth += padding;
innerPanelHeight += padding;
scrollbarH = (innerPanelWidth != outerPanelWidth + padding);
scrollbarV = (innerPanelHeight != outerPanelHeight + padding);
if ($.os.match(/Windows/i))
{
scrollbarV && scrollbarV = toTheParent.add('scrollbar', [locationX + outerPanelWidth - barThickness - padding, locationY + padding , locationX + outerPanelWidth - padding, locationY + outerPanelHeight - padding - (scrollbarH && barThickness)]);
scrollbarH && scrollbarH = toTheParent.add('scrollbar', [locationX + padding, locationY + outerPanelHeight - padding -barThickness, locationX + outerPanelWidth - padding - (scrollbarV && barThickness), locationY + outerPanelHeight - padding]);
scrollbarH && scrollbarV && toTheParent.add('statictext', [locationX + outerPanelWidth - barThickness - padding , locationY + outerPanelHeight - barThickness - padding, locationX + outerPanelWidth - padding, locationY + outerPanelHeight - padding]); // fill the gap between the scrollbarbuttons
outerPanel = toTheParent.add('panel',[locationX, locationY, locationX + outerPanelWidth, locationY + outerPanelHeight]);
}
else // Mac
{
outerPanel = toTheParent.add('panel',[locationX, locationY, locationX + outerPanelWidth, locationY + outerPanelHeight]);
scrollbarV && scrollbarV = toTheParent.add('scrollbar', [locationX + outerPanelWidth - barThickness - padding, locationY + padding , locationX + outerPanelWidth - padding, locationY + outerPanelHeight - padding - (scrollbarH && barThickness)]);
scrollbarH && scrollbarH = toTheParent.add('scrollbar', [locationX + padding, locationY + outerPanelHeight - padding , locationX + outerPanelWidth - padding - (scrollbarV && barThickness), locationY + outerPanelHeight - padding - barThickness]);
scrollbarH && scrollbarV && toTheParent.add('statictext', [locationX + outerPanelWidth - barThickness - padding , locationY + outerPanelHeight - barThickness - padding, locationX + outerPanelWidth - padding, locationY + outerPanelHeight - padding]);
}
innerPanel = outerPanel.add('panel'); // set the bounds after setting the maximumSize
innerPanel.maximumSize = [innerPanelWidth * 2, innerPanelHeight * 2]; // This needs to be set to at lest the required size otherwise the panel size is limmited to the screen size
innerPanel.bounds = [0, 0, innerPanelWidth, innerPanelHeight]; // now we can set the size 🙂
scrollbarV && scrollbarV.jumpdelta = 100 * outerPanelHeight / innerPanelHeight; // Make size of bar whatdoyoucallit (drag thing) propotional to the size of the windows
scrollbarH && scrollbarH.jumpdelta = 100 * outerPanelWidth / innerPanelWidth; // Make size of bar whatdoyoucallit (drag thing) propotional to the size of the windows
scrollbarV && scrollbarV.onChanging = function () {innerPanel.location.y = scrollbarV.value*(outerPanelHeight)/100 - scrollbarV.value*(innerPanelHeight)/100 - padding *(1-scrollbarV.value/100) };
scrollbarH && scrollbarH.onChanging = function () {innerPanel.location.x = scrollbarH.value*(outerPanelWidth)/100 - scrollbarH.value*(innerPanelWidth)/100 - padding *(1-scrollbarH.value/100) };
innerPanel.location.x -= padding;
innerPanel.location.y -= padding;
return innerPanel;
}
function hiJareck (toTheParent, accross, down, n, nn)
{
accross || accross = 1;
down || down = 1;
/* if (!accross >1) accross = 1;
if (!down >1) down = 1;*/
for (n = 0; n < down; n++) for (nn = 0; nn < accross; nn++) toTheParent.add('edittext',[20+nn * 140,15+n*30, 130 + nn * 140 ,35+n*30], "Hi Jareck #"+ (n+1) + " #" + (nn+1) );
}
/* ****************** USAGE ********************* */
var w = new Window ("dialog","My Horizontally Scrollable Panel",[100, 100, 900 , 600]);
horizontalScrollablePanel = addScrollablePanel (w, 20, 20, 250, 70, 3700, false, 20);
horizontalScrollablePanel2 = addScrollablePanel (w, 20, 100, 250, 70, 1000, false, 20);
verticalScrollablePanel = addScrollablePanel (w, 300, 20, 200, 150, false, 1000, 20);
verticalScrollablePanel2 = addScrollablePanel (w, 510, 20, 200, 150, false, 1000, 40);
vertAndHorzScrollablePanel = addScrollablePanel (w, 250, 190, 310, 210, 3520, 820);
hiJareck(horizontalScrollablePanel, 26, 1);
hiJareck(horizontalScrollablePanel2, 7, 1);
hiJareck(verticalScrollablePanel, 1, 30);
hiJareck(verticalScrollablePanel2, 1, 30);
hiJareck(vertAndHorzScrollablePanel, 25, 25);
w.show();
Probably the wisest move is to keep things as simple as possible even if it looks pretty bad.
I can't agree more
Hi Guys,
I could finally get it to work meaning having a rich list while getting rid of the limitation that will make ScriptUI stop drawing items at some point:
var main = function() {
UI().show();
}
var data = [];
var i = 0, n = 200;
while ( i<n ) {
data.push({text:i+1});
i++;
}
var UI = function() {
var w = new Window('dialog' ),
list;
w.preferredSize = [200,250];
w.alignChildren = ["fill","fill"]
list = new List();
w.onShow = function() {
list.add(w, 200);
list.fill ( listItemRenderer, data );
w.layout.layout(true)
}
return w;
}
var listItemRenderer = function (parent, data ) {
var g = parent.add('group'),
t = g.add('edittext', undefined, data.text ),
b = g.add('button',undefined,"?" );
g.alignment = ["fill","top"];
t.preferredSize.width = 100;
b.maximumSize.width = 25;
t.alignment = ["fill","top"];
b.onClick = function() {
alert( t.text );
};
g.update = function( data ) {
t.text = data.text;
}
return g;
}
var List = function() {
var max = 12, pnl, lstGp, sb, ls = this, sbValue = 0, itemHeight, index = 0, mul = 1,
index = 0;
this.listItems = [];
this.data;
this.add = function(parent, maxSize) {
pnl = parent.add('panel');
pnl.alignment = ["fill","fill"];
pnl.orientation = 'row';
pnl.maximumSize.height = maxSize;
lstGp =pnl.add ('group');
lstGp.orientation = 'column';
sb = pnl.add ('scrollbar');
lstGp.spacing = 0;
lstGp.margins = 0;
lstGp.alignment = ["fill","fill"];
sb.alignment = ["fill","fill"];
sb.maximumSize.width = 25;
sb.onChange = function() {
itemHeight = ls.listItems[0].size.height;
var sbHeight = sb.size.height, i = 0;
sb.maxvalue=itemHeight*ls.data.length - sb.size.height ;
var n = ls.listItems.length, movedBefore = [], movedAfter = [], notMoved = [];
var delta = sbValue - sb.value;
sbValue = sb.value;
var itemsCount = index+Math.floor(sb.size.height/(itemHeight+lstGp.spacing))+1 ;
while ( i<n ) {
if (delta<0 && ls.listItems [ i ].location[1] + delta + itemHeight +2*lstGp.spacing < 0 ) {
ls.listItems [ i ].location[1] = ls.listItems [ i ].location[1] + delta+ max*itemHeight;
ls.listItems [ i ].index = ls.listItems [ i ].index || i;
ls.listItems [ i ].index+=max;
ls.listItems [ i ].update( {text:ls.listItems [ i ].index+1} );
}
else if (delta>0 && ls.listItems [ i ].location[1]+delta>ls.listItems [ i ].parent.location[1]+ls.listItems [ i ].parent.size.height ) {
ls.listItems [ i ].location[1] = ls.listItems [ i ].location[1] + delta-max*itemHeight;
ls.listItems [ i ].index && ls.listItems [ i ].index-=max;
ls.listItems [ i ].update( {text:ls.listItems [ i ].index+1} );
}
else {
ls.listItems [ i ].location[1]+=delta;
}
i++;
}
}
};
this.fill = function ( itemRenderer, data ) {
var i = 0, n =0;
this.data = data;
if ( !itemRenderer
|| !(itemRenderer instanceof Function)
|| !data
|| !(data instanceof Array)
|| !data.length ) {
List.isReady = false;
}
n = data.length;
while ( i<n ) {
i< max && ls.listItems = itemRenderer (lstGp, data );
i++;
}
List.isReady = true;
};
}
main();
HTH
Loic
www.ozalto.com
Why am I not surprised ? ScriptUI sighs…
AdChoices