This is an automated email from the ASF dual-hosted git repository.
vieiro pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-netbeans-website.git
The following commit(s) were added to refs/heads/master by this push:
new 1d3e21f Updated html5-getting started
1d3e21f is described below
commit 1d3e21f6065098129d6f8ba242a905c7620af9d8
Author: Antonio Vieiro <vie...@users.noreply.github.com>
AuthorDate: Sun Feb 10 11:25:09 2019 +0100
Updated html5-getting started
---
.../docs/webclient/html5-gettingstarted.asciidoc | 86 +++++++++++++++++++---
1 file changed, 77 insertions(+), 9 deletions(-)
diff --git
a/netbeans.apache.org/src/content/kb/docs/webclient/html5-gettingstarted.asciidoc
b/netbeans.apache.org/src/content/kb/docs/webclient/html5-gettingstarted.asciidoc
index a5725b4..a0b011a 100644
---
a/netbeans.apache.org/src/content/kb/docs/webclient/html5-gettingstarted.asciidoc
+++
b/netbeans.apache.org/src/content/kb/docs/webclient/html5-gettingstarted.asciidoc
@@ -67,31 +67,42 @@ NOTE: The IDE will open the Chrome Web Store in the default
browser. If Chrome i
1. Choose File > New Project to open the New Project wizard.
2. Select *HTML5/JS Application* in the *HTML/JavaScript* category. Click Next.
+
image::images/html5-newproject1.png[title="HTML5 Application template in the
New Project wizard"]
+
+[start=3]
3. Specify a Name and Location for the project. Click Next.
For this exercise the name is not important.
+[start=4]
4. Select No Site Template. Click Finish.
When you click Finish the IDE creates a new HTML5 project and opens
``index.html`` in the editor.
+[start=5]
5. Confirm that Chrome with NetBeans Integration is selected in the dropdown
list in the toolbar.
6. Click Run in the toolbar.
7. Click Go to Chrome Web Store in the Install Chrome Extension dialog box.
+
image::images/html5-offline-extension1.png[title="Install Chrome Extension
dialog box"]
When you click Go to Chrome Web Store the NetBeans Connector page in the
Chrome Web Store opens in the Chrome browser.
-*Note.* The Install Chrome Extension displays a button that you will click
after the extension is installed.
+Note: The Install Chrome Extension displays a button that you will click after
the extension is installed.
image::images/html5-rerun-dialog.png[title="Install Chrome Extension dialog
box"]
+
+[start=8]
8. Go to the Chrome browser and click Add to Chrome in the NetBeans Connector
page. Click Add when you are prompted to confirm that you want to add the
extension.
+
image::images/html5-chrome-netbeanshome.png[title="NetBeans Connector page in
the Chrome Web Store"]
When the extension is installed you will see a notification that the extension
was added and that the NetBeans Connector icon will be visible in the URL
location bar when you run a NetBeans HTML5 project in the Chrome browser.
image::images/html5-install-extension2.png[title="Confirmation in that
extension was installed"]
+
+[start=9]
9. In the IDE, Click Re-Run Project in the Install Chrome Extension dialog box.
When you click Re-Run Project a new tab will open in the Chrome browser and
you will see the index page of the HTML5 application.
@@ -107,6 +118,7 @@ NOTE: Alternatively, you can install the NetBeans Connector
extension directly f
1. Start the Chrome browser and go to the
link:https://chrome.google.com/webstore/[+Chrome Web Store+].
2. Search the Chrome Web Store for the Netbeans Connector extension.
3. Click Add To Chrome in the search results page and click Add when you are
prompted to add the extension.
+
image::images/html5-install-extension1.png[title="NetBeans Connector extension
in Chrome Web Store"]
=== Offline Installation of the Extension
@@ -114,15 +126,25 @@
image::images/html5-install-extension1.png[title="NetBeans Connector extension i
If you are unable to connect to the Chrome Web Store you can install the
NetBeans Connector extension that is bundled with the IDE. If you run a
NetBeans HTML5 project and you are prompted to install the NetBeans Connector
extension, you can perform the following steps to install the extension if you
are not able to access the Chrome Web Store.
1. Click Not Connected in the Install Chrome Extension dialog box.
+
image::images/html5-offline-extension1.png[title="Install Chrome extension
dialog box"]
+
+[start=2]
2. Click *locate* in the dialog box to open the NetBeans IDE installation
folder on your local system that contains the *
``netbeans-chrome-connector.crx`` * extension.
+
image::images/html5-offline-extension2.png[title="NetBeans Connector extension
is enabled in Chrome Extensions"]
+
+[start=3]
3. Open the Chrome extensions page ( ``chrome://extensions/`` ) in your Chrome
browser.
+
image::images/html5-offline-extension3.png[title="NetBeans Connector extension
is enabled in Chrome Extensions"]
+
+[start=4]
4. Drag the ``netbeans-chrome-connector.crx`` extension into the Extensions
page in the browser and click Add to confirm that you want to add the extension.
After the extension is added you will see that the NetBeans Connector
extension is added to the list of installed extensions.
+[start=5]
5. Click *Yes, the plugin is installed now* in the Install Chrome Extension
dialog box to open the NetBeans HTML5 project in the Chrome browser. You will
see the NetBeans Connector icon in the location bar of the browser tab.
== Using the Embedded WebKit Browser
@@ -136,7 +158,10 @@ NOTE: When you choose Window > Web > Web Browser in the
main menu the IDE opens
Perform the following steps to run an HTML5 application in the Embedded WebKit
Browser.
1. Select Embedded WebKit Browser in the dropdown list in the toolbar.
+
image::images/html5-embedded1.png[title="List of target browsers for HTML5
applications in the dropdown list in the toolbar"]
+
+[start=2]
2. Click Run in the toolbar or right-click the project node in the Projects
window and choose Run.
When you run application the Web Browser window opens in the IDE.
@@ -151,9 +176,14 @@ In this exercise you will use the New Project wizard in
the IDE to create a new
1. Select File > New Project (Ctrl-Shift-N; ⌘-Shift-N on Mac) in the main menu
to open the New Project wizard.
2. Select the *HTML5/JavaScript* category and then select *HTML5/JS
Application*. Click Next.
+
image::images/html5-newproject1.png[title="HTML5 Application template in the
New Project wizard"]
+
+[start=3]
3. Type *HTML5Demo* for the Project Name and specify the directory on your
computer where you want save the project. Click Next.
+
4. In Step 3. Site Template, select No Site Template. Click Next.
+
image::images/html5-newproject2.png[title="Site Templates panel in the New
HTML5 Application wizard"]
When you select the No Site Template option the wizard generates a basic empty
NetBeans HTML5 project. If you click Finish now the project will only contain a
Site Root folder and an ``index.html`` file in the Site Root folder.
@@ -162,8 +192,11 @@ The Site Template page of the wizard enables you to select
from a list of popula
NOTE: You must be online to create a project that is based on one of the
online templates in the list.
+[start=5]
5. In Step 4. Tools, select only "Bower", which is the standard HTML5
dependency management tool that you can use via the IDE.
+
image::images/html5-newproject3.png[title="Tools panel in the New HTML5
Application wizard"]
+
6. Click *Finish* to complete the wizard.
When you click Finish the IDE creates the project and displays a node for the
project in the Projects window and opens the ``index.html`` file in the
editor.
@@ -172,8 +205,12 @@ image::images/html5-projectswindow1.png[title="JavaScript
Libraries panel in the
You can now test that your project displays correctly in the Chrome browser.
+[start=7]
7. Confirm that Chrome with NetBeans Connector integration is selected in the
browser dropdown table in the toolbar.
+
image::images/html5-js-selectbrowser.png[title="Browser selected in dropdown
list in toolbar"]
+
+[start=8]
8. Right-click the project node in the Projects window and choose Run.
When you choose Run the IDE opens a tab in the Chrome browser and displays the
default ``index.html`` page of the application. The Browser DOM window opens
in the IDE and displays the DOM tree of the page that is open in the browser.
@@ -195,13 +232,25 @@ If you select one of the default devices in the menu the
browser window will res
In this exercise you will set up Bower (link:http://bower.io[+bower.io+]) and
use it to download the JavaScript libraries that you'll use in the sections
that follow.
1. Right-click the project and choose Properties.
+
image::images/html5-bower-1.png[title="bower1"]
+
+[start=2]
2. If Bower has not been installed, you will see the tab below. Click
Configure Bower. If Bower has been installed, skip to step 5 below.
+
image::images/html5-bower-2.png[title="bower2"]
+
+[start=3]
3. Click the Install Bower link and go through the steps required for setting
up Bower. To use Bower, you will also need Node, NPM, and Git. All these are
standard tools used in the JavaScript ecosystem. Familiarize yourself with them
if needed before continuining.
+
image::images/html5-bower-3.png[title="bower3"]
+
+[start=4]
4. Specify the location of the Bower installation. Click Apply.
+
image::images/html5-bower-4.png[title="bower4"]
+
+[start=5]
5. Back in the Bower tab, search for the ``jquery`` and ``jqueryui``
JavaScript libraries. By default the libraries are created in the
``public_html/bower_components`` folder of the project. Change the
``.bowerrc`` file in your project, if you want the libraries to be installed
in a different folder.
You can use the text field in the panel to filter the list of JavaScript
libraries. For example, type *jq* in the field to help you find the ``jquery``
libraries. You can Ctrl-click the names of the libraries to select multiple
libraries.
@@ -215,7 +264,10 @@ NOTE: For this tutorial, choose the latest version of the
libraries.
When you have completed this step, you should see the below.
image::images/html5-bower-6.png[title="bower6"]
+
+[start=6]
6. Click OK and Bower will download the JavaScript libraries and, once the
process is complete, you should see them in the Projects window.
+
image::images/html5-bower-7.png[title="bower7"]
== Editing the HTML File
@@ -226,15 +278,18 @@ In this exercise you will add the project resources to
the project and edit the
The ZIP archive contains two folders with files that you need to add to the
project: ``pix`` and ``css`` .
+[start=2]
2. Copy the ``pix`` and ``css`` folders into the Site Root folder.
-*Note.* If you are looking at the directory structure of the project, you need
to copy the folders into the ``public_html`` folder.
+Note: If you are looking at the directory structure of the project, you need
to copy the folders into the ``public_html`` folder.
image::images/html5-fileswindow.png[title="NetBeans menu in the Chrome browser
tab"]
+
+[start=3]
3. Open `index.html` in the editor (if it is not already open).
4. In the editor, add references to the JavaScript libraries that you added
when you created the project by adding the following code (in bold) between the
opening and closing ``<head>`` tags.
-[source,xml]
+[source,html]
----
<html>
@@ -254,6 +309,8 @@ image::images/html5-fileswindow.png[title="NetBeans menu in
the Chrome browser t
You can use the code completion in the editor to help you.
image::images/html5-editor1.png[title="Code completion in the editor"]
+
+[start=5]
5. Remove the default '`TODO write content`' comment and type the following
code between the ``body`` tags.
[source,html]
@@ -312,14 +369,18 @@ image::images/html5-editor1.png[title="Code completion in
the editor"]
</div>
</body>
----
+
+[start=6]
6. Save your changes.
When you save your changes the page automatically reloads in the browser and
the page should look similar to the following image.
image::images/html5-runproject3.png[title="Reloaded page in in the Chrome
browser tab"]
+
+[start=7]
7. Type the following inline CSS rules between the ``<head>`` tags in the
file.
-[source,xml]
+[source,html]
----
<style type="text/css">
@@ -339,9 +400,11 @@ image::images/html5-editor2.png[title="Code completion of
CSS rules in the edito
If you open the Browser DOM window you can see the current structure of the
page.
image::images/dom-browser.png[title="Browser DOM window showing DOM tree"]
+
+[start=8]
8. Add the following link to the style sheet (in *bold*) between the `<head>`
tags.
-[source,xml]
+[source,html]
----
<head>
@@ -356,9 +419,10 @@ The ``basecss.css`` style sheet is based on some of the
CSS rules that are def
You can open the ``basecss.css`` style sheet in the editor and modify the
style sheet to add the CSS rules that you added in the previous step or create
a new style sheet for the CSS rules.
+[start=9]
9. Add the following code between the ``<head>`` tags to run a jQuery script
when the elements in the page are loaded.
-[source,xml]
+[source,html]
----
*<script type="text/javascript">
@@ -374,7 +438,7 @@ jQuery works by connecting dynamically-applied JavaScript
attributes and behavio
You can also use the following abbreviated version of this function.
-[source,java]
+[source,javascript]
----
$(function(){
@@ -384,9 +448,10 @@ $(function(){
The instructions for jQuery take the form of a JavaScript method, with an
optional object literal representing an array of parameters, and must be placed
between the curly braces `{}` inside the `(document).ready` function in order
to execute only at the proper time, which is after the DOM has completely
loaded.
+[start=10]
10. Add the following code (in bold) inside the `(document).ready` function,
between the braces `{}`.
-[source,xml]
+[source,html]
----
<script type="text/javascript">
@@ -408,7 +473,7 @@ NOTE: You also specified '`autoHeight: false`' in the above
snippet. This preven
The ``<head>`` section of the `index.html` file should look as follows.
-[source,xml]
+[source,html]
----
<html>
@@ -440,6 +505,7 @@ The ``<head>`` section of the `index.html` file should
look as follows.
You can tidy up your code by right-clicking in the editor and choosing Format.
+[start=11]
11. Modify the ``<div>`` element that encloses the page contents by adding
the following `id` selector and value (in bold).
[source,html]
@@ -462,6 +528,7 @@ image::images/html5-cssrules.png[title="Edit CSS Rules
dialog box"]
When you click OK in the dialog box a CSS rule for the ``infolist`` selector
is automatically added to the ``basecss.css`` style sheet.
+[start=12]
12. Save your changes to ``index.html`` (Ctrl-S; ⌘-S on Mac).
When you save your changes the page in the web browser reloads automatically.
You can see that the layout of the page has changed and that the page now uses
the CSS style rules that are defined in the ``basecss.css`` style sheet. One
of the lists below the ``<h3>`` is open but the others are now collapsed. You
can click an ``<h3>`` element to expand the list.
@@ -505,3 +572,4 @@ When you want to create a project that is based on the site
template you specify
== Summary
In this tutorial you have learned how to create an empty HTML5 project that
uses a couple jQuery JavaScript libraries. You also learned how to install the
NetBeans Connector extension for the Chrome browser and run the HTML5 project
in the browser. When you edited the ``index.html`` file you saw that the IDE
provides some tools that can help you to edit HTML and CSS files.
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@netbeans.apache.org
For additional commands, e-mail: commits-h...@netbeans.apache.org
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists
