FWD » Core Development » User Interface

=== modified file 'src/com/goldencode/p2j/ui/client/gui/ModalWindow.java'

--- src/com/goldencode/p2j/ui/client/gui/ModalWindow.java	2015-08-26 22:14:27 +0000

+++ src/com/goldencode/p2j/ui/client/gui/ModalWindow.java	2015-09-09 21:33:23 +0000

@@ -74,7 +74,8 @@

       titleBar = new WindowTitleBar(WidgetId.nextID(),

                                     false,

-                                    new CaptionButtonType[] {CaptionButtonType.CLOSE});

+                                    new CaptionButtonType[] {CaptionButtonType.CLOSE},

+                                    title);

       windowPane.add(titleBar);

       windowPane.add(contentPane);

       add(windowPane);

=== modified file 'src/com/goldencode/p2j/ui/client/gui/WindowGuiImpl.java'

--- src/com/goldencode/p2j/ui/client/gui/WindowGuiImpl.java	2015-09-04 13:38:15 +0000

+++ src/com/goldencode/p2j/ui/client/gui/WindowGuiImpl.java	2015-09-09 21:32:42 +0000

@@ -1316,8 +1316,7 @@

    protected void reset()

    {

       super.reset();

-      

-      titleBar = new WindowTitleBar(WidgetId.nextID());

+      titleBar = new WindowTitleBar(WidgetId.nextID(), title());

       // TODO: what is the layout mgr for the GUI window (the workspace)?

       workspace = new WindowWorkSpace(WidgetId.nextID(), ScrollBar.Bars.BOTH);

=== modified file 'src/com/goldencode/p2j/ui/client/gui/WindowTitleBar.java'

--- src/com/goldencode/p2j/ui/client/gui/WindowTitleBar.java	2015-09-08 22:00:49 +0000

+++ src/com/goldencode/p2j/ui/client/gui/WindowTitleBar.java	2015-09-09 21:45:30 +0000

@@ -93,15 +93,18 @@

     * 

     * @param    id

     *           The widget's ID.

+    * @param    windowTitle

+    *           The window title.

     */

-   public WindowTitleBar(WidgetId id)

+   public WindowTitleBar(WidgetId id, String windowTitle)

    {

       this(id, true, new CaptionButtonType[]

          { 

             CaptionButtonType.ICONIFY, 

             CaptionButtonType.MAXIMIZE, 

             CaptionButtonType.CLOSE

-         });

+         },

+         windowTitle);

    }

    /**

@@ -113,8 +116,11 @@

     *           If <code>true</code> the window's window icon will be shown.

     * @param    buttonTypes

     *           Array of button types to create on the bar.

+    * @param    windowTitle

+    *           The window title.

     */

-   public WindowTitleBar(WidgetId id, boolean showWindowIcon, CaptionButtonType[] buttonTypes)

+   public WindowTitleBar(WidgetId id, boolean showWindowIcon, CaptionButtonType[] buttonTypes,

+            String windowTitle)

    {

       nativeInsets = new NativeInsets(2, 2, 2, 2);

@@ -139,6 +145,7 @@

       }

       title = new WindowTitle(WidgetId.nextID());

+      title.setTitle(windowTitle);

       this.add(title);

       buttons = new CaptionButton[buttonTypes.length];

@@ -582,6 +589,9 @@

    private class WindowTitle

    extends Label<GuiOutputManager>

    {

+

+      private String title;

+      private boolean titleIsChanged;

       /**

        * Basic c'tor.

        * 

@@ -592,7 +602,29 @@

       {

          super(id, "", WindowTitleBar.this.getId().asInt());

       }

-      

+

+      /**

+       * Returns the window title.

+       * 

+       * @return   The title

+       */

+      public String getTitle()

+      {

+         return title;

+      }

+

+      /**

+       * Sets the window title.

+       * 

+       * @param    title

+       *           The title to set

+       */

+      public void setTitle(String title)

+      {

+         this.title = title;

+         this.titleIsChanged = true;

+      }

+

       /**

        * Draw this window title.

        */

@@ -603,7 +635,12 @@

          String windowTitle = window.title();

          final String title = (windowTitle == null ? WindowGuiImpl.DEFAULT_TITLE : windowTitle);

-         gd.setTitle(title);

+         

+         if (titleIsChanged || !title.equals(getTitle()))

+         {

+            gd.setTitle(title);

+            titleIsChanged = false;

+         }

          NativePoint origin = physicalLocation();

          final NativeDimension d = physicalDimension();

          final NativeRectangle clip = clipRectangle(origin, d);

=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js'

--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js	2015-09-09 15:55:53 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js	2015-09-09 21:13:14 +0000

@@ -734,9 +734,6 @@

                fontId = p2j.socket.readInt32BinaryMessage(message, idx + 1);

                setFont(this.ctx, fontId);

-               

-               //sets font for the task bar

-               taskBar.setDefaultFont(fontId);

                break;

             case ops.SET_FONT_STYLE:

                var style = p2j.socket.readInt32BinaryMessage(message, idx + 1);

@@ -1605,6 +1602,7 @@

             p2j.fonts,

             p2j.logger);

       taskBar = desktop.getTaskBar();

+      taskBar.setFont(cfg);

    };

    /**

=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js'

--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js	2015-09-09 15:55:53 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js	2015-09-09 21:13:14 +0000

@@ -202,19 +202,56 @@

    function TaskBar(peer, bg, fg, fontsManager, logger)

    {

       var DRAGGED_OPACITY = 0.3;

-      var TOP_PADDING  = 2;

-      var LEFT_PADDING = 2;

+      /**

+       * Top padding from the task bar border

+       */

+      var TOP_PADDING    = 2;

+      /**

+       * Bottom padding from the task bar border

+       */

+      var BOTTOM_PADDING = 2;

+      /**

+       * Left padding from the task bar border

+       */

+      var LEFT_PADDING  = 2;

+      /**

+       * Right padding from the task bar border

+       */

+      var RIGHT_PADDING = 2;

+      /**

+       * Margin around the icon

+       */

       var ICON_MARGIN  = 1;

-      var TEXT_MARGIN  = 1;

-      var TASK_BAR_TITLE = "Task Bar"; 

+      /**

+       * Margin around the text

+       */

+      var TEXT_MARGIN  = 4;

+      /**

+       * The task bar title.

+       */

+      var TASK_BAR_TITLE = "Task Bar";

+      /**

+       * The default task icon widget dimension: 40 x32

+       */

       var TASK_ICON_WIDTH  = 40; 

       var TASK_ICON_HEIGHT = 32;

+      /**

+       * The space between task icons.

+       */

       var SHIFT = 2;

-      var TASK_BAR_FONT_ID = createDefaultFont();

-      

-      

+      /**

+       * The task bar font id uses negative number in order

+       * to be different from fonts created for p2j windows

+       */

+      var TASK_BAR_FONT_ID = -1;

+

+      var LIGHTEN_COLOR_INTENSE = 10;

+      /**

+       * The task bar dragged panel

+       */

       var dragged;

+      

       var canvas = document.createElement('canvas');

       canvas.className="canvas";

       canvas.style["height"] = "100%";

@@ -246,20 +283,6 @@

       }

       /**

-       * Creates the default font for the task bar.

-       * It is added for the standalone test.

-       */

-      function createDefaultFont()

-      {

-         var font = 1;

-         var name = "sans-serif";

-         var size = 8;

-         var style = 1;

-         var b64Font = "";

-         return fontsManager.createFont(font, name, size, style, b64Font);

-      };

-      

-      /**

        * The default task bar tooltip.

        */

       function setDefaultTooltip()

@@ -311,7 +334,7 @@

          var y;

          if (horizontalLayout)

          {

-            x = width - viewLogButton.width - LEFT_PADDING;

+            x = width - viewLogButton.width - RIGHT_PADDING;

             // to place on the centered horizontal line of the task bar.

             y = (height - viewLogButton.height) / 2;

          }

@@ -319,7 +342,7 @@

          {

             // to place on the centered vertical line of the task bar.

             x = (width - viewLogButton.width) / 2;

-            y = height - viewLogButton.height - TOP_PADDING;

+            y = height - viewLogButton.height - BOTTOM_PADDING;

          }

          viewLogButton.setLocation(x, y);

          viewLogButton.draw();

@@ -358,7 +381,7 @@

             horizontalLayout = false;

          }

-         var unified = calculateTaskIconWidth(width, height, horizontalLayout);

+         var unified = calculateTaskIconWidth(width, height, SHIFT, horizontalLayout);

          setUnifiedDimension(unified, TASK_ICON_HEIGHT, horizontalLayout);

          var x;

@@ -474,6 +497,8 @@

        *           The task bar width in pixels.

        * @param    {Number} height

        *           The task bar height in pixels.

+       * @param    {Number} space

+       *           The space between widgets in pixels.

        * @param    {Boolean} horizontalLayout

        *           Indicates the task bar layout, true if the task bar is along a horizontal line, otherwise,

        *           it is along a vertical line.

@@ -481,16 +506,20 @@

        * @return   {Number}

        *           The unified task icon width.

        */

-      function calculateTaskIconWidth(width, height, horizontalLayout)

+      function calculateTaskIconWidth(width, height, space, horizontalLayout)

       {

+         var numberOfWidgets = taskIcons.length + sysButtons.length;

+         var wasteSpaceWidth = space * (numberOfWidgets - 1);

          var maxWidth;

          if (horizontalLayout)

          {

-            maxWidth = width / (taskIcons.length + sysButtons.length);

+            // LEFT_PADDING widget1 SPACE widget2 .... SPACE widgetn RIGHT_PADDING

+            maxWidth = (width - wasteSpaceWidth - LEFT_PADDING - RIGHT_PADDING) / numberOfWidgets;

          }

          else

          {

-            maxWidth = height / (taskIcons.length + sysButtons.length);

+            // TOP_PADDING widget1 SPACE widget2 .... SPACE widgetn BOTTOM_PADDING

+            maxWidth = (height  - wasteSpaceWidth - TOP_PADDING - BOTTOM_PADDING)/ numberOfWidgets;

          }

          var taskIconsWidth = calculateMaximalIconWidth(taskIcons, horizontalLayout);

          if (taskIconsWidth > 0)

@@ -520,7 +549,7 @@

        */

       function setUnifiedDimension(unifiedWidth, unifiedHeight, horizontalLayout)

       {

-         function set(element, index, array)

+         function setDimension(element, index, array)

          {

             if (horizontalLayout)

             {

@@ -534,8 +563,8 @@

             }

             array[index].horizontalLayout = horizontalLayout;

          };

-         taskIcons.forEach(set);

-         sysButtons.forEach(set);

+         taskIcons.forEach(setDimension);

+         sysButtons.forEach(setDimension);

       };

       /**

@@ -625,15 +654,40 @@

          return taskIcon;

       };

-      this.setDefaultFont = setDefaultFont;

+      this.setFont = setFont;

       /**

        * Sets the default font to be used by the task bar.

+       * 

+       * @param    {Object} fontConfig

+       *           The font configuration { name  : 'sans-serif', size  : 8 }.

        */

-      function setDefaultFont(fontId)

+      function setFont(fontConfig)

       {

-         TASK_BAR_FONT_ID = fontId;

-      };

+         var font = TASK_BAR_FONT_ID;

+         var name;

+         if (fontConfig.name)

+         {

+            name = fontConfig.name;

+         }

+         else

+         {

+            name = "sans-serif";

+         }

+         var size;

+         if (fontConfig.size)

+         {

+            size = fontConfig.size;

+         }

+         else

+         {

+            size = 8;

+         }

+         // bold 

+         var style = 1;

+         var b64Font = "";

+         return fontsManager.createFont(font, name, size, style, b64Font);

+      }

       /**

        * Find the window task that represents the target window.

@@ -849,6 +903,31 @@

       canvas.addEventListener("mouseover", changeTooltipOverWidget);

       canvas.addEventListener("mouseleave", function(event) { setDefaultTooltip(); });

+      // add MDN resize throttler

+      window.addEventListener("resize", resizeThrottler, false);

+

+      /**

+       * The id of the scheduled resize function

+       */

+      var resizeTimeout;

+      

+      /**

+       * Redraws this task bar if the browser window is changing its size,

+       * with the frequency that doesn' exceed one time per 100 ms

+       */

+      function resizeThrottler()

+      {

+         // ignore resize events as long as an actualResizeHandler execution is in the queue

+         if (!resizeTimeout)

+         {

+            resizeTimeout = window.setTimeout(

+                  function()

+                  {

+                     resizeTimeout = null;

+                     doLayout(peer.offsetWidth, peer.offsetHeight);

+                  }, 100);

+         }

+      };

       /**

        * Returns rgba(r,g,b,a) string representation for the target color

        * with the target transparency.

@@ -997,33 +1076,43 @@

                var textWidth  = fontsManager.getTextWidth(TASK_BAR_FONT_ID, that.title);

                var textHeight = fontsManager.getTextHeight(TASK_BAR_FONT_ID, that.title);

                ctx.font = fontsManager.getFontName(TASK_BAR_FONT_ID);

-               

                var xTextPos;

                var yTextPos;

                if (that.horizontalLayout)

                {

-                  var xShift = 0;

+                  var xShift = TEXT_MARGIN;

                   if (that.iconWidth > 0)

                   {

                      xShift += that.iconWidth + 2 * ICON_MARGIN;

                   }

-                  xTextPos = that.x + (that.width - textWidth + xShift) / 2;

+                  xTextPos = that.x + (that.width - TEXT_MARGIN - textWidth + xShift) / 2;

                   yTextPos = that.y + (that.height + textHeight) / 2;

                }

                else

                {

-                  var yShift = 0;

+                  var yShift = TEXT_MARGIN;

                   if (that.iconHeight > 0)

                   {

                      yShift += that.iconHeight + 2 * ICON_MARGIN;

                   }

                   xTextPos = that.x + (that.width - textHeight) / 2;

-                  yTextPos = that.y + (that.height - textWidth + yShift) / 2;

+                  yTextPos = that.y + (that.height - TEXT_MARGIN - textWidth + yShift) / 2;

                   ctx.translate(xTextPos, yTextPos);

                   ctx.rotate(Math.PI / 2);

                   xTextPos = 0;

                   yTextPos = 0;

                }

+               if (active)

+               {

+                  var textRgb = canvasRenderer.parseColor(ctx.fillStyle);

+                  var selectedTextRgb = canvasRenderer.lightenColor(textRgb).map(

+                        function(channel)

+                        {

+                           return LIGHTEN_COLOR_INTENSE * channel;

+                        });

+                  ctx.fillStyle = canvasRenderer.createColorString(selectedTextRgb);

+               }

+               

                canvasRenderer.drawText(

                      that.title,

                      xTextPos,