docs: update tutorial8.md

- Explain LookAndFeel and subclassing ways in details

wiki/tutorial8.md

@@ -23,8 +23,7 @@ These classes are dynamically loaded at startup, and use many UI properties to g
 <tr><td>AutoHideExpandPanel</td><td>com.vlsolutions.swing.docking.ui.AutoHideExpandPanelUI</td></tr>
 <tr><td>AutoHideButtonPanel</td><td>com.vlsolutions.swing.docking.ui.AutoHideButtonPanelUI</td></tr>
 <tr><td>AutoHideButton</td><td>com.vlsolutions.swing.docking.ui.AutoHideButtonUI</td></tr>
-</tbody>
-</table>
+</tbody></table>
 
 
 ### Replacing UI Delegates 
@@ -47,38 +46,85 @@ Here is how to declare them :
 
 Example :
 
-
 ```java
+import javax.swing.*;
+import com.vlsolutions.swing.docking.ui.DockingUISettings;
+
+public class Main {
     public static void main(String[] args) {
         // first, preload the UI to avoid erasing your own customizations
         DockingUISettings.getInstance().installUI();
         // and start customizing...
+        UIManager.put("DockViewTitleBar.titleFont", UIManager.getFont("Label.font"));
+        UIManager.put("DockViewTitleBar.isCloseButtonDisplayed", false);
         UIManager.put("DockViewTitleBarUI", "your.own.ui.UIDelegateClassName");
         // (replaced the DockViewTitleBar UI by another class)
     }
+}
 ```
 
-#### LookAndFeel friendly way
+#### Standard LookAndFeel way
 
-  * Define it in your custom `LookAndFeel#getDefaults`
+  * Define VLDocking properties in your custom `LookAndFeel#getDefaults`
   * Set CustomLookAndFeel class name using `UIManager.setLookAndFeel`
 
 ```java
 import javax.swing.*;
 
-public class CustomLookAndFeel extends BasicLookAndFeel implements LookAndFeel {
+public class CustomLookAndFeel extends MetalLookAndFeel implements LookAndFeel {
+    public CustomLookAndFeel() {
+        super();
+    }
 
     @Override
     public UIDefaults getDefaults() {
-        UIDefaults defaults = UIManager.getDefaults();
-        defaults.put("DockViewTitleBarUI", "your.own.ui.UIDelegateClassName");
-        return defaults;
+        UIDefaults config = super.getDefaults();
+        config.put("DockViewTitleBar.titleFont", config.getFont("Label.font"));
+        config.put("DockViewTitleBar.isCloseButtonDisplayed", false);
+        config.put("DockViewTitleBarUI", "your.own.ui.UIDelegateClassName");
+        return config;
     }
 }
 
-
+public class Main {
+    public static void main(String[] args) {
+        UIManager.setLookAndFeel(new CustomLookAndFeel());
+        DockingUISettings.getInstance().installUI();
+    }
+}
 ```
 
+#### Customize with subclass of `DockingUISettings` class
+
+You can provide a subclass of `DockingUISettings` and override the `getDefaults(UIDefaults table)` method.
+The subclass instance should be registered with `DockingUISettings.setInstance` method.
+
+
+```java
+import com.vlsolutions.swing.docking.ui.DockingUISettings;
+
+public class CustomDockingUISettings extends DockingUISettings {
+
+    public CustomDockingUISettings() {
+        super();
+    }
+
+    @Override
+    protected UIDefaults getDefaults(UIDefaults config) {
+        config.put("DockViewTitleBar.titleFont", config.getFont("Label.font"));
+        config.put("DockViewTitleBar.isCloseButtonDisplayed", false);
+        config.put("DockViewTitleBarUI", "your.own.ui.UIDelegateClassName");
+        return super.getDefaults(config);
+    }
+}
+
+public class Main {
+    public static void main(String[] args) {
+        DockingUISettings.setInstance(new CustomDockingUISettings());
+        DockingUISettings.getInstance().installUI();
+    }
+}
+```
 
 ###  Updating the existing UI 
 
@@ -128,8 +174,7 @@ Now that you know how to proceed, here is the long list of customizable properti
 ## Customizable properties  
 ###  Border properties
 
-<table>
-<thead>
+<table><thead>
 <tr><th>UI property</th> <th>type</th> <th>effect</th></tr></thead>
 <tbody>
 <tr><td>DockView.singleDockableBorder</td> <td>Border</td> <td>border used when the DockView is docked alone (not in a tab)</td></tr>
@@ -150,23 +195,19 @@ Now that you know how to proceed, here is the long list of customizable properti
 <tr> <td>ToolBarPanel.rightBorder</td> <td>Border</td> <td>Border used when a toolbar in on the right of a container</td></tr>
 <tr> <td>FloatingDialog.dialogBorder</td> <td>Border</td> <td>Border used for the FloatingDialog</td></tr>
 <tr> <td>FloatingDialog.titleBorder</td> <td>Border</td> <td>Border used for the title (drag header) of the FloatingDialog</td></tr>
