JSLibsUI

(Difference between revisions)
(Created page with '<pre> +-----------------------------------------------------------------------------------+ | Project Properties …')
Line 1: Line 1:
-
<pre>
+
== JavaScript Libraries Customiser ==
 +
Current UI supports downloading libraries from CDNJS. As we are going to support Bower and Npm, this customiser need to be reworked:
 +
<pre>
  +-----------------------------------------------------------------------------------+
  +-----------------------------------------------------------------------------------+
-
  |                     Project Properties                                           |
+
  |                               Project Properties                                 |
  |+------------------------+                                                        |
  |+------------------------+                                                        |
  || * Sources              |  CDNJS Libraries:                                      |
  || * Sources              |  CDNJS Libraries:                                      |
Line 20: Line 22:
  ||                        |                  +-------------------------+  +------+|
  ||                        |                  +-------------------------+  +------+|
  |+------------------------+                                                        |
  |+------------------------+                                                        |
-
  +-----------------------------------------------------------------------------------+
+
  +-----------------------------------------------------------------------------------+</pre>
-
</pre>
+
 
 +
When user invokes [Add] button. Following dialog will allow to search and download requested javascript library.
<pre>
<pre>
 +
+--------------------------------------------------------------------------------+
 +
|                                CDNS Libraries                                |
 +
|        +---------------------------------------------------------------------+|
 +
|  Search:|jquery                                                              ||
 +
|        +---------------------------------------------------------------------+|
 +
|                                Description:                                  |
 +
|  +----------------------------+ +---------------------------------------------+|
 +
|  |jquery                      | |  jQuery is a fast and concise JavaScript    ||
 +
|  |jquery-mobile              | |  Library that simplifies HTML document      ||
 +
|  |                            | |  traversing, event handling, animating,    ||
 +
|  |                            | |  and Ajax interactions for rapid web        ||
 +
|  |                            | |  development. jQuery is designed to change  ||
 +
|  |                            | |  the way that you write JavaScript          ||
 +
|  |                            | |                                            ||
 +
|  |                            | |                                            ||
 +
|  |                            | |                                            ||
 +
|  |                            | |                                            ||
 +
|  |                            | |                                            ||
 +
|  |                            | |                                            ||
 +
|  |                            | |                                            ||
 +
|  |                            | |                                            ||
 +
|  |                            | |                                            ||
 +
|  |                            | +---------------------------------------------+|
 +
|  |                            |          +-----------------------------------+|
 +
|  |                            |  Version: |1.4.3                            V||
 +
|  +----------------------------+          +-----------------------------------+|
 +
|                                                                  +-----------+|
 +
|                                                                  |Add Library||
 +
|                                                                  +-----------+|
 +
+--------------------------------------------------------------------------------+</pre>
-
+--------------------------------------------------------------------------------+
+
Bower customiser is very similar.
-
|                          CDNS Libraries                                        |
+
-
|        +---------------------------------------------------------------------+|
+
-
|  Search:|jquery                                                              ||
+
-
|        +---------------------------------------------------------------------+|
+
-
|                                Description:                                  |
+
-
|  +----------------------------+ +---------------------------------------------+|
+
-
|  |jquery                      | |  jQuery is a fast and concise JavaScript    ||
+
-
|  |jquery-mobile              | |  Library that simplifies HTML document      ||
+
-
|  |                            | |  traversing, event handling, animating,    ||
+
-
|  |                            | |  and Ajax interactions for rapid web        ||
+
-
|  |                            | |  development. jQuery is designed to change  ||
+
-
|  |                            | |  the way that you write JavaScript          ||
+
-
|  |                            | |                                            ||
+
-
|  |                            | |                                            ||
+
-
|  |                            | |                                            ||
+
-
|  |                            | |                                            ||
+
-
|  |                            | |                                            ||
+
-
|  |                            | |                                            ||
+
-
|  |                            | |                                            ||
+
-
|  |                            | |                                            ||
+
-
|  |                            | |                                            ||
+
-
|  |                            | +---------------------------------------------+|
+
-
|  |                            |          +-----------------------------------+|
+
-
|  |                            |  Version: |1.4.3                            V||
+
-
|  +----------------------------+          +-----------------------------------+|
+
-
|                                                                  +-----------+|
+
-
|                                                                  |Add Library||
+
-
|                                                                  +-----------+|
+
-
+--------------------------------------------------------------------------------+
+
-
</pre>
+
<pre>
<pre>
  +-----------------------------------------------------------------------------------+
  +-----------------------------------------------------------------------------------+
