JSLibsUI

(Difference between revisions)
(Created page with '<pre> +-----------------------------------------------------------------------------------+ | Project Properties …')
m
 
(One intermediate revision not shown)
Line 1: Line 1:
-
<pre>
+
__TOC__
 +
== 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 23:
  ||                        |                  +-------------------------+  +------+|
  ||                        |                  +-------------------------+  +------+|
  |+------------------------+                                                        |
  |+------------------------+                                                        |
-
  +-----------------------------------------------------------------------------------+
+
  +-----------------------------------------------------------------------------------+</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 81:
  ||                        |            +-------------------------------+  +------+|
  ||                        |            +-------------------------------+  +------+|
  |+------------------------+                                                        |
  |+------------------------+                                                        |
-
  +-----------------------------------------------------------------------------------+
+
  +-----------------------------------------------------------------------------------+</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 101:
  |  |                            | |                                            ||
  |  |                            | |                                            ||
  |  |                            | |                                            ||
  |  |                            | |                                            ||
-
  |  |                            | |                                            |
+
  |  |                            | |                                            ||
  |  |                            | |                                            ||
  |  |                            | |                                            ||
  |  |                            | +---------------------------------------------+|
  |  |                            | +---------------------------------------------+|
Line 104: Line 107:
  |  |                            |  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>
 +
== New Web Project ==
 +
In current new HTML5 Application wizard there is a step to add JavaScript Libraries to the newly created project. Let's remove this step completely.

Current revision as of 08:57, 3 September 2014

Contents

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    ||
|                                                                   +-----------+|
|                                                                                |
+--------------------------------------------------------------------------------+

New Web Project

In current new HTML5 Application wizard there is a step to add JavaScript Libraries to the newly created project. Let's remove this step completely.

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