Added support for font images

This commit adds:

 * makes the generator inspect a given font and extract needed
   information about glyphs and their aspect ratio
 * support for managed webfonts in qx.ui.basic.Image
 * support for managed webfonts in qx.ui.table.cellrenderer.Image
 * extends the Image demo in the demobrowser
 * adds a new IconFont demo in the demobrowser
 * adds some documentation for using font images

application/demobrowser/.gitignore

@@ -1,3 +1,4 @@
+/cache/
 /api/
 /build/
 /test/

application/demobrowser/config.json

@@ -28,6 +28,9 @@
     },
     {
       "path" : "image.json"
+    },
+    {
+      "path" : "fonts.json"
     }
   ],
 
@@ -50,7 +53,8 @@
     "translation",
     "migration",
     "validate-config",
-    "validate-manifest"
+    "validate-manifest",
+    "make-font-map"
   ],
 
   "default-job" : "source",

application/demobrowser/fonts.json

@@ -0,0 +1,29 @@
+// call only through config.json, for macro settings
+{
+  "jobs" :
+  {
+    "make-font-map" :
+    {
+      "desc" : "Build a font mapping from glyphname to unicode id",
+
+      "let" :
+      {
+        "RESPATH" : "./source/resource",
+        "QXRESPATH" : "${QOOXDOO_PATH}/framework/source/resource"
+      },
+
+      "font-map" :
+      {
+        "fonts" :
+        {
+          "${RESPATH}/demobrowser/demo/fonts/fontawesome-webfont.ttf" :
+          {
+            "prefix": [ "${RESPATH}" ],
+            "alias" : "FontAwesome",
+            "size" : 40
+          }
+        }
+      }
+    }
+  }
+}

application/demobrowser/source/class/demobrowser/demo/showcase/IconFont.js

@@ -0,0 +1,136 @@
+/* ************************************************************************
+
+   qooxdoo - the new era of web development
+
+   http://qooxdoo.org
+
+   Copyright:
+     2016 GONICUS Gmbh, Germany, http://www.gonicus.de
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+     See the LICENSE file in the project's top-level directory for details.
+
+   Authors:
+     * Cajus Pollmeier (cajus)
+
+************************************************************************ */
+/* ************************************************************************
+
+
+************************************************************************ */
+
+/**
+ * This is the main application class of your custom application "showcase_i18n"
+ *
+ * @tag showcase
+ *
+ * @asset(demobrowser/demo/fonts/fontawesome-webfont*)
+ * @asset(qx/icon/${qx.icontheme}/16/*)
+ */
+qx.Class.define("demobrowser.demo.showcase.IconFont",
+{
+  extend : qx.application.Standalone,
+
+
+  /*
+  *****************************************************************************
+     MEMBERS
+  *****************************************************************************
+  */
+
+  members :
+  {
+    _table : null,
+    _container : null,
+
+    /**
+     * This method contains the initial application code and gets called
+     * during startup of the application
+     */
+    main : function()
+    {
+      // Call super class
+      this.base(arguments);
+
+      this._initFont();
+
+      /* Set locale to english to avoid language mix if browser locale is
+       * non-english. */
+      qx.locale.Manager.getInstance().setLocale("en");
+
+      this._container = new qx.ui.window.Window("Icon table for FontAwesome", "icon/16/apps/office-spreadsheet.png").set({
+        width: 600,
+        height: 400,
+        contentPadding : [ 0, 0, 0, 0 ],
+        showClose: false,
+        showMinimize: false
+      });
+      this._container.setLayout(new qx.ui.layout.VBox());
+      this._container.open();
+
+      this.getRoot().add(this._container, {left: 50, top: 10});
+
+      this._table = this._createTable();
+
+      this._container.add(this._table, {flex: 1});
+    },
+
+    _createTable : function()
+    {
+      // table model
+      var tableModel = new qx.ui.table.model.Simple();
+      tableModel.setColumns([ "Unicode", "Glyph", "Image" ]);
+
+      var res = qx.$$resources;
+
+      var rowData = [];
+      for (var key in res) {
+        if (res.hasOwnProperty(key) && key.startsWith("@FontAwesome/")) {
+          rowData.push([ "0x" + res[key][2].toString(16), key.split("/")[1], key]);
+        }
+      }
+
+      tableModel.setData(rowData);
+
+      var table = new qx.ui.table.Table(tableModel);
+      var renderer = new qx.ui.table.cellrenderer.Image(16, 16);
+      table.getTableColumnModel().setDataCellRenderer(2, renderer);
+
+      return table;
+    },
+
+    _initFont : function()
+    {
+      var currentFont = qx.theme.manager.Font.getInstance().getTheme();
+
+      // Add font definitions
+      var config = {
+        fonts: {
+          "FontAwesome": {
+            size: 40,
+            lineHeight: 1,
+            comparisonString : "\uf1e3\uf1f7\uf11b\uf19d",
+            family: ["FontAwesome"],
+            sources: [
+              {
+                family: "FontAwesome",
+                source: [
+                  "demobrowser/demo/fonts/fontawesome-webfont.ttf" , "demobrowser/demo/fonts/fontawesome-webfont.woff"
+                ]
+              }
+            ]
+          }
+        }
+      };
+
+      qx.Theme.define("demobrowser.theme.icon.Font", config);
+      qx.Theme.include(currentFont, demobrowser.theme.icon.Font);
+    }
+  },
+
+  destruct : function() {
+    this._disposeObjects("_table", "_container");
+  }
+});
+

application/demobrowser/source/class/demobrowser/demo/widget/Image.js

@@ -24,6 +24,7 @@
 /**
  *
  * @asset(demobrowser/demo/icons/multimedia-player.png)
+ * @asset(demobrowser/demo/fonts/fontawesome-webfont*)
  * @asset(qx/icon/${qx.icontheme}/32/actions/format-*)
  * @asset(qx/icon/${qx.icontheme}/32/actions/go-home.png)
  */
@@ -38,6 +39,8 @@ qx.Class.define("demobrowser.demo.widget.Image",
     {
       this.base(arguments);
 
+      this._initFont();
+
       var layout = new qx.ui.layout.HBox();
       layout.setSpacing(20);
 
@@ -64,6 +67,12 @@ qx.Class.define("demobrowser.demo.widget.Image",
       big.setHeight(64);
       container.add(big);
 
+      var font = new qx.ui.basic.Image("@FontAwesome/heart");
+      font.setScale(true);
+      font.setWidth(64);
+      font.setHeight(64);
+      container.add(font);
+
       var external = new qx.ui.basic.Image("http://resources.qooxdoo.org/images/logo.gif");
       container.add(external);
 
@@ -82,6 +91,34 @@ qx.Class.define("demobrowser.demo.widget.Image",
       });
 
       this.getRoot().add(btn, {left:20, top:180});
+    },
+
+    _initFont : function()
+    {
+      var currentFont = qx.theme.manager.Font.getInstance().getTheme();
+
+      // Add font definitions
+      var config = {
+        fonts: {
+          "FontAwesome": {
+            size: 40,
+            lineHeight: 1,
+            comparisonString : "\uf1e3\uf1f7\uf11b\uf19d",
+            family: ["FontAwesome"],
+            sources: [
+              {
+                family: "FontAwesome",
+                source: [
+                  "demobrowser/demo/fonts/fontawesome-webfont.ttf" , "demobrowser/demo/fonts/fontawesome-webfont.woff"
+                ]
+              }
+            ]
+          }
+        }
+      };
+
+      qx.Theme.define("demobrowser.theme.icon.Font", config);
+      qx.Theme.include(currentFont, demobrowser.theme.icon.Font);
     }
   }
 });

application/demobrowser/source/demo/showcase/IconFont.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <script type="text/javascript" src="../helper.js"></script>
+</head>
+<body>
+
+</body>
+</html>

documentation/manual/source/pages/development.rst

@@ -103,6 +103,7 @@ Miscellaneous
    :maxdepth: 2
 
    development/image_clipping_and_combining
+   development/icon_fonts
    development/reporting_bugs
    development/aspects_template
    development/internet_explorer_specific_settings