Added missing kbd macros for keyboard key names and key combos. Also some other formatting fixes.

Change-Id: Id139133ea69f22246439104bc7608151eff650aa

6 files changed, 68 insertions, 95 deletions

diff --git a/documentation/advanced/advanced-shortcuts.asciidoc b/documentation/advanced/advanced-shortcuts.asciidoc
index a3c57a3d25..0a999c936d 100644
--- a/documentation/advanced/advanced-shortcuts.asciidoc
+++ b/documentation/advanced/advanced-shortcuts.asciidoc
@@ -19,7 +19,7 @@ pressed within a specific scope in the UI. The scope can be the entire
 == Shortcut Keys for Default Buttons
 
 You can add a __click shortcut__ to a button to set it as "default" button;
-pressing the defined key, typically Enter, in any component in the scope
+pressing the defined key, typically kbd:[Enter], in any component in the scope
 (sub-window or UI) causes a click event for the button to be fired.
 
 You can define a click shortcut with the [methodname]#setClickShortcut()#
@@ -94,7 +94,7 @@ Shortcut keys can be defined as __actions__ using the
 [classname]#ShortcutAction# class. It extends the generic [classname]#Action#
 class that is used for example in [classname]#Tree# and [classname]#Table# for
 context menus. Currently, the only classes that accept
-[classname]#ShortcutAction#s are [classname]#Window# and [classname]#Panel#.
+[classname]##ShortcutAction##s are [classname]#Window# and [classname]#Panel#.
 
 To handle key presses, you need to define an action handler by implementing the
 [classname]#Handler# interface. The interface has two methods that you need to
@@ -138,7 +138,7 @@ and as shortcut actions. The second parameter is the key code and the third a
 list of modifier keys, which are listed in <<advanced.shortcuts.keycodes>>.
 
 The following example demonstrates the definition of a default button for a user
-interface, as well as a normal shortcut key, AltC for clicking the
+interface, as well as a normal shortcut key, kbd:[Alt+C] for clicking the
 [guibutton]#Cancel# button.
 
 
@@ -226,9 +226,9 @@ public class DefaultButtonExample extends CustomComponent
 ----
 
 Notice that the keyboard actions can currently be attached only to
-[classname]#Panel#s and [classname]#Window#s. This can cause problems if you
+[classname]##Panel##s and [classname]##Window##s. This can cause problems if you
 have components that require a certain key. For example, multi-line
-[classname]#TextField# requires the Enter key. There is currently no way to
+[classname]#TextField# requires the kbd:[Enter] key. There is currently no way to
 filter the shortcut actions out while the focus is inside some specific
 component, so you need to avoid such conflicts.
 
@@ -237,34 +237,34 @@ component, so you need to avoid such conflicts.
 == Supported Key Codes and Modifier Keys
 
 The shortcut key definitions require a key code to identify the pressed key and
-modifier keys, such as Shift, Alt, or Ctrl, to specify a key combination.
+modifier keys, such as kbd:[Shift], kbd:[Alt], or kbd:[Ctrl], to specify a key combination.
 
 The key codes are defined in the [classname]#ShortcutAction.KeyCode# interface
 and are:
 
-Keys [parameter]#A#to[parameter]#Z#:: Normal letter keys
-[parameter]#F1#to[parameter]#F12#:: Function keys
+Keys [parameter]#A# to [parameter]#Z#:: Normal letter keys
+[parameter]#F1# to [parameter]#F12#:: Function keys
 
-[parameter]#BACKSPACE#,[parameter]#DELETE#,[parameter]#ENTER#,[parameter]#ESCAPE#,[parameter]#INSERT#,[parameter]#TAB#:: Control keys
+[parameter]#BACKSPACE#, [parameter]#DELETE#, [parameter]#ENTER#, [parameter]#ESCAPE#, [parameter]#INSERT#, [parameter]#TAB#:: Control keys
 
-[parameter]#NUM0#to[parameter]#NUM9#:: Number pad keys
+[parameter]#NUM0# to [parameter]#NUM9#:: Number pad keys
 
-[parameter]#ARROW_DOWN#,[parameter]#ARROW_UP#,[parameter]#ARROW_LEFT#,[parameter]#ARROW_RIGHT#:: Arrow keys
+[parameter]#ARROW_DOWN#, [parameter]#ARROW_UP#, [parameter]#ARROW_LEFT#, [parameter]#ARROW_RIGHT#:: Arrow keys
 
-[parameter]#HOME#,[parameter]#END#,[parameter]#PAGE_UP#,[parameter]#PAGE_DOWN#:: Other movement keys
+[parameter]#HOME#, [parameter]#END#, [parameter]#PAGE_UP#, [parameter]#PAGE_DOWN#:: Other movement keys
 
 
 
 Modifier keys are defined in [classname]#ShortcutAction.ModifierKey# and are:
 
-[parameter]#ModifierKey.ALT#:: Alt key
-[parameter]#ModifierKey.CTRL#:: Ctrl key
-[parameter]#ModifierKey.SHIFT#:: Shift key
+[parameter]#ModifierKey.ALT#:: kbd:[Alt] key
+[parameter]#ModifierKey.CTRL#:: kbd:[Ctrl] key
+[parameter]#ModifierKey.SHIFT#:: kbd:[Shift] key
 
 
 All constructors and methods accepting modifier keys take them as a variable
 argument list following the key code, separated with commas. For example, the
-following defines a CtrlShiftN key combination for a shortcut.
+following defines a kbd:[Ctrl+Shift+N] key combination for a shortcut.
 
 
 [source, java]
