line break in UI

[csuebele]

In CS2, I could use \r to break a line on things like radio button text in my UI, but in CS3, it does not work. I just get little boxes. The \r seems to work when entering the text into a text layer. Any ideas on what is going on?

[xbytor]

If \r, \n, and \r\n do not work, you may be out of luck.

-X

[csuebele]

xbytor wrote:If \r, \n, and \r\n do not work, you may be out of luck.

-X

I think I'm just out of luck.

[slehar]

Defining your UI with a text string works OK for very simple UI's, but it has several disadvantages over alternatives. The editor doesn't color code the string, because it is all one string, and it is difficult to debug.

The alternative is to build up your UI programmatically, which I very much prefer for more complex UI's.

Here is a UI I made with the old text method:

Code: Select all////////////////////////////////////////////////////////////////////////////////////////////
// TestUI-1.jsx
//
// Tests the user interface function using
// pre-defined resource string.
//
/**
* @@@BUILDINFO@@@ TestUI-1.jsx !Version! Mon Nov 24 2008 13:14:45 GMT-0500
*/

// Create UI Resource String
var res = createUIResource();

// Open the dialog window
dlg = new Window(res);

// Center and show         
dlg.center();
dlg.show();

var stop = 0;

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Create the UI resource string to define the user interface dialog box
function createUIResource(){
var res = "dialog{ \
         text: 'Folders Selector',\
         srcFolders: Panel{ \
             orientation: 'column', \
            alignChildren: 'right', \
            text: 'Source Folders', \
            leftGroup: Group{  \
               statField: StaticText{ text: 'LEFT imgs:'  }, \
               edField: EditText{ preferredSize: [500, 20]  } \
               browseButton: Button{ \
                  text: 'Browse', properties: {name: 'browse'} \
               } \
            }, \
            rightGroup: Group{   \
               statField: StaticText{  text: 'RIGHT imgs:'  }, \
               edField: EditText{ preferredSize: [500, 20]  } \
               browseButton: Button{ \
                  text: 'Browse', properties: {name: 'browse'} \
               } \
            } \
         }, \
         dstFolder: Panel{ \
             orientation: 'column', \
            text: 'Destination Folder', \
            mergedGroup: Group{   \
               statField: StaticText{  text: 'merged imgs:'  }, \
               edField: EditText{ preferredSize: [500, 20]  } \
               browseButton: Button{ \
                  text: 'Browse', properties: {name: 'browse'} \
               } \
            } \
         }, \
         buttonsAndMergeGrp: Group{\
            orientation: 'row' , \
            methodsPanel: Panel{ \
               orientation: 'row', \
               text: 'Merge Method', \
               fixedOffsetButton: Button{ \
                  text: 'Fixed Offset', properties: {name: 'fixedOffset'} \
               } \
               stripMergeButton: Button{ \
                  text: 'Strip Merge', properties: {name: 'stripMerge'} \
               } \
            }, \
            mergeButton: Button{ \
               text: 'Merge Files', properties: {  \
               align: 'right',  \
               name: 'doMerge'} \
            } \
            quitButton: Button{ \
               text: 'Quit', properties: {  \
               align: 'right',  \
               name: 'quit'} \
            } \
         }  \
      } ";
   return res;
}



and here is the same UI built up progressively

Code: Select all////////////////////////////////////////////////////////////////////////////////////////////
// TestUI-2.jsx
//
// Tests the user interface function building it up progressively
// instead of pre-defining it all in a dialog resource string.
//
/**
* @@@BUILDINFO@@@ TestUI-2.jsx !Version! Mon Nov 24 2008 13:16:46 GMT-0500
*/

// Create dialog window
var dlg = new Window('dialog');
dlg.text = 'Folders Selector';

// Add Source Folders panel
dlg.srcFolders = dlg.add('Panel');
   dlg.srcFolders.orientation = 'column';
   dlg.srcFolders.alignChildren = 'right';
   dlg.srcFolders.text = 'Source Folders';
   
   // Add  LEFT imgs group
   dlg.srcFolders.leftGroup = dlg.srcFolders.add('Group');
      dlg.srcFolders.leftGroup.statfield = dlg.srcFolders.leftGroup.add('StaticText');
         dlg.srcFolders.leftGroup.statfield.text = 'LEFT imgs:';
      dlg.srcFolders.leftGroup.edField = dlg.srcFolders.leftGroup.add('EditText');
         dlg.srcFolders.leftGroup.edField.preferredSize = [500, 20];
      dlg.srcFolders.leftGroup.browseButton = dlg.srcFolders.leftGroup.add('Button');
         dlg.srcFolders.leftGroup.browseButton.text = 'Browse';
   
   // Add RIGHT imgs group
   dlg.srcFolders.rightGroup = dlg.srcFolders.add('Group');
      dlg.srcFolders.rightGroup.statfield = dlg.srcFolders.rightGroup.add('StaticText');
         dlg.srcFolders.rightGroup.statfield.text = 'RIGHT imgs:';
      dlg.srcFolders.rightGroup.edField = dlg.srcFolders.rightGroup.add('EditText');
         dlg.srcFolders.rightGroup.edField.preferredSize = [500, 20];
      dlg.srcFolders.rightGroup.browseButton = dlg.srcFolders.rightGroup.add('Button');
         dlg.srcFolders.rightGroup.browseButton.text = 'Browse';

// Add Destination Folder Panel
dlg.dstFolder = dlg.add('Panel');
   dlg.dstFolder.orientation = 'column';
   dlg.dstFolder.text = 'Destination Folder';
   dlg.dstFolder.mergedGroup = dlg.dstFolder.add('Group');
      dlg.dstFolder.mergedGroup.statfield = dlg.dstFolder.mergedGroup.add('StaticText');
         dlg.dstFolder.mergedGroup.statfield.text = 'merged imgs:';
      dlg.dstFolder.mergedGroup.edField = dlg.dstFolder.mergedGroup.add('EditText');
         dlg.dstFolder.mergedGroup.edField.preferredSize = [500, 20];
      dlg.dstFolder.mergedGroup.browseButton = dlg.dstFolder.mergedGroup.add('Button');
         dlg.dstFolder.mergedGroup.browseButton.text = 'Browse';

// Add Buttons and Merge Group
dlg.buttonsAndMergeGrp = dlg.add('Group');
   dlg.buttonsAndMergeGrp.orientation = 'row';
   
   // Add merge Methods Panel
   dlg.buttonsAndMergeGrp.methodsPanel = dlg.buttonsAndMergeGrp.add('Panel');
      dlg.buttonsAndMergeGrp.methodsPanel.orientation = 'row';
      dlg.buttonsAndMergeGrp.methodsPanel.text = 'Merge Method';
      
      // Add Fixed Offset button
      dlg.buttonsAndMergeGrp.methodsPanel.fixedOffsetButton = dlg.buttonsAndMergeGrp.methodsPanel.add('Button');
         dlg.buttonsAndMergeGrp.methodsPanel.fixedOffsetButton.text = 'Fixed Offset';
         
      // Add Strip Merge button
      dlg.buttonsAndMergeGrp.methodsPanel.stripMergeButton = dlg.buttonsAndMergeGrp.methodsPanel.add('Button');
         dlg.buttonsAndMergeGrp.methodsPanel.stripMergeButton.text = 'Strip Merge';
         
   // Add Merge Files button
   dlg.buttonsAndMergeGrp.mergeButton = dlg.buttonsAndMergeGrp.add('Button');
      dlg.buttonsAndMergeGrp.mergeButton.text = 'Merge Files';
      dlg.buttonsAndMergeGrp.mergeButton.align = 'right';
      dlg.buttonsAndMergeGrp.mergeButton.name = 'doMerge';
      
   // Add Quit button
   dlg.buttonsAndMergeGrp.quitButton = dlg.buttonsAndMergeGrp.add('Button');
      dlg.buttonsAndMergeGrp.quitButton.text = 'Quit';
      dlg.buttonsAndMergeGrp.quitButton.align = 'right';
      dlg.buttonsAndMergeGrp.quitButton.name = 'quit';
   
// Center and show dialog         
dlg.center();
dlg.show();

var stop = 0;


Now that code is a bit awkward, with all the "dlg.srcFolders.leftGroup.statfield" type scoping stuff, but I discovered a simpler way of doing the scoping, as in this third piece of code for that same UI, where var scope takes on the appropriate scoping level at each stage, and thus simplifies the code considerably.

Code: Select all////////////////////////////////////////////////////////////////////////////////////////////
// TestUI-4.jsx
//
// Tests the user interface function building it up progressively,
// like the one using nested with{...}, but
// THIS VERSION using var scope.
//
/**
* @@@BUILDINFO@@@ TestUI-2.jsx !Version! Mon Nov 24 2008 13:14:53 GMT-0500
*/

// Create dialog window
var dlg = new Window('dialog');
var scope = dlg;
   scope.text = 'Folders Selector';

   // Add Source Folders panel
   scope.srcFolders = scope.add('Panel');
   scope = dlg.srcFolders;
      scope.orientation = 'column';
      scope.alignChildren = 'right';
      scope.text = 'Source Folders';
      
      // Add  LEFT imgs group
      scope.leftGroup = scope.add('Group');
      scope = dlg.srcFolders.leftGroup;
         scope.statfield = scope.add('StaticText');
            scope.statfield.text = 'LEFT imgs:';
         scope.edField = scope.add('EditText');
            scope.edField.preferredSize = [500, 20];
         scope.browseButton = scope.add('Button');
            scope.browseButton.text = 'Browse';
      scope = dlg.srcFolders;
      
      // Add RIGHT imgs group
      scope.rightGroup = scope.add('Group');
      scope = dlg.srcFolders.rightGroup;
         scope.statfield = scope.add('StaticText');
            scope.statfield.text = 'RIGHT imgs:';
         scope.edField = scope.add('EditText');
            scope.edField.preferredSize = [500, 20];
         scope.browseButton = scope.add('Button');
            scope.browseButton.text = 'Browse';
      scope = dlg.srcFolders;
   scope = dlg;


   // Add Destination Folder Panel
   scope.dstFolder = scope.add('Panel');
   scope = dlg.dstFolder;
      scope.orientation = 'column';
      scope.text = 'Destination Folder';
      scope.mergedGroup = scope.add('Group');
      scope = dlg.dstFolder.mergedGroup;
         scope.statfield = scope.add('StaticText');
            scope.statfield.text = 'merged imgs:';
         scope.edField = scope.add('EditText');
            scope.edField.preferredSize = [500, 20];
         scope.browseButton = scope.add('Button');
            scope.browseButton.text = 'Browse';
      scope = dlg.dstFolder;
   scope = dlg;

   // Add Buttons and Merge Group
   scope.buttonsAndMergeGrp = scope.add('Group');
   scope = dlg.buttonsAndMergeGrp;
      scope.orientation = 'row';
      
      // Add merge Methods Panel
      scope.methodsPanel = scope.add('Panel');
      scope = dlg.buttonsAndMergeGrp.methodsPanel;
         scope.orientation = 'row';
         scope.text = 'Merge Method';
         
         // Add Fixed Offset button
         scope.fixedOffsetButton = scope.add('Button');
            scope.fixedOffsetButton.text = 'Fixed Offset';
            
         // Add Strip Merge button
         scope.stripMergeButton = scope.add('Button');
            scope.stripMergeButton.text = 'Strip Merge';
      scope = dlg.buttonsAndMergeGrp;
            
      // Add Merge Files button
      scope.mergeButton = scope.add('Button');
      scope = dlg.buttonsAndMergeGrp.mergeButton;
         scope.text = 'Merge Files';
         scope.align = 'right';
         scope.name = 'doMerge';
      scope = dlg.buttonsAndMergeGrp;
         
      // Add Quit button
      scope.quitButton = scope.add('Button');
      scope = dlg.buttonsAndMergeGrp.quitButton;
         scope.text = 'Quit';
         scope.align = 'right';
         scope.name = 'quit';
      scope = dlg.buttonsAndMergeGrp;
   scope = dlg;
//scope = null;

   
// Center and show dialog         
dlg.center();
dlg.show();

var stop = 0;

[csuebele]

slehar, Thanks for the input & code. I have been using var to define the elements of the ui so that I don't have to type out that long string with dlg.****. However, I've been defining a new var for each element that way I can type testBtn.value rather than source.testBtn.value. In regard to my question about \r not working anymore with CS3 UI, I did find that the text will wrap according to the field size, you just can't specify where the line breaks.