# Playground

Playground is an APP used for jqx-elements testing. It is based on jQWidgets and jqx-elements. Playground is created especially for test purposes.

# Requirements

  - internet connection
  - OS Windows
  - NodeJS
  - Chrome browser
  - installed jqx-elements NPM package

# Installation & Start

  - Double click start-playground.bat :
  If the App is started for the first time, it loads and stores all required files into a subdirectory. When all required files are loaded, Playground starts its own server and opens http://localhost/ in the Chrome browser.

# How to work with Playground

### Interface
Once, when Playground is started the user could see jqxSplitter with few panels. 
 - On the left is positioned the menu with all available elements for testing. Click on element loads it in the test area. Bottom are stored two checkboxes. With firs one the menu could be sorted. The second controls which base CSS file should be used. By default, it's the file without variables. On checked jqx.base.css is replaced with jqx.base-vars.css. After this checkbox is placed status element, displayed CSS variables support in the test browser. If it's green - browser supports CSS variables. If is red - CSS variables are not supported. On hover, also is displayed a small tooltip with this state.
 - On the right is positioned jqx-grid where is loaded the list with the properties of the chosen element.
 - In the middle is test area. There are loaded elements. The user could interact with each element and test it.
 - In the bottom part of the splitter is displayed the code of the widget's moment state. This code contains element's open and close tags plus currently used attributes. For example: 
 ``` <jqx-numeric-text-box significant-digits="8" min="-2147483648" max="2147483647"></jqx-numeric-text-box>```
For facilitation, this content is highlighted.

### Testing
- First, choose an element to test with click on it's name. 
- Element is loaded in the middle panel
- Elements properties are on right
- Interact with the element
- Change the value of a particular property. 
In 'Default Value' column, the user could change all boolean values and these properties with a number of allowed values. This could happen via dropdown. All other properties are locked for editing in this column.
In 'Value' column could be set random value for each element. This allows the user to enter both valid and invalid values and test the behavior of the element in many random cases.
 - The grid with the properties contains also two additional rows about width and height. Pay attention that they are inline of the tested element and are not related to the other properties(they are in red for better separation from the others). Width and height could be set with different units. If the user forgets to set exact unit, Playground sets these dimensions in pixels.
 - If you want to test another element - choose it from the menu. All setting of the previous will be removed and the new on will be initialized with default settings.
 
# Custom Notes
- Element's settings also could be changed via Chrome's inspector
- When the server is working, Playground could be used on multiple browsers. To test in a different browser just start localhost on it.
- It's good practice to open the browser's console when you are testing and check for errors.
- If is thrown an error, that may produce malfunction of the Playground app. If this happens - just refresh the page.