-</tbody>
-</table>
+</tbody></table>
 
 ###  Color properties
 
-<table>
-<thead>
+<table><thead>
 <tr><th>UI property</th> <th>type</th> <th>effect</th></tr></thead>
 <tbody>
 <tr> <td>DockingDesktop.notificationColor</td> <td>Color</td> <td>blinking color for notifications</td></tr>
-</tbody>
-</table>
+</tbody></table>
 
 ###  Icons 
 
-<table>
-<thead>
+<table><thead>
 <tr><th>UI property</th> <th>type</th> <th>effect</th></tr></thead>
 <tbody>
 <tr> <td>DockViewTitleBar.close</td> <td>Icon</td> <td>Icon for the close button</td></tr>
@@ -210,14 +251,12 @@ property must also be set to true</td></tr>
 <tr> <td>DockTabbedPane.menu.float</td> <td>Icon </td> <td>Icon for the float button, in tab pop-up menu</td></tr>
 <tr> <td>DockTabbedPane.menu.closeAll</td> <td>Icon </td> <td>Icon for the "close all" button, in tab pop-up menu</td></tr>
 <tr> <td>DockTabbedPane.menu.closeAllOther</td> <td>Icon </td> <td>Icon for the "close all other" button, in tab pop-up menu</td></tr>
-</tbody>
-</table>
+</tbody></table>
 
 
 ###  Labels and Fonts 
 
-<table>
-<thead>
+<table><thead>
 <tr><th>UI property</th> <th>type</th> <th>effect</th></tr></thead>
 <tbody>
 <tr> <td>DockViewTitleBar.closeButtonText</td> <td>String</td> <td>Text of the close button</td></tr>
@@ -232,13 +271,11 @@ property must also be set to true</td></tr>
 <tr> <td>DockTabbedPane.restoreButtonText</td> <td>String</td> <td>Text for the restore button in tab</td></tr>
 <tr> <td>DockTabbedPane.maximizeButtonText</td> <td>String</td> <td>Text for the maximize button in tab</td></tr>
 <tr> <td>DockTabbedPane.floatButtonText</td> <td>String</td> <td>Text for the float button in tab</td></tr>
-</tbody>
-</table>
+</tbody></table>
 
 ###  Displaying buttons in title bars 
 
-<table>
-<thead>
+<table><thead>
 <tr><th>UI property</th> <th>type</th> <th>effect</th></tr></thead>
 <tbody>
 <tr> <td>DockViewTitleBar.isCloseButtonDisplayed</td> <td>boolean</td> <td>display or not the close button in the title bar (still accessible from pop-up menu)</td></tr>
@@ -248,21 +285,18 @@ property must also be set to true</td></tr>
 <tr> <td>DockViewTitleBar.isRestoreButtonDisplayed</td> <td>boolean</td> <td>display or not the restore button in the title bar</td></tr>
 <tr> <td>DockViewTitleBar.isFloatButtonDisplayed</td> <td>boolean</td> <td>display or not the float button in the title bar</td></tr>
 <tr> <td>DockViewTitleBar.isAttachButtonDisplayed</td> <td>boolean</td> <td>display or not the attach button in the title bar</td></tr>
-</tbody>
-</table>
+</tbody></table>
 
 ###  KeyStrokes 
 
-<table>
-<thead>
+<table><thead>
 <tr><th>UI property</th> <th>type</th> <th>effect</th></tr></thead>
 <tbody>
 <tr> <td>DockingDesktop.closeActionAccelerator</td> <td>KeyStroke</td> <td>KeyStroke for close action (on selected dockable)</td></tr>
 <tr> <td>DockingDesktop.maximizeActionAccelerator</td> <td>KeyStroke</td> <td>KeyStroke for maximize/restore action (on selected dockable)</td></tr>
 <tr> <td>DockingDesktop.dockActionAccelerator</td> <td>KeyStroke</td> <td>KeyStroke for hide/dock action (on selected dockable)</td></tr>
 <tr> <td>DockingDesktop.floatActionAccelerator</td> <td>KeyStroke</td> <td>KeyStroke for float/attach action (on selected dockable)</td></tr>
-</tbody>
-</table>
+</tbody></table>
 
 ###  UI Delegates 
 
@@ -277,8 +311,7 @@ property must also be set to true</td></tr>
 <tr><td>DockViewTitleBar.height</td> <td>int</td> <td>Height of the title bars</td></tr>
 <tr><td>DockingSplitPaneUI</td> <td>class name</td> <td>UI delegate for SplitContainer component</td></tr>
 <tr><td>ToolBarGripperUI</td> <td>class name</td> <td>UI delegate for the toolbar "gripper"</td></tr>
-</tbody>
-</table>
+</tbody></table>
 
 ###  Cursors