You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@netbeans.apache.org by vi...@apache.org on 2019/02/10 10:25:13 UTC
[incubator-netbeans-website] branch master updated: Updated
html5-getting started
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 <vi...@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-unsubscribe@netbeans.apache.org
For additional commands, e-mail: commits-help@netbeans.apache.org
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists