Doc: update Qt Widgets examples

- \image --> \borderedimage
- update screenshot if required

Change-Id: I0318b1df67154b70c061da7cbd509b8d5337b311
Reviewed-by: Venugopal Shivashankar <Venugopal.Shivashankar@qt.io>

examples/widgets/desktop/systray/doc/src/systray.qdoc

@@ -32,7 +32,8 @@
     \brief The System Tray Icon example shows how to add an icon with a menu
     and popup messages to a desktop environment's system tray.
 
-    \image systemtray-example.png Screenshot of the System Tray Icon.
+    \borderedimage systemtray-example.png
+    \caption Screenshot of the System Tray Icon
 
     Modern operating systems usually provide a special area on the
     desktop, called the system tray or notification area, where
@@ -42,7 +43,7 @@
     the main application window (i.e., an editor for the system tray
     icon) and the associated icon.
 
-    \image systemtray-editor.png
+    \borderedimage systemtray-editor.png
 
     The editor allows the user to choose the preferred icon as well as
     set the balloon message's type and duration. The user can also

examples/widgets/doc/src/analogclock.qdoc

@@ -32,7 +32,8 @@
     \brief The Analog Clock example shows how to draw the contents of a
     custom widget.
 
-    \image analogclock-example.png Screenshot of the Analog Clock example
+    \borderedimage analogclock-example.png
+    \caption Screenshot of the Analog Clock example
 
     This example also demonstrates how the transformation and scaling
     features of QPainter can be used to make drawing custom widgets

examples/widgets/doc/src/calculator.qdoc

@@ -33,7 +33,8 @@
     functionality of a calculator widget, and how to use QGridLayout
     to place child widgets in a grid.
 
-    \image calculator-example.png Screenshot of the Calculator example
+    \borderedimage calculator-example.png
+    \caption Screenshot of the Calculator example
 
     The example consists of two classes:
 
@@ -370,6 +371,7 @@
     QSizePolicy::Expanding in the constructor and if we didn't
     reimplement QWidget::sizeHint().
 
-    \image calculator-ugly.png The Calculator example with default size policies and size hints
+    \borderedimage calculator-ugly.png
+    \caption The Calculator example with default size policies and size hints
 
 */

examples/widgets/doc/src/calendarwidget.qdoc

@@ -31,7 +31,7 @@
     \ingroup examples-widgets
     \brief The Calendar Widget example shows use of QCalendarWidget.
 
-    \image calendarwidgetexample.png
+    \borderedimage calendarwidgetexample.png
 
     QCalendarWidget displays one calendar month
     at a time and lets the user select a date.

examples/widgets/doc/src/charactermap.qdoc

@@ -38,7 +38,8 @@ copied into the clipboard, and pasted into other applications. The
 purpose behind this sort of tool is to allow users to enter characters
 that may be unavailable or difficult to locate on their keyboards.
 
-\image charactermap-example.png Screenshot of the Character Map example
+\borderedimage charactermap-example.png
+\caption Screenshot of the Character Map example
 
 The example consists of the following classes:
 

examples/widgets/doc/src/codeeditor.qdoc

@@ -32,7 +32,7 @@
     \brief The Code Editor example shows how to create a simple editor that
     has line numbers and that highlights the current line.
 
-    \image codeeditor-example.png
+    \borderedimage codeeditor-example.png
 
     As can be seen from the image, the editor displays the line
     numbers in an area to the left of the area for editing. The editor

examples/widgets/doc/src/digitalclock.qdoc

@@ -32,7 +32,8 @@
     \brief The Digital Clock example shows how to use QLCDNumber to display a
     number with LCD-like digits.
 
-    \image digitalclock-example.png Screenshot of the Digital Clock example
+    \borderedimage digitalclock-example.png
+    \caption Screenshot of the Digital Clock example
 
     This example also demonstrates how QTimer can be used to update a widget
     at regular intervals.

examples/widgets/doc/src/groupbox.qdoc

@@ -40,7 +40,7 @@
     Group boxes are usually used to organize check boxes and radio
     buttons into exclusive groups.
 
-    \image groupbox-example.png
+    \borderedimage groupbox-example.png
 
     The Group Boxes example consists of a single \c Window class that
     is used to show four group boxes: an exclusive radio button group,

examples/widgets/doc/src/imageviewer.qdoc