-
  |                     Project Properties                                           |
+
  |                                 Project Properties                               |
  |+------------------------+                                                        |
  |+------------------------+                                                        |
  || * Sources              |  Bower Packages :                                      |
  || * Sources              |  Bower Packages :                                      |
Line 77: Line 80:
  ||                        |            +-------------------------------+  +------+|
  ||                        |            +-------------------------------+  +------+|
  |+------------------------+                                                        |
  |+------------------------+                                                        |
-
  +-----------------------------------------------------------------------------------+
+
  +-----------------------------------------------------------------------------------+</pre>
-
</pre>
+
Add button will allow to install bower packages using following dialog.
-
 
+
<pre>
<pre>
  +--------------------------------------------------------------------------------+
  +--------------------------------------------------------------------------------+
-
  |                         Bower Packages                                         |
+
  |                                 Bower Packages                                 |
  |        +---------------------------------------------------------------------+|
  |        +---------------------------------------------------------------------+|
  |  Search:|jquery                                                              ||
  |  Search:|jquery                                                              ||
Line 98: Line 100:
  |  |                            | |                                            ||
  |  |                            | |                                            ||
  |  |                            | |                                            ||
  |  |                            | |                                            ||
-
  |  |                            | |                                            |
+
  |  |                            | |                                            ||
  |  |                            | |                                            ||
  |  |                            | |                                            ||
  |  |                            | +---------------------------------------------+|
  |  |                            | +---------------------------------------------+|
Line 104: Line 106:
  |  |                            |  Version:    |1.4.3                          V||
  |  |                            |  Version:    |1.4.3                          V||
  |  |                            |              +--------------------------------+|
  |  |                            |              +--------------------------------+|
 +
|  |                            |  [ ] Save Dependencies (--save)                |
 +
|  |                            |  [ ] Save devDependencies (--save-dev)        |
  |  |                            |              +--------------------------------+|
  |  |                            |              +--------------------------------+|
-
  |  |                            | [ ] Options:| --save                        ||
+
  |  |                            |     Options |                               ||
  |  +----------------------------+              +--------------------------------+|
  |  +----------------------------+              +--------------------------------+|
  |                                                                  +-----------+|
  |                                                                  +-----------+|
  |                                                                  |Install    ||
  |                                                                  |Install    ||
  |                                                                  +-----------+|
  |                                                                  +-----------+|
-
  +--------------------------------------------------------------------------------+
+
  +--------------------------------------------------------------------------------+</pre>
-
</pre>
+
 
 +
And similar approach to npm modules:
<pre>
<pre>
-
  +-----------------------------------------------------------------------------------+
+
+-----------------------------------------------------------------------------------+
-
  |                     Project Properties                                           |
+
|                                 Project Properties                               |
-
  |+------------------------+                                                        |
+
|+------------------------+                                                        |
-
  || * Sources              |  Node Modules:                                          |
+
|| * Sources              |  Node Modules:                                          |
-
  || * CSS Preprocessors    | +-------------------------------------------+  +------+|
+
|| * CSS Preprocessors    | +-------------------------------------------+  +------+|
-
  || * JavaScript Files    | |Library              |  Version  | Latest  |  |Add  ||
+
|| * JavaScript Files    | |Library              |  Version  | Latest  |  |Add  ||
-
  ||  * CDNJS              | +---------------------+-----------+---------+  +------+|
+
||  * CDNJS              | +---------------------+-----------+---------+  +------+|
-
  || ==* NPM ==            | | jQuery-mobile      |  1.1.0    | 1.4.0  |  +------+|
+
|| ==* NPM ==            | | jQuery-mobile      |  1.1.0    | 1.4.0  |  +------+|
-
  ||  * Bower              | |                    |          |        |  |Remove||
+
||  * Bower              | |                    |          |        |  |Remove||
-
  || * Run                  | |                    |          |        |  +------+|
+
|| * Run                  | |                    |          |        |  +------+|
-
  || * Codova              | |                    |          |        |          |
+
|| * Codova              | |                    |          |        |          |
-
  || * JavaScript Testing  | |                    |          |        |          |
+
|| * JavaScript Testing  | |                    |          |        |          |
-
  || * License Headers      | |                    |          |        |          |
+
|| * License Headers      | |                    |          |        |          |
-
  || * Formatting          | |                    |          |        |          |
+
|| * Formatting          | |                    |          |        |          |
-
  ||                        | +-------------------------------------------+          |
+
||                        | +-------------------------------------------+          |
-
  ||                        |                +----------------------------+  +------+|
+
||                        |                +----------------------------+  +------+|
-
  ||                        |  Package File: |package.json                |  |Browse||
+
||                        |  Package File: |package.json                |  |Browse||
-
  ||                        |                +----------------------------+  +------+|
+
||                        |                +----------------------------+  +------+|
-
  |+------------------------+                                                        |
+
|+------------------------+                                                        |
-
  +-----------------------------------------------------------------------------------+
+
+-----------------------------------------------------------------------------------+</pre>
-
</pre>
+
<pre>
<pre>
-
+--------------------------------------------------------------------------------+
+
+--------------------------------------------------------------------------------+
-
|                         Node Modules                                           |
+
|                                   Node Modules                                 |
-
|        +---------------------------------------------------------------------+|
+
|        +---------------------------------------------------------------------+|
-
|  Search:|jquery                                                              ||
+
|  Search:|jquery                                                              ||
-
|        +---------------------------------------------------------------------+|
+
|        +---------------------------------------------------------------------+|
-
|                                Description:                                  |
+
|                                Description:                                  |
-
|  +----------------------------+ +---------------------------------------------+|
+
|  +----------------------------+ +---------------------------------------------+|
-
|  |jquery                      | |  jQuery is a fast and concise JavaScript    ||
+
|  |jquery                      | |  jQuery is a fast and concise JavaScript    ||
-
|  |jquery-mobile              | |  Library that simplifies HTML document      ||
+
|  |jquery-mobile              | |  Library that simplifies HTML document      ||
-
|  |                            | |  traversing, event handling, animating,    ||
+
|  |                            | |  traversing, event handling, animating,    ||
-
|  |                            | |  and Ajax interactions for rapid web        ||
+
|  |                            | |  and Ajax interactions for rapid web        ||
-
|  |                            | |  development. jQuery is designed to change  ||
+
|  |                            | |  development. jQuery is designed to change  ||
-
|  |                            | |  the way that you write JavaScript          ||
+
|  |                            | |  the way that you write JavaScript          ||
-
|  |                            | |                                            ||
+
|  |                            | |                                            ||
-
|  |                            | |                                            ||
+
|  |                            | |                                            ||
-
|  |                            | |                                            ||
+
|  |                            | |                                            ||
-
|  |                            | |                                            ||
+
|  |                            | |                                            ||
-
|  |                            | |                                            |
+
|  |                            | |                                            ||
-
|  |                            | |                                            ||
+
|  |                            | |                                            ||
-
|  |                            | +---------------------------------------------+|
+
|  |                            | +---------------------------------------------+|
-
|  |                            |              +--------------------------------+|
+
|  |                            |              +--------------------------------+|
-
|  |                            |  Version:    |1.4.3                          V||
+
|  |                            |  Version:    |1.4.3                          V||
-
|  |                            |              +--------------------------------+|
+
|  |                            |              +--------------------------------+|
-
  |  |                            |              +--------------------------------+|
+
| |                            |  [ ] Global                                    |
-
|  |                            | [ ] Options:| --save                        ||
+
|  |                            |  [ ] Save Dependencies (--save)                |
-
|  +----------------------------+              +--------------------------------+|
+
|  |                            |  [ ] Save devDependencies (--save-dev)        |
-
|                                                                  +-----------+|
+
|  |                            |              +--------------------------------+|
-
|                                                                  |Install    ||
+
|  |                            |     Options |                               ||
-
|                                                                  +-----------+|
+
|  +----------------------------+              +--------------------------------+|
-
+--------------------------------------------------------------------------------+
+
|                                                                  +-----------+|
-
</pre>
+
|                                                                  |Install    ||
 +
|                                                                  +-----------+|
 +
|                                                                                |
 +
+--------------------------------------------------------------------------------+</pre>

Revision as of 13:03, 27 August 2014

JavaScript Libraries Customiser

Current UI supports downloading libraries from CDNJS. As we are going to support Bower and Npm, this customiser need to be reworked:

 +-----------------------------------------------------------------------------------+
 |                                Project Properties                                 |
 |+------------------------+                                                         |
 || * Sources              |  CDNJS Libraries:                                       |
 || * CSS Preprocessors    | +-------------------------------------------+   +------+|
 || * JavaScript Files     | |Library              |  Version  | Latest  |   |Add   ||
 || ==* CDNJS==            | +---------------------+-----------+---------+   +------+|
 ||   * NPM                | | jQuery-mobile       |  1.1.0    | 1.4.0   |   +------+|
 ||   * Bower              | |                     |           |         |   |Remove||
 || * Run                  | |                     |           |         |   +------+|
 || * Codova               | |                     |           |         |           |
 || * JavaScript Testing   | |                     |           |         |           |
 || * License Headers      | |                     |           |         |           |
 || * Formatting           | |                     |           |         |           |
 ||                        | +-------------------------------------------+           |
 ||                        |                   +-------------------------+   +------+|
 ||                        |  Libraries Folder:|js/libs                  |   |Browse||
 ||                        |                   +-------------------------+   +------+|
 |+------------------------+                                                         |
 +-----------------------------------------------------------------------------------+

When user invokes [Add] button. Following dialog will allow to search and download requested javascript library.

+--------------------------------------------------------------------------------+
|                                 CDNS Libraries                                 |
|         +---------------------------------------------------------------------+|
|  Search:|jquery                                                               ||
|         +---------------------------------------------------------------------+|
|                                 Description:                                   |
|  +----------------------------+ +---------------------------------------------+|
|  |jquery                      | |  jQuery is a fast and concise JavaScript    ||
|  |jquery-mobile               | |  Library that simplifies HTML document      ||
|  |                            | |  traversing, event handling, animating,     ||
|  |                            | |  and Ajax interactions for rapid web        ||
|  |                            | |  development. jQuery is designed to change  ||
|  |                            | |  the way that you write JavaScript          ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | +---------------------------------------------+|
|  |                            |           +-----------------------------------+|
|  |                            |  Version: |1.4.3                             V||
|  +----------------------------+           +-----------------------------------+|
|                                                                   +-----------+|
|                                                                   |Add Library||
|                                                                   +-----------+|
+--------------------------------------------------------------------------------+

Bower customiser is very similar.

 +-----------------------------------------------------------------------------------+
 |                                 Project Properties                                |
 |+------------------------+                                                         |
 || * Sources              |  Bower Packages :                                       |
 || * CSS Preprocessors    | +-------------------------------------------+   +------+|
 || * JavaScript Files     | |Library              |  Version  | Latest  |   |Add   ||
 ||   * CDNJS              | +---------------------+-----------+---------+   +------+|
 ||   * NPM                | | jQuery-mobile       |  1.1.0    | 1.4.0   |   +------+|
 || ==* Bower ==           | |                     |           |         |   |Remove||
 || * Run                  | |                     |           |         |   +------+|
 || * Codova               | |                     |           |         |           |
 || * JavaScript Testing   | |                     |           |         |           |
 || * License Headers      | |                     |           |         |           |
 || * Formatting           | |                     |           |         |           |
 ||                        | +-------------------------------------------+           |
 ||                        |             +-------------------------------+   +------+|
 ||                        |  Bower file:|bower.json                     |   |Browse||
 ||                        |             +-------------------------------+   +------+|
 |+------------------------+                                                         |
 +-----------------------------------------------------------------------------------+

