Using Clarity inside my UI Framework

During my last activities as developer I build from scratch a JS framework, that simplify the HTML5 UI user experience: I named this Linoproject UI (https://github.com/linoproject/ui). After my last participation to the Hackathon at VMworld 2017 EU, I described here how I “hacked” Clarity, the UI framework made for latest VMware GUIs.

The Linoproject UI

This framework is made on jQuery (my favorite JS lib) with some extensions (like Cookies and OOP). The idea around this project is to animate HTML page using common tags like SPAN, A, DIV with the use of special class attribute (x-linoprj). In this way is every HTML5 designer can realize a complex widget oriented UI without coding in JavaScript.

As documented here, is pretty easy to implement in your code, simply:

1. Pull the framework using git clone
2. Purge all unnecessary directories and file keeping the following:
   1. lib directory (the real framework)
   2. CSS directory (the main CSS files)
   3. theme directory (your theme composed by images, CSS and JavaScript files)
3. Include into HTML code: include jQuery, OOP and Application lib, then every widget, CSS or external library will be dynamically loaded and instantiated using the “x-lprjvar-ExternalLib” directive.

Practically, the HEAD tags must be like this:

then the main variables included the other libraries should be declared between SPAN x-lprjstartup TAG:

Let’s explain the meaning of the variables declared after x-lprjvar-:

• ApplicationName: obviously the name of the application
• Page: the name of the page. This being used if a custom js object is included for further behaviour customization out of the framework.
• DirApp: the application directory where to place custom js code.
• DirLib: the ui framework lib directory (default is ./lib)
• DirWidget: the widget framework directory.
• Debug: enable/disable console.log content

All external CSS and JS are declared as ExternalLib or ExternalCSS simply specifying relative path inside SPAN tags. In this example the bootstrap library is included with loading plugin.

If you want to start using widget simply provide special class x-lprjwdg-[widgetname].

To conclude this little tour on UI framework, it’s important to know that every widget lives in a global space and is available for interaction from widget element or JavaScript code. There are 2+1 ways to interact:

• reaction from other widget such as a click on button

• via custom JavaScript using global

• via debug console (every browser has one) simply using displaying the global variable oGlobal

And now… Clarity!

Clarity is a front end framework made by VMware staff and released publicly via GitHub which has two ways to work:

• as a pure HTML/CSS/JS framework
• as Angular 1.0/2.0 extension

The integration with Linoproject UI framework is realized using NPM (NodeJS) and downloading all necessary files with the following command:

Under node_modules you should find a @clr and @webcomponents directories with relative subdirectory and files.

Finally to use Clarity inside Linoproject UI framework, according with the official documentation, just insert the necessary files in the startup declaration (inside x-lprjstartup):

Enjoy!

Disclaimer: Linoproject UI framework is still under development. Be careful using in production.

Salva