@@ -281,12 +281,7 @@ name.addShortcutListener(
 The actual possible key combinations vary greatly between browsers, as most
 browsers have a number of built-in shortcut keys, which can not be used in web
 applications. For example, Mozilla Firefox allows binding almost any key
-combination, while Opera does not even allow binding Alt shortcuts. Other
+combination, while Opera does not even allow binding kbd:[Alt] shortcuts. Other
 browsers are generally in between these two. Also, the operating system can
 reserve some key combinations and some computer manufacturers define their own
 system key combinations.
-
-
-
-
-
diff --git a/documentation/components/components-combobox.asciidoc b/documentation/components/components-combobox.asciidoc
index 189933ee5e..e21ff100d0 100644
--- a/documentation/components/components-combobox.asciidoc
+++ b/documentation/components/components-combobox.asciidoc
@@ -18,12 +18,9 @@ Components">>.
 image::img/combobox-basic.png[]
 
 [classname]#ComboBox# supports adding new items when the user presses
-Enter
+kbd:[Enter].
 ifdef::web[]
-, as described in
-<<dummy/../../../framework/components/components-selection#components.selection.newitems,"Allowing
-Adding New
-Items">>.
+See <<dummy/../../../framework/components/components-selection#components.selection.newitems,"Allowing Adding New Items">>.
 endif::web[]
 
 [[components.combobox.filtering]]
@@ -36,8 +33,7 @@ drop-down list by the text entered in the input box.
 .Filtered Selection in [classname]#ComboBox#
 image::img/combobox-filtering.png[]
 
-Pressing Enter will complete the item in the input box. Pressing Up- and
-Down-arrows can be used for selecting an item from the drop-down list. The
+Pressing kbd:[Enter] will complete the item in the input box. Pressing kbd:[Up] and kbd:[Down] arrow keys can be used for selecting an item from the drop-down list. The
 drop-down list is paged and clicking on the scroll buttons will change to the
 next or previous page. The list selection can also be done with the arrow keys
 on the keyboard. The shown items are loaded from the server as needed, so the
@@ -109,7 +105,3 @@ more items that fit in the menu, navigation buttons with
 shown, the elements have [literal]#++-off++# suffix. The status bar in the
 bottom that shows the paging status has [literal]#++v-filterselect-status++#
 style.
-
-
-
-
diff --git a/documentation/components/components-selection.asciidoc b/documentation/components/components-selection.asciidoc
index 5c27ac3936..5ad422555d 100644
--- a/documentation/components/components-selection.asciidoc
+++ b/documentation/components/components-selection.asciidoc
@@ -228,13 +228,13 @@ a property of the bean as the caption.
 public class Planet implements Serializable {
     int    id;
     String name;
-    
+
     public Planet(int id, String name) {
         this.id   = id;
         this.name = name;
     }
 
-    ... setters and getters ...    
+    ... setters and getters ...
 }
 
 public void captionproperty(VerticalLayout layout) {
@@ -299,7 +299,7 @@ event, accessible with the [methodname]#getProperty()# method.
 // Create a selection component with some items
 ComboBox select = new ComboBox("My Select");
 select.addItems("Io", "Europa", "Ganymedes", "Callisto");
-        
+
 // Handle selection change
 select.addValueChangeListener(event -> // Java 8
     layout.addComponent(new Label("Selected " +
@@ -319,7 +319,7 @@ image::img/select-selected1.png[]
 
 Some selection components can allow the user to add new items. Currently, only
 [classname]#ComboBox# allows it, when the user types in a value and presses
-Enter. You need to enable the mode with [methodname]#setNewItemsAllowed(true)#.
+kbd:[Enter]. You need to enable the mode with [methodname]#setNewItemsAllowed(true)#.
 Setting the component also in immediate mode may be necessary, as otherwise the
 item would not be added immediately when the user interacts with the component,
 but after some other component causes a server
@@ -337,7 +337,7 @@ myselect.setImmediate(true);
 
 The user interface for adding new items depends on the selection component. The
 regular [classname]#ComboBox# component allows you to simply type the new item
-in the combo box and hit Enter to add it.
+in the combo box and hit kbd:[Enter] to add it.
 
 Adding new items is not possible if the selection component is read-only or is
 bound to a [classname]#Container# that does not allow adding new items. An
@@ -373,10 +373,10 @@ container.addItem(new Planet(4, "Mars"));
 final ComboBox select =
     new ComboBox("Select or Add a Planet", container);
 select.setNullSelectionAllowed(false);
-        
+
 // Use the name property for item captions
 select.setItemCaptionPropertyId("name");
-        
+
 // Allow adding new items
 select.setNewItemsAllowed(true);
 select.setImmediate(true);
@@ -388,10 +388,10 @@ select.setNewItemHandler(new NewItemHandler() {
         // Create a new bean - can't set all properties
         Planet newPlanet = new Planet(0, newItemCaption);
         container.addBean(newPlanet);
-        
+
         // Remember to set the selection to the new item
         select.select(newPlanet);
-        
+
         Notification.show("Added new planet called " +
                           newItemCaption);
     }
@@ -462,7 +462,3 @@ however, that icons are not supported in [classname]#NativeSelect#,
 [classname]#TwinColSelect#, and some other selection components and modes. This
 is because HTML does not support images inside the native [literal]#++select++#
 elements. Icons are also not really visually applicable.
-
-
-
-
diff --git a/documentation/components/components-table.asciidoc b/documentation/components/components-table.asciidoc
index 7ef31e29fb..e39e85079a 100644
--- a/documentation/components/components-table.asciidoc
+++ b/documentation/components/components-table.asciidoc
@@ -140,13 +140,12 @@ selection.
 === Multiple Selection Mode
 
 A table can also be in __multiselect__ mode, where a user can select multiple
-items by clicking them with left mouse button while holding the Ctrl key (or
-Meta key) pressed. If Ctrl is not held, clicking an item will select it and
+items by clicking them with left mouse button while holding the kbd:[Ctrl] key (or kbd:[Meta] key) pressed. If kbd:[Ctrl] is not held, clicking an item will select it and
 other selected items are deselected. The user can select a range by selecting an
-item, holding the Shift key pressed, and clicking another item, in which case
+item, holding the kbd:[Shift] key pressed, and clicking another item, in which case
 all the items between the two are also selected. Multiple ranges can be selected
-by first selecting a range, then selecting an item while holding Ctrl, and then
-selecting another item with both Ctrl and Shift pressed.
+by first selecting a range, then selecting an item while holding kbd:[Ctrl], and then
+selecting another item with both kbd:[Ctrl] and kbd:[Shift] pressed.
 
 The multiselect mode is enabled with the [methodname]#setMultiSelect()# method
 of the [classname]#AbstractSelect# superclass of [classname]#Table#. Setting
@@ -155,8 +154,8 @@ must be set separately.
 
 The [methodname]#setMultiSelectMode()# property affects the control of multiple
 selection: [parameter]#MultiSelectMode.DEFAULT# is the default behaviour, which
-requires holding the Ctrl (or Meta) key pressed while selecting items, while in
-[parameter]#MultiSelectMode.SIMPLE# holding the Ctrl key is not needed. In the
+requires holding the kbd:[Ctrl] (or kbd:[Meta]) key pressed while selecting items, while in
+[parameter]#MultiSelectMode.SIMPLE# holding the kbd:[Ctrl] key is not needed. In the
 simple mode, items can only be deselected by clicking them.
 
 
@@ -199,7 +198,7 @@ table.addColumnResizeListener(new Table.ColumnResizeListener(){
     public void columnResize(ColumnResizeEvent event) {
         // Get the new width of the resized column
         int width = event.getCurrentWidth();
-        
+
         // Get the property ID of the resized column
         String column = (String) event.getPropertyId();
 
@@ -207,7 +206,7 @@ table.addColumnResizeListener(new Table.ColumnResizeListener(){
         table.setColumnFooter(column, String.valueOf(width) + "px");
     }
 });
-        
+
 // Must be immediate to send the resize events immediately
 table.setImmediate(true);
 ----
@@ -253,7 +252,7 @@ try {
     // Can't occur - collapsing was allowed above
     System.err.println("Something horrible occurred");
 }
-        
+
 // Give enough width for the table to accommodate the
 // initially collapsed column later
 table.setWidth("250px");
@@ -316,15 +315,15 @@ for (int i=0; i<100; i++) {
                    new Object[] {new Double(Math.random()*1000)}),
                                ContentMode.HTML);
     CheckBox transferredField = new CheckBox("is transferred");
-    
-    // Multiline text field. This required modifying the 
+
+    // Multiline text field. This required modifying the
     // height of the table row.
     TextField commentsField = new TextField();
     commentsField.setRows(3);
-    
+
     // The Table item identifier for the row.
     Integer itemId = new Integer(i);
-    
+
     // Create a button and handle its click. A Button does not
     // know the item it is contained in, so we have to store the
     // item ID as user-defined data.
@@ -336,10 +335,10 @@ for (int i=0; i<100; i++) {
             Integer iid = (Integer)event.getButton().getData();
             Notification.show("Link " +
                               iid.intValue() + " clicked.");
-        } 
+        }
     });
     detailsField.addStyleName("link");
-    
+
     // Create the table row.
     table.addItem(new Object[] {sumField, transferredField,
                                 commentsField, detailsField},
@@ -478,8 +477,8 @@ ifdef::web[]
 
 In the editable mode, the editor fields can have focus. Pressing Tab moves the
 focus to next column or, at the last column, to the first column of the next
-item. Respectively, pressing ShiftTab moves the focus backward. If the focus is
-in the last column of the last visible item, the pressing Tab moves the focus
+item. Respectively, pressing kbd:[Shift+Tab] moves the focus backward. If the focus is
+in the last column of the last visible item, the pressing kbd:[Tab] moves the focus
 outside the table. Moving backward from the first column of the first item moves
 the focus to the table itself. Some updates to the table, such as changing the
 headers or footers or regenerating a column, can move the focus from an editor
@@ -488,7 +487,7 @@ component to the table itself.
 The default behaviour may be undesirable in many cases. For example, the focus
 also goes through any read-only editor fields and can move out of the table
 inappropriately. You can provide better navigation is to use event handler for
-shortcut keys such as Tab, Arrow Up, Arrow Down, and Enter.
+shortcut keys such as kbd:[Tab], kbd:[Arrow Up], kbd:[Arrow Down], and kbd:[Enter].
 
 
 [source, java]
@@ -523,7 +522,7 @@ class KbdHandler implements Handler {
             // On enter, just stay where you were. If we did
             // not catch the enter action, the focus would be
             // moved to wrong place.
-            
+
             if (itemid >= 0 && itemid < table.size()) {
                 TextField newTF = valueFields.get(itemid);
                 if (newTF != null)
@@ -568,17 +567,17 @@ table.setTableFieldFactory(new TableFieldFactory () {
     public Field createField(Container container, Object itemId,
             Object propertyId, Component uiContext) {
         TextField field = new TextField((String) propertyId);
-        
+
         // User can only edit the numeric column
         if ("Source of Fear".equals(propertyId))
             field.setReadOnly(true);
         else { // The numeric column
             // The field needs to know the item it is in
             field.setData(itemId);
-            
+
             // Remember the field
             valueFields.put((Integer) itemId, field);
-            
+
             // Focus the first editable value
             if (((Integer)itemId) == 0)
                 field.focus();
@@ -650,7 +649,7 @@ The following example shows how to calculate average of the values in a column:
 Table table = new Table("Custom Table Footer");
 table.addContainerProperty("Name", String.class, null);
 table.addContainerProperty("Died At Age", Integer.class, null);
-        
+
 // Insert some data
 Object people[][] = { {"Galileo",  77},
                       {"Monnier",  83},
@@ -658,7 +657,7 @@ Object people[][] = { {"Galileo",  77},
                       {"Oterma",   86}};
 for (int i=0; i<people.length; i++)
     table.addItem(people[i], new Integer(i));
-        
+
 // Calculate the average of the numeric column
 double avgAge = 0;
 for (int i=0; i<people.length; i++)
@@ -706,7 +705,7 @@ table.addHeaderClickListener(new Table.HeaderClickListener() {
                 "with " + event.getButtonName());
     }
 });
-        
+
 // Disable the default sorting behavior
 table.setSortDisabled(true);
 ----
@@ -723,7 +722,7 @@ the mouse button with which the click was made: [parameter]#BUTTON_LEFT#,
 [methodname]#getButtonName()# a human-readable button name in English: "
 [parameter]#left#", " [parameter]#right#", or " [parameter]#middle#". The
 [methodname]#isShiftKey()#, [methodname]#isCtrlKey()#, etc., methods indicate if
-the Shift, Ctrl, Alt or other modifier keys were pressed during the click.
+the kbd:[Shift], kbd:[Ctrl], kbd:[Alt] or other modifier keys were pressed during the click.
 
 Clicks in the footer cause a [classname]#FooterClickEvent#, which you can handle
 with a [classname]#Table.FooterClickListener#. Footers do not have any default
@@ -787,7 +786,7 @@ class ValueColumnGenerator implements Table.ColumnGenerator {
         if (prop.getType().equals(Double.class)) {
             Label label = new Label(String.format(format,
                     new Object[] { (Double) prop.getValue() }));
-            
+
             // Set styles for the column: one indicating that it's
             // a value and a more specific one with the column
             // name in it. This assumes that the column name
@@ -878,7 +877,7 @@ editable.setImmediate(true);
 editable.addClickListener(new ClickListener() {
     public void buttonClick(ClickEvent event) {
         table.setEditable(editable.booleanValue());
-        
+
         // The columns may not be generated when we want to
         // have them editable.
         if (editable.booleanValue()) {
@@ -917,10 +916,10 @@ public class ImmediateFieldFactory extends DefaultFieldFactory {
         // Let the DefaultFieldFactory create the fields...
         Field field = super.createField(container, itemId,
                                         propertyId, uiContext);
-        
+
         // ...and just set them as immediate.
         ((AbstractField)field).setImmediate(true);
-        
+
         return field;
     }
 }
@@ -980,10 +979,10 @@ final Table table = new Table("Formatted Table") {
         return super.formatPropertyValue(rowId, colId, property);
     }
 };
-        
+
 // The table has some columns
 table.addContainerProperty("Time", Date.class, null);
-        
+
 ... Fill the table with data ...
 ----
 
@@ -1081,7 +1080,7 @@ table.addItem(new Object[]{
 table.addItem(new Object[]{
     "2", "P", "P", "P", "P", "P", "P", "P", "P"}, new Integer(1));
 for (int i=2; i<6; i++)
-    table.addItem(new Object[]{String.valueOf(i+1), 
+    table.addItem(new Object[]{String.valueOf(i+1),
                  "", "", "", "", "", "", "", ""}, new Integer(i));
 table.addItem(new Object[]{
     "7", "P", "P", "P", "P", "P", "P", "P", "P"}, new Integer(6));
@@ -1098,11 +1097,11 @@ table.setCellStyleGenerator(new Table.CellStyleGenerator() {
 
         int row = ((Integer)itemId).intValue();
         int col = Integer.parseInt((String)propertyId);
-        
+
         // The first column.
         if (col == 0)
             return "rowheader";
-        
+
         // Other cells.
         if ((row+col)%2 == 0)
             return "black";
@@ -1160,5 +1159,3 @@ endif::web[]
 
 
 (((range="endofrange", startref="term.components.table")))
-
-
diff --git a/documentation/getting-started/getting-started-first-project.asciidoc b/documentation/getting-started/getting-started-first-project.asciidoc
index 318279924b..d30e8c5187 100644
--- a/documentation/getting-started/getting-started-first-project.asciidoc
+++ b/documentation/getting-started/getting-started-first-project.asciidoc
@@ -236,7 +236,7 @@ a web.xml Deployment Descriptor">>.
 == Coding Tips for Eclipse
 
 One of the most useful features in Eclipse is __code completion__. Pressing
-CtrlSpace in the editor will display a popup list of possible class name and
+kbd:[Ctrl+Space] in the editor will display a pop-up list of possible class name and
 method name completions, as shown in
 <<figure.getting-started.first-project.coding.codecompletion>>, depending on the
 context of the cursor position.
@@ -246,7 +246,7 @@ context of the cursor position.
 image::img/codingtips-codecompletion.png[]
 
 To add an [literal]#++import++# statement for a class, such as
-[classname]#Button#, simply press CtrlShiftO or click the red error indicator on
+[classname]#Button#, simply press kbd:[Ctrl+Shift+O] or click the red error indicator on
 the left side of the editor window. If the class is available in multiple
 packages, a list of the alternatives is displayed, as shown in
 <<figure.getting-started.first-project.coding.import>>. For server-side
@@ -321,7 +321,3 @@ Above, we described how to debug a server-side application. Debugging
 client-side applications and widgets is described in
 <<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging
 Client-Side Code">>.
-
-
-
-
diff --git a/documentation/getting-started/getting-started-scala.asciidoc b/documentation/getting-started/getting-started-scala.asciidoc
index 1da94d0853..bfd91cc256 100644
--- a/documentation/getting-started/getting-started-scala.asciidoc
+++ b/documentation/getting-started/getting-started-scala.asciidoc
@@ -31,7 +31,7 @@ using Scala IDE, you can copy it from somewhere under your Eclipse installation
 to the class path of the web application, that is, either to the
 [filename]#WebContent/WEB-INF/lib# folder in the project or to the library path
 of the application server. If copying outside Eclipse to a project, refresh the
-project by selecting it and pressing F5.
+project by selecting it and pressing kbd:[F5].
 
 +
 You could also get it with an Ivy or Maven dependency, just make sure that the
@@ -63,7 +63,7 @@ class MyScalaUI extends UI {
 ----
 
 Eclipse and Scala IDE should be able to import the Vaadin classes automatically
-when you press CtrlShiftO.
+when you press kbd:[Ctrl+Shift+O].
 
 You need to define the Scala UI class either in a servlet class (in Servlet 3.0
 project) or in a [filename]#web.xml# deployment descriptor, just like described
@@ -108,6 +108,3 @@ content addComponent new Button("Click Me!",
 ----
 
 endif::web[]
-
-
-