JFace PreferencePage List with scrollbars - scrollbar

i am trying to create a PreferencePage which holds a List. The List can get large and under the List there Buttons which interact with the List. It would be useful if the Buttons where always visible but when the list gets to large the PreferencePage is auto-expanding with scrollbars.
My solution for now is a ScrolledComposite which holds the List. The Problem is that the ScrolledComposite is not filling out the layout. I have to set the size manually via setSize.
SWT.DEFAULT for hight:
425 for height:
Code for ScrolledComposite with the List:
ScrolledComposite scroll = new ScrolledComposite(
comp,
SWT.H_SCROLL | SWT.V_SCROLL);
Composite composite = new Composite(scroll, SWT.NONE);
scroll.setContent(composite);
scroll.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true,true,2,1));
GridLayout layout = new GridLayout(1, true);
composite.setLayout(layout);
List list = new List(composite, SWT.BORDER | SWT.V_SCROLL | SWT.MULTI);
GridData grid = new GridData(SWT.FILL, SWT.FILL, true, true);
grid.horizontalSpan=1;
list.setLayoutData(grid);
scroll.setExpandHorizontal(true);
composite.setSize(composite.computeSize(SWT.DEFAULT, 425));
The question is how can i make the ScrolledComposite to fill out the Layout without setting the hight value manually or prevent the PreferncePage from auto expanding. Using a table is also auto-expanding the hole PreferencePage. Setting scroll.setExpandVertical(true) also creates scrollbars on the PreferencePage and the List expands.

Use the heightHint value of GridData to specify the height of the list. Since the preference page always tries to size the page to the full size of the controls it is necessary to set the height somewhere:
List list = new List(composite, SWT.BORDER | SWT.V_SCROLL | SWT.MULTI);
GridData grid = new GridData(SWT.FILL, SWT.FILL, true, true);
grid.heightHint = 425;
list.setLayoutData(grid);

Related

SetPadding of one single elemet in a layout whith many childrens

There is a way to set a Padding of one single element in a VBox having other childrens?
this.layout_p = new VBox();
this.txta_p = new TextArea();
this.m_p = new Button("m");
this.o_p = new Button("o");
this.c_p = new Button("c");
this.oa_p = new Button("oa");
this.np_p = new Button("np'");
layout_p.getChildren().addAll(txta_p, m_p,
o_p, c_p, oa_p, np_p);
layout_p.setAlignment(Pos.CENTER_RIGHT);
I would like to have the button: np_p with a top padding of 50 from others buttons.
So having a separation between oa_p and np_p.
(Without using another VBox for that button and so, setPadding(...))
Setting a padding for a single node does not make sense. Padding is the room between the bounds of a node and it's content, see also the CSS Box Model.
You're actually trying to add a margin here, i.e. some space around the node. This can be done using VBox.setMargin.
VBox.setMargin(np_p, new Insets(50, 0, 0, 0));

How to resized button in godot

Why when creating a button with a script in the function _ready, these buttons cannot be resized. (And position)
var pos
var siz
var yBut = 150
var but
func _ready():
siz = get_viewport().get_visible_rect().size
pos = get_viewport().get_visible_rect().position
but = Button.new()
$sc/vb.add_child(but, true)
but.rect_position = pos/2
but.rect_size = Vector2(siz.x, 150)
ps. The buttons are placed in a ScrollContainer in which the vBoxContainer.
Container controls will auto resize and position children controls. Try using the Button's size flags to suggest it's size.
You can also compose ui with multiple levels of other Container controls such as V and HBoxContainer using size flags. This will give you finer control over the whole look of the ui. This will also make it easier to add controls later that will adaptively resize.
You can also set rect_min_size and the Container will not resize it any smaller than min size. However, that may break dynamic layout.
Hope this helps!

Aligning and spacing of texts of buttons in a flextable using GAS

In a flextable I create rows with buttons in the first column showing the number of each row, and textboxes in other columns.
I would like to reduce space between rows to a minimum.
var btnField = app.createButton(numRow).setId(fieldId).setSize(20, 20)
.setStyleAttribute('marginBottom', 3).setStyleAttribute('marginTop', 0)
.setStyleAttribute('fontSize', 8).setText(numRow));
flextable.setCellSpacing(1).setCellPadding(1); //Minimum distance between rows ??
Problem regarding the buttons is that the texts are not in the middle of the buttons vertically. I cannot reduce the size of the buttons (using .setSize(20, 18) or so) as text will become outside the buttons at the bottom.
What styleattributes should I use to position the text of the buttons in the middle of the buttons vertically, right alligned with a small marginRight? The buttons itself should not exceed the size of the textboxes in order to minimize distances between rows.
If I have to use settings on the flextable, that will be OK as well of course.
Style attributes should be written using camelCase, use fontSize instead of fontsize and you'll get this :
which is nicely centered.
edit : I made a few tests on button text alignment and the results are a bit surprising ...
code and illustration below show that only horizontal alignment is doable on text content and that paddingTop applies but has side effects the other widgets as well
function doGet() {
var app = UiApp.createApplication().setTitle('test buttons');
var btn1 = app.createButton('test Button1').setPixelSize(200,60).setStyleAttributes({'fontFamily': 'serif','fontWeight': 'bold','fontSize':'14pt','text-align':'right'});
var btn2 = app.createButton('test Button2').setPixelSize(200,30).setStyleAttributes({'fontSize':'12pt','textAlign':'left'});
var btn3 = app.createButton('test Button3').setPixelSize(200,16).setStyleAttributes({'fontSize':'8pt','padding':'0px'});
var btn4 = app.createButton('test Button4').setPixelSize(200,60).setStyleAttributes({'fontSize':'8pt','paddingTop':'30px'});
app.add(btn1).add(btn2).add(btn3).add(btn4);
return app;
}
A combination od padding and verticalAlignment can give interesting results, see below :
var btn4 = app.createButton('testButton4').setPixelSize(200,60).setStyleAttributes({'fontSize':'8pt','paddingTop':'30px','vertical-align':'-11px'});

How to scroll elements on canvas in different states and in different containers and not move others

I generate panels dynamically and put them in other states in that way so in one state you have a list of panels on the left and one big panel on the right for example in one state and when you click on the list on the left (with small panels) that panels takes the places of the big panel and the big one goes back in the place. So I have 50 panels on the left and i want to scroll them down but I don't want to big panel to go down with them I want it fixed.
this is where I got and I don't know how to do that
here is my code:
enter code here
protected function canvas1_creationCompleteHandler(event:FlexEvent):void
{
blurEffect= new BlurEffect(myBlur,myUnBlur);
listEventsResult.token=eventService.listEvent();
blurEffect.initFilter(event);
panels=generatePanels(panelNumber);
var vBox:VGroup= new VGroup();
states=statesList.toArray();
trace("stavi sequence i sostojba e"+ states[0].toString());
for(var i:int=0; i<panelNumber ;i++) // get panel from list panels and set states
{
addChild(panels.getItemAt(i) as Panel);
(states[i] as State).overrides=[ new SetProperty(panels.getItemAt(i),"x",110), new SetProperty(panels.getItemAt(i),"y",0),
new SetProperty(panels.getItemAt(i),"width",widthBigPanel), new SetProperty(panels.getItemAt(i),"height",heightBigPanel)
//,new AddChild(g2,(panels.getItemAt(k) as Panel))
//,new SetProperty(panels.getItemAt(i),"scaleZ",110)
];
trace("vlegov override za new state");
var yy:int=0;
for(var k:int=0;k<panelNumber;k++)
{
trace("menuvam state: yy = " + yy);
if(k!=i){
vBox.addChild(panels.getItemAt(k) as Panel);
(states[i] as State).overrides = (states[i] as State).overrides.concat([ new SetProperty(panels.getItemAt(k),"x",x), new SetProperty(panels.getItemAt(k),"y",yy),
new SetProperty(panels.getItemAt(k),"width",widthPanel), new SetProperty(panels.getItemAt(k),"height",heightPanel)
//,new AddChild(g1,(panels.getItemAt(k) as Panel))
]);
yy+=110;
}
}
for(z=0; z<(states[i] as State).overrides.length; ++z){
var tempSetProperty:SetProperty= (states[i] as State).overrides[z] as SetProperty;
trace("\nname: " + tempSetProperty.name);
trace("target: " + tempSetProperty.target);
trace("value: " + tempSetProperty._value);
}
setCurrentState("state0");
addChild(vBox);
}
//sequence.targets=panels.toArray();
t1.targets=panels.toArray();
}
You could do your regular scrolling, but add a vertical scroll bar listener, scroll="myScroll(event), that repositions the large panel as scrolling occurs (using something like the original x,y values of the panel and the verticalScrollPosition property).
Alternatively, you could add a second canvas on top of the first one, and sets its background to transparent. Place the large panel on the transparent canvas so it doesnt scroll (and put it back to the original canvas when scrolling completes if that suits).
Both of these are heavy(ish) on processing (especially the transparent canvas).

Flex DataGrid Column Width

In my flex app I store the widths and visiblility of columns in an xml file. When the app loads it reads from the xml file and sets he columns values as applicable:
for(i = 0; i < columnsOrder.length; i++){
newOrder[i] = myDG.columns[Number(columnsOrder[i]) - 1];
newOrder[i].visible = (Number(columnsVisiblity[i]) == 1);
newOrder[i].width = Number(columnsWidth[i]);
}
myDG.columns = newOrder;
myDG.invalidateList();
The problem appears to be setting the visibility (it sets the visible field correctly but messes up the width)... I've tried setting it after setting the width (outside of the loop) and before the loop as well. It resizes the columns properly if I don't do anything with the visibility.
Any ideas?
Add an import statement at the top of your class file:
import mx.core.mx_internal;
Then remove using the mx_internal namespace, remove the owner of the column, change the width and then reasign the parent:
public static function resizeColumn(col:DataGridColumn, size:int):void
{
var owner:* = col.mx_internal::owner
col.mx_internal::owner = null;
col.width = size;
col.mx_internal::owner = owner;
}
This ought to do the trick (well, it did for us after a couple of days of swearing)
Is you horizontalScrollPolicy set to false on the datagrid?
"If the DataGrid's horizontalScrollPolicy property is false, all visible columns must fit in the displayable area, and the DataGrid will not always honor the width of the columns if the total width of the columns is too small or too large for the displayable area."
http://livedocs.adobe.com/flex/3/langref/mx/controls/dataGridClasses/DataGridColumn.html#width
I was able to get it to work by calling the above loop in a function twice... the first time it add the visible columns, the second time it sets the correct width. Not the best solution but I cannot spend any more time on it.

Resources