@@ -44,7 +44,8 @@
     can be used to implement zooming and scaling features. In
     addition the example shows how to use QPainter to print an image.
 
-    \image imageviewer-example.png Screenshot of the Image Viewer example
+    \borderedimage imageviewer-example.png
+    \caption Screenshot of the Image Viewer example
 
     With the Image Viewer application, the users can view an image of
     their choice. The \uicontrol File menu gives the user the possibility

examples/widgets/doc/src/lineedits.qdoc

@@ -34,7 +34,7 @@
     on the input and output supplied by the user.
 
 
-    \image lineedits-example.png
+    \borderedimage lineedits-example.png
 
     The example consists of a single \c Window class, containing a selection of
     line edits with different input constraints and display properties that can be

examples/widgets/doc/src/movie.qdoc

@@ -36,5 +36,5 @@
     a simple animation without the added complexity of a multimedia
     framework to install and deploy.
 
-    \image movie-example.png
+    \borderedimage movie-example.png
 */

examples/widgets/doc/src/shapedclock.qdoc

@@ -32,7 +32,7 @@
     \brief The Shaped Clock example shows how to apply a widget mask to a top-level
     widget to produce a shaped window.
 
-    \image shapedclock-example.png
+    \borderedimage shapedclock-example.png
 
     Widget masks are used to customize the shapes of top-level widgets by restricting
     the available area for painting. On some window systems, setting certain window flags

examples/widgets/doc/src/sliders.qdoc

@@ -43,7 +43,8 @@
     The example also demonstrates how signals and slots can be used to
     synchronize the behavior of two or more widgets.
 
-    \image sliders-example.png Screenshot of the Sliders example
+    \borderedimage sliders-example.png
+    \caption Screenshot of the Sliders example
 
     The Sliders example consists of two classes:
 

examples/widgets/doc/src/spinboxes.qdoc

@@ -33,7 +33,7 @@
     spin boxes available in Qt, from a simple QSpinBox widget to more complex
     editors like the QDateTimeEdit widget.
 
-    \image spinboxes-example.png
+    \borderedimage spinboxes-example.png
 
     The example consists of a single \c Window class that is used to display the
     different spin box-based widgets available with Qt.

examples/widgets/doc/src/styles.qdoc

@@ -32,7 +32,8 @@
     \brief The Styles example illustrates how to create custom widget
     drawing styles using Qt, and demonstrates Qt's predefined styles.
 
-    \image styles-enabledwood.png Screenshot of the Styles example
+    \borderedimage styles-enabledwood.png
+    \caption Screenshot of the Styles example
 
     A style in Qt is a subclass of QStyle or of one of its
     subclasses. Styles perform drawing on behalf of widgets. Qt

examples/widgets/doc/src/stylesheet.qdoc

@@ -31,6 +31,7 @@
     \ingroup examples-widgets
     \brief The Style Sheet Example shows how to use style sheets.
 
-    \image stylesheet-pagefold.png Screen Shot of the Pagefold style sheet
+    \borderedimage stylesheet-pagefold.png
+    \caption Screen Shot of the Pagefold style sheet
 */
 

examples/widgets/doc/src/tetrix.qdoc

@@ -31,7 +31,7 @@
     \ingroup examples-widgets
     \brief The Tetrix example is a Qt version of the classic Tetrix game.
 
-    \image tetrix-example.png
+    \borderedimage tetrix-example.png
 
     The object of the game is to stack pieces dropped from the top of the
     playing area so that they fill entire rows at the bottom of the playing area.

examples/widgets/doc/src/wiggly.qdoc

@@ -34,7 +34,8 @@
     addition, the example demonstrates how to use QFontMetrics to
     determine the size of text on screen.
 
-    \image wiggly-example.png Screenshot of the Wiggly example
+    \borderedimage wiggly-example.png
+    \caption Screenshot of the Wiggly example
 
     QBasicTimer is a low-level class for timers. Unlike QTimer,
     QBasicTimer doesn't inherit from QObject; instead of emitting a

examples/widgets/doc/src/windowflags.qdoc

@@ -41,7 +41,8 @@
     A widget's flags are stored in a Qt::WindowFlags type which stores
     an OR combination of the flags.
 
-    \image windowflags-example.png Screenshot of the Window Flags example
+    \borderedimage windowflags-example.png
+    \caption Screenshot of the Window Flags example
 
     The example consists of two classes: