Skip to main content
K
K159
Inspiring
May 19, 2016
Answered

[JS SUI] How to set window background?

  • May 19, 2016
  • 2 replies
  • 1684 views

Hi

I want to add background image to Window(SUI), and add other control that thereon.

Is it possible?

I found "window.orientation = 'stack'",  but I can't change the location of control.

Any Ideas?

Thanks.

var w = new Window ("dialog", "test");
w.orientation = 'stack';
var image = File(Folder.desktop + "/test.jpg");
w.add("image", undefined, image);
var edit = w.add("edittext", undefined, "");
edit.characters = 10; 
//edit.bound = [0,0,100,100]; //The size can be changed, but location can not be changed. 
//edit.location = [100,100];
//edit.preferredSize = [100,100];
w.show ();
This topic has been closed for replies.
Correct answer UQg

I think that in your original post, settings the bounds (in the commented out part of the code) failed because you wrote edit.bound = [0,0,100,100]; instead of edit.bounds = ...

I find it uneasy to prevent ScriptUI to autolayout everything, but the following should work to place the text in the position you want: 

var w = new Window("dialog", "test");
// add a group with 2 elements:
var g = w.add("group");
var im = g.add("image");
var et = g.add("edittext");
im.image = ScriptUI.newImage(File(Folder.desktop.absoluteURI + "/IMAGES/index.png"));
// set location and size for everything
g.location = [0,0];
g.size = im.size = im.image.size;
im.location = [0,0];
et.size = [50, 20];
et.location = [25, 15];
w.show ();

Xavier

Edit: as a alternative to setting the bounds once and for all, you can redefine the layout object for the group:

g.layout ={
    layout : function(){
        im.size = im.image.size;
        im.location = [0,0];
        et.size = [50, 20];
        et.location = [25, 15];
        
        g.preferredSize = im.image.size;
        },
    };
g.layout.resize = g.layout.layout;

.. something like this.

2 replies

UQg
UQgCorrect answer
Legend
May 20, 2016

I think that in your original post, settings the bounds (in the commented out part of the code) failed because you wrote edit.bound = [0,0,100,100]; instead of edit.bounds = ...

I find it uneasy to prevent ScriptUI to autolayout everything, but the following should work to place the text in the position you want: 

var w = new Window("dialog", "test");
// add a group with 2 elements:
var g = w.add("group");
var im = g.add("image");
var et = g.add("edittext");
im.image = ScriptUI.newImage(File(Folder.desktop.absoluteURI + "/IMAGES/index.png"));
// set location and size for everything
g.location = [0,0];
g.size = im.size = im.image.size;
im.location = [0,0];
et.size = [50, 20];
et.location = [25, 15];
w.show ();

Xavier

Edit: as a alternative to setting the bounds once and for all, you can redefine the layout object for the group:

g.layout ={
    layout : function(){
        im.size = im.image.size;
        im.location = [0,0];
        et.size = [50, 20];
        et.location = [25, 15];
        
        g.preferredSize = im.image.size;
        },
    };
g.layout.resize = g.layout.layout;

.. something like this.

K
K159Author
Inspiring
May 23, 2016

Thank you very mach. 

This is what I wanted.

var g = w.add("group"); 

var et = g.add("edittext");   //Add the first edit box.

var im = g.add("image"); 

UQg
UQg
Legend
May 23, 2016

Apparently you'll have to care about the stacking order of elements.

I think it's not the same across plarforms (MacOS/Windows) and also app versions.

I'm pretty sure there are topics on this in the forum, just tried to find one without success.

Xavier

    tpk1982
    tpk1982
    Legend
    May 19, 2016

    Keep this pdf from Peter always..

    https://indd.adobe.com/view/a0207571-ff5b-4bbf-a540-07079bd21d75

    K
    K159Author
    Inspiring
    May 19, 2016

    Hi.

    I have already seen that document, but I can't find that I want.

    tpk1982
    tpk1982
    Legend
    May 19, 2016

    try this:

    text box appear in top:

    var w = new Window ("dialog", "test"); 
    var gtxt=w.add("group"); 
    var gimg=w.add("group"); 
    var image = File(Folder.desktop + "/test.jpg"); 
    gimg.add("image", undefined, image); 
    var edit = gtxt.add("edittext", undefined, ""); 
    edit.characters = 10; 
    w.show ();

    text box appear in bottom:

    var w = new Window ("dialog", "test");  
    var gimg=w.add("group"); 
    var gtxt=w.add("group");   
    var image = File(Folder.desktop + "/test.jpg");  
    gimg.add("image", undefined, image);  
    var edit = gtxt.add("edittext", undefined, "");  
    edit.characters = 10;   
    w.show (); 
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices