sqv

qooxdoo themes and more for qx.Desktop applications
Included in this package:

• CLEAN - A flat qx.Desktop theme that promotes simplicity, open spaces, crisp edges and bright colors
• FontAwesome for qx.Desktop - Font Icons for qooxdoo Desktop web applications
• Demos - Clean theme with FontAwesome icons at the top

CLEAN

• A theme for qx.Desktop applications
• It's objective is to live up to it's name
• Inspired by Semantic UI

FontAwesome for qx.Desktop

The fully integrated way of using Font Icons in your qx.Desktop application.

To use:

Step 1 Download sqv

Step 2 Download the latest FontAwesome zip file from the FontAwesome github site - http://fortawesome.github.io/Font-Awesome/

Step 3 Copy the contents of the FontAwesome "fonts" folder to the empty "sqv\source\resource\sqv\fonts\FontAwesome" folder

Step 4 Link sqv to your qx.Desktop project as a library by adding the following library entry to your app's config.json file:

"library" :
  [
    {
      "manifest" : "${QOOXDOO_PATH}/application/sqv/Manifest.json"
    }
  ]

Step 5 Add the following lines of qooxdoo code to the start of the main function of your application (replace "sqv.theme.clean.Appearance|Decoration|Font" with the class names of the theme your app is currently using)

// Add font and text properties to the qx Image widget
qx.Class.include(qx.ui.basic.Image, sqv.ui.basic.MImage);

// Add the beforeContent property to the Decorator class
qx.Class.include(qx.ui.decoration.Decorator, sqv.ui.decoration.MBeforeContent);

// Add FontAwesome specific Appearance, Decoration and Font entries to the current theme 
qx.Theme.include(sqv.theme.clean.Appearance, sqv.fonticon.FontAwesome.Appearance);
qx.Theme.include(sqv.theme.clean.Decoration, sqv.fonticon.FontAwesome.Decoration);
qx.Theme.include(sqv.theme.clean.Font, sqv.fonticon.FontAwesome.Font);

Step 6 Add the following config entry (add-css) into sqv's config.json file, common entry (12/28/2017 - removed since this is an alternative to the qx @font implemention of font icons). This will bring in the necessary fontawesome css classes:

"common" :
  {
    "add-css" :
    [
        {
          "uri" : "resource/sqv/css/font-awesome.min.css"
        }
    ]
  }

Step 7 Run "generate.py source" in the command line to link the sqv project files to your application

Step 8 Create an image in your application and set its appearance property to "fa-search"

//stand alone icon example
var faiconsearch = new qx.ui.basic.Image().set({appearance:"fa-search"});

//example button with a fonticon
//the appearance "search-button" is an example appearance found in sqv.iconfont.FontAwesome.Appearance
var button = new qx.ui.form.Button("Icon Button", "");
button.setAppearance("search-button");

Step 9 Run your project and see the results

Demos

Clean Theme (with FontAwesome icons) for qx.Desktop: http://sqville.com/examples/qxthemes/clean/index.html

License

All sqv code can be used under the terms of the MIT License