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 2020/01/27 21:01:42 UTC
[netbeans-website] branch master updated: [NETBEANS-3756]
kb/docs/web asciidoc cleanup (#441)
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/netbeans-website.git
The following commit(s) were added to refs/heads/master by this push:
new 7c67d16 [NETBEANS-3756] kb/docs/web asciidoc cleanup (#441)
7c67d16 is described below
commit 7c67d163503a0cb51f2791a20f5ded24ec619d5e
Author: Antonio Vieiro <vi...@users.noreply.github.com>
AuthorDate: Mon Jan 27 22:01:33 2020 +0100
[NETBEANS-3756] kb/docs/web asciidoc cleanup (#441)
Images, numbered lists, header leveling.
---
.../content/kb/docs/web/ajax-quickstart.asciidoc | 203 ++++++++++++-----
.../kb/docs/web/ajax-quickstart_ja.asciidoc | 148 +++++++++---
.../kb/docs/web/ajax-quickstart_pt_BR.asciidoc | 148 +++++++++---
.../kb/docs/web/ajax-quickstart_ru.asciidoc | 148 +++++++++---
.../kb/docs/web/ajax-quickstart_zh_CN.asciidoc | 148 +++++++++---
.../src/content/kb/docs/web/applets.asciidoc | 44 +++-
.../src/content/kb/docs/web/applets_ja.asciidoc | 44 +++-
.../src/content/kb/docs/web/applets_pt_BR.asciidoc | 44 +++-
.../src/content/kb/docs/web/applets_ru.asciidoc | 44 +++-
.../src/content/kb/docs/web/applets_zh_CN.asciidoc | 44 +++-
.../kb/docs/web/framework-adding-support.asciidoc | 48 +++-
.../docs/web/framework-adding-support_ja.asciidoc | 48 +++-
.../web/framework-adding-support_pt_BR.asciidoc | 48 +++-
.../docs/web/framework-adding-support_ru.asciidoc | 48 +++-
.../web/framework-adding-support_zh_CN.asciidoc | 48 +++-
.../content/kb/docs/web/grails-quickstart.asciidoc | 41 +++-
.../kb/docs/web/grails-quickstart_ja.asciidoc | 41 +++-
.../kb/docs/web/grails-quickstart_pt_BR.asciidoc | 41 +++-
.../kb/docs/web/grails-quickstart_ru.asciidoc | 41 +++-
.../kb/docs/web/grails-quickstart_zh_CN.asciidoc | 41 +++-
.../content/kb/docs/web/hibernate-webapp.asciidoc | 181 +++++++++++----
.../kb/docs/web/hibernate-webapp_ja.asciidoc | 181 +++++++++++----
.../kb/docs/web/hibernate-webapp_pt_BR.asciidoc | 181 +++++++++++----
.../kb/docs/web/hibernate-webapp_ru.asciidoc | 181 +++++++++++----
.../kb/docs/web/hibernate-webapp_zh_CN.asciidoc | 181 +++++++++++----
.../content/kb/docs/web/js-toolkits-dojo.asciidoc | 132 ++++++++---
.../kb/docs/web/js-toolkits-dojo_ja.asciidoc | 132 ++++++++---
.../kb/docs/web/js-toolkits-dojo_pt_BR.asciidoc | 132 ++++++++---
.../kb/docs/web/js-toolkits-dojo_ru.asciidoc | 132 ++++++++---
.../kb/docs/web/js-toolkits-dojo_zh_CN.asciidoc | 132 ++++++++---
.../kb/docs/web/js-toolkits-jquery.asciidoc | 161 +++++++++----
.../kb/docs/web/js-toolkits-jquery_ja.asciidoc | 176 +++++++++-----
.../kb/docs/web/js-toolkits-jquery_pt_BR.asciidoc | 168 ++++++++++----
.../kb/docs/web/js-toolkits-jquery_ru.asciidoc | 167 ++++++++++----
.../kb/docs/web/js-toolkits-jquery_zh_CN.asciidoc | 167 ++++++++++----
.../content/kb/docs/web/jsf-jpa-weblogic.asciidoc | 65 ++++--
.../kb/docs/web/jsf-jpa-weblogic_ja.asciidoc | 65 ++++--
.../kb/docs/web/jsf-jpa-weblogic_pt_BR.asciidoc | 65 ++++--
.../kb/docs/web/jsf-jpa-weblogic_ru.asciidoc | 65 ++++--
.../kb/docs/web/jsf-jpa-weblogic_zh_CN.asciidoc | 65 ++++--
.../src/content/kb/docs/web/jsf20-crud.asciidoc | 220 +++++++++++++-----
.../src/content/kb/docs/web/jsf20-crud_ja.asciidoc | 216 +++++++++++++-----
.../content/kb/docs/web/jsf20-crud_pt_BR.asciidoc | 197 ++++++++++++----
.../src/content/kb/docs/web/jsf20-crud_ru.asciidoc | 206 +++++++++++++----
.../content/kb/docs/web/jsf20-crud_zh_CN.asciidoc | 201 ++++++++++++----
.../src/content/kb/docs/web/jsf20-intro.asciidoc | 253 +++++++++++++++------
.../content/kb/docs/web/jsf20-intro_ja.asciidoc | 253 +++++++++++++++------
.../content/kb/docs/web/jsf20-intro_pt_BR.asciidoc | 240 ++++++++++++++-----
.../content/kb/docs/web/jsf20-intro_ru.asciidoc | 236 ++++++++++++++-----
.../content/kb/docs/web/jsf20-intro_zh_CN.asciidoc | 236 ++++++++++++++-----
.../src/content/kb/docs/web/jsf20-support.asciidoc | 33 +--
.../content/kb/docs/web/jsf20-support_ca.asciidoc | 30 +--
.../content/kb/docs/web/jsf20-support_ja.asciidoc | 32 +--
.../kb/docs/web/jsf20-support_pt_BR.asciidoc | 9 +-
.../content/kb/docs/web/jsf20-support_ru.asciidoc | 9 +-
.../kb/docs/web/jsf20-support_zh_CN.asciidoc | 9 +-
.../src/content/kb/docs/web/mysql-webapp.asciidoc | 192 ++++++++++++----
.../content/kb/docs/web/mysql-webapp_ja.asciidoc | 192 ++++++++++++----
.../kb/docs/web/mysql-webapp_pt_BR.asciidoc | 192 ++++++++++++----
.../content/kb/docs/web/mysql-webapp_ru.asciidoc | 192 ++++++++++++----
.../kb/docs/web/mysql-webapp_zh_CN.asciidoc | 192 ++++++++++++----
.../src/content/kb/docs/web/oracle-cloud.asciidoc | 121 +++++++---
.../content/kb/docs/web/oracle-cloud_ja.asciidoc | 121 +++++++---
.../kb/docs/web/oracle-cloud_pt_BR.asciidoc | 121 +++++++---
.../content/kb/docs/web/oracle-cloud_ru.asciidoc | 121 +++++++---
.../kb/docs/web/oracle-cloud_zh_CN.asciidoc | 121 +++++++---
.../kb/docs/web/quickstart-webapps-spring.asciidoc | 129 ++++++++---
.../docs/web/quickstart-webapps-spring_ja.asciidoc | 129 ++++++++---
.../web/quickstart-webapps-spring_pt_BR.asciidoc | 129 ++++++++---
.../docs/web/quickstart-webapps-spring_ru.asciidoc | 129 ++++++++---
.../web/quickstart-webapps-spring_zh_CN.asciidoc | 129 ++++++++---
.../kb/docs/web/quickstart-webapps-struts.asciidoc | 85 +++++--
.../docs/web/quickstart-webapps-struts_ja.asciidoc | 85 +++++--
.../web/quickstart-webapps-struts_pt_BR.asciidoc | 85 +++++--
.../docs/web/quickstart-webapps-struts_ru.asciidoc | 85 +++++--
.../web/quickstart-webapps-struts_zh_CN.asciidoc | 85 +++++--
.../kb/docs/web/quickstart-webapps-wicket.asciidoc | 76 +++++--
.../docs/web/quickstart-webapps-wicket_ja.asciidoc | 76 +++++--
.../web/quickstart-webapps-wicket_pt_BR.asciidoc | 76 +++++--
.../docs/web/quickstart-webapps-wicket_ru.asciidoc | 76 +++++--
.../web/quickstart-webapps-wicket_zh_CN.asciidoc | 76 +++++--
.../kb/docs/web/quickstart-webapps.asciidoc | 69 ++++--
.../kb/docs/web/quickstart-webapps_ja.asciidoc | 69 ++++--
.../kb/docs/web/quickstart-webapps_pt_BR.asciidoc | 69 ++++--
.../kb/docs/web/quickstart-webapps_ru.asciidoc | 69 ++++--
.../kb/docs/web/quickstart-webapps_zh_CN.asciidoc | 69 ++++--
.../content/kb/docs/web/security-webapps.asciidoc | 244 +++++++++++++++-----
.../kb/docs/web/security-webapps_ja.asciidoc | 244 +++++++++++++++-----
.../kb/docs/web/security-webapps_pt_BR.asciidoc | 244 +++++++++++++++-----
.../kb/docs/web/security-webapps_ru.asciidoc | 244 +++++++++++++++-----
.../kb/docs/web/security-webapps_zh_CN.asciidoc | 244 +++++++++++++++-----
91 files changed, 8376 insertions(+), 2773 deletions(-)
diff --git a/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart.asciidoc
index a427d71..96f8978 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart.asciidoc
@@ -34,9 +34,6 @@ This document provides an introduction to Ajax and demonstrates some of the feat
Ajax stands for Asynchronous JavaScript and XML. In essence, Ajax is an efficient way for a web application to handle user interactions with a web page - a way that reduces the need to do a page refresh or full page reload for every user interaction. This enables rich behavior (similar to that of a desktop application or plugin-based web application) using a browser. Ajax interactions are handled asynchronously in the background. As this happens, a user can continue working with the page [...]
-image::images/netbeans-stamp-80-74-73.png[title="Content on this page applies to the NetBeans IDE 7.2, 7.3, 7.4 and 8.0"]
-
-
*To complete this tutorial, you need the following software and resources.*
|===
@@ -53,11 +50,13 @@ _ _
version 7.x or 8.x
|===
-*Notes:*
+[NOTE]
+====
* The Java EE installation of the IDE enables you to optionally install the GlassFish server and the Apache Tomcat servlet container.
* This tutorial assumes that you have a working knowledge of the various technologies it employs (i.e., HTML, CSS, JavaScript, Java and JSP). It attempts to provide an overview of the functionality provided by the code, but _does not_ explain how the code works on a line-to-line basis.
* If you need to compare your project with a working solution, you can link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FMyAjaxApp.zip[+download the sample application+].
+====
@@ -91,10 +90,16 @@ Begin by creating a new web application project in the IDE. The IDE contains bui
1. Choose File > New Project. Under Categories, select Java Web. Under Projects, select Web Application then click Next.
2. In the Name and Location panel, enter `MyAjaxApp` for Project Name. The Project Location field enables you to specify the location of the project on your computer. Leave other options at their defaults and click Next.
+
image::images/java-name-location.png[title="Specify the name and location for your application project"]
-3. In the Server and Settings panel, select the server you want to deploy your application to. Only servers that are registered with the IDE are listed.
+
+[start=3]
+. In the Server and Settings panel, select the server you want to deploy your application to. Only servers that are registered with the IDE are listed.
+
image::images/java-server-settings.png[title="Specify the server your application will be deployed to"]
-4. Accept other default settings and click Finish. The project is generated in your file system and opens in the IDE.
+
+[start=4]
+. Accept other default settings and click Finish. The project is generated in your file system and opens in the IDE.
When Java-based web projects are created, an link:http://ant.apache.org/[+Ant+] build script is automatically generated which enables you to compile the project so that it can be immediately deployed and run on a server that has been registered in the IDE.
@@ -124,7 +129,7 @@ You can view large icons (as displayed here) by right-clicking in the Palette an
1. Replace the content for the `<title>` and `<h1>`tags to read: `Auto-Completion using AJAX`. The index page requires no server-side scripting code, so you can safely delete any remnants that were created by default. The index page should now appear as shown below.
-[source,xml]
+[source,html]
----
<!DOCTYPE html>
@@ -140,7 +145,9 @@ You can view large icons (as displayed here) by right-clicking in the Palette an
</html>
----
-2. Add some explanatory text to describe the purpose of the text field. You can copy and paste in the following text at a point just beneath the `<h1>` tags:
+
+[start=2]
+. Add some explanatory text to describe the purpose of the text field. You can copy and paste in the following text at a point just beneath the `<h1>` tags:
[source,html]
----
@@ -153,25 +160,33 @@ You can view large icons (as displayed here) by right-clicking in the Palette an
then click on one of the selections to see composer details.</p>
----
-3. Add an HTML form to the page. You can do this by making use of the elements listed in the IDE's Palette. If the Palette is not open, choose Window > Palette from the main menu. Then, under HTML Forms, click on and drag a Form element into the page to a point beneath the `<p>` tags that you just added. The Insert Form dialog box opens. Specify the following:
+
+[start=3]
+. Add an HTML form to the page. You can do this by making use of the elements listed in the IDE's Palette. If the Palette is not open, choose Window > Palette from the main menu. Then, under HTML Forms, click on and drag a Form element into the page to a point beneath the `<p>` tags that you just added. The Insert Form dialog box opens. Specify the following:
* Action: autocomplete
* Method: GET
* Name: autofillform
+
image::images/insert-form.png[title="Insert form dialog"]
Click OK. The HTML `<form>` tags are inserted into the page containing the attributes you specified. (GET is applied by default, and so is not explicitly declared.)
-4. Add an HTML table to the page. Under the HTML category in the Palette, click on a Table element and drag it to a point between the `<form>` tags. The Insert Table dialog box opens. Specify the following:
+
+[start=4]
+. Add an HTML table to the page. Under the HTML category in the Palette, click on a Table element and drag it to a point between the `<form>` tags. The Insert Table dialog box opens. Specify the following:
* Rows: 2
* Columns: 2
* Border Size: 0
* Cell Padding: 5
+
image::images/insert-table.png[title="Insert table dialog"]
-5. Right-click inside the Source Editor and choose Format. This tidies up the code. Your form should now display similar to that below:
-[source,xml]
+[start=5]
+. Right-click inside the Source Editor and choose Format. This tidies up the code. Your form should now display similar to that below:
+
+[source,html]
----
<form name="autofillform" action="autocomplete">
@@ -196,16 +211,20 @@ image::images/insert-table.png[title="Insert table dialog"]
</form>
----
-6. Within the first row of the table, type the following text into the first column (changes in *bold*):
-[source,xml]
+[start=6]
+. Within the first row of the table, type the following text into the first column (changes in *bold*):
+
+[source,html]
----
<td>*<strong>Composer Name:</strong>*</td>
----
-7. Within the second column of the first row, instead of dragging a Text Input field from the Palette, type in the code below manually (changes in *bold*):
-[source,xml]
+[start=7]
+. Within the second column of the first row, instead of dragging a Text Input field from the Palette, type in the code below manually (changes in *bold*):
+
+[source,html]
----
<td>
@@ -217,6 +236,7 @@ image::images/insert-table.png[title="Insert table dialog"]
----
When you type, try using the IDE's built-in code completion support. For example, type in `<i`, then press Ctrl-Space. A list of suggested options displays below your cursor, and a description of the selected element appears in a box above. You can in fact press Ctrl-Space at anytime you are coding in the Source Editor to bring up possible options. Also, if there is only one possible option, pressing Ctrl-Space will automatically complete the element name.
+
image::images/code-completion.png[title="Press Ctrl-Space in the editor to invoke code completion and documentation support"]
The `onkeyup` attribute that you typed in above points to a JavaScript function named `doCompletion()`. This function is called each time a key is pressed in the form text field, and maps to the JavaScript call depicted in the Ajax <<flow-diagram,flow diagram>> above.
@@ -237,7 +257,7 @@ Add a JavaScript file to the application and begin implementing `doCompletion()`
2. Name the file `javascript` and click Finish. The new JavaScript file appears in the Projects window within the Web Pages folder.
3. Type the code below into `javascript.js`.
-[source,java]
+[source,javascript]
----
var req;
@@ -270,9 +290,11 @@ function initRequest() {
The above code performs a simple browser compatibility check for Firefox 3 and Internet Explorer versions 6 and 7). If you would like to incorporate more robust code for compatibility issues, consider using this link:http://www.quirksmode.org/js/detect.html[+browser detect script+] from link:http://www.quirksmode.org[+http://www.quirksmode.org+].
-4. Switch back to the index page and add a reference to the JavaScript file between the `<head>` tags.
-[source,xml]
+[start=4]
+. Switch back to the index page and add a reference to the JavaScript file between the `<head>` tags.
+
+[source,html]
----
<script type="text/javascript" src="javascript.js"></script>
@@ -280,9 +302,11 @@ The above code performs a simple browser compatibility check for Firefox 3 and I
You can quickly toggle between pages opened in the Source Editor by pressing Ctrl-Tab.
-5. Insert a call to `init()` in the opening `<body>` tag.
-[source,java]
+[start=5]
+. Insert a call to `init()` in the opening `<body>` tag.
+
+[source,javascript]
----
<body *onload="init()"*>
@@ -303,7 +327,7 @@ Three parameters are specified when you create an `XMLHttpRequest` object: a URL
* The URL `autocomplete`, and the text entered into the `complete-field` by the user:
-[source,java]
+[source,javascript]
----
var url = "autocomplete?action=complete&id=" + escape(completeField.value);
@@ -311,7 +335,7 @@ var url = "autocomplete?action=complete&id=" + escape(completeField.value);
* `GET`, signifying that HTTP interactions use the `GET` method, and
* `true`, signifying that the interaction is asynchronous:
-[source,java]
+[source,javascript]
----
req.open("GET", url, true);
@@ -320,7 +344,7 @@ req.open("GET", url, true);
If the interaction is set as asynchronous, a callback function must be specified. The callback function for this interaction is set with the statement:
-[source,java]
+[source,javascript]
----
req.onreadystatechange = callback;
@@ -437,7 +461,9 @@ You will notice that a warning is displayed in the left margin of the editor bec
When you click Finish the IDE creates the class and opens the file in the Source Editor.
-3. In the Source Editor, paste in the following code:
+
+[start=3]
+. In the Source Editor, paste in the following code:
[source,java]
----
@@ -486,25 +512,41 @@ Create a servlet to handle the `autocomplete` URL that is received by the incomi
1. Right-click on the project node in the Projects window and choose New > Servlet to open the New Servlet wizard. (Choose Other and select Servlet from the Web category if Servlet is not displayed by default in the popup menu.)
2. Name the servlet `AutoCompleteServlet`, and choose `com.ajax` from the drop-down list in the Package field. Click Next.
+
image::images/newservlet-name-location.png[]
-3. In the Configure Servlet Deployment panel, change the URL pattern to *`/autocomplete`* so that it matches the URL that you previously set in the `XMLHttpRequest` object.
+
+[start=3]
+. In the Configure Servlet Deployment panel, change the URL pattern to *`/autocomplete`* so that it matches the URL that you previously set in the `XMLHttpRequest` object.
+
image::images/newservlet-configure-deployment.png[]
This panel saves you the step of needing to manually add these details to the deployment descriptor.
-4. Optionally, select "Add servlet information to deployment descriptor." This is so your project is the same as the downloaded sample. With later versions of the IDE, by default the servlet is registered by a `@WebServlet` annotation instead of in a deployment descriptor. The project will still work if you use the `@WebServlet` annotation instead of a deployment descriptor.
-5. Click Finish. The servlet is created and opens in the Source Editor.
+
+[start=4]
+. Optionally, select "Add servlet information to deployment descriptor." This is so your project is the same as the downloaded sample. With later versions of the IDE, by default the servlet is registered by a `@WebServlet` annotation instead of in a deployment descriptor. The project will still work if you use the `@WebServlet` annotation instead of a deployment descriptor.
+
+[start=5]
+. Click Finish. The servlet is created and opens in the Source Editor.
The only methods you need to override are `doGet()`, to define how the servlet handles the `autocomplete` `GET` request, and `init()`, which needs to initiate a `ServletContext` so the servlet can access other classes in the application once it is put into service.
You can override methods from superclasses using the IDE's Insert Code popup menu. Implement `init()` by performing the following steps.
1. Place your cursor beneath the `AutoCompleteServlet` class declaration in the Source Editor. Press Alt-Insert (Ctrl-I on Mac) to open the Generate Code popup menu.
+
image::images/insert-code.png[title="Insert Code popup menu displayed in Source Editor"]
-2. Choose Override Method. In the dialog that displays, all classes that `AutoCompleteServlet` inherits from are displayed. Expand the GenericServlet node and select `init(Servlet Config config)`.
+
+[start=2]
+. Choose Override Method. In the dialog that displays, all classes that `AutoCompleteServlet` inherits from are displayed. Expand the GenericServlet node and select `init(Servlet Config config)`.
+
image::images/new-override.png[title="Override dialog lists inherited classes"]
-3. Click OK. The `init()` method is added in the Source Editor.
-4. Add a variable for a `ServletContext` object and modify `init()` (changes in *bold*):
+
+[start=3]
+. Click OK. The `init()` method is added in the Source Editor.
+
+[start=4]
+. Add a variable for a `ServletContext` object and modify `init()` (changes in *bold*):
[source,java]
----
@@ -516,10 +558,13 @@ public void init(ServletConfig *config*) throws ServletException {
*this.context = config.getServletContext();*
}
----
-5. Add an import statement for `ServletContext`. You can do this by clicking on the lightbulb icon that displays in the left margin of the Source Editor
+
+[start=5]
+. Add an import statement for `ServletContext`. You can do this by clicking on the lightbulb icon that displays in the left margin of the Source Editor
+
image::images/import-hint.png[title="Import hints display in left margin of the Source Editor"]
-The `doGet()` method needs to parse the URL of the request, retrieve data from the data store, and prepare a response in XML format. Note that the method declaration was generated when you created the class. To view it, you may need to expand the HttpServlet methods by clicking on the expand icon (image::images/expand-icon.png[]) in the left margin.
+The `doGet()` method needs to parse the URL of the request, retrieve data from the data store, and prepare a response in XML format. Note that the method declaration was generated when you created the class. To view it, you may need to expand the HttpServlet methods by clicking on the expand icon (image:images/expand-icon.png[]) in the left margin.
1. Add the following variable declarations beneath the `AutocompleteServlet` class declaration.
@@ -530,7 +575,9 @@ private ComposerData compData = new ComposerData();
private HashMap composers = compData.getComposers();
----
This creates a `HashMap` of all composer data, which is then employed by `doGet()`.
-2. Scroll down to `doGet()` and implement the method as follows:
+
+[start=2]
+. Scroll down to `doGet()` and implement the method as follows:
[source,xml]
----
@@ -604,7 +651,7 @@ As you can see in this servlet, there is nothing really new you need to learn to
In this example, the servlet generates an XML document that contains all composers with a first or last name beginning with the characters typed in by the user. This document maps to the XML Data depicted in the <<flow-diagram,flow diagram>> above. Here is an example of an XML document that is returned to the `XMLHttpRequest` object:
-[source,xml]
+[source,html]
----
<composers>
@@ -652,7 +699,7 @@ The callback function is called asynchronously at specific points during HTTP in
1. Open `javascript.js` in the Source Editor and type in the code below.
-[source,java]
+[source,javascript]
----
function callback() {
@@ -691,7 +738,7 @@ The `parseMessages()` function handles the incoming XML data. In doing so, it re
1. Open the index page in the Source Editor and type in the below code for the second row of the HTML table you previously created.
-[source,xml]
+[source,html]
----
<tr>
@@ -701,18 +748,22 @@ The `parseMessages()` function handles the incoming XML data. In doing so, it re
</tr>
----
The second row of the table contains another HTML table. This table represents the auto-complete box that will be used to populate composer names.
-2. Open `javascript.js` in the Source Editor and the following three variables to the top of the file.
-[source,java]
+[start=2]
+. Open `javascript.js` in the Source Editor and the following three variables to the top of the file.
+
+[source,javascript]
----
var completeField;
var completeTable;
var autoRow;
----
-3. Add the following lines (in *bold*) to the `init()` function.
-[source,java]
+[start=3]
+. Add the following lines (in *bold*) to the `init()` function.
+
+[source,javascript]
----
function init() {
@@ -723,9 +774,11 @@ function init() {
}
----
One purpose of `init()` is to make elements inside the index page accessible to other functions that will modify the index page's DOM.
-4. Add `appendComposer()` to `javascript.js`.
-[source,java]
+[start=4]
+. Add `appendComposer()` to `javascript.js`.
+
+[source,javascript]
----
function appendComposer(firstName,lastName,composerId) {
@@ -756,9 +809,11 @@ function appendComposer(firstName,lastName,composerId) {
}
----
This function creates a new table row, inserts a link to a composer into it using the data passed to the function via its three parameters, and inserts the row into the index page's `complete-table` element.
-5. Add `getElementY()` to `javascript.js`.
-[source,java]
+[start=5]
+. Add `getElementY()` to `javascript.js`.
+
+[source,javascript]
----
function getElementY(element){
@@ -780,9 +835,11 @@ This function is applied to find the vertical position of the parent element. Th
*Note:* See link:http://www.quirksmode.org/js/findpos.html[+this explanation+] of `offset` on link:http://www.quirksmode.org/[+http://www.quirksmode.org/+].
-6. Add `clearTable()` to `javascript.js`.
-[source,java]
+[start=6]
+. Add `clearTable()` to `javascript.js`.
+
+[source,javascript]
----
function clearTable() {
@@ -795,9 +852,11 @@ function clearTable() {
}
----
This function sets the display of the `complete-table` element to 'none', (i.e., makes it invisible), and it removes any existing composer name entries that were created.
-7. Modify the `callback()` function to call `clearTable()` each time new data is received from the server. Any composer entries that already exist in the auto-complete box are therefore removed before it becomes populated with new entries.
-[source,java]
+[start=7]
+. Modify the `callback()` function to call `clearTable()` each time new data is received from the server. Any composer entries that already exist in the auto-complete box are therefore removed before it becomes populated with new entries.
+
+[source,javascript]
----
function callback() {
@@ -811,9 +870,11 @@ function callback() {
}
}
----
-8. Add `parseMessages()` to `javascript.js`.
-[source,java]
+[start=8]
+. Add `parseMessages()` to `javascript.js`.
+
+[source,javascript]
----
function parseMessages(responseXML) {
@@ -846,7 +907,7 @@ function parseMessages(responseXML) {
The `parseMessages()` function receives as a parameter an object representation of the XML document returned by the `AutoComplete` servlet. The function programmatically traverses the XML document, extracting the `firstName`, `lastName`, and `id` of each entry, then passes this data to `appendComposer()`. This results in a dynamic update to the contents of the `complete-table` element. For example, an entry that is generated and inserted into `complete-table` might look as follows:
-[source,xml]
+[source,html]
----
<tr>
@@ -911,8 +972,12 @@ To display the results, you need a JSP file named `composers.jsp`. This page is
*Note.* You will need to change the link to return to the index page if your index page is ``index.jsp`` .
-5. Create another JSP file in the project's Web Pages folder. Name the file `error.jsp`.
-6. Replace the placeholder code in `error.jsp` with the following code:
+
+[start=5]
+. Create another JSP file in the project's Web Pages folder. Name the file `error.jsp`.
+
+[start=6]
+. Replace the placeholder code in `error.jsp` with the following code:
[source,html]
----
@@ -944,6 +1009,7 @@ To display the results, you need a JSP file named `composers.jsp`. This page is
At this stage, you have completed all the code needed for the functionality of the application. To see the results of your efforts, try running the application now.
1. In the Projects window, right-click the project node and choose Run. The project is recompiled and deployed to the target server. Your browser opens, and you can see the index page.
+
image::images/no-css.png[title="Successful deployment without stylesheet"]
To add a stylesheet to your application, simply create a `.css` file and link to it from your presentation page(s). When you work in `.css` files, the IDE provides you with code completion support, as well as the following windows to help you generate and edit stylesheet rules.
@@ -959,9 +1025,11 @@ To add a stylesheet to your application perform the following steps.
The new file is created and opens in the editor.
-3. Type the following rules in `stylesheet.css` in the editor. You can make use of the IDE's code completion support by pressing Ctrl-Space at points when you want to call up suggestions.
-[source,java]
+[start=3]
+. Type the following rules in `stylesheet.css` in the editor. You can make use of the IDE's code completion support by pressing Ctrl-Space at points when you want to call up suggestions.
+
+[source,css]
----
body {
@@ -1027,21 +1095,28 @@ a:hover {
font-size: 1.2em;
}
----
-4. Open the CSS Styles window by choosing Window > Web > CSS Styles.
+
+[start=4]
+. Open the CSS Styles window by choosing Window > Web > CSS Styles.
+
image::images/css-styles-window.png[title="CSS Styles window displaying h1 rule properties"]
-You can use the CSS Styles window to quickly view the properties and edit style rules. When you select a rule in the upper pane of the CSS Style window you can see the properties of the rule in the lower pane. You can add a CSS Rules to the stylesheet by clicking the Edit CSS Rules icon (image::images/newcssrule.png[title="New CSS Property icon"]) in the toolbar of the upper pane. You can modify rules in the lower pane by editing the property sheet and add properties by clicking the Add [...]
+You can use the CSS Styles window to quickly view the properties and edit style rules. When you select a rule in the upper pane of the CSS Style window you can see the properties of the rule in the lower pane. You can add a CSS Rules to the stylesheet by clicking the Edit CSS Rules icon (image:images/newcssrule.png[title="New CSS Property icon"]) in the toolbar of the upper pane. You can modify rules in the lower pane by editing the property sheet and add properties by clicking the Add P [...]
-5. Switch to the index page in the Source Editor, and add a reference to the stylesheet between the `<head>` tags.
-[source,java]
+[start=5]
+. Switch to the index page in the Source Editor, and add a reference to the stylesheet between the `<head>` tags.
+
+[source,html]
----
<link rel="stylesheet" type="text/css" href="stylesheet.css">
----
-6. Add the `popupBox` class that is defined in the stylesheet to the `complete-table` element (changes in *bold*).
-[source,xml]
+[start=6]
+. Add the `popupBox` class that is defined in the stylesheet to the `complete-table` element (changes in *bold*).
+
+[source,html]
----
<tr>
@@ -1079,7 +1154,9 @@ Before you begin using the HTTP monitor, you must first enable it on the server
*Note:* This option displays under the Common tab for the GlassFish server. For Tomcat, it resides under the Connection tab.
-3. Click Close.
+
+[start=3]
+. Click Close.
If the server is already running, you need to restart it in order to allow changes to take effect. You can restart the server by opening the Services window (Window > Services), then right-clicking your server beneath the Servers node and choosing Restart.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_ja.asciidoc
index 6561f5a..f2a53dd 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_ja.asciidoc
@@ -91,10 +91,16 @@ image::images/ajax-process-flow.png[title="Ajaxのプロセス・フロー図"]
1. 「ファイル」>「新規プロジェクト」を選択します。「カテゴリ」から「Java Web」を選択します。「プロジェクト」で「Webアプリケーション」を選択して、「次」をクリックします。
2. 「名前と場所」パネルでプロジェクト名として「`MyAjaxApp`」と入力します。「プロジェクトの場所」フィールドでコンピュータ上でのプロジェクトの場所を指定できます。他のオプションはデフォルトのままにして、「次」をクリックします。
+
image::images/java-name-location.png[title="アプリケーション・プロジェクトでの名前と場所の指定"]
-3. 「サーバーと設定」パネルで、アプリケーションをデプロイするサーバーを選択します。IDEに登録されているサーバーのみ表示されます。
+
+[start=3]
+. 「サーバーと設定」パネルで、アプリケーションをデプロイするサーバーを選択します。IDEに登録されているサーバーのみ表示されます。
+
image::images/java-server-settings.png[title="アプリケーションのデプロイ先サーバーの指定"]
-4. その他のデフォルト設定を受け入れ、「終了」をクリックします。プロジェクトがファイル・システムに生成され、IDEで開きます。
+
+[start=4]
+. その他のデフォルト設定を受け入れ、「終了」をクリックします。プロジェクトがファイル・システムに生成され、IDEで開きます。
JavaベースのWebプロジェクトが作成されると、link:http://ant.apache.org/[+Ant+]ビルド・スクリプトが自動的に生成されます。このスクリプトによってプロジェクトをコンパイルし、IDEに登録されているサーバーにすぐにデプロイして実行できます。
@@ -140,7 +146,9 @@ IDEのパレットも便利な機能です。パレットには、コーディ
</html>
----
-2. テキスト・フィールドの目的を説明するテキストを追加します。次のテキストをコピーして、`<h1>`タグのすぐ下に貼り付けることもできます。
+
+[start=2]
+. テキスト・フィールドの目的を説明するテキストを追加します。次のテキストをコピーして、`<h1>`タグのすぐ下に貼り付けることもできます。
[source,html]
----
@@ -153,23 +161,31 @@ IDEのパレットも便利な機能です。パレットには、コーディ
then click on one of the selections to see composer details.</p>
----
-3. ページにHTMLフォームを追加します。この操作を行うには、IDEのパレットに表示されている要素を使用します。パレットが開いていない場合は、メイン・メニューから「ウィンドウ」>「パレット」を選択します。次に「HTMLフォーム」の下にある「フォーム」要素をクリックし、ページ内に追加した`<p>`タグの下までドラッグします。「挿入フォーム」ダイアログ・ボックスが表示されます。次の値を指定します。
+
+[start=3]
+. ページにHTMLフォームを追加します。この操作を行うには、IDEのパレットに表示されている要素を使用します。パレットが開いていない場合は、メイン・メニューから「ウィンドウ」>「パレット」を選択します。次に「HTMLフォーム」の下にある「フォーム」要素をクリックし、ページ内に追加した`<p>`タグの下までドラッグします。「挿入フォーム」ダイアログ・ボックスが表示されます。次の値を指定します。
* アクション: autocomplete
* メソッド: GET
* 名前: autofillform
+
image::images/insert-form.png[title="「挿入フォーム」ダイアログ"]
「OK」をクリックします。指定した属性を含むHTMLの`<form>`タグがページに挿入されます。(GETはデフォルトで適用されるので、明示的に宣言しません。)
-4. HTML表をページに追加します。パレットの「HTML」カテゴリの下で「表」要素をクリックし、`<form>`タグの間の位置までドラッグします。「挿入表」ダイアログ・ボックスが開きます。次の値を指定します。
+
+[start=4]
+. HTML表をページに追加します。パレットの「HTML」カテゴリの下で「表」要素をクリックし、`<form>`タグの間の位置までドラッグします。「挿入表」ダイアログ・ボックスが開きます。次の値を指定します。
* 行: 2
* 列: 2
* 境界線のサイズ: 0
* セルのパディング: 5
+
image::images/insert-table.png[title="「挿入表」ダイアログ"]
-5. ソース・エディタ内を右クリックし、「フォーマット」を選択します。これでコードの体裁が整います。フォームは次のようになります。
+
+[start=5]
+. ソース・エディタ内を右クリックし、「フォーマット」を選択します。これでコードの体裁が整います。フォームは次のようになります。
[source,xml]
----
@@ -196,14 +212,18 @@ image::images/insert-table.png[title="「挿入表」ダイアログ"]
</form>
----
-6. 表の1行目の1列目に次のテキストを入力します(*太字*部分が変更箇所)。
+
+[start=6]
+. 表の1行目の1列目に次のテキストを入力します(*太字*部分が変更箇所)。
[source,xml]
----
<td>*<strong>Composer Name:</strong>*</td>
----
-7. 1行目の2列目では、パレットから「テキスト入力」フィールドをドラッグしないで、次のコードを手動で入力します(*太字*部分が変更箇所)。
+
+[start=7]
+. 1行目の2列目では、パレットから「テキスト入力」フィールドをドラッグしないで、次のコードを手動で入力します(*太字*部分が変更箇所)。
[source,xml]
----
@@ -217,6 +237,7 @@ image::images/insert-table.png[title="「挿入表」ダイアログ"]
----
入力するときは、IDEに組み込まれているコード補完サポートを使用してみてください。たとえば、「`<i`」と入力して[Ctrl]-[Space]を押します。カーソルの下に候補のリストが表示され、選択されている要素の説明が上のボックスに表示されます。ソース・エディタでコーディングしているときはいつでも[Ctrl]-[Space]を押して候補を表示できます。候補が1つのみの場合は、[Ctrl]-[Space]を押すと要素名が自動的に補完されます。
+
image::images/code-completion.png[title="エディタでの[Ctrl]-[Space]の押下によるコード補完およびドキュメントのサポートの呼出し"]
入力した`onkeyup`属性はJavaScript関数`doCompletion()`を指しています。この関数は、フォームのテキスト・フィールド内でキーが押されるたびにコールされ、Ajaxの<<flow-diagram,フロー図>>に示したJavaScriptコールに対応します。
@@ -270,7 +291,9 @@ function initRequest() {
上のコードは、Firefox 3およびInternet Explorerバージョン6と7の単純なブラウザ互換性チェックを行います。互換性の問題に対してさらに堅牢なコードを取り込むには、link:http://www.quirksmode.org[+http://www.quirksmode.org+]のlink:http://www.quirksmode.org/js/detect.html[+ブラウザ検出スクリプト+]を使用することを検討してください。
-4. indexページに戻り、JavaScriptファイルへの参照を`<head>`タグの間に追加します。
+
+[start=4]
+. indexページに戻り、JavaScriptファイルへの参照を`<head>`タグの間に追加します。
[source,xml]
----
@@ -280,7 +303,9 @@ function initRequest() {
[Ctrl]-[Tab]を押すと、ソース・エディタ内で開いているページ間を簡単に切り替えることができます。
-5. `init()`へのコールを開始`<body>`タグ内に挿入します。
+
+[start=5]
+. `init()`へのコールを開始`<body>`タグ内に挿入します。
[source,java]
----
@@ -437,7 +462,9 @@ public class ComposerData {
「終了」をクリックすると、IDEによってクラスが作成され、ファイルがソース・エディタで開きます。
-3. ソース・エディタ内に、次のコードを貼り付けます。
+
+[start=3]
+. ソース・エディタ内に、次のコードを貼り付けます。
[source,java]
----
@@ -486,25 +513,41 @@ public class Composer {
1. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「新規」→「サーブレット」を選択して新規サーブレット・ウィザードを開きます。(「サーブレット」がデフォルトでポップアップ・メニューに表示されない場合は、「その他」を選択し、「Web」カテゴリから「サーブレット」を選択します。)
2. サーブレット名を`AutoCompleteServlet`にし、「パッケージ」フィールドのドロップダウン・リストから「`com.ajax`」を選択します。「次」をクリックします。
+
image::images/newservlet-name-location.png[]
-3. 「サーブレット・デプロイメントを構成」パネルで、URLパターンを*`/autocomplete`*にし、`XMLHttpRequest`オブジェクトで以前に設定したURLと一致するようにします。
+
+[start=3]
+. 「サーブレット・デプロイメントを構成」パネルで、URLパターンを*`/autocomplete`*にし、`XMLHttpRequest`オブジェクトで以前に設定したURLと一致するようにします。
+
image::images/newservlet-configure-deployment.png[]
このパネルによって、これらの詳細をデプロイメント・ディスクリプタに手動で追加する必要がなくなります。
-4. オプションで、「サーブレット情報をデプロイメント・ディスクリプタに追加」を選択します。これにより、プロジェクトがダウンロードしたサンプルと同じになります。最近のバージョンのIDEでは、サーブレットはデフォルトで`@WebServlet`注釈によって登録され、デプロイメント・ディスクリプタには登録されません。デプロイメント・ディスクリプタのかわりに`@WebServlet`注釈を使用した場合も、プロジェクトは引続き機能します。
-5. 「終了」をクリックします。サーブレットが作成され、ソース・エディタで開きます。
+
+[start=4]
+. オプションで、「サーブレット情報をデプロイメント・ディスクリプタに追加」を選択します。これにより、プロジェクトがダウンロードしたサンプルと同じになります。最近のバージョンのIDEでは、サーブレットはデフォルトで`@WebServlet`注釈によって登録され、デプロイメント・ディスクリプタには登録されません。デプロイメント・ディスクリプタのかわりに`@WebServlet`注釈を使用した場合も、プロジェクトは引続き機能します。
+
+[start=5]
+. 「終了」をクリックします。サーブレットが作成され、ソース・エディタで開きます。
オーバーライドする必要があるメソッドは、サーブレットで`autocomplete``GET`リクエストを処理する方法を定義する`doGet()`と、サービスを開始後にサーブレットからアプリケーション内の他のクラスにアクセスできるように`ServletContext`を初期化する`init()`のみです。
スーパー・クラスのメソッドは、IDEの「コードを挿入」ポップアップ・メニューを使用してオーバーライドできます。次の手順を実行して`init()`を実装します。
1. ソース・エディタで、`AutoCompleteServlet`クラスの宣言の下にカーソルを置きます。[Alt]-[Insert](Macでは[Ctrl]-[I])を押して「コードを生成」ポップアップ・メニューを開きます。
+
image::images/insert-code.png[title="ソース・エディタに表示された「コードを挿入」ポップアップ・メニュー"]
-2. 「メソッドをオーバーライド」を選択します。表示されるダイアログで、`AutoCompleteServlet`の継承元クラスがすべて表示されます。「GenericServlet」ノードを展開し、「`init(Servlet Config config)`」を選択します。
+
+[start=2]
+. 「メソッドをオーバーライド」を選択します。表示されるダイアログで、`AutoCompleteServlet`の継承元クラスがすべて表示されます。「GenericServlet」ノードを展開し、「`init(Servlet Config config)`」を選択します。
+
image::images/new-override.png[title="継承されたクラスが表示されたオーバーライド・ダイアログ"]
-3. 「OK」をクリックします。`init()`メソッドがソース・エディタに追加されます。
-4. `ServletContext`オブジェクトの変数を追加し、`init()`を変更します(*太字*部分が変更箇所)。
+
+[start=3]
+. 「OK」をクリックします。`init()`メソッドがソース・エディタに追加されます。
+
+[start=4]
+. `ServletContext`オブジェクトの変数を追加し、`init()`を変更します(*太字*部分が変更箇所)。
[source,java]
----
@@ -516,10 +559,13 @@ public void init(ServletConfig *config*) throws ServletException {
*this.context = config.getServletContext();*
}
----
-5. `ServletContext`のインポート文を追加します。そのためには、ソース・エディタの左マージンに表示される電球のアイコンをクリックします。
+
+[start=5]
+. `ServletContext`のインポート文を追加します。そのためには、ソース・エディタの左マージンに表示される電球のアイコンをクリックします。
+
image::images/import-hint.png[title="ソース・エディタの左マージンに表示されたインポートのヒント"]
-`doGet()`メソッドではリクエストのURLを解析し、データ・ストアからデータを取出し、XML形式でレスポンスを作成する必要があります。メソッドの宣言は、クラスの作成時に生成されています。これを表示するには、左マージンにある展開アイコン(image::images/expand-icon.png[])をクリックしてHttpServlet メソッドを展開する必要があります。
+`doGet()`メソッドではリクエストのURLを解析し、データ・ストアからデータを取出し、XML形式でレスポンスを作成する必要があります。メソッドの宣言は、クラスの作成時に生成されています。これを表示するには、左マージンにある展開アイコン(image:images/expand-icon.png[])をクリックしてHttpServlet メソッドを展開する必要があります。
1. `AutocompleteServlet`クラスの宣言の下に次の変数宣言を追加します。
@@ -530,7 +576,9 @@ private ComposerData compData = new ComposerData();
private HashMap composers = compData.getComposers();
----
これで、すべての作曲家データの`HashMap`が作成されます。これは`doGet()`で使用されます。
-2. `doGet()`までスクロールし、次のようにメソッドを実装します。
+
+[start=2]
+. `doGet()`までスクロールし、次のようにメソッドを実装します。
[source,xml]
----
@@ -701,7 +749,9 @@ function callback() {
</tr>
----
表の2番目の行は、別のHTML表を含んでいます。この表は、作曲家の名前を挿入するためのオートコンプリート・ボックスを表します。
-2. `javascript.js`をソース・エディタで開き、次の3つの変数をファイルの先頭に追加します。
+
+[start=2]
+. `javascript.js`をソース・エディタで開き、次の3つの変数をファイルの先頭に追加します。
[source,java]
----
@@ -710,7 +760,9 @@ var completeField;
var completeTable;
var autoRow;
----
-3. 次の*太字*の行を`init()`関数に追加します。
+
+[start=3]
+. 次の*太字*の行を`init()`関数に追加します。
[source,java]
----
@@ -723,7 +775,9 @@ function init() {
}
----
`init()`の目的の1つは、indexページのDOMを変更する他の関数からindexページ内の要素にアクセスできるようにすることです。
-4. `appendComposer()`を`javascript.js`に追加します。
+
+[start=4]
+. `appendComposer()`を`javascript.js`に追加します。
[source,java]
----
@@ -756,7 +810,9 @@ function appendComposer(firstName,lastName,composerId) {
}
----
この関数は、表の新しい行を作成し、3つのパラメータによって関数に渡されたデータを使用して作曲家へのリンクを挿入してから、行をindexページの`complete-table`要素に挿入します。
-5. `getElementY()`を`javascript.js`に追加します。
+
+[start=5]
+. `getElementY()`を`javascript.js`に追加します。
[source,java]
----
@@ -780,7 +836,9 @@ function getElementY(element){
*注意: *link:http://www.quirksmode.org/[+http://www.quirksmode.org/+]にある`offset`に関するlink:http://www.quirksmode.org/js/findpos.html[+説明+]を参照してください。
-6. `clearTable()`を`javascript.js`に追加します。
+
+[start=6]
+. `clearTable()`を`javascript.js`に追加します。
[source,java]
----
@@ -795,7 +853,9 @@ function clearTable() {
}
----
この関数は`complete-table`要素の表示を'none'に設定し(非表示にし)、作成された既存の作曲家の名前エントリを除去します。
-7. `callback()`関数を変更して、サーバーから新しいデータを受け取るたびに`clearTable()`をコールするようにします。オートコンプリート・ボックスに作曲家のエントリがある場合は、新しいエントリが入力される前に除去されます。
+
+[start=7]
+. `callback()`関数を変更して、サーバーから新しいデータを受け取るたびに`clearTable()`をコールするようにします。オートコンプリート・ボックスに作曲家のエントリがある場合は、新しいエントリが入力される前に除去されます。
[source,java]
----
@@ -811,7 +871,9 @@ function callback() {
}
}
----
-8. `parseMessages()`を`javascript.js`に追加します。
+
+[start=8]
+. `parseMessages()`を`javascript.js`に追加します。
[source,java]
----
@@ -911,8 +973,12 @@ function parseMessages(responseXML) {
*注意:*indexページが ``index.jsp`` の場合、indexページに戻るためのリンクを変更する必要があります。
-5. プロジェクトの「Webページ」フォルダに、別のJSPファイルを作成します。ファイルに`error.jsp`という名前を付けます。
-6. `error.jsp`内のプレースホルダ・コードを次のコードで置き換えます。
+
+[start=5]
+. プロジェクトの「Webページ」フォルダに、別のJSPファイルを作成します。ファイルに`error.jsp`という名前を付けます。
+
+[start=6]
+. `error.jsp`内のプレースホルダ・コードを次のコードで置き換えます。
[source,html]
----
@@ -944,6 +1010,7 @@ function parseMessages(responseXML) {
これで、アプリケーションの機能に必要なコードが完成しました。作業の結果を確認するため、今すぐアプリケーションを実行してみてください。
1. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。プロジェクトが再コンパイルされ、ターゲット・サーバーにデプロイされます。ブラウザが開き、indexページが表示されます。
+
image::images/no-css.png[title="スタイル・シートなしでの正常なデプロイメント"]
アプリケーションにスタイル・シートを追加するには、`.css`ファイルを作成し、プレゼンテーション・ページからそのファイルにリンクします。`.css`ファイルで作業する場合、IDEには、コード補完機能や、スタイルシート・ルールの生成と編集に役立つ次のウィンドウが提供されています。
@@ -959,7 +1026,9 @@ image::images/no-css.png[title="スタイル・シートなしでの正常なデ
新規ファイルが作成され、エディタで開きます。
-3. エディタで`stylesheet.css`に次のルールを入力します。IDEのコード補完サポートを利用するには、候補を呼び出したい場所で[Ctrl]-[Space]を押します。
+
+[start=3]
+. エディタで`stylesheet.css`に次のルールを入力します。IDEのコード補完サポートを利用するには、候補を呼び出したい場所で[Ctrl]-[Space]を押します。
[source,java]
----
@@ -1027,19 +1096,26 @@ a:hover {
font-size: 1.2em;
}
----
-4. 「ウィンドウ」→「Web」→「CSSスタイル」を選択して、「CSSスタイル」ウィンドウを開きます。
+
+[start=4]
+. 「ウィンドウ」→「Web」→「CSSスタイル」を選択して、「CSSスタイル」ウィンドウを開きます。
+
image::images/css-styles-window.png[title="h1ルールのプロパティを表示している「CSSスタイル」ウィンドウ"]
-「CSSスタイル」ウィンドウを使用して、プロパティをすばやく表示し、スタイル・ルールを編集できます。「CSSスタイル」ウィンドウの上部ペインでルールを選択すると、下部ペインにルールのプロパティが表示されます。上部ペインのツールバーで「CSSルールの編集」アイコン(image::images/newcssrule.png[title="新規CSSプロパティ・アイコン"])をクリックして、スタイルシートにCSSルールを追加できます。プロパティ・シートを編集して下部ペインでルールを変更したり、下部ペインのツールバーで「プロパティの追加」アイコン(image::images/newcssproperty.png[title="新規CSSプロパティ・アイコン"])をクリックしてプロパティを追加したりできます。
+「CSSスタイル」ウィンドウを使用して、プロパティをすばやく表示し、スタイル・ルールを編集できます。「CSSスタイル」ウィンドウの上部ペインでルールを選択すると、下部ペインにルールのプロパティが表示されます。上部ペインのツールバーで「CSSルールの編集」アイコン(image:images/newcssrule.png[title="新規CSSプロパティ・アイコン"])をクリックして、スタイルシートにCSSルールを追加できます。プロパティ・シートを編集して下部ペインでルールを変更したり、下部ペインのツールバーで「プロパティの追加」アイコン(image:images/newcssproperty.png[title="新規CSSプロパティ・アイコン"])をクリックしてプロパティを追加したりできます。
+
-5. ソース・エディタでindexページに切り替え、`<head>`タグの間にスタイル・シートへの参照を追加します。
+[start=5]
+. ソース・エディタでindexページに切り替え、`<head>`タグの間にスタイル・シートへの参照を追加します。
[source,java]
----
<link rel="stylesheet" type="text/css" href="stylesheet.css">
----
-6. スタイル・シートで定義されている`popupBox`クラスを`complete-table`要素に追加します(*太字*部分が変更箇所)。
+
+[start=6]
+. スタイル・シートで定義されている`popupBox`クラスを`complete-table`要素に追加します(*太字*部分が変更箇所)。
[source,xml]
----
@@ -1079,7 +1155,9 @@ HTTPモニターを使用する前に、使用しているサーバーでモニ
*注意:* このオプションは、GlassFishサーバーでは「共通」タブに表示されます。Tomcatでは「接続」タブに表示されます。
-3. 「閉じる」をクリックします。
+
+[start=3]
+. 「閉じる」をクリックします。
サーバーが実行中の場合、変更を有効にするにはサーバーを再起動する必要があります。サーバーを再起動するには、「サービス」ウィンドウを開き(「ウィンドウ」>「サービス」)、「サーバー」ノードの下で使用しているサーバーを右クリックし、「再起動」を選択します。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_pt_BR.asciidoc
index a477e29..aeb6d77 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_pt_BR.asciidoc
@@ -91,10 +91,16 @@ Comece criando um novo projeto de aplicação Web no IDE. O IDE contém modelos
1. Escolha Arquivo > Novo Projeto. Em Categorias, selecione Java Web. Em Projetos, selecione Aplicação Web e clique em Próximo.
2. No painel Nome e Localização, digite `MyAjaxApp` como o Nome do Projeto. O campo Localização do Projeto permite que você especifique a localização do projeto em seu computador. Deixe as outras opções como default e clique em Próximo.
+
image::images/java-name-location.png[title="Especifique o nome e a localização do seu projeto de aplicação"]
-3. No painel Servidor e Definições, selecione o servidor em que deseja implantar a aplicação. Somente os servidores registrados no IDE estão listados.
+
+[start=3]
+. No painel Servidor e Definições, selecione o servidor em que deseja implantar a aplicação. Somente os servidores registrados no IDE estão listados.
+
image::images/java-server-settings.png[title="Especifique o servidor no qual sua aplicação será implantada"]
-4. Aceite as outras definições default e clique em Finalizar. O projeto será gerado no sistema de arquivos e aberto no IDE.
+
+[start=4]
+. Aceite as outras definições default e clique em Finalizar. O projeto será gerado no sistema de arquivos e aberto no IDE.
Quando os projetos baseados em Java são criados, é gerado automaticamente um script de construção link:http://ant.apache.org/[+Ant+] que lhe permite compilar o projeto de forma que ele possa ser implantado imediatamente e executado em um servidor que tenha sido registrado no IDE.
@@ -140,7 +146,9 @@ Você pode exibir ícones grandes (como exibido aqui) clicando com o botão dire
</html>
----
-2. Adicione algum texto explicativo para descrever a finalidade do campo de texto. Você pode copiar e colar no texto a seguir, no ponto logo abaixo das tags `<h1>`:
+
+[start=2]
+. Adicione algum texto explicativo para descrever a finalidade do campo de texto. Você pode copiar e colar no texto a seguir, no ponto logo abaixo das tags `<h1>`:
[source,html]
----
@@ -153,23 +161,31 @@ Você pode exibir ícones grandes (como exibido aqui) clicando com o botão dire
then click on one of the selections to see composer details.</p>
----
-3. Adicione um form HTML à página. Faça isso utilizando os elementos listados na Paleta do IDE. Se a Paleta não estiver aberta, selecione Janela > Paleta no menu principal. Em seguida, em Forms HTML, clique e arraste um elemento Form para a página, um ponto abaixo das tags `<p>` que você acabou de adicionar. A caixa de diálogo Inserir Form será aberta. Especifique o seguinte:
+
+[start=3]
+. Adicione um form HTML à página. Faça isso utilizando os elementos listados na Paleta do IDE. Se a Paleta não estiver aberta, selecione Janela > Paleta no menu principal. Em seguida, em Forms HTML, clique e arraste um elemento Form para a página, um ponto abaixo das tags `<p>` que você acabou de adicionar. A caixa de diálogo Inserir Form será aberta. Especifique o seguinte:
* Ação: autocompletar código
* Método: GET
* Nome: autofillform
+
image::images/insert-form.png[title="Caixa de diálogo Inserir form"]
Clique em OK. As tags HTML `<form>` serão inseridas na página que contém os atributos especificados. (GET é aplicado por default e, portanto, não é declarado explicitamente.)
-4. Adicione uma tabela HTML à página. Na categoria HTML na Paleta, clique em um elemento Tabela e arraste-o para um ponto entre as tags `<form>`. A caixa de diálogo Inserir Tabela será aberta. Especifique o seguinte:
+
+[start=4]
+. Adicione uma tabela HTML à página. Na categoria HTML na Paleta, clique em um elemento Tabela e arraste-o para um ponto entre as tags `<form>`. A caixa de diálogo Inserir Tabela será aberta. Especifique o seguinte:
* Linhas: 2
* Colunas: 2
* Tamanho da Borda: 0
* Preenchimento de Células: 5
+
image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]
-5. Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar. Isso limpa o código. Seu form agora deve ser semelhante ao abaixo:
+
+[start=5]
+. Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar. Isso limpa o código. Seu form agora deve ser semelhante ao abaixo:
[source,xml]
----
@@ -196,14 +212,18 @@ image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]
</form>
----
-6. Na primeira linha da tabela, digite o seguinte texto na primeira coluna (alterações em *negrito*):
+
+[start=6]
+. Na primeira linha da tabela, digite o seguinte texto na primeira coluna (alterações em *negrito*):
[source,xml]
----
<td>*<strong>Composer Name:</strong>*</td>
----
-7. Na segunda coluna da primeira linha, em vez de arrastar um campo Entrada de Texto da Paleta, digite o código abaixo manualmente (alterações em *negrito*):
+
+[start=7]
+. Na segunda coluna da primeira linha, em vez de arrastar um campo Entrada de Texto da Paleta, digite o código abaixo manualmente (alterações em *negrito*):
[source,xml]
----
@@ -217,6 +237,7 @@ image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]
----
Enquanto digita, tente utilizar o suporte à funcionalidade autocompletar código incorporado do IDE. Por exemplo, digite `<i` e, em seguida, pressione Ctrl-Espaço. Uma lista de opções sugeridas será exibida abaixo do seu cursor e uma descrição do elemento selecionado aparecerá em uma caixa acima. De fato, você pode pressionar Ctrl-Espaço a qualquer momento em que estiver codificando no Editor de Código-Fonte para ter acesso às opções possíveis. Além disso, caso só haja uma opção possível, [...]
+
image::images/code-completion.png[title="Pressione Ctrl-Espaço no editor para chamar o suporte a autocompletar código e à documentação"]
O atributo `onkeyup` que você digitou acima aponta para uma função JavaScript chamada `doCompletion()`. Essa função é chamada toda vez que uma tecla é pressionada no campo de texto do form, e mapeia para a chamada JavaScript representada no <<flow-diagram,fluxograma>> do Ajax acima.
@@ -270,7 +291,9 @@ function initRequest() {
O código acima executa um verificação simples de compatibilidade do browser para o Firefox 3 e para o Internet Explorer versões 6 e 7). Se desejar incorporar um código mais robusto para problemas de compatibilidade, considere usar este link:http://www.quirksmode.org/js/detect.html[+script de detecção de browser+] disponível em link:http://www.quirksmode.org[+http://www.quirksmode.org+].
-4. Volte para a página do índice e adicione uma referência ao arquivo JavaScript entre as tags `<head>`.
+
+[start=4]
+. Volte para a página do índice e adicione uma referência ao arquivo JavaScript entre as tags `<head>`.
[source,xml]
----
@@ -280,7 +303,9 @@ O código acima executa um verificação simples de compatibilidade do browser p
Você pode alternar rapidamente entre as páginas abertas no Editor de Código-fonte, pressionando Ctrl-Tab.
-5. Insira uma chamada a `init()` na tag de abertura `<body>`.
+
+[start=5]
+. Insira uma chamada a `init()` na tag de abertura `<body>`.
[source,java]
----
@@ -437,7 +462,9 @@ Você observará que uma advertência será exibida na margem esquerda do editor
Quando você clica em Finalizar, o IDE cria a classe e abre o arquivo no Editor de Código-fonte.
-3. No Editor de Código-fonte, cole o seguinte código:
+
+[start=3]
+. No Editor de Código-fonte, cole o seguinte código:
[source,java]
----
@@ -486,25 +513,41 @@ Crie um servlet para tratar o URL `autocomplete` que é recebido pela solicitaç
1. Clique com o botão direito do mouse no nó do projeto na janela Projetos e escolha Novo > Servlet para abrir o assistente para Novo Servlet. (Escolha Outros e selecione Servlet na categoria da Web se Servlet não for exibido por default no menu pop-up).
2. Nomeie o servlet `AutoCompleteServlet` e selecione `com.ajax` na lista drop-down no campo Pacote. Clique em Próximo.
+
image::images/newservlet-name-location.png[]
-3. No painel Configurar a Implantação do Servlet, altere o padrão do URL para *`/autocomplete`* para que ele corresponda ao URL que foi definido anteriormente no objeto `XMLHttpRequest`.
+
+[start=3]
+. No painel Configurar a Implantação do Servlet, altere o padrão do URL para *`/autocomplete`* para que ele corresponda ao URL que foi definido anteriormente no objeto `XMLHttpRequest`.
+
image::images/newservlet-configure-deployment.png[]
Esse painel elimina a necessidade de adicionar manualmente esses detalhes no descritor de implantação.
-4. como opção, selecione "Adicionar informações do servlet ao descritor da implantação". Isso faz com que seu projeto seja o mesmo da amostra da qual fez download. Com versões posteriores do IDE, por default o servlet é registrado por uma anotação `@WebServlet`, em vez de um descritor da implantação. O projeto ainda funcionará se você usar a anotação `@WebServlet`, em vez de um descritor de implantação.
-5. Clique em Finalizar. O servlet será criado e aberto no Editor de Código-fonte.
+
+[start=4]
+. como opção, selecione "Adicionar informações do servlet ao descritor da implantação". Isso faz com que seu projeto seja o mesmo da amostra da qual fez download. Com versões posteriores do IDE, por default o servlet é registrado por uma anotação `@WebServlet`, em vez de um descritor da implantação. O projeto ainda funcionará se você usar a anotação `@WebServlet`, em vez de um descritor de implantação.
+
+[start=5]
+. Clique em Finalizar. O servlet será criado e aberto no Editor de Código-fonte.
Os únicos métodos que você precisa substituir são `doGet()`, para definir como o servlet trataa solicitação `autocomplete` `GET`, e `init()`, que precisa iniciar um `ServletContext` de forma que o servlet possa acessar outras classes na aplicação, depois de ter sido posto em serviço.
Você pode substituir métodos de superclasses usando o menu pop-up Inserir Código do IDE. Implemente `init()` executando as etapas a seguir.
1. Coloque o seu cursor embaixo da declaração de classe `AutoCompleteServlet` no Editor de Código-fonte. Pressione Alt-Insert (Ctrl-I no Mac) para abrir o menu pop-up Gerar Código.
+
image::images/insert-code.png[title="Menu pop-up Inserir Código exibido no Editor de Código-fonte"]
-2. Selecione Substituir Método. Na caixa de diálogo que é exibida, todas as classes que `AutoCompleteServlet` herda são exibidas. Expanda o nó GenericServlet e selecione `init(Servlet Config config)`.
+
+[start=2]
+. Selecione Substituir Método. Na caixa de diálogo que é exibida, todas as classes que `AutoCompleteServlet` herda são exibidas. Expanda o nó GenericServlet e selecione `init(Servlet Config config)`.
+
image::images/new-override.png[title="A caixa de diálogo Substituir lista classes herdadas"]
-3. Clique em OK. O método `init()` é adicionado no Editor de Código-fonte.
-4. Adicione uma variável para um objeto `ServletContext` e modifique `init()` (alterações em *negrito*):
+
+[start=3]
+. Clique em OK. O método `init()` é adicionado no Editor de Código-fonte.
+
+[start=4]
+. Adicione uma variável para um objeto `ServletContext` e modifique `init()` (alterações em *negrito*):
[source,java]
----
@@ -516,10 +559,13 @@ public void init(ServletConfig *config*) throws ServletException {
*this.context = config.getServletContext();*
}
----
-5. Adicione uma instrução de importação para `ServletContext`. Você pode fazer isso clicando no ícone da lâmpada exibido na margem esquerda do Editor de Código-fonte
+
+[start=5]
+. Adicione uma instrução de importação para `ServletContext`. Você pode fazer isso clicando no ícone da lâmpada exibido na margem esquerda do Editor de Código-fonte
+
image::images/import-hint.png[title="Dicas de importação são exibidas na margem esquerda do Editor de Código-fonte"]
-O método `doGet()` precisa fazer parsing do URL da solicitação, recuperar dados do armazenamento de dados e preparar uma resposta em formato XML. Note que a declaração do método foi gerada quando você criou a classe. Para exibi-la, pode ser necessário expandir métodos HttpServlet clicando no ícone de expansão (image::images/expand-icon.png[]) na margem esquerda.
+O método `doGet()` precisa fazer parsing do URL da solicitação, recuperar dados do armazenamento de dados e preparar uma resposta em formato XML. Note que a declaração do método foi gerada quando você criou a classe. Para exibi-la, pode ser necessário expandir métodos HttpServlet clicando no ícone de expansão (image:images/expand-icon.png[]) na margem esquerda.
1. Adicione as declarações de variável a seguir embaixo da declaração da classe `AutocompleteServlet`.
@@ -530,7 +576,9 @@ private ComposerData compData = new ComposerData();
private HashMap composers = compData.getComposers();
----
Isso cria um `HashMap` de todos os dados do composer, que é, em seguida, utilizado por `doGet()`.
-2. Role para baixo para `doGet()` e implemente o método da seguinte forma:
+
+[start=2]
+. Role para baixo para `doGet()` e implemente o método da seguinte forma:
[source,xml]
----
@@ -701,7 +749,9 @@ A função `parseMessages()` trata os dados XML de entrada. Fazendo isso, ela co
</tr>
----
A segunda linha da tabela contém outra tabela HTML. Essa tabela representa a caixa autocompletar que será utilizada para preencher os nomes do composer.
-2. Abra `javascript.js` no Editor de Código-fonte e as três variáveis seguintes no início do arquivo.
+
+[start=2]
+. Abra `javascript.js` no Editor de Código-fonte e as três variáveis seguintes no início do arquivo.
[source,java]
----
@@ -710,7 +760,9 @@ var completeField;
var completeTable;
var autoRow;
----
-3. Adicione as seguintes linhas (em *negrito*) na função `init()`.
+
+[start=3]
+. Adicione as seguintes linhas (em *negrito*) na função `init()`.
[source,java]
----
@@ -723,7 +775,9 @@ function init() {
}
----
Uma finalidade de `init()` é tornar os elementos que estão dentro da página de índice acessíveis para outras funções que modificarão o DOM da página de índice.
-4. Adicione `appendComposer()` a `javascript.js`.
+
+[start=4]
+. Adicione `appendComposer()` a `javascript.js`.
[source,java]
----
@@ -756,7 +810,9 @@ function appendComposer(firstName,lastName,composerId) {
}
----
Essa função cria uma nova linha da tabela, insere um link em um criador utilizando os dados passados para a função por meio de seus três parâmetros e insere a linha no elemento `complete-table` da página de índice.
-5. Adicione `getElementY()` a `javascript.js`.
+
+[start=5]
+. Adicione `getElementY()` a `javascript.js`.
[source,java]
----
@@ -780,7 +836,9 @@ Essa função é aplicada para localizar a posição vertical do elemento pai. I
*Observação: *Consulte link:http://www.quirksmode.org/js/findpos.html[+esta explicação+] de `offset` em link:http://www.quirksmode.org/[+http://www.quirksmode.org/+].
-6. Adicione `clearTable()` a `javascript.js`.
+
+[start=6]
+. Adicione `clearTable()` a `javascript.js`.
[source,java]
----
@@ -795,7 +853,9 @@ function clearTable() {
}
----
Essa função define a exibição do elemento `complete-table` como "none" (ou seja, o torna invisível) e remove quaisquer entradas de nome de criador existentes que tenham sido criadas.
-7. Modifique a função `callback()` para que chame `clearTable()` cada vez que novos dados forem recebidos do servidor. Quaisquer entradas do criador que já existam na caixa autocompletar serão, portanto, removidas, antes que esta seja preenchida com novas entradas.
+
+[start=7]
+. Modifique a função `callback()` para que chame `clearTable()` cada vez que novos dados forem recebidos do servidor. Quaisquer entradas do criador que já existam na caixa autocompletar serão, portanto, removidas, antes que esta seja preenchida com novas entradas.
[source,java]
----
@@ -811,7 +871,9 @@ function callback() {
}
}
----
-8. Adicione `parseMessages()` a `javascript.js`.
+
+[start=8]
+. Adicione `parseMessages()` a `javascript.js`.
[source,java]
----
@@ -911,8 +973,12 @@ Para exibir os resultados, você precisa de um arquivo JSP chamado `composers.js
*Observação.* Você precisará alterar o link para voltar à página de índice, se sua página de índice for ``index.jsp`` .
-5. Crie outro arquivo JSP na pasta Páginas Web do projeto. Nomeie o arquivo de `error.jsp`.
-6. Substitua o código do placeholder no `error.jsp` pelo seguinte código:
+
+[start=5]
+. Crie outro arquivo JSP na pasta Páginas Web do projeto. Nomeie o arquivo de `error.jsp`.
+
+[start=6]
+. Substitua o código do placeholder no `error.jsp` pelo seguinte código:
[source,html]
----
@@ -944,6 +1010,7 @@ Para exibir os resultados, você precisa de um arquivo JSP chamado `composers.js
Nesse estágio, você concluiu todo o código necessário para a funcionalidade da aplicação. Para ver os resultados dos seus esforços, tente executar a aplicação agora.
1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Executar. O projeto será recompilado e implantado no servidor de destino. Seu browser será aberto e você poderá ver a página de índice.
+
image::images/no-css.png[title="Implantação com sucesso sem folha de estilo"]
Para adicionar uma folha de estilo à sua aplicação, basta criar um arquivo `.css` e vinculá-lo a partir da(s) página(s) da sua apresentação. Quando você trabalha em arquivos `.css`, o IDE oferece o suporte para autocompletar código. assim como as seguintes janelas, para ajudá-lo a gerar e editar regras de folhas de estilo:
@@ -959,7 +1026,9 @@ Para adicionar uma folha de estilo à sua aplicação execute as etapas a seguir
O movo arquivo será criado e aberto no editor.
-3. Digite as seguintes regras em `stylesheet.css`, no editor. Você pode utilizar o suporte à funcionalidade autocompletar código do IDE pressionando Ctrl-Espaço nos pontos em que desejar acionar sugestões.
+
+[start=3]
+. Digite as seguintes regras em `stylesheet.css`, no editor. Você pode utilizar o suporte à funcionalidade autocompletar código do IDE pressionando Ctrl-Espaço nos pontos em que desejar acionar sugestões.
[source,java]
----
@@ -1027,19 +1096,26 @@ a:hover {
font-size: 1.2em;
}
----
-4. Abra a janela Estilos de CSS escolhendo Janela > Web > Estilos CSS.
+
+[start=4]
+. Abra a janela Estilos de CSS escolhendo Janela > Web > Estilos CSS.
+
image::images/css-styles-window.png[title="Janela Estilos de CSS exibindo as propriedades de regra h1"]
-Você pode usar a janela Estilos de CSS para exibir rapidamente as propriedades e editar as regras de estilo. Quando você seleciona uma regra no painel superior da janela Estilo de CSS, pode ver as propriedades da regra no painel inferior. Você pode adicionar uma Regra de CSS à folha de estilos clicando no ícone Editar Regras de CSS (image::images/newcssrule.png[title="Ícone Nova Propriedade de CSS"]) na barra de ferramentas do painel superior. Você pode modificar as regras no painel infe [...]
+Você pode usar a janela Estilos de CSS para exibir rapidamente as propriedades e editar as regras de estilo. Quando você seleciona uma regra no painel superior da janela Estilo de CSS, pode ver as propriedades da regra no painel inferior. Você pode adicionar uma Regra de CSS à folha de estilos clicando no ícone Editar Regras de CSS (image:images/newcssrule.png[title="Ícone Nova Propriedade de CSS"]) na barra de ferramentas do painel superior. Você pode modificar as regras no painel infer [...]
+
-5. Alterne para a página no Editor de Código-fonte, e adicione uma referência à folha de estilo entre as tags `<head>`.
+[start=5]
+. Alterne para a página no Editor de Código-fonte, e adicione uma referência à folha de estilo entre as tags `<head>`.
[source,java]
----
<link rel="stylesheet" type="text/css" href="stylesheet.css">
----
-6. Adicione a classe `popupBox` que está definida na folha de estilo ao elemento `complete-table` (alterações em *negrito*).
+
+[start=6]
+. Adicione a classe `popupBox` que está definida na folha de estilo ao elemento `complete-table` (alterações em *negrito*).
[source,xml]
----
@@ -1079,7 +1155,9 @@ Antes de começar a utilizar o monitor HTTP, você deve primeiro ativá-lo no se
*Observação:* essa opção é exibida na guia Comum do GlassFish Server. Para Tomcat, ela reside na guia Conexão.
-3. Clique em Fechar.
+
+[start=3]
+. Clique em Fechar.
Se o servidor já estiver em execução, você precisará reiniciá-lo para permitir que as alterações tenham efeito. Você pode reiniciar o servidor, abrindo a janela Serviços (Janela > Serviços) e, em seguida, clicando com o botão direito do mouse no servidor embaixo do nó Servidores e selecionando Reiniciar.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_ru.asciidoc
index 3e057c0..8ca6818 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_ru.asciidoc
@@ -91,10 +91,16 @@ image::images/ajax-process-flow.png[title="Диаграма потоков пр
1. Выберите команду "Файл" > "Новый проект". В области "Категории" выберите "Java Web". В области "Projects" (Проекты) выберите "Web Application" (Веб-приложение) и нажмите кнопку "Next" (Далее).
2. На экране "Имя и расположение" введите `MyAjaxApp` в поле "Имя проекта". Поле "Project Location" позволяет указать местоположение проекта. Для всех остальных параметров примите значения по умолчанию и нажмите кнопку "Далее".
+
image::images/java-name-location.png[title="Укажите имя проекта и местоположение проекта приложения"]
-3. На панели "Сервер и параметры настройки" выберите сервер, на котором требуется выполнить развертывание приложения. В списке представлены только те серверы, которые зарегистрированы в среде IDE.
+
+[start=3]
+. На панели "Сервер и параметры настройки" выберите сервер, на котором требуется выполнить развертывание приложения. В списке представлены только те серверы, которые зарегистрированы в среде IDE.
+
image::images/java-server-settings.png[title="Выберите сервер, на котором требуется выполнить развертывание приложения"]
-4. Подтвердите остальные значения по умолчанию и нажмите кнопку "Готово". Проект создается в файловой системе и открывается в среде IDE.
+
+[start=4]
+. Подтвердите остальные значения по умолчанию и нажмите кнопку "Готово". Проект создается в файловой системе и открывается в среде IDE.
При создании веб-проектов на основе Java автоматически создается сценарий сборки link:http://ant.apache.org/[+Ant+], отвечающий за компиляцию проекта, что позволяет немедленно развернуть и запустить его на сервере, зарегистрированном в среде IDE.
@@ -140,7 +146,9 @@ image::images/palette.png[title="На палитре отображаются э
</html>
----
-2. Для описания назначения текстового поля следует добавить соответствующий пояснительный текст. Непосредственно под тегами `<h1>` можно скопировать и вставить следующий текст:
+
+[start=2]
+. Для описания назначения текстового поля следует добавить соответствующий пояснительный текст. Непосредственно под тегами `<h1>` можно скопировать и вставить следующий текст:
[source,html]
----
@@ -153,23 +161,31 @@ image::images/palette.png[title="На палитре отображаются э
then click on one of the selections to see composer details.</p>
----
-3. Добавьте к странице форму HTML. Для этого можно использовать элементы, содержащиеся в палитре среды IDE. Если палитра не открыта, выберите в главном меню "Окно" > "Палитра". Затем перейдите к узлу "Формы HTML", выберите элемент "Форма" и перетащите его на страницу под только что добавленные теги `<p>`. Появится диалоговое окно "Вставить форму". Введите следующее:
+
+[start=3]
+. Добавьте к странице форму HTML. Для этого можно использовать элементы, содержащиеся в палитре среды IDE. Если палитра не открыта, выберите в главном меню "Окно" > "Палитра". Затем перейдите к узлу "Формы HTML", выберите элемент "Форма" и перетащите его на страницу под только что добавленные теги `<p>`. Появится диалоговое окно "Вставить форму". Введите следующее:
* Действие: autocomplete
* Method: GET;
* Имя: autofillform
+
image::images/insert-form.png[title="Диалоговое окно 'Вставить форму'"]
Нажмите кнопку "ОК". Теги HTML `<form>` вставляются в страницу, содержащую указанные атрибуты. (Метод GET применяется по умолчанию, и, следовательно, не объявляется явно).
-4. Добавьте к странице таблицу HTML. В категории палитры "HTML" выберите элемент "Таблица" и перетащите его непосредственно под теги `<form>`. Откроется диалоговое окно "Вставить таблицу". Введите следующее:
+
+[start=4]
+. Добавьте к странице таблицу HTML. В категории палитры "HTML" выберите элемент "Таблица" и перетащите его непосредственно под теги `<form>`. Откроется диалоговое окно "Вставить таблицу". Введите следующее:
* Строк: 2
* Столбцов: 2
* Размер границы : 0
* Заполнение ячеек: 5
+
image::images/insert-table.png[title="Диалоговое окно 'Вставить таблицу'"]
-5. Щелкните правой кнопкой мыши редактор исходного кода и выберите команду "Форматировать". Последует выравнивание кода. Теперь форма должна выглядеть следующим образом:
+
+[start=5]
+. Щелкните правой кнопкой мыши редактор исходного кода и выберите команду "Форматировать". Последует выравнивание кода. Теперь форма должна выглядеть следующим образом:
[source,xml]
----
@@ -196,14 +212,18 @@ image::images/insert-table.png[title="Диалоговое окно 'Встав
</form>
----
-6. В первый столбец первой строки таблицы введите следующий текст (изменения выделены *полужирным шрифтом*):
+
+[start=6]
+. В первый столбец первой строки таблицы введите следующий текст (изменения выделены *полужирным шрифтом*):
[source,xml]
----
<td>*<strong>Composer Name:</strong>*</td>
----
-7. Во второй столбец первой строки вместо перетаскивания поля "Ввод текста" из палитры введите указанный ниже код (изменения выделены *полужирным* шрифтом):
+
+[start=7]
+. Во второй столбец первой строки вместо перетаскивания поля "Ввод текста" из палитры введите указанный ниже код (изменения выделены *полужирным* шрифтом):
[source,xml]
----
@@ -217,6 +237,7 @@ image::images/insert-table.png[title="Диалоговое окно 'Встав
----
При вводе кода можно использовать встроенную в среду IDE функцию автозавершения кода. Например, введите `<i`, а затем нажмите CTRL+ПРОБЕЛ. Список предлагаемых вариантов выбора отображается под курсором, а в расположенном выше поле появляется описание выбранного элемента. Для получения возможных вариантов выбора при написании кода достаточно в любой момент нажать в редакторе исходного кода сочетание клавиш CTRL+ПРОБЕЛ. Кроме того, при наличии единственного возможного варианта выбора нажат [...]
+
image::images/code-completion.png[title="Для вызова поддержки автозавершения кода и документации нажмите сочетание клавиш CTRL+ПРОБЕЛ в редакторе."]
Атрибут `onkeyup`, введенный выше, указывает на функцию JavaScript с именем `doCompletion()`. Эта функция вызывается при каждом нажатии клавиши в текстовом поле формы и соответствует вызову JavaScript на приведенной выше <<flow-diagram,блок-схеме>> Ajax.
@@ -270,7 +291,9 @@ function initRequest() {
С помощью этого кода выполняется простая проверка совместимости веб-браузеров Firefox 3 и Internet Explorer версий 6 и 7). Если требуется добавить более надежный код, устраняющий ошибки совместимости, используйте link:http://www.quirksmode.org/js/detect.html[+сценарий для определения браузера+] с веб-сайта link:http://www.quirksmode.org[+http://www.quirksmode.org+].
-4. Вернитесь к странице индекса и добавьте ссылку на файл JavaScript между тегами `<head>`.
+
+[start=4]
+. Вернитесь к странице индекса и добавьте ссылку на файл JavaScript между тегами `<head>`.
[source,xml]
----
@@ -280,7 +303,9 @@ function initRequest() {
Для быстрого перехода между страницами, открытыми в редакторе исходного кода, можно воспользоваться сочетанием клавиш CTRL+TAB.
-5. Вставьте вызов `init()` после открывающего тега `<body>`.
+
+[start=5]
+. Вставьте вызов `init()` после открывающего тега `<body>`.
[source,java]
----
@@ -437,7 +462,9 @@ public class ComposerData {
После нажатия кнопки 'Готово' в IDE создается класс, а файл открывается в редакторе исходного кода.
-3. В редакторе исходного кода вставьте следующий код:
+
+[start=3]
+. В редакторе исходного кода вставьте следующий код:
[source,java]
----
@@ -486,25 +513,41 @@ public class Composer {
1. Щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Создать' > 'Сервлет', чтобы открыть мастер создания сервлетов. (Выберите 'Другой' и выберите 'Сервлет' в меню 'Веб-категория', если сервлет не отображается по умолчанию во всплывающем меню).
2. Дайте сервлету имя `AutoCompleteServlet` и выберите `com.ajax` в раскрывающемся списке поля "Package". Нажмите кнопку 'Далее'.
+
image::images/newservlet-name-location.png[]
-3. На панели 'Настройка развертывания сервлета' измените шаблон адреса URL *`/autocomplete`* таким образом, чтобы он соответствовал адресу URL, заданному ранее в объекте `XMLHttpRequest`.
+
+[start=3]
+. На панели 'Настройка развертывания сервлета' измените шаблон адреса URL *`/autocomplete`* таким образом, чтобы он соответствовал адресу URL, заданному ранее в объекте `XMLHttpRequest`.
+
image::images/newservlet-configure-deployment.png[]
Использование этой панели позволяет пропустить этап добавления дополнительных сведений вручную к дескриптору развертывания.
-4. При желании выберите "Добавить информацию о сервлете в дескриптор развертывания". После выполнения этих действий созданный проект получится таким же, как загруженный пример. В последней версии среды IDE сервлет по умолчанию регистрируется аннотацией `@WebServlet` вместо регистрации в дескрипторе развертывания. Тем не менее, проект будет работать, если использовать аннотацию `@WebServlet` вместо дескриптора развертывания.
-5. Нажмите кнопку "Завершить". Сервлет будет создан и открыт в редакторе исходного кода.
+
+[start=4]
+. При желании выберите "Добавить информацию о сервлете в дескриптор развертывания". После выполнения этих действий созданный проект получится таким же, как загруженный пример. В последней версии среды IDE сервлет по умолчанию регистрируется аннотацией `@WebServlet` вместо регистрации в дескрипторе развертывания. Тем не менее, проект будет работать, если использовать аннотацию `@WebServlet` вместо дескриптора развертывания.
+
+[start=5]
+. Нажмите кнопку "Завершить". Сервлет будет создан и открыт в редакторе исходного кода.
Единственными методами, которые следует переопределить, являются метод `doGet()` для определения обработки сервлетом запроса `autocomplete` `GET` и метод `init()`, который должен инициировать `ServletContext` для того, чтобы сервлет имел доступ к другим классам приложения после его запуска.
Существует возможность переопределения методов из родительских классов с помощью контекстного меню "Вставить код" в среде IDE. Реализуйте `init()` , выполнив следующие шаги.
1. Поместите курсор в нижней части объявления класса `AutoCompleteServlet` в редакторе исходного кода. Нажмите ALT+INS (CTRL+I в Mac ОS) для открытия контекстного меню "Создать код".
+
image::images/insert-code.png[title="Всплывающее меню 'Вставить код' отображается в в редакторе исходного кода"]
-2. Выберите команду "Переопределить метод". В появившемся диалоговом окне отображаются все родительские классы сервлета `AutoCompleteServlet`. Разверните узел GenericServlet и выберите `init(Servlet Config config)`.
+
+[start=2]
+. Выберите команду "Переопределить метод". В появившемся диалоговом окне отображаются все родительские классы сервлета `AutoCompleteServlet`. Разверните узел GenericServlet и выберите `init(Servlet Config config)`.
+
image::images/new-override.png[title="В диалоговом окне 'Переопределить' указаны унаследованные классы"]
-3. Нажмите кнопку "ОК". Метод `init()` добавится в редактор исходного кода.
-4. Добавьте переменную для объекта `ServletContext` и измените метод `init()` (изменения выделены *полужирным* шрифтом):
+
+[start=3]
+. Нажмите кнопку "ОК". Метод `init()` добавится в редактор исходного кода.
+
+[start=4]
+. Добавьте переменную для объекта `ServletContext` и измените метод `init()` (изменения выделены *полужирным* шрифтом):
[source,java]
----
@@ -516,10 +559,13 @@ public void init(ServletConfig *config*) throws ServletException {
*this.context = config.getServletContext();*
}
----
-5. Добавьте оператор импорта для объекта `ServletContext`. Это можно сделать, выбрав значок лампочки, который отображается на экране в левом поле редактора исходного кода.
+
+[start=5]
+. Добавьте оператор импорта для объекта `ServletContext`. Это можно сделать, выбрав значок лампочки, который отображается на экране в левом поле редактора исходного кода.
+
image::images/import-hint.png[title="Подсказки импорта отображаются в левом поле редактора исходного кода"]
-Метод `doGet()` должен преобразовать URL-адрес запроса, извлечь данные из хранилища данных и подготовить ответ в формате XML. Следует отметить, что объявление метода было сгенерировано при создании класса. Для просмотра, возможно, потребуется расширить методы HttpServlet, щелкнув значок развертывания в левом поле (image::images/expand-icon.png[]).
+Метод `doGet()` должен преобразовать URL-адрес запроса, извлечь данные из хранилища данных и подготовить ответ в формате XML. Следует отметить, что объявление метода было сгенерировано при создании класса. Для просмотра, возможно, потребуется расширить методы HttpServlet, щелкнув значок развертывания в левом поле (image:images/expand-icon.png[]).
1. Добавьте к классу следующие объявления переменных в нижней части объявления класса `AutocompleteServlet`:
@@ -530,7 +576,9 @@ private ComposerData compData = new ComposerData();
private HashMap composers = compData.getComposers();
----
При этом создается хранилище `HashMap`, включающее все данные о композиторах, которое затем используется методом `doGet()`.
-2. Выполните прокрутку вниз до метода `doGet()` и реализуйте его следующим образом:
+
+[start=2]
+. Выполните прокрутку вниз до метода `doGet()` и реализуйте его следующим образом:
[source,xml]
----
@@ -701,7 +749,9 @@ function callback() {
</tr>
----
Вторая строка таблицы содержит еще одну таблицу HTML. Эта таблица представляет поле автозавершения, используемое для автоматического ввода полных имен композиторов.
-2. Откройте `javascript.js` в редакторе исходного кода и добавьте к первому фрагменту файла три следующих переменных:
+
+[start=2]
+. Откройте `javascript.js` в редакторе исходного кода и добавьте к первому фрагменту файла три следующих переменных:
[source,java]
----
@@ -710,7 +760,9 @@ var completeField;
var completeTable;
var autoRow;
----
-3. Добавьте следующие строки (выделенные *полужирным шрифтом*) к функции `init()`.
+
+[start=3]
+. Добавьте следующие строки (выделенные *полужирным шрифтом*) к функции `init()`.
[source,java]
----
@@ -723,7 +775,9 @@ function init() {
}
----
Одной из целей `init()` является предоставление доступа к элементам страницы индекса для других функций, используемых в целях изменения DOM страницы индекса.
-4. Добавьте `appendComposer()` в `javascript.js`.
+
+[start=4]
+. Добавьте `appendComposer()` в `javascript.js`.
[source,java]
----
@@ -756,7 +810,9 @@ function appendComposer(firstName,lastName,composerId) {
}
----
Эта функция позволяет создавать новую строку таблицы и вставлять в нее ссылку на композитора с использованием данных, передаваемых в функцию посредством соответствующих трех параметров, а затем вставлять эту строку в элемент `complete-table` страницы-указателя.
-5. Добавьте `getElementY()` в `javascript.js`.
+
+[start=5]
+. Добавьте `getElementY()` в `javascript.js`.
[source,java]
----
@@ -780,7 +836,9 @@ function getElementY(element){
*Примечание.* См. link:http://www.quirksmode.org/js/findpos.html[+это описание+] `смещения` в link:http://www.quirksmode.org/[+http://www.quirksmode.org/+].
-6. Добавьте `clearTable()` в `javascript.js`.
+
+[start=6]
+. Добавьте `clearTable()` в `javascript.js`.
[source,java]
----
@@ -795,7 +853,9 @@ function clearTable() {
}
----
Эта функция позволяет скрывать элемент `complete-table` (т.е. делать его невидимым), но не удаляет какие-либо существующие записи имен композиторов, созданные ранее.
-7. Для вызова `clearTable()` при каждом получении данных с сервера можно соответствующим образом изменить функцию `callback()`. Поэтому любые скомбинированные записи, существующие в окне автозавершения, удаляются до того, как выполняется заполнение новыми записями.
+
+[start=7]
+. Для вызова `clearTable()` при каждом получении данных с сервера можно соответствующим образом изменить функцию `callback()`. Поэтому любые скомбинированные записи, существующие в окне автозавершения, удаляются до того, как выполняется заполнение новыми записями.
[source,java]
----
@@ -811,7 +871,9 @@ function callback() {
}
}
----
-8. Добавьте `parseMessages()` в `javascript.js`.
+
+[start=8]
+. Добавьте `parseMessages()` в `javascript.js`.
[source,java]
----
@@ -911,8 +973,12 @@ function parseMessages(responseXML) {
*Примечание.* Если страница индекса имеет вид ``index.jsp`` , потребуется изменить ссылку для возврата на эту страницу.
-5. Создайте еще один файл JSP в папке с веб-страницами проекта. Назовите файл `error.jsp`.
-6. Измените код заглушки в файле `error.jsp` следующим кодом:
+
+[start=5]
+. Создайте еще один файл JSP в папке с веб-страницами проекта. Назовите файл `error.jsp`.
+
+[start=6]
+. Измените код заглушки в файле `error.jsp` следующим кодом:
[source,html]
----
@@ -944,6 +1010,7 @@ function parseMessages(responseXML) {
На данном этапе создан весь код, необходимый для реализации функциональных возможностей приложения. Теперь для проверки результатов следует попытаться запустить приложение.
1. В окне "Проекты" щелкните правой кнопкой мыши узел проекта и выберите команду "Выполнить". Будет выполнена перекомпиляция проекта и его развертывание на целевом сервере. Откроется браузер, в котором отображается страница-указатель.
+
image::images/no-css.png[title="Успешное развертывание без таблицы стилей"]
Для добавления таблицы стилей к приложению создайте файл `.css` и создайте ссылку на него на страницах презентации. При работе с файлами `.css` IDE предоставляет поддержку функции автозавершения кода, а также следующие окна, которые используются для создания и изменения правил стилей.
@@ -959,7 +1026,9 @@ image::images/no-css.png[title="Успешное развертывание бе
Новый файл будет создан и открыт в редакторе.
-3. Введите следующие правила `stylesheet.css` в редакторе. При необходимости просмотра предложений можно использовать поддержку автозавершения кода среды IDE путем нажатия CTRL+ПРОБЕЛ.
+
+[start=3]
+. Введите следующие правила `stylesheet.css` в редакторе. При необходимости просмотра предложений можно использовать поддержку автозавершения кода среды IDE путем нажатия CTRL+ПРОБЕЛ.
[source,java]
----
@@ -1027,19 +1096,26 @@ a:hover {
font-size: 1.2em;
}
----
-4. Откройте окно стилей CSS, выбрав 'Окно' > 'Web'> 'Стили CSS'.
+
+[start=4]
+. Откройте окно стилей CSS, выбрав 'Окно' > 'Web'> 'Стили CSS'.
+
image::images/css-styles-window.png[title="Окно 'Стили CSS', в котором отображаются свойства правила h1"]
-Можно использовать окно 'Стили CSS' для быстрого просмотра свойств и редактирования правил стилей. При выборе правила в верхней панели окна 'Стиль CSS' отображаются свойства правила в нижней панели. Можно добавить CSS правила к таблице стилей, нажав значок 'Изменить правила CSS' (image::images/newcssrule.png[title="Значок 'Новое свойство CSS'"]) на панели инструментов в верхней панели. Можно изменять правила в нижней панели путем редактирования таблицы свойств и добавления свойств, щелкн [...]
+Можно использовать окно 'Стили CSS' для быстрого просмотра свойств и редактирования правил стилей. При выборе правила в верхней панели окна 'Стиль CSS' отображаются свойства правила в нижней панели. Можно добавить CSS правила к таблице стилей, нажав значок 'Изменить правила CSS' (image:images/newcssrule.png[title="Значок 'Новое свойство CSS'"]) на панели инструментов в верхней панели. Можно изменять правила в нижней панели путем редактирования таблицы свойств и добавления свойств, щелкну [...]
+
-5. Перейдите на страницу индекса в редакторе исходного кода и добавьте ссылку на страницу стилей между тегами `<head>`.
+[start=5]
+. Перейдите на страницу индекса в редакторе исходного кода и добавьте ссылку на страницу стилей между тегами `<head>`.
[source,java]
----
<link rel="stylesheet" type="text/css" href="stylesheet.css">
----
-6. Добавьте класс `popupBox`, определенный в таблице стилей, к элементу `complete-table` (начертание изменится на *жирное*).
+
+[start=6]
+. Добавьте класс `popupBox`, определенный в таблице стилей, к элементу `complete-table` (начертание изменится на *жирное*).
[source,xml]
----
@@ -1079,7 +1155,9 @@ image::images/css-completion.png[title="Автозавершение кода CS
*Примечание.* Этот параметр отображается на вкладке 'Общие' для сервера GlassFish. На сервере Tomcat он расположен на вкладке "Соединение".
-3. Выберите "Close" (Закрыть).
+
+[start=3]
+. Выберите "Close" (Закрыть).
Если сервер уже запущен, необходимо перезапустить его для применения изменений. Сервер можно перезапустить, открыв окно 'Службы' (Window > 'Службы'), то щелкните правой кнопкой мыши сервер ниже узла 'Серверы' и выберите 'Перезапуск'.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_zh_CN.asciidoc
index 2c1ec3f..ad896bf 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/ajax-quickstart_zh_CN.asciidoc
@@ -91,10 +91,16 @@ image::images/ajax-process-flow.png[title="Ajax 过程流图"]
1. 选择 "File"（文件）> "New Project"（新建项目）。在 "Categories"（类别）下，选择 "Java Web"。在 "Projects"（项目）下选择 "Web Application"（Web 应用程序），然后单击 "Next"（下一步）。
2. 在 "Name and Location"（名称和位置）面板中，输入 `MyAjaxApp` 作为项目名称。使用 "Project Location"（项目位置）字段可以指定您计算机上项目的位置。将其他选项保留为默认设置，然后单击 "Next"（下一步）。
+
image::images/java-name-location.png[title="为应用程序项目指定名称和位置"]
-3. 在 "Server and Settings"（服务器和设置）面板中，选择要将您的应用程序部署到的服务器。这里仅列出了已在 IDE 中注册的服务器。
+
+[start=3]
+. 在 "Server and Settings"（服务器和设置）面板中，选择要将您的应用程序部署到的服务器。这里仅列出了已在 IDE 中注册的服务器。
+
image::images/java-server-settings.png[title="指定应用程序将部署到的服务器"]
-4. 接受其他默认设置，然后单击 "Finish"（完成）。项目在文件系统中生成，并在 IDE 中打开。
+
+[start=4]
+. 接受其他默认设置，然后单击 "Finish"（完成）。项目在文件系统中生成，并在 IDE 中打开。
在创建基于 Java 的 Web 项目后，将自动构建用于编译该项目的 link:http://ant.apache.org/[+Ant+] 构建脚本，以便在 IDE 中注册的服务器上快速部署和运行该项目。
@@ -140,7 +146,9 @@ image::images/palette.png[title="显示 HTML 元素的 "Palette"（组
</html>
----
-2. 添加一些说明性文本以介绍文本字段的用途。您可以复制以下文本并将其粘贴在 `<h1>` 标记下方的某一位置：
+
+[start=2]
+. 添加一些说明性文本以介绍文本字段的用途。您可以复制以下文本并将其粘贴在 `<h1>` 标记下方的某一位置：
[source,html]
----
@@ -153,23 +161,31 @@ image::images/palette.png[title="显示 HTML 元素的 "Palette"（组
then click on one of the selections to see composer details.</p>
----
-3. 向该页面中添加一个 HTML 窗体。可以利用 IDE "Palette"（组件面板）中列出的元素执行此操作。如果组件面板没有打开，请从主菜单中选择 "Window"（窗口）> "Palette"（组件面板）。然后，在 "HTML Forms"（HTML 窗体）下，单击某个窗体元素，并将其拖至该页面中您刚添加的 `<p>` 标记下的某一位置。此时将打开 "Insert Form"（插入窗体）对话框。指定以下内容：
+
+[start=3]
+. 向该页面中添加一个 HTML 窗体。可以利用 IDE "Palette"（组件面板）中列出的元素执行此操作。如果组件面板没有打开，请从主菜单中选择 "Window"（窗口）> "Palette"（组件面板）。然后，在 "HTML Forms"（HTML 窗体）下，单击某个窗体元素，并将其拖至该页面中您刚添加的 `<p>` 标记下的某一位置。此时将打开 "Insert Form"（插入窗体）对话框。指定以下内容：
* 操作：autocomplete
* "Method"（方法）：GET
* "Name"（名称）：autofillform
+
image::images/insert-form.png[title=""Insert form"（插入窗体）对话框"]
单击 "OK"（确定）。HTML `<form>` 标记已插入到包含您所指定的属性的页面中。（GET 在默认情况下应用，因此没有进行显式声明。）
-4. 向该页面添加一个 HTML 表格。在 "Palette"（组件面板）中的 "HTML" 类别下，单击某个表格元素，并将其拖至 `<form>` 标记之间的位置。"Insert Table"（插入表格）对话框即打开。指定以下内容：
+
+[start=4]
+. 向该页面添加一个 HTML 表格。在 "Palette"（组件面板）中的 "HTML" 类别下，单击某个表格元素，并将其拖至 `<form>` 标记之间的位置。"Insert Table"（插入表格）对话框即打开。指定以下内容：
* "Rows"（行）：2
* "Columns"（列）：2
* "Border Size"（边框大小）：0
* "Cell Padding"（单元格边距）：5
+
image::images/insert-table.png[title=""Insert table"（插入表格）对话框"]
-5. 在源代码编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）。此操作将对代码进行整理。现在，您的窗体应该如下显示：
+
+[start=5]
+. 在源代码编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）。此操作将对代码进行整理。现在，您的窗体应该如下显示：
[source,xml]
----
@@ -196,14 +212,18 @@ image::images/insert-table.png[title=""Insert table"（插入表格）
</form>
----
-6. 将以下文本键入到此表格第一行的第一列中（更改的内容以*粗体*显示）：
+
+[start=6]
+. 将以下文本键入到此表格第一行的第一列中（更改的内容以*粗体*显示）：
[source,xml]
----
<td>*<strong>Composer Name:</strong>*</td>
----
-7. 在第一行的第二列中，手动键入以下代码，而不是从组件面板中拖动 "Text Input"（文本输入）字段（更改的内容以*粗体*显示）：
+
+[start=7]
+. 在第一行的第二列中，手动键入以下代码，而不是从组件面板中拖动 "Text Input"（文本输入）字段（更改的内容以*粗体*显示）：
[source,xml]
----
@@ -217,6 +237,7 @@ image::images/insert-table.png[title=""Insert table"（插入表格）
----
在键入时，请尝试使用 IDE 内置的代码完成支持。例如，键入 `<i`，然后按 Ctrl-空格组合键。建议的选项列表会显示在光标下方，并且选中元素的说明会显示在上方的框中。事实上，在源代码编辑器中编写代码时，可以随时按 Ctrl-空格键调出可能的选项。而且，如果只有一个可用的选项，按 Ctrl-空格键将自动完成元素名称。
+
image::images/code-completion.png[title="在编辑器中按 Ctrl-空格键以调用代码完成和文档支持"]
您在上文中键入的 `onkeyup` 属性指向名为 `doCompletion()` 的 JavaScript 函数。每次在窗体文本字段中按下一个键时，此函数都会被调用，并映射到以上 Ajax <<flow-diagram,流程图>>中所描述的 JavaScript 调用。
@@ -270,7 +291,9 @@ function initRequest() {
以上代码将对 Firefox 3 以及 Internet Explorer 版本 6 和 7 执行简单的浏览器兼容性检查。如果希望包含更多强健的代码以处理兼容性问题，建议您使用 link:http://www.quirksmode.org[+http://www.quirksmode.org+] 中的link:http://www.quirksmode.org/js/detect.html[+浏览器检测脚本+]。
-4. 切换回索引页，然后在 `<head>` 标记之间添加对 JavaScript 文件的引用。
+
+[start=4]
+. 切换回索引页，然后在 `<head>` 标记之间添加对 JavaScript 文件的引用。
[source,xml]
----
@@ -280,7 +303,9 @@ function initRequest() {
您可以按 Ctrl-Tab 组合键在源代码编辑器中打开的页面之间快速切换。
-5. 在开始标记 `<body>` 中，插入对 `init()` 的调用。
+
+[start=5]
+. 在开始标记 `<body>` 中，插入对 `init()` 的调用。
[source,java]
----
@@ -437,7 +462,9 @@ public class ComposerData {
单击“完成”，此时 IDE 将创建此类并在源代码编辑器中打开该文件。
-3. 在源代码编辑器中，粘贴以下代码：
+
+[start=3]
+. 在源代码编辑器中，粘贴以下代码：
[source,java]
----
@@ -486,25 +513,41 @@ public class Composer {
1. 在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "New"（新建）> "Servlet" 以打开新建 Servlet 向导。（如果在默认情况下弹出式菜单中未显示 "Servlet"，请选择 "Other"（其他），并从 "Web" 类别中选择 "Servlet"。）
2. 将该 servlet 命名为 `AutoCompleteServlet`，并从 "Package"（包）字段的下拉列表中选择 `com.ajax`。单击 "Next"（下一步）。
+
image::images/newservlet-name-location.png[]
-3. 在 "Configure Servlet Deployment"（配置 Servlet 部署）面板中，将 URL 模式更改为 *`/autocomplete`*，使之与以前在 `XMLHttpRequest` 对象中设置的 URL 匹配。
+
+[start=3]
+. 在 "Configure Servlet Deployment"（配置 Servlet 部署）面板中，将 URL 模式更改为 *`/autocomplete`*，使之与以前在 `XMLHttpRequest` 对象中设置的 URL 匹配。
+
image::images/newservlet-configure-deployment.png[]
此面板可以省去手动向部署描述符添加这些详细信息所需的步骤。
-4. 也可以选择 "Add servlet information to deployment descriptor"（将 Servlet 信息添加到部署描述符）。这样，您的项目将与下载的样例相同。在使用 IDE 的高级版本时，默认情况下用 `@WebServlet` 标注而不是部署描述符来注册 Servlet。如果您使用 `@WebServlet` 标注而不是部署描述符，该项目仍将工作。
-5. 单击 "Finish"（完成）。该 servlet 随即创建，并在源代码编辑器中打开。
+
+[start=4]
+. 也可以选择 "Add servlet information to deployment descriptor"（将 Servlet 信息添加到部署描述符）。这样，您的项目将与下载的样例相同。在使用 IDE 的高级版本时，默认情况下用 `@WebServlet` 标注而不是部署描述符来注册 Servlet。如果您使用 `@WebServlet` 标注而不是部署描述符，该项目仍将工作。
+
+[start=5]
+. 单击 "Finish"（完成）。该 servlet 随即创建，并在源代码编辑器中打开。
您需要覆盖的方法只有 `doGet()`（该方法用于定义 servlet 处理 `autocomplete` `GET` 请求的方式）以及 `init()`（该方法需要启动一个 `ServletContext`，以便在应用程序提供服务时 servlet 可以访问该应用程序中的其他类）。
使用 IDE 的 "Insert Code"（插入代码）弹出式菜单可以覆盖超类的方法。通过执行下列步骤来实现 `init()`。
1. 将光标放在源代码编辑器中的 `AutoCompleteServlet` 类声明下。按 Alt-Insert 组合键（在 Mac 上按 Ctrl-I 组合键）打开 "Generate Code"（生成代码）弹出式菜单。
+
image::images/insert-code.png[title="源代码编辑器中显示的 "Insert Code"（插入代码）弹出式菜单"]
-2. 选择 "Override Method"（覆盖方法）。在显示的对话框中，将显示 `AutoCompleteServlet` 继承的所有类。展开 GenericServlet 节点并选择 `init(Servlet Config config)`。
+
+[start=2]
+. 选择 "Override Method"（覆盖方法）。在显示的对话框中，将显示 `AutoCompleteServlet` 继承的所有类。展开 GenericServlet 节点并选择 `init(Servlet Config config)`。
+
image::images/new-override.png[title=""Override"（覆盖）对话框列出继承的类"]
-3. 单击 "OK"（确定）。`init()` 方法将添加到源代码编辑器中。
-4. 为 `ServletContext` 对象添加一个变量并修改 `init()`（更改的内容以*粗体*显示）：
+
+[start=3]
+. 单击 "OK"（确定）。`init()` 方法将添加到源代码编辑器中。
+
+[start=4]
+. 为 `ServletContext` 对象添加一个变量并修改 `init()`（更改的内容以*粗体*显示）：
[source,java]
----
@@ -516,10 +559,13 @@ public void init(ServletConfig *config*) throws ServletException {
*this.context = config.getServletContext();*
}
----
-5. 为 `ServletContext` 添加一个导入语句。通过单击源代码编辑器左旁注中显示的灯泡图标可以执行此操作
+
+[start=5]
+. 为 `ServletContext` 添加一个导入语句。通过单击源代码编辑器左旁注中显示的灯泡图标可以执行此操作
+
image::images/import-hint.png[title="导入提示显示在源代码编辑器的左旁注中"]
-`doGet()` 方法需要解析请求的 URL，从数据存储中检索数据，并准备 XML 格式的响应。注意，方法声明是在创建类时生成的。要查看它，您可能需要通过单击左旁注中的 "expand"（展开）图标 (image::images/expand-icon.png[]) 来展开 HttpServlet 方法。
+`doGet()` 方法需要解析请求的 URL，从数据存储中检索数据，并准备 XML 格式的响应。注意，方法声明是在创建类时生成的。要查看它，您可能需要通过单击左旁注中的 "expand"（展开）图标 (image:images/expand-icon.png[]) 来展开 HttpServlet 方法。
1. 在 `AutocompleteServlet` 类声明下添加以下变量声明。
@@ -530,7 +576,9 @@ private ComposerData compData = new ComposerData();
private HashMap composers = compData.getComposers();
----
这将创建所有作曲家数据的 `HashMap`，然后由 `doGet()` 使用。
-2. 向下滚动到 `doGet()` 并按如下方式实现该方法：
+
+[start=2]
+. 向下滚动到 `doGet()` 并按如下方式实现该方法：
[source,xml]
----
@@ -701,7 +749,9 @@ function callback() {
</tr>
----
此表格的第二行包含其他 HTML 表格。此表格表示将用于填写作曲家名字的自动完成框。
-2. 在源代码编辑器中打开 `javascript.js`，并在文件顶部添加以下三个变量。
+
+[start=2]
+. 在源代码编辑器中打开 `javascript.js`，并在文件顶部添加以下三个变量。
[source,java]
----
@@ -710,7 +760,9 @@ var completeField;
var completeTable;
var autoRow;
----
-3. 将以下行（以*粗体*显示）添加到 `init()` 函数中。
+
+[start=3]
+. 将以下行（以*粗体*显示）添加到 `init()` 函数中。
[source,java]
----
@@ -723,7 +775,9 @@ function init() {
}
----
`init()` 的一个作用是使修改索引页 DOM 的其他函数可以访问索引页内的元素。
-4. 将 `appendComposer()` 添加到 `javascript.js`。
+
+[start=4]
+. 将 `appendComposer()` 添加到 `javascript.js`。
[source,java]
----
@@ -756,7 +810,9 @@ function appendComposer(firstName,lastName,composerId) {
}
----
此函数创建了一个新的表行，并用其所含的三个参数传递的数据将指向作曲家的链接插入此表行中，然后将此行插入索引页的 `complete-table` 元素中。
-5. 将 `getElementY()` 添加到 `javascript.js`。
+
+[start=5]
+. 将 `getElementY()` 添加到 `javascript.js`。
[source,java]
----
@@ -780,7 +836,9 @@ function getElementY(element){
*注：*请在 link:http://www.quirksmode.org/[+http://www.quirksmode.org/+] 上查看 `offset` 的link:http://www.quirksmode.org/js/findpos.html[+说明+]。
-6. 将 `clearTable()` 添加到 `javascript.js`。
+
+[start=6]
+. 将 `clearTable()` 添加到 `javascript.js`。
[source,java]
----
@@ -795,7 +853,9 @@ function clearTable() {
}
----
此函数用于将 `complete-table` 元素的显示方式设置为“无”（也就是使其不可见），并删除所有已创建的现有作曲家名字条目。
-7. 修改 `callback()` 函数以便每次从服务器接收到新数据时都调用 `clearTable()`。因此，在用新条目填充自动完成框之前其中已存在的任何作曲家条目均会删除。
+
+[start=7]
+. 修改 `callback()` 函数以便每次从服务器接收到新数据时都调用 `clearTable()`。因此，在用新条目填充自动完成框之前其中已存在的任何作曲家条目均会删除。
[source,java]
----
@@ -811,7 +871,9 @@ function callback() {
}
}
----
-8. 将 `parseMessages()` 添加到 `javascript.js`。
+
+[start=8]
+. 将 `parseMessages()` 添加到 `javascript.js`。
[source,java]
----
@@ -911,8 +973,12 @@ function parseMessages(responseXML) {
*注：*如果索引页为 ``index.jsp`` ，则需要更改链接以返回到该索引页。
-5. 在该项目的“Web 页”文件夹下创建另一个 JSP 文件。将该文件命名为 `error.jsp`。
-6. 将 `error.jsp` 中的占位符代码替换为以下代码：
+
+[start=5]
+. 在该项目的“Web 页”文件夹下创建另一个 JSP 文件。将该文件命名为 `error.jsp`。
+
+[start=6]
+. 将 `error.jsp` 中的占位符代码替换为以下代码：
[source,html]
----
@@ -944,6 +1010,7 @@ function parseMessages(responseXML) {
在此阶段，您已完成了实现此应用程序功能所需的所有代码。要查看您的努力成果，请立即尝试运行此应用程序。
1. 在 "Projects"（项目）窗口中，右键单击该项目节点并选择 "Run"（运行）。此项目会重新编译，并部署到目标服务器。此时您的浏览器会打开，并可以查看索引页。
+
image::images/no-css.png[title="不带样式表的成功部署"]
要向您的应用程序添加一个样式表，只需创建 `.css` 文件，并从您的演示页面链接到此文件。当您使用 `.css` 文件时，IDE 会为您提供代码完成支持，以及以下有助于生成和编辑样式表规则的窗口。
@@ -959,7 +1026,9 @@ image::images/no-css.png[title="不带样式表的成功部署"]
此时会创建新文件，并在编辑器中打开。
-3. 在编辑器的 `stylesheet.css` 中键入以下规则。您可以使用 IDE 的代码完成支持，方法是：在希望查看建议时按 Ctrl-空格组合键。
+
+[start=3]
+. 在编辑器的 `stylesheet.css` 中键入以下规则。您可以使用 IDE 的代码完成支持，方法是：在希望查看建议时按 Ctrl-空格组合键。
[source,java]
----
@@ -1027,19 +1096,26 @@ a:hover {
font-size: 1.2em;
}
----
-4. 选择 "Window"（窗口）> "Web" > "CSS Styles"（CSS 样式），打开 "CSS Styles"（CSS 样式）窗口。
+
+[start=4]
+. 选择 "Window"（窗口）> "Web" > "CSS Styles"（CSS 样式），打开 "CSS Styles"（CSS 样式）窗口。
+
image::images/css-styles-window.png[title=""CSS Styles"（CSS 样式）窗口显示 h1 规则属性"]
-使用 "CSS Styles"（CSS 样式）窗口可以快速查看属性和编辑样式规则。当在 "CSS Styles"（CSS 样式）窗口的上方窗格中选择规则时，您可以在下方窗格中查看该规则的属性。单击上方窗格工具栏中的 "Edit CSS Rules"（编辑 CSS 规则）图标 (image::images/newcssrule.png[title=""New CSS Property"（新建 CSS 属性）图标"])，可以为样式表添加 CSS 规则。通过编辑属性表单可以在下方窗格中修改规则，通过单击下方窗格工具栏中的 "Add Property"（添加属性）图标 (image::images/newcssproperty.png[title=""New CSS Property"（新建 CSS 属性）图标"]) 可以添加属性。
+使用 "CSS Styles"（CSS 样式）窗口可以快速查看属性和编辑样式规则。当在 "CSS Styles"（CSS 样式）窗口的上方窗格中选择规则时，您可以在下方窗格中查看该规则的属性。单击上方窗格工具栏中的 "Edit CSS Rules"（编辑 CSS 规则）图标 (image:images/newcssrule.png[title=""New CSS Property"（新建 CSS 属性）图标"])，可以为样式表添加 CSS 规则。通过编辑属性表单可以在下方窗格中修改规则，通过单击下方窗格工具栏中的 "Add Property"（添加属性）图标 (image:images/newcssproperty.png[title=""New CSS Property"（新建 CSS 属性）图标"]) 可以添加属性。
+
-5. 切换到源代码编辑器中的索引页，并在 `<head>` 标记之间添加对样式表的引用。
+[start=5]
+. 切换到源代码编辑器中的索引页，并在 `<head>` 标记之间添加对样式表的引用。
[source,java]
----
<link rel="stylesheet" type="text/css" href="stylesheet.css">
----
-6. 将样式表中定义的 `popupBox` 类添加到 `complete-table` 元素中（更改的内容以*粗体*显示）。
+
+[start=6]
+. 将样式表中定义的 `popupBox` 类添加到 `complete-table` 元素中（更改的内容以*粗体*显示）。
[source,xml]
----
@@ -1079,7 +1155,9 @@ image::images/css-completion.png[title="编辑器中的 CSS 代码完成"]
*注：*对于 GlassFish Server，此选项显示在 "Common"（通用）标签下。对于 Tomcat，则位于 "Connection"（连接）标签下。
-3. 单击 "Close"（关闭）。
+
+[start=3]
+. 单击 "Close"（关闭）。
如果服务器已经运行，则必须重新启动服务器，更改才能生效。您可以通过以下方式重新启动服务器：打开 "Services"（服务）窗口（"Window"（窗口）> "Services"（服务）），然后在 "Servers"（服务器）节点下右键单击您的服务器，并选择 "Restart"（重新启动）。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/applets.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/applets.asciidoc
index 3aab1c8..0a1945f 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/applets.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/applets.asciidoc
@@ -65,8 +65,12 @@ In this section, you create your first applet. Possibly, you already have an app
2. Choose one of the following:
* If you are creating a new applet source file, select Java Class Library under Projects. Click Next.
* If you want to import an applet source file, select Java Project with Existing Sources. Click Next. Specify the file's location in the Source Packages Folder text box.
-3. Under Project Name, type ``HelloApplet`` . Change the Project Location to any folder on your computer.
-4. Click Finish. If you imported an applet source file, <<runanddebug,run it>>.
+
+[start=3]
+. Under Project Name, type ``HelloApplet`` . Change the Project Location to any folder on your computer.
+
+[start=4]
+. Click Finish. If you imported an applet source file, <<runanddebug,run it>>.
=== Create the applet source file
@@ -76,19 +80,29 @@ In this section, you create your first applet. Possibly, you already have an app
*Note:* For example, if you choose JDK 6 the applet might not run on machines that have an older version of the JRE or Java browser plugin.
-3. Right-click the HelloApplet project node in the Projects window and select New > Other (Ctrl-N).
-4. Under Categories, select Java. Under File Types, select Applet.
+
+[start=3]
+. Right-click the HelloApplet project node in the Projects window and select New > Other (Ctrl-N).
+
+[start=4]
+. Under Categories, select Java. Under File Types, select Applet.
Alternatively, if you want to visually design your applet, select Swing GUI Forms > JApplet Form.
Click Next.
-5. Under Class Name, type ``MyApplet`` . Under Package, type ``org.me.hello`` .
-6. Click Finish.
+
+[start=5]
+. Under Class Name, type ``MyApplet`` . Under Package, type ``org.me.hello`` .
+
+[start=6]
+. Click Finish.
The IDE creates the applet source file in the specified package. The applet source file opens in the Source editor.
-7. Define your applet class by copying and pasting the following code over the existing default code:
+
+[start=7]
+. Define your applet class by copying and pasting the following code over the existing default code:
[source,java]
----
@@ -162,11 +176,15 @@ When you want to include an applet JAR file in a web project, you can do so by a
*Note.* IDE projects are marked by the NetBeans IDE project icon.
* If you are using an applet JAR file that is not in an IDE project click Add File/Folder and locate the folder that contains the JAR file. Click Choose.
-4. Confirm that the JAR that contains the applet source file is listed in the table in the Project Properties window. Click OK.
+
+[start=4]
+. Confirm that the JAR that contains the applet source file is listed in the table in the Project Properties window. Click OK.
By default, the applet JAR file will be copied to the web application's web page library, which is the ``build/web `` folder. The ``build/web `` folder is the root directory of the application and is displayed as " ``/`` " in the Path in WAR column of the table. You can modify the location of the applet in the WAR by typing a new location for the applet in the Path in WAR column.
-5. Click Close to close the Project Properties window.
+
+[start=5]
+. Click Close to close the Project Properties window.
When you build the ``HelloWebApplet`` project by choosing Run > Build Project (HelloWebApplet) from the main IDE's menu, the applet's JAR file is generated in the original ``HelloApplet`` project and is packaged in the ``HelloWebApplet`` project's WAR file. It is also added to the ``build/web`` folder. You can follow this process in the Output window and see the results in the Files window.
@@ -181,7 +199,9 @@ image:images/helloapplet-jar-in-files-small.png[role="left", link="images/helloa
1. Choose one of the following:
* If you want to embed the applet in a JSP file, double-click the default ``index.jsp`` file in the Projects window. This file is created by the IDE when you create a web project. It opens in the Source Editor.
* If you want to embed the applet in an HTML file, right-click the HelloWebApplet project node, and choose New > Other from the contextual menu. Under Categories, select Web. Under File Types, select HTML. Click Next. Give your HTML file a name, select the Web folder for its location, and click Finish.
-2. Embed the applet in the file by adding the following applet tag anywhere between the file's ``<body>`` ``</body>`` tags:
+
+[start=2]
+. Embed the applet in the file by adding the following applet tag anywhere between the file's ``<body>`` ``</body>`` tags:
* In an HTML file: [examplecode]# ``<applet code="org.me.hello.MyApplet" archive="HelloApplet.jar"></applet>`` #
* In a JSP file: [examplecode]# ``<applet code="org.me.hello.MyApplet" archive="HelloApplet.jar" width="600" height="480"/>`` #
@@ -191,7 +211,9 @@ image:images/helloapplet-jar-in-files-small.png[role="left", link="images/helloa
* For this tutorial you can ignore the hint glyph in the left margin if you are adding the applet code to an HTML file.
* ``org.me.hello.MyApplet`` is the full classname to your applet.
* ``HelloApplet.jar`` is the JAR file that contains the applet.
-3. Right-click the JSP node or HTML node in the Projects window and choose Run File from the contextual menu.
+
+[start=3]
+. Right-click the JSP node or HTML node in the Projects window and choose Run File from the contextual menu.
The server deploys the JSP file or HTML file in the IDE's default browser.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/applets_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/applets_ja.asciidoc
index d77e98b..0c1030e 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/applets_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/applets_ja.asciidoc
@@ -65,8 +65,12 @@ _ _
2. 次のいずれかを選択します。
* 新しいアプレット・ソース・ファイルを作成する場合、「プロジェクト」の下の「Javaクラス・ライブラリ」を選択します。「次」をクリックします。
* アプレット・ソース・ファイルをインポートする場合、既存のソースがあるJavaプロジェクトを選択します。「次」をクリックします。「ソース・パッケージのフォルダ」テキスト・ボックスで、ファイルの場所を指定します。
-3. 「プロジェクト名」に「 ``HelloApplet`` 」と入力します。「プロジェクトの場所」をローカル・コンピュータ上の任意のフォルダに変更します。
-4. 「終了」をクリックします。アプレット・ソース・ファイルをインポートした場合は、<<runanddebug,それを実行>>します。
+
+[start=3]
+. 「プロジェクト名」に「 ``HelloApplet`` 」と入力します。「プロジェクトの場所」をローカル・コンピュータ上の任意のフォルダに変更します。
+
+[start=4]
+. 「終了」をクリックします。アプレット・ソース・ファイルをインポートした場合は、<<runanddebug,それを実行>>します。
=== アプレット・ソース・ファイルの作成
@@ -76,19 +80,29 @@ _ _
*注意: *たとえば、JDK 6を選択した場合、それより古いバージョンのJREまたはJavaブラウザ・プラグインが存在するマシンでは、アプレットが動作しない可能性があります。
-3. 「プロジェクト」ウィンドウの「HelloApplet」プロジェクト・ノードを右クリックし、「新規」>「その他」([Ctrl]-[N])を選択します。
-4. 「カテゴリ」から「Java」を選択します。「ファイル・タイプ」から「アプレット」を選択します。
+
+[start=3]
+. 「プロジェクト」ウィンドウの「HelloApplet」プロジェクト・ノードを右クリックし、「新規」>「その他」([Ctrl]-[N])を選択します。
+
+[start=4]
+. 「カテゴリ」から「Java」を選択します。「ファイル・タイプ」から「アプレット」を選択します。
または、新しいアプレットを視覚的にデザインする場合、「Swing GUIフォーム」>「JAppletフォーム」を選択します。
「次」をクリックします。
-5. 「クラス名」に「 ``MyApplet`` 」と入力します。「パッケージ」に「 ``org.me.hello`` 」と入力します。
-6. 「終了」をクリックします。
+
+[start=5]
+. 「クラス名」に「 ``MyApplet`` 」と入力します。「パッケージ」に「 ``org.me.hello`` 」と入力します。
+
+[start=6]
+. 「終了」をクリックします。
IDEで、アプレット・ソース・ファイルが指定したパッケージ内に作成されます。ソース・エディタが開いて、アプレット・ソース・ファイルが表示されます。
-7. 既存のデフォルト・コードの上に次のコードを コピーして貼り付け、アプレット・クラスを定義します。
+
+[start=7]
+. 既存のデフォルト・コードの上に次のコードを コピーして貼り付け、アプレット・クラスを定義します。
[source,java]
----
@@ -162,11 +176,15 @@ image::images/movie-magic-quiz.png[]
*注意:*IDEプロジェクトには、NetBeans IDEプロジェクト・アイコンのマークが付きます。
* IDEプロジェクト内にないアプレットJARファイルを使用している場合、「ファイル/フォルダの追加」をクリックし、JARファイルを含むフォルダを特定します。「選択」をクリックします。
-4. アプレットのソース・ファイルを含むJARが「プロジェクト・プロパティ」ウィンドウの表にリストされていることを確認します。「OK」をクリックします。
+
+[start=4]
+. アプレットのソース・ファイルを含むJARが「プロジェクト・プロパティ」ウィンドウの表にリストされていることを確認します。「OK」をクリックします。
デフォルトでは、アプレットJARファイルはWebアプリケーションのWebページ・ライブラリ( ``build/web`` フォルダ)にコピーされます。 ``build/web`` フォルダはアプリケーションのルート・ディレクトリで、表の「WAR内のパス」列に" ``/`` "と表示されます。「WAR内のパス」列にアプレットの新しい場所を入力すると、WAR内のアプレットの場所を変更できます。
-5. 「閉じる」をクリックして、「プロジェクト・プロパティ」ウィンドウを閉じます。
+
+[start=5]
+. 「閉じる」をクリックして、「プロジェクト・プロパティ」ウィンドウを閉じます。
IDEのメイン・メニューから「実行」>「プロジェクトのビルド(HelloWebApplet)」を選択して ``HelloWebApplet`` プロジェクトをビルドすると、アプレットのJARファイルが元の ``HelloApplet`` プロジェクト内に生成され、 ``HelloWebApplet`` プロジェクトのWARファイルにパッケージ化されます。 ``build/web`` フォルダにも追加されます。この処理を「出力」ウィンドウで追跡し、結果を「ファイル」ウィンドウで確認できます。
@@ -181,7 +199,9 @@ image:images/helloapplet-jar-in-files-small.png[role="left", link="images/helloa
1. 次のいずれかを選択します。
* アプレットをJSPファイルに埋め込む場合は、「プロジェクト」ウィンドウにあるデフォルトの ``index.jsp`` ファイルをダブルクリックします。このファイルは、Webプロジェクトの作成時にIDEで作成されます。ソース・エディタにこのファイルが表示されます。
* アプレットをHTMLファイルに埋め込む場合は、「HelloWebApplet」プロジェクト・ノードを右クリックし、コンテキスト・メニューから「新規」>「その他」を選択します。「カテゴリ」から「Web」を選択します。「ファイル・タイプ」から「HTML」を選択します。「次」をクリックします。HTMLファイルに名前を付け、その場所としてWebフォルダを選択し、「終了」をクリックします。
-2. 次のように、ファイルの ``<body>`` ``</body>`` の2つのタグの間の任意の場所にアプレット・タグを追加することで、アプレットをファイルに埋め込みます。
+
+[start=2]
+. 次のように、ファイルの ``<body>`` ``</body>`` の2つのタグの間の任意の場所にアプレット・タグを追加することで、アプレットをファイルに埋め込みます。
* HTMLファイル内: [examplecode]# ``<applet code="org.me.hello.MyApplet" archive="HelloApplet.jar"></applet>`` #
* JSPファイル内: [examplecode]# ``<applet code="org.me.hello.MyApplet" archive="HelloApplet.jar" width="600" height="480"/>`` #
@@ -191,7 +211,9 @@ image:images/helloapplet-jar-in-files-small.png[role="left", link="images/helloa
* このチュートリアルでは、HTMLファイルにアプレット・コードを追加する場合は、左マージンにあるヒント・グリフを無視できます。
* ``org.me.hello.MyApplet`` はアプレットの完全クラス名です。
* ``HelloApplet.jar`` はアプレットを格納するJARファイル名です。
-3. 「プロジェクト」ウィンドウでこのJSPノードまたはHTMLノードを右クリックし、コンテキスト・メニューから「ファイルを実行」を選択します。
+
+[start=3]
+. 「プロジェクト」ウィンドウでこのJSPノードまたはHTMLノードを右クリックし、コンテキスト・メニューから「ファイルを実行」を選択します。
サーバーによって、JSPファイルまたはHTMLファイルがIDEのデフォルト・ブラウザにデプロイされます。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/applets_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/applets_pt_BR.asciidoc
index 1829670..bfb5ab2 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/applets_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/applets_pt_BR.asciidoc
@@ -65,8 +65,12 @@ Nesta seção, você criará seu primeiro applet. Possivelmente, você já tem u
2. Selecione uma das seguintes opções:
* Se você estiver criando um novo código-fonte de applet, selecione Biblioteca de Classe Java em Projetos. Clique em Próximo.
* Se você quiser importar um arquivo de código-fonte de applet, selecione Projeto Java com Códigos-Fonte existentes. Clique em Próximo. Especifique a localização do arquivo na caixa de texto Pasta de Pacotes de Códigos-Fonte.
-3. Em Nome do Projeto, Digite ``HelloApplet`` . Altere o Local do Projeto para qualquer pasta do computador.
-4. Clique em Finalizar. Se você tiver importado um arquivo de código-fonte do applet, <<runanddebug,execute-o>>.
+
+[start=3]
+. Em Nome do Projeto, Digite ``HelloApplet`` . Altere o Local do Projeto para qualquer pasta do computador.
+
+[start=4]
+. Clique em Finalizar. Se você tiver importado um arquivo de código-fonte do applet, <<runanddebug,execute-o>>.
=== Crie o arquivo de código-fonte do applet
@@ -76,19 +80,29 @@ Nesta seção, você criará seu primeiro applet. Possivelmente, você já tem u
*Observação:* Por exemplo, se selecionar JDK 6, o applet poderá não ser executado em máquinas que tenham uma versão mais antiga do plug-in JRE ou do browser Java.
-3. Clique com o botão direito do mouse no nó do projeto HelloApplet na janela Projetos e selecione Novo > Outro (Ctrl-N).
-4. Em Categorias, selecione Java. Em Tipos de Arquivos, selecione Applet.
+
+[start=3]
+. Clique com o botão direito do mouse no nó do projeto HelloApplet na janela Projetos e selecione Novo > Outro (Ctrl-N).
+
+[start=4]
+. Em Categorias, selecione Java. Em Tipos de Arquivos, selecione Applet.
Como alternativa, se você quiser criar visualmente o applet, selecione Forms de GUI do Swing > Form JApplet.
Clique em Próximo.
-5. Em Nome da Classe, Digite ``MyApplet`` . Em Pacote, digite ``org.me.hello`` .
-6. Clique em Finalizar.
+
+[start=5]
+. Em Nome da Classe, Digite ``MyApplet`` . Em Pacote, digite ``org.me.hello`` .
+
+[start=6]
+. Clique em Finalizar.
O IDE criará o arquivo de código-fonte do applet no pacote especificado. O arquivo de código-fonte do applet será aberto no editor de Código-fonte.
-7. Defina a classe do seu applet, copiando e colando o seguinte código sobre o código default existente:
+
+[start=7]
+. Defina a classe do seu applet, copiando e colando o seguinte código sobre o código default existente:
[source,java]
----
@@ -162,11 +176,15 @@ Quando quiser incluir um arquivo JAR do applet em um projeto Web, você poderá
*Observação.* Os projetos do IDE são marcados pelo ícone de projeto do NetBeans IDE.
* Se estiver usando um arquivo JAR do applet que não está no projeto IDE, clique em Adicionar Arquivo/Pasta e localize a pasta que contém o arquivo JAR. Clique em Escolher.
-4. Confirme se o JAR que contém o arquivo do código-fonte do applet está listado na tabela na janela Propriedades do Projeto. Clique em OK.
+
+[start=4]
+. Confirme se o JAR que contém o arquivo do código-fonte do applet está listado na tabela na janela Propriedades do Projeto. Clique em OK.
Por default, o arquivo JAR do applet será copiado para a biblioteca da página Web da aplicação Web, que é a pasta ``build/web `` . A pasta ``build/web `` é o diretório-raiz da aplicação e é exibido como " ``/`` " no Caminho na coluna WAR da tabela. Você pode modificar a localização do applet no WAR digitando uma nova localização para o applet no Caminho na coluna WAR.
-5. Clique em Fechar para fechar a janela Propriedades do Projeto.
+
+[start=5]
+. Clique em Fechar para fechar a janela Propriedades do Projeto.
Quando você constrói o projeto ``HelloWebApplet`` escolhendo Executar > Construir Projeto (HelloWebApplet) no menu principal do IDE, o arquivo JAR do applet é gerado no projeto ``HelloApplet`` original e é encapsulado no arquivo WAR do projeto ``HelloWebApplet`` . Ele também é adicionado à pasta ``build/web`` . Você pode seguir este processo na janela de Saída e ver os resultados na janela Arquivos.
@@ -181,7 +199,9 @@ image:images/helloapplet-jar-in-files-small.png[role="left", link="images/helloa
1. Selecione uma das seguintes opções:
* Se você quiser incorporar o applet em um arquivo JSP, clique duas vezes no arquivo ``index.jsp`` default na janela Projetos. Esse arquivo é criado pelo IDE quando você cria um projeto Web. Ele será aberto no Editor de Código-fonte.
* Se você quiser incorporar o applet em um arquivo HTML, clique com o botão direito do mouse no nó do projeto HelloWebApplet e selecione Novo > Outro a partir do menu de contexto. Em Categorias, selecione Web. Em Tipos de Arquivos, selecione HTML. Clique em Próximo. Forneça um nome para seu arquivo HTML, selecione a pasta Web como sua localização e clique em Finalizar.
-2. Incorpore o applet no arquivo, adicionando a seguinte tag de applet em qualquer local entre as tags ``<body>`` ``</body>`` do arquivo:
+
+[start=2]
+. Incorpore o applet no arquivo, adicionando a seguinte tag de applet em qualquer local entre as tags ``<body>`` ``</body>`` do arquivo:
* Em um arquivo HTML: [examplecode]# ``<applet code="org.me.hello.MyApplet" archive="HelloApplet.jar"></applet>`` #
* Em um arquivo JSP: [examplecode]# ``<applet code="org.me.hello.MyApplet" archive="HelloApplet.jar" width="600" height="480"/>`` #
@@ -191,7 +211,9 @@ image:images/helloapplet-jar-in-files-small.png[role="left", link="images/helloa
* Para este tutorial você pode ignorar o glifo de dica na margem esquerda se estiver adicionando o código do applet em um arquivo HTML.
* ``org.me.hello.MyApplet`` é o nome de classe completo para seu applet.
* ``HelloApplet.jar`` é o arquivo JAR que contém o applet.
-3. Clique com o botão direito do mouse no nó JSP ou no nó HTML na janela Projetos e selecione Executar Arquivo no menu de contexto.
+
+[start=3]
+. Clique com o botão direito do mouse no nó JSP ou no nó HTML na janela Projetos e selecione Executar Arquivo no menu de contexto.
O servidor implanta o arquivo JSP ou o arquivo HTML no browser default do IDE.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/applets_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/applets_ru.asciidoc
index d17af20..3893948 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/applets_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/applets_ru.asciidoc
@@ -65,8 +65,12 @@ _ _
2. Выполните одно из следующих действий.
* Для создания нового исходного файла в области "Проекты" выберите пункт "Библиотека классов Java". Нажмите кнопку "Далее".
* Для импорта исходного файла апплета выберите пункт "Проект Java с существующим исходным кодом". Нажмите кнопку "Далее". Укажите местоположение файла в текстовом поле "Папка с исходными файлами".
-3. В поле "Имя проекта" введите ``HelloApplet`` . В области "Расположение проекта" укажите любую папку на своем компьютере.
-4. Нажмите кнопку "Завершить". Если файл исходного кода апплета был импортирован, <<runanddebug,запустите его>>.
+
+[start=3]
+. В поле "Имя проекта" введите ``HelloApplet`` . В области "Расположение проекта" укажите любую папку на своем компьютере.
+
+[start=4]
+. Нажмите кнопку "Завершить". Если файл исходного кода апплета был импортирован, <<runanddebug,запустите его>>.
=== Создание файла исходного кода апплета
@@ -76,19 +80,29 @@ _ _
*Примечание.* Если выбрана версия JDK 1.6, апплет может не запускаться на компьютерах, на которых установлена предыдущая версия JRE или подключаемого модуля Java для браузера.
-3. Нажмите узел HelloApplet в окне "Проекты" и выберите "Новый" > "Другое" (Ctrl-N).
-4. В области "Категории" выберите "Java". В области "Типы файлов" выберите "Апплет".
+
+[start=3]
+. Нажмите узел HelloApplet в окне "Проекты" и выберите "Новый" > "Другое" (Ctrl-N).
+
+[start=4]
+. В области "Категории" выберите "Java". В области "Типы файлов" выберите "Апплет".
Если же нужно использовать визуальные средства для разработки апплета, выберите "Формы Swing GUI" > "Форма JApplet".
Нажмите кнопку "Далее".
-5. В области "Имя класса" введите ``MyApplet`` . В поле "Пакет" введите ``org.me.hello`` .
-6. Нажмите кнопку "Завершить".
+
+[start=5]
+. В области "Имя класса" введите ``MyApplet`` . В поле "Пакет" введите ``org.me.hello`` .
+
+[start=6]
+. Нажмите кнопку "Завершить".
Среда IDE создает исходный файл апплет в указанном пакете. Исходный файл апплета открывается в редакторе исходного кода.
-7. Определите класс своего апплета, заменив существующий стандартный код следующим кодом:
+
+[start=7]
+. Определите класс своего апплета, заменив существующий стандартный код следующим кодом:
[source,java]
----
@@ -162,11 +176,15 @@ image::images/movie-magic-quiz.png[]
*Примечание.* Проекты IDE помечены специальным значком 'Проект NetBeans IDE'.
* Если используемый файл апплета JAR не входит в проект IDE, нажмите 'Добавить файл/папку' и найдите папку с файлом JAR. Нажмите 'Выбрать'.
-4. Убедитесь, что JAR с исходным файлом апплета отображается в таблице в окне 'Свойства проекта'. Нажмите кнопку "ОК".
+
+[start=4]
+. Убедитесь, что JAR с исходным файлом апплета отображается в таблице в окне 'Свойства проекта'. Нажмите кнопку "ОК".
По умолчанию файл JAR апплета будет скопирован в библиотеку страницы веб-приложения (папку ``build/web `` ). Папка ``build/web `` является корневым каталогом приложения и отображается в таблице как " ``/`` " в переменной Path в столбце WAR. Вы можете изменить расположение апплета в WAR. Для этого введите новое расположение апплета в переменной Path в столбце WAR.
-5. Нажмите ОК, чтобы закрыть диалоговое окно 'Свойства проекта'.
+
+[start=5]
+. Нажмите ОК, чтобы закрыть диалоговое окно 'Свойства проекта'.
При сборке проекта ``HelloWebApplet`` с помощью команды 'Выполнить > Собрать проект (HelloWebApplet)' главного меню IDE JAR-файл апплета создается в исходном проекте ``HelloApplet`` и упаковывается в WAR-файл проекта ``HelloWebApplet`` . Он также добавляется в папку ``build/web`` . Следить за процессом можно в окне "Результат", а конечный результат можно посмотреть в окне "Файлы".
@@ -181,7 +199,9 @@ image:images/helloapplet-jar-in-files-small.png[role="left", link="images/helloa
1. Выполните одно из следующих действий.
* Если необходимо встроить апплет в файл JSP, дважды нажмите стандартный файл ``index.jsp`` в окне "Свойства". Этот файл создается средой IDE при создании веб-проекта. Файл открывается в редакторе исходного кода.
* Если необходимо внедрить апплет в файл HTML, щелкните правой кнопкой мыши узел проекта HelloWebApplet и выберите 'Создать' > 'Другие' в контекстном меню. В области "Категории" выберите "Web". В области "Типы файлов" выберите HTML. Нажмите кнопку "Далее". Укажите название файла HTML, выберите папку Web (она расположена в нужном месте) и нажмите "Завершить".
-2. Встройте апплет в файл, добавив следующий тег апплета в любом месте в рамках тегов ``<body>`` ``</body>`` .
+
+[start=2]
+. Встройте апплет в файл, добавив следующий тег апплета в любом месте в рамках тегов ``<body>`` ``</body>`` .
* В файле HTML: [examplecode]# ``<applet code="org.me.hello.MyApplet" archive="HelloApplet.jar"></applet>`` #
* В файле JSP: [examplecode]# ``<applet code="org.me.hello.MyApplet" archive="HelloApplet.jar" width="600" height="480"/>`` #
@@ -191,7 +211,9 @@ image:images/helloapplet-jar-in-files-small.png[role="left", link="images/helloa
* При добавлении апплета в файл HTML в рамках этой учебной задачи можно игнорировать значок подсказки, который появляется в левом поле.
* ``org.me.hello.MyApplet`` - полное имя класса апплета.
* ``HelloApplet.jar`` - файл JAR, содержащий апплет.
-3. В окне "Проекты" щелкните узел JSP или HTML правой кнопкой мыши и в контекстном меню выберите "Выполнить файл".
+
+[start=3]
+. В окне "Проекты" щелкните узел JSP или HTML правой кнопкой мыши и в контекстном меню выберите "Выполнить файл".
Сервер развертывает файл JSP или HTML в браузере среды IDE, установленном по умолчанию.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/applets_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/applets_zh_CN.asciidoc
index 425c58c..59df714 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/applets_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/applets_zh_CN.asciidoc
@@ -65,8 +65,12 @@ _ _
2. 执行以下操作之一：
* 如果是创建一个新的小应用程序源文件，请在 "Projects"（项目）下选择 "Java Class Library"（Java 类库）。单击 "Next"（下一步）。
* 如果想导入小应用程序源文件，则选择 "Java Project with Existing Sources"（基于现有源代码的 Java 项目）。单击 "Next"（下一步）。在 "Source Packages Folder"（源包文件夹）文本框中指定该文件的位置。
-3. 在 "Project Name"（项目名称）下，键入 ``HelloApplet`` 。将 "Project Location"（项目位置）更改为计算机上的任意文件夹。
-4. 单击 "Finish"（完成）。如果已导入一个小应用程序源文件，则<<runanddebug,运行该文件>>。
+
+[start=3]
+. 在 "Project Name"（项目名称）下，键入 ``HelloApplet`` 。将 "Project Location"（项目位置）更改为计算机上的任意文件夹。
+
+[start=4]
+. 单击 "Finish"（完成）。如果已导入一个小应用程序源文件，则<<runanddebug,运行该文件>>。
=== 创建小应用程序源文件
@@ -76,19 +80,29 @@ _ _
*注：*例如，如果选择 JDK 6，则小应用程序可能不会在具有旧版本 JRE 或 Java 浏览器插件的计算机上运行。
-3. 右键单击 "Projects"（项目）窗口中的 HelloApplet 项目节点，然后选择 "New"（新建）> "Other"（其他）（Ctrl-N 组合键）。
-4. 在 "Categories"（类别）下，选择 "Java"。在 "File Types"（文件类型）下，选择 "Applet"（小应用程序）。
+
+[start=3]
+. 右键单击 "Projects"（项目）窗口中的 HelloApplet 项目节点，然后选择 "New"（新建）> "Other"（其他）（Ctrl-N 组合键）。
+
+[start=4]
+. 在 "Categories"（类别）下，选择 "Java"。在 "File Types"（文件类型）下，选择 "Applet"（小应用程序）。
或者，如果想以可视方式设计您的小应用程序，则选择 "Swing GUI Forms"（Swing GUI 窗体）> "JApplet Form"（JApplet 窗体）。
单击 "Next"（下一步）。
-5. 在 "Class Name"（类名）下，键入 ``MyApplet`` 。在 "Package"（包）下，键入 ``org.me.hello`` 。
-6. 单击 "Finish"（完成）。
+
+[start=5]
+. 在 "Class Name"（类名）下，键入 ``MyApplet`` 。在 "Package"（包）下，键入 ``org.me.hello`` 。
+
+[start=6]
+. 单击 "Finish"（完成）。
IDE 会在指定的包中创建小应用程序源文件。小应用程序源文件会在源代码编辑器中打开。
-7. 通过复制以下代码并将其粘贴到现有默认代码上来定义您的小应用程序类：
+
+[start=7]
+. 通过复制以下代码并将其粘贴到现有默认代码上来定义您的小应用程序类：
[source,java]
----
@@ -162,11 +176,15 @@ image::images/movie-magic-quiz.png[]
*注：*IDE 项目由 NetBeans IDE 项目图标标记。
* 如果您使用的小应用程序 JAR 文件不在 IDE 项目中，请单击 "Add File/Folder"（添加文件/文件夹），然后查找包含该 JAR 文件的文件夹。单击 "Choose"（选择）。
-4. 确认在 "Project Properties"（项目属性）窗口的表中列出包含小应用程序源文件的 JAR。单击 "OK"（确定）。
+
+[start=4]
+. 确认在 "Project Properties"（项目属性）窗口的表中列出包含小应用程序源文件的 JAR。单击 "OK"（确定）。
默认情况下，会将小应用程序 JAR 文件复制到 Web 应用程序的 Web 页库，即 ``build/web `` 文件夹中。 ``build/web`` 文件夹是应用程序的根目录，且在表 WAR 列的 "Path"（路径）中显示为 " ``/`` "。通过在 WAR 列的 "Path"（路径）中键入小应用程序的新位置，可以修改 WAR 中的小应用程序位置。
-5. 单击 "Close"（关闭）以关闭 "Project Properties"（项目属性）窗口。
+
+[start=5]
+. 单击 "Close"（关闭）以关闭 "Project Properties"（项目属性）窗口。
在构建 ``HelloWebApplet`` 项目（从 IDE 的主菜单中选择 "Run"（运行）> "Build Project (HelloWebApplet)"（构建项目 (HelloWebApplet)））时，小应用程序的 JAR 文件将在原始的 ``HelloApplet`` 项目中生成，并在 ``HelloWebApplet`` 项目的 WAR 文件中打包。还会将其添加到 ``build/Web`` 文件夹中。可在 "Output"（输出）窗口中执行此过程，并在 "Files"（文件）窗口中查看结果。
@@ -181,7 +199,9 @@ image:images/helloapplet-jar-in-files-small.png[role="left", link="images/helloa
1. 执行以下操作之一：
* 如果想将小应用程序嵌入到 JSP 文件中，则在 "Projects"（项目）窗口中，双击默认的 ``index.jsp`` 文件。当创建 Web 项目时，由 IDE 创建该文件。将在源代码编辑器中打开该文件。
* 如果想将小应用程序嵌入到 HTML 文件中，则右键单击 HelloWebApplet 项目节点，然后从上下文菜单中选择 "New"（新建）> "Other"（其他）。在 "Categories"（类别）下，选择 "Web"。在 "File Types"（文件类型）下，选择 "HTML"。单击 "Next"（下一步）。指定 HTML 文件的名称，选择 Web 文件夹作为其位置，然后单击 "Finish"（完成）。
-2. 通过在文件的 ``<body>`` ``</body>`` 标记之间的任意位置添加以下小应用程序标记，将小应用程序嵌入到该文件中：
+
+[start=2]
+. 通过在文件的 ``<body>`` ``</body>`` 标记之间的任意位置添加以下小应用程序标记，将小应用程序嵌入到该文件中：
* 在 HTML 文件中：[examplecode]# ``<applet code="org.me.hello.MyApplet" archive="HelloApplet.jar"></applet>`` #
* 在 JSP 文件中：[examplecode]# ``<applet code="org.me.hello.MyApplet" archive="HelloApplet.jar" width="600" height="480"/>`` #
@@ -191,7 +211,9 @@ image:images/helloapplet-jar-in-files-small.png[role="left", link="images/helloa
* 对于本教程，如果将小应用程序代码添加到 HTML 文件中，则可以忽略左旁注中的提示图标。
* ``org.me.hello.MyApplet`` 是您的小应用程序的完整类名。
* ``HelloApplet.jar`` 是包含此小应用程序的 JAR 文件。
-3. 右键单击 "Projects"（项目）窗口中的 JSP 节点或 HTML 节点，然后从上下文菜单中选择 "Run File"（运行文件）。
+
+[start=3]
+. 右键单击 "Projects"（项目）窗口中的 JSP 节点或 HTML 节点，然后从上下文菜单中选择 "Run File"（运行文件）。
服务器将 JSP 文件或 HTML 文件部署在 IDE 的默认浏览器中。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support.asciidoc
index 3d6ede1..df6e249 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support.asciidoc
@@ -93,26 +93,41 @@ When you extract the contents, you will see that the archive contains three file
NetBeans plugins can be identified by the ``.nbm`` extension.
-2. From the IDE's main menu, choose Tools > Plugins to open the Plugin Manager.
-3. Select the Downloaded tab, then click the Add Plugins button.
-4. In the Add Plugins dialog, navigate to the directory that contains the plugins and select the NetBeans plugins. Click Open.
+
+[start=2]
+. From the IDE's main menu, choose Tools > Plugins to open the Plugin Manager.
+
+[start=3]
+. Select the Downloaded tab, then click the Add Plugins button.
+
+[start=4]
+. In the Add Plugins dialog, navigate to the directory that contains the plugins and select the NetBeans plugins. Click Open.
+
image::images/plugin-archive-contents.png[title="The zip archive contains the NetBeans plugins"]
Hold down the Ctrl key to select multiple items.
-5. In the Plugins manager, select each of the Struts2 plugins.
+
+[start=5]
+. In the Plugins manager, select each of the Struts2 plugins.
A description of the selected plugin is displayed in the right pane of the Plugins manager.
[.feature]
--
+
image::images/add-plugins-sm.png[role="left", link="images/add-plugins.png"]
+
--
-6. Click Install to open the NetBeans IDE Installer, then click Next and accept the license agreement.
+
+[start=6]
+. Click Install to open the NetBeans IDE Installer, then click Next and accept the license agreement.
*Note.* If you receive a validation warning, click Continue to install the plugin. A validation warning occurs if you attempt to install a plugin that has not been signed. While you can generally trust all plugins, when you install a plugin that has not been signed, you are doing so at your own risk.
-7. Restart the IDE to allow changes to take effect.
+
+[start=7]
+. Restart the IDE to allow changes to take effect.
After you install the plugin and restart the IDE, you can confirm that the plugin was installed by opening the Plugins manager, clicking the Installed tab and locating the plugin in the list of installed plugins.
@@ -125,7 +140,9 @@ Various update centers are already registered with the IDE by default. To see a
[.feature]
--
+
image::images/pluginsmanager-settings-sm.png[role="left", link="images/pluginsmanager-settings.png"]
+
--
If you want to register a new update center, click the Add button in the Settings tab and supply the details in the Update Center Customizer.
@@ -147,7 +164,9 @@ After you install the plugin, the NetBeans Plugin Portal Update Center is added
[.feature]
--
+
image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin.png"]
+
--
If you click the Available Plugins tab you can see that all the plugins that have been contributed by the community to the NetBeans Plugin Portal have been added to the list of available plugins.
@@ -156,7 +175,9 @@ Click Reload Catalog to update the list of plugins.
[.feature]
--
+
image::images/portal-uc-list-sm.png[role="left", link="images/portal-uc-list.png"]
+
--
You can sort the list by clicking on a column heading and you can filter the list by entering terms in the Search field.
@@ -180,6 +201,7 @@ You can add framework support to a web application either through the New Projec
2. Type a name for the Project Name and specify a location for the project on your computer.
3. Step through the wizard and accept any default settings. Specify a server to deploy the application to by choosing one that is already registered with the IDE (i.e., the GlassFish server or Tomcat).
4. In the Frameworks panel of the New Project wizard, choose the framework that you want to add. Click Finish.
+
image::images/newproject-wizard-frameworks-sm.png[title="Struts 2 Support listed in Frameworks panel of the New Project wizard"]
In this example, support for the Struts2 framework is selected in the Frameworks panel. You can see that the Frameworks panel now offers the option to choose either Struts 1.3.8 (bundled with the IDE) or Struts2 (added by installing a plugin). The Struts 2 support plugin adds the Struts2 option to the New Projects wizard and displays tabs with options for Configuration and Libraries. The Configuration tab provides the option to create an example page in the project. The Libraries tab ena [...]
@@ -198,16 +220,24 @@ If you have an existing web project and you would like to add support for a fram
When you select Frameworks, the right panel displays a Used Frameworks text area, which is empty if the application does not use a framework.
-3. Click the Add button, then select the framework you want to use and click OK.
+
+[start=3]
+. Click the Add button, then select the framework you want to use and click OK.
+
image::images/properties-add-framework.png[title="JavaServer Faces framework selected in the Add Framework dialog opened from the Project Properties window"]
-4. Depending on the chosen framework, you can specify further framework-specific configuration settings or components in the Project Properties window.
+
+[start=4]
+. Depending on the chosen framework, you can specify further framework-specific configuration settings or components in the Project Properties window.
+
image::images/add-icefaces.png[title="Adding a library for the ICEfaces component suite to the project"]
For example, if you want to specify the ICEfaces component suite you can select ICEfaces in the Components tab of the Project Properties window and specify the ICEfaces library.
*Notes.* The libraries for JSF components are not included with the IDE. To use a component suite you need to download the required libraries and then create a NetBeans library that you can then add to the project classpath in the Project Properties window.
-5. Click OK to confirm your selection and close the Project Properties window. The framework-specific artifacts and libraries are added to your project, which you can examine in the Projects window.
+
+[start=5]
+. Click OK to confirm your selection and close the Project Properties window. The framework-specific artifacts and libraries are added to your project, which you can examine in the Projects window.
link:/about/contact_form.html?to=3&subject=Feedback:%20Adding%20Web%20Framework%20Support[+ Send Feedback on This Tutorial+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_ja.asciidoc
index 9d17f87..506458d 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_ja.asciidoc
@@ -93,26 +93,41 @@ image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、N
NetBeansプラグインは ``.nbm`` 拡張子によって識別できます。
-2. IDEのメイン・メニューから、「ツール」>「プラグイン」を選択し、プラグイン・マネージャを開きます。
-3. 「ダウンロード済」タブを選択し、「プラグインの追加」ボタンをクリックします。
-4. 「プラグインの追加」ダイアログで、プラグインが入っているディレクトリに移動し、NetBeansプラグインを選択します。「開く」をクリックします。
+
+[start=2]
+. IDEのメイン・メニューから、「ツール」>「プラグイン」を選択し、プラグイン・マネージャを開きます。
+
+[start=3]
+. 「ダウンロード済」タブを選択し、「プラグインの追加」ボタンをクリックします。
+
+[start=4]
+. 「プラグインの追加」ダイアログで、プラグインが入っているディレクトリに移動し、NetBeansプラグインを選択します。「開く」をクリックします。
+
image::images/plugin-archive-contents.png[title="NetBeansプラグインが含まれているzipアーカイブ"]
[Ctrl]キーを押しながら、複数の項目を選択します。
-5. プラグイン・マネージャで、各Struts2プラグインを選択します。
+
+[start=5]
+. プラグイン・マネージャで、各Struts2プラグインを選択します。
プラグイン・マネージャの右ペインには、選択したプラグインの説明が表示されます。
[.feature]
--
+
image::images/add-plugins-sm.png[role="left", link="images/add-plugins.png"]
+
--
-6. 「インストール」をクリックしてNetBeans IDEインストーラを開き、「次」をクリックしてライセンス契約書に同意します。
+
+[start=6]
+. 「インストール」をクリックしてNetBeans IDEインストーラを開き、「次」をクリックしてライセンス契約書に同意します。
*注意:*検証の警告が表示された場合、「続行」をクリックしてプラグインをインストールします。署名のないプラグインをインストールしようとすると、検証の警告が発生します。一般に、プラグインはすべて信頼できますが、署名のないプラグインをインストールする場合は自己責任で実行してください。
-7. 変更を有効にするには、IDEを再起動します。
+
+[start=7]
+. 変更を有効にするには、IDEを再起動します。
プラグインをインストールしてIDEを再起動した後、プラグイン・マネージャを開き、「インストール済」タブをクリックし、インストール済プラグインのリストでプラグインを見つけることで、プラグインがインストールされたことを確認できます。
@@ -125,7 +140,9 @@ IDEには、デフォルトで様々な更新センターがすでに登録さ
[.feature]
--
+
image::images/pluginsmanager-settings-sm.png[role="left", link="images/pluginsmanager-settings.png"]
+
--
新しい更新センターを登録する場合は、「設定」タブの「追加」ボタンをクリックし、更新センター・カスタマイザに詳細を入力します。
@@ -147,7 +164,9 @@ IDEにデフォルトで登録されているプラグイン・ポータル更
[.feature]
--
+
image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin.png"]
+
--
「使用可能なプラグイン」タブをクリックすると、コミュニティによってNetBeansプラグイン・ポータルに提供されたすべてのプラグインが、使用可能なプラグインのリストに追加されていることがわかります。
@@ -156,7 +175,9 @@ image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin
[.feature]
--
+
image::images/portal-uc-list-sm.png[role="left", link="images/portal-uc-list.png"]
+
--
列見出しをクリックすることでリストをソートでき、「検索」フィールドに検索語を入力することでリストをフィルタできます。
@@ -180,6 +201,7 @@ image::images/portal-uc-list-sm.png[role="left", link="images/portal-uc-list.png
2. 「プロジェクト名」に名前を入力し、コンピュータ上のプロジェクトの場所を指定します。
3. ウィザードのステップを実行し、すべてデフォルトの設定を受け付けます。IDEにすでに登録されているサーバーのいずれかを選択することで(GlassFishサーバーまたはTomcat)、アプリケーションをデプロイするサーバーを指定します。
4. 新規プロジェクト・ウィザードの「フレームワーク」パネルで、追加するフレームワークを選択します。「終了」をクリックします。
+
image::images/newproject-wizard-frameworks-sm.png[title="新規プロジェクト・ウィザードの「フレームワーク」パネルに表示されたStruts 2サポート"]
この例では、「フレームワーク」パネルでStruts2フレームワークのサポートが選択されています。「フレームワーク」パネルに、Struts 1.3.8 (IDEにバンドルされている)またはStruts2 (プラグインのインストールによって追加された)を選択するオプションが提示されるようになったことがわかります。Struts 2サポート・プラグインにより、新規プロジェクト・ウィザードにStruts2オプションが追加され、「構成」と「ライブラリ」のオプションを含むタブが表示されます。「構成」タブには、プロジェクトにサンプル・ページを作成するオプションがあります。「ライブラリ」タブでは、クラスパスに追加するStruts2ライブラリのバージョンを選択できます。
@@ -198,16 +220,24 @@ Webプロジェクトがすでにあり、そのプロジェクトにフレー
「フレームワーク」を選択すると、右パネルに「使用しているフレームワーク」テキスト領域が表示されます。アプリケーションがフレームワークを使用していない場合、この領域は空です。
-3. 「追加」ボタンをクリックし、使用するフレームワークを選択して、「OK」をクリックします。
+
+[start=3]
+. 「追加」ボタンをクリックし、使用するフレームワークを選択して、「OK」をクリックします。
+
image::images/properties-add-framework.png[title="「プロジェクト・プロパティ」ウィンドウから開かれた「フレームワークの追加」ダイアログで選択されたJavaServer Facesフレームワーク"]
-4. 選択したフレームワークに応じて、「プロジェクト・プロパティ」ウィンドウでフレームワーク固有の構成設定またはコンポーネントをさらに指定できます。
+
+[start=4]
+. 選択したフレームワークに応じて、「プロジェクト・プロパティ」ウィンドウでフレームワーク固有の構成設定またはコンポーネントをさらに指定できます。
+
image::images/add-icefaces.png[title="プロジェクトへのICEfacesコンポーネント・スイートのライブラリの追加"]
たとえば、ICEfacesコンポーネント・スイートを指定する場合は、「プロジェクト・プロパティ」ウィンドウの「コンポーネント」タブで「ICEfaces」を選択し、ICEfacesライブラリを指定できます。
*注意:*JSFコンポーネントのライブラリは、IDEに含まれていません。コンポーネント・スイートを使用するには、必要なライブラリをダウンロードし、「プロジェクト・プロパティ」ウィンドウでプロジェクト・クラスパスに追加できるNetBeansライブラリを作成する必要があります。
-5. 「OK」をクリックして選択内容を確認し、「プロジェクト・プロパティ」ウィンドウを閉じます。フレームワーク固有のアーティファクトとライブラリがプロジェクトに追加され、「プロジェクト」ウィンドウで確認できます。
+
+[start=5]
+. 「OK」をクリックして選択内容を確認し、「プロジェクト・プロパティ」ウィンドウを閉じます。フレームワーク固有のアーティファクトとライブラリがプロジェクトに追加され、「プロジェクト」ウィンドウで確認できます。
link:/about/contact_form.html?to=3&subject=Feedback:%20Adding%20Web%20Framework%20Support[+ このチュートリアルに関するご意見をお寄せください+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_pt_BR.asciidoc
index e4012ca..fa6a907 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_pt_BR.asciidoc
@@ -93,26 +93,41 @@ Após ter extraído o conteúdo, você verá que o arquivo compactado contém tr
Os plug-ins do NetBeans podem ser identificados pela extensão ``.nbm`` .
-2. No menu principal do IDE, selecione Ferramentas > Plug-ins para abrir o Gerenciador de Plug-ins.
-3. Selecione a guia Download e clique no botão Adicionar Plug-ins.
-4. Na caixa de diálogo Adicionar Plug-ins, navegue para o diretório que contém os plug-ins e selecione Plug-ins do NetBeans. Clique em Abrir.
+
+[start=2]
+. No menu principal do IDE, selecione Ferramentas > Plug-ins para abrir o Gerenciador de Plug-ins.
+
+[start=3]
+. Selecione a guia Download e clique no botão Adicionar Plug-ins.
+
+[start=4]
+. Na caixa de diálogo Adicionar Plug-ins, navegue para o diretório que contém os plug-ins e selecione Plug-ins do NetBeans. Clique em Abrir.
+
image::images/plugin-archive-contents.png[title="O arquivo compactado zip contém os plug-ins do NetBeans"]
Mantenha pressionada a tecla Ctrl para selecionar vários itens.
-5. No gerenciador de Plug-ins, selecione cada um dos plug-ins do Struts 2.
+
+[start=5]
+. No gerenciador de Plug-ins, selecione cada um dos plug-ins do Struts 2.
Uma descrição do plug-in selecionado será exibida no painel direito do gerenciador de Plug-ins.
[.feature]
--
+
image::images/add-plugins-sm.png[role="left", link="images/add-plugins.png"]
+
--
-6. Clique em Instalar para abrir o Instalador do NetBeans IDE e, em seguida, clique em Próximo e aceite o contrato de licença.
+
+[start=6]
+. Clique em Instalar para abrir o Instalador do NetBeans IDE e, em seguida, clique em Próximo e aceite o contrato de licença.
*Observação.* Se você receber uma advertência de validação, clique em Continuar para instalar o plug-in. Um advertência de validação ocorre se você tentar instalar um plug-in que não foi assinado. Embora você geralmente possa confiar em todos os plug-ins, quando instala um plug-in que não foi assinado, estará fazendo isso por seu próprio risco.
-7. Reinicie o IDE para que as alterações tenham efeito.
+
+[start=7]
+. Reinicie o IDE para que as alterações tenham efeito.
Depois de ter instalado o plug-in e reiniciado o IDE, você poderá confirmar se o plug-in foi instalado ao abrir o gerenciador de Plug-ins, clicando na guia Instalados e localizando o plug-in na lista de plug-ins instalados.
@@ -125,7 +140,9 @@ Várias centrais de atualização já estão registradas no IDE por default. Par
[.feature]
--
+
image::images/pluginsmanager-settings-sm.png[role="left", link="images/pluginsmanager-settings.png"]
+
--
Caso deseje registrar um nova central de atualização, clique no botão Adicionar na guia Definições e forneça os detalhes no Personalizador da Central de Atualização.
@@ -147,7 +164,9 @@ Após você ter instalado o plug-in, a Central de Atualização do Portal de Plu
[.feature]
--
+
image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin.png"]
+
--
Se você clicar na guia Plug-ins Disponíveis, poderá ver que todos os plug-ins que foram contribuídos pela comunidade para o Portal de Plug-ins do NetBeans foram adicionados à lista de plug-ins disponíveis.
@@ -156,7 +175,9 @@ Clique em Recarregar Catálogo para atualizar a lista de plug-ins.
[.feature]
--
+
image::images/portal-uc-list-sm.png[role="left", link="images/portal-uc-list.png"]
+
--
Você pode classificar a lista ao clicar em um cabeçalho de coluna e pode filtrar a lista ao digitar termos no campo Pesquisar.
@@ -180,6 +201,7 @@ Você pode adicionar suporte a framework em uma aplicação Web por meio do assi
2. Digite um nome para o Nome do Projeto e especifique um local para o projeto em seu computador.
3. Passe pelo assistente e aceite quaisquer definições default. Especifique um servidor para implantar a aplicação, selecionando um que já esteja registrado no IDE (ou seja, GlassFish Server ou Tomcat).
4. No painel Frameworks do assistente Novo Projeto, feche o framework que deseja adicionar. Clique em Finalizar.
+
image::images/newproject-wizard-frameworks-sm.png[title="Struts 2 Support listado no painel Frameworks do assistente Novo Projeto"]
Neste exemplo, o suporte para o framework Struts2 é selecionado no painel Frameworks. Você pode ver que o painel Frameworks agora oferece a opção para escolher o Struts 1.3.8 (incorporado com o IDE) ou Struts2 (adicionado ao instalar um plug-in). O plug-in de suporte do Struts 2 adiciona a opção Struts2 ao assistente Novos Projetos e exibe guias com opções para Configuração e Bibliotecas. A guia Configuração fornece a opção de criar uma página de exemplo no projeto. A guia Bibliotecas pe [...]
@@ -198,16 +220,24 @@ Caso você tenha um projeto Web existente e gostaria de adicionar o suporte a um
Quando você selecionar Frameworks o painel direito exibe uma área de texto de Frameworks Usado, que fica vazia caso a aplicação não usa um framework.
-3. Clique no botão Adicionar e, em seguida, selecione o framework que deseja usar e clique em OK.
+
+[start=3]
+. Clique no botão Adicionar e, em seguida, selecione o framework que deseja usar e clique em OK.
+
image::images/properties-add-framework.png[title="Framework JavaServer Faces selecionado na caixa de diálogo Adicionar Framework aberta na janela Propriedades do Projeto"]
-4. Dependendo do framework escolhido, você pode especificar definições ou componentes de configuração específicas do framework na janela Propriedades do Projeto.
+
+[start=4]
+. Dependendo do framework escolhido, você pode especificar definições ou componentes de configuração específicas do framework na janela Propriedades do Projeto.
+
image::images/add-icefaces.png[title="Adicionando uma biblioteca do conjunto de componentes ICEfaces ao projeto"]
Por exemplo, se quiser especificar o conjunto de componentes ICEfaces você pode selecionar ICEfaces na guia Componentes da janela Propriedades do Projeto e especificar a biblioteca ICEfaces.
*Observações.* As bibliotecas dos componentes JSF não estão incluídas no IDE. Para usar um conjunto de componentes você precisa fazer download das bibliotecas necessárias e, em seguida, criar uma biblioteca NetBeans que você pode adicionar ao classpath do projeto na janela Propriedades do Projeto.
-5. Clique em OK para confirmar sua seleção e feche a janela Propriedades do Projeto. Os artefatos e bibliotecas específicos do framework são adicionados ao seu projeto, que você pode examinar na janela Projetos.
+
+[start=5]
+. Clique em OK para confirmar sua seleção e feche a janela Propriedades do Projeto. Os artefatos e bibliotecas específicos do framework são adicionados ao seu projeto, que você pode examinar na janela Projetos.
link:/about/contact_form.html?to=3&subject=Feedback:%20Adding%20Web%20Framework%20Support[+ Enviar Feedback neste Tutorial+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_ru.asciidoc
index 50fb23d..58e863b 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_ru.asciidoc
@@ -93,26 +93,41 @@ image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой
Подключаемые модули NetBeans можно опознать по их расширению ``.nbm`` .
-2. Из основного меню среды IDE выберите Tools ("Сервис") > Plugins ("Подключаемые модули") для открытия диспетчера подключаемых модулей.
-3. Выберите вкладку Downloaded ("Загруженные") и нажмите кнопку Add Plugins ("Добавление подключаемых модулей").
-4. В диалоговом окне добавления подключаемых модулей перейдите к содержащему их каталогу и выберите модуль NetBeans. Нажмите кнопку Open ("Открыть").
+
+[start=2]
+. Из основного меню среды IDE выберите Tools ("Сервис") > Plugins ("Подключаемые модули") для открытия диспетчера подключаемых модулей.
+
+[start=3]
+. Выберите вкладку Downloaded ("Загруженные") и нажмите кнопку Add Plugins ("Добавление подключаемых модулей").
+
+[start=4]
+. В диалоговом окне добавления подключаемых модулей перейдите к содержащему их каталогу и выберите модуль NetBeans. Нажмите кнопку Open ("Открыть").
+
image::images/plugin-archive-contents.png[title="Архив zip содержит подключаемые модули NetBeans"]
Нажмите и удерживайте клавишу Ctrl для выбора нескольких элементов.
-5. В диспетчере подключаемых модулей выберите каждый из модулей Struts2.
+
+[start=5]
+. В диспетчере подключаемых модулей выберите каждый из модулей Struts2.
Описание выбранного подключаемого модуля отображается на правой панели диспетчера подключаемых модулей.
[.feature]
--
+
image::images/add-plugins-sm.png[role="left", link="images/add-plugins.png"]
+
--
-6. Щелкните 'Установить', чтобы открыть установщик IDE NetBeans, а затем щелкните 'Далее' и примите условия лицензионного соглашения.
+
+[start=6]
+. Щелкните 'Установить', чтобы открыть установщик IDE NetBeans, а затем щелкните 'Далее' и примите условия лицензионного соглашения.
*Примечание.* При получении предупреждения проверки для установки подключаемого модуля щелкните 'Продолжить'. Предупреждение проверки выдается при попытке установить неподписанный подключаемый модуль. Хотя обычно всем подключаемым модулям можно доверять, установка неподписанного модуля осуществляется на ваш страх и риск.
-7. Перезапустите среду IDE, чтобы дать изменениям возможность вступить в силу.
+
+[start=7]
+. Перезапустите среду IDE, чтобы дать изменениям возможность вступить в силу.
После установки подключаемого модуля и перезапуска среды IDE можно убедиться в том, что он установлен, открыв диспетчер подключаемых модулей, щелкнув вкладку Installed ("Установленные") и найдя его в списке установленных подключаемых модулей.
@@ -125,7 +140,9 @@ image::images/add-plugins-sm.png[role="left", link="images/add-plugins.png"]
[.feature]
--
+
image::images/pluginsmanager-settings-sm.png[role="left", link="images/pluginsmanager-settings.png"]
+
--
Если необходимо зарегистрировать новый центр обновлений, нажмите кнопку Add ("Добавить") на вкладке Settings ("Параметры") и введите сведения в настройщик центра обновлений.
@@ -147,7 +164,9 @@ image::images/uc-customizer.png[title="Диалоговое окно 'Средс
[.feature]
--
+
image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin.png"]
+
--
Если щелкнуть вкладку Available Plugins ("Доступные подключаемые модули"), то можно будет увидеть, что все подключаемые модули, загруженные сообществом на портал подключаемых модулей NetBeans, были внесены в список доступных подключаемых модулей.
@@ -156,7 +175,9 @@ image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin
[.feature]
--
+
image::images/portal-uc-list-sm.png[role="left", link="images/portal-uc-list.png"]
+
--
Этот список можно упорядочить, щелкнув заголовок столбца, либо отфильтровать, введя условия в поле поиска.
@@ -180,6 +201,7 @@ image::images/portal-uc-list-sm.png[role="left", link="images/portal-uc-list.png
2. Введите имя в поле Project Name ("Имя проекта") и укажите местоположение для проекта на используемом компьютере.
3. Пройдите через этапы работы мастера, принимая все параметры по умолчанию. Укажите серверу развернуть приложение, выбрав один из серверов приложений, уже зарегистрированных в IDE (т. е. сервер GlassFish или Tomcat).
4. На панели Frameworks ("Платформы") мастера создания проектов выберите платформу, которую нужно добавить. Нажмите кнопку "Готово".
+
image::images/newproject-wizard-frameworks-sm.png[title="Поддержка Struts 2 указана на панели 'Платформы' мастера создания проектов"]
В данном примере поддержка платформы Struts 2 указана на панели Frameworks ("Платформы"). Можно увидеть, что панель Frameworks ("Платформы") теперь предлагает выбор между Struts 1.3.8 (входящей в среду IDE) или Struts2 (добавленной посредством подключаемого модуля). При установке подключаемого модуля поддержки Struts2 в мастер создания проектов добавляется пункт Struts2, а также вкладки с параметрами для настройки и библиотек. Вкладка Configuration ("Настройка") предоставляет возможность [...]
@@ -198,16 +220,24 @@ image::images/project-structure-frameworks.png[title="Логическая ст
После выбора значения 'Платформы' на правой панели отображается текстовая область 'Используемые платформы'. Если приложение не использует никакие платформы, эта область будет пуста.
-3. Нажмите кнопку 'Добавить', выберите нужную платформу и нажмите OK.
+
+[start=3]
+. Нажмите кнопку 'Добавить', выберите нужную платформу и нажмите OK.
+
image::images/properties-add-framework.png[title="Платформа JavaServer Faces выбрана в диалоговом окне 'Добавление платформы', открытом в окне 'Свойства проекта'"]
-4. В зависимости от выбранной платформы укажите относящиеся к этой платформе параметры конфигурации или компоненты, представленные в окне 'Свойства проекта'.
+
+[start=4]
+. В зависимости от выбранной платформы укажите относящиеся к этой платформе параметры конфигурации или компоненты, представленные в окне 'Свойства проекта'.
+
image::images/add-icefaces.png[title="Добавление библиотеки для набора компонентов ICEfaces в проект"]
Например, если вы хотите указать набор компонентов ICEfaces, можно выбрать ICEfaces на вкладке 'Компоненты' в окне 'Свойства проекта' и указать библиотеку ICEfaces.
*Примечания.* Библиотеки для компонентов JSF не входят в комплект IDE. Чтобы использовать наборы компонентов, необходимо загрузить требуемые библиотеки и создать библиотеку NetBeans, которую затем можно добавить в путь классов проекта в окне 'Свойства проекта'.
-5. Нажмите кнопку "OК", чтобы подтвердить свой выбор, и закройте окно Project Properties ("Свойства проекта"). К проекту будут добавлены относящиеся к этой платформе артефакты и библиотеки, которые можно изучить в окне проектов.
+
+[start=5]
+. Нажмите кнопку "OК", чтобы подтвердить свой выбор, и закройте окно Project Properties ("Свойства проекта"). К проекту будут добавлены относящиеся к этой платформе артефакты и библиотеки, которые можно изучить в окне проектов.
link:/about/contact_form.html?to=3&subject=Feedback:%20Adding%20Web%20Framework%20Support[+ Отправить отзыв по этому учебному курсу+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_zh_CN.asciidoc
index f2013e5..0706568 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/framework-adding-support_zh_CN.asciidoc
@@ -93,26 +93,41 @@ image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 Net
NetBeans 插件可由 ``.nbm`` 扩展名来标识。
-2. 从 IDE 的主菜单中，选择 "Tools"（工具）> "Plugins"（插件）以打开插件管理器。
-3. 选择 "Downloaded"（已下载）标签，然后单击 "Add Plugins"（添加插件）按钮。
-4. 在 "Add Plugins"（添加插件）对话框中，导航至包含插件的目录并选择 NetBeans 插件。单击 "Open"（打开）。
+
+[start=2]
+. 从 IDE 的主菜单中，选择 "Tools"（工具）> "Plugins"（插件）以打开插件管理器。
+
+[start=3]
+. 选择 "Downloaded"（已下载）标签，然后单击 "Add Plugins"（添加插件）按钮。
+
+[start=4]
+. 在 "Add Plugins"（添加插件）对话框中，导航至包含插件的目录并选择 NetBeans 插件。单击 "Open"（打开）。
+
image::images/plugin-archive-contents.png[title="zip 档案文件包含 NetBeans 插件"]
按住 Ctrl 键可选择多个项目。
-5. 在插件管理器中，选择每个 Struts2 插件。
+
+[start=5]
+. 在插件管理器中，选择每个 Struts2 插件。
插件管理器的右窗格中将显示选定插件的描述。
[.feature]
--
+
image::images/add-plugins-sm.png[role="left", link="images/add-plugins.png"]
+
--
-6. 单击 "Install"（安装）以打开 "NetBeans IDE Installer"（NetBeans IDE 安装程序），然后单击 "Next"（下一步）并接受许可证协议。
+
+[start=6]
+. 单击 "Install"（安装）以打开 "NetBeans IDE Installer"（NetBeans IDE 安装程序），然后单击 "Next"（下一步）并接受许可证协议。
*注：*如果您接收到验证警告，请单击“继续”以安装该插件。在尝试安装未签名的插件时，将会出现验证警告。通常情况下，您可以信任所有插件，但是如果安装未签名的插件，则会带来一定的风险。
-7. 重新启动 IDE 使更改生效。
+
+[start=7]
+. 重新启动 IDE 使更改生效。
在安装插件并重新启动 IDE 之后，可以通过打开插件管理器、单击 "Installed"（已安装）标签并在已安装插件的列表中查找插件来确认插件已安装。
@@ -125,7 +140,9 @@ image::images/add-plugins-sm.png[role="left", link="images/add-plugins.png"]
[.feature]
--
+
image::images/pluginsmanager-settings-sm.png[role="left", link="images/pluginsmanager-settings.png"]
+
--
如果要注册新的更新中心，可单击 "Settings"（设置）标签中的 "Add"（添加）按钮，然后在 "Update Center Customizer"（更新中心定制器）中提供详细信息。
@@ -147,7 +164,9 @@ image::images/uc-customizer.png[title=""Update Center Customizer"（更新中心
[.feature]
--
+
image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin.png"]
+
--
如果单击 "Available Plugins"（可用插件）标签，则可看到，社区向 NetBeans 插件门户贡献的所有插件均已添加到可用插件的列表中。
@@ -156,7 +175,9 @@ image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin
[.feature]
--
+
image::images/portal-uc-list-sm.png[role="left", link="images/portal-uc-list.png"]
+
--
通过单击列标题可对列表进行排序，通过在 "Search"（搜索）字段中输入搜索词可以过滤列表。
@@ -180,6 +201,7 @@ IDE 中的框架支持通常特定于您所使用的框架。例如，Struts2
2. 在 "Project Name"（项目名称）中键入名称，然后指定该项目在计算机上的位置。
3. 逐步执行向导，并接受任何默认设置。通过选择已在 IDE 中注册的服务器（即 GlassFish Server 或 Tomcat），指定用于部署应用程序的服务器。
4. 在新建项目向导的 "Frameworks"（框架）面板中，选择要添加的框架。单击 "Finish"（完成）。
+
image::images/newproject-wizard-frameworks-sm.png[title="新建项目向导的 "Frameworks"（框架）面板中列出的 Struts 2 支持"]
在此示例中，在 "Frameworks"（框架）面板中选择了对 Struts2 框架的支持。您会看到，现在 "Frameworks"（框架）面板提供了选择 Struts 1.3.8（与 IDE 捆绑在一起）或 Struts2（通过安装插件来添加）的选项。Struts 2 支持插件将 "Struts2" 选项添加到新建项目向导中，并显示具有 "Configuration"（配置）和 "Libraries"（库）选项的标签。"Configuration"（配置）标签提供用于在项目中创建示例页的选项。通过 "Libraries"（库）标签可以选择要添加到类路径的 Struts2 库的版本。
@@ -198,16 +220,24 @@ image::images/project-structure-frameworks.png[title=""Projects"（项目）窗
选择 "Frameworks"（框架）时，右面板将显示 "Used Frameworks"（使用的框架）文本区域，如果应用程序未使用框架，则该文本区域为空。
-3. 单击 "Add"（添加）按钮，然后选择要使用的框架并单击 "OK"（确定）。
+
+[start=3]
+. 单击 "Add"（添加）按钮，然后选择要使用的框架并单击 "OK"（确定）。
+
image::images/properties-add-framework.png[title="从 "Project Properties"（项目属性）窗口打开的 "Add Framework"（添加框架）对话框中选择的 JavaServer Faces 框架"]
-4. 根据所选框架，可以在 "Project Properties"（项目属性）窗口中进一步指定特定于框架的配置设置或组件。
+
+[start=4]
+. 根据所选框架，可以在 "Project Properties"（项目属性）窗口中进一步指定特定于框架的配置设置或组件。
+
image::images/add-icefaces.png[title="将 ICEfaces 组件套件的库添加到项目中"]
例如，如果要指定 ICEfaces 组件套件，则可以在 "Project Properties"（项目属性）窗口的 "Components"（组件）标签中选择 "ICEfaces"，然后指定 ICEfaces 库。
*注：*IDE 中不包含 JSF 组件的库。要使用组件套件，您需要下载所需的库，然后创建一个 NetBeans 库，您随后可以在 "Project Properties"（项目属性）窗口中将该库添加到项目类路径中。
-5. 单击 "OK"（确定）以确认您的选择，然后关闭 "Project Properties"（项目属性）窗口。项目中将添加特定于框架的工件和库，您可以在 "Projects"（项目）窗口中对其进行检查。
+
+[start=5]
+. 单击 "OK"（确定）以确认您的选择，然后关闭 "Project Properties"（项目属性）窗口。项目中将添加特定于框架的工件和库，您可以在 "Projects"（项目）窗口中对其进行检查。
link:/about/contact_form.html?to=3&subject=Feedback:%20Adding%20Web%20Framework%20Support[+ 发送有关此教程的反馈意见+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart.asciidoc
index f773392..2e4f55d 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart.asciidoc
@@ -66,8 +66,12 @@ In this section, we run the "grails create-app" command from the IDE, by using t
You can confirm it is working correctly by running Grails from the command line (i.e., type "grails" at the command prompt).
-2. Choose File > New Project (Ctrl-Shift-N) and then select "Grails Application" from the "Groovy" category. Click Next.
-3. In Project Name, type "BookDemo"; in Project Location, select the folder where the application will be created. Click Finish.
+
+[start=2]
+. Choose File > New Project (Ctrl-Shift-N) and then select "Grails Application" from the "Groovy" category. Click Next.
+
+[start=3]
+. In Project Name, type "BookDemo"; in Project Location, select the folder where the application will be created. Click Finish.
The IDE runs the "grails create-app" command, showing the output in the Output window. The Projects window should show you this:
@@ -83,8 +87,11 @@ In this section, we use the IDE to run the "grails create-domain-class" script.
1. Right-click on the Domain Classes node and choose New > Grails Domain Class.
2. Name the domain class "Book" and click Finish. The "Book.groovy" domain is created in the Domain Classes node.
3. Open the Book class and then fill in two Strings, "title" and "author". You should now see this:
+
image::images/grails-65-8.png[]
-4. Create some initial values in the Bootstrap.groovy class, which is within the Configuration node. The code added to the class is shown in bold below:
+
+[start=4]
+. Create some initial values in the Bootstrap.groovy class, which is within the Configuration node. The code added to the class is shown in bold below:
[source,java]
----
@@ -111,11 +118,15 @@ In this section, we use the "grails create-controller" script to create a contro
1. Right-click the Controllers node and choose New > Grails Controller.
2. Type "Book" in Class Name and notice that you are shown that the generated class will be called "BookController":
+
image::images/grails-65-11.png[]
Click Finish. The controller is generated.
-3. Comment out the one line generated within the braces and add "def scaffold = Book". You should now see this:
+
+[start=3]
+. Comment out the one line generated within the braces and add "def scaffold = Book". You should now see this:
+
image::images/grails-65-13.png[]
@@ -124,15 +135,29 @@ image::images/grails-65-13.png[]
Our simple Grails application is now complete. In this section, we deploy it.
1. Right-click the application and choose "Run". The application is deployed to Jetty, as you can see in the Services window:
+
image::images/grails-65-19.png[]
-2. The URL is printed to the Output window. If the browser does not open automatically, paste the URL into a browser and then you'll see your application. Click the "BookController" link and you'll see this:
+
+[start=2]
+. The URL is printed to the Output window. If the browser does not open automatically, paste the URL into a browser and then you'll see your application. Click the "BookController" link and you'll see this:
+
image::images/grails-65-14.png[]
-3. Click New Book and then create a new entry:
+
+[start=3]
+. Click New Book and then create a new entry:
+
image::images/grails-65-15.png[]
-4. When you click Create, note that you can edit or delete the entry:
+
+[start=4]
+. When you click Create, note that you can edit or delete the entry:
+
image::images/grails-65-17.png[]
-5. ...and that the entry is reflected in the list of entries:
+
+[start=5]
+. ...and that the entry is reflected in the list of entries:
+
image::images/grails-65-18.png[]
+
link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[+Send Feedback on This Tutorial+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_ja.asciidoc
index 16051a8..8bba9d6 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_ja.asciidoc
@@ -66,8 +66,12 @@ Groovyを使用する場合は、Groovyの場所もここで設定します。
コマンド・ラインからGrailsを実行することで、正しく機能していることを確認できます(コマンド・プロンプトで"grails"と入力します)。
-2. 「ファイル」>「新規プロジェクト」([Ctrl]-[Shift]-[N])を選択し、「Groovy」カテゴリから「Grailsアプリケーション」を選択します。「次」をクリックします。
-3. 「プロジェクト名」に「BookDemo」と入力し、「プロジェクトの場所」にアプリケーションを作成するフォルダを選択します。「終了」をクリックします。
+
+[start=2]
+. 「ファイル」>「新規プロジェクト」([Ctrl]-[Shift]-[N])を選択し、「Groovy」カテゴリから「Grailsアプリケーション」を選択します。「次」をクリックします。
+
+[start=3]
+. 「プロジェクト名」に「BookDemo」と入力し、「プロジェクトの場所」にアプリケーションを作成するフォルダを選択します。「終了」をクリックします。
「grails create-app」コマンドが実行され、「出力」ウィンドウに出力が表示されます。「プロジェクト」ウィンドウに次のように表示されます。
@@ -83,8 +87,11 @@ image::images/grails-65-4.png[]
1. 「ドメイン・クラス」ノードを右クリックし、「新規」>「Grailsドメイン・クラス」を選択します。
2. ドメイン・クラスに「Book」と名前を付け、「終了」をクリックします。「ドメイン・クラス」ノードに「Book.groovy」というドメインが作成されます。
3. Bookクラスを開き、2つの文字列「title」と「author」と入力します。次のような表示になります。
+
image::images/grails-65-8.png[]
-4. 「構成」ノード内のBootstrap.groovyクラスの初期値をいくつか作成します。クラスに追加するコードを次に太字で示します。
+
+[start=4]
+. 「構成」ノード内のBootstrap.groovyクラスの初期値をいくつか作成します。クラスに追加するコードを次に太字で示します。
[source,java]
----
@@ -111,11 +118,15 @@ class BootStrap {
1. 「コントローラ」ノードを右クリックし、「新規」>「Grailsコントローラ」を選択します。
2. 「クラス名」に「Book」と入力します。生成されるクラスの名前「BookController」が表示されます。
+
image::images/grails-65-11.png[]
「終了」をクリックします。コントローラが生成されます。
-3. 中括弧内に生成された1行をコメントにし、「def scaffold=Book」を追加します。次のような表示になります。
+
+[start=3]
+. 中括弧内に生成された1行をコメントにし、「def scaffold=Book」を追加します。次のような表示になります。
+
image::images/grails-65-13.png[]
@@ -124,15 +135,29 @@ image::images/grails-65-13.png[]
単純なGrailsアプリケーションが完成しました。この項では、完成したアプリケーションをデプロイします。
1. アプリケーションを右クリックし、「実行」を選択します。「サービス」ウィンドウに表示されるように、アプリケーションはJettyにデプロイされます。
+
image::images/grails-65-19.png[]
-2. URLが「出力」ウィンドウに出力されます。ブラウザが自動的に開かない場合は、このURLをブラウザに貼り付けると、アプリケーションが表示されます。「BookController」リンクをクリックすると、次のような画面が表示されます。
+
+[start=2]
+. URLが「出力」ウィンドウに出力されます。ブラウザが自動的に開かない場合は、このURLをブラウザに貼り付けると、アプリケーションが表示されます。「BookController」リンクをクリックすると、次のような画面が表示されます。
+
image::images/grails-65-14.png[]
-3. 「New Book」をクリックし、新規エントリを作成します。
+
+[start=3]
+. 「New Book」をクリックし、新規エントリを作成します。
+
image::images/grails-65-15.png[]
-4. 「Create」をクリックすると、エントリを編集または削除できるようになります。
+
+[start=4]
+. 「Create」をクリックすると、エントリを編集または削除できるようになります。
+
image::images/grails-65-17.png[]
-5. また、新規エントリがエントリのリストに反映されます。
+
+[start=5]
+. また、新規エントリがエントリのリストに反映されます。
+
image::images/grails-65-18.png[]
+
link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[+このチュートリアルに関するご意見をお寄せください+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_pt_BR.asciidoc
index d7c04bb..7c0e94d 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_pt_BR.asciidoc
@@ -66,8 +66,12 @@ Nesta seção, executamos o comando "grails create-app" no IDE, utilizando o mod
Você pode confirmar se ele está funcionando corretamente executando o Grails na linha de comandos (isto é, digite "grails" no prompt de comandos).
-2. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N) e selecione "Aplicação do Grails" na categoria "Groovy". Clique em Próximo.
-3. Em Nome do Projeto, digite "BookDemo"; em Localização do Projeto, selecione a pasta em que a aplicação será criada. Clique em Finalizar.
+
+[start=2]
+. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N) e selecione "Aplicação do Grails" na categoria "Groovy". Clique em Próximo.
+
+[start=3]
+. Em Nome do Projeto, digite "BookDemo"; em Localização do Projeto, selecione a pasta em que a aplicação será criada. Clique em Finalizar.
O IDE executa o comando "grails create-app", mostrando a saída na janela de Saída. A janela Projetos deverá mostrar o seguinte:
@@ -83,8 +87,11 @@ Nesta seção, usamos o IDE para executar o script "grails create-domain-class".
1. Clique com o botão direito do mouse no nó Classes de Domínio e selecione Novo > Classe de Domínio do Grails.
2. Nomeie a classe de domínio como "Book" e clique em Finalizar. O domínio "Book.groovy" é criado no nó Classes de Domínio.
3. Abra a classe Book e preencha duas Strings, "title" e "author". O seguinte deverá ser exibido:
+
image::images/grails-65-8.png[]
-4. Crie alguns valores iniciais na classe Bootstrap.groovy, que está no nó Configuração. O código adicionado à classe é mostrado em negrito a seguir:
+
+[start=4]
+. Crie alguns valores iniciais na classe Bootstrap.groovy, que está no nó Configuração. O código adicionado à classe é mostrado em negrito a seguir:
[source,java]
----
@@ -111,11 +118,15 @@ Nesta seção, usamos o script "grails create-controller" para criar um controla
1. Clique com o botão direito do mouse no nó Controladores e selecione Novo > Controlador do Grails.
2. Digite "Book" em Nome da Classe e observe que a classe gerada se chamará "BookController":
+
image::images/grails-65-11.png[]
Clique em Finalizar. O controlador é gerado.
-3. Comente a linha gerada entre as chaves e adicione "def scaffold = Book". O seguinte deverá ser exibido:
+
+[start=3]
+. Comente a linha gerada entre as chaves e adicione "def scaffold = Book". O seguinte deverá ser exibido:
+
image::images/grails-65-13.png[]
@@ -124,15 +135,29 @@ image::images/grails-65-13.png[]
Nossa aplicação Grails simples está completa. Nesta seção, ela será implantada.
1. Clique com o botão direito do mouse na aplicação e escolha "Executar". A aplicação é implantada no Jetty, como você pode ver na janela Serviços:
+
image::images/grails-65-19.png[]
-2. O URL é mostrado na janela de Saída. Se o browser não abrir automaticamente, cole o URL em um browser e você verá sua aplicação. Clique no link "BookController" e você verá isto:
+
+[start=2]
+. O URL é mostrado na janela de Saída. Se o browser não abrir automaticamente, cole o URL em um browser e você verá sua aplicação. Clique no link "BookController" e você verá isto:
+
image::images/grails-65-14.png[]
-3. Clique em Novo Livro e crie uma nova entrada:
+
+[start=3]
+. Clique em Novo Livro e crie uma nova entrada:
+
image::images/grails-65-15.png[]
-4. Quando você clicar em Criar, observe que poderá editar ou deletar a entrada:
+
+[start=4]
+. Quando você clicar em Criar, observe que poderá editar ou deletar a entrada:
+
image::images/grails-65-17.png[]
-5. ...e que a entrada é refletida na lista de entradas:
+
+[start=5]
+. ...e que a entrada é refletida na lista de entradas:
+
image::images/grails-65-18.png[]
+
link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[+Enviar Feedback neste Tutorial+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_ru.asciidoc
index 2ae4ab9..ebf432f 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_ru.asciidoc
@@ -66,8 +66,12 @@ image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой
Чтобы проверить, корректно ли работает Grails, запустите его из командной строки с помощью команды "grails".
-2. Выберите команду "Файл" > "Создать проект" (CTRL+SHIFT+N), а затем – "Приложение Grails" из категории "Groovy". Нажмите кнопку "Далее".
-3. В поле "Имя проекта" введите "BookDemo". В "Project Location" выберите папку, в которой будет создано приложение. Нажмите кнопку "Завершить".
+
+[start=2]
+. Выберите команду "Файл" > "Создать проект" (CTRL+SHIFT+N), а затем – "Приложение Grails" из категории "Groovy". Нажмите кнопку "Далее".
+
+[start=3]
+. В поле "Имя проекта" введите "BookDemo". В "Project Location" выберите папку, в которой будет создано приложение. Нажмите кнопку "Завершить".
Среда IDE выполняет команду "grails create-app", отображая результат выполнения в окне "Вывод". Окно "Проекты" должно выглядеть следующим образом:
@@ -83,8 +87,11 @@ image::images/grails-65-4.png[]
1. Щелкните правой кнопкой мыши узел "Классы домена" и команду "Создать" > "Класс домена Grails".
2. Назовите класс домена "Book" и нажмите кнопку "Готово". В узле "Классы домена" будет создан домен "Book.groovy".
3. Откройте класс Book и заполните строки "title" и "author". На экране появится следующее окно:
+
image::images/grails-65-8.png[]
-4. Создайте несколько начальных значений в классе Bootstrap.groovy, находящемся в узле Configuration. Добавленный к классу код выделен жирным шрифтом:
+
+[start=4]
+. Создайте несколько начальных значений в классе Bootstrap.groovy, находящемся в узле Configuration. Добавленный к классу код выделен жирным шрифтом:
[source,java]
----
@@ -111,11 +118,15 @@ class BootStrap {
1. Щелкните правой кнопкой мыши узел "Контроллеры" и выберите команду "Создать" > "Контроллер Grails".
2. В поле "Имя класса" введите "Book" и убедитесь в том, что создаваемый класс называется "BookController":
+
image::images/grails-65-11.png[]
Нажмите кнопку "Завершить". Создание контроллера выполнено.
-3. Закомментируйте строку, созданную внутри скобок, и добавьте "def scaffold = Book". На экране появится следующее окно:
+
+[start=3]
+. Закомментируйте строку, созданную внутри скобок, и добавьте "def scaffold = Book". На экране появится следующее окно:
+
image::images/grails-65-13.png[]
@@ -124,15 +135,29 @@ image::images/grails-65-13.png[]
Мы создали простое приложение Grails. В этом разделе будет выполнено его развертывание:
1. Щелкните приложение правой кнопкой мыши и выберите команду "Выполнить". Развертывание приложения выполняется в Jetty, как показано в окне "Службы":
+
image::images/grails-65-19.png[]
-2. Введите URL-адрес в окно "Вывод". Если страница браузера не открывается автоматически, вставьте URL-адрес в адресную строку браузера, после чего приложение откроется. Перейдите по ссылке "BookController". Появится следующее окно:
+
+[start=2]
+. Введите URL-адрес в окно "Вывод". Если страница браузера не открывается автоматически, вставьте URL-адрес в адресную строку браузера, после чего приложение откроется. Перейдите по ссылке "BookController". Появится следующее окно:
+
image::images/grails-65-14.png[]
-3. Щелкните "New Book" и создайте новую запись:
+
+[start=3]
+. Щелкните "New Book" и создайте новую запись:
+
image::images/grails-65-15.png[]
-4. После нажатия кнопки "Создать" убедитесь в том, что запись может быть изменена или удалена:
+
+[start=4]
+. После нажатия кнопки "Создать" убедитесь в том, что запись может быть изменена или удалена:
+
image::images/grails-65-17.png[]
-5. ...а также в том, что эта запись отображается в списке записей:
+
+[start=5]
+. ...а также в том, что эта запись отображается в списке записей:
+
image::images/grails-65-18.png[]
+
link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[+Отправить отзыв по этому учебному курсу+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_zh_CN.asciidoc
index 1c1274d..4c60bf9 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/grails-quickstart_zh_CN.asciidoc
@@ -66,8 +66,12 @@ image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 Net
通过从命令行运行 Grails（即，在命令提示处键入 "grails"），可以确认其正常运行。
-2. 选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N）并从 "Groovy" 类别中选择 "Grails Application"（Grails 应用程序）。单击 "Next"（下一步）。
-3. 在 "Project Name"（项目名称）中键入 "BookDemo"；在 "Project Location"（项目位置）中，选择要在其中创建应用程序的文件夹位置。单击 "Finish"（完成）。
+
+[start=2]
+. 选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N）并从 "Groovy" 类别中选择 "Grails Application"（Grails 应用程序）。单击 "Next"（下一步）。
+
+[start=3]
+. 在 "Project Name"（项目名称）中键入 "BookDemo"；在 "Project Location"（项目位置）中，选择要在其中创建应用程序的文件夹位置。单击 "Finish"（完成）。
IDE 将运行 "grails create-app" 命令，并在 "Output"（输出）窗口显示输出。"Projects"（项目）窗口应显示以下内容：
@@ -83,8 +87,11 @@ image::images/grails-65-4.png[]
1. 右键单击该域类节点并选择 "New"（新建）> "Grails Domain Class"（Grails 域类）。
2. 将该域类命名为 "Book" 并单击 "Finish"（完成）。"Book.groovy" 域将创建在该域类节点中。
3. 打开 Book 类并填入两个字符串 "title" 和 "author"。现在，您应看到如下所示的内容：
+
image::images/grails-65-8.png[]
-4. 在位于 "Configuration"（配置）节点中的 Bootstrap.groovy 类中创建了一些初始值。添加到该类的代码以黑体显示如下：
+
+[start=4]
+. 在位于 "Configuration"（配置）节点中的 Bootstrap.groovy 类中创建了一些初始值。添加到该类的代码以黑体显示如下：
[source,java]
----
@@ -111,11 +118,15 @@ class BootStrap {
1. 右键单击 "Controllers"（控制器）节点并选择 "New"（新建）> "Grails Controller"（Grails 控制器）。
2. 在 "Class Name"（类名）中键入 "Book"，注意到生成的类将被命名为 "BookController"：
+
image::images/grails-65-11.png[]
单击 "Finish"（完成）。已生成控制器。
-3. 注释掉在花括号内所生成的一行代码，然后添加 "def scaffold = Book"。现在，您应看到如下所示的内容：
+
+[start=3]
+. 注释掉在花括号内所生成的一行代码，然后添加 "def scaffold = Book"。现在，您应看到如下所示的内容：
+
image::images/grails-65-13.png[]
@@ -124,15 +135,29 @@ image::images/grails-65-13.png[]
现在，您已经完成了这个简单的 Grails 应用程序。在此部分，您将对其进行部署。
1. 右键单击该应用程序并选择 "Run"（运行）。该应用程序将被部署到 Jetty，如 "Services"（服务）窗口所示：
+
image::images/grails-65-19.png[]
-2. 该 URL 已被输出到 "Output"（输出）窗口。如果浏览器未自动打开，请将该 URL 粘贴到浏览器中，然后会看到该应用程序。单击 "BookController" 链接，您将看到以下内容：
+
+[start=2]
+. 该 URL 已被输出到 "Output"（输出）窗口。如果浏览器未自动打开，请将该 URL 粘贴到浏览器中，然后会看到该应用程序。单击 "BookController" 链接，您将看到以下内容：
+
image::images/grails-65-14.png[]
-3. 单击 "New Book"（新建 Book），程序将创建一个新条目：
+
+[start=3]
+. 单击 "New Book"（新建 Book），程序将创建一个新条目：
+
image::images/grails-65-15.png[]
-4. 单击 "Create"（创建）之后，请注意可对该条目进行编辑或删除：
+
+[start=4]
+. 单击 "Create"（创建）之后，请注意可对该条目进行编辑或删除：
+
image::images/grails-65-17.png[]
-5. 同时，该条目将被反映到条目列表中：
+
+[start=5]
+. 同时，该条目将被反映到条目列表中：
+
image::images/grails-65-18.png[]
+
link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[+发送有关此教程的反馈意见+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp.asciidoc
index f9face1..9963564 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp.asciidoc
@@ -74,11 +74,14 @@ For more information on configuring the IDE to work with MySQL, see the link:../
2. After installing the plugin, start the MySQL database by expanding the Databases node in the Services window, right-clicking the MySQL Server node and choosing Start.
3. Right-click the MySQL Server node and choose Create Database.
4. Select the Sakila database from the New Database Name drop down list in the Create MySQL Database dialog box. Click OK.
+
image::images/create-sakila-mysql.png[title="Screenshot of Create MySQL Database dialog"]
When you click OK a Sakila node appears under the MySQL Server node.
-5. Right-click the Sakila node and choose Connect.
+
+[start=5]
+. Right-click the Sakila node and choose Connect.
When you click Connect a database connection node for the Sakila database ( ``jdbc:mysql://localhost:3306/sakila [_username_ on Default]`` ) is listed under the Databases node. When a connection is open you can view the data in the database by expanding the connection node.
@@ -93,10 +96,18 @@ In this exercise you will create a web application project and add the Hibernate
For this tutorial there is little reason to copy project libraries to a dedicated folder because you will not need to share libraries with other users.
-4. Set the server to the GlassFish Server and set the Java EE Version to Java EE 6 Web or Java EE 7 Web. Click Next.
-5. Select the JavaServer Faces checkbox and use the default JSF 2.x libraries.
-6. Select the Hibernate checkbox in the list of frameworks.
-7. Select the sakila database from the Database Connection drop down list. Click Finish.
+
+[start=4]
+. Set the server to the GlassFish Server and set the Java EE Version to Java EE 6 Web or Java EE 7 Web. Click Next.
+
+[start=5]
+. Select the JavaServer Faces checkbox and use the default JSF 2.x libraries.
+
+[start=6]
+. Select the Hibernate checkbox in the list of frameworks.
+
+[start=7]
+. Select the sakila database from the Database Connection drop down list. Click Finish.
*Note:* If the sakila database is not available as an option in the Frameworks panel in the wizard, check to see if the connection is listed under the Databases node in the Services window. If the connection is not there, you need to create the database connection.
@@ -119,12 +130,23 @@ In this exercise you will edit the default properties specified in ``hibernate.
2. In the multi-view XML editor, expand the Configuration Properties node under Optional Properties.
3. Click Add to open the Add Hibernate Property dialog box.
4. In the dialog box, select the ``hibernate.show_sql`` property and set the value to ``true`` . This enables the debug logging of the SQL statements.
+
image::images/add-property-showsql.png[title="Add Hibernate Property dialog box showing setting value for the hibernate.show_sql property"]
-5. Expand the Miscellaneous Properties node and click Add.
-6. In the dialog box, select the ``properties hibernate.current_session_context_class`` and set the value to ``thread`` to enable Hibernate's automatic session context management.
+
+[start=5]
+. Expand the Miscellaneous Properties node and click Add.
+
+[start=6]
+. In the dialog box, select the ``properties hibernate.current_session_context_class`` and set the value to ``thread`` to enable Hibernate's automatic session context management.
+
image::images/add-property-sessioncontext.png[title="Add Hibernate Property dialog box showing setting value for the hibernate.current_session_context_class property"]
-7. Click Add again under the Miscellaneous Properties node and select ``hibernate.query.factory_class`` in the Property Name dropdown list.
-8. Select *org.hibernate.hql.classic.ClassicQueryTranslatorFactory* as the Property Value. Click OK.
+
+[start=7]
+. Click Add again under the Miscellaneous Properties node and select ``hibernate.query.factory_class`` in the Property Name dropdown list.
+
+[start=8]
+. Select *org.hibernate.hql.classic.ClassicQueryTranslatorFactory* as the Property Value. Click OK.
+
image::images/add-property-factoryclass.png[title="Add Hibernate Property dialog box showing setting value for the hibernate.query.factory_class property"]
If you click the XML tab in the editor you can see the file in XML view. Your file should look similar to the following (the three new properties are bold):
@@ -146,7 +168,9 @@ If you click the XML tab in the editor you can see the file in XML view. Your fi
</session-factory>
</hibernate-configuration>
----
-9. Save your changes to the file.
+
+[start=9]
+. Save your changes to the file.
You can close the file because you do not need to edit the file again.
@@ -216,6 +240,7 @@ To create the POJOS and mapping files using a wizard, perform the following step
4. Select *JDK 5 Language Features* under the General Settings options.
5. Ensure that the *Domain Code* and *Hibernate XML Mappings* options are selected.
6. Select *dvdrental* for the Package name. Click Finish.
+
image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files and POJOs wizard"]
When you click Finish the IDE generates POJOs and Hibernate mapping files with the fields mapped to the columns specified in ``hibernate.reveng.xml`` . The IDE also adds mapping entries to ``hibernate.cfg.xml`` .
@@ -282,7 +307,9 @@ public class FilmHelper {
}
----
-5. Right-click in the editor and choose Fix Imports (Alt-Shift-I; ⌘-Shift-I on Mac) to add any required import statements ( ``org.hibernate.Session`` ) and save your changes.
+
+[start=5]
+. Right-click in the editor and choose Fix Imports (Alt-Shift-I; ⌘-Shift-I on Mac) to add any required import statements ( ``org.hibernate.Session`` ) and save your changes.
You will now modify ``FilmHelper.java`` to add methods that query the DB.
@@ -296,7 +323,7 @@ The Film table has 1000 records so the method to retrieve the list of films shou
1. Right-click the project node in the Projects window and choose Clean and Build.
2. Right-click ``hibernate.cfg.xml`` in the Projects window and choose Run HQL Query to open the HQL query editor.
3. Select hibernate.cfg from the drop down list in the toolbar.
-4. Test the connection by typing the following in the editor and clicking the Run HQL Query button ( image::images/run_hql_query_16.png[title="Run HQL Query button"] ) in the toolbar.
+4. Test the connection by typing the following in the editor and clicking the Run HQL Query button ( image:images/run_hql_query_16.png[title="Run HQL Query button"] ) in the toolbar.
[source,java]
----
@@ -316,7 +343,9 @@ If you click the SQL button you can see the equivalent SQL query.
select film0_.film_id as col_0_0_ from sakila.film film0_
----
-5. Type the following query to retrieve the records in the Film table where the film id is between 100 and 200.
+
+[start=5]
+. Type the following query to retrieve the records in the Film table where the film id is between 100 and 200.
[source,java]
----
@@ -326,7 +355,9 @@ from Film as film where film.filmId between 100 and 200
The result window displays a list of records. Now that you have tested that the query returns the desired results, you can use the query in the helper class.
-6. Add the following method ``getFilmTitles`` to ``FilmHelper.java`` to retrieve the films where the film id is between a certain range specified by the variables ``startID`` and ``endID`` .
+
+[start=6]
+. Add the following method ``getFilmTitles`` to ``FilmHelper.java`` to retrieve the films where the film id is between a certain range specified by the variables ``startID`` and ``endID`` .
[source,java]
----
@@ -343,7 +374,9 @@ public List getFilmTitles(int startID, int endID) {
return filmList;
}
----
-7. Add the following method ``getActorsByID`` that retrieves the actors in a particular film. The method constructs the query using ``filmId`` as the input variable.
+
+[start=7]
+. Add the following method ``getActorsByID`` that retrieves the actors in a particular film. The method constructs the query using ``filmId`` as the input variable.
[source,java]
----
@@ -362,7 +395,9 @@ public List getActorsByID(int filmId){
return actorList;
}
----
-8. Fix your imports and save your changes.
+
+[start=8]
+. Fix your imports and save your changes.
When you fix your imports you want to choose ``java.util.List`` and ``org.hibernate.Query`` .
@@ -390,7 +425,9 @@ public Category getCategoryByID(int filmId){
return categoryList.get(0);
}
----
-2. Add the following method to retrieve a single film according to ``filmId`` .
+
+[start=2]
+. Add the following method to retrieve a single film according to ``filmId`` .
[source,java]
----
@@ -410,7 +447,9 @@ public Film getFilmByID(int filmId){
return film;
}
----
-3. Add the following method to retrieve the film language according to ``langId`` .
+
+[start=3]
+. Add the following method to retrieve the film language according to ``langId`` .
[source,java]
----
@@ -430,7 +469,9 @@ public String getLangByID(int langId){
return language.getName();
}
----
-4. Save your changes.
+
+[start=4]
+. Save your changes.
== Creating the JSF Managed Bean
@@ -445,9 +486,15 @@ To create the managed bean, perform the following steps.
You will use the Managed Bean name ``filmController`` as the value for the ``inputText`` and ``commandButton`` in the JSF page ``index.xhtml`` when calling methods in the bean.
-4. Select *dvdrental* for the Package.
-5. Type *filmController* for the Name that will be used for the managed bean.
-6. Set Scope to Session. Click Finish.
+
+[start=4]
+. Select *dvdrental* for the Package.
+
+[start=5]
+. Type *filmController* for the Name that will be used for the managed bean.
+
+[start=6]
+. Set Scope to Session. Click Finish.
image::images/hib-newmanagedbean.png[title="New JSF Managed Bean wizard"]
@@ -490,7 +537,9 @@ public class FilmController {
private int selectedItemIndex;*
}
----
-2. Add the following code (in bold) to create the FilmController instance and retrieve the films.
+
+[start=2]
+. Add the following code (in bold) to create the FilmController instance and retrieve the films.
[source,java]
----
@@ -528,7 +577,9 @@ public class FilmController {
filmTitles = null;
}*
----
-3. Add the following methods that are used to display the table and navigate the pages.* public boolean isHasNextPage() {
+
+[start=3]
+. Add the following methods that are used to display the table and navigate the pages.* public boolean isHasNextPage() {
if (endId + pageSize <= recordCount) {
return true;
}
@@ -572,7 +623,9 @@ public class FilmController {
The methods that return "index" or "browse" will prompt the JSF navigation handler to try to open a page named ``index.xhtml`` or ``browse.xhtml`` . The JSF 2.0 specification enables the use of implicit navigation rules in applications that use Facelets technology. In this application, no navigation rules are configured in ``faces-config.xml`` . Instead, the navigation handler will try to locate a suitable page in the application.
-4. Add the following methods that access the helper class to retrieve additional film details.* public String getLanguage() {
+
+[start=4]
+. Add the following methods that access the helper class to retrieve additional film details.* public String getLanguage() {
int langID = current.getLanguageByLanguageId().getLanguageId().intValue();
String language = helper.getLangByID(langID);
return language;
@@ -601,7 +654,9 @@ The methods that return "index" or "browse" will prompt the JSF navigation handl
----
-5. Fix your imports (Ctrl-Shift-I) and save your changes.
+
+[start=5]
+. Fix your imports (Ctrl-Shift-I) and save your changes.
You can use the code completion in the editor to help you type your code.
@@ -640,7 +695,9 @@ When you click Finish, the file ``template.xhtml`` opens in the editor. The te
</h:body>
----
-5. Modify the ``<ui:insert>`` element to change the default generated name to "body".
+
+[start=5]
+. Modify the ``<ui:insert>`` element to change the default generated name to "body".
[source,html]
----
@@ -649,7 +706,9 @@ When you click Finish, the file ``template.xhtml`` opens in the editor. The te
<ui:insert name="*body*">Content</ui:insert>
</div>
----
-6. Save your changes.
+
+[start=6]
+. Save your changes.
The content enclosed within the ``<ui:define name="body">`` element in ``index.xhtml`` and ``browse.xhtml`` will be inserted into the location identified with `` <ui:insert name="body">Content</ui:insert>`` in the template.
@@ -676,7 +735,9 @@ The New Project wizard generated the following default ``index.xhtml`` page.
</h:body>
</html>
----
-2. Modify the page to use the JSF ``<ui:composition>`` and ``<ui:define>`` elements and add a ``<h:form>`` element.
+
+[start=2]
+. Modify the page to use the JSF ``<ui:composition>`` and ``<ui:define>`` elements and add a ``<h:form>`` element.
[source,xml]
----
@@ -698,7 +759,9 @@ When you start typing the tags, the IDE adds ``xmlns:ui="http://java.sun.com/js
The ``<ui:composition>`` and ``<ui:define>`` elements are used in combination with the page template that you will create. The ``<ui:composition>`` element references the location of the template that will be used by this page. The ``<ui:define>`` element references the position in the template that the enclosed code will occupy.
-3. Add the following navigation links that call the ``previous`` and ``next`` methods in the JSF managed bean.
+
+[start=3]
+. Add the following navigation links that call the ``previous`` and ``next`` methods in the JSF managed bean.
[source,xml]
----
@@ -710,7 +773,9 @@ The ``<ui:composition>`` and ``<ui:define>`` elements are used in combinatio
</h:form>
</ui:define>
----
-4. Add the following ``dataTable`` element (in bold) to generate the table to display the retrieved items.
+
+[start=4]
+. Add the following ``dataTable`` element (in bold) to generate the table to display the retrieved items.
[source,xml]
----
@@ -742,7 +807,9 @@ The ``<ui:composition>`` and ``<ui:define>`` elements are used in combinatio
</h:form>
----
-5. Save your changes.
+
+[start=5]
+. Save your changes.
The index page will now display a list of film titles in the database. Each row in the table includes a "View" link that invokes the ``prepareView`` method in the managed bean. The ``prepareView`` method returns "browse" and will open ``browse.xhtml`` .
@@ -757,12 +824,22 @@ You will now create the ``browse.xhtml`` page for displaying details of the se
1. Right-click DVDStore project node in the Projects window and choose New > Other.
2. Select Facelets Template Client in the JavaServer Faces category. Click Next.
+
image::images/hib-faceletsclient.png[title="Facelets Template Client file type in New File wizard"]
-3. Type *browse* for the File Name.
-4. Locate the Template for the page by clicking Browse to open the Browse Files dialog box.
-5. Expand the Web Pages folder and select ``template.xhtml`` . Click Select File.
+
+[start=3]
+. Type *browse* for the File Name.
+
+[start=4]
+. Locate the Template for the page by clicking Browse to open the Browse Files dialog box.
+
+[start=5]
+. Expand the Web Pages folder and select ``template.xhtml`` . Click Select File.
+
image::images/hib-browsetemplate.png[title="Select the template in the Browse Files dialog"]
-6. Select *<ui:composition>* for the Generated Root Tag. Click Finish.
+
+[start=6]
+. Select *<ui:composition>* for the Generated Root Tag. Click Finish.
When you click Finish, the file ``browse.xhtml`` opens in the editor with the following code.
@@ -786,7 +863,9 @@ When you click Finish, the file ``browse.xhtml`` opens in the editor with the
You can see that the new file specifies the ``template.xhtml`` file and that the ``<ui:define>`` tag has the property ``name="body"``
-7. Add the following code (in bold) between the ``<ui:define>`` tags to create the form and call the methods in the managed bean FilmController to retrieve the data and populate the form.
+
+[start=7]
+. Add the following code (in bold) between the ``<ui:define>`` tags to create the form and call the methods in the managed bean FilmController to retrieve the data and populate the form.
[source,xml]
----
@@ -853,7 +932,9 @@ You can see that the new file specifies the ``template.xhtml`` file and that t
You can see that ``browse.xhtml`` and ``index.xhtml`` will use the same page template.
-8. Save your changes.
+
+[start=8]
+. Save your changes.
== Running the Project
@@ -865,7 +946,9 @@ The basics of the application are now complete. You can now run the application
The IDE saves all changed files, builds the application, and deploys the application to the server. The IDE opens a browser window to the URL ``http://localhost:8080/DVDStore/`` that displays the list of films.
image::images/hib-browser1.png[title="Screenshot of browser displaying film list on index page"]
-2. In your browser, click "View" to load ``browse.xhtml`` to view the film details.
+
+[start=2]
+. In your browser, click "View" to load ``browse.xhtml`` to view the film details.
=== Downloading the Solution Project
@@ -878,14 +961,24 @@ You can download the solution to this tutorial as a project in the following way
2. In the Checkout dialog box, enter the following Repository URL:
``https://svn.netbeans.org/svn/samples~samples-source-code``
Click Next.
-3. Click Browse to open the Browse Repostiory Folders dialog box.
-4. Expand the root node and select *samples/javaee/DVDStoreEE6*. Click OK.
-5. Specify the Local Folder for the sources.
-6. Click Finish.
+
+[start=3]
+. Click Browse to open the Browse Repostiory Folders dialog box.
+
+[start=4]
+. Expand the root node and select *samples/javaee/DVDStoreEE6*. Click OK.
+
+[start=5]
+. Specify the Local Folder for the sources.
+
+[start=6]
+. Click Finish.
When you click Finish, the IDE initializes the local folder as a Subversion repository and checks out the project sources.
-7. Click Open Project in the dialog that appears when checkout is complete.
+
+[start=7]
+. Click Open Project in the dialog that appears when checkout is complete.
*Notes.* For more about installing Subversion, see the section on link:../ide/subversion.html#settingUp[+Setting up Subversion+] in the link:../ide/subversion.html[+Guide to Subversion in NetBeans IDE+].
diff --git a/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_ja.asciidoc
index af77f4b..99b940f 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_ja.asciidoc
@@ -74,11 +74,14 @@ MySQLを操作するためのIDEの構成については、link:../ide/mysql.htm
2. プラグインをインストールした後、「サービス」ウィンドウで「データベース」ノードを展開し、「MySQLサーバー」ノードを右クリックして「起動」を選択して、MySQLデータベースを起動します。
3. 「MySQLサーバー」ノードを右クリックし、「データベースを作成」を選択します。
4. 「MySQLデータベースの作成」ダイアログ・ボックスで「新規データベース名」ドロップダウン・リストから「Sakilaデータベース」を選択します。「OK」をクリックします。
+
image::images/create-sakila-mysql.png[title="「MySQLデータベースの作成」ダイアログのスクリーンショット"]
「OK」をクリックすると、「MySQLサーバー」ノードの下に「Sakila」ノードが表示されます。
-5. 「Sakila」ノードを右クリックし、「接続」を選択します。
+
+[start=5]
+. 「Sakila」ノードを右クリックし、「接続」を選択します。
「接続」をクリックすると、「Sakila」データベースのデータベース接続のノード( ``jdbc:mysql://localhost:3306/sakila [デフォルトの_ユーザー名_]`` )が「データベース」ノードに一覧表示されます。接続が開いたら、接続ノードを展開してデータベースのデータを表示できます。
@@ -93,10 +96,18 @@ image::images/create-sakila-mysql.png[title="「MySQLデータベースの作成
このチュートリアルでは、ライブラリを他のユーザーと共有する必要がないため、プロジェクト・ライブラリを専用のフォルダにコピーする理由はほとんどありません。
-4. サーバーを「GlassFish Server」に設定し、「Java EEバージョン」を「Java EE 6 Web」または「Java EE 7 Web」に設定します。「次」をクリックします。
-5. 「JavaServer Faces」チェックボックスを選択し、デフォルトのJSF 2.xライブラリを使用します。
-6. フレームワークの選択リストで「Hibernate」チェックボックスを選択します。
-7. 「データベース接続」ドロップダウン・リストから「Sakilaデータベース」を選択します。「終了」をクリックします。
+
+[start=4]
+. サーバーを「GlassFish Server」に設定し、「Java EEバージョン」を「Java EE 6 Web」または「Java EE 7 Web」に設定します。「次」をクリックします。
+
+[start=5]
+. 「JavaServer Faces」チェックボックスを選択し、デフォルトのJSF 2.xライブラリを使用します。
+
+[start=6]
+. フレームワークの選択リストで「Hibernate」チェックボックスを選択します。
+
+[start=7]
+. 「データベース接続」ドロップダウン・リストから「Sakilaデータベース」を選択します。「終了」をクリックします。
*注意:* Sakilaデータベースがウィザードの「フレームワーク」パネルのオプションとして使用できない場合、この接続が「サービス」ウィンドウの「データベース」ノードに一覧表示されているかどうかを確認します。ここに接続がない場合、データベース接続を作成する必要があります。
@@ -119,12 +130,23 @@ Hibernateフレームワークを使用する新規プロジェクトを作成
2. マルチビューXMLエディタで、「オプションのプロパティ」の下の「構成プロパティ」ノードを展開します。
3. 「追加」をクリックして「Hibernateのプロパティの追加」ダイアログ・ボックスを開きます。
4. このダイアログ・ボックスで、「 ``hibernate.show_sql`` 」プロパティを選択し、値を「 ``true`` 」に設定します。これにより、SQL文のデバッグ・ロギングが有効になります。
+
image::images/add-property-showsql.png[title="hibernate.show_sqlプロパティの設定値が表示された「Hibernateのプロパティの追加」ダイアログ・ボックス"]
-5. 「Miscellaneous Properties」ノードを展開し、「追加」をクリックします。
-6. このダイアログ・ボックスで「 ``hibernate.current_session_context_class`` 」プロパティを選択し、値を「 ``thread`` 」に設定すると、Hibernateの自動セッション・コンテキスト管理が有効になります。
+
+[start=5]
+. 「Miscellaneous Properties」ノードを展開し、「追加」をクリックします。
+
+[start=6]
+. このダイアログ・ボックスで「 ``hibernate.current_session_context_class`` 」プロパティを選択し、値を「 ``thread`` 」に設定すると、Hibernateの自動セッション・コンテキスト管理が有効になります。
+
image::images/add-property-sessioncontext.png[title="hibernate.current_session_context_classプロパティの設定値が表示された「Hibernateのプロパティの追加」ダイアログ・ボックス"]
-7. 「その他のプロパティ」ノードの下の「追加」を再度クリックし、「プロパティ名」ドロップダウン・リストで ``hibernate.query.factory_class`` を選択します。
-8. 「プロパティ値」として「*org.hibernate.hql.classic.ClassicQueryTranslatorFactory*」を選択します。「OK」をクリックします。
+
+[start=7]
+. 「その他のプロパティ」ノードの下の「追加」を再度クリックし、「プロパティ名」ドロップダウン・リストで ``hibernate.query.factory_class`` を選択します。
+
+[start=8]
+. 「プロパティ値」として「*org.hibernate.hql.classic.ClassicQueryTranslatorFactory*」を選択します。「OK」をクリックします。
+
image::images/add-property-factoryclass.png[title="hibernate.query.factory_classプロパティの設定値が表示された「Hibernateのプロパティの追加」ダイアログ・ボックス"]
エディタの「XML」タブをクリックすると、ファイルがXMLビューに表示されます。ファイルの内容は次のようになります(3つの新しいプロパティは太字)。
@@ -146,7 +168,9 @@ image::images/add-property-factoryclass.png[title="hibernate.query.factory_class
</session-factory>
</hibernate-configuration>
----
-9. 変更内容をファイルに保存します。
+
+[start=9]
+. 変更内容をファイルに保存します。
このファイルは、再度編集する必要がないため閉じてかまいません。
@@ -216,6 +240,7 @@ image::images/hibernate-reveng-wizard.png[title="新規Hibernateリバース・
4. 「一般的な設定」で「*JDK 5言語機能*」を選択します。
5. 「*ドメイン・コード*」および「*Hibernate XMLのマッピング*」オプションが選択されていることを確認します。
6. パッケージ名に「*dvdrental*」を選択します。「終了」をクリックします。
+
image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング・ファイルとPOJOの生成」ウィザード"]
「終了」をクリックすると、POJOとHibernateのマッピング・ファイルが生成され、 ``hibernate.reveng.xml`` で指定した列にフィールドがマップされます。また、 ``hibernate.cfg.xml`` にマッピング・エントリが追加されます。
@@ -282,7 +307,9 @@ public class FilmHelper {
}
----
-5. エディタ上で右クリックし、「インポートを修正」([Alt]-[Shift]-[I]、Macの場合は[⌘]-[Shift]-[I])を選択して必要なインポート文( ``org.hibernate.Session`` )を追加し、変更を保存します。
+
+[start=5]
+. エディタ上で右クリックし、「インポートを修正」([Alt]-[Shift]-[I]、Macの場合は[⌘]-[Shift]-[I])を選択して必要なインポート文( ``org.hibernate.Session`` )を追加し、変更を保存します。
ここで ``FilmHelper.java`` を変更して、データベースに対して問合せを実行するメソッドを追加します。
@@ -296,7 +323,7 @@ Film表には1000件のレコードがあるため、映画のリストを取得
1. 「プロジェクト」ウィンドウでプロジェクトのノードを右クリックし、「消去してビルド」を選択します。
2. 「プロジェクト」ウィンドウで「 ``hibernate.cfg.xml`` 」を右クリックし、「HQL問合せの実行」を選択して、HQL問合せエディタを開きます。
3. ツールバーのドロップダウン・リストから「hibernate.cfg」を選択します。
-4. 接続をテストするには、エディタで次のように入力し、ツールバーの「HQL問合せの実行」ボタン(image::images/run_hql_query_16.png[title="「HQL問合せの実行」ボタン"])をクリックします。
+4. 接続をテストするには、エディタで次のように入力し、ツールバーの「HQL問合せの実行」ボタン(image:images/run_hql_query_16.png[title="「HQL問合せの実行」ボタン"])をクリックします。
[source,java]
----
@@ -316,7 +343,9 @@ image::images/hibernate-hqleditor1.png[title="「Hibernateのマッピング・
select film0_.film_id as col_0_0_ from sakila.film film0_
----
-5. 次の問合せを入力して、filmIdが100から200の間に含まれるレコードをFilm表から取り出します。
+
+[start=5]
+. 次の問合せを入力して、filmIdが100から200の間に含まれるレコードをFilm表から取り出します。
[source,java]
----
@@ -326,7 +355,9 @@ from Film as film where film.filmId between 100 and 200
結果ウィンドウにレコードのリストが表示されます。問合せが適切な結果を返すことをテストできたので、この問合せをヘルパー・クラスで使用できます。
-6. ``FilmHelper.java`` に次のメソッド ``getFilmTitles`` を追加して、filmIdが、変数 ``startID`` と ``endID`` で指定する範囲内にある映画を取り出します。
+
+[start=6]
+. ``FilmHelper.java`` に次のメソッド ``getFilmTitles`` を追加して、filmIdが、変数 ``startID`` と ``endID`` で指定する範囲内にある映画を取り出します。
[source,java]
----
@@ -343,7 +374,9 @@ public List getFilmTitles(int startID, int endID) {
return filmList;
}
----
-7. 特定の映画から俳優を取得する次のメソッド ``getActorsByID`` を追加します。メソッドは、入力変数として ``filmId`` を使用し、問合せを構成します。
+
+[start=7]
+. 特定の映画から俳優を取得する次のメソッド ``getActorsByID`` を追加します。メソッドは、入力変数として ``filmId`` を使用し、問合せを構成します。
[source,java]
----
@@ -362,7 +395,9 @@ public List getActorsByID(int filmId){
return actorList;
}
----
-8. インポートを修正して変更内容を保存します。
+
+[start=8]
+. インポートを修正して変更内容を保存します。
インポートを修正するときは、 ``java.util.List`` と ``org.hibernate.Query`` を選択します。
@@ -390,7 +425,9 @@ public Category getCategoryByID(int filmId){
return categoryList.get(0);
}
----
-2. ``filmId`` に基づいて1つの映画を取り出す次のメソッドを追加します。
+
+[start=2]
+. ``filmId`` に基づいて1つの映画を取り出す次のメソッドを追加します。
[source,java]
----
@@ -410,7 +447,9 @@ public Film getFilmByID(int filmId){
return film;
}
----
-3. ``langId`` に基づいて映画の言語を取り出す次のメソッドを追加します。
+
+[start=3]
+. ``langId`` に基づいて映画の言語を取り出す次のメソッドを追加します。
[source,java]
----
@@ -430,7 +469,9 @@ public String getLangByID(int langId){
return language.getName();
}
----
-4. 変更を保存します。
+
+[start=4]
+. 変更を保存します。
== JSF管理対象Beanの作成
@@ -445,9 +486,15 @@ public String getLangByID(int langId){
Beanでメソッドをコールするときに、管理対象Bean名 ``filmController`` を、JSFページ ``index.xhtml`` の ``inputText`` および ``commandButton`` の値として使用します。
-4. パッケージに「*dvdrental*」を選択します。
-5. 管理対象Beanに使用する名前に「*filmController*」と入力します。
-6. スコープを「セッション」に設定します。「終了」をクリックします。
+
+[start=4]
+. パッケージに「*dvdrental*」を選択します。
+
+[start=5]
+. 管理対象Beanに使用する名前に「*filmController*」と入力します。
+
+[start=6]
+. スコープを「セッション」に設定します。「終了」をクリックします。
image::images/hib-newmanagedbean.png[title="新規JSF管理対象Beanウィザード"]
@@ -490,7 +537,9 @@ public class FilmController {
private int selectedItemIndex;*
}
----
-2. 次の太字部分のコードを追加してFilmControllerインスタンスを作成し、映画を取り出します。
+
+[start=2]
+. 次の太字部分のコードを追加してFilmControllerインスタンスを作成し、映画を取り出します。
[source,java]
----
@@ -528,7 +577,9 @@ public class FilmController {
filmTitles = null;
}*
----
-3. 表の表示とページへのナビゲートに使用される、次のメソッドを追加します。* public boolean isHasNextPage() {
+
+[start=3]
+. 表の表示とページへのナビゲートに使用される、次のメソッドを追加します。* public boolean isHasNextPage() {
if (endId + pageSize <= recordCount) {
return true;
}
@@ -572,7 +623,9 @@ public class FilmController {
「index」または「browse」を返すメソッドによって、JSFナビゲーション・ハンドラは ``index.xhtml`` または ``browse.xhtml`` という名前のページを開くように求められます。JSF 2.0仕様では、Faceletsテクノロジを使用するアプリケーションで暗黙ナビゲーション・ルールを使用できます。このアプリケーションは、 ``faces-config.xml`` にナビゲーション・ルールが構成されていません。かわりに、ナビゲーション・ハンドラが、アプリケーション内で適切なページを検索しようとします。
-4. 追加の映画の詳細を取り出すヘルパー・クラスにアクセスする、次のメソッドを追加します。* public String getLanguage() {
+
+[start=4]
+. 追加の映画の詳細を取り出すヘルパー・クラスにアクセスする、次のメソッドを追加します。* public String getLanguage() {
int langID = current.getLanguageByLanguageId().getLanguageId().intValue();
String language = helper.getLangByID(langID);
return language;
@@ -601,7 +654,9 @@ public class FilmController {
----
-5. インポートを修正([Ctrl]-[Shift]-[I])して変更内容を保存します。
+
+[start=5]
+. インポートを修正([Ctrl]-[Shift]-[I])して変更内容を保存します。
エディタでコード補完を使用すると、コードの入力に役立ちます。
@@ -640,7 +695,9 @@ JSF 2.0およびFaceletsテンプレートの使用については、link:jsf20-
</h:body>
----
-5. ``<ui:insert>`` 要素を変更して、デフォルトで生成される名前を「body」に変えます。
+
+[start=5]
+. ``<ui:insert>`` 要素を変更して、デフォルトで生成される名前を「body」に変えます。
[source,html]
----
@@ -649,7 +706,9 @@ JSF 2.0およびFaceletsテンプレートの使用については、link:jsf20-
<ui:insert name="*body*">Content</ui:insert>
</div>
----
-6. 変更を保存します。
+
+[start=6]
+. 変更を保存します。
``index.xhtml`` および ``browse.xhtml`` の ``<ui:define name="body">`` 要素内の内容は、テンプレートの ``<ui:insert name="body">Content</ui:insert>`` で指定された場所に挿入されます。
@@ -676,7 +735,9 @@ Webアプリケーションを作成すると、IDEが自動的にページの `
</h:body>
</html>
----
-2. ページを変更し、JSF ``<ui:composition>`` 要素および ``<ui:define>`` 要素を使用するようにして、 ``<h:form>`` 要素を追加します。
+
+[start=2]
+. ページを変更し、JSF ``<ui:composition>`` 要素および ``<ui:define>`` 要素を使用するようにして、 ``<h:form>`` 要素を追加します。
[source,xml]
----
@@ -698,7 +759,9 @@ Webアプリケーションを作成すると、IDEが自動的にページの `
``<ui:composition>`` 要素と ``<ui:define>`` 要素は、作成するページ・テンプレートと組み合せて使用されます。 ``<ui:composition>`` 要素は、このページによって使用されるテンプレートの場所を参照します。 ``<ui:define>`` 要素は、含まれているコードが占有するテンプレート内での位置を参照します。
-3. JSF管理対象Beanで ``previous`` メソッドおよび ``next`` メソッドをコールする、次のナビゲーション・リンクを追加します。
+
+[start=3]
+. JSF管理対象Beanで ``previous`` メソッドおよび ``next`` メソッドをコールする、次のナビゲーション・リンクを追加します。
[source,xml]
----
@@ -710,7 +773,9 @@ Webアプリケーションを作成すると、IDEが自動的にページの `
</h:form>
</ui:define>
----
-4. 取り出された項目を表示する表を生成する次の ``dataTable`` 要素(太字部分)を追加します。
+
+[start=4]
+. 取り出された項目を表示する表を生成する次の ``dataTable`` 要素(太字部分)を追加します。
[source,xml]
----
@@ -742,7 +807,9 @@ Webアプリケーションを作成すると、IDEが自動的にページの `
</h:form>
----
-5. 変更を保存します。
+
+[start=5]
+. 変更を保存します。
これで、indexページにデータベース内の映画のタイトル・リストが表示されます。表の各行に、管理対象Beanの ``prepareView`` メソッドを呼び出す「View」リンクがあります。 ``prepareView`` メソッドは「browse」を返し、 ``browse.xhtml`` を開きます。
@@ -757,12 +824,22 @@ Webアプリケーションを作成すると、IDEが自動的にページの `
1. 「プロジェクト」ウィンドウで「DVDStore」プロジェクト・ノードを右クリックし、「新規」>「その他」を選択します。
2. 「JavaServer Faces」カテゴリで「Faceletsテンプレート・クライアント」を選択します。「次」をクリックします。
+
image::images/hib-faceletsclient.png[title="新規ファイル・ウィザードの「Faceletsテンプレート・クライアント」ファイル・タイプ"]
-3. 「ファイル名」に「*browse*」と入力します。
-4. 「参照」をクリックして「ファイルを参照」ダイアログ・ボックスを開き、ページのテンプレートを特定します。
-5. 「Webページ」フォルダを展開し、「 ``template.xhtml`` 」を選択します。「ファイルを選択」をクリックします。
+
+[start=3]
+. 「ファイル名」に「*browse*」と入力します。
+
+[start=4]
+. 「参照」をクリックして「ファイルを参照」ダイアログ・ボックスを開き、ページのテンプレートを特定します。
+
+[start=5]
+. 「Webページ」フォルダを展開し、「 ``template.xhtml`` 」を選択します。「ファイルを選択」をクリックします。
+
image::images/hib-browsetemplate.png[title="「ファイルを参照」ダイアログでのテンプレートの選択"]
-6. 「生成されたルート・タグ」に*<ui:composition>*を選択します。「終了」をクリックします。
+
+[start=6]
+. 「生成されたルート・タグ」に*<ui:composition>*を選択します。「終了」をクリックします。
「終了」をクリックすると、 ``browse.xhtml`` ファイルがエディタで開き、次のコードが表示されます。
@@ -786,7 +863,9 @@ image::images/hib-browsetemplate.png[title="「ファイルを参照」ダイア
新しいファイルが ``template.xhtml`` ファイルを指定し、 ``<ui:define>`` タグに ``name="body"`` プロパティがあることを確認できます。
-7. ``<ui:define>`` タグの間に次の太字のコードを追加してフォームを作成し、管理対象BeanのFilmControllerでメソッドをコールして、データを取り出し、フォームを生成します。
+
+[start=7]
+. ``<ui:define>`` タグの間に次の太字のコードを追加してフォームを作成し、管理対象BeanのFilmControllerでメソッドをコールして、データを取り出し、フォームを生成します。
[source,xml]
----
@@ -853,7 +932,9 @@ image::images/hib-browsetemplate.png[title="「ファイルを参照」ダイア
``browse.xhtml`` と ``index.xhtml`` が同じページ・テンプレートを使用していることが確認できます。
-8. 変更を保存します。
+
+[start=8]
+. 変更を保存します。
== プロジェクトの実行
@@ -865,7 +946,9 @@ image::images/hib-browsetemplate.png[title="「ファイルを参照」ダイア
変更したファイルがすべて保存され、アプリケーションがビルドされて、サーバーにデプロイされます。IDEは、映画のリストを表示するURL ``http://localhost:8080/DVDStore/`` で、ブラウザ・ウィンドウを開きます。
image::images/hib-browser1.png[title="indexページに映画のリストが表示されたスクリーンショット"]
-2. ブラウザで、「View」をクリックして ``browse.xhtml`` をロードし、映画の詳細を表示します。
+
+[start=2]
+. ブラウザで、「View」をクリックして ``browse.xhtml`` をロードし、映画の詳細を表示します。
=== ソリューション・プロジェクトのダウンロード
@@ -878,14 +961,24 @@ image::images/hib-browser1.png[title="indexページに映画のリストが表
2. 「チェックアウト」ダイアログ・ボックスで次のリポジトリURLを入力します。
``https://svn.netbeans.org/svn/samples~samples-source-code``
「次」をクリックします。
-3. 「参照」をクリックして「リポジトリ・フォルダを参照」ダイアログ・ボックスを開きます。
-4. ルート・ノードを展開し、*samples/javaee/DVDStoreEE6*を選択します。「OK」をクリックします。
-5. ソースのローカル・フォルダを指定します。
-6. 「終了」をクリックします。
+
+[start=3]
+. 「参照」をクリックして「リポジトリ・フォルダを参照」ダイアログ・ボックスを開きます。
+
+[start=4]
+. ルート・ノードを展開し、*samples/javaee/DVDStoreEE6*を選択します。「OK」をクリックします。
+
+[start=5]
+. ソースのローカル・フォルダを指定します。
+
+[start=6]
+. 「終了」をクリックします。
「終了」をクリックすると、IDEではローカル・フォルダがSubversionリポジトリとして初期化され、プロジェクト・ソースがチェックアウトされます。
-7. チェックアウトが完了するときに表示されるダイアログで、「プロジェクトを開く」をクリックします。
+
+[start=7]
+. チェックアウトが完了するときに表示されるダイアログで、「プロジェクトを開く」をクリックします。
*注意:*Subversionのインストールの詳細は、link:../ide/subversion.html[+NetBeans IDEでのSubversionガイド+]のlink:../ide/subversion.html#settingUp[+Subversionの設定+]の項を参照してください。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_pt_BR.asciidoc
index 1318224..2618e96 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_pt_BR.asciidoc
@@ -74,11 +74,14 @@ Para obter mais informações sobre a configuração do IDE para trabalhar com o
2. Depois da instalação do plug-in, inicie o banco de dados MySQL expandindo o nó Bancos de Dados na janela Serviços, clicando com o botão direito do mouse no nó Servidor MySQL e selecionando Iniciar.
3. Clique com o botão direito do mouse no nó Servidor MySQL e escolha Criar Banco de Dados.
4. Selecione o banco de dados Sakila na lista drop-down Novo Nome de Banco de Dados, na caixa de diálogo Criar Banco de Dados MySQL. Clique em OK.
+
image::images/create-sakila-mysql.png[title="Tela da caixa de diálogo Criar Banco de Dados MySQL"]
Quando você clicar em OK, um nó do Salkila será exibido sob o nó Servidor MySQL.
-5. Clique com o botão direito do mouse no nó do Sakila e escolha Conectar.
+
+[start=5]
+. Clique com o botão direito do mouse no nó do Sakila e escolha Conectar.
Quando você clicar em Conectar, um nó de conexão do banco de dados do banco de dados Sakila ( ``jdbc:mysql://localhost:3306/sakila [_nome de usuário_ em Default]`` ) será apresentado no nó Bancos de Dados. Quando uma conexão for aberta, você poderá exibir os dados no banco de dados ampliando o nó de conexão.
@@ -93,10 +96,18 @@ Neste exercício, você criará um projeto de aplicação Web e adicionará as b
Neste tutorial, não é necessário copiar as bibliotecas do projeto para uma pasta dedicada, pois você não precisará compartilhar bibliotecas com outros usuários.
-4. Defina o servidor como GlassFish Server e defina a versão do Java EE para Java EE 6 Web ou Java EE 7 Web. Clique em Próximo.
-5. Marque a caixa de seleção JavaServer Faces e utilize as bibliotecas default do JSF 2.x.
-6. Marque a caixa de seleção Hibernar na lista de frameworks.
-7. Selecione o banco de dados sakila na lista drop-down Conexão de Banco de Dados. Clique em Finalizar.
+
+[start=4]
+. Defina o servidor como GlassFish Server e defina a versão do Java EE para Java EE 6 Web ou Java EE 7 Web. Clique em Próximo.
+
+[start=5]
+. Marque a caixa de seleção JavaServer Faces e utilize as bibliotecas default do JSF 2.x.
+
+[start=6]
+. Marque a caixa de seleção Hibernar na lista de frameworks.
+
+[start=7]
+. Selecione o banco de dados sakila na lista drop-down Conexão de Banco de Dados. Clique em Finalizar.
*Observação:* se o banco de dados sakila não estiver disponível como uma opção no painel Framework do assistente, verifique se a conexão está listada no nó Bancos de Dados da janela Serviços. Se a conexão não existir, será necessário criar a conexão do banco de dados.
@@ -119,12 +130,23 @@ Neste exercício, você editará as propriedades default especificadas em ``hib
2. No editor XML com várias views, expanda o nó Propriedades da Configuração em Propriedades Opcionais.
3. Clique em Adicionar para abrir a caixa de diálogo Adicionar Propriedade do Hibernate.
4. Na caixa de diálogo, selecione a propriedade ``hibernate.show_sql`` e defina o valor para ``true`` . Isso ativa o log de depuração das instruções SQL.
+
image::images/add-property-showsql.png[title="Caixa de diálogo Adicionar Propriedade Hibernate que mostra o valor de definição de hibernate.show_sql"]
-5. Expanda o nó Propriedades Diversas e clique em Adicionar.
-6. Na caixa de diálogo, selecione ``properties hibernate.current_session_context_class`` e defina o valor para ``thread`` para ativar o gerenciamento de contexto automático da sessão do Hibernate.
+
+[start=5]
+. Expanda o nó Propriedades Diversas e clique em Adicionar.
+
+[start=6]
+. Na caixa de diálogo, selecione ``properties hibernate.current_session_context_class`` e defina o valor para ``thread`` para ativar o gerenciamento de contexto automático da sessão do Hibernate.
+
image::images/add-property-sessioncontext.png[title="Adicione a caixa e diálogo Propriedade do Hibernate mostrando como definir o valor da propriedade hibernate.current_session_context_class"]
-7. Clique novamente em Adicionar no nó Propriedades Diversas e selecione ``hibernate.query.factory_class`` na lista drop-down Nome da Propriedade.
-8. Selecione *org.hibernate.hql.classic.ClassicQueryTranslatorFactory* como o Valor da Propriedade. Clique em OK.
+
+[start=7]
+. Clique novamente em Adicionar no nó Propriedades Diversas e selecione ``hibernate.query.factory_class`` na lista drop-down Nome da Propriedade.
+
+[start=8]
+. Selecione *org.hibernate.hql.classic.ClassicQueryTranslatorFactory* como o Valor da Propriedade. Clique em OK.
+
image::images/add-property-factoryclass.png[title="Caixa de diálogo Adicionar Propriedade Hibernate que mostra o valor de definição de hibernate.query.factory_class"]
Se clicar na guia XML no editor, você pode ver o arquivo na view XML. O arquivo deve ter uma aparência semelhante à seguinte (as três novas propriedades estão em negrito):
@@ -146,7 +168,9 @@ Se clicar na guia XML no editor, você pode ver o arquivo na view XML. O arquivo
</session-factory>
</hibernate-configuration>
----
-9. Salve as alterações feitas no arquivo.
+
+[start=9]
+. Salve as alterações feitas no arquivo.
Você pode fechar o arquivo, pois não será necessário editá-lo novamente.
@@ -216,6 +240,7 @@ Para criar os POJOS e arquivos de mapeamento utilizando um assistente, execute a
4. Selecione *Funcionalidades da Linguagem JDK 5* nas opções Definições Gerais.
5. Certifique-se de que as opções *Código do Domínio* e *Mapeamentos XML do Hibernate* estejam selecionadas.
6. Selecione *dvdrental* para o Nome do pacote. Clique em Finalizar.
+
image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Mapeamento Hibernar e POJOs"]
Quando você clicar em Finalizar, o IDE irá gera POJOs e arquivos de mapeamento do Hibernate com os campos mapeados para as colunas especificadas em ``hibernate.reveng.xml`` . O IDE também adicionará entradas de mapeamento em ``hibernate.cfg.xml`` .
@@ -282,7 +307,9 @@ public class FilmHelper {
}
----
-5. Clique com o botão direito do mouse no editor, selecione Corrigir importações (Alt-Shift-I; &#8984-Shift-I no Mac) para adicionar as instruções necessárias de importação ( ``org.hibernate.Session`` ) e salve suas alterações.
+
+[start=5]
+. Clique com o botão direito do mouse no editor, selecione Corrigir importações (Alt-Shift-I; &#8984-Shift-I no Mac) para adicionar as instruções necessárias de importação ( ``org.hibernate.Session`` ) e salve suas alterações.
Agora você modificará ``FilmHelper.java`` para adicionar métodos de consulta do BD.
@@ -296,7 +323,7 @@ A tabela Film possui 1000 registros, de modo que o método para recuperar a list
1. Clique com o botão direito do mouse no nó do projeto na janela Projetos e selecione Limpar e Construir.
2. Clique com o botão direito do mouse em ``hibernate.cfg.xml`` na janela Projetos e selecione Executar Consulta HQL para abrir o editor de consultas HQL.
3. Selecione hibernate.cfg na lista drop-down da barra de ferramentas.
-4. Teste a conexão digitando no editor e clicando no botão Executar a Consulta HQL ( image::images/run_hql_query_16.png[title="Botão Executar Consulta HQL"] ) da barra de ferramentas.
+4. Teste a conexão digitando no editor e clicando no botão Executar a Consulta HQL ( image:images/run_hql_query_16.png[title="Botão Executar Consulta HQL"] ) da barra de ferramentas.
[source,java]
----
@@ -316,7 +343,9 @@ Se você clicar no botão SQL, você verá a consulta SQL equivalente.
select film0_.film_id as col_0_0_ from sakila.film film0_
----
-5. Digite a consulta a seguir para recuperar os registros da tabela Film, onde o id do filme está entre 100 e 200.
+
+[start=5]
+. Digite a consulta a seguir para recuperar os registros da tabela Film, onde o id do filme está entre 100 e 200.
[source,java]
----
@@ -326,7 +355,9 @@ from Film as film where film.filmId between 100 and 200
A janela de resultados exibirá uma lista de registros. Agora que você verificou que a consulta testada retorna os resultados desejados, utilize a consulta na classe do helper.
-6. Adicione o método a seguir, ``getFilmTitles`` a ``FilmHelper.java`` , para recuperar os filmes, onde o id do filme está entre uma determinada faixa especificada pelas variáveis ``startID`` e ``endID`` .
+
+[start=6]
+. Adicione o método a seguir, ``getFilmTitles`` a ``FilmHelper.java`` , para recuperar os filmes, onde o id do filme está entre uma determinada faixa especificada pelas variáveis ``startID`` e ``endID`` .
[source,java]
----
@@ -343,7 +374,9 @@ public List getFilmTitles(int startID, int endID) {
return filmList;
}
----
-7. Adicione o método a seguir, ``getActorsByID`` , para recuperar os atores de um filme específico. O método construirá a consulta utilizando ``filmId`` como a variável de entrada.
+
+[start=7]
+. Adicione o método a seguir, ``getActorsByID`` , para recuperar os atores de um filme específico. O método construirá a consulta utilizando ``filmId`` como a variável de entrada.
[source,java]
----
@@ -362,7 +395,9 @@ public List getActorsByID(int filmId){
return actorList;
}
----
-8. Corrija as importações e salve as alterações.
+
+[start=8]
+. Corrija as importações e salve as alterações.
Ao corrigir suas importações, selecione ``java.util.List`` e ``org.hibernate.Query`` .
@@ -390,7 +425,9 @@ public Category getCategoryByID(int filmId){
return categoryList.get(0);
}
----
-2. Adicione o método seguinte para recuperar um único filme de acordo com o ``filmId`` .
+
+[start=2]
+. Adicione o método seguinte para recuperar um único filme de acordo com o ``filmId`` .
[source,java]
----
@@ -410,7 +447,9 @@ public Film getFilmByID(int filmId){
return film;
}
----
-3. Adicione o método a seguir para recuperar o idioma do filme de acordo com o ``filmId`` .
+
+[start=3]
+. Adicione o método a seguir para recuperar o idioma do filme de acordo com o ``filmId`` .
[source,java]
----
@@ -430,7 +469,9 @@ public String getLangByID(int langId){
return language.getName();
}
----
-4. Salve as alterações.
+
+[start=4]
+. Salve as alterações.
== Criando o Bean Gerenciado pelo JSF
@@ -445,9 +486,15 @@ Para criar o bean gerenciado, execute as seguintes etapas:
Você usará o nome ``filmController`` do Bean Gerenciado como o valor para ``inputText`` e ``commandButton`` na página JSF ``index.xhtml`` ao chamar métodos no Bean.
-4. Selecione *dvdrental* para o Pacote.
-5. Digite *filmController* como o Nome que será utilizado para o bean gerenciado.
-6. Defina o Escopo Como Sessão. Clique em Finalizar.
+
+[start=4]
+. Selecione *dvdrental* para o Pacote.
+
+[start=5]
+. Digite *filmController* como o Nome que será utilizado para o bean gerenciado.
+
+[start=6]
+. Defina o Escopo Como Sessão. Clique em Finalizar.
image::images/hib-newmanagedbean.png[title="Novo assistente de Bean Gerenciado pelo JSF"]
@@ -490,7 +537,9 @@ public class FilmController {
private int selectedItemIndex;*
}
----
-2. Adicione o código a seguir (em negrito) para criar a instância do FilmController e recuperar os filmes.
+
+[start=2]
+. Adicione o código a seguir (em negrito) para criar a instância do FilmController e recuperar os filmes.
[source,java]
----
@@ -528,7 +577,9 @@ public class FilmController {
filmTitles = null;
}*
----
-3. Adicione os métodos a seguir usados para exibir a tabela e navegar entre as páginas.* public boolean isHasNextPage() {
+
+[start=3]
+. Adicione os métodos a seguir usados para exibir a tabela e navegar entre as páginas.* public boolean isHasNextPage() {
if (endId + pageSize <= recordCount) {
return true;
}
@@ -572,7 +623,9 @@ public class FilmController {
Os métodos que retornam "index" ou "browse" solicitarão o handler de navegação JSF para tentar abrir uma página denominada ``index.xhtml`` ou ``browse.xhtml`` . A especificação JSF 2.0 permite a utilização de regras de navegação implícitas em aplicações que utilizam a tecnologia Facelets. Nesta aplicação, não há regras de navegação configuradas em ``faces-config.xml`` . Em vez disso, o handler de navegação tentará localizar a página adequada na aplicação.
-4. Adicione os métodos a seguir que acessam a classe do helper para recuperar detalhes adicionais do filme.* public String getLanguage() {
+
+[start=4]
+. Adicione os métodos a seguir que acessam a classe do helper para recuperar detalhes adicionais do filme.* public String getLanguage() {
int langID = current.getLanguageByLanguageId().getLanguageId().intValue();
String language = helper.getLangByID(langID);
return language;
@@ -601,7 +654,9 @@ Os métodos que retornam "index" ou "browse" solicitarão o handler de navegaç
----
-5. Corrija as importações (Ctrl-Shift-I) e salve as alterações.
+
+[start=5]
+. Corrija as importações (Ctrl-Shift-I) e salve as alterações.
Você pode utilizar a funcionalidade para autocompletar código no editor para ajudar a digitar seu código.
@@ -640,7 +695,9 @@ Quando você clica em Finalizar, o arquivo ``template.xhtml`` é aberto no edi
</h:body>
----
-5. Modifique o elemento ``<ui:insert>`` para alterar o nome gerado default para "corpo".
+
+[start=5]
+. Modifique o elemento ``<ui:insert>`` para alterar o nome gerado default para "corpo".
[source,html]
----
@@ -649,7 +706,9 @@ Quando você clica em Finalizar, o arquivo ``template.xhtml`` é aberto no edi
<ui:insert name="*body*">Content</ui:insert>
</div>
----
-6. Salve as alterações.
+
+[start=6]
+. Salve as alterações.
O conteúdo do elemento ``<ui:define name="body">`` nos arquivos ``index.xhtml`` e ``browse.xhtml`` será inserido no local identificado com `` <ui:insert name="body">Content</ui:insert>`` no modelo.
@@ -676,7 +735,9 @@ O assistente para Novo Projeto gerou a seguinte página ``index.xhtml`` defaul
</h:body>
</html>
----
-2. Modifique a página para utilizar os elementos JSF ``<ui:composition>`` e ``<ui:define>`` e adicione um elemento ``<h:form>`` .
+
+[start=2]
+. Modifique a página para utilizar os elementos JSF ``<ui:composition>`` e ``<ui:define>`` e adicione um elemento ``<h:form>`` .
[source,xml]
----
@@ -698,7 +759,9 @@ Quando você começa a digitar as tags, o IDE adiciona a declaração da bibliot
Os elementos ``<ui:composition>`` e ``<ui:define>`` são utilizados em combinação com o modelo de página que você criará. O elemento ``<ui:composition>`` faz referência à localização do modelo que será utilizado por essa página. O elemento ``<ui:define>`` faz referência à posição no modelo que o código incluído ocupará.
-3. Adicione os seguintes links de navegação que chamam os métodos ``previous`` e ``next`` no Bean gerenciado pelo JSF.
+
+[start=3]
+. Adicione os seguintes links de navegação que chamam os métodos ``previous`` e ``next`` no Bean gerenciado pelo JSF.
[source,xml]
----
@@ -710,7 +773,9 @@ Os elementos ``<ui:composition>`` e ``<ui:define>`` são utilizados em combi
</h:form>
</ui:define>
----
-4. Adicione o seguinte elemento ``dataTable`` (em negrito) para gerar a tabela para exibir os itens recuperados.
+
+[start=4]
+. Adicione o seguinte elemento ``dataTable`` (em negrito) para gerar a tabela para exibir os itens recuperados.
[source,xml]
----
@@ -742,7 +807,9 @@ Os elementos ``<ui:composition>`` e ``<ui:define>`` são utilizados em combi
</h:form>
----
-5. Salve as alterações.
+
+[start=5]
+. Salve as alterações.
A página de índice agora exibirá uma lista de títulos de filmes no banco de dados. Cada linha da tabela inclui um link "Exibir" que chama o método ``prepareView`` no bean gerenciado. O método ``prepareView`` retornará "browse" e abrirá o ``browse.xhtml`` .
@@ -757,12 +824,22 @@ Agora você criará a página ``browse.xhtml`` para exibir os detalhes do film
1. Clique com o botão direito do mouse no nó do projeto DVDStore na janela Projetos e selecione Novo > Outro.
2. Selecione Cliente de Modelo de Facelets na categoria JavaServer Faces. Clique em Próximo.
+
image::images/hib-faceletsclient.png[title="Tipo de arquivo Cliente de Modelo de Facelets no assistente Novo Arquivo"]
-3. Digite *browse* para o Nome do Arquivo.
-4. Localize o Modelo da página clicando em Procurar para abrir a caixa de diálogo Procurar Arquivos.
-5. Expanda a pasta Páginas Web e selecione ``template.xhtml`` . Clique em Selecionar Arquivo.
+
+[start=3]
+. Digite *browse* para o Nome do Arquivo.
+
+[start=4]
+. Localize o Modelo da página clicando em Procurar para abrir a caixa de diálogo Procurar Arquivos.
+
+[start=5]
+. Expanda a pasta Páginas Web e selecione ``template.xhtml`` . Clique em Selecionar Arquivo.
+
image::images/hib-browsetemplate.png[title="Selecione o modelo na caixa de diálogo Procurar Arquivos"]
-6. Selecione *<ui:composition>* para a Tag Raiz Gerada. Clique em Finalizar.
+
+[start=6]
+. Selecione *<ui:composition>* para a Tag Raiz Gerada. Clique em Finalizar.
Quando você clica em Finalizar, o arquivo ``browse.xhtml`` abrirá no editor com o código a seguir.
@@ -786,7 +863,9 @@ Quando você clica em Finalizar, o arquivo ``browse.xhtml`` abrirá no editor
É possível ver que o novo arquivo especifica o arquivo ``template.xhtml`` e que a tag ``<ui:define>`` possui a propriedade ``name="body"``
-7. Adicione o código a seguir (em negrito) entre as tags ``<ui:define>`` para criar o form e chamar os métodos no FilmController do Bean gerenciado para recuperar os dados e preencher o form.
+
+[start=7]
+. Adicione o código a seguir (em negrito) entre as tags ``<ui:define>`` para criar o form e chamar os métodos no FilmController do Bean gerenciado para recuperar os dados e preencher o form.
[source,xml]
----
@@ -853,7 +932,9 @@ Quando você clica em Finalizar, o arquivo ``browse.xhtml`` abrirá no editor
É possível ver que os arquivos ``browse.xhtml`` e ``index.xhtml`` utilizarão o mesmo modelo de página.
-8. Salve as alterações.
+
+[start=8]
+. Salve as alterações.
== Executando o Projeto
@@ -865,7 +946,9 @@ O conceito básico da aplicação agora está concluído. Agora você pode execu
O IDE salva todos os arquivos alterados, constrói e implanta a aplicação no servidor. O IDE abre a janela do browser no URL ``http://localhost:8080/DVDStore/`` que exibe a lista de filmes.
image::images/hib-browser1.png[title="Tela do browser exibindo a lista de filme na página de índice"]
-2. No browser, clique em "Exibir" para carregar o ``browse.xhtml`` e exibir os detalhes do filme.
+
+[start=2]
+. No browser, clique em "Exibir" para carregar o ``browse.xhtml`` e exibir os detalhes do filme.
=== Fazendo Download do Projeto da Solução
@@ -878,14 +961,24 @@ Você pode fazer o download da solução para este projeto como um projeto das s
2. Na caixa de diálogo Efetuar Check-out, insira o Repositório URL a seguir:
``https://svn.netbeans.org/svn/samples~samples-source-code``
Clique em Próximo.
-3. Clique em Procurar para abrir a caixa de diálogo Procurar nas Pastas do Repositório:
-4. Expanda o nó raiz e selecione *samples/javaee/DVDStoreEE6*. Clique em OK.
-5. Especifique a Pasta Local dos códigos-fonte.
-6. Clique em Finalizar.
+
+[start=3]
+. Clique em Procurar para abrir a caixa de diálogo Procurar nas Pastas do Repositório:
+
+[start=4]
+. Expanda o nó raiz e selecione *samples/javaee/DVDStoreEE6*. Clique em OK.
+
+[start=5]
+. Especifique a Pasta Local dos códigos-fonte.
+
+[start=6]
+. Clique em Finalizar.
Quando você clica em Finalizar, o IDE inicializa a pasta local como um repositório Subversion e verifica os códigos-fonte do projeto.
-7. Clique em Abrir Projeto na caixa de diálogo exibida quando o check-out for concluído.
+
+[start=7]
+. Clique em Abrir Projeto na caixa de diálogo exibida quando o check-out for concluído.
*Observações.* Para saber mais sobre a instalação do Subversion, consulte a seção link:../ide/subversion.html#settingUp[+Configurando o Subversion+] no link:../ide/subversion.html[+Guia do Subversion no NetBeans IDE+].
diff --git a/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_ru.asciidoc
index 35e683c..b48b4d5 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_ru.asciidoc
@@ -74,11 +74,14 @@ image::images/netbeans-stamp-74-73-72.png[title="Содержимое этой
2. После установки подключаемого модуля, запустите базу данных MySQL, развернув узел 'Базы данных' в окне 'Службы', щелкните правой кнопкой мыши узел MySQL Server и выберите 'Пуск'.
3. Щелкните правой кнопкой мыши узел "MySQL Server" и выберите "Create Database".
4. Выберите базу данных "Sakila"из раскрывающегося списка "New Database Name" в диалоговом окне "Create MySQL Database". Нажмите кнопку "ОК".
+
image::images/create-sakila-mysql.png[title="Снимок диалогового окна создания базы данных MySQL"]
При нажатии кнопки "OK" узел "Sakila" появится под узлом "MySQL Server".
-5. Щелкните правой кнопкой мыши узел "Sakila" и выберите "Connect".
+
+[start=5]
+. Щелкните правой кнопкой мыши узел "Sakila" и выберите "Connect".
После нажатия кнопки "Connect a database" под узлом "Databases" отобразится узел подключения к базе данных "Sakila" ( ``jdbc:mysql://localhost:3306/sakila [_username_ on Default]`` ). При открытом подключении для просмотра данных в базе данных разверните этот узел подключения.
@@ -93,10 +96,18 @@ image::images/create-sakila-mysql.png[title="Снимок диалогового
В рамках этого руководства копирование библиотек проекта в выделенную папку лишено смысла, поскольку совместное использование библиотек с другими пользователями не потребуется.
-4. В качестве сервера выберите 'GlassFish Server', а в качестве версии Java EE -'Java EE 6 Web' или 'Java EE 7 Web'. Нажмите кнопку "Далее".
-5. Установите флажок 'JavaServer Faces' и используйте стандартные библиотеки JSF 2.x.
-6. В списке платформ установите флажок 'Гибернация'.
-7. Выберите базу данных "sakila" из раскрывающегося списка "Соединение с базой данных". Нажмите кнопку 'Готово'.
+
+[start=4]
+. В качестве сервера выберите 'GlassFish Server', а в качестве версии Java EE -'Java EE 6 Web' или 'Java EE 7 Web'. Нажмите кнопку "Далее".
+
+[start=5]
+. Установите флажок 'JavaServer Faces' и используйте стандартные библиотеки JSF 2.x.
+
+[start=6]
+. В списке платформ установите флажок 'Гибернация'.
+
+[start=7]
+. Выберите базу данных "sakila" из раскрывающегося списка "Соединение с базой данных". Нажмите кнопку 'Готово'.
*Примечание.* Если база данных Sakila не доступна в качестве параметра на панели Frameworks мастера, убедитесь, что соединение указано в списке узлов баз данных в окне 'Службы'. При отсутствии подключения следует создать подключение к базе данных.
@@ -119,12 +130,23 @@ image::images/hib-libraries.png[title="Снимок окна 'Проекты',
2. В редакторе XML с несколькими представлениями разверните узел "Свойства настройки" в области "Необязательные свойства".
3. Нажмите кнопку "Add" для открытия диалогового окна "Add Hibernate Property".
4. В диалоговом окне выберите свойство ``hibernate.show_sql`` и установите значение ``true`` . Это приведет ко включению протоколирования отладки операторов SQL.
+
image::images/add-property-showsql.png[title="Диалоговое окно 'Добавить свойство Hibernate', в котором отображаются значения настроек для свойства hibernate.show_sql"]
-5. Разверните узел "Прочие свойства" и нажмите кнопку "Добавить".
-6. В диалоговом окне выберите ``properties hibernate.current_session_context_class`` и установите значение ``thread`` для включения автоматического управления контекстами сеанса платформы Hibernate.
+
+[start=5]
+. Разверните узел "Прочие свойства" и нажмите кнопку "Добавить".
+
+[start=6]
+. В диалоговом окне выберите ``properties hibernate.current_session_context_class`` и установите значение ``thread`` для включения автоматического управления контекстами сеанса платформы Hibernate.
+
image::images/add-property-sessioncontext.png[title="Диалоговое окно 'Добавить свойство Hibernate', в котором отображаются значения настроек для свойства hibernate.current_session_context_class"]
-7. Нажмите кнопку "Добавить" еще раз в узле "Разные свойства" и выберите ``hibernate.query.factory_class`` в раскрывающемся списке "Имя свойства".
-8. Выберите *org.hibernate.hql.classic.ClassicQueryTranslatorFactory* как "Значение свойства". Нажмите кнопку "ОК".
+
+[start=7]
+. Нажмите кнопку "Добавить" еще раз в узле "Разные свойства" и выберите ``hibernate.query.factory_class`` в раскрывающемся списке "Имя свойства".
+
+[start=8]
+. Выберите *org.hibernate.hql.classic.ClassicQueryTranslatorFactory* как "Значение свойства". Нажмите кнопку "ОК".
+
image::images/add-property-factoryclass.png[title="Диалоговое окно 'Добавить свойство Hibernate', в котором отображаются значения настроек для свойства hibernate.query.factory_class property"]
При выборе вкладки "XML" в редакторе можно просмотреть файл в режиме XML. Ваш файл должен выглядеть следующим образом (три новые свойства выделены жирным шрифтом):
@@ -146,7 +168,9 @@ image::images/add-property-factoryclass.png[title="Диалоговое окно
</session-factory>
</hibernate-configuration>
----
-9. Сохраните измененный файл.
+
+[start=9]
+. Сохраните измененный файл.
Файл можно закрыть, т.к. необходимость в его изменении отсутствует.
@@ -216,6 +240,7 @@ image::images/hibernate-reveng-wizard.png[title="Мастер создания
4. Выберите *Функции языка JDK 5* в параметрах "Обычные параметры".
5. Убедитесь в том, что выбраны пункты *Domain Code* и *Hibernate XML Mappings*.
6. Выберите *dvdrental* в качестве имени пакета. Нажмите кнопку 'Готово'.
+
image::images/hibernate-pojo-wizard2.png[title="Мастер создания файлов сопоставления Hibernate и POJO"]
При нажатии кнопки "Готово" в среде IDE создаются объекты POJO и файлы отображения платформы Hibernate где поля отображаются на столбцы, указанные в ``hibernate.reveng.xml`` . Среда IDE добавляет записи отображения в файл ``hibernate.cfg.xml`` .
@@ -282,7 +307,9 @@ public class FilmHelper {
}
----
-5. Щелкните правой кнопкой мыши в редакторе и выберите команду "Исправить операторы импорта" (ALT+SHIFT+I; &#8984+SHIFT+I на компьютере Mac) для добавления любого необходимого оператора импорта ( ``org.hibernate.Session`` ) и сохраните изменения.
+
+[start=5]
+. Щелкните правой кнопкой мыши в редакторе и выберите команду "Исправить операторы импорта" (ALT+SHIFT+I; &#8984+SHIFT+I на компьютере Mac) для добавления любого необходимого оператора импорта ( ``org.hibernate.Session`` ) и сохраните изменения.
Теперь можно изменить класс ``FilmHelper.java`` для добавления методов, выполняющих запрос данных в БД.
@@ -296,7 +323,7 @@ public class FilmHelper {
1. В окне "Проекты" щелкните правой кнопкой мыши и выберите команду "Очистка и сборка".
2. Щелкните правой кнопкой мыши ``hibernate.cfg.xml`` в окне "Проекты" и выберите "Выполнить запрос HQL" для открытия редактора запросов HQL.
3. Выберите "hibernate.cfg" из раскрывающегося списка на панели инструментов.
-4. Проверьте соединение, введя следующее в редакторе и нажав кнопку 'Выполнить запрос HQL' ( image::images/run_hql_query_16.png[title="Кнопка 'Выполнить запрос HQL'"] ) на панели инструментов.
+4. Проверьте соединение, введя следующее в редакторе и нажав кнопку 'Выполнить запрос HQL' ( image:images/run_hql_query_16.png[title="Кнопка 'Выполнить запрос HQL'"] ) на панели инструментов.
[source,java]
----
@@ -316,7 +343,9 @@ image::images/hibernate-hqleditor1.png[title="Мастер создания фа
select film0_.film_id as col_0_0_ from sakila.film film0_
----
-5. Введите следующий запрос на извлечение из таблицы "Film" записей, в которых идентификатор фильма находится между 100 и 200.
+
+[start=5]
+. Введите следующий запрос на извлечение из таблицы "Film" записей, в которых идентификатор фильма находится между 100 и 200.
[source,java]
----
@@ -326,7 +355,9 @@ from Film as film where film.filmId between 100 and 200
В окне результата отобразится список записей. Теперь, после подтверждения правильности получаемых после выполнения запроса результатов, можно использовать запрос в служебном классе.
-6. Добавьте следующий метод ``getFilmTitles`` к ``FilmHelper.java`` для извлечения фильмов с идентификатором, находящимся в определенном диапазоне, ограниченном переменными ``startID`` и ``endID`` .
+
+[start=6]
+. Добавьте следующий метод ``getFilmTitles`` к ``FilmHelper.java`` для извлечения фильмов с идентификатором, находящимся в определенном диапазоне, ограниченном переменными ``startID`` и ``endID`` .
[source,java]
----
@@ -343,7 +374,9 @@ public List getFilmTitles(int startID, int endID) {
return filmList;
}
----
-7. Добавьте следующий метод ``getActorsByID`` для извлечения актеров, задействованных в определенном фильме. Для создания запроса в этом методе в качестве входной переменной используется ``filmId`` .
+
+[start=7]
+. Добавьте следующий метод ``getActorsByID`` для извлечения актеров, задействованных в определенном фильме. Для создания запроса в этом методе в качестве входной переменной используется ``filmId`` .
[source,java]
----
@@ -362,7 +395,9 @@ public List getActorsByID(int filmId){
return actorList;
}
----
-8. Исправьте операторы импорта и сохраните измененные данные.
+
+[start=8]
+. Исправьте операторы импорта и сохраните измененные данные.
После исправления параметров импорта выберите ``java.util.List`` и ``org.hibernate.Query`` .
@@ -390,7 +425,9 @@ public Category getCategoryByID(int filmId){
return categoryList.get(0);
}
----
-2. Добавьте следующий метод для извлечения отдельного фильма согласно ``filmId`` .
+
+[start=2]
+. Добавьте следующий метод для извлечения отдельного фильма согласно ``filmId`` .
[source,java]
----
@@ -410,7 +447,9 @@ public Film getFilmByID(int filmId){
return film;
}
----
-3. Добавьте следующий метод для извлечения языка фильма согласно ``langId`` .
+
+[start=3]
+. Добавьте следующий метод для извлечения языка фильма согласно ``langId`` .
[source,java]
----
@@ -430,7 +469,9 @@ public String getLangByID(int langId){
return language.getName();
}
----
-4. Сохраните изменения.
+
+[start=4]
+. Сохраните изменения.
== Создание управляемого компонента JSF
@@ -445,9 +486,15 @@ public String getLangByID(int langId){
Имя управляемого компонента ``filmController`` используется в качестве значения для ``inputText`` и ``commandButton`` на странице JSF ``index.xhtml`` во время вызова методов в компоненте.
-4. Выберите *dvdrental* в качестве пакета.
-5. Введите *filmController* в качестве имени, используемого для управляемого компонента.
-6. Установите для параметра "Контекст" значение "Сеанс". Нажмите кнопку 'Готово'.
+
+[start=4]
+. Выберите *dvdrental* в качестве пакета.
+
+[start=5]
+. Введите *filmController* в качестве имени, используемого для управляемого компонента.
+
+[start=6]
+. Установите для параметра "Контекст" значение "Сеанс". Нажмите кнопку 'Готово'.
image::images/hib-newmanagedbean.png[title="Мастер создания новых управляемых компонентов JSF"]
@@ -490,7 +537,9 @@ public class FilmController {
private int selectedItemIndex;*
}
----
-2. Добавьте следующий код (выделенный полужирным шрифтом) для создания экземпляра FilmController и извлечения фильмов.
+
+[start=2]
+. Добавьте следующий код (выделенный полужирным шрифтом) для создания экземпляра FilmController и извлечения фильмов.
[source,java]
----
@@ -528,7 +577,9 @@ public class FilmController {
filmTitles = null;
}*
----
-3. Добавьте следующие методы, используемые для отображения таблицы и перехода к страницам.* public boolean isHasNextPage() {
+
+[start=3]
+. Добавьте следующие методы, используемые для отображения таблицы и перехода к страницам.* public boolean isHasNextPage() {
if (endId + pageSize <= recordCount) {
return true;
}
@@ -572,7 +623,9 @@ public class FilmController {
Методы, возвращающие "index" или "browse", запрашивают обработчик переходов JSF для попытки открытия страницы под именем ``index.xhtml`` или ``browse.xhtml`` . Спецификация JSF 2.0 допускает использование правила неявных переходов в приложениях, использующих технологию Facelets. В таком приложении правила переходов не настраиваются в ``faces-config.xml`` . Вместо этого обработчик переходов пытается найти подходящую страницу в приложении.
-4. Добавьте следующие методы для обращения к служебному классу в целях извлечения дополнительных данных о фильме.* public String getLanguage() {
+
+[start=4]
+. Добавьте следующие методы для обращения к служебному классу в целях извлечения дополнительных данных о фильме.* public String getLanguage() {
int langID = current.getLanguageByLanguageId().getLanguageId().intValue();
String language = helper.getLangByID(langID);
return language;
@@ -601,7 +654,9 @@ public class FilmController {
----
-5. Исправьте операторы импорта (CTRL+SHIFT+I) и сохраните измененные данные.
+
+[start=5]
+. Исправьте операторы импорта (CTRL+SHIFT+I) и сохраните измененные данные.
Можно использовать автозавершение кода в редакторе, упрощающее ввод кода.
@@ -640,7 +695,9 @@ public class FilmController {
</h:body>
----
-5. Измените элемент ``<ui:insert>`` для изменения созданного по умолчанию имени на "body".
+
+[start=5]
+. Измените элемент ``<ui:insert>`` для изменения созданного по умолчанию имени на "body".
[source,html]
----
@@ -649,7 +706,9 @@ public class FilmController {
<ui:insert name="*body*">Content</ui:insert>
</div>
----
-6. Сохраните изменения.
+
+[start=6]
+. Сохраните изменения.
Содержимое, заключенное в элементе ``<ui:define name="body">`` в файлах ``index.xhtml`` и ``browse.xhtml`` , будет вставлено в местоположение, определенное в шаблоне с помощью `` <ui:insert name="body">Content</ui:insert>`` .
@@ -676,7 +735,9 @@ public class FilmController {
</h:body>
</html>
----
-2. Измените страницу для использования элементов JSF ``<ui:composition>`` и ``<ui:define>`` и добавьте элемент ``<h:form>`` .
+
+[start=2]
+. Измените страницу для использования элементов JSF ``<ui:composition>`` и ``<ui:define>`` и добавьте элемент ``<h:form>`` .
[source,xml]
----
@@ -698,7 +759,9 @@ public class FilmController {
Элементы ``<ui:composition>`` и ``<ui:define>`` используются в сочетании с созданным шаблоном страницы. Элемент ``<ui:composition>`` ссылается на местоположение шаблона, используемого этой страницей. Элемент ``<ui:define>`` ссылается на позицию в шаблоне, занятую вложенным кодом.
-3. Добавьте следующие ссылки перехода, вызывающие методы ``next`` и ``previous`` в управляемом компоненте JSF.
+
+[start=3]
+. Добавьте следующие ссылки перехода, вызывающие методы ``next`` и ``previous`` в управляемом компоненте JSF.
[source,xml]
----
@@ -710,7 +773,9 @@ public class FilmController {
</h:form>
</ui:define>
----
-4. Добавьте следующий элемент (выделенный полужирным шрифтом) ``dataTable`` для создания таблицы, в которой будут отображены извлеченные элементы.
+
+[start=4]
+. Добавьте следующий элемент (выделенный полужирным шрифтом) ``dataTable`` для создания таблицы, в которой будут отображены извлеченные элементы.
[source,xml]
----
@@ -742,7 +807,9 @@ public class FilmController {
</h:form>
----
-5. Сохраните изменения.
+
+[start=5]
+. Сохраните изменения.
Теперь на начальной странице отображается список названий фильмов из базы данных. Каждая строка в таблице содержит ссылку "Просмотр", вызывающую метод ``prepareView`` в управляемом компоненте. Метод ``prepareView`` возвращает "browse" и открывает файл ``browse.xhtml`` .
@@ -757,12 +824,22 @@ public class FilmController {
1. Щелкните узел проекта DVDStore правой кнопкой мыши в окне "Проекты" и выберите команду "Создать" > "Другое".
2. Выберите "Клиент шаблона Facelets" в категории "JavaServer Faces". Нажмите кнопку "Далее".
+
image::images/hib-faceletsclient.png[title="Тип файла клиента шаблона Facelets в мастере создания файлов"]
-3. Введите *browse* в качестве имени файла.
-4. Чтобы найти шаблон для страницы, нажмите кнопку 'Обзор'. В результате откроется диалоговое окно 'Обзор файлов'.
-5. Разверните папку "Веб-страницы" и выберите ``template.xhtml`` . Нажмите "Выбрать файл".
+
+[start=3]
+. Введите *browse* в качестве имени файла.
+
+[start=4]
+. Чтобы найти шаблон для страницы, нажмите кнопку 'Обзор'. В результате откроется диалоговое окно 'Обзор файлов'.
+
+[start=5]
+. Разверните папку "Веб-страницы" и выберите ``template.xhtml`` . Нажмите "Выбрать файл".
+
image::images/hib-browsetemplate.png[title="Выберите шаблон в диалоговом окне 'Обзор файлов'"]
-6. Выберите*<ui:composition>* в качестве созданного тега корня. Нажмите кнопку 'Готово'.
+
+[start=6]
+. Выберите*<ui:composition>* в качестве созданного тега корня. Нажмите кнопку 'Готово'.
При нажатии кнопки "Готово" файл ``browse.xhtml`` открывается в редакторе со следующим кодом.
@@ -786,7 +863,9 @@ image::images/hib-browsetemplate.png[title="Выберите шаблон в д
В новом файле указан файл ``template.xhtml`` , а тег ``<ui:define>`` обладает свойством ``name="body"``
-7. Добавьте следующий код (выделенный полужирным шрифтом) между тегами ``<ui:define>`` для создания формы и вызовите методы в управляемом компоненте "FilmController" для извлечения данных и заполнения формы.
+
+[start=7]
+. Добавьте следующий код (выделенный полужирным шрифтом) между тегами ``<ui:define>`` для создания формы и вызовите методы в управляемом компоненте "FilmController" для извлечения данных и заполнения формы.
[source,xml]
----
@@ -853,7 +932,9 @@ image::images/hib-browsetemplate.png[title="Выберите шаблон в д
Файлы ``browse.xhtml`` и ``index.xhtml`` используют один и тот же шаблон страницы.
-8. Сохраните изменения.
+
+[start=8]
+. Сохраните изменения.
== Выполнение проекта
@@ -865,7 +946,9 @@ image::images/hib-browsetemplate.png[title="Выберите шаблон в д
Все измененные файлы сохраняются, приложение собирается и развертывается на сервере приложений. Открывается окно браузера, в котором открывается URL-адрес ``http://localhost:8080/DVDStore/`` , где отображается список фильмов.
image::images/hib-browser1.png[title="Снимок браузера, в котором отображается список фильмов на странице индекса"]
-2. В браузере нажмите "Просмотр" для загрузки файла ``browse.xhtml`` для просмотра дополнительных сведений о фильме.
+
+[start=2]
+. В браузере нажмите "Просмотр" для загрузки файла ``browse.xhtml`` для просмотра дополнительных сведений о фильме.
=== Загрузка проекта решения
@@ -878,14 +961,24 @@ image::images/hib-browser1.png[title="Снимок браузера, в кото
2. В диалоговом окне "Проверка" введите следующий URL-адрес репозитория:
``https://svn.netbeans.org/svn/samples~samples-source-code``
Нажмите кнопку "Далее".
-3. Нажмите кнопку "Обзор" для открытия диалогового окна "Обзор папок репозитория".
-4. Разверните корневой узел и выберите *samples/javaee/DVDStoreEE6*. Нажмите кнопку "ОК".
-5. Укажите локальную папку для исходных файлов.
-6. Нажмите кнопку 'Готово'.
+
+[start=3]
+. Нажмите кнопку "Обзор" для открытия диалогового окна "Обзор папок репозитория".
+
+[start=4]
+. Разверните корневой узел и выберите *samples/javaee/DVDStoreEE6*. Нажмите кнопку "ОК".
+
+[start=5]
+. Укажите локальную папку для исходных файлов.
+
+[start=6]
+. Нажмите кнопку 'Готово'.
После нажатия кнопки "Готово" среда IDE инициализирует локальную папку в качестве репозитория Subversion и выполняет проверку исходных файлов проекта на выходе.
-7. Щелкните команду "Открыть проект" в диалоговом окне, которое появится после завершения проверки.
+
+[start=7]
+. Щелкните команду "Открыть проект" в диалоговом окне, которое появится после завершения проверки.
*Примечания.* Дополнительные сведения об установке Subversion см. в разделе link:../ide/subversion.html#settingUp[+Настройка Subversion+] в link:../ide/subversion.html[+Руководстве по Subversion в IDE NetBeans+].
diff --git a/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_zh_CN.asciidoc
index fb0452a..c1b6d61 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/hibernate-webapp_zh_CN.asciidoc
@@ -74,11 +74,14 @@ image::images/netbeans-stamp-74-73-72.png[title="此页上的内容适用于 Net
2. 安装插件后，在 "Services"（服务）窗口展开 "Databases"（数据库）节点以启动 MySQL 数据库，右键单击 MySQL 服务器节点并选择 "Start"（启动）。
3. 右键单击 MySQL 服务器节点并选择 "Create Database"（创建数据库）。
4. 在 "Create MySQL Database"（创建 MySQL 数据库）对话框的 "New Database Name"（新数据库名称）下拉列表中选择 "Sakila" 数据库。单击 "OK"（确定）。
+
image::images/create-sakila-mysql.png[title=""Create MySQL Database"（创建 MySQL 数据库）对话框的屏幕快照"]
单击 "OK"（确定），MySQL 服务器节点下随即出现一个 Sakila 节点。
-5. 右键单击 "Sakila" 节点，然后选择 "Connect"（连接）。
+
+[start=5]
+. 右键单击 "Sakila" 节点，然后选择 "Connect"（连接）。
单击 "Connect"（连接）后，"Databases"（数据库）节点下面将列出 Sakila 数据库连接节点 ( ``jdbc:mysql://localhost:3306/sakila [_username_ on Default]`` )。打开连接时，可通过展开该连接节点查看数据库中数据。
@@ -93,10 +96,18 @@ image::images/create-sakila-mysql.png[title=""Create MySQL Database"（创建 My
（对于本教程，没有理由将项目库复制到指定文件夹，因为您将需要与其他用户共享库）。
-4. 将服务器设置为 "GlassFish Server"，并将 Java EE 版本设置为 "Java EE 6 Web" 或 "Java EE 7 Web"。单击 "Next"（下一步）。
-5. 选中 "JavaServer Faces" 复选框并使用默认 JSF 2.x 库。
-6. 在框架列表中选中 "Hibernate" 复选框。
-7. 从 "Database Connection"（数据库连接）下拉列表中选择 sakila 数据库。单击 "Finish"（完成）。
+
+[start=4]
+. 将服务器设置为 "GlassFish Server"，并将 Java EE 版本设置为 "Java EE 6 Web" 或 "Java EE 7 Web"。单击 "Next"（下一步）。
+
+[start=5]
+. 选中 "JavaServer Faces" 复选框并使用默认 JSF 2.x 库。
+
+[start=6]
+. 在框架列表中选中 "Hibernate" 复选框。
+
+[start=7]
+. 从 "Database Connection"（数据库连接）下拉列表中选择 sakila 数据库。单击 "Finish"（完成）。
*注：* 如果向导的 "Frameworks"（框架）面板中没有 sakila 数据库这一选项，请查看该连接是否列在 "Services"（服务）窗口的 "Databases"（数据库）节点下。如果此处没有该连接，则需要创建数据库连接。
@@ -119,12 +130,23 @@ image::images/hib-libraries.png[title="显示 Hibernate 库的 "Projects"（项
2. 在多视图 XML 编辑器中，展开 "Configuration Properties"（可选属性）下的 "Configuration Properties"（配置属性）节点。
3. 单击 "Add"（添加）以打开 "Add Hibernate Property"（添加 Hibernate 属性）对话框。
4. 在此对话框中，选择 ``hibernate.show_sql`` 属性并将值设置为 ``true`` 。这将启用 SQL 语句的调试日志记录。
+
image::images/add-property-showsql.png[title="显示 hibernate.show_sql 属性的设置值的 "Add Hibernate Property"（添加 Hibernate 属性）对话框"]
-5. 展开 "Miscellaneous Properties"（其他属性）节点并单击 "Add"（添加）。
-6. 在此对话框中，选择 ``properties hibernate.current_session_context_class`` 并将值设置为 ``thread`` 以启用 Hibernate 的自动会话上下文管理。
+
+[start=5]
+. 展开 "Miscellaneous Properties"（其他属性）节点并单击 "Add"（添加）。
+
+[start=6]
+. 在此对话框中，选择 ``properties hibernate.current_session_context_class`` 并将值设置为 ``thread`` 以启用 Hibernate 的自动会话上下文管理。
+
image::images/add-property-sessioncontext.png[title="显示为 hibernate.current_session_context_class 属性设置值的 "Add Hibernate Property"（添加 Hibernate 属性）对话框"]
-7. 在 "Miscellaneous Properties"（其他属性）节点下再次单击 "Add"（添加），然后在 "Property Name"（属性名称）下拉列表中选择 ``hibernate.query.factory_class`` 。
-8. 选择 *org.hibernate.hql.classic.ClassicQueryTranslatorFactory* 作为属性值。单击 "OK"（确定）。
+
+[start=7]
+. 在 "Miscellaneous Properties"（其他属性）节点下再次单击 "Add"（添加），然后在 "Property Name"（属性名称）下拉列表中选择 ``hibernate.query.factory_class`` 。
+
+[start=8]
+. 选择 *org.hibernate.hql.classic.ClassicQueryTranslatorFactory* 作为属性值。单击 "OK"（确定）。
+
image::images/add-property-factoryclass.png[title="显示 hibernate.query.factory_class 属性的设置值的 "Add Hibernate Property"（添加 Hibernate 属性）对话框"]
如果单击编辑器中的 XML 标签，则可以在 XML 视图中看到此文件。文件应如下所示（三个新属性以粗体显示）：
@@ -146,7 +168,9 @@ image::images/add-property-factoryclass.png[title="显示 hibernate.query.factor
</session-factory>
</hibernate-configuration>
----
-9. 保存对该文件所做的更改。
+
+[start=9]
+. 保存对该文件所做的更改。
由于不需要再次编辑该文件，因此可以关闭该文件。
@@ -216,6 +240,7 @@ image::images/hibernate-reveng-wizard.png[title="新建 Hibernate 逆向工程
4. 在 "General Settings"（常规设置）选项中选择 *JDK 5 Language Features*（JDK 5 语言功能）。
5. 确保选中了 *Domain Code*（域代码）和 *Hibernate XML Mappings*（Hibernate XML 映射）选项。
6. 选择 *dvdrental* 作为包名。单击 "Finish"（完成）。
+
image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping Files and POJOs"（生成 Hibernate 映射文件和 POJO）向导"]
单击 "Finish"（完成）后，IDE 生成 POJO 和 Hibernate 映射文件，并将字段映射到在 ``hibernate.reveng.xml`` 中指定的列。IDE 也添加映射条目到 ``hibernate.cfg.xml`` 中。
@@ -282,7 +307,9 @@ public class FilmHelper {
}
----
-5. 在编辑器中右键单击并选择 "Fix Imports"（修复导入）（Alt-Shift-I 组合键；在 Mac 上为 ⌘-Shift-I 组合键）以添加任何需要的 import 语句 ( ``org.hibernate.Session`` )，并保存更改。
+
+[start=5]
+. 在编辑器中右键单击并选择 "Fix Imports"（修复导入）（Alt-Shift-I 组合键；在 Mac 上为 ⌘-Shift-I 组合键）以添加任何需要的 import 语句 ( ``org.hibernate.Session`` )，并保存更改。
现在将修改 ``FilmHelper.java`` 以添加查询数据库的方法。
@@ -296,7 +323,7 @@ Film 表包含 1000 条记录，因此检索影片列表的方法应该能够基
1. 在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "Clean and Build"（清理并构建）。
2. 在 "Projects"（项目）窗口中右键单击 ``hibernate.cfg.xml`` 并选择 "Run HQL Query"（运行 HQL 查询）以打开 HQL 查询编辑器。
3. 从工具栏的下拉列表中选择 hibernate.cfg。
-4. 通过在编辑器中键入以下内容并单击工具栏中的 "Run HQL Query"（运行 HQL 查询）按钮 (image::images/run_hql_query_16.png[title=""Run HQL Query"（运行 HQL 查询）按钮"])，测试连接。
+4. 通过在编辑器中键入以下内容并单击工具栏中的 "Run HQL Query"（运行 HQL 查询）按钮 (image:images/run_hql_query_16.png[title=""Run HQL Query"（运行 HQL 查询）按钮"])，测试连接。
[source,java]
----
@@ -316,7 +343,9 @@ image::images/hibernate-hqleditor1.png[title=""Generate Hibernate Mapping Files
select film0_.film_id as col_0_0_ from sakila.film film0_
----
-5. 键入以下查询在 film id 为 100 到 200 的 Film 表中检索记录。
+
+[start=5]
+. 键入以下查询在 film id 为 100 到 200 的 Film 表中检索记录。
[source,java]
----
@@ -326,7 +355,9 @@ from Film as film where film.filmId between 100 and 200
结果窗口中显示了一个记录列表。测试过该查询可返回期待的结果后，可在 helper 类中使用该查询。
-6. 将下面的 ``getFilmTitles`` 方法添加到 ``FilmHelper.java`` 以检索影片，其中 film id 介于变量 ``startID`` 和 ``endID`` 所指定的特定范围之间。
+
+[start=6]
+. 将下面的 ``getFilmTitles`` 方法添加到 ``FilmHelper.java`` 以检索影片，其中 film id 介于变量 ``startID`` 和 ``endID`` 所指定的特定范围之间。
[source,java]
----
@@ -343,7 +374,9 @@ public List getFilmTitles(int startID, int endID) {
return filmList;
}
----
-7. 添加下面的 ``getActorsByID`` 方法以检索特定影片中的演员。该方法将 ``filmId`` 作为输入变量以构造查询。
+
+[start=7]
+. 添加下面的 ``getActorsByID`` 方法以检索特定影片中的演员。该方法将 ``filmId`` 作为输入变量以构造查询。
[source,java]
----
@@ -362,7 +395,9 @@ public List getActorsByID(int filmId){
return actorList;
}
----
-8. 修复导入并保存更改。
+
+[start=8]
+. 修复导入并保存更改。
修复导入时，要选择 ``java.util.List`` 和 ``org.hibernate.Query`` 。
@@ -390,7 +425,9 @@ public Category getCategoryByID(int filmId){
return categoryList.get(0);
}
----
-2. 添加以下方法以根据 ``filmId`` 检索单个影片。
+
+[start=2]
+. 添加以下方法以根据 ``filmId`` 检索单个影片。
[source,java]
----
@@ -410,7 +447,9 @@ public Film getFilmByID(int filmId){
return film;
}
----
-3. 添加以下方法以根据 ``langId`` 检索影片语言。
+
+[start=3]
+. 添加以下方法以根据 ``langId`` 检索影片语言。
[source,java]
----
@@ -430,7 +469,9 @@ public String getLangByID(int langId){
return language.getName();
}
----
-4. 保存所做的更改。
+
+[start=4]
+. 保存所做的更改。
== 创建 JSF 受管 Bean
@@ -445,9 +486,15 @@ public String getLangByID(int langId){
在调用受管 Bean 中的方法时，将使用 Bean 名称 ``filmController`` 作为 JSF 页面 ``index.xhtml`` 中的 ``inputText`` 和 ``commandButton`` 的值。
-4. 选择 *dvdrental* 作为包。
-5. 键入 *filmController* 作为将用于受管 Bean 的名称。
-6. 将 "Scope"（范围）设置为 "Session"（会话）。单击 "Finish"（完成）。
+
+[start=4]
+. 选择 *dvdrental* 作为包。
+
+[start=5]
+. 键入 *filmController* 作为将用于受管 Bean 的名称。
+
+[start=6]
+. 将 "Scope"（范围）设置为 "Session"（会话）。单击 "Finish"（完成）。
image::images/hib-newmanagedbean.png[title="新建 JSF 受管 Bean 向导"]
@@ -490,7 +537,9 @@ public class FilmController {
private int selectedItemIndex;*
}
----
-2. 添加以下代码（以粗体显示），创建 FilmController 实例并检索影片。
+
+[start=2]
+. 添加以下代码（以粗体显示），创建 FilmController 实例并检索影片。
[source,java]
----
@@ -528,7 +577,9 @@ public class FilmController {
filmTitles = null;
}*
----
-3. 添加用于显示表和导航页面的以下方法。* public boolean isHasNextPage() {
+
+[start=3]
+. 添加用于显示表和导航页面的以下方法。* public boolean isHasNextPage() {
if (endId + pageSize <= recordCount) {
return true;
}
@@ -572,7 +623,9 @@ public class FilmController {
返回 "index" 或 "browse" 的方法将提示 JSF 导航处理程序尝试打开名为 ``index.xhtml`` 或 ``browse.xhtml`` 的页面。JSF 2.0 规范允许在使用 Facelets 技术的应用程序中使用隐式导航规则。此应用程序中，没有在 ``faces-config.xml`` 中配置任何导航规则。导航处理程序将尝试在应用程序中查找合适的页面。
-4. 添加以下方法以访问 helper 类，以便检索其他影片详细信息。* public String getLanguage() {
+
+[start=4]
+. 添加以下方法以访问 helper 类，以便检索其他影片详细信息。* public String getLanguage() {
int langID = current.getLanguageByLanguageId().getLanguageId().intValue();
String language = helper.getLangByID(langID);
return language;
@@ -601,7 +654,9 @@ public class FilmController {
----
-5. 修复导入（Ctrl-Shift-I 组合键）并保存更改。
+
+[start=5]
+. 修复导入（Ctrl-Shift-I 组合键）并保存更改。
您可以在编辑器中使用代码完成以帮助键入代码。
@@ -640,7 +695,9 @@ public class FilmController {
</h:body>
----
-5. 修改 ``<ui:insert>`` 元素，以将生成的默认名称更改为 "body"。
+
+[start=5]
+. 修改 ``<ui:insert>`` 元素，以将生成的默认名称更改为 "body"。
[source,html]
----
@@ -649,7 +706,9 @@ public class FilmController {
<ui:insert name="*body*">Content</ui:insert>
</div>
----
-6. 保存所做的更改。
+
+[start=6]
+. 保存所做的更改。
``index.xhtml`` 和 ``browse.xhtml`` 中的 ``<ui:define name="body">`` 元素包含的内容将插入到使用模板中的 ``<ui:insert name="body">Content</ui:insert>`` 指定的位置。
@@ -676,7 +735,9 @@ public class FilmController {
</h:body>
</html>
----
-2. 修改该页面以使用 JSF ``<ui:composition>`` 和 ``<ui:define>`` 元素，并添加 ``<h:form>`` 元素。
+
+[start=2]
+. 修改该页面以使用 JSF ``<ui:composition>`` 和 ``<ui:define>`` 元素，并添加 ``<h:form>`` 元素。
[source,xml]
----
@@ -698,7 +759,9 @@ public class FilmController {
``<ui:composition>`` 和 ``<ui:define>`` 元素将与所创建的页面模板结合使用。 ``<ui:composition>`` 元素引用此页面将使用的模板的位置。 ``<ui:define>`` 元素引用包含的代码将占用的模板位置。
-3. 添加以下导航链接以调用 JSF 受管 Bean 中的 ``previous`` 和 ``next`` 方法。
+
+[start=3]
+. 添加以下导航链接以调用 JSF 受管 Bean 中的 ``previous`` 和 ``next`` 方法。
[source,xml]
----
@@ -710,7 +773,9 @@ public class FilmController {
</h:form>
</ui:define>
----
-4. 添加以下 ``dataTable`` 元素（以粗体显示）来生成表，以便显示检索到的条目。
+
+[start=4]
+. 添加以下 ``dataTable`` 元素（以粗体显示）来生成表，以便显示检索到的条目。
[source,xml]
----
@@ -742,7 +807,9 @@ public class FilmController {
</h:form>
----
-5. 保存所做的更改。
+
+[start=5]
+. 保存所做的更改。
现在，index 页面将显示数据库中的影片名称列表。表中的每一行都包含 "View" 链接，用于调用受管 Bean 中的 ``prepareView`` 方法。 ``prepareView`` 方法返回 "browse" 并打开 ``browse.xhtml`` 。
@@ -757,12 +824,22 @@ public class FilmController {
1. 在 "Projects"（项目）窗口中右键单击 DVDStore 项目节点，然后选择 "New"（新建）> "Other"（其他）。
2. 在 "JavaServer Faces" 类别中选择 "Facelets Template Client"（Facelets 模板客户端）。单击 "Next"（下一步）。
+
image::images/hib-faceletsclient.png[title="新建文件向导中的 "Facelets Template Client"（Facelets 模板客户端）文件类型"]
-3. 键入 *browse* 作为文件名。
-4. 通过单击 "Browse"（浏览）打开 "Browse Files"（浏览文件）对话框，以查找页面模板。
-5. 展开 "Web Pages"（Web 页）文件夹并选择 ``template.xhtml`` 。单击 "Select File"（选择文件）。
+
+[start=3]
+. 键入 *browse* 作为文件名。
+
+[start=4]
+. 通过单击 "Browse"（浏览）打开 "Browse Files"（浏览文件）对话框，以查找页面模板。
+
+[start=5]
+. 展开 "Web Pages"（Web 页）文件夹并选择 ``template.xhtml`` 。单击 "Select File"（选择文件）。
+
image::images/hib-browsetemplate.png[title="在 "Browse Files"（浏览文件）对话框中选择模板"]
-6. 选择 *<ui:composition>* 作为生成的根标记。单击 "Finish"（完成）。
+
+[start=6]
+. 选择 *<ui:composition>* 作为生成的根标记。单击 "Finish"（完成）。
单击 "Finish"（完成），此时 ``browse.xhtml`` 文件将在编辑器中打开，其中包含以下代码。
@@ -786,7 +863,9 @@ image::images/hib-browsetemplate.png[title="在 "Browse Files"（浏览文件）
您可以看到新文件指定了 ``template.xhtml`` 文件，并且 ``<ui:define>`` 标记具有属性 ``name="body"``
-7. 在 ``<ui:define>`` 标记之间添加以下代码（以粗体显示）以创建窗体，并调用受管 Bean FilmController 中的方法以检索数据和填充窗体。
+
+[start=7]
+. 在 ``<ui:define>`` 标记之间添加以下代码（以粗体显示）以创建窗体，并调用受管 Bean FilmController 中的方法以检索数据和填充窗体。
[source,xml]
----
@@ -853,7 +932,9 @@ image::images/hib-browsetemplate.png[title="在 "Browse Files"（浏览文件）
您可以看到 ``browse.xhtml`` 和 ``index.xhtml`` 使用相同的页面模板。
-8. 保存所做的更改。
+
+[start=8]
+. 保存所做的更改。
== 运行项目
@@ -865,7 +946,9 @@ image::images/hib-browsetemplate.png[title="在 "Browse Files"（浏览文件）
IDE 保存所有更改过的文件，构建应用程序并将应用程序部署到服务器。IDE 将打开浏览器窗口并指向 URL ``http://localhost:8080/DVDStore/`` 以显示影片列表。
image::images/hib-browser1.png[title="在索引页上显示影片列表的浏览器的屏幕快照"]
-2. 在浏览器中，单击 "View" 加载 ``browse.xhtml`` 以查看影片详细信息。
+
+[start=2]
+. 在浏览器中，单击 "View" 加载 ``browse.xhtml`` 以查看影片详细信息。
=== 下载解决方案项目
@@ -878,14 +961,24 @@ image::images/hib-browser1.png[title="在索引页上显示影片列表的浏览
2. 在 "Checkout"（检出）对话框中，输入以下资源库 URL：
``https://svn.netbeans.org/svn/samples~samples-source-code``
单击 "Next"（下一步）。
-3. 单击 "Browse"（浏览）以打开 "Browse Repostiory Folders"（浏览资源库文件夹）对话框。
-4. 展开根目录节点，然后选择 *samples/javaee/DVDStoreEE6*。单击 "OK"（确定）。
-5. 指定用于存储源代码的 "Local Folder"（本地文件夹）。
-6. 单击 "Finish"（完成）。
+
+[start=3]
+. 单击 "Browse"（浏览）以打开 "Browse Repostiory Folders"（浏览资源库文件夹）对话框。
+
+[start=4]
+. 展开根目录节点，然后选择 *samples/javaee/DVDStoreEE6*。单击 "OK"（确定）。
+
+[start=5]
+. 指定用于存储源代码的 "Local Folder"（本地文件夹）。
+
+[start=6]
+. 单击 "Finish"（完成）。
单击 "Finish"（完成），此时 IDE 会将本地文件夹初始化为 Subversion 资源库，并检出项目源代码。
-7. 在完成检出操作后将会显示一个对话框，在该对话框中单击 "Open Project"（打开项目）。
+
+[start=7]
+. 在完成检出操作后将会显示一个对话框，在该对话框中单击 "Open Project"（打开项目）。
*注：*有关安装 Subversion 的更多信息，请参见 link:../ide/subversion.html[+NetBeans IDE 中的 Subversion 指南+]中有关link:../ide/subversion.html#settingUp[+设置 Subversion+] 的部分。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo.asciidoc
index 7476b0c..f13a635 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo.asciidoc
@@ -50,7 +50,9 @@ image::images/netbeans-stamp-80-74-73.png[title="Content on this page applies to
_or_
Tomcat servlet container |Open Source Edition 3.1.x or 4.x
_ _
-7.x or 8.x
+
+[start=7]
+.x or 8.x
|link:http://www.dojotoolkit.org/download[+Dojo Toolkit+] |version 1.8.x or later
@@ -63,6 +65,7 @@ _ _
* You will require an Internet connection to complete several of the steps included in this tutorial.
* The NetBeans IDE Java EE download bundle enables you to optionally install and register the GlassFish Server Open Source Edition with the IDE. You require a server to simulate client-server communication in this tutorial.
* The completed project looks as follows:
+
image::images/dojo-tree-complete.png[title="Completed exercise viewed in a browser"]
@@ -72,7 +75,7 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
Begin by opening the sample project in the IDE. When the project is open, expand the project node in the Projects window and examine the Dojo resources and libraries that are used in the project.
1. Download the tutorial's link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip[+Dojo sample project+] to a location on your computer.
-2. Click the Open Project button ( image::images/open-project-btn.png[] ) in the IDE toolbar to open the Open Project dialog box.
+2. Click the Open Project button ( image:images/open-project-btn.png[] ) in the IDE toolbar to open the Open Project dialog box.
3. In the Open Project dialog, locate the Dojo sample project on your computer and click Open Project.
When you open the `DojoTreeSample` project in the IDE you will see that the project is badged with an error badge to indicate that a reference problem exists.
@@ -83,7 +86,9 @@ The reference problem exists because the Java classes used in the project (`Trib
*Note: *The Projects window (Ctrl-1; ⌘-1 on Mac) provides a _logical view_ of important project contents, and is the main entry point to your project sources. The Files window (Ctrl-2; ⌘-2 on Mac) shows a _directory-based view_ of your projects, and includes any files and folders that are not displayed in the Projects Window.
-4. Expand the `Web Pages` node in the Projects window.
+
+[start=4]
+. Expand the `Web Pages` node in the Projects window.
You can see that a ``resources`` folder is listed under the `Web Pages` node in the Projects window. The ``resources`` folder contains the Dojo core and Dijit libraries from the link:http://www.dojotoolkit.org/download[+Dojo toolkit+]. In order to implement Dojo's Tree widget, you essentially require two components: the `ItemFileReadStore` module from the core library and the `Tree` widget itself contained in the Dijit library.
@@ -92,7 +97,9 @@ You can see that a ``resources`` folder is listed under the `Web Pages` node i
*Note.* The `DojoX` library is not required for this project.
-5. Expand the `Libraries` node in the Projects window and confirm that all the required libraries are on the classpath.
+
+[start=5]
+. Expand the `Libraries` node in the Projects window and confirm that all the required libraries are on the classpath.
*Note.* Depending on your configuration, you might need to resolve a missing server problem. If you see a ``<Missing Java EE Server>`` node under the `Libraries` node, right-click the project node and choose Resolve Missing Server Problem in the popup menu.
@@ -130,7 +137,9 @@ In order to use resources from the toolkit, you need to link to the `dojo.js` fi
----
* `link:http://dojotoolkit.org/reference-guide/1.6/djConfig.html[+djConfig+]` allows you to override global settings that control how Dojo operates (e.g., using the `parseOnLoad` property).
* `parseOnLoad` set to `true` ensures that widgets and page mark-up are parsed as the page is loaded.
-3. Add a link to the `nihilo` link:http://docs.dojocampus.org/dijit/themes[+sample theme+] contained in the toolkit by adding the following `@import` statement (in bold) between the `<head>` tags and beneath the `<script>` tags that you added.
+
+[start=3]
+. Add a link to the `nihilo` link:http://docs.dojocampus.org/dijit/themes[+sample theme+] contained in the toolkit by adding the following `@import` statement (in bold) between the `<head>` tags and beneath the `<script>` tags that you added.
[source,xml]
----
@@ -151,7 +160,9 @@ In order to use resources from the toolkit, you need to link to the `dojo.js` fi
The `nihilo` theme is included by default in the toolkit. You can expand the `dijit/themes` folder in the Projects window to see other sample themes that are provided by default.
-4. Add the following class selector to the `<body>` tag of the page to specify the name of the theme you are using. When you do this, any Dojo widget which has been loaded into the page will be rendered using the styles associated with the theme.
+
+[start=4]
+. Add the following class selector to the `<body>` tag of the page to specify the name of the theme you are using. When you do this, any Dojo widget which has been loaded into the page will be rendered using the styles associated with the theme.
[source,java]
----
@@ -181,7 +192,9 @@ After you have linked to `dojo.js`, you can begin adding code to utilize Dojo's
----
* `link:http://docs.dojocampus.org/dojo/data/ItemFileReadStore[+dojo.data.ItemFileReadStore+]`: reads the JSON structured contents from an HTTP endpoint (In <<prepareServlet,Preparing a Servlet to Initiate a JSON Response>>, you'll implement a servlet for this purpose.) and stores all the items in-memory for simple and quick access.
* `link:http://docs.dojocampus.org/dijit/Tree[+dijit.Tree+]`: The Tree widget that provides a view of the JSON data retrieved from `ItemFileReadStore`.
-2. Add the following code (in bold) to add an `ItemFileReadStore` and `Tree` widget.
+
+[start=2]
+. Add the following code (in bold) to add an `ItemFileReadStore` and `Tree` widget.
[source,html]
----
@@ -218,26 +231,42 @@ In this tutorial, the logic that extracts the ArrayList sample data has been pre
At this point, you want to compile these sources and create a Java archive (JAR file) which you will add to the `DojoTreeSample` project.
-3. Click the New Project button ( image::images/new-project-btn.png[] ) in the toolbar to open the New Project wizard.
-4. In the New Project wizard, select the Java Class Library project template in the Java category. Click Next.
-5. In the Name and Location panel of the Java Class Library wizard, type *`json`* as the Project Name. Click Finish.
+
+[start=3]
+. Click the New Project button ( image:images/new-project-btn.png[] ) in the toolbar to open the New Project wizard.
+
+[start=4]
+. In the New Project wizard, select the Java Class Library project template in the Java category. Click Next.
+
+[start=5]
+. In the Name and Location panel of the Java Class Library wizard, type *`json`* as the Project Name. Click Finish.
When you click Finish the new project is created and opens in the Projects window.
You now need to copy the JSON sources that you download to the ``json`` project in the same way that you copied the Dojo toolkit resources to the ``DojoTreeSample`` project.
-6. Extract the `JSON-java-master.zip` archive and copy (Ctrl-C; ⌘-C on Mac) the Java source files that are in the root folder.
+
+[start=6]
+. Extract the `JSON-java-master.zip` archive and copy (Ctrl-C; ⌘-C on Mac) the Java source files that are in the root folder.
*Note.* You do not need to copy the `zip` folder and its contents that is also located in the root folder of the extracted archive.
-7. In the IDE's Projects window, right-click the Source Packages node and choose New > Java Package in the popup menu.
-8. Type *json* as the Package Name. Click Finish.
-9. Right-click the `json` source package and choose Paste in the popup menu.
+
+[start=7]
+. In the IDE's Projects window, right-click the Source Packages node and choose New > Java Package in the popup menu.
+
+[start=8]
+. Type *json* as the Package Name. Click Finish.
+
+[start=9]
+. Right-click the `json` source package and choose Paste in the popup menu.
When you expand the package you can see the ``json`` sources.
image::images/proj-win-json-sources.png[title="Sources are now contained in the new 'json' project"]
-10. Right-click the `json` project node in the Projects window and choose Clean and Build to build the project.
+
+[start=10]
+. Right-click the `json` project node in the Projects window and choose Clean and Build to build the project.
When you build your project, all Java classes get compiled into `.class` files. The IDE creates a `build` folder to contain compiled classes, as well as a `dist` folder that contains a JAR file for the project. These folders can be viewed from the IDE's Files window.
@@ -247,7 +276,9 @@ image::images/files-win-compiled-classes.png[title="Compiled sources can be view
Now that you have the `json.jar` file, you can resolve the reference problems that the `DojoTreeSample` project has been exhibiting since you opened it.
-11. In the Projects window, right-click the `DojoTreeSample`'s Libraries node and choose Add JAR/Folder. Then, in the dialog, navigate to the location of the `json` project's `dist` folder and select the `json.jar` file.
+
+[start=11]
+. In the Projects window, right-click the `DojoTreeSample`'s Libraries node and choose Add JAR/Folder. Then, in the dialog, navigate to the location of the `json` project's `dist` folder and select the `json.jar` file.
Alternatively, you can right-click the Libraries node and choose Add Project in the popup menu and locate the `json` project in the Add Project dialog box.
@@ -257,8 +288,12 @@ image::images/libraries-json-jar.png[title="JAR file is referenced by the projec
*Note: *Although the `json.jar` file is listed under the project's `Libraries` node, it is referenced from its original location - not copied and added to the project (e.g., you won't be able to locate it under the `DojoTreeSample` project in the Files window). Therefore, if you change the location of the JAR file, the reference will be broken.
-12. Expand the `Source Packages` > `dojo.indians` package and double-click the `Tribe` and `TribeDataManager` classes to open them in the editor.
-13. Add necessary import statements to both classes. In each class, right-click in the editor and choose Fix Imports.
+
+[start=12]
+. Expand the `Source Packages` > `dojo.indians` package and double-click the `Tribe` and `TribeDataManager` classes to open them in the editor.
+
+[start=13]
+. Add necessary import statements to both classes. In each class, right-click in the editor and choose Fix Imports.
The `Tribe` class requires the following imports:
@@ -280,7 +315,9 @@ import dojo.org.json.JSONObject;
Note that the APIs for JSON classes are also provided at link:http://json.org/java[+http://json.org/java+] - you may want to keep this page open as you later examine code in `Tribe` and `TribeDataManager`.
-14. Examine the ArrayList in `TribeDataManager`. The ArrayList is a collection of `Tribe` objects. Looking at the first element of the ArrayList, you can see a new `Tribe` object created and added to the list:
+
+[start=14]
+. Examine the ArrayList in `TribeDataManager`. The ArrayList is a collection of `Tribe` objects. Looking at the first element of the ArrayList, you can see a new `Tribe` object created and added to the list:
[source,java]
----
@@ -288,7 +325,9 @@ Note that the APIs for JSON classes are also provided at link:http://json.org/ja
indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));
----
Each `Tribe` object captures three points of information: _tribe_, _category_, and _region_. The data for this exercise has been taken from Wikipedia's entry on link:http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification[+Native Americans in the United States+]. As you can determine, multiple _tribes_ are classified within a _category_, and numerous categories may be contained within a larger _region_.
-15. Open the `Tribe` class in the editor, and note that it is basically a link:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+], with the exception of the `toJSONObject()` method:
+
+[start=15]
+. Open the `Tribe` class in the editor, and note that it is basically a link:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+], with the exception of the `toJSONObject()` method:
[source,java]
----
@@ -301,8 +340,12 @@ public JSONObject toJSONObject() throws JSONException {
return jo;
}
----
-16. Switch back to `TribeDataManager` (Ctrl-Tab) and examine the methods included in the class. Open the Navigator (Ctrl-7; ⌘-7 on Mac) to view a list of fields and properties contained in the class.
+
+[start=16]
+. Switch back to `TribeDataManager` (Ctrl-Tab) and examine the methods included in the class. Open the Navigator (Ctrl-7; ⌘-7 on Mac) to view a list of fields and properties contained in the class.
+
image::images/dojo-navigator.png[title="Use the Navigator to view class fields and properties"]
+
The most significant method contained therein is `getIndiansAsJSONObject()`. This method scans the ArrayList, processes the data, and returns it in the form of a `JSONObject`. The `String` form of the JSONObject is what is required by Dojo's `ItemFileReadStore`.
[source,java]
@@ -329,9 +372,14 @@ public static JSONObject getIndiansAsJSONObject() throws JSONException {
return jo;
}
----
-17. Open the Javadoc on the `getIndiansAsJSONObject()` method. You can do this by returning to the Navigator (Ctrl-7; ⌘-7 on Mac) and hovering over the method. Otherwise, choose Window > Other > Javadoc from the main menu, then click on the method signature in the editor.
+
+[start=17]
+. Open the Javadoc on the `getIndiansAsJSONObject()` method. You can do this by returning to the Navigator (Ctrl-7; ⌘-7 on Mac) and hovering over the method. Otherwise, choose Window > Other > Javadoc from the main menu, then click on the method signature in the editor.
+
image::images/javadoc-window.png[title="The Javadoc for TribeDataManager provides an example of JSON data"]
-18. Examine the example of JSON data that is provided in the Javadoc. Note that the format of the data conforms to the examples provided in the link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+Dojo documentation+].
+
+[start=18]
+. Examine the example of JSON data that is provided in the Javadoc. Note that the format of the data conforms to the examples provided in the link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+Dojo documentation+].
=== NetBeans IDE's Java Debugger
@@ -339,11 +387,20 @@ public static JSONObject getIndiansAsJSONObject() throws JSONException {
You will implement a servlet that calls the `getIndiansAsJSONObject()` method in the next step. Once you do this, you can perform the following steps to use the IDE's Java debugger to step through the method and examine how the `JSONObject` is formed.
1. Set a breakpoint on the method (click the line number (i.e., line 99) in the left margin of the editor).
+
image::images/debugger-breakpoint.png[title="Use the Java Debugger to step through code"]
-2. Select the ``DojoTreeSample`` project in the Projects window.
-3. Run the debugger (click the Debug Project button ( image::images/debug-btn.png[] ) in the toolbar).
-4. Use the Step Into ( image::images/step-into-btn.png[] ) and Step Over ( image::images/step-over-btn.png[] ) buttons in the toolbar.
-5. Examine variable and expression values in the Local Variables window (Window > Debugging > Variables).
+
+[start=2]
+. Select the ``DojoTreeSample`` project in the Projects window.
+
+[start=3]
+. Run the debugger (click the Debug Project button ( image:images/debug-btn.png[] ) in the toolbar).
+
+[start=4]
+. Use the Step Into ( image:images/step-into-btn.png[] ) and Step Over ( image:images/step-over-btn.png[] ) buttons in the toolbar.
+
+[start=5]
+. Examine variable and expression values in the Local Variables window (Window > Debugging > Variables).
For more information on the Java Debugger, see the following screencasts:
@@ -364,14 +421,19 @@ In the next step, you'll create a servlet which will handle incoming requests by
1. In the Projects window, right-click the `dojo.indians` source package and choose New > Servlet.
2. In the New Servlet wizard, type *`TribeServlet`* for the class name. Confirm that `dojo.indians` is specified as the package. Click Next.
+
image::images/new-servlet-wizard.png[title="Use the New Servlet wizard to create servlets"]
-3. Confirm that the default Servlet Name and URL Patterns values are correct. Click Finish to generate the skeleton class for the servlet.
+
+[start=3]
+. Confirm that the default Servlet Name and URL Patterns values are correct. Click Finish to generate the skeleton class for the servlet.
The function of the servlet is to call the `getIndiansAsJSONObject()` method, and use the data from this method to respond to the client request. In order to prepare a response in JSON format, we have to first set the mime type of the response to JSON format.
*Note.* The wizard will automatically add the servlet name and URL pattern to `web.xml`. Consequently, any requests to the host domain (i.e., `http://localhost:8080/DojoTreeSample/`) for `TribeServlet` will be handled by the `dojo.indians.TribeServlet` class. If you open `web.xml` in the editor you can see that the file now contains the `<servlet>` and `<servlet-mapping>` elements.
-4. Modify the `processRequest()` method by making the following changes (in bold).
+
+[start=4]
+. Modify the `processRequest()` method by making the following changes (in bold).
[source,java]
----
@@ -381,7 +443,9 @@ response.setContentType("*application/json*");
This change sets the `Content-Type` header of the HTTP Response to indicate that any returned content is in JSON format.
-5. Replace the commented code within the `processRequest()` method's `try` block with the following (changes in *bold*):
+
+[start=5]
+. Replace the commented code within the `processRequest()` method's `try` block with the following (changes in *bold*):
[source,java]
----
@@ -404,7 +468,9 @@ try {
To reformat your code, right-click within the editor and choose Format.
-6. Use the IDE's hints to add the following import statements.
+
+[start=6]
+. Use the IDE's hints to add the following import statements.
[source,java]
----
@@ -412,7 +478,9 @@ To reformat your code, right-click within the editor and choose Format.
import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;
----
-7. To run the project, select the `DojoTreeSample` project node in the Projects window, then click the Run Project ( image::images/run-project-btn.png[] ) button in the IDE's toolbar.
+
+[start=7]
+. To run the project, select the `DojoTreeSample` project node in the Projects window, then click the Run Project ( image:images/run-project-btn.png[] ) button in the IDE's toolbar.
The browser opens to display the welcome page (`dojoDemo.html`), and you can see that the Dojo Tree widget is displaying data from the ArrayList properly, as in the <<final,screenshot above>>.
link:/about/contact_form.html?to=3&subject=Feedback:%20Connecting%20a%20Dojo%20Tree%20to%20an%20ArrayList[+Send Us Your Feedback+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_ja.asciidoc
index 6decf43..fe263eb 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_ja.asciidoc
@@ -50,7 +50,9 @@ image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、N
_または_
Tomcatサーブレット・コンテナ |Open Source Edition 3.1.xまたは4.x
_ _
-7.xまたは8.x
+
+[start=7]
+.xまたは8.x
|link:http://www.dojotoolkit.org/download[+Dojoツールキット+] |バージョン1.8.x以降
@@ -63,6 +65,7 @@ _ _
* このチュートリアルを完了するには、いくつかの手順でインターネット接続が必要になります。
* NetBeans IDE Java EEのJavaダウンロード・バンドルでは、IDEとともにGlassFish Server Open Source Editionをインストールして登録することもできます。このチュートリアルでは、クライアント・サーバー通信のシミュレーションを行うために、サーバーが必要です。
* 完成したプロジェクトは次のようになります。
+
image::images/dojo-tree-complete.png[title="ブラウザに表示された完成した課題"]
@@ -72,7 +75,7 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
最初に、IDEでサンプル・プロジェクトを開きます。プロジェクトが開いたら、「プロジェクト」ウィンドウでプロジェクト・ノードを展開し、プロジェクトで使用されるDojoリソースおよびライブラリを調査します。
1. チュートリアルのlink:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip[+Dojoサンプル・プロジェクト+]をコンピュータ上の場所にダウンロードします。
-2. IDEツールバーの「プロジェクトを開く」ボタン(image::images/open-project-btn.png[])をクリックして、「プロジェクトを開く」ダイアログ・ボックスを開きます。
+2. IDEツールバーの「プロジェクトを開く」ボタン(image:images/open-project-btn.png[])をクリックして、「プロジェクトを開く」ダイアログ・ボックスを開きます。
3. 「プロジェクトを開く」ダイアログで、コンピュータ上のDojoサンプル・プロジェクトを特定し、「プロジェクトを開く」をクリックします。
IDEで`DojoTreeSample`プロジェクトを開くと、参照の問題が存在することを示すエラー・バッジがプロジェクトに付きます。
@@ -83,7 +86,9 @@ image::images/proj-win-ref-problems.png[title="プロジェクトの参照の問
*注意: *「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])は、プロジェクト内の重要な項目の_論理ビュー_を示す、プロジェクト・ソースへのメイン・エントリ・ポイントです。「ファイル」ウィンドウ([Ctrl]-[2]、Macの場合は[⌘]-[2])には、プロジェクトの_ディレクトリ・ベースのビュー_が表示され、「プロジェクト」ウィンドウでは表示されないすべてのファイルやフォルダが含まれます。
-4. 「プロジェクト」ウィンドウで`Web Pages`ノードを展開します。
+
+[start=4]
+. 「プロジェクト」ウィンドウで`Web Pages`ノードを展開します。
「プロジェクト」ウィンドウの`Web Pages`ノードの下に ``resources`` フォルダが表示されます。 ``resources`` フォルダには、link:http://www.dojotoolkit.org/download[+Dojo toolkit+]からのDojoコアとDijitライブラリが含まれます。Dojoのツリー・ウィジェットを実装するには、コア・ライブラリの`ItemFileReadStore`モジュールと、Dijitライブラリに含まれている`Tree`ウィジェット自体の、2つのコンポーネントが基本的に必要です。
@@ -92,7 +97,9 @@ image::images/proj-win-ref-problems.png[title="プロジェクトの参照の問
*注意:*このプロジェクトでは、`DojoX`ライブラリは不要です。
-5. 「プロジェクト」ウィンドウで`Libraries`ノードを展開し、必要なすべてのライブラリがクラスパスにあることを確認します。
+
+[start=5]
+. 「プロジェクト」ウィンドウで`Libraries`ノードを展開し、必要なすべてのライブラリがクラスパスにあることを確認します。
*注意:*構成によっては、不足しているサーバーの問題を解決しなければならないことがあります。`Libraries`ノードの下に ``<Missing Java EE Server>`` ノードが表示される場合は、プロジェクト・ノードを右クリックし、ポップアップ・メニューで「不足しているサーバーの問題を解決」を選択します。
@@ -130,7 +137,9 @@ image::images/dojo-add-server.png[title="プロジェクトの「resources」フ
----
* `link:http://dojotoolkit.org/reference-guide/1.6/djConfig.html[+djConfig+]`を使用すると、Dojoの動作を制御するグローバル設定をオーバーライドできます(たとえば、`parseOnLoad`プロパティを使用して)。
* `parseOnLoad`を`true`に設定すると、ページがロードされるときに必ずウィジェットとページ・マークアップが解析されます。
-3. 次の`@import`文(太字)を`<head>`タグの間と追加する`<script>`タグの下に追加して、ツールキットに含まれる`nihilo`link:http://docs.dojocampus.org/dijit/themes[+サンプル・テーマ+]へのリンクを追加します。
+
+[start=3]
+. 次の`@import`文(太字)を`<head>`タグの間と追加する`<script>`タグの下に追加して、ツールキットに含まれる`nihilo`link:http://docs.dojocampus.org/dijit/themes[+サンプル・テーマ+]へのリンクを追加します。
[source,xml]
----
@@ -151,7 +160,9 @@ image::images/dojo-add-server.png[title="プロジェクトの「resources」フ
`nihilo`テーマはツールキットにデフォルトで含まれています。「プロジェクト」ウィンドウで`dijit/themes`フォルダを展開して、デフォルトで提供されている他のサンプル・テーマを表示できます。
-4. 次のクラス・セレクタをページの`<body>`タグに追加して、使用しているテーマの名前を指定します。これを実行すると、ページにロードされているすべてのDojoウィジェットが、テーマに関連付けられたスタイルを使用してレンダリングされます。
+
+[start=4]
+. 次のクラス・セレクタをページの`<body>`タグに追加して、使用しているテーマの名前を指定します。これを実行すると、ページにロードされているすべてのDojoウィジェットが、テーマに関連付けられたスタイルを使用してレンダリングされます。
[source,java]
----
@@ -181,7 +192,9 @@ image::images/dojo-add-server.png[title="プロジェクトの「resources」フ
----
* `link:http://docs.dojocampus.org/dojo/data/ItemFileReadStore[+dojo.data.ItemFileReadStore+]`: JSON構造化コンテンツをHTTPエンドポイントから読み取り(<<prepareServlet,JSONレスポンスを開始するサーブレットの準備>>で、この目的に使用するサーブレットを実装します)、すべての項目をメモリー内に保存して単純にすばやくアクセスできるようにします。
* `link:http://docs.dojocampus.org/dijit/Tree[+dijit.Tree+]`: `ItemFileReadStore`から取得されたJSONデータを表示するツリー・ウィジェットです。
-2. 次のコード(太字)を追加して、`ItemFileReadStore`および`Tree`ウィジェットを追加します。
+
+[start=2]
+. 次のコード(太字)を追加して、`ItemFileReadStore`および`Tree`ウィジェットを追加します。
[source,html]
----
@@ -218,26 +231,42 @@ image::images/dojo-add-server.png[title="プロジェクトの「resources」フ
この時点で、これらのソースをコンパイルして、`DojoTreeSample`プロジェクトに追加するJava Archive (JARファイル)を作成します。
-3. ツールバーの「新規プロジェクト」ボタン(image::images/new-project-btn.png[])をクリックして新規プロジェクト・ウィザードを開きます。
-4. 新規プロジェクト・ウィザードで、「Java」カテゴリの「Javaクラス・ライブラリ」プロジェクト・テンプレートを選択します。「次」をクリックします。
-5. Javaクラス・ライブラリ・ウィザードの「名前と場所」パネルで、「プロジェクト名」として「*`json`*」を入力します。「終了」をクリックします。
+
+[start=3]
+. ツールバーの「新規プロジェクト」ボタン(image:images/new-project-btn.png[])をクリックして新規プロジェクト・ウィザードを開きます。
+
+[start=4]
+. 新規プロジェクト・ウィザードで、「Java」カテゴリの「Javaクラス・ライブラリ」プロジェクト・テンプレートを選択します。「次」をクリックします。
+
+[start=5]
+. Javaクラス・ライブラリ・ウィザードの「名前と場所」パネルで、「プロジェクト名」として「*`json`*」を入力します。「終了」をクリックします。
「終了」をクリックすると新しいプロジェクトが作成され、「プロジェクト」ウィンドウで開きます。
Dojoツールキット・リソースを ``DojoTreeSample`` プロジェクトにコピーしたのと同じ方法で、 ``json`` プロジェクトにダウンロードするJSONソースをコピーする必要があります。
-6. `JSON-java-master.zip`アーカイブを抽出し、ルート・フォルダにあるJavaソース・ファイルをコピーします([Ctrl]-[C]、Macの場合は⌘-C)。
+
+[start=6]
+. `JSON-java-master.zip`アーカイブを抽出し、ルート・フォルダにあるJavaソース・ファイルをコピーします([Ctrl]-[C]、Macの場合は⌘-C)。
*注意:*抽出したアーカイブのルート・フォルダにある`zip`フォルダとその内容をコピーする必要はありません。
-7. IDEの「プロジェクト」ウィンドウで「ソース・パッケージ」ノードを右クリックし、ポップアップ・メニューで「新規」>「Javaパッケージ」を選択します。
-8. パッケージ名として*json*と入力します。「終了」をクリックします。
-9. `json`ソース・パッケージを右クリックし、ポップアップ・メニューで「貼付け」を選択します。
+
+[start=7]
+. IDEの「プロジェクト」ウィンドウで「ソース・パッケージ」ノードを右クリックし、ポップアップ・メニューで「新規」>「Javaパッケージ」を選択します。
+
+[start=8]
+. パッケージ名として*json*と入力します。「終了」をクリックします。
+
+[start=9]
+. `json`ソース・パッケージを右クリックし、ポップアップ・メニューで「貼付け」を選択します。
パッケージを展開すると、 ``json`` ソースが表示されます。
image::images/proj-win-json-sources.png[title="新しい「json」プロジェクトに含まれるようになったソース"]
-10. 「プロジェクト」ウィンドウで「`json`」プロジェクト・ノードを右クリックし、「消去してビルド」を選択してプロジェクトをビルドします。
+
+[start=10]
+. 「プロジェクト」ウィンドウで「`json`」プロジェクト・ノードを右クリックし、「消去してビルド」を選択してプロジェクトをビルドします。
プロジェクトをビルドすると、すべてのJavaクラスが`.class`ファイルにコンパイルされます。IDEは、コンパイル済クラスを格納するための`build`フォルダと、プロジェクトのJARファイルを格納する`dist`フォルダを作成します。これらのフォルダはIDEの「ファイル」ウィンドウから表示できます。
@@ -247,7 +276,9 @@ image::images/files-win-compiled-classes.png[title="プロジェクトの「buil
`json.jar`ファイルができたので、`DojoTreeSample`プロジェクトを開いたときから発生している参照の問題を解決できます。
-11. 「プロジェクト」ウィンドウで`DojoTreeSample`の「ライブラリ」ノードを右クリックし、「JAR/フォルダの追加」を選択します。次に、ダイアログで`json`プロジェクトの`dist`フォルダの場所に移動し、`json.jar`ファイルを選択します。
+
+[start=11]
+. 「プロジェクト」ウィンドウで`DojoTreeSample`の「ライブラリ」ノードを右クリックし、「JAR/フォルダの追加」を選択します。次に、ダイアログで`json`プロジェクトの`dist`フォルダの場所に移動し、`json.jar`ファイルを選択します。
「ライブラリ」ノードを右クリックしてポップアップ・メニューで「プロジェクトの追加」を選択し、「プロジェクトの追加」ダイアログ・ボックスで`json`プロジェクトを探すこともできます。
@@ -257,8 +288,12 @@ image::images/libraries-json-jar.png[title="プロジェクトにより参照さ
*注意: *`json.jar`ファイルはプロジェクトの「`ライブラリ`」ノードの下に表示されますが、元の場所から参照されます。コピーされてプロジェクトに追加されるのではありません(たとえば、「ファイル」ウィンドウで`DojoTreeSample`プロジェクトの下には見つかりません)。したがって、JARファイルの場所を変更すると、参照が壊れます。
-12. 「`ソース・パッケージ`」> `dojo.indians`パッケージを展開し、`Tribe`クラスと`TribeDataManager`クラスをダブルクリックしてエディタで開きます。
-13. 必要なインポート文を両方のクラスに追加します。各クラスで、エディタ上で右クリックし、「インポートを修正」を選択します。
+
+[start=12]
+. 「`ソース・パッケージ`」> `dojo.indians`パッケージを展開し、`Tribe`クラスと`TribeDataManager`クラスをダブルクリックしてエディタで開きます。
+
+[start=13]
+. 必要なインポート文を両方のクラスに追加します。各クラスで、エディタ上で右クリックし、「インポートを修正」を選択します。
`Tribe`クラスには次のインポートが必要です。
@@ -280,7 +315,9 @@ import dojo.org.json.JSONObject;
JSONクラスのAPIもlink:http://json.org/java[+http://json.org/java+]で提供されています。後で`Tribe`と`TribeDataManager`のコードを調べるので、このページを開いておいてください。
-14. `TribeDataManager`のArrayListを調べます。ArrayListは`Tribe`オブジェクトのコレクションです。ArrayListの最初の要素を調べると、新しい`Tribe`オブジェクトが作成されてリストに追加されていることがわかります。
+
+[start=14]
+. `TribeDataManager`のArrayListを調べます。ArrayListは`Tribe`オブジェクトのコレクションです。ArrayListの最初の要素を調べると、新しい`Tribe`オブジェクトが作成されてリストに追加されていることがわかります。
[source,java]
----
@@ -288,7 +325,9 @@ JSONクラスのAPIもlink:http://json.org/java[+http://json.org/java+]で提供
indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));
----
各`Tribe`オブジェクトは、「_部族_」、「_カテゴリ_」および「_地域_」という3つの情報を収集します。この課題用のデータは、Wikipediaの「link:http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification[+Native Americans in the United States+]」のエントリから取得されています。ご存知のとおり、複数の「_部族_」が1つの「_カテゴリ_」に分類され、多数のカテゴリがより大きな1つの「_地域_」に含まれる場合があります。
-15. `Tribe`クラスをエディタで開くと、これは基本的にlink:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+]であり、`toJSONObject()`メソッドのみが異なることがわかります。
+
+[start=15]
+. `Tribe`クラスをエディタで開くと、これは基本的にlink:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+]であり、`toJSONObject()`メソッドのみが異なることがわかります。
[source,java]
----
@@ -301,8 +340,12 @@ public JSONObject toJSONObject() throws JSONException {
return jo;
}
----
-16. 再度`TribeDataManager`に切り替え([Ctrl]-[Tab])、クラスに含まれているメソッドを調べます。ナビゲータを開いて([Ctrl]-[7]、Macの場合は[⌘]-[7])、クラスに含まれているフィールドとプロパティのリストを表示します。
+
+[start=16]
+. 再度`TribeDataManager`に切り替え([Ctrl]-[Tab])、クラスに含まれているメソッドを調べます。ナビゲータを開いて([Ctrl]-[7]、Macの場合は[⌘]-[7])、クラスに含まれているフィールドとプロパティのリストを表示します。
+
image::images/dojo-navigator.png[title="ナビゲータを使用した、クラスのフィールドおよびプロパティの表示"]
+
その中で最も重要なメソッドは`getIndiansAsJSONObject()`です。このメソッドはArrayListをスキャンし、データを処理して`JSONObject`の形式で返します。Dojoの`ItemFileReadStore`に必要なのは、`文字列`形式のJSONObjectです。
[source,java]
@@ -329,9 +372,14 @@ public static JSONObject getIndiansAsJSONObject() throws JSONException {
return jo;
}
----
-17. `getIndiansAsJSONObject()`メソッドに関するJavadocを開きます。これは、ナビゲータに戻り([Ctrl]-[7]、Macの場合は[⌘]-[7])、メソッドの上にカーソルを置くことで行うことができます。または、メイン・メニューから「ウィンドウ」>「その他」>「Javadoc」を選択し、エディタでメソッド署名をクリックします。
+
+[start=17]
+. `getIndiansAsJSONObject()`メソッドに関するJavadocを開きます。これは、ナビゲータに戻り([Ctrl]-[7]、Macの場合は[⌘]-[7])、メソッドの上にカーソルを置くことで行うことができます。または、メイン・メニューから「ウィンドウ」>「その他」>「Javadoc」を選択し、エディタでメソッド署名をクリックします。
+
image::images/javadoc-window.png[title="JSONデータの例を示すTribeDataManagerのJavadoc"]
-18. Javadocに示されているJSONデータの例を調べます。データの形式は、link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+Dojoのドキュメント+]に示されている例に準拠しています。
+
+[start=18]
+. Javadocに示されているJSONデータの例を調べます。データの形式は、link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+Dojoのドキュメント+]に示されている例に準拠しています。
=== NetBeans IDEのJavaデバッガ
@@ -339,11 +387,20 @@ image::images/javadoc-window.png[title="JSONデータの例を示すTribeDataMan
次のステップでは、`getIndiansAsJSONObject()`メソッドをコールするサーブレットを実装します。これを行った後、次の手順を実行して、IDEのJavaデバッガを使用してメソッドをステップ実行し、`JSONObject`がどのように構成されているかを検証できます。
1. メソッドにブレークポイントを設定します(エディタの左マージンで行番号(行99)をクリックします)。
+
image::images/debugger-breakpoint.png[title="Javaデバッガを使用したコードのステップ実行"]
-2. 「プロジェクト」ウィンドウで「 ``DojoTreeSample`` 」プロジェクトを選択します。
-3. デバッガを実行します(ツールバーで「プロジェクトをデバッグ」(image::images/debug-btn.png[])ボタンをクリックします)。
-4. ツールバーの「ステップ・イン」(image::images/step-into-btn.png[])ボタンと「ステップ・オーバー」(image::images/step-over-btn.png[])ボタンを使用します。
-5. 変数と式の値を「ローカル変数」ウィンドウ(「ウィンドウ」→「デバッグ」→「変数」)で調べます。
+
+[start=2]
+. 「プロジェクト」ウィンドウで「 ``DojoTreeSample`` 」プロジェクトを選択します。
+
+[start=3]
+. デバッガを実行します(ツールバーで「プロジェクトをデバッグ」(image:images/debug-btn.png[])ボタンをクリックします)。
+
+[start=4]
+. ツールバーの「ステップ・イン」(image:images/step-into-btn.png[])ボタンと「ステップ・オーバー」(image:images/step-over-btn.png[])ボタンを使用します。
+
+[start=5]
+. 変数と式の値を「ローカル変数」ウィンドウ(「ウィンドウ」→「デバッグ」→「変数」)で調べます。
Javaデバッガの詳細は、次のスクリーンキャストを参照してください。
@@ -364,14 +421,19 @@ Webページに`ItemFileReadStore`を追加したとき、<<TribeServlet,`url`
1. 「プロジェクト」ウィンドウで`dojo.indians`ソース・パッケージを右クリックし、「新規」>「サーブレット」を選択します。
2. 新規サーブレット・ウィザードで、クラス名に「*`TribeServlet`*」と入力します。`dojo.indians`がパッケージとして指定されていることを確認します。「次」をクリックします。
+
image::images/new-servlet-wizard.png[title="新規サーブレット・ウィザードを使用したサーブレットの作成"]
-3. デフォルトのサーブレット名とURLパターン値が正しいことを確認します。「終了」をクリックすると、サーブレットのスケルトン・クラスが生成されます。
+
+[start=3]
+. デフォルトのサーブレット名とURLパターン値が正しいことを確認します。「終了」をクリックすると、サーブレットのスケルトン・クラスが生成されます。
サーブレットの機能は、`getIndiansAsJSONObject()`メソッドをコールし、このメソッドからのデータを使用してクライアント・リクエストに応答することです。JSON形式のレスポンスを準備するには、最初にレスポンスのMIMEタイプをJSON形式に設定する必要があります。
*注意:*ウィザードにより、サーブレット名とURLパターンが自動的に`web.xml`に追加されます。その結果、`TribeServlet`のホスト・ドメイン(`http://localhost:8080/DojoTreeSample/`)に対するすべてのリクエストが、`dojo.indians.TribeServlet`クラスによって処理されます。エディタで`web.xml`を開くと、ファイルに`<servlet>`および`<servlet-mapping>`要素が含まれているのがわかります。
-4. 次の変更(太字)を行って、`processRequest()`メソッドを変更します。
+
+[start=4]
+. 次の変更(太字)を行って、`processRequest()`メソッドを変更します。
[source,java]
----
@@ -381,7 +443,9 @@ response.setContentType("*application/json*");
この変更により、HTTPレスポンスの`Content-Type`ヘッダーが、返される内容がすべてJSON形式であることを示すように設定されます。
-5. `processRequest()`メソッドの`try`ブロック内のコメントアウトされているコードを、次のように置き換えます(*太字*部分が変更箇所)。
+
+[start=5]
+. `processRequest()`メソッドの`try`ブロック内のコメントアウトされているコードを、次のように置き換えます(*太字*部分が変更箇所)。
[source,java]
----
@@ -404,7 +468,9 @@ try {
コードを再フォーマットするには、エディタ内で右クリックし、「フォーマット」を選択します。
-6. IDEのヒントを使用して、次のインポート文を追加します。
+
+[start=6]
+. IDEのヒントを使用して、次のインポート文を追加します。
[source,java]
----
@@ -412,7 +478,9 @@ try {
import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;
----
-7. プロジェクトを実行するには、「プロジェクト」ウィンドウで`DojoTreeSample`プロジェクト・ノードを選択し、IDEのツールバーの「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックします。
+
+[start=7]
+. プロジェクトを実行するには、「プロジェクト」ウィンドウで`DojoTreeSample`プロジェクト・ノードを選択し、IDEのツールバーの「プロジェクトの実行」(image:images/run-project-btn.png[])ボタンをクリックします。
ブラウザが開いて開始画面(`dojoDemo.html`)が表示され、<<final,上のスクリーンショット>>のように、Dojo TreeウィジェットでArrayListのデータが正しく表示されます。
link:/about/contact_form.html?to=3&subject=Feedback:%20Connecting%20a%20Dojo%20Tree%20to%20an%20ArrayList[+ご意見をお寄せください+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_pt_BR.asciidoc
index cd0ed7e..a2dc7ff 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_pt_BR.asciidoc
@@ -50,7 +50,9 @@ image::images/netbeans-stamp-80-74-73.png[title="O conteúdo desta página se ap
_ou_
Contêiner do servlet Tomcat |Open Source Edition 3.1.x ou 4.x
_ _
-7.x ou 8.x
+
+[start=7]
+.x ou 8.x
|link:http://www.dojotoolkit.org/download[+Kit de ferramentas do Dojo+] |versão 1.8.x ou posterior
@@ -63,6 +65,7 @@ _ _
* É necessária uma conexão à Internet para concluir várias etapas incluídas neste tutorial.
* O pacote para download Java EE do NetBeans IDE permite uma instalação e registro opcional do GlassFish Server Open Source Edition com o IDE. É necessário um servidor para simular a comunicação cliente-servidor neste tutorial.
* O projeto concluído tem a seguinte aparência:
+
image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um browser"]
@@ -72,7 +75,7 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
Inicie abrindo a amostra do projeto no IDE. Quando o projeto estiver aberto, expanda o nó do projeto na janela Projetos e examine os recursos e as bibliotecas do Dojo que são usados no projeto.
1. Faça o download da link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip[+Amostra do projeto do Dojo+] em algum local no seu computador.
-2. Clique no botão Abrir Projeto ( image::images/open-project-btn.png[] ) na barra de ferramentas do IDE para abrir a caixa de diálogo Abrir Projeto.
+2. Clique no botão Abrir Projeto ( image:images/open-project-btn.png[] ) na barra de ferramentas do IDE para abrir a caixa de diálogo Abrir Projeto.
3. Na caixa de diálogo Abrir Projeto, localize o projeto Dojo de amostra no seu computador e clique em Abrir Projeto.
Quando você abrir o projeto `DojoTreeSample` no IDE, verá que projeto está identificado com um crachá de erro para indicar que existe um problema de referência.
@@ -83,7 +86,9 @@ O problema de referência existe porque as classes Java usadas no projeto (`Trib
*Observação: *A janela Projetos (Ctrl-1; ⌘-1 no Mac) oferece uma _view lógica_ dos conteúdos importantes do projeto e é o ponto de entrada principal para os códigos-fonte do projeto. A janela Arquivos (Ctrl-2; ⌘-2 no Mac) mostra uma _view com base no diretório_ dos projetos e inclui os arquivos e as pastas que não são exibidos na Janela de Projetos.
-4. Expanda o nó `Páginas Web` na janela Projetos.
+
+[start=4]
+. Expanda o nó `Páginas Web` na janela Projetos.
Você pode ver que uma pasta ``recursos`` é listada sob o nó `Páginas Web` na janela Projetos. A pasta ``recursos`` contém o núcleo e as bibliotecas do Dojo do link:http://www.dojotoolkit.org/download[+kit de ferramentas do Dojo+]. Para implementar o widget Árvore do Dojo, são necessários basicamente 2 componentes: o módulo `ItemFileReadStore` da biblioteca core e o próprio widget `Árvore`, contido na biblioteca Dijit.
@@ -92,7 +97,9 @@ Você pode ver que uma pasta ``recursos`` é listada sob o nó `Páginas Web`
*Observação.* A biblioteca `DojoX` não é necessária nesse projeto.
-5. Expanda o nó `Bibliotecas` na janela Projetos e confirme se todas as bibliotecas obrigatórias estão no classpath.
+
+[start=5]
+. Expanda o nó `Bibliotecas` na janela Projetos e confirme se todas as bibliotecas obrigatórias estão no classpath.
*Observação.* Dependendo da sua configuração, pode ser necessário resolver um problema de servidor ausente. Se você vir um nó ``<Servidor Java EE Ausente>`` sob o nó `Bibliotecas`, clique com o botão direito do mouse no nó do projeto e escolha Resolver Problema de Servidor Ausente no menu pop-up.
@@ -130,7 +137,9 @@ Para usar os recursos de um kit de ferramentas, é necessário vinculá-los ao a
----
* O `link:http://dojotoolkit.org/reference-guide/1.6/djConfig.html[+djConfig+]` permite substituir as definições globais que controlam como o Dojo opera (por exemplo, usando a propriedade `parseOnLoad`).
* A propriedade `parseOnLoad` definida como `true` garante que o parse das marcações de página e dos widgets seja feito durante o carregamento da página.
-3. Adicione um link ao tema de exemplo`nihilo` contido no kit de ferramentas, adicionando a instrução `@import` (em negrito) a seguir entre as tags `<head>` e sob as tags `<script>` adicionadas.
+
+[start=3]
+. Adicione um link ao tema de exemplo`nihilo` contido no kit de ferramentas, adicionando a instrução `@import` (em negrito) a seguir entre as tags `<head>` e sob as tags `<script>` adicionadas.
[source,xml]
----
@@ -151,7 +160,9 @@ Para usar os recursos de um kit de ferramentas, é necessário vinculá-los ao a
O tema `nihilo` é incluído no kit de ferramenta por default. Você pode expandir a pasta `dijit/themes` na janela Projetos para ver outros temas de exemplo fornecidos por default.
-4. Adicione o seguinte seletor de classe à tag `<body>` da página para especificar o nome do tema que você está usando. Quando você faz isso, qualquer widget do Dojo que tenha sido carregado na página será renderizado usando os estilos associados ao tema.
+
+[start=4]
+. Adicione o seguinte seletor de classe à tag `<body>` da página para especificar o nome do tema que você está usando. Quando você faz isso, qualquer widget do Dojo que tenha sido carregado na página será renderizado usando os estilos associados ao tema.
[source,java]
----
@@ -181,7 +192,9 @@ Depois do vínculo ao `dojo.js`, você pode começar a adicionar códigos para u
----
* `link:http://docs.dojocampus.org/dojo/data/ItemFileReadStore[+dojo.data.ItemFileReadStore+]`: lê o conteúdo com estrutura JSON de um ponto final HTTP (em <<prepareServlet,Preparando um Servlet para Iniciar uma Resposta JSON>>, você implementará um servlet com essa finalidade) e armazena todos os itens residentes na memória para um acesso rápido e simples.
* `link:http://docs.dojocampus.org/dijit/Tree[+dijit.Tree+]`: o widget Árvore que fornece uma view dos dados JSON recuperados do `ItemFileReadStore`.
-2. Adicione o código (em negrito) a seguir para adicionar um widget `ItemFileReadStore` e `Árvore`.
+
+[start=2]
+. Adicione o código (em negrito) a seguir para adicionar um widget `ItemFileReadStore` e `Árvore`.
[source,html]
----
@@ -218,26 +231,42 @@ Neste tutorial, a lógica que extrai os dados de amostra da ArrayList foi prepar
Neste momento, compile esses códigos-fontes e crie um arquivo compactado JAR (arquivo Java) que possa ser adicionado ao projeto `DojoTreeSample`.
-3. Clique no botão Novo Projeto (image::images/new-project-btn.png[]) na barra de ferramentas para abrir o assistente do Novo Projeto.
-4. No assistente do Novo Projeto, selecione o tipo de projeto de Bibliotecas de Classes Java na categoria Java. Clique em Próximo.
-5. No painel Nome e Local do assistente da Biblioteca de Classes Java, digite *`json`* como Nome do Projeto. Clique em Finalizar.
+
+[start=3]
+. Clique no botão Novo Projeto (image:images/new-project-btn.png[]) na barra de ferramentas para abrir o assistente do Novo Projeto.
+
+[start=4]
+. No assistente do Novo Projeto, selecione o tipo de projeto de Bibliotecas de Classes Java na categoria Java. Clique em Próximo.
+
+[start=5]
+. No painel Nome e Local do assistente da Biblioteca de Classes Java, digite *`json`* como Nome do Projeto. Clique em Finalizar.
Quando você clicar em Finalizar, o novo projeto será criado e aberto na janela Projetos.
Agora, você precisa copiar os códigos-fontes JSON que obteve por download para o projeto ``json`` da mesma forma que copiou os recursos do kit de ferramentas Dojo no projeto ``DojoTreeSample`` .
-6. Extraia o archive `JSON-java-master.zip` e copie (Ctrl-C; ⌘-C no Mac) os arquivos de código-fonte Java que estão na pasta-raiz.
+
+[start=6]
+. Extraia o archive `JSON-java-master.zip` e copie (Ctrl-C; ⌘-C no Mac) os arquivos de código-fonte Java que estão na pasta-raiz.
*Observação.* Não é necessário copiar a pasta `zip` e seu conteúdo que também se encontra na pasta-raiz do archive extraído.
-7. Na janela Projetos do IDE, clique com o botão direito do mouse no nó Pacotes de Código-fonte e selecione Novo > Pacote Java no menu pop-up.
-8. Digite *json* como Nome do Pacote. Clique em Finalizar.
-9. Clique com o botão direito do mouse no pacote de código-fonte `json` e escolha Colar no menu pop-up.
+
+[start=7]
+. Na janela Projetos do IDE, clique com o botão direito do mouse no nó Pacotes de Código-fonte e selecione Novo > Pacote Java no menu pop-up.
+
+[start=8]
+. Digite *json* como Nome do Pacote. Clique em Finalizar.
+
+[start=9]
+. Clique com o botão direito do mouse no pacote de código-fonte `json` e escolha Colar no menu pop-up.
Ao expandir o pacote, você verá os códigos-fonte ``json`` .
image::images/proj-win-json-sources.png[title="Agora, os códigos-fonte estão contidos no novo projeto 'json'"]
-10. Clique com o botão direito do mouse no nó do projeto `json` na janela Projetos e escolha Limpar e Compilar para compilar o projeto.
+
+[start=10]
+. Clique com o botão direito do mouse no nó do projeto `json` na janela Projetos e escolha Limpar e Compilar para compilar o projeto.
Quando você cria o projeto, todas as classes Java são criadas nos arquivos `.class`. O IDE cria uma pasta `build` que contém as classes criadas, bem como a pasta `dist` que contém um arquivo JAR para o projeto. Essas pastas podem ser exibidas na janela Arquivos do IDE.
@@ -247,7 +276,9 @@ image::images/files-win-compiled-classes.png[title="Os códigos-fonte criados po
Agora que o arquivo `json.jar` existe, é possível solucionar os problemas de referência que o projeto `DojoTreeSample` vem exibindo desde que foi aberto.
-11. Na janela Projetos, clique com o botão direito no nó das Bibliotecas do `DojoTreeSample` e selecione Adicionar JAR/Pasta. Em seguida, na caixa de diálogo, vá até o local da pasta `dist` do projeto `json` e selecione o arquivo `json.jar`.
+
+[start=11]
+. Na janela Projetos, clique com o botão direito no nó das Bibliotecas do `DojoTreeSample` e selecione Adicionar JAR/Pasta. Em seguida, na caixa de diálogo, vá até o local da pasta `dist` do projeto `json` e selecione o arquivo `json.jar`.
Se preferir, clique com o botão direito do mouse no nó Bibliotecas e escolha Adicionar Projeto no menu pop-up e localize o projeto `json` na caixa de diálogo Adicionar Projeto.
@@ -257,8 +288,12 @@ image::images/libraries-json-jar.png[title="O arquivo jar é referenciado pelo P
*Observação: *Mesmo que o arquivo `json.jar` esteja listado no nó `Libraries` do projeto, ele será referenciado na sua localização original, não sendo copiado e adicionado ao projeto (por exemplo, não será possível localizá-lo no projeto `DojoTreeSample` da janela Arquivos). Por isso, se você alterar o local do arquivo JAR, a referência será interrompida.
-12. Expanda o pacote `Source Packages` > `dojo.indians` e clique duas vezes nas classes `Tribe` e `TribeDataManager` para abri-las no editor.
-13. Adicione as instruções de importação necessárias para ambas as classes. Em cada classe, clique com o botão direito do mouse no editor e selecione Corrigir Importações.
+
+[start=12]
+. Expanda o pacote `Source Packages` > `dojo.indians` e clique duas vezes nas classes `Tribe` e `TribeDataManager` para abri-las no editor.
+
+[start=13]
+. Adicione as instruções de importação necessárias para ambas as classes. Em cada classe, clique com o botão direito do mouse no editor e selecione Corrigir Importações.
A classe `Tribe` exige as seguintes importações:
@@ -280,7 +315,9 @@ import dojo.org.json.JSONObject;
Observe que as APIs para as classes JSON também são fornecidas em link:http://json.org/java[+http://json.org/java+] - você pode manter esta página aberta ao examinar posteriormente o código em `Tribe` e `TribeDataManager`.
-14. Examine a ArrayList em `TribeDataManager`. A ArrayList é uma coleção de objetos da `Tribe`. Observando o primeiro elemento da ArrayList, é possível ver um novo objeto criado da `Tribe` e adicionado à lista:
+
+[start=14]
+. Examine a ArrayList em `TribeDataManager`. A ArrayList é uma coleção de objetos da `Tribe`. Observando o primeiro elemento da ArrayList, é possível ver um novo objeto criado da `Tribe` e adicionado à lista:
[source,java]
----
@@ -288,7 +325,9 @@ Observe que as APIs para as classes JSON também são fornecidas em link:http://
indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));
----
Cada objeto da `Tribe` captura três pontos de informação: _tribo_, _categoria_ e _região_. Os dados para este exercício foram retirados da entrada da Wikipédia em link:http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification[+Native Americans in the United States+]. Como você pode determinar, várias _tribos_ são classificadas em uma _categoria_ e diversas categorias podem estar contidas em uma grande _região_.
-15. Abra a classe `Tribe` no editor e observe que ela é basicamente um link:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+], com exceção do método `toJSONObject()`:
+
+[start=15]
+. Abra a classe `Tribe` no editor e observe que ela é basicamente um link:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+], com exceção do método `toJSONObject()`:
[source,java]
----
@@ -301,8 +340,12 @@ public JSONObject toJSONObject() throws JSONException {
return jo;
}
----
-16. Retorne ao `TribeDataManager` (Ctrl-Tab) e examine os métodos incluídos na classe. Abra o Navegador (Ctrl-7; ⌘-7 no Mac) para exibir uma lista de campos e propriedades contidos na classe.
+
+[start=16]
+. Retorne ao `TribeDataManager` (Ctrl-Tab) e examine os métodos incluídos na classe. Abra o Navegador (Ctrl-7; ⌘-7 no Mac) para exibir uma lista de campos e propriedades contidos na classe.
+
image::images/dojo-navigator.png[title="Utilizar o Navigator para exibir os campos e propriedades da classe"]
+
O método mais significativo contido é `getIndiansAsJSONObject()`. Esse método analisa a ArrayList, processa os dados e os retorna no formato de um `JSONObject`. O formato de `String` do JSONObject é o exigido pelo `ItemFileReadStore` do Dojo.
[source,java]
@@ -329,9 +372,14 @@ public static JSONObject getIndiansAsJSONObject() throws JSONException {
return jo;
}
----
-17. Abra o Javadoc no método `getIndiansAsJSONObject()`. É possível fazer isso retornando ao Navegador (Ctrl-7; ⌘-7 no Mac) e colocando o ponteiro sobre o método. Ou então, selecione Janela > Outro > Javadoc no menu principal e, em seguida, clique na assinatura do método no editor.
+
+[start=17]
+. Abra o Javadoc no método `getIndiansAsJSONObject()`. É possível fazer isso retornando ao Navegador (Ctrl-7; ⌘-7 no Mac) e colocando o ponteiro sobre o método. Ou então, selecione Janela > Outro > Javadoc no menu principal e, em seguida, clique na assinatura do método no editor.
+
image::images/javadoc-window.png[title="O Javadoc para TribeDataManager fornece um exemplo de dados JSON"]
-18. Examine o exemplo de dados JSON fornecidos no Javadoc. Observe que o formato dos dados está de acordo com os exemplos fornecidos na link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+documentação do Dojo+].
+
+[start=18]
+. Examine o exemplo de dados JSON fornecidos no Javadoc. Observe que o formato dos dados está de acordo com os exemplos fornecidos na link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+documentação do Dojo+].
=== Depurador Java do NetBeans IDE
@@ -339,11 +387,20 @@ public static JSONObject getIndiansAsJSONObject() throws JSONException {
Na próxima etapa, você implementará um servlet que chama o método `getIndiansAsJSONObject()`. Depois que você fizer isso, poderá executar as etapas a seguir para usar o depurador de Java do IDE e percorrer o método para examinar como o `JSONObject` é formado.
1. Defina um ponto de interrupção no método (clique no número da linha, por exemplo, linha 99, na margem esquerda do editor).
+
image::images/debugger-breakpoint.png[title="Usar o Depurador Java para a etapa por meio de código"]
-2. Selecione o projeto ``DojoTreeSample`` na janela Projetos.
-3. Execute o depurador (clique no botão Depurar Projeto (image::images/debug-btn.png[] ) da barra de ferramentas).
-4. Use os botões Fazer Step Into (image::images/step-into-btn.png[]) e Fazer Step Over (image::images/step-over-btn.png[]) da barra de ferramentas.
-5. Examine os valores da variável e da expressão na janela Variáveis Locais (Janela > Depuração > Variáveis).
+
+[start=2]
+. Selecione o projeto ``DojoTreeSample`` na janela Projetos.
+
+[start=3]
+. Execute o depurador (clique no botão Depurar Projeto (image:images/debug-btn.png[] ) da barra de ferramentas).
+
+[start=4]
+. Use os botões Fazer Step Into (image:images/step-into-btn.png[]) e Fazer Step Over (image:images/step-over-btn.png[]) da barra de ferramentas.
+
+[start=5]
+. Examine os valores da variável e da expressão na janela Variáveis Locais (Janela > Depuração > Variáveis).
Para obter mais informações sobre o Depurador Java, consulte os seguintes screencasts:
@@ -364,14 +421,19 @@ Na etapa seguinte, você criará um servlet que manipula solicitações de entra
1. Na janela Projetos, clique com o botão direito do mouse no pacote de código-fonte `dojo.indians` e selecione Novo > Servlet.
2. Na caixa de diálogo Novo Servlet, digite *`TribeServlet`* como o nome da classe. Confirme se `dojo.indians` foi especificado como o pacote. Clique em Próximo.
+
image::images/new-servlet-wizard.png[title="Utilizar o assistente de Novo Servlet para criar servlets"]
-3. Confirme se os valores padrão de Nome do Servlet e Padrões de URL estão corretos. Clique em Finalizar para gerar a classe skeleton do servlet.
+
+[start=3]
+. Confirme se os valores padrão de Nome do Servlet e Padrões de URL estão corretos. Clique em Finalizar para gerar a classe skeleton do servlet.
A função do servlet é chamar o método `getIndiansAsJSONObject()` e usar os dados desse método para responder à solicitação do cliente. Para preparar uma resposta no formato JSON, temos que, primeiro, definir o tipo de mime da resposta para o formato JSON.
*Observação.* O assistente adicionará automaticamente o nome do servlet e o padrão de URL ao arquivo `web.xml`. Consequentemente, as solicitações ao domínio host (`http://localhost:8080/DojoTreeSample/`) pelo `TribeServlet` serão manipuladas pela classe `dojo.indians.TribeServlet`. Se você abrir `web.xml` no editor, verá que o arquivo agora contém os elementos `<servlet>` e `<servlet-mapping>`.
-4. Modifique o método `processRequest()` fazendo as seguintes alterações (em negrito):
+
+[start=4]
+. Modifique o método `processRequest()` fazendo as seguintes alterações (em negrito):
[source,java]
----
@@ -381,7 +443,9 @@ response.setContentType("*application/json*");
Isso altera o cabeçalho `Content-Type` da Resposta HTTP para indicar que qualquer conteúdo retornado está em um formato JSON.
-5. Substitua o código comentado no bloco `try` do método `processRequest()` pelo seguinte (alterações em *negrito*):
+
+[start=5]
+. Substitua o código comentado no bloco `try` do método `processRequest()` pelo seguinte (alterações em *negrito*):
[source,java]
----
@@ -404,7 +468,9 @@ try {
Para reformatar o código, clique com o botão direito do mouse no editor e selecione Formatar.
-6. Utilize as dicas do IDE para adicionar as instruções de importação a seguir.
+
+[start=6]
+. Utilize as dicas do IDE para adicionar as instruções de importação a seguir.
[source,java]
----
@@ -412,7 +478,9 @@ Para reformatar o código, clique com o botão direito do mouse no editor e sele
import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;
----
-7. Para executar o projeto, selecione o nó do projeto `DojoTreeSample` na janela Projetos e, em seguida, clique no botão Executar Projeto (image::images/run-project-btn.png[]) na barra de ferramentas do IDE.
+
+[start=7]
+. Para executar o projeto, selecione o nó do projeto `DojoTreeSample` na janela Projetos e, em seguida, clique no botão Executar Projeto (image:images/run-project-btn.png[]) na barra de ferramentas do IDE.
O browser será aberto e exibirá uma página de boas-vindas (`dojoDemo.html`), e você poderá ver que o widget Árvore do Dojo exibirá dados da ArrayList corretamente, como na <<final,captura de tela acima>>.
link:/about/contact_form.html?to=3&subject=Feedback:%20Connecting%20a%20Dojo%20Tree%20to%20an%20ArrayList[+Envie-nos Seu Feedback+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_ru.asciidoc
index f6b3995..e54935a 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_ru.asciidoc
@@ -50,7 +50,9 @@ image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой
_или_
Контейнер сервлетов Tomcat |Open Source Edition 3.1.x или 4.x
_ _
-7.x или 8.x
+
+[start=7]
+.x или 8.x
|link:http://www.dojotoolkit.org/download[+Набор средств Dojo+] |версия 1.8.x или более поздняя
@@ -63,6 +65,7 @@ _ _
* Выполнение некоторых из действий, предусмотренных данным руководством, требует подключения к Интернету.
* Набор загрузки Java EE для среды IDE NetBeans позволяет при желании установить и зарегистрировать в среде IDE сервер приложений GlassFish Server Open Source Edition. Сервер необходим при работе с данным руководством для имитации связи клиент-сервер.
* Завершенный проект выглядит следующим образом:
+
image::images/dojo-tree-complete.png[title="Выполненное упражнение можно просмотреть в браузере"]
@@ -72,7 +75,7 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
Начните с открытия образца проекта в среде IDE. Откройте проект и разверните узел проекта в окне "Проекты". Изучите ресурсы и библиотеки Dojo, используемые в проекте.
1. Загрузите прилагающийся к этому руководству link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip[+образец проекта Dojо+] в одну из папок на своем компьютере.
-2. Нажмите кнопку 'Открыть проект' ( image::images/open-project-btn.png[] ) на панели инструментов IDE, чтобы открыть диалоговое окно 'Открыть проект'.
+2. Нажмите кнопку 'Открыть проект' ( image:images/open-project-btn.png[] ) на панели инструментов IDE, чтобы открыть диалоговое окно 'Открыть проект'.
3. В диалоговом окне 'Открыть проект' найдите образец проекта Dojo на своем компьютере и нажмите 'Открыть проект'.
При открытии проекта `DojoTreeSample` в IDE вы увидите, что проект отмечен значком ошибки. Это указывает на наличие проблемы со ссылкой.
@@ -83,7 +86,9 @@ image::images/proj-win-ref-problems.png[title="Ошибки ссылок на п
*Примечание. *Окно 'Проекты' (Ctrl-1; ⌘-1 в Mac) обеспечивает _логическое представление_ содержимого важных проектов и является основной точкой ввода для исходного кода проекта. Окно "Файлы" (Ctrl-2; ⌘-2 в Mac) отображает _представление на основе каталогов_ проектов, включая файлы и папки, не выведенные в окне "Проекты".
-4. Разверните узел `Веб-страницы` в окне "Проекты".
+
+[start=4]
+. Разверните узел `Веб-страницы` в окне "Проекты".
Вы увидите, что в списке под узлом `Веб-страницы` в окне "Проекты" появилась папка ``resources`` . Папка ``resources`` содержит ядро Dojo и библиотеки Dijit из link:http://www.dojotoolkit.org/download[+набора инструментов Dojo+]. В целях реализации виджета дерева Dojo требуется два существенных компонента: модуль `ItemFileReadStore` из базовой библиотеки и сам виджет`Tree`, содержащийся в библиотеке Dijit.
@@ -92,7 +97,9 @@ image::images/proj-win-ref-problems.png[title="Ошибки ссылок на п
*Примечание.* Библиотека `DojoX` для данного проекта не требуется.
-5. Разверните узел `Библиотеки` в окне "Проекты" и убедитесь, что все требуемые библиотеки находятся на пути класса.
+
+[start=5]
+. Разверните узел `Библиотеки` в окне "Проекты" и убедитесь, что все требуемые библиотеки находятся на пути класса.
*Примечание.* В зависимости от конфигурации может потребоваться устранить проблему, связанную с отсутствием сервера. Если в списке под узлом `Библиотеки` присутствует узел ``<Отсутствующий сервер Java EE>`` , щелкните правой кнопкой мыши узел проекта и выберите "Устранить проблему отсутствующего сервера".
@@ -130,7 +137,9 @@ image::images/dojo-add-server.png[title="Библиотеки Dojo и Dijit до
----
* `link:http://dojotoolkit.org/reference-guide/1.6/djConfig.html[+djConfig+]` позволяет переопределять глобальные параметры, управляющие работой Dojo (например, использование свойства `parseOnLoad`).
* Установка `parseOnLoad` в `true` гарантирует, что элементы оформления и разметка страницы подвергаются синтаксическому анализу при загрузке страницы.
-3. Добавьте ссылку на `nihilo` link:http://docs.dojocampus.org/dijit/themes[+образец темы+], который содержится в наборе инструментальных средств путем добавления следующей инструкции `@import` (выделена полужирным шрифтом) между тегами `<заголовков>` тегами и ниже добавленных вами тегов `<сценария>`.
+
+[start=3]
+. Добавьте ссылку на `nihilo` link:http://docs.dojocampus.org/dijit/themes[+образец темы+], который содержится в наборе инструментальных средств путем добавления следующей инструкции `@import` (выделена полужирным шрифтом) между тегами `<заголовков>` тегами и ниже добавленных вами тегов `<сценария>`.
[source,xml]
----
@@ -151,7 +160,9 @@ image::images/dojo-add-server.png[title="Библиотеки Dojo и Dijit до
Тема `nihilo` включается по умолчанию в набор инструментальных средств. Вы можете развернуть папку `dijit/themes` в окне 'Проекты', чтобы увидеть другие образцы тем, которые предоставлены по умолчанию.
-4. Добавьте следующее средство выбора класса к тегу `<body>` страницы, чтобы указать имя темы, которая теперь используется. Когда мы это делаем, любой элемент оформления Dojo, загруженный на страницу, будет визуализирован с использованием стилей, связанных с заданной темой.
+
+[start=4]
+. Добавьте следующее средство выбора класса к тегу `<body>` страницы, чтобы указать имя темы, которая теперь используется. Когда мы это делаем, любой элемент оформления Dojo, загруженный на страницу, будет визуализирован с использованием стилей, связанных с заданной темой.
[source,java]
----
@@ -181,7 +192,9 @@ image::images/dojo-add-server.png[title="Библиотеки Dojo и Dijit до
----
* `link:http://docs.dojocampus.org/dojo/data/ItemFileReadStore[+dojo.data.ItemFileReadStore+]`: считывает содержимое, имеющее структуру JSON, с оконечной точки HTTP (в разделе <<prepareServlet,Подготовка сервлета для инициализации ответа JSON>> мы применим сервлет для этого) и сохраняет все элементы в памяти для простого и быстрого доступа.
* `link:http://docs.dojocampus.org/dijit/Tree[+dijit.Tree+]`: элемент оформления дерева, выводящий представление данных JSON, полученных от `ItemFileReadStore`.
-2. Добавьте следующий код (выделен полужирным шрифтом), чтобы добавить `ItemFileReadStore` и виджет `Tree`.
+
+[start=2]
+. Добавьте следующий код (выделен полужирным шрифтом), чтобы добавить `ItemFileReadStore` и виджет `Tree`.
[source,html]
----
@@ -218,26 +231,42 @@ image::images/dojo-add-server.png[title="Библиотеки Dojo и Dijit до
На данный момент необходимо скомпилировать эти источники и создать архив Java (файл JAR), который следует добавить к проекту `DojoTreeSample`.
-3. Нажмите кнопку 'Создать проект' ( image::images/new-project-btn.png[] ) на панели инструментов, чтобы открыть мастер создания проектов.
-4. В мастере создания проектов выберите шаблон проекта библиотеки классов Java в категории Java. Нажмите кнопку 'Далее'.
-5. На панели 'Имя и местоположение' мастера библиотек классов Java введите *`json`* в качестве имени проекта. Нажмите кнопку "Завершить".
+
+[start=3]
+. Нажмите кнопку 'Создать проект' ( image:images/new-project-btn.png[] ) на панели инструментов, чтобы открыть мастер создания проектов.
+
+[start=4]
+. В мастере создания проектов выберите шаблон проекта библиотеки классов Java в категории Java. Нажмите кнопку 'Далее'.
+
+[start=5]
+. На панели 'Имя и местоположение' мастера библиотек классов Java введите *`json`* в качестве имени проекта. Нажмите кнопку "Завершить".
После нажатия кнопки 'Готово' новый проект будет создан и открыт в окне 'Проекты'.
Теперь необходимо скопировать исходный код JSON, загруженный в проект ``json`` , аналогично копированию ресурсов набора инструментальных средств Dojo в проект ``DojoTreeSample`` .
-6. Распакуйте архив `JSON-java-master.zip` и скопируйте (Ctrl-C; ⌘-C на Mac) исходные файлы Java, находящиеся в корневой папке.
+
+[start=6]
+. Распакуйте архив `JSON-java-master.zip` и скопируйте (Ctrl-C; ⌘-C на Mac) исходные файлы Java, находящиеся в корневой папке.
*Примечание.* Папку `zip` и ее содержимое копировать не требуется, так как она уже находится в корневой папке распакованного архива.
-7. В окне "Проекты" в IDE щелкните правой кнопкой мыши узел "Исходные пакеты" и выберите пункт меню "Создать > Пакет Java".
-8. В качестве имени пакета укажите *json*. Нажмите кнопку "Завершить".
-9. Щелкните правой кнопкой мыши исходный пакет `json` и выберите пункт меню "Вставить".
+
+[start=7]
+. В окне "Проекты" в IDE щелкните правой кнопкой мыши узел "Исходные пакеты" и выберите пункт меню "Создать > Пакет Java".
+
+[start=8]
+. В качестве имени пакета укажите *json*. Нажмите кнопку "Завершить".
+
+[start=9]
+. Щелкните правой кнопкой мыши исходный пакет `json` и выберите пункт меню "Вставить".
Если развернуть пакет, будут видны исходные файлы ``json`` .
image::images/proj-win-json-sources.png[title="Источники теперь хранятся в новом проекте 'json'"]
-10. Щелкните правой кнопкой мыши узел проекта `json` в окне 'Проекты' и выберите 'Очистить' и 'Построить' для сборки проекта.
+
+[start=10]
+. Щелкните правой кнопкой мыши узел проекта `json` в окне 'Проекты' и выберите 'Очистить' и 'Построить' для сборки проекта.
При построении проекта все классы Java компилируются в файлы `.class`. Среда IDE создает папку `build`, содержащую скомпилированные классы, а также папку `dist`, содержащую файл JAR для проекта. Эти папки можно просматривать в окне Files ("Файлы") среды IDE.
@@ -247,7 +276,9 @@ image::images/files-win-compiled-classes.png[title="Скомпилированн
Теперь, когда у нас есть файл `json.jar`, можно разрешить проблему со ссылками, которая имелась у проекта `DojoTreeSample` с момента его открытия.
-11. В окне 'Проекты' щелкните правой кнопкой мыши узел Libraries `DojoTreeSample` и выберите 'Добавить файл JAR/папку'. Затем в диалоговом окне перейдите к местоположению папки `dist` проекта `json` и выберите файл `json.jar`.
+
+[start=11]
+. В окне 'Проекты' щелкните правой кнопкой мыши узел Libraries `DojoTreeSample` и выберите 'Добавить файл JAR/папку'. Затем в диалоговом окне перейдите к местоположению папки `dist` проекта `json` и выберите файл `json.jar`.
Также можно щелкнуть правой кнопкой мыши узел "Библиотеки", выбрать пункт меню "Добавить проект" и выбрать проект `json` в диалоговом окне "Добавить проект".
@@ -257,8 +288,12 @@ image::images/libraries-json-jar.png[title="В проекте содержитс
*Примечание. *Хотя файл `json.jar` указан в узле проекта `Библиотеки`, ссылка на него находится в исходном местоположении - она не скопирована и добавлена к проекту (например, она отсутствует в проекте `DojoTreeSample` в окне 'Файлы'). Поэтому в случае изменения местоположения файла JAR ссылка будет нарушена.
-12. Разверните `Source Packages` ("Пакеты исходного кода") > пакет `dojo.indians` и дважды щелкните классы `Tribe` и `TribeDataManager`, чтобы открыть их в редакторе.
-13. Добавьте к обоим классам необходимые операторы импорта. Во всех классах щелкните правой кнопкой мыши в редакторе и выберите 'Исправить выражения импорта'.
+
+[start=12]
+. Разверните `Source Packages` ("Пакеты исходного кода") > пакет `dojo.indians` и дважды щелкните классы `Tribe` и `TribeDataManager`, чтобы открыть их в редакторе.
+
+[start=13]
+. Добавьте к обоим классам необходимые операторы импорта. Во всех классах щелкните правой кнопкой мыши в редакторе и выберите 'Исправить выражения импорта'.
Классу `Tribe` требуются следующие операторы импорта:
@@ -280,7 +315,9 @@ import dojo.org.json.JSONObject;
Обратите внимание, что интерфейсы API для классов JSON также предоставлены на link:http://json.org/java[+http://json.org/java+] – эту страницу может быть желательно оставить открытой, так как ниже мы рассмотрим код в `Tribe` и `TribeDataManager`.
-14. Рассмотрение ArrayList в `TribeDataManager`. ArrayList является коллекцией объектов `Tribe`. Взглянув на первый элемент ArrayList, можно увидеть, что новый объект `Tribe` создан и добавлен к списку:
+
+[start=14]
+. Рассмотрение ArrayList в `TribeDataManager`. ArrayList является коллекцией объектов `Tribe`. Взглянув на первый элемент ArrayList, можно увидеть, что новый объект `Tribe` создан и добавлен к списку:
[source,java]
----
@@ -288,7 +325,9 @@ import dojo.org.json.JSONObject;
indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));
----
Каждый объект `Tribe` записывает три точки данных: _tribe_ ("племя"), _category_ ("группа") и _region_ ("регион"). Данные для этого упражнения взяты из статьи Википедии по link:http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification[+коренным народам США+]. Как можно увидеть, _племена_ разбиваются на _группы_, и несколько категорий могут быть охвачены более крупным _регионом_.
-15. Откройте класс `Tribe` в редакторе и обратите внимание, что он, по сути, является компонентом link:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+], за исключением метода `toJSONObject()`:
+
+[start=15]
+. Откройте класс `Tribe` в редакторе и обратите внимание, что он, по сути, является компонентом link:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+], за исключением метода `toJSONObject()`:
[source,java]
----
@@ -301,8 +340,12 @@ public JSONObject toJSONObject() throws JSONException {
return jo;
}
----
-16. Переключитесь обратно на `TribeDataManager` (Ctrl-Tab) и изучите методы, входящие в класс. Откройте навигатор (Ctrl-7; ⌘-7 в Mac), чтобы просмотреть список полей и свойств, содержащихся в классе.
+
+[start=16]
+. Переключитесь обратно на `TribeDataManager` (Ctrl-Tab) и изучите методы, входящие в класс. Откройте навигатор (Ctrl-7; ⌘-7 в Mac), чтобы просмотреть список полей и свойств, содержащихся в классе.
+
image::images/dojo-navigator.png[title=""Навигатор компонентов" обеспечивает просмотр полей и свойств классов."]
+
Наиболее важным методом здесь является`getIndiansAsJSONObject()`. Этот метод просматривает ArrayList, обрабатывает данные и возвращает их в форме `JSONObject`. Форма `String` JSONObject и является тем, что нужно модулю `ItemFileReadStore` Dojo.
[source,java]
@@ -329,9 +372,14 @@ public static JSONObject getIndiansAsJSONObject() throws JSONException {
return jo;
}
----
-17. Откройте документацию Javadoc по методу `getIndiansAsJSONObject()`. Для этого вернитесь в навигатор (Ctrl-7; ⌘-7 в Mac) и подведите курсор к методу. В ином случае выберите Window ("Окно") > Other ("Прочие") > Javadoc ("Документация Java") из основного меню и щелкните сигнатуру метода в редакторе.
+
+[start=17]
+. Откройте документацию Javadoc по методу `getIndiansAsJSONObject()`. Для этого вернитесь в навигатор (Ctrl-7; ⌘-7 в Mac) и подведите курсор к методу. В ином случае выберите Window ("Окно") > Other ("Прочие") > Javadoc ("Документация Java") из основного меню и щелкните сигнатуру метода в редакторе.
+
image::images/javadoc-window.png[title="Javadoc для TribeDataManager обеспечивает пример данных JSON"]
-18. Изучите образец данных JSON, предоставленный документацией Javadoc. Обратите внимание, что формат данных соответствует примерам, предоставленным в link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+документации Dojo+].
+
+[start=18]
+. Изучите образец данных JSON, предоставленный документацией Javadoc. Обратите внимание, что формат данных соответствует примерам, предоставленным в link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+документации Dojo+].
=== Отладчик Java IDE NetBeans
@@ -339,11 +387,20 @@ public static JSONObject getIndiansAsJSONObject() throws JSONException {
На следующем этапе мы реализуем сервлет, вызывающий метод `getIndiansAsJSONObject()`. После этого можно выполнять следующие действия, чтобы использовать отладчик Java IDE для пошагового использования метода и анализа формата `JSONObject`.
1. Установите точку останова на методе (нажмите номер строки (например, строка 99) в левом поле редактора).
+
image::images/debugger-breakpoint.png[title="Используйте отладчик Java для перехода по коду"]
-2. Выберите проект ``DojoTreeSample`` в окне 'Проекты'.
-3. Запустите отладчик (нажмите кнопку 'Отладка проекта' ( image::images/debug-btn.png[] ) на панели инструментов).
-4. Используйте кнопки 'С заходом' ( image::images/step-into-btn.png[] ) и 'Без захода' ( image::images/step-over-btn.png[] ) на панели инструментов.
-5. Изучите значения переменных и выражений в окне 'Локальные переменные' ('Окно' > 'Отладка' > 'Переменные').
+
+[start=2]
+. Выберите проект ``DojoTreeSample`` в окне 'Проекты'.
+
+[start=3]
+. Запустите отладчик (нажмите кнопку 'Отладка проекта' ( image:images/debug-btn.png[] ) на панели инструментов).
+
+[start=4]
+. Используйте кнопки 'С заходом' ( image:images/step-into-btn.png[] ) и 'Без захода' ( image:images/step-over-btn.png[] ) на панели инструментов.
+
+[start=5]
+. Изучите значения переменных и выражений в окне 'Локальные переменные' ('Окно' > 'Отладка' > 'Переменные').
Дополнительные сведения об отладчике Java приведены в следующих экранных демонстрациях:
@@ -364,14 +421,19 @@ image::images/debugger-breakpoint.png[title="Используйте отладч
1. В окне 'Проекты' щелкните правой кнопкой мыши исходный пакет `dojo.indians` и выберите 'Создать' > 'Сервлет'.
2. В мастере создания сервлетов введите *`TribeServlet`* в качестве имени класса. Убедитесь, что `dojo.indians` указан как пакет. Нажмите кнопку 'Далее'.
+
image::images/new-servlet-wizard.png[title="Используйте мастер создания сервлетов для создания сервлетов"]
-3. Проверьте значения по умолчанию в полях "Имя сервлета" и "Шаблоны URL". Нажмите "Готово", чтобы создать класс skeleton для сервлета.
+
+[start=3]
+. Проверьте значения по умолчанию в полях "Имя сервлета" и "Шаблоны URL". Нажмите "Готово", чтобы создать класс skeleton для сервлета.
Функция сервлета состоит в вызове метода `getIndiansAsJSONObject()` и использовании данных из этого метода для ответа на запрос клиента. Чтобы подготовить ответ в формате JSON, нам сперва надо установить формат JSON как тип MIME ответа.
*Примечание.* Мастер автоматически добавит имя сервлета и шаблон URL в файл `web.xml`. Как следствие, все запросы к домену размещения (т. е., `http://localhost:8080/DojoTreeSample/`) для `TribeServlet` будут обрабатываться классом `dojo.indians.TribeServlet`. Если открыть файл `web.xml` в редакторе, можно увидеть, что в этом файле появились элементы `<servlet>` и `<servlet-mapping>`.
-4. Измените метод `processRequest()`, внеся следующие изменения (выделены полужирным шрифтом).
+
+[start=4]
+. Измените метод `processRequest()`, внеся следующие изменения (выделены полужирным шрифтом).
[source,java]
----
@@ -381,7 +443,9 @@ response.setContentType("*application/json*");
Это изменение устанавливает заголовок `Content-Type` для отклика HTTP, чтобы указать, что все возвращаемое содержимое имеет формат JSON.
-5. Замените закомментированный код внутри блока `try` метода `processRequest()` на следующий код (изменения выделены *жирным шрифтом*):
+
+[start=5]
+. Замените закомментированный код внутри блока `try` метода `processRequest()` на следующий код (изменения выделены *жирным шрифтом*):
[source,java]
----
@@ -404,7 +468,9 @@ try {
Чтобы изменить формат кода, щелкните правой кнопкой мыши в редакторе и выберите 'Формат'.
-6. Используйте подсказки IDE, чтобы добавить следующие операторы импорта.
+
+[start=6]
+. Используйте подсказки IDE, чтобы добавить следующие операторы импорта.
[source,java]
----
@@ -412,7 +478,9 @@ try {
import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;
----
-7. Для запуска проекта выберите узел проекта `DojoTreeSample` в окне 'Проекты', затем нажмите кнопку 'Запустить проект' ( image::images/run-project-btn.png[] ) на панели инструментов IDE.
+
+[start=7]
+. Для запуска проекта выберите узел проекта `DojoTreeSample` в окне 'Проекты', затем нажмите кнопку 'Запустить проект' ( image:images/run-project-btn.png[] ) на панели инструментов IDE.
Браузер откроется на странице приветствия (`dojoDemo.html`), и можно будет увидеть, что элемент оформления Dojo Tree правильно отображает данные из ArrayList, как показано на <<final,снимке экрана>> выше.
link:/about/contact_form.html?to=3&subject=Feedback:%20Connecting%20a%20Dojo%20Tree%20to%20an%20ArrayList[+Мы ждем ваших отзывов+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_zh_CN.asciidoc
index a55a5b1..1155c9f 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-dojo_zh_CN.asciidoc
@@ -50,7 +50,9 @@ image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 Net
_或_
Tomcat Servlet 容器 |Open Source Edition 3.1.x 或 4.x
_ _
-7.x 或 8.x
+
+[start=7]
+.x 或 8.x
|link:http://www.dojotoolkit.org/download[+Dojo 工具包+] |版本 1.8.x 或更高版本
@@ -63,6 +65,7 @@ _ _
* 您需要具有 Internet 连接，才能完成此教程中包括的若干个步骤。
* NetBeans IDE Java EE 下载包安装允许您选择性地安装 GlassFish Server Open Source Edition 并在 IDE 中注册。在此教程中，您需要服务器来模拟客户端-服务器通信。
* 完成的项目如下所示：
+
image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练习"]
@@ -72,7 +75,7 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
首先在 IDE 中打开样例项目。打开项目后，在 "Projects"（项目）窗口中展开项目节点，并检查在项目中使用的 Dojo 资源和库。
1. 将教程的 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip[+Dojo 样例项目+]下载到计算机上的某个位置。
-2. 单击 IDE 工具栏中的 "Open Project"（打开项目）按钮 (image::images/open-project-btn.png[]) 按钮以打开 "Open Project"（打开项目）对话框。
+2. 单击 IDE 工具栏中的 "Open Project"（打开项目）按钮 (image:images/open-project-btn.png[]) 按钮以打开 "Open Project"（打开项目）对话框。
3. 在 "Open Project"（打开项目）对话框中，定位至计算机上的 Dojo 样例项目并单击 "Open Project"（打开项目）。
当在 IDE 中打开 `DojoTreeSample` 项目时，您将看到该项目带有一个错误标记以便指示存在引用问题。
@@ -83,7 +86,9 @@ image::images/proj-win-ref-problems.png[title="项目引用问题由红色文本
*注：*"Projects"（项目）窗口（Ctrl-1 组合键；在 Mac 上为 ⌘-1 组合键）提供了重要项目内容的_逻辑视图_，也是项目源的主入口点。"Files"（文件）窗口（Ctrl-2 组合键；在 Mac 上为 ⌘-2 组合键）显示_基于目录的项目视图_，其中包括 "Projects"（项目）窗口中未显示的任何文件和文件夹。
-4. 在 "Projects"（项目）窗口中展开 `Web Pages`（Web 页）节点。
+
+[start=4]
+. 在 "Projects"（项目）窗口中展开 `Web Pages`（Web 页）节点。
您可以看到 ``resources`` 文件夹已在 "Projects"（项目）窗口中的 `Web Pages`（Web 页）节点下列出。 ``resources`` 文件夹包含 link:http://www.dojotoolkit.org/download[+Dojo 工具包+]中的 Dojo 核心和 Dijit 库。为了实现 Dojo 的树窗口部件，您需要两个组件：来自 Core 库的 `ItemFileReadStore` 模块以及 Dijit 库中包含的`树`窗口部件本身。
@@ -92,7 +97,9 @@ image::images/proj-win-ref-problems.png[title="项目引用问题由红色文本
*注：*此项目不需要 `DojoX` 库。
-5. 在 "Projects"（项目）窗口中展开 `Libraries`（库）节点，并确认所有必需库均在类路径上。
+
+[start=5]
+. 在 "Projects"（项目）窗口中展开 `Libraries`（库）节点，并确认所有必需库均在类路径上。
*注：*根据您的配置不同，您可能需要解决缺少服务器问题。如果您在 `Libraries`（库）节点下看到 ``<Missing Java EE Server>`` （<缺少 Java EE 服务器>）节点，请右键单击项目节点，然后在弹出菜单中选择 "Resolve Missing Server Problem"（解决缺少服务器问题）。
@@ -130,7 +137,9 @@ image::images/dojo-add-server.png[title="Dojo 和 Dijit 库已添加到项目的
----
* `link:http://dojotoolkit.org/reference-guide/1.6/djConfig.html[+djConfig+]` 允许您覆盖用于控制 Dojo 运行方式的全局设置（例如，使用 `parseOnLoad` 属性）。
* `parseOnLoad` 设置为 `true` 可确保在加载页面时解析窗口部件和页面标记。
-3. 通过在 `<head>` 标记之间和添加的 `<script>` 标记下方添加以下 `@import` 语句（以粗体显示），可以为工具包中包含的 `nihilo` link:http://docs.dojocampus.org/dijit/themes[+样例主题+]添加一个链接。
+
+[start=3]
+. 通过在 `<head>` 标记之间和添加的 `<script>` 标记下方添加以下 `@import` 语句（以粗体显示），可以为工具包中包含的 `nihilo` link:http://docs.dojocampus.org/dijit/themes[+样例主题+]添加一个链接。
[source,xml]
----
@@ -151,7 +160,9 @@ image::images/dojo-add-server.png[title="Dojo 和 Dijit 库已添加到项目的
默认情况下，`nihilo` 主题包含在工具包中。通过在“项目”窗口中展开 `dijit/themes` 文件夹可以查看默认提供的其他样例主题。
-4. 在页 `<body>` 标记中添加以下类选择器可以指定使用的主题的名称。当您执行此操作时，加载到页面中的任何 Dojo 窗口部件都将使用与主题关联的样式来呈现。
+
+[start=4]
+. 在页 `<body>` 标记中添加以下类选择器可以指定使用的主题的名称。当您执行此操作时，加载到页面中的任何 Dojo 窗口部件都将使用与主题关联的样式来呈现。
[source,java]
----
@@ -181,7 +192,9 @@ image::images/dojo-add-server.png[title="Dojo 和 Dijit 库已添加到项目的
----
* `link:http://docs.dojocampus.org/dojo/data/ItemFileReadStore[+dojo.data.ItemFileReadStore+]`：从 HTTP 端点读取 JSON 结构化内容（在<<prepareServlet,准备 Servlet 以启动 JSON 响应>>中，将为此用途实现 servlet。）并将所有项都存储在内存中，以便简单、快速地进行访问。
* `link:http://docs.dojocampus.org/dijit/Tree[+dijit.Tree+]`：树窗口部件，它提供了从 `ItemFileReadStore` 中检索的 JSON 数据的视图。
-2. 添加以下代码（以粗体显示）以便添加 `ItemFileReadStore` 和 `Tree` 窗口部件。
+
+[start=2]
+. 添加以下代码（以粗体显示）以便添加 `ItemFileReadStore` 和 `Tree` 窗口部件。
[source,html]
----
@@ -218,26 +231,42 @@ image::images/dojo-add-server.png[title="Dojo 和 Dijit 库已添加到项目的
现在，我们要编译这些源代码并创建将添加到 `DojoTreeSample` 项目中的 Java 档案（JAR 文件）。
-3. 单击工具栏中的 "New Project"（新建项目）按钮 (image::images/new-project-btn.png[]) 以便打开 "New Project"（新建项目）向导。
-4. 在 "New Project"（新建项目）向导中，选择 "Java" 类别的 "Java Class Library"（Java 类库）项目模板。单击 "Next"（下一步）。
-5. 在 "Java Class Library"（Java 类库）向导的 "Name and Location"（名称和位置）面板中，键入 *`json`* 作为项目名称。单击 "Finish"（完成）。
+
+[start=3]
+. 单击工具栏中的 "New Project"（新建项目）按钮 (image:images/new-project-btn.png[]) 以便打开 "New Project"（新建项目）向导。
+
+[start=4]
+. 在 "New Project"（新建项目）向导中，选择 "Java" 类别的 "Java Class Library"（Java 类库）项目模板。单击 "Next"（下一步）。
+
+[start=5]
+. 在 "Java Class Library"（Java 类库）向导的 "Name and Location"（名称和位置）面板中，键入 *`json`* 作为项目名称。单击 "Finish"（完成）。
单击 "Finish"（完成）后，将创建新项目并在 "Projects"（项目）窗口中将其打开。
现在，您需要按照将 Dojo 工具包资源复制到 ``DojoTreeSample`` 项目的相同方式，将下载的 JSON 资源复制到 ``json`` 项目。
-6. 提取 `JSON-java-master.zip` 档案并复制（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）根文件夹中的 Java 源文件。
+
+[start=6]
+. 提取 `JSON-java-master.zip` 档案并复制（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）根文件夹中的 Java 源文件。
*注：*您无需复制同样也位于所提取档案的根文件夹中的 `zip` 文件夹及其内容。
-7. 在 IDE 的 "Projects"（项目）窗口中，右键单击 "Source Packages"（源包）节点，然后在弹出菜单中选择 "New"（新建）> "Java Package"（Java 包）。
-8. 键入 *json* 作为包名称。单击 "Finish"（完成）。
-9. 右键单击 `json` 源包，然后在弹出菜单中选择 "Paste"（粘贴）。
+
+[start=7]
+. 在 IDE 的 "Projects"（项目）窗口中，右键单击 "Source Packages"（源包）节点，然后在弹出菜单中选择 "New"（新建）> "Java Package"（Java 包）。
+
+[start=8]
+. 键入 *json* 作为包名称。单击 "Finish"（完成）。
+
+[start=9]
+. 右键单击 `json` 源包，然后在弹出菜单中选择 "Paste"（粘贴）。
展开此包时，您可以看到 ``json`` 源。
image::images/proj-win-json-sources.png[title="源文件现已包含在新的 "json" 项目中"]
-10. 在 "Projects"（项目）窗口中右键单击 `json` 项目节点，然后选择 "Clean and Build"（清理并构建）构建项目。
+
+[start=10]
+. 在 "Projects"（项目）窗口中右键单击 `json` 项目节点，然后选择 "Clean and Build"（清理并构建）构建项目。
在构建项目时，所有 Java 类都将编译到 `.class` 文件中。IDE 会创建一个 `build` 文件夹来包含编译的类，同时创建一个 `dist` 文件夹来包含项目的 JAR 文件。从 IDE 的 "Files"（文件）窗口中可以查看这些文件夹。
@@ -247,7 +276,9 @@ image::images/files-win-compiled-classes.png[title="可在项目的 "build&
现在，您已具有 `json.jar` 文件，因此可以解决 `DojoTreeSample` 项目自打开以来显现的引用问题。
-11. 在 "Projects"（项目）窗口中，右键单击 `DojoTreeSample` 的 "Libraries"（库）节点并选择 "Add JAR/Folder"（添加 JAR/文件夹）。然后，在对话框中，导航至 `json` 项目的 `dist` 文件夹的位置并选择 `json.jar` 文件。
+
+[start=11]
+. 在 "Projects"（项目）窗口中，右键单击 `DojoTreeSample` 的 "Libraries"（库）节点并选择 "Add JAR/Folder"（添加 JAR/文件夹）。然后，在对话框中，导航至 `json` 项目的 `dist` 文件夹的位置并选择 `json.jar` 文件。
或者，也可以右键单击 "Libraries"（库）节点，然后在弹出菜单中选择 "Add Project"（添加项目）并在 "Add Project"（添加项目）对话框中定位 `json` 项目。
@@ -257,8 +288,12 @@ image::images/libraries-json-jar.png[title="JAR 文件由项目引用"]
*注：*尽管 `json.jar` 文件列在项目的 `Libraries` 节点下，但该文件却是从原始位置引用的，而不是复制并添加到项目中的（例如，您将无法在 "Files"（文件）窗口中的 `DojoTreeSample` 项目下找到它）。因此，如果更改 JAR 文件的位置，引用将中断。
-12. 展开 `Source Packages`（源包）> `dojo.indians` 包并双击 `Tribe` 和 `TribeDataManager` 类，以便在编辑器中将其打开。
-13. 向两个类中添加必要的 import 语句。在每个类中，右键单击编辑器并选择 "Fix Imports"（修复导入）。
+
+[start=12]
+. 展开 `Source Packages`（源包）> `dojo.indians` 包并双击 `Tribe` 和 `TribeDataManager` 类，以便在编辑器中将其打开。
+
+[start=13]
+. 向两个类中添加必要的 import 语句。在每个类中，右键单击编辑器并选择 "Fix Imports"（修复导入）。
`Tribe` 类需要以下导入：
@@ -280,7 +315,9 @@ import dojo.org.json.JSONObject;
请注意，link:http://json.org/java[+http://json.org/java+] 中还提供用于 JSON 的 API - 以后检查 `Tribe` 和 `TribeDataManager` 中的代码时，可能要使此页保持打开状态。
-14. 检查 `TribeDataManager` 中的 ArrayList。ArrayList 是 `Tribe` 对象的集合。查看 ArrayList 的第一个元素，您可以看到创建了一个新 `Tribe` 对象并将其添加到了列表中：
+
+[start=14]
+. 检查 `TribeDataManager` 中的 ArrayList。ArrayList 是 `Tribe` 对象的集合。查看 ArrayList 的第一个元素，您可以看到创建了一个新 `Tribe` 对象并将其添加到了列表中：
[source,java]
----
@@ -288,7 +325,9 @@ import dojo.org.json.JSONObject;
indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));
----
每个 `Tribe` 对象捕获三个信息点：_tribe_、_category_ 和 _region_。此练习中的数据摘自维基百科中有关 link:http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification[+Native Americans in the United States+] 的条目。您可以确定，在一个 category 中可以对多个 _tribe __分类_，一个大的 _region_ 中可以包含许多 category。
-15. 在编辑器中打开 `Tribe` 类，并请注意，它基本上是 link:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+]，`toJSONObject()` 方法除外：
+
+[start=15]
+. 在编辑器中打开 `Tribe` 类，并请注意，它基本上是 link:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+]，`toJSONObject()` 方法除外：
[source,java]
----
@@ -301,8 +340,12 @@ public JSONObject toJSONObject() throws JSONException {
return jo;
}
----
-16. 切换回 `TribeDataManager`（Ctrl-Tab 组合键）并检查该类中包括的方法。打开导航器（Ctrl-7 组合键；在 Mac 上为 ⌘-7 组合键），以查看该类中包含的字段和属性的列表。
+
+[start=16]
+. 切换回 `TribeDataManager`（Ctrl-Tab 组合键）并检查该类中包括的方法。打开导航器（Ctrl-7 组合键；在 Mac 上为 ⌘-7 组合键），以查看该类中包含的字段和属性的列表。
+
image::images/dojo-navigator.png[title="使用导航器查看类字段和属性"]
+
其中包含的最重要方法是 `getIndiansAsJSONObject()`。此方法会扫描 ArrayList，处理数据，并以 `JSONObject` 的形式返回它。JSONObject 的 `String` 形式是 Dojo 的 `ItemFileReadStore` 所需要的。
[source,java]
@@ -329,9 +372,14 @@ public static JSONObject getIndiansAsJSONObject() throws JSONException {
return jo;
}
----
-17. 在 `getIndiansAsJSONObject()` 方法中打开 Javadoc。通过返回到导航器（Ctrl-7 组合键；在 Mac 上为 ⌘-7 组合键）并将光标悬停于方法上方可以执行此操作。否则，请从主菜单中选择 "Window"（窗口）> "Other"（其他）> "Javadoc"，然后在编辑器中单击方法签名。
+
+[start=17]
+. 在 `getIndiansAsJSONObject()` 方法中打开 Javadoc。通过返回到导航器（Ctrl-7 组合键；在 Mac 上为 ⌘-7 组合键）并将光标悬停于方法上方可以执行此操作。否则，请从主菜单中选择 "Window"（窗口）> "Other"（其他）> "Javadoc"，然后在编辑器中单击方法签名。
+
image::images/javadoc-window.png[title="TribeDataManager 的 Javadoc 提供 JSON 数据的示例"]
-18. 检查在 Javadoc 中提供的 JSON 数据的示例。请注意，数据格式符合 link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+Dojo 文档+]中提供的示例。
+
+[start=18]
+. 检查在 Javadoc 中提供的 JSON 数据的示例。请注意，数据格式符合 link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+Dojo 文档+]中提供的示例。
=== NetBeans IDE 的 Java 调试器
@@ -339,11 +387,20 @@ public static JSONObject getIndiansAsJSONObject() throws JSONException {
您将实现一个 Servlet，它将在下一步中调用 `getIndiansAsJSONObject()` 方法。在执行此操作后，您可以执行下列步骤以便使用 IDE Java 调试器逐步执行此方法，并检查 `JSONObject` 的格式。
1. 在方法中设置断点（在编辑器的左旁注中单击行号（即第 99 行））。
+
image::images/debugger-breakpoint.png[title="使用 Java 调试器逐步执行代码"]
-2. 在 "Projects"（项目）窗口中选择 ``DojoTreeSample`` 项目。
-3. 运行调试器（在工具栏中单击 "Debug Project"（调试项目）按钮 (image::images/debug-btn.png[])）。
-4. 使用工具栏中的 "Step Into"（步入）(image::images/step-into-btn.png[]) 和 "Step Over"（步过）(image::images/step-over-btn.png[]) 按钮。
-5. 在 "Local Variables"（局部变量）窗口中检查变量和表达式值（"Window"（窗口）> "Debugging"（调试）> "Variables"（变量））。
+
+[start=2]
+. 在 "Projects"（项目）窗口中选择 ``DojoTreeSample`` 项目。
+
+[start=3]
+. 运行调试器（在工具栏中单击 "Debug Project"（调试项目）按钮 (image:images/debug-btn.png[])）。
+
+[start=4]
+. 使用工具栏中的 "Step Into"（步入）(image:images/step-into-btn.png[]) 和 "Step Over"（步过）(image:images/step-over-btn.png[]) 按钮。
+
+[start=5]
+. 在 "Local Variables"（局部变量）窗口中检查变量和表达式值（"Window"（窗口）> "Debugging"（调试）> "Variables"（变量））。
有关 Java 调试器的详细信息，请参见以下屏幕快照：
@@ -364,14 +421,19 @@ image::images/debugger-breakpoint.png[title="使用 Java 调试器逐步执行
1. 在 "Projects"（项目）窗口中，右键单击 `dojo.indians` 源包并选择 "New"（新建）> "Servlet"。
2. 在 "New Servlet"（新建 Servlet）向导中，键入 *`TribeServlet`* 作为类名。确认已将 `dojo.indians` 指定为包。单击 "Next"（下一步）。
+
image::images/new-servlet-wizard.png[title="使用新建 Servlet 向导创建 Servlet"]
-3. 确认默认的 "Servlet Name"（Servlet 名称）和 "URL Patterns"（URL 模式）值正确。单击 "Finish"（完成）将为 Servlet 生成框架类。
+
+[start=3]
+. 确认默认的 "Servlet Name"（Servlet 名称）和 "URL Patterns"（URL 模式）值正确。单击 "Finish"（完成）将为 Servlet 生成框架类。
Servlet 的功能是调用 `getIndiansAsJSONObject()` 方法，并使用来自此方法的数据响应客户端请求。为了准备 JSON 格式的响应，必须首先将响应的 MIME 类型设置为 JSON 格式。
*注：*此向导会自动将 Servlet 名称和 URL 模式添加到 `web.xml` 中。因此，对用于 `TribeServlet` 的主机域的任何请求（即 `http://localhost:8080/DojoTreeSample/`）都将由 `dojo.indians.TribeServlet` 类来处理。如果在编辑器中打开 `web.xml`，您可以看到此文件现在包含 `<servlet>` 和 `<servlet-mapping>` 元素。
-4. 通过执行以下更改（以粗体显示）来修改 `processRequest()` 方法。
+
+[start=4]
+. 通过执行以下更改（以粗体显示）来修改 `processRequest()` 方法。
[source,java]
----
@@ -381,7 +443,9 @@ response.setContentType("*application/json*");
此更改将设置 HTTP 响应的 `Content-Type` 头，以指示任何返回的内容均为 JSON 格式。
-5. 将 `processRequest()` 方法的 `try` 块内的注释代码替换为以下代码（更改以*粗体*显示）：
+
+[start=5]
+. 将 `processRequest()` 方法的 `try` 块内的注释代码替换为以下代码（更改以*粗体*显示）：
[source,java]
----
@@ -404,7 +468,9 @@ try {
要重新格式化代码，请在编辑器中单击右键并选择 "Format"（格式化代码）。
-6. 使用 IDE 的提示添加以下 import 语句。
+
+[start=6]
+. 使用 IDE 的提示添加以下 import 语句。
[source,java]
----
@@ -412,7 +478,9 @@ try {
import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;
----
-7. 要运行项目，请在 "Projects"（项目）窗口中选择 `DojoTreeSample` 项目节点，然后单击 IDE 工具栏中的 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮。
+
+[start=7]
+. 要运行项目，请在 "Projects"（项目）窗口中选择 `DojoTreeSample` 项目节点，然后单击 IDE 工具栏中的 "Run Project"（运行项目）(image:images/run-project-btn.png[]) 按钮。
浏览器将打开以显示欢迎页 (`dojoDemo.html`)，您可以看到 Dojo 数窗口部件正在正确显示 ArrayList 中的数据，如<<final,上面的屏幕快照>>所示。
link:/about/contact_form.html?to=3&subject=Feedback:%20Connecting%20a%20Dojo%20Tree%20to%20an%20ArrayList[+请将您的反馈意见发送给我们+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery.asciidoc
index 5530e76..20abe71 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery.asciidoc
@@ -62,20 +62,35 @@ NOTE: If you plan to work in a PHP project, you'll need to download PHP and conf
2. If you want to work in a PHP project, select the *PHP* category, then select or *PHP Application*.
If you want to work in a Java Web project, select the *Java Web* category, then select *Web Application*.
-3. Click Next and name the project `jqproject`. Also, specify the directory on your computer where you want save the project. Click Next.
-4. In Step 3, for purposes of this tutorial, accept default settings provided in the wizard.
+
+[start=3]
+. Click Next and name the project `jqproject`. Also, specify the directory on your computer where you want save the project. Click Next.
+
+[start=4]
+. In Step 3, for purposes of this tutorial, accept default settings provided in the wizard.
*Note:* If you are creating a PHP project for the first time and need help, see Configuring Your Environment for PHP Development in the link:../../trails/php.html[+PHP Learning Trail+].
-5. Click *Finish* to complete the wizard and create a new project. The `jqproject` opens in the Projects window, and the project welcome file opens in the editor.
-6. Create a plain HTML file, which you can work in for the remainder of this tutorial. Because the jQuery code that we'll be adding does not require any communication with a back-end server, we'll just run the HTML file in a browser to view results.
+
+[start=5]
+. Click *Finish* to complete the wizard and create a new project. The `jqproject` opens in the Projects window, and the project welcome file opens in the editor.
+
+[start=6]
+. Create a plain HTML file, which you can work in for the remainder of this tutorial. Because the jQuery code that we'll be adding does not require any communication with a back-end server, we'll just run the HTML file in a browser to view results.
Right-click the project node and choose New > HTML file (Ctrl-N).
-7. Name the file `index`, then click *Finish*. In the Projects window, note that the new `index.html` file is listed within the project, and that the file opens in the editor.
-8. Take a look at what the welcome page looks like in a browser. To do so, right-click the `index.html` node in the Projects window and choose View. (You can also choose View from the file's right-click menu in the editor.) The page displays in a browser window.
+
+[start=7]
+. Name the file `index`, then click *Finish*. In the Projects window, note that the new `index.html` file is listed within the project, and that the file opens in the editor.
+
+[start=8]
+. Take a look at what the welcome page looks like in a browser. To do so, right-click the `index.html` node in the Projects window and choose View. (You can also choose View from the file's right-click menu in the editor.) The page displays in a browser window.
+
image::images/browser-test.png[title="View the empty HTML template in a browser window"]
-9. In the `index.html` file in the NetBeans editor, type in `jQuery Test Project` between the `<title>` tags, and create a pair of `<style>` tags within the page's `<head>` tags. (Changes in *bold*.)
+
+[start=9]
+. In the `index.html` file in the NetBeans editor, type in `jQuery Test Project` between the `<title>` tags, and create a pair of `<style>` tags within the page's `<head>` tags. (Changes in *bold*.)
[source,xml]
----
@@ -93,11 +108,17 @@ image::images/browser-test.png[title="View the empty HTML template in a browser
</body>
</html>
----
-10. Configure your project so that the `index.html` file displays as the welcome file when the application is deployed and run. To do so, right-click the `jqproject` node in the Projects window and choose Properties.
+
+[start=10]
+. Configure your project so that the `index.html` file displays as the welcome file when the application is deployed and run. To do so, right-click the `jqproject` node in the Projects window and choose Properties.
* *PHP projects:* Select the *Run Configuration* category, then type in `index.html` in the *Index File* field.
* *Java Web projects:* Select the *Run* category, then type in `index.html` in the *Relative URL* field.
-11. Click OK to close the Project Properties window and save changes.
-12. At this stage, you can delete the original index file that was created with your project. In PHP projects, this is the `index.php` file; in Java Web projects, this is the `index.jsp` file.
+
+[start=11]
+. Click OK to close the Project Properties window and save changes.
+
+[start=12]
+. At this stage, you can delete the original index file that was created with your project. In PHP projects, this is the `index.php` file; in Java Web projects, this is the `index.jsp` file.
To delete the file, right-click the file in the Projects window and choose Delete. In the confirmation dialog that displays, click *Yes*.
@@ -112,14 +133,20 @@ Choose the uncompressed version, i.e., 'Development', before downloading. Using
To add the jQuery library to your NetBeans project, simply copy the library folder from its location on your computer, and paste it directly into your project in the IDE's Projects window. Details follow.
-1. In the IDE, create a folder named `js`, and add it to your project. To do so, click the New File ( image::images/new-file-btn.png[] ) button in the IDE's toolbar. (Alternatively, press Ctrl-N; ⌘-N on Mac.)
+1. In the IDE, create a folder named `js`, and add it to your project. To do so, click the New File ( image:images/new-file-btn.png[] ) button in the IDE's toolbar. (Alternatively, press Ctrl-N; ⌘-N on Mac.)
2. Select the *Other* category, then select *Folder*.
3. Name the folder `js`.
[alert]#For Java Web projects, ensure that you place the `js` folder in the project's web root. To do so, enter `web` in the *Parent Folder* field.#
-4. Click *Finish* to exit the wizard.
-5. Locate the jQuery library that you downloaded onto your computer. To date, the current library version is 1.4.2, so the file is typically named `jquery-1.4.2.js`. Copy the file to your clipboard (Ctrl-C; ⌘-C on Mac).
-6. Paste the library file into the new `js` folder. To do so, right-click the `js` and choose Paste (Ctrl-V; ⌘-V on Mac). The `jquery-1.4.2.js` file node appears within the folder.
+
+[start=4]
+. Click *Finish* to exit the wizard.
+
+[start=5]
+. Locate the jQuery library that you downloaded onto your computer. To date, the current library version is 1.4.2, so the file is typically named `jquery-1.4.2.js`. Copy the file to your clipboard (Ctrl-C; ⌘-C on Mac).
+
+[start=6]
+. Paste the library file into the new `js` folder. To do so, right-click the `js` and choose Paste (Ctrl-V; ⌘-V on Mac). The `jquery-1.4.2.js` file node appears within the folder.
|===
|
@@ -132,9 +159,11 @@ To add the jQuery library to your NetBeans project, simply copy the library fold
-|image::images/jquery-lib-php.png[title="Paste the jQuery library directly into your project"] |image::images/jquery-lib-java.png[title="Paste the jQuery library directly into your project"]
+|image:images/jquery-lib-php.png[title="Paste the jQuery library directly into your project"] |image:images/jquery-lib-java.png[title="Paste the jQuery library directly into your project"]
|===
-7. In the editor, reference the jQuery library from the `index.html` file. To do so, add a pair of `<script>` tags and use the `src` attribute to point to the library location. (Changes in *bold*.)
+
+[start=7]
+. In the editor, reference the jQuery library from the `index.html` file. To do so, add a pair of `<script>` tags and use the `src` attribute to point to the library location. (Changes in *bold*.)
[source,xml]
----
@@ -151,7 +180,9 @@ To add the jQuery library to your NetBeans project, simply copy the library fold
</head>
...
----
-8. Save the file (Ctrl-S; ⌘-S on Mac).
+
+[start=8]
+. Save the file (Ctrl-S; ⌘-S on Mac).
The jQuery library is now included in the `jqproject` project, and referenced from our `index.html` file. We can begin adding jQuery functionality to the page.
@@ -169,14 +200,18 @@ jQuery works by connecting dynamically-applied JavaScript attributes and behavio
<h1>Test.</h1>
----
-2. Now we'll create a CSS class that makes an element appear blue when it is applied. Enter the following between the `<style>` tags in the `<head>` of the document:
+
+[start=2]
+. Now we'll create a CSS class that makes an element appear blue when it is applied. Enter the following between the `<style>` tags in the `<head>` of the document:
[source,java]
----
.blue { color: blue; }
----
-3. Next we'll set up a place to put our jQuery commands. Add a new set of `<script>` tags to the `<head>` of the document, e.g., after the `<script>` tags linking to the jQuery library. (Changes in *bold*.)
+
+[start=3]
+. Next we'll set up a place to put our jQuery commands. Add a new set of `<script>` tags to the `<head>` of the document, e.g., after the `<script>` tags linking to the jQuery library. (Changes in *bold*.)
[source,xml]
----
@@ -201,7 +236,9 @@ jQuery works by connecting dynamically-applied JavaScript attributes and behavio
You can tidy up your code by right-clicking in the editor and choosing Format.
The jQuery instructions that we will add must be executed only after all of the elements of the DOM have been loaded by the browser. This is important because jQuery behaviors connect to elements of the DOM, and these elements must be available to jQuery in order to get the results we expect. jQuery takes care of this for us through its built-in `(document).ready` function, which follows the jQuery object, represented by `$`.
-4. Enter this construction between the script tags you just created:
+
+[start=4]
+. Enter this construction between the script tags you just created:
[source,java]
----
@@ -250,7 +287,9 @@ At this stage, the `index.html` file should look as follows:
</body>
</html>
----
-5. To demonstrate how jQuery syntax works, let's try something simple. We'll add jQuery instructions to our page that will make the word 'Test' turn blue when we click on it. To accomplish this, we want jQuery to add the CSS class `.blue` to the `<h1>` element of the DOM when it receives a mouse click.
+
+[start=5]
+. To demonstrate how jQuery syntax works, let's try something simple. We'll add jQuery instructions to our page that will make the word 'Test' turn blue when we click on it. To accomplish this, we want jQuery to add the CSS class `.blue` to the `<h1>` element of the DOM when it receives a mouse click.
Enter the following code inside the `(document).ready` function, between the braces `{}`:
@@ -261,11 +300,16 @@ $("h1").click(function(){
$(this).addClass("blue");
});
----
-6. Save the document (Ctrl-S; ⌘-S on Mac), then right-click in the editor and choose View to load it in your web browser. Test it to see if it works. When you click on the word 'Test', it should turn blue.
+
+[start=6]
+. Save the document (Ctrl-S; ⌘-S on Mac), then right-click in the editor and choose View to load it in your web browser. Test it to see if it works. When you click on the word 'Test', it should turn blue.
+
image::images/blue-test.png[title="Text turns blue when clicked upon"]
This example uses the jQuery `click()` function to invoke the jQuery `addClass()` function when an element matching the CSS selector "`h1`" is encountered. The `$(this)` refers back to the calling element. If we were to add more `<h1>`s to our page, the same behavior will be applied to all of them with this single set of rules, and each will interact with jQuery independently. (You can try this yourself as a quick exercise.)
-7. Another important quality of jQuery is that functions can be simply chained together to create more complicated or even sequenced behaviors. To demonstrate this let's add a jQuery instruction for a slow fadeOut to our `click()` function. Place a `fadeOut("slow")` jQuery function after the `addClass` function so that the line of code looks like this:
+
+[start=7]
+. Another important quality of jQuery is that functions can be simply chained together to create more complicated or even sequenced behaviors. To demonstrate this let's add a jQuery instruction for a slow fadeOut to our `click()` function. Place a `fadeOut("slow")` jQuery function after the `addClass` function so that the line of code looks like this:
[source,java]
----
@@ -283,7 +327,9 @@ $(document).ready(function(){
});
});
----
-8. In the browser, refresh the page and then click 'Test.' You will see that it turns blue, and then fades out, disappearing from the page. (To try it again, you must refresh the page.)
+
+[start=8]
+. In the browser, refresh the page and then click 'Test.' You will see that it turns blue, and then fades out, disappearing from the page. (To try it again, you must refresh the page.)
=== NetBeans Code Completion and API Support
@@ -363,7 +409,9 @@ If you have not already done so, visit link:http://jqueryui.com/download[+http:/
</div>
----
Observe that the overall enclosing `<div>` element is given an `id` attribute with a value of `infolist`. Within this `<div>` element, there are four sets of `<h3>` tags and `<div>` tags that contain an image and unordered list.
-2. Add a few inline CSS rules to the above markup. Delete the `.blue` style rule you created for testing purposes above. In its place, add the following rules. (Changes in *bold*.)
+
+[start=2]
+. Add a few inline CSS rules to the above markup. Delete the `.blue` style rule you created for testing purposes above. In its place, add the following rules. (Changes in *bold*.)
[source,xml]
----
@@ -378,27 +426,42 @@ Observe that the overall enclosing `<div>` element is given an `id` attribute wi
When you type within `<style>` tags, take advantage of the IDE's built-in CSS code-completion by pressing Ctrl-Space.
-3. Save the file (Ctrl-S; ⌘-S on Mac).
-4. Now we'll add the the JPG portraits that are referenced in the above code fragment to our project. Retrieve the `pix` directory from the <<requiredSoftware,project resources you downloaded earlier>> and copy the entire directory to your project folder, placing it at the same level as `index.html`. After a brief moment, NetBeans automatically updates the Projects window to reflect that a new directory has been manually added to the project.
-5. Switch to your browser and refresh the page.
+
+[start=3]
+. Save the file (Ctrl-S; ⌘-S on Mac).
+
+[start=4]
+. Now we'll add the the JPG portraits that are referenced in the above code fragment to our project. Retrieve the `pix` directory from the <<requiredSoftware,project resources you downloaded earlier>> and copy the entire directory to your project folder, placing it at the same level as `index.html`. After a brief moment, NetBeans automatically updates the Projects window to reflect that a new directory has been manually added to the project.
+
+[start=5]
+. Switch to your browser and refresh the page.
+
image::images/structured-list.png[title="Structured list displays in a browser"]
There are a number of problems with this document that we will address. Firstly, it is more difficult than it needs to be to scan the list quickly to find the person you're looking for: one must scroll the page and visually inspect a lot of information that may not be of immediate interest. Four contacts in a list might be manageable, but if the number grew to say, 50, then the list would become much more difficult to use. Secondly, the document is visually plain, and is unlikely to blen [...]
-6. To produce the accordion effect, navigate to the location on your computer where you downloaded the accordion widget. Within the downloaded folder, you'll find a folder named '`development-bundle`'. Within the `development-bundle` folder, expand the `ui` folder and locate the following three scripts:
+
+[start=6]
+. To produce the accordion effect, navigate to the location on your computer where you downloaded the accordion widget. Within the downloaded folder, you'll find a folder named '`development-bundle`'. Within the `development-bundle` folder, expand the `ui` folder and locate the following three scripts:
* `jquery.ui.core.js`
* `jquery.ui.widget.js`
* `jquery.ui.accordion.js`
Development versions of toolkit scripts are _unminimized_, meaning that their code is human-readable when viewed in an editor. Normally, you would want to switch to the compressed, minimized versions for a production-ready application in order to conserve download times.
-7. Copy (Ctrl-C; ⌘-C on Mac) the three scripts and, back in the IDE, paste them in the `js` folder you <<js,created earlier>> in your `jqproject` folder.
+
+[start=7]
+. Copy (Ctrl-C; ⌘-C on Mac) the three scripts and, back in the IDE, paste them in the `js` folder you <<js,created earlier>> in your `jqproject` folder.
You can paste by either pressing Ctrl-V (⌘-V on Mac), or right-clicking the `js` folder and choosing Paste.
The `development-bundle` > `ui` folder also contains a file named `jquery-ui-1.8.1.custom.js`. This file combines the three scripts listed above into a single script. You could equally paste this file into your project in place of the three individual scripts.
-8. Reference the scripts in your `index.html` page by entering three `<script>` tags linking to these new JavaScript files. You can add the `<script>` tags immediately after the `<script>` tags that refers to the core jQuery library `jquery-1.4.2.js`. Use the existing `<script>` tags as a model.
-9. Delete the test code we created inside the `(document).ready` function. You no longer need it.
+
+[start=8]
+. Reference the scripts in your `index.html` page by entering three `<script>` tags linking to these new JavaScript files. You can add the `<script>` tags immediately after the `<script>` tags that refers to the core jQuery library `jquery-1.4.2.js`. Use the existing `<script>` tags as a model.
+
+[start=9]
+. Delete the test code we created inside the `(document).ready` function. You no longer need it.
The `<head>` tags of your file should now look as follows.
@@ -421,7 +484,9 @@ The `<head>` tags of your file should now look as follows.
</script>
</head>
----
-10. To make our static, unstyled list take on the accordion behavior is as simple as adding a single line of jQuery code. Enter this line into the `(document).ready` function. (Changes in *bold*.)
+
+[start=10]
+. To make our static, unstyled list take on the accordion behavior is as simple as adding a single line of jQuery code. Enter this line into the `(document).ready` function. (Changes in *bold*.)
[source,java]
----
@@ -436,8 +501,13 @@ In this line of code, `#infolist` is a CSS selector connected to a unique DOM el
You've also specified '`autoHeight: false`' in the above snippet. This prevents the accordion widget from setting the height of each panel based on the highest content part contained within the markup. For more information, consult the link:http://docs.jquery.com/UI/Accordion[+accordion API documentation+].
-11. Save the file (Ctrl-S; ⌘-S on Mac).
-12. Go back to the web browser and refresh. Click on one of the names (other than the top one) to see the accordion effect in action. The jQuery accordion widget handles all the details of handling the DOM and responding to user mouse clicks.
+
+[start=11]
+. Save the file (Ctrl-S; ⌘-S on Mac).
+
+[start=12]
+. Go back to the web browser and refresh. Click on one of the names (other than the top one) to see the accordion effect in action. The jQuery accordion widget handles all the details of handling the DOM and responding to user mouse clicks.
+
image::images/accordion-list.png[title="Accordion widget handles user clicks and produces the accordion effect"]
@@ -451,10 +521,12 @@ Our project now has the behavior we want, but it looks quite plain and still lac
2. Within the `ui-lightness` folder, copy (Ctrl-C; ⌘-C on Mac) the `jquery-ui-1.8.1.custom.css` file, and the `images` folder, which contains all of the images necessary for the theme to render properly.
3. In the IDE, create a new folder within your project named `css`. This folder will contain the '`UI lightness`' theme for the accordion widget.
-To do so, right-click the project node and choose New > Folder. (If Folder doesn't appear as an option, click the New File ( image::images/new-file-btn.png[] ) button in the IDE's toolbar, then choose Other > Folder in the New File wizard.) Name the folder `css` and place it within the same directory as your `index.html` file.
+To do so, right-click the project node and choose New > Folder. (If Folder doesn't appear as an option, click the New File ( image:images/new-file-btn.png[] ) button in the IDE's toolbar, then choose Other > Folder in the New File wizard.) Name the folder `css` and place it within the same directory as your `index.html` file.
[alert]#For Java Web projects, ensure that you place the `css` folder in the project's web root. To do so, enter `web` in the *Parent Folder* field.#
-4. Paste the two items directly into the new `css` folder. To do so, right-click the `css` folder node and choose Paste. Your project folder should look as follows.
+
+[start=4]
+. Paste the two items directly into the new `css` folder. To do so, right-click the `css` folder node and choose Paste. Your project folder should look as follows.
|===
|
@@ -467,17 +539,24 @@ To do so, right-click the project node and choose New > Folder. (If Folder doesn
-|image::images/proj-win-php.png[title="Project contains the jQuery default theme"] |image::images/proj-win-java.png[title="Project contains the jQuery default theme"]
+|image:images/proj-win-php.png[title="Project contains the jQuery default theme"] |image:images/proj-win-java.png[title="Project contains the jQuery default theme"]
|===
-5. Reference the `jquery-ui-1.8.1.custom.css` file from within your `index.html` web page. Add the following `<link>` tag within the page's head.
+
+[start=5]
+. Reference the `jquery-ui-1.8.1.custom.css` file from within your `index.html` web page. Add the following `<link>` tag within the page's head.
[source,java]
----
<link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css">
----
-6. Save the file (Ctrl-S; ⌘-S on Mac).
-7. Return to the web browser and refresh the page. Notice that the list now displays using jQuery's default theme, which is an esthetic improvement over the plain, unstylized version.
+
+[start=6]
+. Save the file (Ctrl-S; ⌘-S on Mac).
+
+[start=7]
+. Return to the web browser and refresh the page. Notice that the list now displays using jQuery's default theme, which is an esthetic improvement over the plain, unstylized version.
+
image::images/ui-lightness-theme.png[title="jQuery default theme enhances the appearance of the accordion widget"]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_ja.asciidoc
index 770679e..8a78f13 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_ja.asciidoc
@@ -36,20 +36,7 @@ link:http://jquery.com/[+jQuery+]は軽量のJavaScriptライブラリで、こ
HTML5アプリケーションでjQueryを使用する方法の例については、link:../webclient/html5-gettingstarted.html[+HTML5アプリケーションの開始+]のチュートリアルを参照してください。
-=== 内容
-
-image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます"]
-
-* <<settingup,NetBeansプロジェクトの設定>>
-* <<addingjquery,プロジェクトへのjQueryライブラリの追加>>
-* <<gettingacquainted,jQueryに習熟する>>
-* <<addingaccordion,プロジェクトへのjQueryアコーディオン・ウィジェットの追加>>
-* <<usingcss,jQueryのデフォルト・テーマを使用したスタイル拡張>>
-* <<summary,サマリー>>
-* <<seealso,関連項目>>
-
-
-==== このチュートリアルを完了するには、次のリソースが必要です。
+== このチュートリアルを完了するには、次のリソースが必要です。
|===
|ソフトウェアまたはリソース |必須バージョン
@@ -82,20 +69,35 @@ image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、N
2. PHPプロジェクトで作業する場合は、「*PHP*」カテゴリを選択し、「*PHPアプリケーション*」を選択します。
Java Webプロジェクトで作業する場合は、「*Java Web*」カテゴリを選択し、「*Webアプリケーション*」を選択します。
-3. 「次」をクリックし、プロジェクトに`jqproject`という名前を付けます。プロジェクトを保存するコンピュータ上のディレクトリも指定します。「次」をクリックします。
-4. ステップ3で、このチュートリアルでは、ウィザードに示されるデフォルトの設定を受け入れます。
+
+[start=3]
+. 「次」をクリックし、プロジェクトに`jqproject`という名前を付けます。プロジェクトを保存するコンピュータ上のディレクトリも指定します。「次」をクリックします。
+
+[start=4]
+. ステップ3で、このチュートリアルでは、ウィザードに示されるデフォルトの設定を受け入れます。
*注意:* PHPプロジェクトを初めて作成する場合で、ヘルプが必要なときは、link:../../trails/php.html[+PHPの学習+]のPHP開発のための環境の構成を参照してください。
-5. 「*終了*」をクリックしてウィザードを完了し、新しいプロジェクトを作成します。「プロジェクト」ウィンドウに`jqproject`が開き、プロジェクトの開始ファイルがエディタで開かれます。
-6. このチュートリアルの残り部分の作業に使用できるプレーンHTMLファイルを作成します。追加しようとしているjQueryコードは、バックエンド・サーバーとの通信を必要としないため、単純にHTMLファイルをブラウザで実行して結果を表示します。
+
+[start=5]
+. 「*終了*」をクリックしてウィザードを完了し、新しいプロジェクトを作成します。「プロジェクト」ウィンドウに`jqproject`が開き、プロジェクトの開始ファイルがエディタで開かれます。
+
+[start=6]
+. このチュートリアルの残り部分の作業に使用できるプレーンHTMLファイルを作成します。追加しようとしているjQueryコードは、バックエンド・サーバーとの通信を必要としないため、単純にHTMLファイルをブラウザで実行して結果を表示します。
プロジェクト・ノードを右クリックし、「新規」>「HTMLファイル」を選択します([Ctrl]-[N])。
-7. ファイルに`index`という名前を付け、「*終了*」をクリックします。「プロジェクト」ウィンドウで、新しい`index.html`ファイルがプロジェクト内に表示され、ファイルがエディタで開かれます。
-8. 開始ページがブラウザでどのように表示されるか見てみましょう。これを行うには、「プロジェクト」ウィンドウで`index.html`ノードを右クリックし、「表示」を選択します。(エディタでファイルの右クリック・メニューから「表示」を選択することもできます。)ページがブラウザ・ウィンドウに表示されます。
+
+[start=7]
+. ファイルに`index`という名前を付け、「*終了*」をクリックします。「プロジェクト」ウィンドウで、新しい`index.html`ファイルがプロジェクト内に表示され、ファイルがエディタで開かれます。
+
+[start=8]
+. 開始ページがブラウザでどのように表示されるか見てみましょう。これを行うには、「プロジェクト」ウィンドウで`index.html`ノードを右クリックし、「表示」を選択します。(エディタでファイルの右クリック・メニューから「表示」を選択することもできます。)ページがブラウザ・ウィンドウに表示されます。
+
image::images/browser-test.png[title="ブラウザ・ウィンドウでの空のHTMLテンプレートの表示"]
-9. NetBeansエディタで、`index.html`ファイルの`<title>`タグの間に「`jQuery Test Project`」と入力し、ページの`<head>`タグの間に1組の`<style>`タグを作成します。変更場所は*太字*で示されています。
+
+[start=9]
+. NetBeansエディタで、`index.html`ファイルの`<title>`タグの間に「`jQuery Test Project`」と入力し、ページの`<head>`タグの間に1組の`<style>`タグを作成します。変更場所は*太字*で示されています。
[source,xml]
----
@@ -113,11 +115,17 @@ image::images/browser-test.png[title="ブラウザ・ウィンドウでの空の
</body>
</html>
----
-10. アプリケーションがデプロイされ実行されるときに`index.html`ファイルが開始ファイルとして表示されるように、プロジェクトを構成します。これを行うには、「プロジェクト」ウィンドウで`jqproject`ノードを右クリックし、「プロパティ」を選択します。
+
+[start=10]
+. アプリケーションがデプロイされ実行されるときに`index.html`ファイルが開始ファイルとして表示されるように、プロジェクトを構成します。これを行うには、「プロジェクト」ウィンドウで`jqproject`ノードを右クリックし、「プロパティ」を選択します。
* *PHPプロジェクト:* 「*実行構成*」カテゴリを選択し、「*開始ファイル*」フィールドに「`index.html`」と入力します。
* *Java Webプロジェクト:* 「*実行*」カテゴリを選択し、「*相対URL*」フィールドに「`index.html`」と入力します。
-11. 「OK」をクリックして「プロジェクト・プロパティ」ウィンドウを閉じ、変更を保存します。
-12. この段階で、プロジェクトとともに作成されていた元のインデックス・ファイルを削除できます。PHPプロジェクトの場合これは`index.php`ファイル、Java Webプロジェクトの場合これは`index.jsp`ファイルです。
+
+[start=11]
+. 「OK」をクリックして「プロジェクト・プロパティ」ウィンドウを閉じ、変更を保存します。
+
+[start=12]
+. この段階で、プロジェクトとともに作成されていた元のインデックス・ファイルを削除できます。PHPプロジェクトの場合これは`index.php`ファイル、Java Webプロジェクトの場合これは`index.jsp`ファイルです。
ファイルを削除するには、「プロジェクト」ウィンドウでファイルを右クリックし、「削除」を選択します。表示される確認ダイアログで、「*はい*」をクリックします。
@@ -132,14 +140,20 @@ jQueryの操作を始める前に、プロジェクトにjQueryライブラリ
NetBeansプロジェクトにjQueryライブラリを追加するには、ライブラリのフォルダをコンピュータ上の場所から単純にコピーし、IDEの「プロジェクト」ウィンドウでプロジェクトに直接貼り付けます。詳細は次のとおりです。
-1. IDEで、`js`という名前のフォルダを作成し、プロジェクトに追加します。そのためには、IDEのツールバーにある「新規ファイル」(image::images/new-file-btn.png[])ボタンをクリックします。または、[Ctrl]-[N] (Macの場合は[⌘]-[N])を押します。
+1. IDEで、`js`という名前のフォルダを作成し、プロジェクトに追加します。そのためには、IDEのツールバーにある「新規ファイル」(image:images/new-file-btn.png[])ボタンをクリックします。または、[Ctrl]-[N] (Macの場合は[⌘]-[N])を押します。
2. 「*その他*」カテゴリを選択し、「*フォルダ*」を選択します。
3. フォルダに`js`という名前を付けます。
[alert]#Java Webプロジェクトの場合は、必ずプロジェクトのWebルートに`js`フォルダを置いてください。これを行うには、「*親フォルダ*」フィールドに「`web`」と入力します。#
-4. 「*終了*」をクリックしてウィザードを終了します。
-5. コンピュータにダウンロードしたjQueryライブラリを見つけます。現在、ライブラリの最新バージョンは1.4.2なので、ファイルの名前は通常`jquery-1.4.2.js`です。ファイルをクリップボードにコピーします([Ctrl]-[C]、Macの場合は[⌘]-[C])。
-6. ライブラリ・ファイルを新しい`js`フォルダに貼り付けます。これを行うには、`js`を右クリックし、「貼付け」を選択します([Ctrl]-[V]、Macの場合は[⌘]-[V])。フォルダ内に`jquery-1.4.2.js`ファイル・ノードが表示されます。
+
+[start=4]
+. 「*終了*」をクリックしてウィザードを終了します。
+
+[start=5]
+. コンピュータにダウンロードしたjQueryライブラリを見つけます。現在、ライブラリの最新バージョンは1.4.2なので、ファイルの名前は通常`jquery-1.4.2.js`です。ファイルをクリップボードにコピーします([Ctrl]-[C]、Macの場合は[⌘]-[C])。
+
+[start=6]
+. ライブラリ・ファイルを新しい`js`フォルダに貼り付けます。これを行うには、`js`を右クリックし、「貼付け」を選択します([Ctrl]-[V]、Macの場合は[⌘]-[V])。フォルダ内に`jquery-1.4.2.js`ファイル・ノードが表示されます。
|===
|
@@ -152,9 +166,11 @@ NetBeansプロジェクトにjQueryライブラリを追加するには、ライ
-|image::images/jquery-lib-php.png[title="プロジェクトへのjQueryライブラリの直接貼付け"] |image::images/jquery-lib-java.png[title="プロジェクトへのjQueryライブラリの直接貼付け"]
+|image:images/jquery-lib-php.png[title="プロジェクトへのjQueryライブラリの直接貼付け"] |image:images/jquery-lib-java.png[title="プロジェクトへのjQueryライブラリの直接貼付け"]
|===
-7. エディタで、`index.html`ファイルからjQueryライブラリを参照します。これを行うには、1組の`<script>`タグを追加し、`src`属性を使用してライブラリの場所を指します。変更場所は*太字*で示されています。
+
+[start=7]
+. エディタで、`index.html`ファイルからjQueryライブラリを参照します。これを行うには、1組の`<script>`タグを追加し、`src`属性を使用してライブラリの場所を指します。変更場所は*太字*で示されています。
[source,xml]
----
@@ -171,7 +187,9 @@ NetBeansプロジェクトにjQueryライブラリを追加するには、ライ
</head>
...
----
-8. ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
+
+[start=8]
+. ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
これで、jQueryライブラリが`jqproject`プロジェクトに追加され、`index.html`ファイルから参照されるようになりました。jQueryの機能をページに追加し始めることができます。
@@ -189,14 +207,18 @@ jQueryは、動的に適用されるJavaScriptの属性と動作をDOM (Document
<h1>Test.</h1>
----
-2. 次に、適用される要素を青で表示するCSSクラスを作成します。ドキュメントの`<head>`の`<style>`タグの間に次のように入力します。
+
+[start=2]
+. 次に、適用される要素を青で表示するCSSクラスを作成します。ドキュメントの`<head>`の`<style>`タグの間に次のように入力します。
[source,java]
----
.blue { color: blue; }
----
-3. 次に、jQueryコマンドを置く場所を設定します。ドキュメントの`<head>`に、たとえばjQueryライブラリにリンクしている`<script>`タグの後に、新しい`<script>`タグのセットを追加します。変更場所は*太字*で示されています。
+
+[start=3]
+. 次に、jQueryコマンドを置く場所を設定します。ドキュメントの`<head>`に、たとえばjQueryライブラリにリンクしている`<script>`タグの後に、新しい`<script>`タグのセットを追加します。変更場所は*太字*で示されています。
[source,xml]
----
@@ -221,7 +243,9 @@ jQueryは、動的に適用されるJavaScriptの属性と動作をDOM (Document
エディタ内で右クリックし、「フォーマット」を選択すると、コードの体裁を整えることができます。
追加するjQuery命令は、DOMのすべての要素がブラウザにロードされた後にのみ実行される必要があります。jQuery動作はDOMの要素に接続されるので、期待する結果を得るにはこれらの要素がjQueryで使用できる必要があるため、これは重要です。jQueryは、`$`で表される、jQueryオブジェクトの後に続く組込みの`(document).ready`関数を使用して、これを処理してくれます。
-4. 先ほど作成したscriptタグの間に次の構文を追加します。
+
+[start=4]
+. 先ほど作成したscriptタグの間に次の構文を追加します。
[source,java]
----
@@ -270,7 +294,9 @@ $(function(){
</body>
</html>
----
-5. jQueryの構文がどのように機能するかを示すために、基本的なものを試してみましょう。「Test」という語をクリックしたときにそれを青に変化させるjQuery命令をページに追加します。これを行うには、jQueryがマウス・クリックを受け取ったときに、CSSクラス`.blue`をDOMの`<h1>`要素に追加するようにします。
+
+[start=5]
+. jQueryの構文がどのように機能するかを示すために、基本的なものを試してみましょう。「Test」という語をクリックしたときにそれを青に変化させるjQuery命令をページに追加します。これを行うには、jQueryがマウス・クリックを受け取ったときに、CSSクラス`.blue`をDOMの`<h1>`要素に追加するようにします。
`(document).ready`関数内の中括弧`{}`の間に、次のコードを入力します。
@@ -281,11 +307,16 @@ $("h1").click(function(){
$(this).addClass("blue");
});
----
-6. ドキュメントを保存し([Ctrl]-[S]、Macの場合は[⌘]-[S])、エディタ内で右クリックし、「表示」を選択してWebブラウザにロードします。機能するかどうかテストします。「Test」という語をクリックすると、青に変化するはずです。
+
+[start=6]
+. ドキュメントを保存し([Ctrl]-[S]、Macの場合は[⌘]-[S])、エディタ内で右クリックし、「表示」を選択してWebブラウザにロードします。機能するかどうかテストします。「Test」という語をクリックすると、青に変化するはずです。
+
image::images/blue-test.png[title="テキストをクリックしたときの青への変化"]
この例では、CSSセレクタ"`h1`" に一致する要素が見つかったときに、jQueryの`click()`関数を使用してjQueryの`addClass()`関数を呼び出しています。`$(this)`はコール元の要素を参照します。複数の`<h1>`をページに追加した場合、この1セットのルールによりそれらのすべてに同じ動作が適用され、それぞれが独立してjQueryと対話します。(簡単な課題として自分で試すことができます。)
-7. 関数を単純に連結して、より複雑な動作や、さらには順序付けられた動作を作成できることも、jQueryの重要な特質です。これを示すために、ゆっくりフェード・アウトするjQuery命令を`click()`関数に追加しましょう。`fadeOut("slow")` jQuery関数を`addClass`関数の後に置いて、次のようなコード行にします。
+
+[start=7]
+. 関数を単純に連結して、より複雑な動作や、さらには順序付けられた動作を作成できることも、jQueryの重要な特質です。これを示すために、ゆっくりフェード・アウトするjQuery命令を`click()`関数に追加しましょう。`fadeOut("slow")` jQuery関数を`addClass`関数の後に置いて、次のようなコード行にします。
[source,java]
----
@@ -303,7 +334,9 @@ $(document).ready(function(){
});
});
----
-8. ブラウザで、ページをリフレッシュし、「Test」をクリックします。青に変化した後、フェード・アウトしてページから消えます。(再度試すには、ページをリフレッシュする必要があります。)
+
+[start=8]
+. ブラウザで、ページをリフレッシュし、「Test」をクリックします。青に変化した後、フェード・アウトしてページから消えます。(再度試すには、ページをリフレッシュする必要があります。)
=== NetBeansのコード補完とAPIサポート
@@ -383,7 +416,9 @@ IDEのJavaScriptオプションのウィンドウを開くと、コード補完
</div>
----
全体を囲んでいる`<div>`要素には、`id`属性と値`infolist`が指定されています。この`<div>`要素内に、`<h3>`タグと`<div>`タグが4セットあり、イメージと順序なしリストが含まれています。
-2. 前述のマークアップにいくつかのインラインCSSルールを追加します。テストの目的で作成した`.blue`スタイル・ルールを削除します。その場所に、次のルールを追加します。変更場所は*太字*で示されています。
+
+[start=2]
+. 前述のマークアップにいくつかのインラインCSSルールを追加します。テストの目的で作成した`.blue`スタイル・ルールを削除します。その場所に、次のルールを追加します。変更場所は*太字*で示されています。
[source,xml]
----
@@ -398,27 +433,42 @@ IDEのJavaScriptオプションのウィンドウを開くと、コード補完
`<style>`タグ内に入力するときは、[Ctrl]-[Space]を押して、IDEに組み込まれているCSSコード補完を利用します。
-3. ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
-4. 次に、上記のコード・フラグメントで参照されているJPG人物写真を追加します。<<requiredSoftware,先にダウンロードしたプロジェクト・リソース>>から`pix`ディレクトリを取出し、ディレクトリ全体をプロジェクト・フォルダにコピーして`index.html`と同じレベルに置きます。まもなく、NetBeansで「プロジェクト」ウィンドウが自動的に更新され、新しいディレクトリがプロジェクトに手動で追加されたことが反映されます。
-5. ブラウザに切り替え、ページをリフレッシュします。
+
+[start=3]
+. ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
+
+[start=4]
+. 次に、上記のコード・フラグメントで参照されているJPG人物写真を追加します。<<requiredSoftware,先にダウンロードしたプロジェクト・リソース>>から`pix`ディレクトリを取出し、ディレクトリ全体をプロジェクト・フォルダにコピーして`index.html`と同じレベルに置きます。まもなく、NetBeansで「プロジェクト」ウィンドウが自動的に更新され、新しいディレクトリがプロジェクトに手動で追加されたことが反映されます。
+
+[start=5]
+. ブラウザに切り替え、ページをリフレッシュします。
+
image::images/structured-list.png[title="ブラウザに表示された構造化リスト"]
このドキュメントにはいくつか問題があり、対処していきます。まず、探している人物をすばやく見つけるためにリストに目を通すことが、必要以上に困難になっています。ページをスクロールし、直接には関心のない多量の情報を目で調べる必要があります。リスト内の連絡先が4件なら扱えるかもしれませんが、たとえば50件に増えると、リストははるかに使用しづらくなるでしょう。次に、ドキュメントは視覚的に単純で、ほとんどのWebサイト・デザイン、特に、グラフィックの個性の強いデザインとは外観的に調和しないでしょう。jQueryアコーディオン・ウィジェットをjQuery UIのデフォルト・テーマと組み合せて使用することで、これらの問題に対処します。
-6. アコーディオン効果を生成するには、アコーディオン・ウィジェットをダウンロードしたコンピュータ上の場所に移動します。ダウンロードしたフォルダの中に、「`development-bundle`」という名前のフォルダがあります。`development-bundle`フォルダ内の`ui`フォルダを展開し、次の3つのスクリプトを見つけます。
+
+[start=6]
+. アコーディオン効果を生成するには、アコーディオン・ウィジェットをダウンロードしたコンピュータ上の場所に移動します。ダウンロードしたフォルダの中に、「`development-bundle`」という名前のフォルダがあります。`development-bundle`フォルダ内の`ui`フォルダを展開し、次の3つのスクリプトを見つけます。
* `jquery.ui.core.js`
* `jquery.ui.widget.js`
* `jquery.ui.accordion.js`
Developmentバージョンのツールキットのスクリプトは_最小化されていない_ため、コードをエディタで表示して人間が読むことができます。通常、本番の準備ができたアプリケーションに使用する場合は、ダウンロード時間の節約のために、圧縮され最小化されたバージョンに切り替えることをお薦めします。
-7. 3つのスクリプトをコピーし([Ctrl]-[C]、Macの場合は[⌘]-[C])、IDEに戻り、`jqproject`フォルダ内に<<js,先に作成した>>`js`フォルダに貼り付けます。
+
+[start=7]
+. 3つのスクリプトをコピーし([Ctrl]-[C]、Macの場合は[⌘]-[C])、IDEに戻り、`jqproject`フォルダ内に<<js,先に作成した>>`js`フォルダに貼り付けます。
[Ctrl]-[V] (Macの場合は[⌘]-[V])を押すか、`js`フォルダを右クリックして「貼付け」を選択することで、貼付けできます。
`development-bundle`フォルダ内の`ui`フォルダには、`jquery-ui-1.8.1.custom.js`という名前のファイルもあります。このファイルは、前述の3つのスクリプトを1つのスクリプトにまとめたものです。3つの個別のスクリプトのかわりに、このファイルをプロジェクトに貼り付けることもできます。
-8. `index.html`ページでスクリプトを参照するために、これらの新しいJavaScriptファイルにリンクする3つの`<script>`タグを入力します。`<script>`タグは、コアjQueryライブラリ`jquery-1.4.2.js`を参照する`<script>`タグの直後に追加できます。既存の`<script>`タグをモデルとして使用します。
-9. `(document).ready`関数内に作成したテスト・コードを削除します。これはもう必要ありません。
+
+[start=8]
+. `index.html`ページでスクリプトを参照するために、これらの新しいJavaScriptファイルにリンクする3つの`<script>`タグを入力します。`<script>`タグは、コアjQueryライブラリ`jquery-1.4.2.js`を参照する`<script>`タグの直後に追加できます。既存の`<script>`タグをモデルとして使用します。
+
+[start=9]
+. `(document).ready`関数内に作成したテスト・コードを削除します。これはもう必要ありません。
これで、ファイルの`<head>`タグは次のようになるはずです。
@@ -441,7 +491,9 @@ Developmentバージョンのツールキットのスクリプトは_最小化
</script>
</head>
----
-10. 静的なスタイルなしリストにアコーディオン動作を与えるには、1行のjQueryコードを追加するのみで済みます。次の行を`(document).ready`関数に追加します。変更場所は*太字*で示されています。
+
+[start=10]
+. 静的なスタイルなしリストにアコーディオン動作を与えるには、1行のjQueryコードを追加するのみで済みます。次の行を`(document).ready`関数に追加します。変更場所は*太字*で示されています。
[source,java]
----
@@ -456,8 +508,13 @@ $(document).ready(function(){
上記のスニペットでは、「`autoHeight: false`」も指定しています。これは、アコーディオン・ウィジェットが各パネルの高さをマークアップ内で最も高いコンテンツ部分に基づいて設定することを防止します。詳細は、link:http://docs.jquery.com/UI/Accordion[+アコーディオンのAPIドキュメント+]を参照してください。
-11. ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
-12. Webブラウザに戻り、リフレッシュします。いずれかの名前(最上部のもの以外)をクリックし、アコーディオン効果のアクションを確認します。jQueryアコーディオン・ウィジェットは、DOMの処理およびユーザーのマウス・クリックに対する応答の詳細をすべて処理します。
+
+[start=11]
+. ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
+
+[start=12]
+. Webブラウザに戻り、リフレッシュします。いずれかの名前(最上部のもの以外)をクリックし、アコーディオン効果のアクションを確認します。jQueryアコーディオン・ウィジェットは、DOMの処理およびユーザーのマウス・クリックに対する応答の詳細をすべて処理します。
+
image::images/accordion-list.png[title="ユーザーのクリックを処理し、アコーディオン効果を生成するアコーディオン・ウィジェット"]
@@ -471,10 +528,12 @@ image::images/accordion-list.png[title="ユーザーのクリックを処理し
2. `ui-lightness`フォルダ内で、`jquery-ui-1.8.1.custom.css`ファイルと、テーマを正しくレンダリングするために必要なすべてのイメージが含まれている`images`フォルダをコピーします([Ctrl]-[C]、Macの場合は[⌘]-[C])。
3. IDEで、`css`という名前の新しいフォルダをプロジェクト内に作成します。このフォルダに、アコーディオン・ウィジェット用の「`UI lightness`」テーマを格納します。
-これを行うには、プロジェクト・ノードを右クリックし、「新規」>「フォルダ」を選択します。(「フォルダ」がオプションとして表示されない場合は、IDEのツールバーにある「新規ファイル」(image::images/new-file-btn.png[])ボタンをクリックし、新規ファイル・ウィザードで「その他」>「フォルダ」を選択します。)フォルダに`css`という名前を付け、`index.html`ファイルと同じディレクトリ内に置きます。
+これを行うには、プロジェクト・ノードを右クリックし、「新規」>「フォルダ」を選択します。(「フォルダ」がオプションとして表示されない場合は、IDEのツールバーにある「新規ファイル」(image:images/new-file-btn.png[])ボタンをクリックし、新規ファイル・ウィザードで「その他」>「フォルダ」を選択します。)フォルダに`css`という名前を付け、`index.html`ファイルと同じディレクトリ内に置きます。
[alert]#Java Webプロジェクトの場合は、必ずプロジェクトのWebルートに`css`フォルダを置いてください。これを行うには、「*親フォルダ*」フィールドに「`web`」と入力します。#
-4. 2つの項目をこの新しい`css`フォルダに直接貼り付けます。これを行うには、`css`フォルダ・ノードを右クリックし、「貼付け」を選択します。プロジェクト・フォルダは次のようになるはずです。
+
+[start=4]
+. 2つの項目をこの新しい`css`フォルダに直接貼り付けます。これを行うには、`css`フォルダ・ノードを右クリックし、「貼付け」を選択します。プロジェクト・フォルダは次のようになるはずです。
|===
|
@@ -487,17 +546,24 @@ image::images/accordion-list.png[title="ユーザーのクリックを処理し
-|image::images/proj-win-php.png[title="プロジェクトに挿入されたjQueryデフォルト・テーマ"] |image::images/proj-win-java.png[title="プロジェクトに挿入されたjQueryデフォルト・テーマ"]
+|image:images/proj-win-php.png[title="プロジェクトに挿入されたjQueryデフォルト・テーマ"] |image:images/proj-win-java.png[title="プロジェクトに挿入されたjQueryデフォルト・テーマ"]
|===
-5. `index.html` Webページ内から`jquery-ui-1.8.1.custom.css`ファイルを参照します。ページのhead内に次の`<link>`タグを追加します。
+
+[start=5]
+. `index.html` Webページ内から`jquery-ui-1.8.1.custom.css`ファイルを参照します。ページのhead内に次の`<link>`タグを追加します。
[source,java]
----
<link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css">
----
-6. ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
-7. Webブラウザに戻り、ページをリフレッシュします。これで、jQueryのデフォルト・テーマを使用してリストが表示されるようになり、スタイル指定のない単純なリストに比べて外観が改善されました。
+
+[start=6]
+. ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
+
+[start=7]
+. Webブラウザに戻り、ページをリフレッシュします。これで、jQueryのデフォルト・テーマを使用してリストが表示されるようになり、スタイル指定のない単純なリストに比べて外観が改善されました。
+
image::images/ui-lightness-theme.png[title="jQueryデフォルト・テーマで拡張されたアコーディオン・ウィジェットの外観"]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_pt_BR.asciidoc
index 1cd73dc..1ae02ee 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_pt_BR.asciidoc
@@ -36,12 +36,7 @@ Este tutorial demonstrará como começar a usar o jQuery em projetos NetBeans e
Para obter um exemplo de como usar jQuery em uma aplicação HTML5, consulte o tutorial link:../webclient/html5-gettingstarted.html[+Conceitos Básicos sobre Aplicações HTML5+].
-
-image::images/netbeans-stamp-80-74-73.png[title="O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0"]
-
-
-
-==== Para concluir este tutorial, você precisará dos recursos a seguir:
+== Para concluir este tutorial, você precisará dos recursos a seguir:
|===
|Software ou Recurso |Versão Necessária
@@ -74,20 +69,35 @@ image::images/netbeans-stamp-80-74-73.png[title="O conteúdo desta página se ap
2. Se você deseja trabalhar em um projeto PHP, selecione a categoria *PHP* e depois selecione *Aplicação PHP*.
Se você deseja trabalhar em um projeto Java Web, selecione a categoria *Java Web* e depois selecione *aplicação Web*.
-3. Clique em Próximo e nomeie o projeto como `jqproject`. Além disso, especifique o diretório no computador onde deseja salvar o projeto. Clique em Próximo.
-4. Na Etapa 3, para os propósitos deste tutorial, aceite as definições default fornecidas no assistente.
+
+[start=3]
+. Clique em Próximo e nomeie o projeto como `jqproject`. Além disso, especifique o diretório no computador onde deseja salvar o projeto. Clique em Próximo.
+
+[start=4]
+. Na Etapa 3, para os propósitos deste tutorial, aceite as definições default fornecidas no assistente.
*Observação:* Se estiver criando um projeto PHP pela primeira vez e precisar de ajuda, consulte Configurando seu Ambiente para Desenvolvimento PHP na link:../../trails/php.html[+Trilha de Aprendizado do PHP+].
-5. Clique em *Finalizar* para concluir o assistente e criar um novo projeto. O `jqproject` será aberto na janela Projetos e o arquivo de boas-vindas do projeto, aberto no editor.
-6. Crie um arquivo HTML simples, no qual você poderá trabalhar para o restante deste tutorial. Devido ao código jQuery que será adicionado não exigir qualquer comunicação com um servidor de backend, o arquivo HTML será executado em um browser para exibir os resultados.
+
+[start=5]
+. Clique em *Finalizar* para concluir o assistente e criar um novo projeto. O `jqproject` será aberto na janela Projetos e o arquivo de boas-vindas do projeto, aberto no editor.
+
+[start=6]
+. Crie um arquivo HTML simples, no qual você poderá trabalhar para o restante deste tutorial. Devido ao código jQuery que será adicionado não exigir qualquer comunicação com um servidor de backend, o arquivo HTML será executado em um browser para exibir os resultados.
Clique com o botão direito do mouse no nó do projeto e selecione Novo > Arquivo HTML (Ctrl-N).
-7. Nomeie o arquivo como `index` e clique em *Finalizar*. Na janela Projetos, observe que o novo arquivo `index.html` está listado no projeto, e que o arquivo abre no editor.
-8. Veja como é a aparência da página de boas-vindas no browser. Para isso, clique com o botão direito do mouse no nó do `index.html` na janela Projetos e selecione Exibir. (Também é possível selecionar Exibir no menu de contexto do arquivo do editor.) A página será exibida em uma janela do browser.
+
+[start=7]
+. Nomeie o arquivo como `index` e clique em *Finalizar*. Na janela Projetos, observe que o novo arquivo `index.html` está listado no projeto, e que o arquivo abre no editor.
+
+[start=8]
+. Veja como é a aparência da página de boas-vindas no browser. Para isso, clique com o botão direito do mouse no nó do `index.html` na janela Projetos e selecione Exibir. (Também é possível selecionar Exibir no menu de contexto do arquivo do editor.) A página será exibida em uma janela do browser.
+
image::images/browser-test.png[title="Exibir o modelo HTML vazio em uma janela do browser"]
-9. No arquivo `index.html` do editor do NetBeans, digite `jQuery Test Project` entre as tags `<title>` e crie um par de tags `<style>` dentro das tags `<head>` da página. (Alterações em *negrito*.)
+
+[start=9]
+. No arquivo `index.html` do editor do NetBeans, digite `jQuery Test Project` entre as tags `<title>` e crie um par de tags `<style>` dentro das tags `<head>` da página. (Alterações em *negrito*.)
[source,xml]
----
@@ -105,11 +115,17 @@ image::images/browser-test.png[title="Exibir o modelo HTML vazio em uma janela d
</body>
</html>
----
-10. Configure seu projeto para que o `index.html` seja exibido como o arquivo de boas-vindas quando a aplicação estiver implantada e em execução. Para isso, clique com o botão direito do mouse no nó `jqproject` na janela Projetos e selecione Propriedades.
+
+[start=10]
+. Configure seu projeto para que o `index.html` seja exibido como o arquivo de boas-vindas quando a aplicação estiver implantada e em execução. Para isso, clique com o botão direito do mouse no nó `jqproject` na janela Projetos e selecione Propriedades.
* *Projetos PHP:* Selecione a categoria *Executar Configuração* e, em seguida, digite `index.html` no campo *Arquivo de Índice*.
* *Projetos Java Web:* Selecione a categoria *Executar* e, em seguida, digite `index.html` no campo *URL Relativo*.
-11. Clique em OK para fechar a janela Propriedades do Projeto e salvar as alterações.
-12. Neste estágio, é possível deletar o arquivo original de índice criado com o seu projeto. Em projetos PHP, este é o arquivo `index.php`; em projetos Java Web, este é o arquivo `index.jsp`.
+
+[start=11]
+. Clique em OK para fechar a janela Propriedades do Projeto e salvar as alterações.
+
+[start=12]
+. Neste estágio, é possível deletar o arquivo original de índice criado com o seu projeto. Em projetos PHP, este é o arquivo `index.php`; em projetos Java Web, este é o arquivo `index.jsp`.
Para deletar o arquivo, clique com o botão direito do mouse no arquivo na janela Projetos e selecione Deletar. Na caixa de diálogo de confirmação que será exibida, clique em *Sim*.
@@ -124,14 +140,20 @@ Escolha a versão descompactada, ou seja, “Development”, antes de fazer o do
Para adicionar a biblioteca do jQuery ao seu projeto NetBeans, basta copiar a pasta da biblioteca da sua localização no computador e colá-la diretamente no seu projeto na janela Projetos do IDE. Detalhes a seguir:
-1. No IDE, crie uma pasta chamada `js` e adicione-a ao seu projeto. Para fazer isso, clique no botão Novo Arquivo (image::images/new-file-btn.png[]) na barra de ferramentas do IDE. (Como alternativa, pressione Ctrl-N; ⌘-N no Mac.)
+1. No IDE, crie uma pasta chamada `js` e adicione-a ao seu projeto. Para fazer isso, clique no botão Novo Arquivo (image:images/new-file-btn.png[]) na barra de ferramentas do IDE. (Como alternativa, pressione Ctrl-N; ⌘-N no Mac.)
2. Selecione a categoria *Outro* e, em seguida, selecione *Pasta*.
3. Nomeie a pasta como `js`.
[alert]#Nos projetos Java Web, coloque a pasta `js` na raiz da Web do projeto. Para fazer isso, digite `web` no campo *Pasta Pai*.#
-4. Clique em *Finalizar* para sair do assistente.
-5. Localize a biblioteca do jQuery obtida por download no computador. No momento, a versão atual da biblioteca é 1.4.2, portanto, o arquivo é normalmente chamado de `jquery-1.4.2.js`. Copie o arquivo para a área de transferência (Ctrl-C; ⌘-C no Mac).
-6. Cole o arquivo da biblioteca na nova pasta `js`. Para isso, clique com o botão direito do mouse em `js` e selecione Colar (Ctrl-V; ⌘-V no Mac). O nó do arquivo `jquery-1.4.2.js` será exibido na pasta.
+
+[start=4]
+. Clique em *Finalizar* para sair do assistente.
+
+[start=5]
+. Localize a biblioteca do jQuery obtida por download no computador. No momento, a versão atual da biblioteca é 1.4.2, portanto, o arquivo é normalmente chamado de `jquery-1.4.2.js`. Copie o arquivo para a área de transferência (Ctrl-C; ⌘-C no Mac).
+
+[start=6]
+. Cole o arquivo da biblioteca na nova pasta `js`. Para isso, clique com o botão direito do mouse em `js` e selecione Colar (Ctrl-V; ⌘-V no Mac). O nó do arquivo `jquery-1.4.2.js` será exibido na pasta.
|===
|
@@ -144,9 +166,11 @@ Para adicionar a biblioteca do jQuery ao seu projeto NetBeans, basta copiar a pa
-|image::images/jquery-lib-php.png[title="Cole a biblioteca do jQuery diretamente no seu projeto"] |image::images/jquery-lib-java.png[title="Cole a biblioteca do jQuery diretamente no seu projeto"]
+|image:images/jquery-lib-php.png[title="Cole a biblioteca do jQuery diretamente no seu projeto"] |image:images/jquery-lib-java.png[title="Cole a biblioteca do jQuery diretamente no seu projeto"]
|===
-7. No editor, referencie a biblioteca do jQuery no arquivo `index.html`. Para tanto, adicione um par de tags `<script>` e use o atributo `src` para indicar o local da biblioteca. (Alterações em *negrito*.)
+
+[start=7]
+. No editor, referencie a biblioteca do jQuery no arquivo `index.html`. Para tanto, adicione um par de tags `<script>` e use o atributo `src` para indicar o local da biblioteca. (Alterações em *negrito*.)
[source,xml]
----
@@ -163,7 +187,9 @@ Para adicionar a biblioteca do jQuery ao seu projeto NetBeans, basta copiar a pa
</head>
...
----
-8. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
+
+[start=8]
+. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
Agora, a biblioteca do jQuery está incluída no projeto `jqproject` e será referenciada no arquivo `index.html`. Podemos começar adicionando recursos jQuery à página.
@@ -181,14 +207,18 @@ O jQuery funciona conectando atributos e comportamentos do JavaScript aplicados
<h1>Test.</h1>
----
-2. Agora, criaremos uma classe CSS que faz com que um elemento apareça azul quando ela for aplicada. Digite o seguinte entre as tags `<style>` no `<head>` do documento:
+
+[start=2]
+. Agora, criaremos uma classe CSS que faz com que um elemento apareça azul quando ela for aplicada. Digite o seguinte entre as tags `<style>` no `<head>` do documento:
[source,java]
----
.blue { color: blue; }
----
-3. A seguir, iremos configurar um local para colocar nossos comandos jQuery. Adicione um novo conjunto de tags `<script>` no `<head>` do documento, por exemplo, após as tags `<script>` vinculadas à biblioteca jQuery. (Alterações em *negrito*.)
+
+[start=3]
+. A seguir, iremos configurar um local para colocar nossos comandos jQuery. Adicione um novo conjunto de tags `<script>` no `<head>` do documento, por exemplo, após as tags `<script>` vinculadas à biblioteca jQuery. (Alterações em *negrito*.)
[source,xml]
----
@@ -213,7 +243,9 @@ O jQuery funciona conectando atributos e comportamentos do JavaScript aplicados
Você pode organizar seu código clicando com o botão direito do mouse no editor e selecionando Formato.
As instruções jQuery que adicionaremos deverão ser executadas somente depois de todos os elementos do DOM serem carregados pelo browser. Isso é importante porque os comportamentos do jQuery se conectam a elementos do DOM e esses elementos devem estar disponíveis para o jQuery para obtermos os resultados esperados. O jQuery cuida disso com sua função incorporada `(document).ready`, que segue o objeto jQuery, representado por `$`.
-4. Digite esta construção entre as tags de script recém-criadas:
+
+[start=4]
+. Digite esta construção entre as tags de script recém-criadas:
[source,java]
----
@@ -262,7 +294,9 @@ Neste estágio, o arquivo `index.html` deve se parecer com o seguinte:
</body>
</html>
----
-5. Para demonstrar como a sintaxe do jQuery funciona, tentaremos algo simples. Adicionaremos instruções jQuery à nossa página que farão com que a palavra 'Teste' fique azul quando clicarmos nela. Para fazer isso, queremos que o jQuery adicione a classe CSS `.blue` ao elemento `<h1>` do DOM quando ele for clicado.
+
+[start=5]
+. Para demonstrar como a sintaxe do jQuery funciona, tentaremos algo simples. Adicionaremos instruções jQuery à nossa página que farão com que a palavra 'Teste' fique azul quando clicarmos nela. Para fazer isso, queremos que o jQuery adicione a classe CSS `.blue` ao elemento `<h1>` do DOM quando ele for clicado.
Digite o seguinte código na função `(document).ready`, entre as chaves `{}`:
@@ -273,11 +307,16 @@ $("h1").click(function(){
$(this).addClass("blue");
});
----
-6. Salve o documento (Ctrl-S; &#8984-S no Mac), e, em seguida, clique com o botão direito do mouse no editor e escolha Exibir para carregá-lo em seu Web browser. Teste para ver se funciona. Quando você clicar na palavra 'Teste', ela deverá ficar azul.
+
+[start=6]
+. Salve o documento (Ctrl-S; &#8984-S no Mac), e, em seguida, clique com o botão direito do mouse no editor e escolha Exibir para carregá-lo em seu Web browser. Teste para ver se funciona. Quando você clicar na palavra 'Teste', ela deverá ficar azul.
+
image::images/blue-test.png[title="O texto fica azul quando clicado"]
Esse exemplo usa a função `click()` do jQuery para chamar a função `addClass()` do jQuery quando um elemento que corresponde ao seletor do CSS "`h1`" é encontrado. O `$(this)` refere-se ao elemento chamador. Se fôssemos adicionar mais `<h1>`s à nossa página, o mesmo comportamento seria aplicado a todos eles com esse único conjunto de regras e cada um interagiria com o jQuery de forma independente. (Tente você mesmo como um rápido exercício.)
-7. Outra qualidade importante do jQuery é que as funções podem ser simplesmente encadeadas para criar comportamentos mais complicados ou em sequência. Para demonstrar isso, vamos adicionar uma instrução jQuery de um fadeOut lento à nossa função `click()`. Coloque uma função jQuery `fadeOut("slow")` depois da função `addClass` para que a linha de código fique dessa forma:
+
+[start=7]
+. Outra qualidade importante do jQuery é que as funções podem ser simplesmente encadeadas para criar comportamentos mais complicados ou em sequência. Para demonstrar isso, vamos adicionar uma instrução jQuery de um fadeOut lento à nossa função `click()`. Coloque uma função jQuery `fadeOut("slow")` depois da função `addClass` para que a linha de código fique dessa forma:
[source,java]
----
@@ -295,7 +334,9 @@ $(document).ready(function(){
});
});
----
-8. No browser, atualize a página e a seguir clique em 'Teste'. Você verá que ela fica azul e esmaece, desaparecendo da página. (Para tentar novamente, é preciso atualizar a página.)
+
+[start=8]
+. No browser, atualize a página e a seguir clique em 'Teste'. Você verá que ela fica azul e esmaece, desaparecendo da página. (Para tentar novamente, é preciso atualizar a página.)
=== Autocompletar código e suporte a APIs no NetBeans
@@ -375,7 +416,9 @@ Caso ainda não o tenha feito, acesse link:http://jqueryui.com/download[+http://
</div>
----
Observe que o elemento circundado `<div>` recebe um atributo `id` com um valor de `infolist`. Dentro desse elemento `<div>`, há quatro conjuntos de tags `<h3>` e `<div>` tags que contêm uma imagem e uma lista não ordenada.
-2. Adicione algumas regras CSS em linha na marcação acima. Delete a regra de estilo `.blue` criada acima para fins de teste. Em seu lugar, adicione as regras a seguir. (Alterações em *negrito*.)
+
+[start=2]
+. Adicione algumas regras CSS em linha na marcação acima. Delete a regra de estilo `.blue` criada acima para fins de teste. Em seu lugar, adicione as regras a seguir. (Alterações em *negrito*.)
[source,xml]
----
@@ -390,27 +433,42 @@ Observe que o elemento circundado `<div>` recebe um atributo `id` com um valor d
Ao digitar nas tags `<style>`, aproveite a funcionalidade autocompletar código CSS integrada do IDE pressionando Ctrl-Espaço.
-3. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
-4. Agora, adicionaremos os retratos JPG referenciados no fragmento de código acima ao nosso projeto. Recupere o diretório `pix` dos <<requiredSoftware,recursos do projeto obtidas por download anteriormente>> e copie o diretório inteiro para a pasta do projeto, colocando-o no mesmo nível que `index.html`. Depois de um breve momento, o NetBeans automaticamente atualiza a janela Projetos para refletir que um novo diretório foi manualmente adicionado ao projeto.
-5. Alterne para o browser e atualize a página.
+
+[start=3]
+. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
+
+[start=4]
+. Agora, adicionaremos os retratos JPG referenciados no fragmento de código acima ao nosso projeto. Recupere o diretório `pix` dos <<requiredSoftware,recursos do projeto obtidas por download anteriormente>> e copie o diretório inteiro para a pasta do projeto, colocando-o no mesmo nível que `index.html`. Depois de um breve momento, o NetBeans automaticamente atualiza a janela Projetos para refletir que um novo diretório foi manualmente adicionado ao projeto.
+
+[start=5]
+. Alterne para o browser e atualize a página.
+
image::images/structured-list.png[title="Exibições de lista estruturada em um browser"]
Há uma série de problemas com este documento que trataremos. Primeiramente, é mais difícil do que o necessário varrer a lista rapidamente para encontrar a pessoa que você procura: é preciso rolar a página e inspecionar visualmente várias informações que não interessam no momento. É possível gerenciar quatro contatos em uma lista, mas, se o número crescer para, digamos, 50, será muito mais difícil utilizar a lista. Em segundo lugar, o documento é visualmente simples e é improvável que com [...]
-6. Para produzir o efeito do accordion, navegue para o local em seu computador em que você fez o download do widget accordion. Na pasta obtida por download, você encontrará uma pasta chamada '`development-bundle`'. Na pasta `development-bundle`, expanda a pasta `ui` e localize os três scripts a seguir:
+
+[start=6]
+. Para produzir o efeito do accordion, navegue para o local em seu computador em que você fez o download do widget accordion. Na pasta obtida por download, você encontrará uma pasta chamada '`development-bundle`'. Na pasta `development-bundle`, expanda a pasta `ui` e localize os três scripts a seguir:
* `jquery.ui.core.js`
* `jquery.ui.widget.js`
* `jquery.ui.accordion.js`
As versões de desenvolvimento de scripts do kit de ferramentas _não são minimizadas_, o que significa que seu código pode ser lido pelas pessoas quando exibido em um editor. Normalmente, você alternaria para as versões compactadas e minimizadas de uma aplicação pronto para a produção, de forma a economizar o tempo de download.
-7. Copie (Ctrl-C; &#8984-C no Mac) os três scripts e, de volta ao IDE, cole-os na pasta `js` que você <<js,criou anteriormente>> na pasta de seu `jqproject`.
+
+[start=7]
+. Copie (Ctrl-C; &#8984-C no Mac) os três scripts e, de volta ao IDE, cole-os na pasta `js` que você <<js,criou anteriormente>> na pasta de seu `jqproject`.
É possível colar pressionando Ctrl-V (&#8984-V no Mac) ou clicando com o botão direito do mouse na pasta `js` e selecionando Colar.
A pasta `development-bundle` > `ui` também contém um arquivo chamado `jquery-ui-1.8.1.custom.js`. Esse arquivo combina os três scripts listados anteriormente em um único script. Você também pode colar esse arquivo em seu projeto, em vez dos três scripts individuais.
-8. Referencie os scripts na página `index.html` inserindo três tags `<script>` vinculadas a esses novos arquivos JavaScript. Você pode adicionar as tags `<script>` imediatamente após as tags `<script>` que referenciam a biblioteca Core do jQuery `jquery-1.4.2.js`. Use as tags `<script>` existentes como modelo.
-9. Delete o código de teste que criamos dentro da função `(document).ready`. ele não será mais necessário.
+
+[start=8]
+. Referencie os scripts na página `index.html` inserindo três tags `<script>` vinculadas a esses novos arquivos JavaScript. Você pode adicionar as tags `<script>` imediatamente após as tags `<script>` que referenciam a biblioteca Core do jQuery `jquery-1.4.2.js`. Use as tags `<script>` existentes como modelo.
+
+[start=9]
+. Delete o código de teste que criamos dentro da função `(document).ready`. ele não será mais necessário.
As tags `<head>` de seu arquivo devem ter a seguinte aparência:
@@ -433,7 +491,9 @@ As tags `<head>` de seu arquivo devem ter a seguinte aparência:
</script>
</head>
----
-10. Para que façamos com que nossa lista estática e sem estilo obtenha o comportamento do accordion, basta adicionar uma linha única de código jQuery. Digite esta linha na função `(document).ready`. (Alterações em *negrito*.)
+
+[start=10]
+. Para que façamos com que nossa lista estática e sem estilo obtenha o comportamento do accordion, basta adicionar uma linha única de código jQuery. Digite esta linha na função `(document).ready`. (Alterações em *negrito*.)
[source,java]
----
@@ -448,8 +508,13 @@ Nessa linha de código, `#infolist` está um seletor CSS conectado a um único e
Você também especificou '`autoHeight: false`' no snippet de código acima. Isso impede o widget accordion de definir a altura de cada painel com base na parte mais alta do conteúdo contida na marcação. Para obter mais informações, consulte a link:http://docs.jquery.com/UI/Accordion[+documentação da API do accordion+].
-11. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
-12. Retorne ao Web browser e atualize-o. Clique em um dos nomes (que não seja o mais acima) para ver o efeito do accordion em ação. O widget accordion do jQuery trata todos os detalhes do manuseio do DOM e da resposta aos cliques do mouse do usuário.
+
+[start=11]
+. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
+
+[start=12]
+. Retorne ao Web browser e atualize-o. Clique em um dos nomes (que não seja o mais acima) para ver o efeito do accordion em ação. O widget accordion do jQuery trata todos os detalhes do manuseio do DOM e da resposta aos cliques do mouse do usuário.
+
image::images/accordion-list.png[title="O widget accordion manipula os cliques do usuário e produz o efeito accordion"]
@@ -463,10 +528,12 @@ Agora, nosso projeto tem o comportamento que desejados, mas parece muito simples
2. Dentro da pasta `ui-lightness`, copie (Ctrl-C; &#8984-C no Mac) o arquivo `jquery-ui-1.8.1.custom.css` e a pasta `images`, que contém todas as imagens necessárias para que o tema seja renderizado adequadamente.
3. No IDE, crie uma nova pasta dentro do projeto chamada `css`. Essa pasta conterá o tema '`UI lightness`' para o widget accordion.
-Para tanto, clique com o botão direito do mouse no nó do projeto e selecione Nova > Pasta. (Se Pasta não aparecer como uma opção, clique no botão Novo Arquivo ( image::images/new-file-btn.png[] ) da barra de ferramentas do IDE, em seguida, selecione Outra > Pasta no assistente de Novo Arquivo.) Chame a pasta `css` e coloque-a no mesmo diretório que o arquivo `index.html`.
+Para tanto, clique com o botão direito do mouse no nó do projeto e selecione Nova > Pasta. (Se Pasta não aparecer como uma opção, clique no botão Novo Arquivo ( image:images/new-file-btn.png[] ) da barra de ferramentas do IDE, em seguida, selecione Outra > Pasta no assistente de Novo Arquivo.) Chame a pasta `css` e coloque-a no mesmo diretório que o arquivo `index.html`.
[alert]#Nos projetos Java Web, coloque a pasta `css` na raiz da Web do projeto. Para fazer isso, digite `web` no campo *Pasta Pai*.#
-4. Coloque os dois itens diretamente na nova pasta `css`. Para isso, clique com o botão direito do mouse no nó da pasta `css` e selecione Colar. A pasta do projeto deve ser semelhante ao seguinte:
+
+[start=4]
+. Coloque os dois itens diretamente na nova pasta `css`. Para isso, clique com o botão direito do mouse no nó da pasta `css` e selecione Colar. A pasta do projeto deve ser semelhante ao seguinte:
|===
|
@@ -479,17 +546,24 @@ Para tanto, clique com o botão direito do mouse no nó do projeto e selecione N
-|image::images/proj-win-php.png[title="O projeto contém o tema default do jQuery"] |image::images/proj-win-java.png[title="O projeto contém o tema default do jQuery"]
+|image:images/proj-win-php.png[title="O projeto contém o tema default do jQuery"] |image:images/proj-win-java.png[title="O projeto contém o tema default do jQuery"]
|===
-5. Referencie o arquivo `jquery-ui-1.8.1.custom.css` de dentro da sua página Web `index.html`. Adicione a tag `<link>` a seguir ao cabeçalho da página.
+
+[start=5]
+. Referencie o arquivo `jquery-ui-1.8.1.custom.css` de dentro da sua página Web `index.html`. Adicione a tag `<link>` a seguir ao cabeçalho da página.
[source,java]
----
<link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css">
----
-6. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
-7. Retorne ao browser e atualize a página. Observe que a lista agora é exibida usando o tema default do jQuery, o que representa uma melhoria estética em relação à versão simples e não estilizada.
+
+[start=6]
+. Salve o arquivo (Ctrl-S; &#8984-S no Mac).
+
+[start=7]
+. Retorne ao browser e atualize a página. Observe que a lista agora é exibida usando o tema default do jQuery, o que representa uma melhoria estética em relação à versão simples e não estilizada.
+
image::images/ui-lightness-theme.png[title="O tema default do jQuery aprimora a aparência do widget accordion"]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_ru.asciidoc
index 66661c0..c54ffdc 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_ru.asciidoc
@@ -37,11 +37,7 @@ link:http://jquery.com/[+jQuery+] — это облегченная библио
-image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0"]
-
-
-
-==== Для выполнения этого учебного курса потребуются следующие материалы.
+== Для выполнения этого учебного курса потребуются следующие материалы.
|===
|Программное обеспечение или материал |Требуемая версия
@@ -74,20 +70,35 @@ image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой
2. Если необходимо работать с проектом PHP, выберите категорию *PHP*, затем выберите *Приложение PHP*.
Если необходимо работать с веб-проектом Java, выберите категорию *Java Web*, затем выберите *Веб-приложение*.
-3. Нажмите кнопку "Далее" и присвойте проекту имя `jqproject`. Также, укажите каталог на компьютере для сохранения проекта. Нажмите кнопку "Далее".
-4. В действии 3 для целей этого учебного курса примите параметры мастера по умолчанию.
+
+[start=3]
+. Нажмите кнопку "Далее" и присвойте проекту имя `jqproject`. Также, укажите каталог на компьютере для сохранения проекта. Нажмите кнопку "Далее".
+
+[start=4]
+. В действии 3 для целей этого учебного курса примите параметры мастера по умолчанию.
*Примечание.* Если проект PHP создается в первый раз и требуется поддержка, см. раздел 'Настройка среды для разработки PHP' в link:../../trails/php.html[+Учебная карта PHP+].
-5. Нажмите кнопку *Готово* для завершения работы мастера и создания нового проекта. Проект `jqproject` откроется в окне "Проекты", а в редакторе откроется файл приветствия проекта.
-6. Создайте обычный файл HTML, с которым вы можете работать до завершения этого курса. Поскольку для кода jQuery, который будет добавлен, не требуется связь внутренним сервером, мы просто запустим файл HTML в браузере, чтобы просмотреть результаты.
+
+[start=5]
+. Нажмите кнопку *Готово* для завершения работы мастера и создания нового проекта. Проект `jqproject` откроется в окне "Проекты", а в редакторе откроется файл приветствия проекта.
+
+[start=6]
+. Создайте обычный файл HTML, с которым вы можете работать до завершения этого курса. Поскольку для кода jQuery, который будет добавлен, не требуется связь внутренним сервером, мы просто запустим файл HTML в браузере, чтобы просмотреть результаты.
Правой кнопкой мыши щелкните узел проекта и выберите "Новый > Файл HTML" (Ctrl-N).
-7. Присвойте файлу имя `index`, затем нажмите кнопку *Готово*. В окне "Проекты" обратите внимание, что в проекте присутствует новый файл `index.html`, и этот файл открыт в редакторе.
-8. Взгляните на страницу приветствия в браузере. Для этого правой кнопкой мыши щелкните узел `index.html` в окне "Проекты" и выберите "Просмотр". (Также можно выбрать пункт "Просмотр" в контекстном меню файла в редакторе.) Страница отобразится в окне браузера.
+
+[start=7]
+. Присвойте файлу имя `index`, затем нажмите кнопку *Готово*. В окне "Проекты" обратите внимание, что в проекте присутствует новый файл `index.html`, и этот файл открыт в редакторе.
+
+[start=8]
+. Взгляните на страницу приветствия в браузере. Для этого правой кнопкой мыши щелкните узел `index.html` в окне "Проекты" и выберите "Просмотр". (Также можно выбрать пункт "Просмотр" в контекстном меню файла в редакторе.) Страница отобразится в окне браузера.
+
image::images/browser-test.png[title="Просмотрите пустой шаблон HTML в окне браузера"]
-9. В файле `index.html` в редакторе NetBeans введите `jQuery Test Project` между тегами `<title>` и создайте пару тегов `<style>` внутри тегов `<head>` страницы. (Изменения *выделены полужирным шрифтом*.)
+
+[start=9]
+. В файле `index.html` в редакторе NetBeans введите `jQuery Test Project` между тегами `<title>` и создайте пару тегов `<style>` внутри тегов `<head>` страницы. (Изменения *выделены полужирным шрифтом*.)
[source,xml]
----
@@ -105,11 +116,17 @@ image::images/browser-test.png[title="Просмотрите пустой шаб
</body>
</html>
----
-10. Настройте проект, чтобы файл `index.html` отображался в качестве страницы приветствия при развертывании и запуске приложения. Для этого правой кнопкой мыши щелкните узел `jqproject` в окне "Проекты" и выберите "Свойства".
+
+[start=10]
+. Настройте проект, чтобы файл `index.html` отображался в качестве страницы приветствия при развертывании и запуске приложения. Для этого правой кнопкой мыши щелкните узел `jqproject` в окне "Проекты" и выберите "Свойства".
* *Проекты PHP:* Выберите категорию *Выполнить настройку*, затем введите `index.html` в поле *Файл индекса*.
* *Проекты Java Web:* Выберите категорию *Выполнить*, затем введите `index.html` в поле *Относительный URL-адрес*.
-11. Нажмите "ОК", чтобы закрыть окно "Свойства проекта" и сохранить изменения.
-12. На этом этапе можно удалить исходный файл индекса, который был создан вместе с проектом. В проекте PHP это файл `index.php`; в проектах Java Web это файл `index.jsp`.
+
+[start=11]
+. Нажмите "ОК", чтобы закрыть окно "Свойства проекта" и сохранить изменения.
+
+[start=12]
+. На этом этапе можно удалить исходный файл индекса, который был создан вместе с проектом. В проекте PHP это файл `index.php`; в проектах Java Web это файл `index.jsp`.
Для удаления файла щелкните его правой кнопкой мыши в окне "Проекты" и выберите "Удалить". В появившемся диалоговом окне подтверждения нажмите кнопку *Да*.
@@ -124,14 +141,20 @@ image::images/browser-test.png[title="Просмотрите пустой шаб
Чтобы добавить библиотеку jQuery к проекту NetBeans, просто скопируйте папку библиотеки из ее местоположения на компьютере и вставьте непосредственно в проект в окне "Проекты" среды IDE. Подробные сведения приведены ниже.
-1. В среде IDE создайте папку с именем `js` и добавьте ее к проекту. Для этого нажмите кнопку 'Создать файл' ( image::images/new-file-btn.png[] ) на панели инструментов IDE. (В качестве альтернативы нажмите Ctrl-N; ⌘-N в Mac.)
+1. В среде IDE создайте папку с именем `js` и добавьте ее к проекту. Для этого нажмите кнопку 'Создать файл' ( image:images/new-file-btn.png[] ) на панели инструментов IDE. (В качестве альтернативы нажмите Ctrl-N; ⌘-N в Mac.)
2. Выберите категорию *Другое*, затем выберите *Папка*.
3. Присвойте папке имя `js`.
[alert]#Для веб-проектов Java убедитесь, что папка `js` помещена в корневой веб-узел проекта. Для этого введите `web` в папке *Родительская папка*.#
-4. Нажмите кнопку *Готово* для выхода из мастера.
-5. Найдите библиотеку jQuery, загруженную на компьютер. На настоящий момент текущая версия библиотеки — 1.4.2, поэтому обычно файл называется `jquery-1.4.2.js`. Скопируйте файл в буфер (Ctrl-C; ⌘-C в Mac).
-6. Вставьте файл библиотеки в новую папку `js`. Для этого щелкните правой кнопкой мыши `js` и выберите 'Вставить' (Ctrl-V; ⌘-V в Mac). В папке появится узел файла `jquery-1.4.2.js`.
+
+[start=4]
+. Нажмите кнопку *Готово* для выхода из мастера.
+
+[start=5]
+. Найдите библиотеку jQuery, загруженную на компьютер. На настоящий момент текущая версия библиотеки — 1.4.2, поэтому обычно файл называется `jquery-1.4.2.js`. Скопируйте файл в буфер (Ctrl-C; ⌘-C в Mac).
+
+[start=6]
+. Вставьте файл библиотеки в новую папку `js`. Для этого щелкните правой кнопкой мыши `js` и выберите 'Вставить' (Ctrl-V; ⌘-V в Mac). В папке появится узел файла `jquery-1.4.2.js`.
|===
|
@@ -144,9 +167,11 @@ image::images/browser-test.png[title="Просмотрите пустой шаб
-|image::images/jquery-lib-php.png[title="Вставьте библиотеку jQuery напрямую в проект"] |image::images/jquery-lib-java.png[title="Вставьте библиотеку jQuery напрямую в проект"]
+|image:images/jquery-lib-php.png[title="Вставьте библиотеку jQuery напрямую в проект"] |image:images/jquery-lib-java.png[title="Вставьте библиотеку jQuery напрямую в проект"]
|===
-7. В редакторе укажите ссылку на библиотеку jQuery из файла `index.html`. Для этого добавьте пару тегов `<script>` и используйте атрибут `src`, чтобы указать местоположение библиотеки. (Изменения *выделены полужирным шрифтом*.)
+
+[start=7]
+. В редакторе укажите ссылку на библиотеку jQuery из файла `index.html`. Для этого добавьте пару тегов `<script>` и используйте атрибут `src`, чтобы указать местоположение библиотеки. (Изменения *выделены полужирным шрифтом*.)
[source,xml]
----
@@ -163,7 +188,9 @@ image::images/browser-test.png[title="Просмотрите пустой шаб
</head>
...
----
-8. Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS).
+
+[start=8]
+. Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS).
Теперь библиотека jQuery включена в проект `jqproject`, и на нее содержится ссылка в файле `index.html`. Можно начать добавлять функции jQuery к странице.
@@ -181,14 +208,18 @@ jQuery работает путем подключения динамически
<h1>Test.</h1>
----
-2. Теперь создадим класс CSS, делающий элемент синим при применении. Введите следующее между тегами `<style>` в `<head>` заголовок:
+
+[start=2]
+. Теперь создадим класс CSS, делающий элемент синим при применении. Введите следующее между тегами `<style>` в `<head>` заголовок:
[source,java]
----
.blue { color: blue; }
----
-3. Теперь настроим место для размещения команд jQuery. Добавим новый набор тегов `<script>` к `<head>` документа, например, после тегов `<script>` со ссылкой на библиотеку jQuery. (Изменения *выделены полужирным шрифтом*.)
+
+[start=3]
+. Теперь настроим место для размещения команд jQuery. Добавим новый набор тегов `<script>` к `<head>` документа, например, после тегов `<script>` со ссылкой на библиотеку jQuery. (Изменения *выделены полужирным шрифтом*.)
[source,xml]
----
@@ -213,7 +244,9 @@ jQuery работает путем подключения динамически
Код можно упорядочить, щелкнув правой кнопкой мыши в редакторе и выбрав 'Формат'.
Команды jQuery, которые мы добавим, должны быть выполнены только после загрузки браузером всех элементов модели DOM. Это важно, потому что поведения jQuery подключаются к элементам модели DOM, и эти элементы должны быть доступны для jQuery для получения ожидаемых результатов. jQuery выполняет это за нас с помощью встроенной функции `(document).ready`, которая следует за объектом jQuery, представленным `$`.
-4. Введите эту конструкцию между только что созданными тегами script:
+
+[start=4]
+. Введите эту конструкцию между только что созданными тегами script:
[source,java]
----
@@ -262,7 +295,9 @@ $(function(){
</body>
</html>
----
-5. Для демонстрации работы синтаксиса jQuery попробуем выполнить простую операцию. Мы добавим к странице инструкции jQuery для изменения цвета слова "Test" на синий при его щелчке. Для этого библиотека jQuery должна добавить класс CSS `.blue` к элементу `<h1>` модели DOM при получении щелчка мыши.
+
+[start=5]
+. Для демонстрации работы синтаксиса jQuery попробуем выполнить простую операцию. Мы добавим к странице инструкции jQuery для изменения цвета слова "Test" на синий при его щелчке. Для этого библиотека jQuery должна добавить класс CSS `.blue` к элементу `<h1>` модели DOM при получении щелчка мыши.
Введите следующий код внутри функции `(document).ready` между скобок `{}`:
@@ -273,11 +308,16 @@ $("h1").click(function(){
$(this).addClass("blue");
});
----
-6. Сохраните документ (Ctrl-S; ⌘-S в Mac), затем щелкните правой кнопкой мыши в редакторе и выберите 'Просмотр' для просмотра в используемом веб-браузере. Выполните тестирование, чтобы проверить работу. При щелчке слова "Test" оно должно стать синим.
+
+[start=6]
+. Сохраните документ (Ctrl-S; ⌘-S в Mac), затем щелкните правой кнопкой мыши в редакторе и выберите 'Просмотр' для просмотра в используемом веб-браузере. Выполните тестирование, чтобы проверить работу. При щелчке слова "Test" оно должно стать синим.
+
image::images/blue-test.png[title="При щелчке текста его цвет изменяется на синий"]
В этом примере используется функция `click()` jQuery для вызова функции `addClass()` jQuery при достижении элемента, соответствующего селектору CSS "`h1`". `$(this)` ссылается обратно на вызываемый элемент. Если добавить к странице дополнительные селекторы `<h1>`, это же поведение будет применено ко всем из них с этим набором правил, и каждый будет независимо взаимодействовать с jQuery. (Можно попробовать выполнить это как краткое упражнение.)
-7. Другое важное качество jQuery — функции могут быть быстро объединены в цепочку для создания более сложных или последовательных поведений. Чтобы продемонстрировать это, добавим инструкцию jQuery для замедления fadeOut для нашей функции `click()`. Разместите функцию `fadeOut("slow")` jQuery после функции `addClass`, чтобы строка кода выглядела следующим образом:
+
+[start=7]
+. Другое важное качество jQuery — функции могут быть быстро объединены в цепочку для создания более сложных или последовательных поведений. Чтобы продемонстрировать это, добавим инструкцию jQuery для замедления fadeOut для нашей функции `click()`. Разместите функцию `fadeOut("slow")` jQuery после функции `addClass`, чтобы строка кода выглядела следующим образом:
[source,java]
----
@@ -295,7 +335,9 @@ $(document).ready(function(){
});
});
----
-8. В браузере обновите страницу и щелкните "Test". Текст станет синим, затем темнеет и исчезает со страницы. (Чтобы повторить, необходимо обновить страницу.)
+
+[start=8]
+. В браузере обновите страницу и щелкните "Test". Текст станет синим, затем темнеет и исчезает со страницы. (Чтобы повторить, необходимо обновить страницу.)
=== Автозавершение кода NetBeans и поддержка интерфейса API
@@ -375,7 +417,9 @@ image::images/code-completion.png[title="Для просмотра окон ав
</div>
----
Обратите внимание, что общему заключающему элементу `<div>` предоставлен атрибут `id` со значением `infolist`. В этом элементе `<div>` находятся четыре комплекта тегов `<h3>` и теги `<div>`, содержащие изображение и нумерованный список.
-2. Добавьте несколько встроенных правил CSS к приведенной выше разметке. Удалите правило стиля `.blue`, созданное для целей тестирования выше. Вместо него добавьте следующие правила. (Изменения *выделены полужирным шрифтом*.)
+
+[start=2]
+. Добавьте несколько встроенных правил CSS к приведенной выше разметке. Удалите правило стиля `.blue`, созданное для целей тестирования выше. Вместо него добавьте следующие правила. (Изменения *выделены полужирным шрифтом*.)
[source,xml]
----
@@ -390,27 +434,42 @@ image::images/code-completion.png[title="Для просмотра окон ав
При вводе внутри тегов `<style>` используйте встроенную функцию автозавершения кода CSS среды IDE, вызываемую путем нажатия Ctrl-Space.
-3. Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS).
-4. Теперь добавим изображения JPG, на которые содержатся ссылки в приведенном выше фрагменте кода нашего проекта. Получите каталог `pix` из <<requiredSoftware,ресурсов проекта, загруженных ранее,>> и скопируйте каталог целиком в папку проекта, разместив его на том же уровне, что и файл `index.html`. Через некоторый момент среда NetBeans автоматически обновит окно "Проекты", чтобы отразить, что новый каталог добавлен в проект вручную.
-5. Переключитесь на браузер и обновите страницу.
+
+[start=3]
+. Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS).
+
+[start=4]
+. Теперь добавим изображения JPG, на которые содержатся ссылки в приведенном выше фрагменте кода нашего проекта. Получите каталог `pix` из <<requiredSoftware,ресурсов проекта, загруженных ранее,>> и скопируйте каталог целиком в папку проекта, разместив его на том же уровне, что и файл `index.html`. Через некоторый момент среда NetBeans автоматически обновит окно "Проекты", чтобы отразить, что новый каталог добавлен в проект вручную.
+
+[start=5]
+. Переключитесь на браузер и обновите страницу.
+
image::images/structured-list.png[title="Структурированный список отображается в браузере"]
Есть ряд проблем этого документа, которые будут решены. Во-первых, поиск нужного лица в списке сложнее, чем он должен быть: необходимо прокрутить страницу и визуально проверить множество информации, которая может быть ненужной. Список из четырех контактов может быть управляемым, но если их число вырастет, скажем, до 50, использование списка заметно усложнится. Во-вторых, документ визуально простой, и, скорей всего, не будет сочетаться с дизайном большинства веб-сайтов, в частности сайтом [...]
-6. Для создания эффекта accordion найдите на компьютере загруженный элемент оформления accordion. В загруженной папке найдите папку с именем "`development-bundle`". В папке `development-bundle` разверните папку `ui` и найдите три следующие сценария:
+
+[start=6]
+. Для создания эффекта accordion найдите на компьютере загруженный элемент оформления accordion. В загруженной папке найдите папку с именем "`development-bundle`". В папке `development-bundle` разверните папку `ui` и найдите три следующие сценария:
* `jquery.ui.core.js`
* `jquery.ui.widget.js`
* `jquery.ui.accordion.js`
Версии сценариев наборов инструментов для разработки _полные_, что означает, что их код удобочитаем при просмотре в редакторе. Обычно для готовых к использованию приложений необходимы сжатые версии, чтобы сократить время загрузки.
-7. Скопируйте (Ctrl-C; &#8984-C в Mac) три сценария, вернитесь в среду IDE и вставьте их в `js` папку, <<js,созданную ранее >> в папке `jqproject`.
+
+[start=7]
+. Скопируйте (Ctrl-C; &#8984-C в Mac) три сценария, вернитесь в среду IDE и вставьте их в `js` папку, <<js,созданную ранее >> в папке `jqproject`.
Для вставки можно использовать нажатие Ctrl-V (⌘-V в Mac) или щелкните правой кнопкой мыши папку `js` и выберите 'Вставить'.
В папке `development-bundle` > `ui` также содержится файл с именем `jquery-ui-1.8.1.custom.js`. В этом файле три указанных выше сценария объединены в один. Можно также вставить этот файл в проект вместо трех отдельных сценариев.
-8. Создайте ссылки на сценарии на странице `index.html`, введя три тега `<script>` со ссылками на эти новые файлы JavaScript. Теги `<script>` можно добавить сразу после тегов `<script>`, которые ссылаются на `jquery-1.4.2.js` базовой библиотеки jQuery. Используйте существующие теги `<script>` в качестве модели.
-9. Удалите тестовый код, созданный внутри функции `(document).ready`. Он больше не требуется.
+
+[start=8]
+. Создайте ссылки на сценарии на странице `index.html`, введя три тега `<script>` со ссылками на эти новые файлы JavaScript. Теги `<script>` можно добавить сразу после тегов `<script>`, которые ссылаются на `jquery-1.4.2.js` базовой библиотеки jQuery. Используйте существующие теги `<script>` в качестве модели.
+
+[start=9]
+. Удалите тестовый код, созданный внутри функции `(document).ready`. Он больше не требуется.
Теперь теги `<head>` вашего файла должны выглядеть следующим образом.
@@ -433,7 +492,9 @@ image::images/structured-list.png[title="Структурированный сп
</script>
</head>
----
-10. Для того, чтобы статический список без стиля использовал поведение accordion, необходимо просто добавить одну строку кода jQuery. Введите эту строку в функцию `(document).ready`. (Изменения *выделены полужирным шрифтом*.)
+
+[start=10]
+. Для того, чтобы статический список без стиля использовал поведение accordion, необходимо просто добавить одну строку кода jQuery. Введите эту строку в функцию `(document).ready`. (Изменения *выделены полужирным шрифтом*.)
[source,java]
----
@@ -448,8 +509,13 @@ $(document).ready(function(){
В приведенном выше фрагменте кода также было указано "`autoHeight: false`". Это препятствует установке элементом оформления accordion высоты каждой панели на основе самой высокой части содержимого в разметке. Дополнительные сведения см. в link:http://docs.jquery.com/UI/Accordion[+документации accordion API+].
-11. Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS).
-12. Вернитесь к веб-браузеру и обновите страницу. Щелкните одно из имен (не верхнее), чтобы просмотреть действие accordion. Элемент оформления accordion jQuery обрабатывает все сведения обработки DOM и реагирования на щелчки мыши пользователем.
+
+[start=11]
+. Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS).
+
+[start=12]
+. Вернитесь к веб-браузеру и обновите страницу. Щелкните одно из имен (не верхнее), чтобы просмотреть действие accordion. Элемент оформления accordion jQuery обрабатывает все сведения обработки DOM и реагирования на щелчки мыши пользователем.
+
image::images/accordion-list.png[title="Виджет 'гармошка' обрабатывает щелчки мышью пользователей и создает звуковой эффект звука гармошки"]
@@ -463,10 +529,12 @@ image::images/accordion-list.png[title="Виджет 'гармошка' обра
2. В папке `ui-lightness` скопируйте (Ctrl-C; &#8984-C в Mac) файл `jquery-ui-1.8.1.custom.css` и папку `images`, содержащую все изображения, необходимые для правильного отображения темы.
3. В среде IDE создайте новую папку в проекте с именем `css`. Эта папка будет содержать тему "`UI lightness`" для элемента оформления accordion.
-Для этого щелкните правой кнопкой мыши узел проекта и выберите 'Создать' > 'Папка'. (Если 'Папка' не отображается в качестве параметра, нажмите кнопку 'Создать файл' ( image::images/new-file-btn.png[] ) на панели инструментов IDE, а затем выберите 'Другие' > 'Папка' в мастере создания файлов). Присвойте папке имя `css` и поместите ее в тот же каталог, в котором находится файл `index.html`.
+Для этого щелкните правой кнопкой мыши узел проекта и выберите 'Создать' > 'Папка'. (Если 'Папка' не отображается в качестве параметра, нажмите кнопку 'Создать файл' ( image:images/new-file-btn.png[] ) на панели инструментов IDE, а затем выберите 'Другие' > 'Папка' в мастере создания файлов). Присвойте папке имя `css` и поместите ее в тот же каталог, в котором находится файл `index.html`.
[alert]#Для проектов Java Web убедитесь, что папка `js` помещена в корневой веб-узел проекта. Для этого введите `web` в папке *Родительская папка*.#
-4. Вставьте два элемента непосредственно в новую папку `css`. Для этого щелкните правой кнопкой мыши узел папки `css` и выберите 'Вставить'. Папка проекта должна выглядеть следующим образом.
+
+[start=4]
+. Вставьте два элемента непосредственно в новую папку `css`. Для этого щелкните правой кнопкой мыши узел папки `css` и выберите 'Вставить'. Папка проекта должна выглядеть следующим образом.
|===
|
@@ -479,17 +547,24 @@ image::images/accordion-list.png[title="Виджет 'гармошка' обра
-|image::images/proj-win-php.png[title="Проект содержит тему jQuery, заданную по умолчанию"] |image::images/proj-win-java.png[title="Проект содержит тему jQuery, заданную по умолчанию"]
+|image:images/proj-win-php.png[title="Проект содержит тему jQuery, заданную по умолчанию"] |image:images/proj-win-java.png[title="Проект содержит тему jQuery, заданную по умолчанию"]
|===
-5. Ссылка на файл `jquery-ui-1.8.1.custom.css` на веб-странице `index.html`. Добавьте следующий тег `<link>` в заголовок страницы.
+
+[start=5]
+. Ссылка на файл `jquery-ui-1.8.1.custom.css` на веб-странице `index.html`. Добавьте следующий тег `<link>` в заголовок страницы.
[source,java]
----
<link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css">
----
-6. Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS).
-7. Вернитесь в веб-браузер и обновите страницу. Обратите внимание, что теперь список отображается с темой jQuery по умолчанию, что является эстетическим улучшением по сравнению с простой версией без стиля.
+
+[start=6]
+. Сохраните файл (сочетание клавиш CTRL+S; &#8984+S в Mac OS).
+
+[start=7]
+. Вернитесь в веб-браузер и обновите страницу. Обратите внимание, что теперь список отображается с темой jQuery по умолчанию, что является эстетическим улучшением по сравнению с простой версией без стиля.
+
image::images/ui-lightness-theme.png[title="Тема jQuery, заданная по умолчанию, улучшает внешний вид виджета 'гармошка'"]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_zh_CN.asciidoc
index a2b1217..33f1672 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/js-toolkits-jquery_zh_CN.asciidoc
@@ -37,11 +37,7 @@ link:http://jquery.com/[+jQuery+] 是一个小型的 JavaScript 库，它允许
-image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0"]
-
-
-
-==== 要完成本教程，需要使用以下资源。
+== 要完成本教程，需要使用以下资源。
|===
|软件或资源 |要求的版本
@@ -74,20 +70,35 @@ image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 Net
2. 如果要使用 PHP 项目，请选择 *PHP* 类别，然后选择 *PHP Application*（PHP 应用程序）。
如果要使用 Java Web 项目，请选择 *Java Web* 类别，然后选择 *Web Application*（Web 应用程序）。
-3. 单击 "Next"（下一步）并将项目命名为 `jqproject`。还要指定计算机中要用于保存项目的目录。单击 "Next"（下一步）。
-4. 在步骤 3 中，就本教程而言，请接受向导中提供的默认设置。
+
+[start=3]
+. 单击 "Next"（下一步）并将项目命名为 `jqproject`。还要指定计算机中要用于保存项目的目录。单击 "Next"（下一步）。
+
+[start=4]
+. 在步骤 3 中，就本教程而言，请接受向导中提供的默认设置。
*注：*如果您是初次创建 PHP 项目并且需要帮助，请参见 link:../../trails/php.html[+PHP 学习教程+]中的“为 PHP 开发配置环境”。
-5. 单击 *Finish*（完成），以完成向导并创建新项目。`jqproject` 将在 "Projects"（项目）窗口中打开，并在编辑器中打开项目欢迎页。
-6. 创建一个纯 HTML 文件，在本教程的剩余部分中，可以使用该文件。由于将要添加的 jQuery 代码不需要与后端服务器进行任何通信，因此只需在浏览器中运行该 HTML 文件便可查看结果。
+
+[start=5]
+. 单击 *Finish*（完成），以完成向导并创建新项目。`jqproject` 将在 "Projects"（项目）窗口中打开，并在编辑器中打开项目欢迎页。
+
+[start=6]
+. 创建一个纯 HTML 文件，在本教程的剩余部分中，可以使用该文件。由于将要添加的 jQuery 代码不需要与后端服务器进行任何通信，因此只需在浏览器中运行该 HTML 文件便可查看结果。
右键单击项目节点并选择 "New"（新建）> "HTML file"（HTML 文件）（Ctrl-N 组合键）。
-7. 将文件命名为 `index`，然后单击 *Finish*（完成）。在 "Projects"（项目）窗口中，注意项目中已列出新的 `index.html` 文件，且在编辑器中打开该文件。
-8. 在浏览器中查看欢迎页的外观。要执行此操作，请右键单击 "Projects"（项目）窗口中的 `index.html` 节点并选择 "View"（查看）。（还可以在编辑器中从文件的右键单击菜单中选择 "View"（查看）。）将在浏览器窗口中显示该页。
+
+[start=7]
+. 将文件命名为 `index`，然后单击 *Finish*（完成）。在 "Projects"（项目）窗口中，注意项目中已列出新的 `index.html` 文件，且在编辑器中打开该文件。
+
+[start=8]
+. 在浏览器中查看欢迎页的外观。要执行此操作，请右键单击 "Projects"（项目）窗口中的 `index.html` 节点并选择 "View"（查看）。（还可以在编辑器中从文件的右键单击菜单中选择 "View"（查看）。）将在浏览器窗口中显示该页。
+
image::images/browser-test.png[title="查看浏览器窗口中的空 HTML 模板"]
-9. 在 NetBeans 编辑器的 `index.html` 文件中，在 `<title>` 标记之间键入 `jQuery Test Project`，并在页面的 `<head>` 标记内创建一对 `<style>` 标记。（更改内容以*粗体*显示。）
+
+[start=9]
+. 在 NetBeans 编辑器的 `index.html` 文件中，在 `<title>` 标记之间键入 `jQuery Test Project`，并在页面的 `<head>` 标记内创建一对 `<style>` 标记。（更改内容以*粗体*显示。）
[source,xml]
----
@@ -105,11 +116,17 @@ image::images/browser-test.png[title="查看浏览器窗口中的空 HTML 模板
</body>
</html>
----
-10. 配置项目，以便在部署和运行应用程序时将 `index.html` 文件显示为欢迎文件。要执行此操作，请右键单击 "Projects"（项目）窗口中的 `jqproject` 节点，然后选择 "Properties"（属性）。
+
+[start=10]
+. 配置项目，以便在部署和运行应用程序时将 `index.html` 文件显示为欢迎文件。要执行此操作，请右键单击 "Projects"（项目）窗口中的 `jqproject` 节点，然后选择 "Properties"（属性）。
* *PHP 项目：*选择 *Run Configuration*（运行配置）类别，然后在 *Index File*（索引文件）字段中键入 `index.html`。
* *Java Web 项目：*选择 *Run*（运行）类别，然后在 *Relative URL*（相对 URL）字段中键入 `index.html`。
-11. 单击 "OK"（确定）关闭 "Project Properties"（项目属性）窗口并保存更改。
-12. 在此阶段，您可以删除随项目创建的原始索引文件。在 PHP 项目中，该文件为 `index.php` 文件；在 Java Web 项目中，该文件为 `index.jsp` 文件。
+
+[start=11]
+. 单击 "OK"（确定）关闭 "Project Properties"（项目属性）窗口并保存更改。
+
+[start=12]
+. 在此阶段，您可以删除随项目创建的原始索引文件。在 PHP 项目中，该文件为 `index.php` 文件；在 Java Web 项目中，该文件为 `index.jsp` 文件。
要删除该文件，请在 "Projects"（项目）窗口中右键单击文件，然后选择 "Delete"（删除）。在显示的确认对话框中，单击 *Yes*（是）。
@@ -124,14 +141,20 @@ image::images/browser-test.png[title="查看浏览器窗口中的空 HTML 模板
要将 jQuery 库添加到 NetBeans 项目中，只需从计算机上的相应位置复制库文件夹，然后在 IDE 的 "Projects"（项目）窗口中将其直接粘贴到项目中。下面是详细信息。
-1. 在 IDE 中，创建一个名为 `js` 的文件夹并将其添加到项目中。为此，请单击 IDE 工具栏中的 "New File"（新建文件）(image::images/new-file-btn.png[]) 按钮。（也可以按 Ctrl-N 组合键；在 Mac 上按 ⌘-N 组合键。）
+1. 在 IDE 中，创建一个名为 `js` 的文件夹并将其添加到项目中。为此，请单击 IDE 工具栏中的 "New File"（新建文件）(image:images/new-file-btn.png[]) 按钮。（也可以按 Ctrl-N 组合键；在 Mac 上按 ⌘-N 组合键。）
2. 选择 *Other*（其他）类别，然后选择 *Folder*（文件夹）。
3. 将该文件夹命名为 `js`。
[alert]#对于 Java Web 项目，确保将 `js` 文件夹放在项目的 Web 根中。为此，请在 *Parent Folder*（父文件夹）字段中输入 `web`。#
-4. 单击 *Finish*（完成）退出向导。
-5. 查找下载到计算机中的 jQuery 库。到目前为止，最新库版本为 1.4.2，因此文件通常命名为 `jquery-1.4.2.js`。将文件复制到剪贴板（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）。
-6. 将库文件粘贴到新的 `js` 文件夹中。为此，请右键单击 `js` 并选择 "Paste"（粘贴）（Ctrl-V 组合键；在 Mac 上为 ⌘-V 组合键）。`jquery-1.4.2.js` 文件节点将出现在该文件夹中。
+
+[start=4]
+. 单击 *Finish*（完成）退出向导。
+
+[start=5]
+. 查找下载到计算机中的 jQuery 库。到目前为止，最新库版本为 1.4.2，因此文件通常命名为 `jquery-1.4.2.js`。将文件复制到剪贴板（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）。
+
+[start=6]
+. 将库文件粘贴到新的 `js` 文件夹中。为此，请右键单击 `js` 并选择 "Paste"（粘贴）（Ctrl-V 组合键；在 Mac 上为 ⌘-V 组合键）。`jquery-1.4.2.js` 文件节点将出现在该文件夹中。
|===
|
@@ -144,9 +167,11 @@ image::images/browser-test.png[title="查看浏览器窗口中的空 HTML 模板
-|image::images/jquery-lib-php.png[title="将 jQuery 库直接粘贴到您的项目"] |image::images/jquery-lib-java.png[title="将 jQuery 库直接粘贴到您的项目"]
+|image:images/jquery-lib-php.png[title="将 jQuery 库直接粘贴到您的项目"] |image:images/jquery-lib-java.png[title="将 jQuery 库直接粘贴到您的项目"]
|===
-7. 在编辑器中，从 `index.html` 文件中引用 jQuery 库。为此，请添加一对 `<script>` 标记并使用 `src` 属性指向库位置。（更改内容以*粗体*显示。）
+
+[start=7]
+. 在编辑器中，从 `index.html` 文件中引用 jQuery 库。为此，请添加一对 `<script>` 标记并使用 `src` 属性指向库位置。（更改内容以*粗体*显示。）
[source,xml]
----
@@ -163,7 +188,9 @@ image::images/browser-test.png[title="查看浏览器窗口中的空 HTML 模板
</head>
...
----
-8. 保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。
+
+[start=8]
+. 保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。
现在，jQuery 库包含在 `jqproject` 项目中，并从 `index.html` 文件中引用。我们可以开始向页面中添加 jQuery 功能。
@@ -181,14 +208,18 @@ jQuery 的原理是将动态应用的 JavaScript 属性和行为与 DOM（文档
<h1>Test.</h1>
----
-2. 现在我们将创建一个 CSS 类，当应用该类时使元素出现蓝色。在文档 `<head>` 的 `<style>` 标记间输入以下内容：
+
+[start=2]
+. 现在我们将创建一个 CSS 类，当应用该类时使元素出现蓝色。在文档 `<head>` 的 `<style>` 标记间输入以下内容：
[source,java]
----
.blue { color: blue; }
----
-3. 下一步，我们将建立一个容纳 jQuery 命令的地方。向文档的 `<head>` 中添加一组新的 `<script>` 标记（例如，在链接到 jQuery 库的 `<script>` 标记之后）。（更改内容以*粗体*显示。）
+
+[start=3]
+. 下一步，我们将建立一个容纳 jQuery 命令的地方。向文档的 `<head>` 中添加一组新的 `<script>` 标记（例如，在链接到 jQuery 库的 `<script>` 标记之后）。（更改内容以*粗体*显示。）
[source,xml]
----
@@ -213,7 +244,9 @@ jQuery 的原理是将动态应用的 JavaScript 属性和行为与 DOM（文档
通过在编辑器中单击右键并选择 "Format"（格式化代码）可以清理代码。
我们将要添加的 jQuery 指令必须在浏览器加载所有 DOM 元素之后才能执行。这点很重要，因为 jQuery 行为与 DOM 元素连接在一起，jQuery 必须可以使用这些元素，以便得到预期结果。jQuery 通过其内置的 `(document).ready` 函数帮助实现此目的，该函数在 jQuery 对象之后，由 `$` 表示。
-4. 在刚创建的脚本标记间输入以下结构：
+
+[start=4]
+. 在刚创建的脚本标记间输入以下结构：
[source,java]
----
@@ -262,7 +295,9 @@ jQuery 指令采用 JavaScript 方法的形式，通过一个可选的对象字
</body>
</html>
----
-5. 为了演示 jQuery 语法的原理，我们将尝试一些简单操作。将 jQuery 指令添加到页面中，单击 "Test" 时，该指令使该词变为蓝色。为实现此功能，我们希望 jQuery 在接收到鼠标单击事件后将 CSS 类 `.blue` 添加到 DOM 的 `<h1>` 元素中。
+
+[start=5]
+. 为了演示 jQuery 语法的原理，我们将尝试一些简单操作。将 jQuery 指令添加到页面中，单击 "Test" 时，该指令使该词变为蓝色。为实现此功能，我们希望 jQuery 在接收到鼠标单击事件后将 CSS 类 `.blue` 添加到 DOM 的 `<h1>` 元素中。
在 `(document).ready` 函数的花括号 `{}` 内输入下面的代码：
@@ -273,11 +308,16 @@ $("h1").click(function(){
$(this).addClass("blue");
});
----
-6. 保存文档（Ctrl-S 组合键；在 Mac 上为 ⌘-S 组合键），然后在编辑器中单击右键并选择 "View"（查看），将其加载到 Web 浏览器中。测试其运行情况。当单击 "Test" 单词，该词将变成蓝色。
+
+[start=6]
+. 保存文档（Ctrl-S 组合键；在 Mac 上为 ⌘-S 组合键），然后在编辑器中单击右键并选择 "View"（查看），将其加载到 Web 浏览器中。测试其运行情况。当单击 "Test" 单词，该词将变成蓝色。
+
image::images/blue-test.png[title="单击文本时文本将变为蓝色"]
在本例中，当与 CSS 选择器 "`h1`" 相匹配的元素出现时，可使用 jQuery `click()` 函数调用 jQuery `addClass()` 函数。`$(this)` 指向调用元素。如果想在页面中添加更多的 `<h1>`，可以采用同一套规则下的相同行为，各行为单独与 jQuery 进行交互。（您可以自己尝试此练习）
-7. jQuery 的另一项重要特质是其函数可被简单链接起来，以创建更加复杂甚至是串行化的行为。为演示这一点，我们将为 `click()` 函数添加一条“慢 fadeOut”指令。在 `addClass` 函数后面添加一个 `fadeOut("slow")` jQuery 函数，如下所示：
+
+[start=7]
+. jQuery 的另一项重要特质是其函数可被简单链接起来，以创建更加复杂甚至是串行化的行为。为演示这一点，我们将为 `click()` 函数添加一条“慢 fadeOut”指令。在 `addClass` 函数后面添加一个 `fadeOut("slow")` jQuery 函数，如下所示：
[source,java]
----
@@ -295,7 +335,9 @@ $(document).ready(function(){
});
});
----
-8. 在浏览器中刷新页面，然后单击 "Test"。您将看到 "Test" 变蓝，然后淡出，并从页面中消失。（想再试一次，必须刷新页面。）
+
+[start=8]
+. 在浏览器中刷新页面，然后单击 "Test"。您将看到 "Test" 变蓝，然后淡出，并从页面中消失。（想再试一次，必须刷新页面。）
=== NetBeans 代码完成和 API 支持
@@ -375,7 +417,9 @@ image::images/code-completion.png[title="按 Ctrl-空格键查看代码完成和
</div>
----
注意整个 `<div>` 闭合元素被赋予了一个值为 `infolist` 的 `id` 属性。在此 `<div>` 元素中，有四组包含图像和未排序列表的 `<h3>` 标记和 `<div>` 标记。
-2. 向上面的标记中添加一些内联 CSS 规则。删除您为上面的测试创建的 `.blue` 样式规则。在其位置添加以下规则。（更改内容以*粗体*显示。）
+
+[start=2]
+. 向上面的标记中添加一些内联 CSS 规则。删除您为上面的测试创建的 `.blue` 样式规则。在其位置添加以下规则。（更改内容以*粗体*显示。）
[source,xml]
----
@@ -390,27 +434,42 @@ image::images/code-completion.png[title="按 Ctrl-空格键查看代码完成和
在 `<style>` 标记内键入内容时，可以通过按 Ctrl-空格键利用 IDE 的内置 CSS 代码完成。
-3. 保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。
-4. 现在，我们将向项目添加以前代码片段中涉及的 JPG 肖像。从<<requiredSoftware,之前下载的项目资源>>中检索 `pix` 目录，将整个目录复制到项目文件夹中，将其与 `index.html` 目录同级放置。稍后，NetBeans 将自动更新 "Projects"（项目）窗口，可以看到该项目中已经添加了一个新目录。
-5. 切换到浏览器并刷新页面。
+
+[start=3]
+. 保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。
+
+[start=4]
+. 现在，我们将向项目添加以前代码片段中涉及的 JPG 肖像。从<<requiredSoftware,之前下载的项目资源>>中检索 `pix` 目录，将整个目录复制到项目文件夹中，将其与 `index.html` 目录同级放置。稍后，NetBeans 将自动更新 "Projects"（项目）窗口，可以看到该项目中已经添加了一个新目录。
+
+[start=5]
+. 切换到浏览器并刷新页面。
+
image::images/structured-list.png[title="结构化列表显示在浏览器中"]
我们还要说明本文档的许多问题。首先，在列表中快速扫描以找到您要找的人变得更加困难：必须滚动页面查看大量可能和当前利益无关的信息。四个联系人的列表都是可管理的，但如果人数上升到 50 人（举例来说），使用列表将变得更加困难。其次，该文档看起来是简单的，不大可能很美观地插入大多数 Web 站点的设计，特别是有很强图形特征的设计。我们将通过组合使用 jQuery 可折叠面板窗口部件和 jQuery UI 的默认主题来解决这些问题。
-6. 要生成可折叠面板效果，请导航至计算机上下载可折叠面板窗口部件的位置。在下载的文件夹中，您将发现一个名为 "`development-bundle`" 的文件夹。在 `development-bundle` 文件夹中，展开 `ui` 文件夹并查找以下三个脚本：
+
+[start=6]
+. 要生成可折叠面板效果，请导航至计算机上下载可折叠面板窗口部件的位置。在下载的文件夹中，您将发现一个名为 "`development-bundle`" 的文件夹。在 `development-bundle` 文件夹中，展开 `ui` 文件夹并查找以下三个脚本：
* `jquery.ui.core.js`
* `jquery.ui.widget.js`
* `jquery.ui.accordion.js`
工具包脚本的开发版未进行_最小化处理_，这意味着在编辑器中查看时，其代码易于读取。通常，您要切换到产品应用程序的已压缩的最小化版本，以节省下载时间。
-7. 复制（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）这三个脚本，回到 IDE 中，将其粘贴到您之前在 `jqproject` 文件夹中<<js,创建>>的 `js` 文件夹。
+
+[start=7]
+. 复制（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）这三个脚本，回到 IDE 中，将其粘贴到您之前在 `jqproject` 文件夹中<<js,创建>>的 `js` 文件夹。
可以通过按 Ctrl-V 组合键（在 Mac 上为 ⌘-V 组合键）或右键单击 `js` 文件夹并选择 "Paste"（粘贴）来进行粘贴。
`development-bundle` > `ui` 文件夹也包含一个名为 `jquery-ui-1.8.1.custom.js` 的文件。此文件将上面所列的三个脚本组合为一个脚本。也可以将此文件粘贴到项目中，以代替三个单独的脚本。
-8. 通过输入三个链接到这些新 JavaScript 文件的 `<script>` 标记来引用 `index.html` 页面中的脚本。可在紧随引用核心 jQuery 库 `jquery-1.4.2.js` 的 `<script>` 标记之后的位置添加 `<script>` 标记。使用现有的 `<script>` 标记作为模型。
-9. 删除我们在 `(document).ready` 函数中创建的测试代码。我们不再需要这些代码了。
+
+[start=8]
+. 通过输入三个链接到这些新 JavaScript 文件的 `<script>` 标记来引用 `index.html` 页面中的脚本。可在紧随引用核心 jQuery 库 `jquery-1.4.2.js` 的 `<script>` 标记之后的位置添加 `<script>` 标记。使用现有的 `<script>` 标记作为模型。
+
+[start=9]
+. 删除我们在 `(document).ready` 函数中创建的测试代码。我们不再需要这些代码了。
现在，文件的 `<head>` 标记应如下所示。
@@ -433,7 +492,9 @@ image::images/structured-list.png[title="结构化列表显示在浏览器中"]
</script>
</head>
----
-10. 让静态、无样式的列表接受折叠行为就和添加一行 jQuery 代码一样简单。将此行输入 `(document).ready` 函数中。（更改内容以*粗体*显示。）
+
+[start=10]
+. 让静态、无样式的列表接受折叠行为就和添加一行 jQuery 代码一样简单。将此行输入 `(document).ready` 函数中。（更改内容以*粗体*显示。）
[source,java]
----
@@ -448,8 +509,13 @@ $(document).ready(function(){
您还在上面的代码片段中指定了 "`autoHeight: false`"。这样可以防止可折叠面板窗口部件根据标记内包含的最高内容部分设置每个面板的高度。有关详细信息，请参见link:http://docs.jquery.com/UI/Accordion[+可折叠面板 API 文档+]。
-11. 保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。
-12. 返回 Web 浏览器并刷新。单击其中一个姓名（除了顶部第一个），查看实际的折叠效果。jQuery 可折叠面板窗口部件可处理有关处理 DOM 和响应用户鼠标单击的所有详细信息。
+
+[start=11]
+. 保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。
+
+[start=12]
+. 返回 Web 浏览器并刷新。单击其中一个姓名（除了顶部第一个），查看实际的折叠效果。jQuery 可折叠面板窗口部件可处理有关处理 DOM 和响应用户鼠标单击的所有详细信息。
+
image::images/accordion-list.png[title="可折叠面板窗口部件处理用户单击并生成可折叠面板效果"]
@@ -463,10 +529,12 @@ image::images/accordion-list.png[title="可折叠面板窗口部件处理用户
2. 在 `ui-lightness` 文件夹中，复制（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）`jquery-ui-1.8.1.custom.css` 文件和 `images` 文件夹，其中包含正确呈现主题所需的所有图像。
3. 在 IDE 中，在名为 `css` 的项目中创建一个新文件夹。此文件夹将包含可折叠面板窗口部件的 "`UI lightness`" 主题。
-为此，请右键单击项目节点并选择 "New"（新建）> "Folder"（文件夹）。（如果文件夹未显示为选项，请单击 IDE 工具栏中的 "New File"（新建文件）(image::images/new-file-btn.png[]) 按钮，然后在新建文件向导中选择 "Other"（其他）> "Folder"（文件夹）。）将该文件夹命名为 `css` 并将其与 `index.html` 文件放在同一目录中。
+为此，请右键单击项目节点并选择 "New"（新建）> "Folder"（文件夹）。（如果文件夹未显示为选项，请单击 IDE 工具栏中的 "New File"（新建文件）(image:images/new-file-btn.png[]) 按钮，然后在新建文件向导中选择 "Other"（其他）> "Folder"（文件夹）。）将该文件夹命名为 `css` 并将其与 `index.html` 文件放在同一目录中。
[alert]#对于 Java Web 项目，请确保将 `css` 文件夹放在项目的 Web 根中。为此，请在 *Parent Folder*（父文件夹）字段中输入 `web`。#
-4. 将这两项直接粘贴到新的 `css` 文件夹中。为此，请右键单击 `css` 文件夹节点并选择 "Paste"（粘贴）。项目文件夹应如下所示。
+
+[start=4]
+. 将这两项直接粘贴到新的 `css` 文件夹中。为此，请右键单击 `css` 文件夹节点并选择 "Paste"（粘贴）。项目文件夹应如下所示。
|===
|
@@ -479,17 +547,24 @@ image::images/accordion-list.png[title="可折叠面板窗口部件处理用户
-|image::images/proj-win-php.png[title="项目包含 jQuery 默认主题"] |image::images/proj-win-java.png[title="项目包含 jQuery 默认主题"]
+|image:images/proj-win-php.png[title="项目包含 jQuery 默认主题"] |image:images/proj-win-java.png[title="项目包含 jQuery 默认主题"]
|===
-5. 从 `index.html` Web 页中引用 `jquery-ui-1.8.1.custom.css` 文件。在页的头中添加以下 `<link>` 标记。
+
+[start=5]
+. 从 `index.html` Web 页中引用 `jquery-ui-1.8.1.custom.css` 文件。在页的头中添加以下 `<link>` 标记。
[source,java]
----
<link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css">
----
-6. 保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。
-7. 返回到 Web 浏览器并刷新页面。请注意，现在使用 jQuery 的默认主题显示列表，这是简单、未风格化的版本的美学改进。
+
+[start=6]
+. 保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。
+
+[start=7]
+. 返回到 Web 浏览器并刷新页面。请注意，现在使用 jQuery 的默认主题显示列表，这是简单、未风格化的版本的美学改进。
+
image::images/ui-lightness-theme.png[title="jQuery 默认主题增强可折叠面板窗口部件的外观"]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic.asciidoc
index bf8db44..92e0eb2 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic.asciidoc
@@ -68,7 +68,9 @@ Before you can register the server, you need to download the WebLogic Server ins
Remember to note the user name and password.
-3. Create a WebLogic domain.
+
+[start=3]
+. Create a WebLogic domain.
You can use the link:http://download.oracle.com/docs/cd/E17904_01/web.1111/e14140/newdom.htm#i1073602[+Graphical Mode of the WebLogic Configuration Wizard+] to help you create the domain.
@@ -91,8 +93,12 @@ After you install the server, you can use the Add Server Instance wizard to regi
The IDE will automatically identify the domain for the server instance.
-5. Type the username and password for the domain.
-6. Enable JPA 2.0 (WebLogic Server 10.3.4 or 10.3.5 only). Click Finish.
+
+[start=5]
+. Type the username and password for the domain.
+
+[start=6]
+. Enable JPA 2.0 (WebLogic Server 10.3.4 or 10.3.5 only). Click Finish.
*Note.* If you are registering an instance of WebLogic Server 12c (12.1.1.0) you do not need to enable JPA 2.0 because JPA 2.0 is enabled by default. If you are registering an instance of WebLogic Server 11g Rel 1 (10.3.4 or 10.3.5) you can enable JPA 2.0 when you register the server or in the Servers manager after the server is registered. See the section <<01e,Enabling Support for JPA 2.0 on Oracle WebLogic Server 11g>> below for more details.
@@ -105,6 +111,7 @@ You can right-click the Oracle WebLogic Server node to perform various actions,
* Start and Stop the server
* Open the Admin Console in your browser
* View the Server Log in the Output window of the IDE
+
image::images/weblogic-services-window1.png[title="WebLogic Server in the Services window"]
@@ -118,11 +125,15 @@ When you start the server you can see the server log in the Oracle WebLogic Serv
You can right-click the Oracle WebLogic Server node and choose View Server Log if the tab is not visible.
-2. Right-click the Oracle WebLogic Server node and choose View Admin Console.
+
+[start=2]
+. Right-click the Oracle WebLogic Server node and choose View Admin Console.
When you choose View Admin Console, the login screen of the server opens in your browser.
-3. Log in with the username and password that you specified when you installed the server.
+
+[start=3]
+. Log in with the username and password that you specified when you installed the server.
After you log in, you will see the Home Page of the Admin Console in your browser.
@@ -147,7 +158,9 @@ image::images/weblogic-properties-enablejpa.png[title="Domain tab in Servers man
The Domain tab of the Servers manager enables you to view and modify the username and password.
-2. Click Enable JPA 2. Click Close.
+
+[start=2]
+. Click Enable JPA 2. Click Close.
When you click Enable JPA 2, the IDE will modify the WebLogic Server classpath to add the files to enable support for JPA 2.
@@ -156,10 +169,19 @@ When you click Enable JPA 2, the IDE will modify the WebLogic Server classpath t
* link:http://download.oracle.com/docs/cd/E17904_01/web.1111/e13720/using_toplink.htm#EJBAD1309[+Using JPA 2.0 with TopLink in WebLogic Server+]
* link:http://forums.oracle.com/forums/thread.jspa?threadID=1112476[+OTN Discussion Forum: 11g Release 1 Patch Set 3 (WLS 10.3.4) +]
* link:http://wiki.eclipse.org/EclipseLink/Development/JPA_2.0/weblogic[+Running JPA 2.0 API on WebLogic 10.3+]
-3. Open the Oracle WebLogic Server Admin Console in your browser and log in.
-4. Click *Domain* under the Domain Configurations section of the Admin Console.
-5. Click the *JPA* tab under the Configuration tab.
-6. Select *TopLink* in the Default JPA Provider dropdown list. Click Save.
+
+[start=3]
+. Open the Oracle WebLogic Server Admin Console in your browser and log in.
+
+[start=4]
+. Click *Domain* under the Domain Configurations section of the Admin Console.
+
+[start=5]
+. Click the *JPA* tab under the Configuration tab.
+
+[start=6]
+. Select *TopLink* in the Default JPA Provider dropdown list. Click Save.
+
image::images/admin-console-jpa.png[title="JPA tab in Oracle WebLogic Server Admin Console"]
When you click Save, Oracle TopLink will be the default persistence provider for applications deployed to the server when no persistence provider is explicitly specified by the application.
@@ -186,8 +208,13 @@ In this exercise you will use the New Project wizard to create a web application
*Note.* Java EE 6 Web is only available if you registered an instance of WebLogic Server 12c.
image::images/new-project-ee6.png[title="Weblogic selected in New Project wizard"]
-7. Select JavaServer Faces framework.
-8. Select JSF 2.x from the Server Library dropdown list. Click Finish.
+
+[start=7]
+. Select JavaServer Faces framework.
+
+[start=8]
+. Select JSF 2.x from the Server Library dropdown list. Click Finish.
+
image::images/projectwizard-serverlib.png[title="Frameworks panel New Project wizard"]
When you click Finish, the IDE creates the web application project and opens ``index.xhtml`` in the editor. In the Projects window you can see that the IDE created the ``weblogic.xml`` descriptor file and ``web.xml`` under the Configuration Files node.
@@ -222,6 +249,7 @@ If you open ``web.xml`` in the editor you can see that ``faces/index.xhtml``
</fast-swap>
----
* If the target server is WebLogic Server 11g (10.3.4 or 10.3.5), the server installation includes the libraries necessary for using JSF 1.2 and JSF 2.x in your applications but they are deactivated by default. You need to deploy and install the JSF 2.x libraries before you can start using the libraries. If the library is not already installed, the IDE will prompt you and can install the library for you if you choose the library in the New Project wizard. The library only needs to be ins [...]
+
image::images/install-libraries-dialog.png[title="Resolve Missing Server Library dialog"]
After you create the application, when you view the ``weblogic.xml`` descriptor file you can see that the IDE modified the file to specify the JSF library that will be used with the application.
@@ -256,13 +284,16 @@ In this exercise you will create and open a connection to the database.
2. Type the user name and password. Click OK.
3. Right-click the MySQL Server node and choose Create Database.
4. Select *sample* in the New Database Name dropdown list. Click OK.
+
image::images/create-db.png[title="Create Database dialog box"]
*Note.* Depending on how you configured your database, you may need to explicitly specify access permissions for the new database.
When you click OK, the IDE creates the sample database and populates the database tables. If you expand the MySQL server node you can see that the list of databases now contains the new ``sample`` database.
-5. Expand the MySQL server node and right-click the sample database and choose Connect.
+
+[start=5]
+. Expand the MySQL server node and right-click the sample database and choose Connect.
When you click Connect, a database connection node for the database appears under the Databases node. You can expand the node to view the database tables.
@@ -293,6 +324,7 @@ To manage persistence in the application you only need to create a persistence u
8. Type *jdbc/mysql-sample* for the JNDI name in the New Data Source dialog box.
9. Choose the MySQL sample database connection. Click OK to close the dialog box.
10. Click Finish in the New Persistence Unit wizard.
+
image::images/new-persistence-eclipselink1.png[title="New Persistence Unit wizard"]
When you click Finish, ``persistence.xml`` is created for your project and opens in the editor. You can click Source in the toolbar of the editor to open ``persistence.xml`` in the XML source editor. This file contains all the information the server needs to manage the entities and persistence of the application.
@@ -334,7 +366,9 @@ You will now use the Entity Classes from Database wizard to create the entity cl
The wizard lists the ``customer`` table and the related tables under Selected Tables.
-5. Type *ejb* as the package for the generated classes. Click Finish.
+
+[start=5]
+. Type *ejb* as the package for the generated classes. Click Finish.
When you click Finish, the IDE generates entity classes for each of the selected tables. You can expand the ``ejb`` source package node to view the generated entity classes.
@@ -374,8 +408,11 @@ You can click the name of each of the resources to view additional details about
*Notes about deploying to WebLogic Server 10.3.4 or 10.3.5.*
* If you deployed the application to WebLogic Server 10.3.4 or 10.3.5 you can see in the table that the JSF 2.0 library was also deployed to the server in addition to the ``WebLogicCustomer.war`` web application and the ``jdbc/mysql-sample`` JDBC configuration.
+
image::images/admin-console-deployments.png[title="Deployments table in WebLogic Server Admin Console"]
+
* If you expand the Oracle WebLogic Server instance in the Services window, you can view the applications and resources that are deployed to the server. You can see that the JDBC resources were created on the server and that the JSF libraries were installed.
+
image::images/weblogic-services-window2.png[title="WebLogic Server applications and resources in the Services window"]
For more information about deploying applications, see link:http://download.oracle.com/docs/cd/E12840_01/wls/docs103/deployment/index.html[+Deploying Applications to WebLogic Server +]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_ja.asciidoc
index ef41342..c20ca21 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_ja.asciidoc
@@ -68,7 +68,9 @@ image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、N
ユーザー名とパスワードを必ずメモしておいてください。
-3. WebLogicドメインを作成します。
+
+[start=3]
+. WebLogicドメインを作成します。
ドメインの作成には、link:http://download.oracle.com/docs/cd/E17904_01/web.1111/e14140/newdom.htm#i1073602[+WebLogic構成ウィザードのグラフィカル・モード+]を使用できます。
@@ -91,8 +93,12 @@ image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、N
IDEはサーバー・インスタンスのドメインを自動的に特定します。
-5. ドメインのユーザー名とパスワードを入力します。
-6. JPA 2.0を有効にします(WebLogic Server 10.3.4または10.3.5のみ)。「終了」をクリックします。
+
+[start=5]
+. ドメインのユーザー名とパスワードを入力します。
+
+[start=6]
+. JPA 2.0を有効にします(WebLogic Server 10.3.4または10.3.5のみ)。「終了」をクリックします。
*注意:*WebLogic Server 12c (12.1.1.0)のインスタンスを登録する場合、JPA 2.0はデフォルトで有効になるため、有効にする必要はありません。WebLogic Server 11g リリース1 (10.3.4または10.3.5)のインスタンスを登録する場合は、サーバーの登録時か、サーバーの登録後にサーバー・マネージャで、JPA 2.0を有効にできます。詳細は、後述の<<01e,「Oracle WebLogic Server 11gでのJPA 2.0のサポートの有効化」>>を参照してください。
@@ -105,6 +111,7 @@ Oracle WebLogic Serverのノードを右クリックすると、次のような
* サーバーを起動および停止する
* ブラウザで管理コンソールを開く
* IDEの「出力」ウィンドウでサーバー・ログを表示する
+
image::images/weblogic-services-window1.png[title="「サービス」ウィンドウのWebLogic Server"]
@@ -118,11 +125,15 @@ image::images/weblogic-services-window1.png[title="「サービス」ウィン
このタブが表示されていない場合は、Oracle WebLogic Serverのノードを右クリックし、「サーバー・ログの表示」を選択します。
-2. Oracle WebLogic Serverのノードを右クリックし、「管理コンソールを表示」を選択します。
+
+[start=2]
+. Oracle WebLogic Serverのノードを右クリックし、「管理コンソールを表示」を選択します。
「管理コンソールを表示」を選択すると、サーバーのログイン画面がブラウザで開きます。
-3. サーバーのインストール時に指定したユーザー名とパスワードを使用してログインします。
+
+[start=3]
+. サーバーのインストール時に指定したユーザー名とパスワードを使用してログインします。
ログインすると、管理コンソールのホーム・ページがブラウザに表示されます。
@@ -147,7 +158,9 @@ image::images/weblogic-properties-enablejpa.png[title="サーバー・マネー
サーバー・マネージャの「ドメイン」タブでは、ユーザー名とパスワードを表示および変更できます。
-2. 「JPA 2を有効化」をクリックします。「閉じる」をクリックします。
+
+[start=2]
+. 「JPA 2を有効化」をクリックします。「閉じる」をクリックします。
「JPA 2を有効化」をクリックすると、IDEでWebLogic Serverのクラスパスが変更され、JPA 2のサポートを有効にするためのファイルが追加されます。
@@ -156,10 +169,19 @@ image::images/weblogic-properties-enablejpa.png[title="サーバー・マネー
* link:http://download.oracle.com/docs/cd/E17904_01/web.1111/e13720/using_toplink.htm#EJBAD1309[+WebLogic ServerにおけるJPA 2.0とTopLinkの併用+]
* link:http://forums.oracle.com/forums/thread.jspa?threadID=1112476[+OTNディスカッション・フォーラム: 11g リリース1パッチ・セット3 (WLS 10.3.4) +]
* link:http://wiki.eclipse.org/EclipseLink/Development/JPA_2.0/weblogic[+WebLogic 10.3でのJPA 2.0 APIの実行+]
-3. Oracle WebLogic Serverの管理コンソールをブラウザで開き、ログインします。
-4. 管理コンソールの「ドメイン構成」セクションの「*ドメイン*」をクリックします。
-5. 「構成」タブの「*JPA*」タブをクリックします。
-6. 「デフォルトJPAプロバイダ」ドロップダウン・リストで「*TopLink*」を選択します。「保存」をクリックします。
+
+[start=3]
+. Oracle WebLogic Serverの管理コンソールをブラウザで開き、ログインします。
+
+[start=4]
+. 管理コンソールの「ドメイン構成」セクションの「*ドメイン*」をクリックします。
+
+[start=5]
+. 「構成」タブの「*JPA*」タブをクリックします。
+
+[start=6]
+. 「デフォルトJPAプロバイダ」ドロップダウン・リストで「*TopLink*」を選択します。「保存」をクリックします。
+
image::images/admin-console-jpa.png[title="Oracle WebLogic Server管理コンソールの「JPA」タブ"]
「保存」をクリックすると、アプリケーションで明示的に持続性プロバイダが指定されていない場合には、サーバーにデプロイされたアプリケーションのデフォルトの持続性プロバイダはOracle TopLinkになります。
@@ -186,8 +208,13 @@ image::images/admin-console-jpa.png[title="Oracle WebLogic Server管理コンソ
*注意:*Java EE 6 Webは、WebLogic Server 12 cのインスタンスを登録した場合にのみ使用可能です。
image::images/new-project-ee6.png[title="新規プロジェクト・ウィザードで選択されたWeblogic"]
-7. JavaServer Facesフレームワークを選択します。
-8. 「サーバー・ライブラリ」ドロップダウン・リストから「JSF 2.x」を選択します。「終了」をクリックします。
+
+[start=7]
+. JavaServer Facesフレームワークを選択します。
+
+[start=8]
+. 「サーバー・ライブラリ」ドロップダウン・リストから「JSF 2.x」を選択します。「終了」をクリックします。
+
image::images/projectwizard-serverlib.png[title="新規プロジェクト・ウィザードの「フレームワーク」パネル"]
「終了」をクリックすると、IDEによってWebアプリケーション・プロジェクトが作成され、 ``index.xhtml`` がエディタに表示されます。「プロジェクト」ウィンドウで、 ``weblogic.xml`` ディスクリプタ・ファイルおよび ``web.xml`` が「構成ファイル」ノードに作成されたことを確認できます。
@@ -222,6 +249,7 @@ image::images/wl-projects-window1.png[title="「プロジェクト」ウィン
</fast-swap>
----
* ターゲット・サーバーがWebLogic Server 11g (10.3.4または10.3.5)の場合、サーバーのインストールにJSF 1.2とJSF 2.xをアプリケーションで使用するために必要なライブラリが含まれますが、これらはデフォルトでは非アクティブ化されています。JSF 2.xライブラリの使用を開始する前に、ライブラリのデプロイとインストールを行う必要があります。新規プロジェクト・ウィザードでライブラリを選択すると、ライブラリがまだインストールされていない場合はIDEでメッセージが表示され、ライブラリをインストールできます。ライブラリをインストールする必要があるのは1回のみです。
+
image::images/install-libraries-dialog.png[title="「不足しているサーバー・ライブラリの問題を解決」ダイアログ"]
アプリケーションの作成後、 ``weblogic.xml`` ディスクリプタ・ファイルを表示すると、IDEによってファイルが変更され、アプリケーションで使用されるJSFライブラリが指定されていることがわかります。
@@ -256,13 +284,16 @@ image::images/install-libraries-dialog.png[title="「不足しているサーバ
2. ユーザー名とパスワードを入力します。「OK」をクリックします。
3. 「MySQLサーバー」ノードを右クリックし、「データベースを作成」を選択します。
4. 「新規データベース名」ドロップダウン・リストで「*sample*」を選択します。「OK」をクリックします。
+
image::images/create-db.png[title="「データベースを作成」ダイアログ・ボックス"]
*注意:*データベースの構成によっては、新しいデータベースに対するアクセス権を明示的に指定する必要がある場合があります。
「OK」をクリックすると、sampleデータベースが作成され、データベース表が生成されます。MySQLサーバーのノードを展開すると、データベースのリストに新しい ``sample`` データベースが追加されていることがわかります。
-5. MySQLサーバーのノードを展開し、sampleデータベースを右クリックし、「接続」を選択します。
+
+[start=5]
+. MySQLサーバーのノードを展開し、sampleデータベースを右クリックし、「接続」を選択します。
「接続」をクリックすると、そのデータベースに対するデータベース接続ノードが「データベース」ノードの下に表示されます。ノードを展開すると、データベース表を表示できます。
@@ -293,6 +324,7 @@ MySQLデータベースをインストールしていない場合は、JavaDBで
8. 「新しいデータ・ソース」ダイアログ・ボックスで、JNDI名に「*jdbc/mysql-sample*」と入力します。
9. MySQL sampleデータベース接続を選択します。「OK」をクリックしてダイアログ・ボックスを閉じます。
10. 新規持続性ユニット・ウィザードで「終了」をクリックします。
+
image::images/new-persistence-eclipselink1.png[title="新規持続性ユニット・ウィザード"]
「終了」をクリックすると、プロジェクトのための ``persistence.xml`` が作成され、エディタに表示されます。エディタのツールバーで「ソース」をクリックし、XMLソース・エディタで ``persistence.xml`` を開きます。このファイルには、アプリケーションのエンティティおよび持続性を管理するためにサーバーが必要とする情報がすべて含まれています。
@@ -334,7 +366,9 @@ image::images/new-persistence-eclipselink1.png[title="新規持続性ユニッ
``customer`` 表とそれに関連する表がウィザードの「選択した表」の下に一覧表示されます。
-5. 生成されるクラスのパッケージとして「*ejb*」と入力します。「終了」をクリックします。
+
+[start=5]
+. 生成されるクラスのパッケージとして「*ejb*」と入力します。「終了」をクリックします。
「終了」をクリックすると、選択した各表のエンティティ・クラスがIDEによって生成されます。 ``ejb`` ソース・パッケージ・ノードを展開すると、生成されたエンティティ・クラスを表示できます。
@@ -374,8 +408,11 @@ image::images/adminconsole-deployments.png[title="WebLogic Server管理コンソ
*WebLogic 10.3.4または10.3.5へのデプロイに関する注意*.
* WebLogic Server 10.3.4または10.3.5にアプリケーションをデプロイした場合は、 ``WebLogicCustomer.war`` Webアプリケーションおよび ``jdbc/mysql-sample`` JDBC構成以外にJSF 2.0ライブラリもサーバーにデプロイされたことが表で確認できます。
+
image::images/admin-console-deployments.png[title="WebLogic Server管理コンソールの「デプロイメント」表"]
+
* 「サービス」ウィンドウでOracle WebLogic Serverのインスタンスを展開すると、そのサーバーにデプロイされているアプリケーションとリソースを表示できます。サーバーにJDBCリソースが作成されていることと、JSFライブラリがインストールされていることがわかります。
+
image::images/weblogic-services-window2.png[title="「サービス」ウィンドウに表示されたWebLogic Serverのアプリケーションとリソース"]
アプリケーションのデプロイの詳細は、link:http://download.oracle.com/docs/cd/E12840_01/wls/docs103/deployment/index.html[+WebLogic Serverへのアプリケーションのデプロイ+]を参照してください。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_pt_BR.asciidoc
index 70ea75b..3b17349 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_pt_BR.asciidoc
@@ -68,7 +68,9 @@ Para que você possa registrar o servidor, será necessário fazer download do i
Lembre-se de anotar o nome de usuário e a senha.
-3. Crie um domínio do WebLogic.
+
+[start=3]
+. Crie um domínio do WebLogic.
Você pode usar o link:http://download.oracle.com/docs/cd/E17904_01/web.1111/e14140/newdom.htm#i1073602[+Modo Gráfico do Assistente de Configuração do WebLogic+] para ajudá-lo a criar o domínio.
@@ -91,8 +93,12 @@ Depois de instalar o servidor, é possível usar o assistente Adicionar Instânc
O IDE automaticamente identificará o domínio da instância do servidor.
-5. Digite o nome de usuário e a senha do domínio.
-6. Ativar JPA 2.0 (Somente Servidor WebLogic 10.3.4 ou 10.3.5). Clique em Finalizar.
+
+[start=5]
+. Digite o nome de usuário e a senha do domínio.
+
+[start=6]
+. Ativar JPA 2.0 (Somente Servidor WebLogic 10.3.4 ou 10.3.5). Clique em Finalizar.
*Observação.* Se estiver registrando uma instância do Servidor WebLogic 12c (12.1.1.0) você precisará ativar o JPA 2.0 porque JPA 2.0 é ativado por default. Se você estiver registrando uma instância do WebLogic Server 11g Rel 1 (10.3.4 ou 10.3.5), você poderá ativar o JPA 2.0 ao registrar o servidor ou no Gerenciador de servidores depois que o servidor estiver registrado. Consulte a seção <<01e,Ativando Suporte para JPA 2.0 no Oracle WebLogic Server 11g>> abaixo para obter mais detalhes.
@@ -105,6 +111,7 @@ Você pode clicar com o botão direito do mouse no nó do Oracle WebLogic Server
* Iniciar e Parar o Servidor
* Abrir a Console de Administração no seu browser
* Exibir o Log do Servidor na janela de Saída do IDE
+
image::images/weblogic-services-window1.png[title="WebLogic Server na janela Serviços"]
@@ -118,11 +125,15 @@ Quando o servidor é iniciado, é possível ver o log do servidor na guia Oracle
Caso a guia não esteja visível, você poderá clicar com o botão direito do mouse no nó do Oracle WebLogic Server e selecionar Exibir Log do Servidor.
-2. Clique com o botão direito do mouse no nó do Oracle WebLogic Server e selecione Exibir Console de Administração.
+
+[start=2]
+. Clique com o botão direito do mouse no nó do Oracle WebLogic Server e selecione Exibir Console de Administração.
Quando você escolhe Exibir Console Admin, a tela de log-in do servidor é aberta no browser.
-3. Faça log-in com o nome de usuário e a senha especificados na instalação o servidor.
+
+[start=3]
+. Faça log-in com o nome de usuário e a senha especificados na instalação o servidor.
Após o log-in, você verá a Home Page da Console de Administração no seu browser.
@@ -147,7 +158,9 @@ image::images/weblogic-properties-enablejpa.png[title="Guia Domínio do Gerencia
A guia Domínio do Gerenciador de servidores permite que você exiba e modifique o nome de usuário e a senha.
-2. Clique em Ativar JPA 2. Clique em Fechar.
+
+[start=2]
+. Clique em Ativar JPA 2. Clique em Fechar.
Quando você clicar em Ativar JPA 2, o IDE modificará o classpath do WebLogic Server para adicionar os arquivos e ativar o suporte ao JPA 2.
@@ -156,10 +169,19 @@ Quando você clicar em Ativar JPA 2, o IDE modificará o classpath do WebLogic S
* link:http://download.oracle.com/docs/cd/E17904_01/web.1111/e13720/using_toplink.htm#EJBAD1309[+Usando o JPA 2.0 com o TopLink no WebLogic Server+]
* link:http://forums.oracle.com/forums/thread.jspa?threadID=1112476[+Fórum de Discussão OTN: 11g Release 1 Conjunto de Patches 3 (WLS 10.3.4)+]
* link:http://wiki.eclipse.org/EclipseLink/Development/JPA_2.0/weblogic[+Executando a API do JPA 2.0 no WebLogic 10.3+]
-3. Abra a Console de Administração do Oracle WebLogic Server no seu browser e efetue log-in.
-4. Clique em *Domínio* na seção Configurações de Domínio da Console de Administração.
-5. Clique na guia *JPA* na guia Configuração.
-6. Selecione *TopLink* na lista drop-down Provedor JPA Default. Clique em Salvar.
+
+[start=3]
+. Abra a Console de Administração do Oracle WebLogic Server no seu browser e efetue log-in.
+
+[start=4]
+. Clique em *Domínio* na seção Configurações de Domínio da Console de Administração.
+
+[start=5]
+. Clique na guia *JPA* na guia Configuração.
+
+[start=6]
+. Selecione *TopLink* na lista drop-down Provedor JPA Default. Clique em Salvar.
+
image::images/admin-console-jpa.png[title="guia JPA na Console de Administração do Oracle WebLogic Server"]
Quando você clica em Salvar, o Oracle TopLink se tornará o provedor de persistência default para aplicações implantadas no servidor quando nenhum provedor de persistência for explicitamente especificado pela aplicação.
@@ -186,8 +208,13 @@ Neste exercício, você usará o assistente de Novo Projeto para criar uma aplic
*Observação.* Java EE 6 Web só está disponível se você registrou uma instância do WebLogic Server 12c.
image::images/new-project-ee6.png[title="WebLogic selecionado no Assistente de Novo Projeto"]
-7. Selecione o framework JavaServer Faces.
-8. Selecione JSF 2.x na lista drop-down Biblioteca do Servidor. Clique em Finalizar.
+
+[start=7]
+. Selecione o framework JavaServer Faces.
+
+[start=8]
+. Selecione JSF 2.x na lista drop-down Biblioteca do Servidor. Clique em Finalizar.
+
image::images/projectwizard-serverlib.png[title="Painel Frameworks do assistente de Novo Projeto"]
Quando você clicar em Finalizar, o IDE criará o projeto da aplicação Web e abrirá o ``index.xhtml`` no editor. Na janela Projetos você pode ver se o IDE criou o arquivo do descritor ``weblogic.xml`` e ``web.xml`` no nó Arquivos de Configuração.
@@ -222,6 +249,7 @@ Se você abrir ``web.xml`` no editor, você poderá ver que ``faces/index.xht
</fast-swap>
----
* Se o servidor de destino for WebLogic Server 11g (10.3.4 ou 10.3.5), a instalação do servidor incluirá as bibliotecas necessárias para usar JSF 1.2 e JSF 2.x nas aplicações, mas elas serão desativadas por default. É necessário implantar e instalar as bibliotecas JSF 2.x antes de utilizá-las. Se a biblioteca ainda não estiver instalada, o IDE solicitará a instalação da mesma, caso você selecione a biblioteca no assistente de Novo Projeto. A biblioteca precisa ser instalada uma única vez.
+
image::images/install-libraries-dialog.png[title="Caixa de diálogo Resolver Problema de Biblioteca do Servidor não Encontrada"]
Após criar a aplicação, quando você exibir o arquivo ``weblogic.xml`` do descritor, você verá que o IDE modificou o arquivo para especificar a biblioteca JSF que será utilizada com a aplicação.
@@ -256,13 +284,16 @@ Neste exercício, você criará e abrirá uma conexão para o banco de dados.
2. Digite o nome de usuário e a senha. Clique em OK.
3. Clique com o botão direito do mouse no nó Servidor MySQL e escolha Criar Banco de Dados.
4. Selecione *sample* na lista drop-down Novo Nome do Banco de Dados. Clique em OK.
+
image::images/create-db.png[title="Caixa de diálogo Criar Banco de Dados"]
*Observação.* Dependendo de como você tiver configurado o seu banco de dados, pode ser necessário especificar explicitamente as permissões de acesso para o novo banco de dados.
Quando você clicar em OK, o IDE criará o banco de dados de amostra e preencherá as tabelas do banco de dados. Se você expandir o nó do servidor MySQL, você verá que a lista de bancos de dados agora contém o novo banco de dados ``sample`` .
-5. Expanda o nó do servidor MySQL e clique com o botão direito do mouse no banco de dados de amostra e selecione Conectar.
+
+[start=5]
+. Expanda o nó do servidor MySQL e clique com o botão direito do mouse no banco de dados de amostra e selecione Conectar.
Quando você clicar em Conectar, um nó de conexão de banco de dados para o banco de dados aparecerá sob o nó Bancos de Dados. É possível expandir o nó para exibir as tabelas do banco de dados.
@@ -293,6 +324,7 @@ Para gerenciar a persistência na aplicação, é necessário apenas criar uma u
8. Digite *jdbc/mysql-sample* para o nome do JNDI na caixa de diálogo Nova Fonte de Dados.
9. Selecione a conexão do banco de dados de amostra MySQL. Clique em OK para fechar a caixa de diálogo.
10. Clique em Finalizar no assistente de Nova Unidade de Persistência.
+
image::images/new-persistence-eclipselink1.png[title="Assistente Nova Unidade de Persistência"]
Quando você clicar em Finalizar, o arquivo ``persistence.xml`` será criado para o seu projeto e aberto no editor. Você pode clicar em Código-fonte na barra de ferramentas do editor para abrir ``persistence.xml`` no editor do código-fonte de XML. Esse arquivo contém todas as informações que o servidor precisa para gerenciar as entidades e a persistência da aplicação.
@@ -334,7 +366,9 @@ Agora, você usará o assistente de Classes de Entidade do Banco de Dados para c
O assistente lista a tabela ``customer`` e as tabelas relacionadas em Tabelas Selecionadas.
-5. Digite *ejb* como o pacote para as classes geradas. Clique em Finalizar.
+
+[start=5]
+. Digite *ejb* como o pacote para as classes geradas. Clique em Finalizar.
Quando você clicar em Finalizar, o IDE gerará as classes de entidade para cada tabela selecionada. É possível expandir o nó do pacote de código-fonte ``ejb`` para exibir as classes de entidade geradas.
@@ -374,8 +408,11 @@ Você pode clicar no nome de cada recurso para exibir detalhes adicionais sobre
*Observações sobre como implantar o Servidor WebLogic 10.3.4 ou 10.3.5.*
* Se você implantou a aplicação ao Servidor WebLogic 10.3.4 ou 10.3.5 você pode ver na tabela que a biblioteca JSF 2.0 também foi implantada para o servidor, além da aplicação web ``WebLogicCustomer.war`` e a configuração ``jdbc/mysql-sample`` de JDBC.
+
image::images/admin-console-deployments.png[title="Tabela de Implantações na Console de Administração do WebLogic Server"]
+
* Se você expandir a instância do Oracle WebLogic Server na janela Serviços, será possível exibir os aplicações e os recursos implantados no servidor. Observe que os recursos JDBC foram criados no servidor e que as bibliotecas JSF estão instaladas.
+
image::images/weblogic-services-window2.png[title="Aplicações e recursos do WebLogic Server na janela Serviços"]
Para obter mais informações sobre a implantação de aplicações, consulte link:http://download.oracle.com/docs/cd/E12840_01/wls/docs103/deployment/index.html[+Implantando aplicações no WebLogic Server+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_ru.asciidoc
index a6ff612..e7fc424 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_ru.asciidoc
@@ -68,7 +68,9 @@ image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой
Не забудьте указать имя пользователя и пароль.
-3. Создайте домен WebLogic.
+
+[start=3]
+. Создайте домен WebLogic.
Можно использовать link:http://download.oracle.com/docs/cd/E17904_01/web.1111/e14140/newdom.htm#i1073602[+графический режим мастера настройки WebLogic+] для создания домена.
@@ -91,8 +93,12 @@ image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой
IDE автоматически идентифицирует домен для экземпляра сервера.
-5. Введите имя пользователя и пароль для домена.
-6. Включите интерфейс JPA 2.0 (только для WebLogic Server 10.3.4 или 10.3.5). Нажмите кнопку "Завершить".
+
+[start=5]
+. Введите имя пользователя и пароль для домена.
+
+[start=6]
+. Включите интерфейс JPA 2.0 (только для WebLogic Server 10.3.4 или 10.3.5). Нажмите кнопку "Завершить".
*Примечание.* При регистрации экземпляра WebLogic Server 12c (12.1.1.0) не требуется включать интерфейс JPA 2.0, так как он включен по умолчанию. Если вы регистрируете экземпляр сервера WebLogic 11g Rel 1 (10.3.4 или 10.3.5), вы можете активировать JPA 2.0 при регистрации сервера или в диспетчере серверов после регистрации. Дополнительные сведения см. в следующем разделе <<01e,Включение поддержки JPA 2.0 в Oracle WebLogic Server 11g>>.
@@ -105,6 +111,7 @@ image::images/add-weblogic-server2.png[title="Мастер добавления
* Запуск и остановка сервера
* Открытие администраторской консоли в браузере
* Просмотр журнала сервера в окне вывода IDE
+
image::images/weblogic-services-window1.png[title="Сервер WebLogic в окне "Службы"."]
@@ -118,11 +125,15 @@ image::images/weblogic-services-window1.png[title="Сервер WebLogic в ок
Можно щелкнуть правой кнопкой мыши узел сервера Oracle WebLogic и выбрать 'Просмотреть журнал сервера', если вкладка не отображается.
-2. Щелкните правой кнопкой мыши узел сервера Oracle WebLogic и выберите команду "Просмотреть администраторскую консоль".
+
+[start=2]
+. Щелкните правой кнопкой мыши узел сервера Oracle WebLogic и выберите команду "Просмотреть администраторскую консоль".
При выборе команды "Просмотреть администраторскую консоль" в вашем браузере откроется экран входа на сервер.
-3. Войдите с помощью имени пользователя и пароля, которые вы указали при установке сервера.
+
+[start=3]
+. Войдите с помощью имени пользователя и пароля, которые вы указали при установке сервера.
После входа вы увидите домашнюю страницу администраторской консоли в окне браузера.
@@ -147,7 +158,9 @@ image::images/weblogic-properties-enablejpa.png[title="Вкладка 'Доме
Вкладка "Домен" диспетчера серверов позволяет просматривать и изменять имя пользователя и пароль.
-2. Выберите "Активировать JPA 2". Выберите "Close" (Закрыть).
+
+[start=2]
+. Выберите "Активировать JPA 2". Выберите "Close" (Закрыть).
Когда вы выберете команду "Активировать JPA 2", IDE изменит путь класса сервера WebLogic для добавления файлов с целью активации поддержки JPA 2.
@@ -156,10 +169,19 @@ image::images/weblogic-properties-enablejpa.png[title="Вкладка 'Доме
* link:http://download.oracle.com/docs/cd/E17904_01/web.1111/e13720/using_toplink.htm#EJBAD1309[+Использование JPA 2.0 с TopLink в сервере WebLogic+]
* link:http://forums.oracle.com/forums/thread.jspa?threadID=1112476[+Дискуссионный форум OTN: 11g Release 1 Patch Set 3 (WLS 10.3.4) +]
* link:http://wiki.eclipse.org/EclipseLink/Development/JPA_2.0/weblogic[+Запуск JPA 2.0 API на WebLogic 10.3+]
-3. Откройте администраторскую консоль сервера Oracle WebLogic в браузере и войдите в систему.
-4. Выберите команду *Домен* в разделе "Конфигурации домена" администраторской консоли.
-5. Нажмите вкладку *JPA* в разделе "Конфигурация".
-6. Выберите команду *TopLink* в раскрывающемся списке "Поставщик JPA по умолчанию". Нажмите кнопку "Сохранить".
+
+[start=3]
+. Откройте администраторскую консоль сервера Oracle WebLogic в браузере и войдите в систему.
+
+[start=4]
+. Выберите команду *Домен* в разделе "Конфигурации домена" администраторской консоли.
+
+[start=5]
+. Нажмите вкладку *JPA* в разделе "Конфигурация".
+
+[start=6]
+. Выберите команду *TopLink* в раскрывающемся списке "Поставщик JPA по умолчанию". Нажмите кнопку "Сохранить".
+
image::images/admin-console-jpa.png[title="Вкладка 'JPA' консоли администрирования сервера Oracle WebLogic"]
Когда вы нажмете кнопку "Сохранить", Oracle TopLink станет поставщиком сохранения состояния по умолчанию для приложений, которые запускаются на сервере, если для данных приложений не указан конкретный поставщик сохранения состояния.
@@ -186,8 +208,13 @@ image::images/admin-console-jpa.png[title="Вкладка 'JPA' консоли
*Примечание.* Вариант Java EE 6 Web доступен, только если вы зарегистрировали экземпляр WebLogic Server 12c.
image::images/new-project-ee6.png[title="В мастере создания проектов выбран Weblogic "]
-7. Выберите платформу JavaServer Faces.
-8. В списке 'Серверная библиотека' выберите JSF 2.x. Нажмите кнопку "Завершить".
+
+[start=7]
+. Выберите платформу JavaServer Faces.
+
+[start=8]
+. В списке 'Серверная библиотека' выберите JSF 2.x. Нажмите кнопку "Завершить".
+
image::images/projectwizard-serverlib.png[title="Панель 'Платформы' мастера создания проектов"]
Когда вы нажмете кнопку "Закончить", IDE создаст проект веб-приложения и откроет файл ``index.xhtml`` в редакторе. Откройте окно 'Проекты'. Вы увидите, что среда IDE создала файл дескриптора ``weblogic.xml`` и файл ``web.xml`` в структуре узла 'Файлы конфигурации'.
@@ -222,6 +249,7 @@ image::images/wl-projects-window1.png[title="weblogic.xml выбран в окн
</fast-swap>
----
* Если в качестве целевого сервера используется WebLogic Server 11g (10.3.4 или 10.3.5), в пакет установки сервера входят библиотеки, необходимые для использования JSF 1.2 и JSF 2.x в приложениях, но эти библиотеки по умолчанию деактивированы. В этом случае потребуется развернуть и установить библиотеки JSF 2.x. Если библиотека еще не установлена; IDE может установить ее за вас, если вы выберете библиотеку в мастере новых проектов. Библиотеку необходимо установить только один раз.
+
image::images/install-libraries-dialog.png[title="Диалоговое окно 'Разрешение проблемы отсутствующих серверов'"]
После создания приложения при просмотре файла ``weblogic.xml`` в редакторе вы увидите, что среда IDE внесла в файл изменения и указала в нем библиотеку JSF, которая будет использоваться приложением.
@@ -256,13 +284,16 @@ image::images/install-libraries-dialog.png[title="Диалоговое окно
2. Введите имя пользователя и пароль. Нажмите кнопку "ОК".
3. Щелкните правой кнопкой мыши узел "MySQL Server" и выберите "Create Database".
4. Выберите *sample* в раскрывающемся списке имен новой базы данных. Нажмите кнопку "ОК".
+
image::images/create-db.png[title="Диалоговое окно создания базы данных"]
*Примечание.* В зависимости от того, как настроена база данных, может потребоваться явно указать права доступа к новой базе данных.
Когда вы нажмете кнопку ОК, IDE создаст примерную базу данных и заполнит ее таблицы. Если вы расширите узел сервера MySQL, то увидите, что теперь список баз данных содержит новую базу данных ``sample`` .
-5. Разверните узел сервера MySQL и щелкните правой кнопкой мыши образец базы данных и выберите 'Подключение'.
+
+[start=5]
+. Разверните узел сервера MySQL и щелкните правой кнопкой мыши образец базы данных и выберите 'Подключение'.
Когда вы нажмете кнопку "Подключиться", в узле "Базы данных" появится узел для подключения. Вы можете расширить узел для просмотра таблиц базы данных.
@@ -293,6 +324,7 @@ IDE использует подключение к базе данных для
8. Введите *jdbc/mysql-sample* как имя JNDI в диалоговом окне "Новый источник данных".
9. Выберите подключение к примеру базы данных MySQL. Нажмите кнопку "ОК" для закрытия диалогового окна.
10. Нажмите кнопку "Готово" в мастере создания блоков сохранения состояния.
+
image::images/new-persistence-eclipselink1.png[title="Мастер создания блоков сохранения состояния"]
Когда вы нажмете кнопку "Готово", для вашего проекта будет создан файл ``persistence.xml`` и открыт в редакторе. Вы можете нажать значок 'Исходный код' на панели инструментов редактора, чтобы открыть файл ``persistence.xml`` в редакторе исходного кода XML. Этот файл содержит всю информацию, которая нужна серверу для управления сущностями и сохранением состояния приложения.
@@ -334,7 +366,9 @@ image::images/new-persistence-eclipselink1.png[title="Мастер создан
Мастер содержит таблицу ``customer`` и связанные с ней в разделе "Выделенные таблицы".
-5. Введите *ejb* как пакет для сгенерированных классов. Нажмите кнопку "Завершить".
+
+[start=5]
+. Введите *ejb* как пакет для сгенерированных классов. Нажмите кнопку "Завершить".
Когда вы нажмете кнопку "Готово", среда IDE сгенерирует классы сущностей для каждой из выделенных таблиц. Вы можете расширить узел исходного пакета ``ejb`` для просмотра генерированных классов сущностей.
@@ -374,8 +408,11 @@ image::images/adminconsole-deployments.png[title="Таблица 'Разверт
*Замечания по развертыванию на сервере WebLogic Server 10.3.4 или 10.3.5.*
* Если приложение развернуто на сервере WebLogic Server 10.3.4 или 10.3.5, можно видеть, что библиотека JSF 2.0 также развернута на сервере наряду с веб-приложением ``WebLogicCustomer.war`` и конфигурацией JDBC ``jdbc/mysql-sample`` .
+
image::images/admin-console-deployments.png[title="Таблица 'Развертывания' на консоли администрирования сервера WebLogic"]
+
* При расширении экземпляра сервера Oracle WebLogic в окне "Сервисы" можно просмотреть приложения и ресурсы, запускаемые на сервере. Как видите, ресурсы JDBC были созданы на сервере, а библиотеки JSF установлены.
+
image::images/weblogic-services-window2.png[title="приложения и ресурсы сервера WebLogic в окне "Службы"."]
Для получения более подробной информации о запуске приложений см.link:http://download.oracle.com/docs/cd/E12840_01/wls/docs103/deployment/index.html[+Запуск приложений на сервере WebLogic+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_zh_CN.asciidoc
index 0cbf774..d0e2b70 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf-jpa-weblogic_zh_CN.asciidoc
@@ -68,7 +68,9 @@ image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 Net
请务必记下用户名和口令。
-3. 创建一个 WebLogic 域。
+
+[start=3]
+. 创建一个 WebLogic 域。
您可以使用 link:http://download.oracle.com/docs/cd/E17904_01/web.1111/e14140/newdom.htm#i1073602[+WebLogic 配置向导的图形模式+]来帮助创建域。
@@ -91,8 +93,12 @@ image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 Net
IDE 将自动识别服务器实例的域。
-5. 键入该域的用户名和口令。
-6. 启用 JPA 2.0（仅限 WebLogic Server 10.3.4 或 10.3.5）。单击 "Finish"（完成）。
+
+[start=5]
+. 键入该域的用户名和口令。
+
+[start=6]
+. 启用 JPA 2.0（仅限 WebLogic Server 10.3.4 或 10.3.5）。单击 "Finish"（完成）。
*注：*如果注册 WebLogic Server 12c (12.1.1.0) 的实例，则不需要启用 JPA 2.0，因为默认情况下会启用 JPA 2.0。如果注册 WebLogic Server 11g Rel 1（10.3.4 或 10.3.5）的实例，则可在注册服务器时或在注册服务器后在服务器管理器中启用 JPA 2.0。有关更多详细信息，请参见下面的<<01e,在 Oracle WebLogic Server 11g 上启用 JPA 2.0 支持>>部分。
@@ -105,6 +111,7 @@ image::images/add-weblogic-server2.png[title="添加服务器向导"]
* 启动和停止服务器
* 在浏览器中打开管理控制台
* 在 IDE 的 "Output"（输出）窗口中查看服务器日志
+
image::images/weblogic-services-window1.png[title=""Services"（服务）窗口中的 WebLogic Server"]
@@ -118,11 +125,15 @@ image::images/weblogic-services-window1.png[title=""Services"（服务）窗口
如果未显示该标签，您可以右键单击 "Oracle WebLogic Server" 节点，然后选择 "View Server Log"（查看服务器日志）。
-2. 右键单击 "Oracle WebLogic Server" 节点，然后选择 "View Admin Console"（查看管理控制台）。
+
+[start=2]
+. 右键单击 "Oracle WebLogic Server" 节点，然后选择 "View Admin Console"（查看管理控制台）。
在选择 "View Admin Console"（查看管理控制台）时，将在浏览器中打开服务器的登录屏幕。
-3. 使用在安装服务器时指定的用户名和口令进行登录。
+
+[start=3]
+. 使用在安装服务器时指定的用户名和口令进行登录。
在登录后，将在浏览器中看到管理控制台主页。
@@ -147,7 +158,9 @@ image::images/weblogic-properties-enablejpa.png[title="服务器管理器中的
在服务器管理器的 "Domain"（域）标签中，您可以查看和修改用户名和口令。
-2. 单击 "Enable JPA 2"（启用 JPA 2）。单击 "Close"（关闭）。
+
+[start=2]
+. 单击 "Enable JPA 2"（启用 JPA 2）。单击 "Close"（关闭）。
添加 "Enable JPA 2"（启用 JPA 2）时，IDE 将修改 WebLogic Server 类路径来添加文件，从而启用 JPA 2 支持。
@@ -156,10 +169,19 @@ image::images/weblogic-properties-enablejpa.png[title="服务器管理器中的
* link:http://download.oracle.com/docs/cd/E17904_01/web.1111/e13720/using_toplink.htm#EJBAD1309[+在 WebLogic Server 中将 JPA 2.0 与 TopLink 一起使用+]
* link:http://forums.oracle.com/forums/thread.jspa?threadID=1112476[+OTN 论坛：11g Release 1 Patch Set 3 (WLS 10.3.4)+]
* link:http://wiki.eclipse.org/EclipseLink/Development/JPA_2.0/weblogic[+在 WebLogic 10.3 中运行 JPA 2.0 API+]
-3. 在浏览器中打开 Oracle WebLogic Server 管理控制台并登录。
-4. 在管理控制台的 "Domain Configurations"（域配置）部分下面，单击 *Domain*（域）。
-5. 在 "Configuration"（配置）标签下单击 *JPA* 标签。
-6. 在 "Default JPA Provider"（默认 JPA 提供器）下拉列表中选择 *TopLink*。单击 "Save"（保存）。
+
+[start=3]
+. 在浏览器中打开 Oracle WebLogic Server 管理控制台并登录。
+
+[start=4]
+. 在管理控制台的 "Domain Configurations"（域配置）部分下面，单击 *Domain*（域）。
+
+[start=5]
+. 在 "Configuration"（配置）标签下单击 *JPA* 标签。
+
+[start=6]
+. 在 "Default JPA Provider"（默认 JPA 提供器）下拉列表中选择 *TopLink*。单击 "Save"（保存）。
+
image::images/admin-console-jpa.png[title="Oracle WebLogic Server 管理控制台中的 "JPA" 标签"]
如果应用程序未明确指定持久性提供器，则单击 "Save"（保存）后，Oracle TopLink 将成为部署到服务器的应用程序的默认持久性提供器。
@@ -186,8 +208,13 @@ image::images/admin-console-jpa.png[title="Oracle WebLogic Server 管理控制
*注：*只有在注册了 WebLogic Server 12c 的实例时，Java EE 6 Web 才可用。
image::images/new-project-ee6.png[title="新建项目向导中选择的 Weblogic"]
-7. 选择 "JavaServer Faces" 框架。
-8. 从 "Server Library"（服务器库）下拉列表中选择 "JSF 2.x"。单击 "Finish"（完成）。
+
+[start=7]
+. 选择 "JavaServer Faces" 框架。
+
+[start=8]
+. 从 "Server Library"（服务器库）下拉列表中选择 "JSF 2.x"。单击 "Finish"（完成）。
+
image::images/projectwizard-serverlib.png[title="新建项目向导的 "Frameworks"（框架）面板"]
单击 "Finish"（完成），此时 IDE 将创建 Web 应用程序项目并在编辑器中打开 ``index.xhtml`` 。在 "Projects"（项目）窗口中，您可以看到 IDE 在 "Configuration Files"（配置文件）节点下创建了 ``weblogic.xml`` 描述符文件和 ``web.xml`` 。
@@ -222,6 +249,7 @@ image::images/wl-projects-window1.png[title=""Projects"（项目）窗口中选
</fast-swap>
----
* 如果目标服务器为 WebLogic Server 11g（10.3.4 或 10.3.5），则服务器安装将包含在应用程序中使用 JSF 1.2 和 JSF 2.x 所需的库，但在默认情况下会取消激活这些库。您需要部署并安装 JSF 2.x 库，然后才能开始使用这些库。如果尚未安装该库，IDE 将提示您安装；如果在新建项目向导中选择了该库，则 IDE 可以安装该库。该库只需要安装一次。
+
image::images/install-libraries-dialog.png[title=""Resolve Missing Server Library"（解决缺少服务器库）对话框"]
在创建应用程序之后，当您查看 ``weblogic.xml`` 描述符文件时，您会看到 IDE 修改了该文件以指定将与应用程序一起使用的 JSF 库。
@@ -256,13 +284,16 @@ image::images/install-libraries-dialog.png[title=""Resolve Missing Server Librar
2. 键入用户名和口令。单击 "OK"（确定）。
3. 右键单击 MySQL 服务器节点并选择 "Create Database"（创建数据库）。
4. 在 "New Database Name"（新建数据库名称）下拉列表中选择 *sample*。单击 "OK"（确定）。
+
image::images/create-db.png[title=""Create Database"（创建数据库）对话框"]
*注：*根据您配置数据库的方式，您可能需要明确指定新数据库的访问权限。
在单击 "OK"（确定）后，IDE 将创建 sample 数据库并填充数据库表。如果展开 "MySQL server"（MySQL 服务器）节点，则可以看到数据库列表现在包含新的 ``sample`` 数据库。
-5. 展开 "MySQL server"（MySQL 服务器）节点，右键单击 sample 数据库，然后选择 "Connect"（连接）。
+
+[start=5]
+. 展开 "MySQL server"（MySQL 服务器）节点，右键单击 sample 数据库，然后选择 "Connect"（连接）。
在单击 "Connect"（连接）后，将在 "Databases"（数据库）节点下面显示该数据库的数据库连接节点。您可以展开该节点以查看数据库表。
@@ -293,6 +324,7 @@ IDE 使用数据库连接来连接到该数据库并检索数据库详细信息
8. 在 "New Data Source"（新建数据源）对话框中，键入 *jdbc/mysql-sample* 作为 JNDI 名称。
9. 选择 MySQL sample 数据库连接。单击 "OK"（确定）关闭该对话框。
10. 在新建持久性单元向导中单击 "Finish"（完成）。
+
image::images/new-persistence-eclipselink1.png[title="新建持久性单元向导"]
单击 "Finish"（完成），此时将为项目创建 ``persistence.xml`` 并在编辑器中打开该文件。可以在编辑器的工具栏中单击 "Source"（源），以便在 XML 源代码编辑器中打开 ``persistence.xml`` 。此文件包含了服务器管理应用程序的实体和持久性所需的所有信息。
@@ -334,7 +366,9 @@ image::images/new-persistence-eclipselink1.png[title="新建持久性单元向
该向导将在 "Selected Tables"（选定的表）下面列出 ``customer`` 表和相关的表。
-5. 键入 *ejb* 作为生成的类的包。单击 "Finish"（完成）。
+
+[start=5]
+. 键入 *ejb* 作为生成的类的包。单击 "Finish"（完成）。
单击 "Finish"（完成），此时 IDE 将为每个选定的表生成实体类。您可以展开 ``ejb`` 源包节点以查看生成的实体类。
@@ -374,8 +408,11 @@ image::images/adminconsole-deployments.png[title="WebLogic Server 管理控制
*部署到 WebLogic Server 10.3.4 或 10.3.5 的相关说明。*
* 如果将应用程序部署到了 WebLogic Server 10.3.4 或 10.3.5，您会在表中看到，除了 ``WebLogicCustomer.war`` Web 应用程序和 ``jdbc/mysql-sample`` JDBC 配置，JSF 2.0 库也部署到了服务器。
+
image::images/admin-console-deployments.png[title="WebLogic Server 管理控制台中的 "Deployments"（部署）表"]
+
* 如果在 "Services"（服务）窗口中展开 Oracle WebLogic Server 实例，则可以查看部署到服务器的应用程序和资源。您可以看到在服务器上创建了 JDBC 资源并安装了 JSF 库。
+
image::images/weblogic-services-window2.png[title=""Services"（服务）窗口中的 WebLogic Server 应用程序和资源"]
有关部署应用程序的详细信息，请参见link:http://download.oracle.com/docs/cd/E12840_01/wls/docs103/deployment/index.html[+将应用程序部署到 WebLogic Server+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud.asciidoc
index c92a4fe..5e6ad91 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud.asciidoc
@@ -37,25 +37,6 @@ In this tutorial, you will use the NetBeans IDE to create a web application that
The IDE provides two wizards which generate all of the code for the application. The first is the <<generateEntity,Entity Classes from Database wizard>> which enables you to generate entity classes from the provided database. After you create entity classes, you use the <<jsfPagesEntityClasses,JSF Pages from Entity Classes wizard>> to create JSF managed beans and EJBs for the entity classes, as well as a set of Facelets pages to handle the views for entity class data. The final section o [...]
-image::images/netbeans-stamp-80-74-73.png[title="Content on this page applies to the NetBeans IDE 7.2, 7.3, 7.4 and 8.0"]
-
-
-==== Contents
-
-* <<createDB,Creating the Database>>
-* <<examineDB,Examining the Database Structure>>
-* <<createProject,Creating the Web Application Project>>
-* <<generateEntity,Generating the Entity Classes from the Database>>
-* <<jsfPagesEntityClasses,Generating JSF Pages From Entity Classes>>
-* <<explore,Exploring the Application>>
-* <<completedProject,Examining the Completed Project>>
-* <<populateDB,Populating the Database with an SQL Script>>
-* <<editorSupport,Exploring Editor Support in Facelets Pages>>
-* <<dbIntegrity,Exploring Database Integrity with Field Validation>>
-* <<editEntity,Editing Entity Classes>>
-* <<troubleshooting,Troubleshooting>>
-* <<seeAlso,See Also>>
-
To complete this tutorial, you need the following software and resources.
|===
@@ -132,8 +113,11 @@ Perform the following steps to create a database and connect to it from the IDE.
4. Type *consult* as the Database Name in the Create MySQL Database dialog. Click OK. A new node appears under the Databases node (`jdbc:mysql://localhost:3306/consult [root on Default schema]`).
5. Right-click the new node and choose Connect.
6. Choose File > Open File from the main menu and navigate to the extracted file `mysql_create_consult.sql`. Click Open. The file automatically opens in the SQL editor.
+
image::images/run-sql-script.png[title="Open SQL files in the IDE's editor"]
-7. Make sure that the `consult` database is selected in the Connection drop-down list in the SQL editor toolbar, then click the Run SQL ( image::images/run-sql-btn.png[] ) button.
+
+[start=7]
+. Make sure that the `consult` database is selected in the Connection drop-down list in the SQL editor toolbar, then click the Run SQL ( image:images/run-sql-btn.png[] ) button.
When you click Run SQL, the following output appears in the Output window.
@@ -224,12 +208,22 @@ After connecting to a database in the IDE, you can use the Entity Classes from D
1. In the Projects window, right-click the `ConsultingAgency` project node, and choose New > Entity Classes from Database. (If this option is not listed, choose Other. Then, in the File wizard, select the Persistence category, then Entity Classes from Database.)
2. Select New Data Source from the Data Source drop-down list to open the Create Data Source dialog.
3. Type `jdbc/consult` as the JNDI Name and select the `jdbc:mysql://localhost:3306/consult` connection as the Database Connection.
+
image::images/create-datasource.png[title="Specify a JNDI name and database connection to create a datasource"]
-4. Click OK to close the dialog box and return to the wizard. The tables in the `consult` database appear in the Available Tables listbox.
-5. Click the Add All button to select all tables contained in the database. Click Next.
+
+[start=4]
+. Click OK to close the dialog box and return to the wizard. The tables in the `consult` database appear in the Available Tables listbox.
+
+[start=5]
+. Click the Add All button to select all tables contained in the database. Click Next.
+
image::images/new-entities-wizard.png[]
-6. Type `jpa.entities` as the Package name.
-7. Confirm that the checkboxes to generate named queries and create a persistence unit are selected. Click Finish.
+
+[start=6]
+. Type `jpa.entities` as the Package name.
+
+[start=7]
+. Confirm that the checkboxes to generate named queries and create a persistence unit are selected. Click Finish.
When you click Finish, the IDE generates the entity classes in the `jpa.entities` package of the project.
@@ -267,19 +261,34 @@ To generate the JSF pages:
The Available Entity Classes box lists the seven entity classes contained in the project. The box does not list the embeddable classes (`ClientPK.java` and `ProjectPK.java`).
-2. Click Add All to move all the classes to the Selected Entity Classes box.
+
+[start=2]
+. Click Add All to move all the classes to the Selected Entity Classes box.
+
image::images/newjsf-wizard.png[title="New JSF Pages from Entity Classes wizard displays all entity classes contained in project"]
+
Click Next.
-3. In Step 3 of the wizard, Generate JSF Pages and Classes, type `jpa.session` for the JPA Session Bean Package.
-4. Type `jsf` for the JSF Classes Package.
-5. Enter '`/resources/Bundle`' into the Localization Bundle Name field. This will generate a package named `resources` which the `Bundle.properties` file will reside in. (If you leave this blank, the properties bundle will be created in the project's default package.)
+
+[start=3]
+. In Step 3 of the wizard, Generate JSF Pages and Classes, type `jpa.session` for the JPA Session Bean Package.
+
+[start=4]
+. Type `jsf` for the JSF Classes Package.
+
+[start=5]
+. Enter '`/resources/Bundle`' into the Localization Bundle Name field. This will generate a package named `resources` which the `Bundle.properties` file will reside in. (If you leave this blank, the properties bundle will be created in the project's default package.)
+
image::images/newjsf-wizard2.png[title="Specify package and folder names for generated files"]
To let the IDE better accommodate your project conventions, you can customize any files generated by the wizard. Click the Customize Template link to modify the file templates used by the wizard.
+
image::images/customize-template.png[title="Customize templates for files generated by the wizard"]
+
In general, you can access and make changes to all templates maintained by the IDE using the Template Manager (Tools > Templates).
-6. Click Finish. The IDE generates the stateless session beans in the `jpa.session` package, and the JSF session-scoped, managed beans in the `jsf` package. Each stateless session bean handles the operations for the corresponding entity class, including creating, editing, and destroying instances of the entity class via the Java Persistence API. Each JSF managed bean implements the `javax.faces.convert.Converter` interface and performs the work of converting instances of the correspondin [...]
+
+[start=6]
+. Click Finish. The IDE generates the stateless session beans in the `jpa.session` package, and the JSF session-scoped, managed beans in the `jsf` package. Each stateless session bean handles the operations for the corresponding entity class, including creating, editing, and destroying instances of the entity class via the Java Persistence API. Each JSF managed bean implements the `javax.faces.convert.Converter` interface and performs the work of converting instances of the corresponding [...]
If you expand the Web Pages node, you can see that the IDE generated a folder for each of the entity classes. Each folder contains the files `Create.xhtml`, `Edit.xhtml`, `List.xhtml` and `View.xhtml`. The IDE also modified the `index.xhtml` file by inserting links to each of the `List.xhtml` pages.
@@ -339,7 +348,7 @@ The following is a series of short, optional exercises that help you to become f
[[completedProject]]
=== Examining the Completed Project
-1. To run the project, either right-click the project node in the Projects window and choose Run, or click the Run Project ( image::images/run-project-btn.png[] ) button in the main toolbar.
+1. To run the project, either right-click the project node in the Projects window and choose Run, or click the Run Project ( image:images/run-project-btn.png[] ) button in the main toolbar.
When the application's welcome page displays, you are provided with a list of links enabling you to view entries contained in each database table.
@@ -376,8 +385,12 @@ The links were added to the welcome page (`index.xhtml`) when you completed the
</h:form>
</h:body>
----
-2. Click the '`Show All Consultant Items`' link. Looking at the code above, you can see that the target page is `/consultant/List.xhtml`. (In JSF 2.x, the file extension is inferred due to implicit navigation.)
+
+[start=2]
+. Click the '`Show All Consultant Items`' link. Looking at the code above, you can see that the target page is `/consultant/List.xhtml`. (In JSF 2.x, the file extension is inferred due to implicit navigation.)
+
image::images/empty-consultants-list.png[title="Consultants table is currently empty"]
+
The database currently doesn't contain any sample data. You can add data manually by clicking the '`Create New Consultant`' link and using the provided web form. This triggers the `/consultant/Create.xhtml` page to display. You can also run an SQL script in the IDE to populate tables with sample data. The following sub-sections explore both options.
You can click the index link to return to the links listed in the welcome page. The links provide you with a view of the data held in each database table and trigger the `List.xhtml` file for each entity folder to display. As is later demonstrated, after you add data to the tables, other links will display for each entry enabling you to view (`View.xhtml`), edit (`Edit.xhmtl`), and destroy data for a single table record.
@@ -394,15 +407,22 @@ Depending on the database server you are working with (MySQL or JavaDB), you can
1. Choose File > Open File from the main menu, then navigate to the location of the script on your computer. Click Open. The file automatically opens in the IDE's SQL editor.
2. Make sure that the `consult` database is selected in the Connection drop-down list in the SQL editor toolbar.
+
image::images/run-sql-insert.png[title="Open the script in the IDE's SQL editor"]
-Either right-click in the editor and choose Run Statement, or click the Run SQL ( image::images/run-sql-btn.png[] ) button. You can see the result of the script execution in the Output window.
+Either right-click in the editor and choose Run Statement, or click the Run SQL ( image:images/run-sql-btn.png[] ) button. You can see the result of the script execution in the Output window.
-3. Restart the GlassFish server. This is a necessary step to enable the server to reload and cache the new data contained in the `consult` database. To do so, click the GlassFish server tab in the Output window (The GlassFish server tab displays the server log.), then click the Restart Server ( image::images/glassfish-restart.png[] ) button in the left margin. The server stops, then restarts.
-4. Run the project again and click the '`Show All Consultant Items`' link. You will see that the list is no longer empty.
+
+[start=3]
+. Restart the GlassFish server. This is a necessary step to enable the server to reload and cache the new data contained in the `consult` database. To do so, click the GlassFish server tab in the Output window (The GlassFish server tab displays the server log.), then click the Restart Server ( image:images/glassfish-restart.png[] ) button in the left margin. The server stops, then restarts.
+
+[start=4]
+. Run the project again and click the '`Show All Consultant Items`' link. You will see that the list is no longer empty.
[.feature]
--
+
image::images/consultants-list-small.png[role="left", link="images/consultants-list.png"]
+
--
@@ -416,10 +436,12 @@ The SQL query used to perform the action displays in the upper portion of the ed
[.feature]
--
+
image::images/view-data-table-small.png[role="left", link="images/view-data-table.png"]
+
--
-Double-click inside table cells to perform inline modifications to data. Click the Commit Records ( image::images/commit-records-icon.png[] ) icon to commit changes to the database.
+Double-click inside table cells to perform inline modifications to data. Click the Commit Records ( image:images/commit-records-icon.png[] ) icon to commit changes to the database.
The graphical view provides much more functionality. See link:../../docs/ide/database-improvements-screencast.html[+Database Support in NetBeans IDE+] for more information.
@@ -438,45 +460,72 @@ The graphical view provides much more functionality. See link:../../docs/ide/dat
To display line numbers, right-click in the editor's left margin and choose Show Line Numbers.
-2. Use the IDE's Go to File dialog to open `template.xhtml`. Press Alt-Shift-O (Ctrl-Shift-O on Mac), then begin typing `template`.
+
+[start=2]
+. Use the IDE's Go to File dialog to open `template.xhtml`. Press Alt-Shift-O (Ctrl-Shift-O on Mac), then begin typing `template`.
+
image::images/go-to-file.png[title="Use the Go to File dialog to quickly open project files"]
Click OK (or press Enter).
-3. The template applies the `<ui:insert>` tags to insert content from other files into its title and body. Place your cursor on the `<ui:insert>` tag, then press Ctrl-Space to invoke a documentation popup window.
+
+[start=3]
+. The template applies the `<ui:insert>` tags to insert content from other files into its title and body. Place your cursor on the `<ui:insert>` tag, then press Ctrl-Space to invoke a documentation popup window.
+
image::images/doc-popup.png[title="Press Ctrl-Space to invoke a documentation popup on Facelets tags"]
You can press Ctrl-Space on JSF tags and their attributes to invoke a documentation pop-up. The documentation you see is taken from the descriptions provided in the official link:http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/index.html[+JSF Tag Library Documentation+].
-4. Switch back to the `List.xhtml` file (press Ctrl-Tab). The `<ui:define>` tags are used to define the content that will be applied to the template's title and body. This pattern is used for all four Facelets files (`Create.xhtml`, `Edit.xhtml`, `List.xhtml`, and `View.xhtml`) generated for each entity class.
-5. Place your cursor on any of the EL expressions used for localized messages contained in the `Bundle.properties` file. Press Ctrl-Space to view the localized message.
+
+[start=4]
+. Switch back to the `List.xhtml` file (press Ctrl-Tab). The `<ui:define>` tags are used to define the content that will be applied to the template's title and body. This pattern is used for all four Facelets files (`Create.xhtml`, `Edit.xhtml`, `List.xhtml`, and `View.xhtml`) generated for each entity class.
+
+[start=5]
+. Place your cursor on any of the EL expressions used for localized messages contained in the `Bundle.properties` file. Press Ctrl-Space to view the localized message.
[.feature]
--
+
image::images/localized-messages-small.png[role="left", link="images/localized-messages.png"]
+
--
In the above image, you can see that the EL expression resolves to '`List`', which is applied to the template title and can be verified from the page rendered in the browser.
-6. Scroll to the bottom of the file and locate the code for the `Create New Consultant` link (Line 92). This is as follows:
+
+[start=6]
+. Scroll to the bottom of the file and locate the code for the `Create New Consultant` link (Line 92). This is as follows:
[source,java]
----
<h:commandLink action="#{consultantController.prepareCreate}" value="#{bundle.ListConsultantCreateLink}"/>
----
-7. Press Ctrl-Space on the `commandLink`'s `action` attribute to invoke the documentation pop-up.
+
+[start=7]
+. Press Ctrl-Space on the `commandLink`'s `action` attribute to invoke the documentation pop-up.
The `action` attribute indicates the method that handles the request when the link is clicked in the browser. The following documentation is provided:
_MethodExpression representing the application action to invoke when this component is activated by the user. The expression must evaluate to a public method that takes no parameters, and returns an Object (the toString() of which is called to derive the logical outcome) which is passed to the NavigationHandler for this application._
In other words, the `action` value typically refers to a method in a JSF managed bean that evaluates to a `String`. The string is then used by JSF's `NavigationHandler` to forward the request to the appropriate view. You verify this in the following steps.
-8. Place your cursor on `consultantController` and press Ctrl-Space. The editor's code completion indicates that `consultantController` is a JSF managed bean.
+
+[start=8]
+. Place your cursor on `consultantController` and press Ctrl-Space. The editor's code completion indicates that `consultantController` is a JSF managed bean.
+
image::images/code-completion-managed-bean.png[title="Code completion is provided for JSF managed beans"]
-9. Move your cursor to `prepareCreate` and press Ctrl-Space. Code completion lists methods contained in the `ConsultantController` managed bean.
+
+[start=9]
+. Move your cursor to `prepareCreate` and press Ctrl-Space. Code completion lists methods contained in the `ConsultantController` managed bean.
+
image::images/code-completion-properties.png[title="Code completion is provided for class methods"]
-10. Press Ctrl (⌘ on Mac), then hover your mouse over `prepareCreate`. A link is formed, enabling you to navigate directly to the `prepareCreate()` method in the `ConsultantController` managed bean.
+
+[start=10]
+. Press Ctrl (⌘ on Mac), then hover your mouse over `prepareCreate`. A link is formed, enabling you to navigate directly to the `prepareCreate()` method in the `ConsultantController` managed bean.
+
image::images/editor-navigation.png[title="Use editor navigation to quickly navigate source code"]
-11. Click the link and view the `prepareCreate()` method (displayed below).
+
+[start=11]
+. Click the link and view the `prepareCreate()` method (displayed below).
[source,java]
----
@@ -517,17 +566,25 @@ The method returns `Create`. The `NavigationHandler` gathers information behind
|StatusId |---
|===
-3. Click Save. When you do so, a validation error is flagged for the `StatusId` field.
+
+[start=3]
+. Click Save. When you do so, a validation error is flagged for the `StatusId` field.
+
image::images/create-new-consultant.png[title="Enter sample data into the form"]
+
Why did this happen? Reexamine the <<er-diagram,entity-relationship diagram for the Consulting Agency database>>. As stated in the <<relationships,relationships table>> above, the `CONSULTANT` and `CONSULTANT_STATUS` tables share a non-nullable, one-to-many relationship. Therefore, every entry in the `CONSULTANT` table must contain a reference to an entry in the `CONSULTANT_STATUS` table. This is denoted by the `consultant_fk_consultant_status` foreign key that links the two tables.
You can view foreign keys held by tables by expanding a table's Foreign Keys node in the Services window (Ctrl-5; ⌘-5 on Mac).
image::images/consultant-fk.png[title="Examine foreign key attributes in the Services window"]
-4. To overcome the validation error, select `entity.ConsultantStatus[statusId=A]` from the `StatusId` drop-down list.
+
+[start=4]
+. To overcome the validation error, select `entity.ConsultantStatus[statusId=A]` from the `StatusId` drop-down list.
*Note: *You can leave the `RecruiterId` field blank. As indicated in the <<er-diagram,database entity-relationship diagram>>, there is a nullable, one-to-many relationship between the `CONSULTANT` and `RECRUITER` tables, meaning that entries in `CONSULTANT` do not need to be associated with a `RECRUITER` entry.
-5. Click Save. A message displays, indicating that the consultant entry was successfully saved. If you click `Show All Consultant Items`, you'll see the new entry listed in the table.
+
+[start=5]
+. Click Save. A message displays, indicating that the consultant entry was successfully saved. If you click `Show All Consultant Items`, you'll see the new entry listed in the table.
In general, the generated Facelets pages provide errors for user input that introduces:
@@ -561,21 +618,35 @@ This sub-section demonstrates how you can use the editor's code completion, docu
</h:selectOneMenu>
</h:panelGrid>
----
-2. Examine the `value` applied to the `<f:selectItems>` tag. The `value` attribute determines the text that displays for each item in the drop-down list.
+
+[start=2]
+. Examine the `value` applied to the `<f:selectItems>` tag. The `value` attribute determines the text that displays for each item in the drop-down list.
Press Ctrl-Space on `itemsAvailableSelectOne`. The editor's code completion indicates that the `ConsultantStatusController`'s `getItemsAvailableSelectOne()` method returns an array of `SelectItem` objects.
+
image::images/code-completion-returned-object.png[title="Code completion displays returned classes for methods"]
-3. Press Ctrl (⌘ on Mac), then hover your mouse over `itemsAvailableSelectOne`. A link is formed, enabling you to navigate directly to the `getItemsAvailableSelectOne()` method in the `ConsultantStatus` entity's source code. Click this link.
-4. Place your cursor on the `SelectItem[]` return value in the method signature, and press Ctrl-Space to invoke the documentation pop-up.
+
+[start=3]
+. Press Ctrl (⌘ on Mac), then hover your mouse over `itemsAvailableSelectOne`. A link is formed, enabling you to navigate directly to the `getItemsAvailableSelectOne()` method in the `ConsultantStatus` entity's source code. Click this link.
+
+[start=4]
+. Place your cursor on the `SelectItem[]` return value in the method signature, and press Ctrl-Space to invoke the documentation pop-up.
+
image::images/documentation-select-item.png[title="Press Ctrl-Space to invoke documentation support"]
-Click the web browser ( image::images/web-browser-icon.png[] ) icon in the documentation window to open the Javadoc in an external web browser.
+Click the web browser ( image:images/web-browser-icon.png[] ) icon in the documentation window to open the Javadoc in an external web browser.
As you can see, the `SelectItem` class belongs to the JSF framework. The `UISelectOne` component, as mentioned in the documentation, is represented by the `<h:selectOneMenu>` tag from the markup which you examined in <<markup,Step 1>> above.
-5. Press Ctrl (⌘ on Mac), then hover your mouse over `findAll()`. A pop-up appears, displaying the method signature.
+
+[start=5]
+. Press Ctrl (⌘ on Mac), then hover your mouse over `findAll()`. A pop-up appears, displaying the method signature.
+
image::images/method-signature.png[title="View pop-ups of method signatures in the editor"]
+
You can see that here `ejbFacade.findAll()` returns a `List` of `ConsultantStatus` objects.
-6. Navigate to `JsfUtil.getSelectItems`. Hover your mouse over `getSelectItems` and press Ctrl (⌘ on Mac), then click the link that displays.
+
+[start=6]
+. Navigate to `JsfUtil.getSelectItems`. Hover your mouse over `getSelectItems` and press Ctrl (⌘ on Mac), then click the link that displays.
*Note: *Recall that `JsfUtil` is one of the utility classes that was generated when you completed the <<jsfPagesEntityClasses,JSF Pages from Entity Classes wizard>>.
@@ -603,7 +674,9 @@ The label is created using the entity's `toString()` method, and is the represen
Now that you have verified that the entity `toString()` method is what is rendered in the browser when you view items in a drop-down list, modify the `ConsultantStatus` `toString()` method.
-7. Open the `ConsultantStatus` entity class in the editor. Modify the `toString` method to return the `statusId` and `description`. These are entity properties which correspond to the two columns of the `CONSULTANT_STATUS` table.
+
+[start=7]
+. Open the `ConsultantStatus` entity class in the editor. Modify the `toString` method to return the `statusId` and `description`. These are entity properties which correspond to the two columns of the `CONSULTANT_STATUS` table.
[source,java]
----
@@ -612,7 +685,9 @@ public String toString() {
return *statusId + ", " + description;*
}
----
-8. Run the project again. When the browser displays the welcome page, click the `Show All Consultant Items` link, then click `Create New Consultant`.
+
+[start=8]
+. Run the project again. When the browser displays the welcome page, click the `Show All Consultant Items` link, then click `Create New Consultant`.
Inspect the `StatusId` drop-down. You'll see that it now displays the status ID and description for the one record contained in the database's `CONSULTANT_STATUS` table.
@@ -685,27 +760,46 @@ If the JDBC resource and connection pool were not generated automatically on the
You will use the property values that are specified in `glassfish-resources.xml` when you create the JDBC resource and connection pool.
-2. Right-click the GlassFish Server node in the Services window and choose Open Domain Admin Console in the popup menu to open the GlassFish Console in your browser.
-3. In the Common Tasks navigation panel of the GlassFish Console, expand the *JDBC* node and the *JDBC Resources* and *JDBC Connection Pools* nodes.
+
+[start=2]
+. Right-click the GlassFish Server node in the Services window and choose Open Domain Admin Console in the popup menu to open the GlassFish Console in your browser.
+
+[start=3]
+. In the Common Tasks navigation panel of the GlassFish Console, expand the *JDBC* node and the *JDBC Resources* and *JDBC Connection Pools* nodes.
[.feature]
--
+
image::images/gf-admin-console-sm.png[role="left", link="images/gf-admin-console-lg.png"]
+
--
You can see the JDBC resources that are currently registered with the server. You will need to create `jdbc/consult` and `consultPool` if they are not listed under the JDBC node in the Common Tasks navigation panel. Some JDBC resources were created by default when you installed the server and are displayed as sub-nodes.
-4. Click the *JDBC Connection Pools* node and click New in the New JDBC Connection Pool pane.
+
+[start=4]
+. Click the *JDBC Connection Pools* node and click New in the New JDBC Connection Pool pane.
+
image::images/gf-new-jdbc-pool1.png[title="New JDBC Connection Pool pane in the GlassFish Admin Console"]
-5. Type *consultPool* as the Pool Name, select *javax.sql.ConnectionPoolDataSource* as the Resource Type and select *MySql* as the Database Driver Vendor. Click Next.
-6. In Step 2, locate and specify the values for the *URL*, *username* and *password* properties. Click Finish.
+
+[start=5]
+. Type *consultPool* as the Pool Name, select *javax.sql.ConnectionPoolDataSource* as the Resource Type and select *MySql* as the Database Driver Vendor. Click Next.
+
+[start=6]
+. In Step 2, locate and specify the values for the *URL*, *username* and *password* properties. Click Finish.
+
image::images/gf-new-jdbc-pool2.png[title="New JDBC Connection Pool panel in the GlassFish Admin Console"]
You can find the values for the properties in `glassfish-resources.xml`.
The new connection pool is created on the server when you click Finish and a node for the connection pool is displayed under the JDBC Connection Pools node.
-7. Click the *JDBC Resources* node in the Common Tasks navigation panel and click New.
-8. Type *jdbc/consult* for the JNDI Name and select *consultPool* in the Pool Name drop-down list. Click OK.
+
+[start=7]
+. Click the *JDBC Resources* node in the Common Tasks navigation panel and click New.
+
+[start=8]
+. Type *jdbc/consult* for the JNDI Name and select *consultPool* in the Pool Name drop-down list. Click OK.
+
image::images/gf-new-jdbc-resource.png[title="New JDBC Resource pane in the GlassFish Admin Console"]
The new JDBC resource is created on the server when you click OK and a node for the resource is displayed under the JDBC Resources node.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_ja.asciidoc
index ab02531..7e86567 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_ja.asciidoc
@@ -37,25 +37,6 @@
IDEには、アプリケーション用のコードをすべて生成する、2つのウィザードが用意されています。<<generateEntity,データベースからのエンティティ・クラス・ウィザード>>を使用すると、提供されたデータベースからエンティティ・クラスを生成できます。エンティティ・クラスを作成した後は、<<jsfPagesEntityClasses,エンティティからのJSFページ・クラス・ウィザード>>を使用して、そのエンティティ・クラスのJSF管理対象BeanとEJB、およびエンティティ・クラス・データのビューを処理する一連のFaceletsページを作成します。このチュートリアルの最後の<<explore,アプリケーションの操作>>の項には、このアプリケーションの理解を深め、IDEの習熟に役立つ様々な課題を用意しています(オプション)。
-image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます"]
-
-
-==== 内容
-
-* <<createDB,データベースの作成>>
-* <<examineDB,データベース構造の確認>>
-* <<createProject,Webアプリケーション・プロジェクトの作成>>
-* <<generateEntity,データベースからのエンティティ・クラスの生成>>
-* <<jsfPagesEntityClasses,エンティティ・クラスからのJSFページの生成>>
-* <<explore,アプリケーションの操作>>
-* <<completedProject,完了したプロジェクトの確認>>
-* <<populateDB,SQLスクリプトを使用したデータベースの生成>>
-* <<editorSupport,Faceletsページでのエディタのサポートの確認>>
-* <<dbIntegrity,フィールド検証を使用したデータベース整合性の確認>>
-* <<editEntity,エンティティ・クラスの編集>>
-* <<troubleshooting,トラブルシューティング>>
-* <<seeAlso,関連項目>>
-
このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。
|===
@@ -132,8 +113,11 @@ shell> /usr/local/mysql/bin/mysql -u root
4. 「MySQLデータベースの作成」ダイアログでデータベース名として「*consult*」と入力します。「OK」をクリックします。「データベース」ノードの下に新しいノードが表示されます(`jdbc:mysql://localhost:3306/consult [デフォルト・スキーマのroot]`)。
5. 新しいノードを右クリックし、「接続」を選択します。
6. メイン・メニューから「ファイル」>「ファイルを開く」を選択し、抽出したファイル`mysql_create_consult.sql`に移動します。「開く」をクリックします。ファイルがSQLエディタで自動的に開きます。
+
image::images/run-sql-script.png[title="IDEのエディタ内でSQLファイルを開く"]
-7. SQLエディタ・ツールバーの「接続」ドロップダウン・リストで`consult`データベースが選択されていることを確認し、「SQLの実行」(image::images/run-sql-btn.png[])ボタンをクリックします。
+
+[start=7]
+. SQLエディタ・ツールバーの「接続」ドロップダウン・リストで`consult`データベースが選択されていることを確認し、「SQLの実行」(image:images/run-sql-btn.png[])ボタンをクリックします。
「SQLの実行」をクリックすると、「出力」ウィンドウに次の出力が表示されます。
@@ -224,12 +208,22 @@ IDEでデータベースに接続した後、データベースからのエン
1. 「プロジェクト」ウィンドウで「`ConsultingAgency`」プロジェクト・ノードを右クリックし、「新規」>「データベースからのエンティティ・クラス」を選択します。このオプションがリストにない場合は「その他」を選択します。次に、ファイル・ウィザードで「持続性」カテゴリを選択し、「データベースからのエンティティ・クラス」を選択します。
2. 「データ・ソース」ドロップダウン・リストから「新しいデータ・ソース」を選択して「データ・ソースを作成」ダイアログを開きます。
3. 「JNDI名」に「`jdbc/consult`」と入力し、「データベース接続」に「`jdbc:mysql://localhost:3306/consult`」接続を選択します。
+
image::images/create-datasource.png[title="データソースを作成するためのJNDI名およびデータベース接続の指定"]
-4. 「OK」をクリックしてダイアログ・ボックスを閉じ、ウィザードに戻ります。`consult`データベース内の表が「使用可能な表」リスト・ボックスに表示されます。
-5. 「すべてを追加」ボタンをクリックし、データベースに格納されているすべての表を選択します。「次」をクリックします。
+
+[start=4]
+. 「OK」をクリックしてダイアログ・ボックスを閉じ、ウィザードに戻ります。`consult`データベース内の表が「使用可能な表」リスト・ボックスに表示されます。
+
+[start=5]
+. 「すべてを追加」ボタンをクリックし、データベースに格納されているすべての表を選択します。「次」をクリックします。
+
image::images/new-entities-wizard.png[]
-6. 「パッケージ」名に「`jpa.entities`」と入力します。
-7. 名前付き問合せを生成するためのチェックボックスと持続性ユニットを作成するためのチェックボックスが選択されていることを確認します。「終了」をクリックします。
+
+[start=6]
+. 「パッケージ」名に「`jpa.entities`」と入力します。
... 13960 lines suppressed ...
---------------------------------------------------------------------
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