Build dialog user interface

Question

Hi all,
I'm building my first UI with javascript and Indesign.
Unfortunatly, I don't understand how to align the static text label with the editext label…
My goal is to align the labelBitmap, limitBitmap. The result have to look like this: "limite image bitmap 1200 dpi" on 1 ligne.
Can someone help me?
Thanks you for your answer.
I use the following code:
function createDialog() {
          var myArray = [];
     var myListBoxBounds = [0, 0, 564, 160];
          if (app.extractLabel("KasIgnoredFolders") != "") {
                    myArray = app.extractLabel("KasIgnoredFolders").split(",");
          var dlg = new Window("dialog", "réduction d'images");
          dlg.orientation = 'column';
          dlg.alignChildren = 'top';
          dlg.btnPnl = dlg.add('panel', undefined, "images ignorées");
          dlg.btnPnl.orientation = 'column';
          dlg.btnPnl.helpTip = "ajouté une image si vous ne souhaitez pas qu'elle soit prise en compte par ce script";
          dlg.btnPnl.listBox = dlg.btnPnl.add('listbox', undefined, myArray, {multiselect:true});
          dlg.btnPnl.listBox.bounds = myListBoxBounds;
          dlg.btnPnl.grp = dlg.btnPnl.add('group');
          dlg.btnPnl.grp.orientation = 'row';
          dlg.btnPnl.grp.addBtn = dlg.btnPnl.grp.add('button', undefined, "ajouter image");
          dlg.btnPnl.grp.addBtn.helpTip = "ajouter une image à la liste";
          dlg.btnPnl.grp.removeBtn = dlg.btnPnl.grp.add('button', undefined, "supprimer image");
          dlg.btnPnl.grp.removeBtn.helpTip = "supprimer l'image sélectionnée de la liste";
          dlg.btnPnl.grp.remAllBtn = dlg.btnPnl.grp.add('button', undefined, "supprimer toutes");
          dlg.btnPnl.grp.remAllBtn.helpTip = "supprimer toutes les images de la liste";
          dlg.grp = dlg.add('panel', undefined, "réglages");
    dlg.grp.orientation = 'row';
          dlg.grp.subGrp = dlg.grp.add('group');
          dlg.grp.subGrp.radioPanel_left = dlg.grp.subGrp.add('panel', undefined, "sous-échantillonnage");
          dlg.grp.subGrp.radioPanel_left.alignment = 'left';
          dlg.grp.subGrp.radioPanel_left.alignChildren = 'left';
    dlg.grp.subGrp.radioPanel_left.rad1 = dlg.grp.subGrp.radioPanel_left.add('radiobutton', undefined, "activé");
          dlg.grp.subGrp.radioPanel_left.rad2 = dlg.grp.subGrp.radioPanel_left.add('radiobutton', undefined, "désactivé");
          dlg.grp.subGrp2 = dlg.grp.add('group');
          dlg.grp.subGrp2.radioPanel = dlg.grp.subGrp2.add('panel', undefined, "sur-échantillonnage");
          dlg.grp.subGrp2.radioPanel.alignment = 'right';
          dlg.grp.subGrp2.radioPanel.alignChildren = 'left';
    dlg.grp.subGrp2.radioPanel.rad3 = dlg.grp.subGrp2.radioPanel.add('radiobutton', undefined, "activé");
          dlg.grp.subGrp2.radioPanel.rad4 = dlg.grp.subGrp2.radioPanel.add('radiobutton', undefined, "désactivé");
    //-----------------------limit text box------------------------------ here is the problem ---------------------------
    dlg.grp.subGrp2.radioPanel.labelBitmap = dlg.grp.subGrp2.radioPanel.add('statictext', undefined, 'limite image bitmap');
    dlg.grp.subGrp2.radioPanel.limitBitmap = dlg.grp.subGrp2.radioPanel.add('edittext', undefined, '1200');
          dlg.grp.subGrp2.radioPanel.limitUnitBitmap = dlg.grp.subGrp2.radioPanel.add('statictext', undefined, 'dpi');
    dlg.grp.subGrp2.radioPanel.labelRaster = dlg.grp.subGrp2.radioPanel.add('statictext', undefined, 'limite image pixelisée');
    dlg.grp.subGrp2.radioPanel.limitRaster = dlg.grp.subGrp2.radioPanel.add('edittext', undefined, '300');
          dlg.grp.subGrp2.radioPanel.limitUnitRaster = dlg.grp.subGrp2.radioPanel.add('statictext', undefined, 'dpi');
          // ----------------------- navigation ------------------------------
    dlg.okBtn = dlg.add('button', undefined, "lancer le script", {name:'ok'});
    dlg.cancelBtn = dlg.add('button', undefined, "annuler", {name:'cancel'});
    var myDialogResult = dlg.show();
    var myResult = {};
    return myResult;

Answer 1

Hi thanks you for your reply!
It's work now.
I add my code if it can help someone:
#include "tools.jsx"
#include "pictures_tools.jsx"
@Example
var results = create_dialog_main ();
if(results != null){
    $.writeln (results.cibleBitmap)
    $.writeln (results.cibleRaster);
    $.writeln (results.limitBitmap);
    $.writeln (results.limitRaster);
    $.writeln ("prop "+results.isPictureProp)
    $.writeln ("sous echant "+results.isSousEchantillonnage)
    $.writeln ("sur echant "+results.isSurEchantillonnage)
    for(var i = 0; i<results.array_of_ignored_picture.length; i++){
        $.writeln("img: "+results.array_of_ignored_picture[i]);
else{
        alert("le script a été annulé");
        exit();
* function who create a dialog box for the script
* @return an array of results if the user click run, then return null
function create_dialog_main() {
    var myArray = [];
    var myListBoxBounds = [0, 0, 500, 200];
    var myListMargins = [10, 10, 0, 0];
    // window
    var win = new Window("dialog", "réduction d'images");
    win.orientation = "column";
    win.alignChildren = "top";
    // ignored img panel
    var ignored_pan = win.add("panel", undefined, "images ignorées");
    var grp_ignored = ignored_pan.add("group");
    grp_ignored.orientation = "column";
    grp_ignored.helpTip = "ajouté une image si vous ne souhaitez pas qu'elle soit prise en compte par ce script";
    grp_ignored.listBox = grp_ignored.add("listbox", undefined, myArray, {multiselect:true});
    grp_ignored.listBox.bounds = myListBoxBounds;
    grp_ignored.margins = myListMargins;
    // group button
    var ignored_pan_button = ignored_pan.add("group");
    ignored_pan_button.orientation = "row";
    ignored_pan_button.addBtn = ignored_pan_button.add("button", undefined, "ajouter image");
    ignored_pan_button.addBtn.helpTip = "ajouter une image à la liste";
    ignored_pan_button.removeBtn = ignored_pan_button.add("button", undefined, "supprimer image");
    ignored_pan_button.removeBtn.helpTip = "supprimer l'image sélectionnée de la liste";
    ignored_pan_button.remAllBtn = ignored_pan_button.add("button", undefined, "supprimer toutes");
    ignored_pan_button.remAllBtn.helpTip = "supprimer toutes les images de la liste";
    // settings panel
    var setting_pan = win.add("panel", undefined, "réglages");
    setting_pan.orientation = "column";
    setting_pan.minimumSize = [500, 0];
    //group cible and prop
    var grp_cible_prop = setting_pan.add("group");
    grp_cible_prop.orientation = "row";
    grp_cible_prop.alignment = "left";
    //group cible bitmap, cible raster
    var grp_bitmap_raster = grp_cible_prop.add("group");
    grp_bitmap_raster.orientation = "column";
    grp_bitmap_raster.minimumSize = [250, 0];
    //group bitmap cible
    var cible_bitmap_pan = grp_bitmap_raster.add("group");
    cible_bitmap_pan.orientation = "row";
    cible_bitmap_pan.alignment = "left";
    cible_bitmap_pan.labelCibleBitmap = cible_bitmap_pan.add("statictext", undefined, "cible image bitmap");
    cible_bitmap_pan.cibleBitmap = cible_bitmap_pan.add("edittext", undefined, "1200");
    cible_bitmap_pan.cibleBitmap.minimumSize = [60,0];
    cible_bitmap_pan.cibleUnitBitmap = cible_bitmap_pan.add("statictext", undefined, "dpi");
    //group raster cible
    var cible_raster_pan =  grp_bitmap_raster.add("group");
    cible_raster_pan.alignment = "left"
    cible_raster_pan.orientation = "row";
    cible_raster_pan.labelCibleRaster = cible_raster_pan.add("statictext", undefined, "cible image pixelisée");
    cible_raster_pan.cibleRaster = cible_raster_pan.add("edittext", undefined, "300");
    cible_raster_pan.cibleRaster.minimumSize = [50, 10];
    cible_raster_pan.cibleUnitRaster = cible_raster_pan.add("statictext", undefined, "dpi");
    // group proportionnelle
    var prop_pan = grp_cible_prop.add("panel", undefined, "images non-proportionnelles");
    prop_pan.alignChildren = "left";
    prop_pan.minimumSize = [200, 0];
    prop_pan.rad1 = prop_pan.add("radiobutton", undefined, "autorisées");
    prop_pan.rad2 = prop_pan.add("radiobutton", undefined, "interdites");
    prop_pan.rad2.value = true;
    // group ss echantillonnnage and ss echantillonnage -> group echantillonnage
    var grp_echantillonnage = setting_pan.add("group");
    grp_echantillonnage.orientation = "row";
    // group ss echantillonnage
    var ss_echantillonnage_pan = grp_echantillonnage.add("panel", undefined, "sous-échantillonnage");
    ss_echantillonnage_pan.minimumSize = [75,140];
    var grp_ss_echantillonnage = ss_echantillonnage_pan.add("group");
    grp_ss_echantillonnage.alignChildren = "left";
    grp_ss_echantillonnage.orientation = "column";
    grp_ss_echantillonnage.alignment = "left";
    grp_ss_echantillonnage.margins = [0,25,0,0];
    ss_echantillonnage_pan.rad1 = grp_ss_echantillonnage.add("radiobutton", undefined, "activé");
    ss_echantillonnage_pan.rad1.value = true;
    ss_echantillonnage_pan.rad2 = grp_ss_echantillonnage.add("radiobutton", undefined, "désactivé");
    // group sur-echantillonnage
    var sur_echantillonnage_pan = grp_echantillonnage.add("panel", undefined, "sur-échantillonnage");
    sur_echantillonnage_pan.alignChildren = "left";
    sur_echantillonnage_pan.rad1 = sur_echantillonnage_pan.add("radiobutton", undefined, "activé");
    sur_echantillonnage_pan.rad1.value = true;
    sur_echantillonnage_pan.rad2 = sur_echantillonnage_pan.add("radiobutton", undefined, "désactivé");
    // group limite bitmap
    var limite_bitmap_pan=  sur_echantillonnage_pan.add("group");
    limite_bitmap_pan.orientation = "row";
    limite_bitmap_pan.labelBitmap = limite_bitmap_pan.add("statictext", undefined, "résolution min. image bitmap");
    limite_bitmap_pan.limitBitmap = limite_bitmap_pan.add("edittext", undefined, "1000");
    limite_bitmap_pan.limitUnitBitmap = limite_bitmap_pan.add("statictext", undefined, "dpi");
    // group limit raster
    var limite_raster_pan =  sur_echantillonnage_pan.add("group");
    limite_raster_pan.labelRaster = limite_raster_pan.add("statictext", undefined, "résolution min. image pixelisée");
    limite_raster_pan.limitRaster = limite_raster_pan.add("edittext", undefined, "200");
    limite_raster_pan.limitUnitRaster = limite_raster_pan.add("statictext", undefined, "dpi");
     // ----------------------- navigation ------------------------------
    var grp_navigation = win.add("group");
    grp_navigation.orientation = "row";
    grp_navigation.alignment = "right";
    grp_navigation.cancelBtn = grp_navigation.add("button", undefined, "annuler", {name:"cancel"});
    grp_navigation.okBtn = grp_navigation.add("button", undefined, "lancer le script", {name:"ok"});
    //-------------------------- functions ----------------------------
    cible_bitmap_pan.cibleBitmap.onChange = function(){
        is_textfield_valid (this, "1200", "vous devez saisir un nombre entier");
    cible_raster_pan.cibleRaster.onChange = function(){
        is_textfield_valid (this, "300", "vous devez saisir un nombre entier");
    limite_bitmap_pan.limitBitmap.onChange = function(){
        is_textfield_valid (this, "1000", "vous devez saisir un nombre entier")
    limite_raster_pan.limitRaster.onChange = function(){
        is_textfield_valid (this, "200", "vous devez saisir un nombre entier");
    function is_textfield_valid(object, default_value_number, alert_str){
        if (!isInt(object.text)) {
            alert(alert_str);
            object.text = default_value_number;
        if(parseInt (object.text) < 1){
            alert("vous devez saisir un nombre plus grand ou égal a 1");
            object.text = default_value_number;
    function is_limitfield_valid(current_object, object_to_compare, default_value_number, alert_str){
        is_textfield_valid (current_object, default_value_number, alert_str);
        if(parseInt(current_object.text)){
    function isInt(n) {
        return parseFloat(n) == parseInt(n, 10) && !isNaN(n);
    ignored_pan_button.addBtn.onClick = function() {
                    var array_of_files = File.openDialog ("selectionner une image ou plusieurs images", get_file_filter ([".psd", ".png", ".jpg", ".eps"], "choisir une image"), true);
                    if (array_of_files != null) {
             for(var index = 0; index<array_of_files.length; index++){
                if (!is_in_array(File.decode(array_of_files[index].name), myArray)) {
                    var file_name = array_of_files[index].fsName.toLowerCase();
                    var extension = file_name.slice(file_name.lastIndexOf ("."));
                     if (extension == ".eps") {
                        var eps_img = new File(file_name);
                        if(is_raster_eps(eps_img)){
                            myArray.push(File.decode(array_of_files[index].name));
                        else{
                            alert("seule les fichiers eps de type image (non-vectorielle) peuvent être ajoutés");
                     else{
                        myArray.push(File.decode(array_of_files[index].name));
                else {
                                        alert("cette image a déjà été ajoutée");
             grp_ignored.remove(grp_ignored.listBox);
             grp_ignored.listBox = grp_ignored.add('listbox', myListBoxBounds, myArray, {multiselect:true});
             grp_ignored.listBox.bounds = myListBoxBounds;
             grp_ignored.margins = myListMargins;
    ignored_pan_button.remAllBtn.onClick = function() {
                    grp_ignored.listBox.removeAll();
                    myArray = [];
    ignored_pan_button.removeBtn.onClick = function() {
                    if (grp_ignored.listBox.selection != null) {
                              for (var i = grp_ignored.listBox.selection.length - 1; i  >= 0; i --) {
                                        myArray.splice(grp_ignored.listBox.selection[i].index, 1);
                                        grp_ignored.listBox.remove(grp_ignored.listBox.selection[i]);
        else{
            alert("selectionner une image puis clicker sur le bouton supprimer image");
    //-------------------------- return values ----------------------------
    var results = {};
    // if show == 1 the user click run
    if(win.show() == 1){
        // is the picture prop check or not
        if(prop_pan.rad1.value){
            results.isPictureProp = true;
        else{
            results.isPictureProp = false;
        // is the sous echantillonnage check
        if(ss_echantillonnage_pan.rad1.value){
            results.isSousEchantillonnage = true;
        else{
            results.isSousEchantillonnage = false;
        // is the sur echantillonnage check
        if(sur_echantillonnage_pan.rad1.value){
            results.isSurEchantillonnage = true;
        else{
            results.isSurEchantillonnage = false;       
        // return the target value, the validation is done during onChange event
        results.cibleBitmap = cible_bitmap_pan.cibleBitmap.text;
        results.cibleRaster = cible_raster_pan.cibleRaster.text;
        results.limitBitmap = limite_bitmap_pan.limitBitmap.text;
        results.limitRaster = limite_raster_pan.limitRaster.text;
        results.array_of_ignored_picture = myArray;
    //else the script was canceled
    else{
        results = null;
    return results;
function get_file_filter(array_of_ext, prompt_str){
    function return_filter(file){
        var is_valid = false;
        var index = 0;
        while(!is_valid){
                while (file.alias) {
                    file = file.resolve();
                    if (file == null) {
                        is_valid = false
                if (file.constructor.name == "Folder") {
                    is_valid= true;
                else{
                    var extension = file.name.toLowerCase().slice(file.name.lastIndexOf("."));
                    if (extension.indexOf (array_of_ext[index]) > -1 ){
                        is_valid = true;
                index++;
            if(index>=array_of_ext.length){
                break;
        return is_valid;
    return return_filter;