5 Replies Latest reply: Apr 6, 2012 7:05 PM by Marc Autret RSS

    ScriptUI stroking a field

    Loic.Aigon Community Member

      Hi,

       

      I need to red stroke fields. Inspite of the doc and this great thread : http://forums.adobe.com/message/4215908#4215908,

      I can't get it working

       

       

      field.onDraw = function()
      {
                var gx = this.graphics,
                 pen = this.graphics.newPen (this.graphics.PenType.SOLID_COLOR, [1, 0, 0,1], 5);
                gx.drawOSControl();
                gx.rectPath( this.location[0] , this.location[1], this.size.width, this.size.height);
                gx.strokePath(pen);
      }
      

       

      What am I doing wrong ?

       

      Best,

       

      Loic

        • 1. Re: ScriptUI stroking a field
          Loic.Aigon Community Member

          Hi,

           

          I finally got what I wanted with a workaround. First of all I could get the above snippet adding this line :

           

          field.onDraw = function()
          {
                    var gx = this.graphics,
                     pen = this.graphics.newPen (this.graphics.PenType.SOLID_COLOR, [1, 0, 0,1], 5);
                    gx.drawOSControl();

                    gx.newPath();
                    gx.rectPath( this.location[0] , this.location[1], this.size.width, this.size.height);
                    gx.strokePath(pen);
          }

           

          But the result wasn't the one I expected. The path was indeed drawn inside the text field area when I wanted it outside. Finally my cheat was to create a dummy group object on the back of the text field. Those both objects are placed into a stacked group. Then it's easy to set dimensions and background attributes for the dummy group and finally get what I wanted.

           


          var w = new Window('dialog');
          var gp = w.add('group');
          gp.orientation = 'stack';
          gp.alignChildren = ['center','center'];
          var dummyGp = gp.add('group');
          
          
          dummyGp.preferredSize = [102,52];
          dummyGp.graphics.backgroundColor = dummyGp.graphics.newBrush (dummyGp.graphics.BrushType.SOLID_COLOR, [1,0,0,1] );
          
          
          var tf1 = gp.add('edittext');
          tf1.preferredSize = [100,50];
          
          
          w.show();
          

           

          Capture d’écran 2012-03-29 à 10.18.37.png

           

          Hope it helps.

           

          Loic

           


          • 2. Re: ScriptUI stroking a field
            pkahrel CommunityMVP

            Nice one, Loic. But remember that on the Mac and on Windows, the stacked objects are drawn in a different order. So on Windows, your script shows just a red rectangle because the edit field is placed behind the rectangle.

             

            Peter

            • 3. Re: ScriptUI stroking a field
              Marc Autret MeganK

              Hi Loïc,

               

              About your workaround, why don't you simply create a Group having 1px margins—this depends on the stroke weight you need—and the desired background color, then add the EditText field within?

               

              @+

              Marc

              • 4. Re: ScriptUI stroking a field
                Loic.Aigon Community Member

                Hi Peter, Marc,

                 

                Sorry for the delay, I haven't been warned of your posts and almost seen them by surprise.

                 

                @Peter, that's the nasty one. The environment should be 100% macs but that's not a reason.

                @Marc, I thought margins deal with spacing inside the items. I gave it a try and the margin itself look much wider than requested

                 

                If I set margins = 1, I should expect 1 px wide stroke. But it looks like it's three added :?Capture d’écran 2012-04-03 à 01.02.36.png

                 

                Loic

                • 5. Re: ScriptUI stroking a field
                  Marc Autret MeganK

                  Hi Loïc,

                   

                  Yes, it's a Mac thing. On Mac OS, the EditText widget is subject to a specific focus ring wich automatically allocates 2 or 3 additional transparent pixels all around the field! Hence, if the control is nested within a background-colored group, that color is revealed through this additional space.

                   

                  From that point you need to apply two fixes:

                  (1) create a white subgroup between the outer group and the EditText to make sure that the revealed background fits the EditText background;

                  (2) make the EditText borderless to inhibits its own stroke.

                   

                  Now to the code:

                   

                   

                  // ScriptUI EditText with custom border (Win & Mac)
                  // ========================== 
                  
                  var STROKE_COLOR = [1,0,0],    // red
                      STROKE_WEIGHT = 1,        // in pixels
                      FILL_COLOR = [1,1,1],    // white
                      INSET_SPACE = 3;        // in pixels -- Mac OS focus ring needs it >=3
                  
                  var u,
                      w = new Window('dialog'),
                      // ---
                      gBorder = w.add('panel').add('group'),
                      gSpacer = gBorder.add('group'),
                      e = gSpacer.add('edittext', u, u, {borderless:true}),
                      // ---
                      bCancel = w.add('button', u, "Cancel"),
                      // ---
                      gx = w.graphics,
                      SOLID_BRUSH = gx.BrushType.SOLID_COLOR;
                  
                  // Edit field settings
                  // ---
                  e.characters = 12;
                  gBorder.margins = STROKE_WEIGHT;
                  gBorder.graphics.backgroundColor = gx.newBrush(SOLID_BRUSH, STROKE_COLOR );
                  gSpacer.margins = INSET_SPACE;
                  gSpacer.graphics.backgroundColor  = e.graphics.backgroundColor = gx.newBrush(SOLID_BRUSH, FILL_COLOR );
                  
                  w.show();
                  

                   

                  Hope that works.

                   

                  @+

                  Marc