Add button will allow to install bower packages using following dialog.

 +--------------------------------------------------------------------------------+
 |                                 Bower Packages                                 |
 |         +---------------------------------------------------------------------+|
 |  Search:|jquery                                                               ||
 |         +---------------------------------------------------------------------+|
 |                                 Description:                                   |
 |  +----------------------------+ +---------------------------------------------+|
 |  |jquery                      | |  jQuery is a fast and concise JavaScript    ||
 |  |jquery-mobile               | |  Library that simplifies HTML document      ||
 |  |                            | |  traversing, event handling, animating,     ||
 |  |                            | |  and Ajax interactions for rapid web        ||
 |  |                            | |  development. jQuery is designed to change  ||
 |  |                            | |  the way that you write JavaScript          ||
 |  |                            | |                                             ||
 |  |                            | |                                             ||
 |  |                            | |                                             ||
 |  |                            | |                                             ||
 |  |                            | |                                             ||
 |  |                            | |                                             ||
 |  |                            | +---------------------------------------------+|
 |  |                            |              +--------------------------------+|
 |  |                            |  Version:    |1.4.3                          V||
 |  |                            |              +--------------------------------+|
 |  |                            |  [ ] Save Dependencies (--save)                |
 |  |                            |  [ ] Save devDependencies (--save-dev)         |
 |  |                            |              +--------------------------------+|
 |  |                            |      Options |                                ||
 |  +----------------------------+              +--------------------------------+|
 |                                                                   +-----------+|
 |                                                                   |Install    ||
 |                                                                   +-----------+|
 +--------------------------------------------------------------------------------+

And similar approach to npm modules:

 +-----------------------------------------------------------------------------------+
|                                  Project Properties                               |
|+------------------------+                                                         |
|| * Sources              |  Node Modules:                                          |
|| * CSS Preprocessors    | +-------------------------------------------+   +------+|
|| * JavaScript Files     | |Library              |  Version  | Latest  |   |Add   ||
||   * CDNJS              | +---------------------+-----------+---------+   +------+|
|| ==* NPM ==             | | jQuery-mobile       |  1.1.0    | 1.4.0   |   +------+|
||   * Bower              | |                     |           |         |   |Remove||
|| * Run                  | |                     |           |         |   +------+|
|| * Codova               | |                     |           |         |           |
|| * JavaScript Testing   | |                     |           |         |           |
|| * License Headers      | |                     |           |         |           |
|| * Formatting           | |                     |           |         |           |
||                        | +-------------------------------------------+           |
||                        |                +----------------------------+   +------+|
||                        |  Package File: |package.json                |   |Browse||
||                        |                +----------------------------+   +------+|
|+------------------------+                                                         |
+-----------------------------------------------------------------------------------+
+--------------------------------------------------------------------------------+
|                                   Node Modules                                 |
|         +---------------------------------------------------------------------+|
|  Search:|jquery                                                               ||
|         +---------------------------------------------------------------------+|
|                                 Description:                                   |
|  +----------------------------+ +---------------------------------------------+|
|  |jquery                      | |  jQuery is a fast and concise JavaScript    ||
|  |jquery-mobile               | |  Library that simplifies HTML document      ||
|  |                            | |  traversing, event handling, animating,     ||
|  |                            | |  and Ajax interactions for rapid web        ||
|  |                            | |  development. jQuery is designed to change  ||
|  |                            | |  the way that you write JavaScript          ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | |                                             ||
|  |                            | +---------------------------------------------+|
|  |                            |              +--------------------------------+|
|  |                            |  Version:    |1.4.3                          V||
|  |                            |              +--------------------------------+|
|  |                            |  [ ] Global                                    |
|  |                            |  [ ] Save Dependencies (--save)                |
|  |                            |  [ ] Save devDependencies (--save-dev)         |
|  |                            |              +--------------------------------+|
|  |                            |      Options |                                ||
|  +----------------------------+              +--------------------------------+|
|                                                                   +-----------+|
|                                                                   |Install    ||
|                                                                   +-----------+|
|                                                                                |
+--------------------------------------------------------------------------------+
Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo