[NETBEANS-3756] kb/docs/web asciidoc cleanup (#441)
Images, numbered lists, header leveling.
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 @@
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. Ajax interactions are initiated by JavaScript code. When the Ajax interaction is complete, JavaScript updates the HTML source of the page. The changes are made immediately without requiring a page refresh. Ajax interactions can be used to do things such as validate form entries (while the user is entering them) using server-side logic, retrieve detailed data from the server, dynamically update data on a page, and submit partial forms from 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 @@
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 @@
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 @@
</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 @@
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]
+image::images/insert-table.png[title="Insert table dialog"]
+
+[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 @@
</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 @@
----
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 @@
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 @@
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 @@
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 @@
* 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 @@
* `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 @@
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 @@
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 @@
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 @@
*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 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 @@
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 @@
1. Open `javascript.js` in the Source Editor and type in the code below.
-[source,java]
+[source,javascript]
----
function callback() {
@@ -691,7 +738,7 @@
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 @@
</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 @@
}
----
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 @@
}
----
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 @@
*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 @@
}
----
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 @@
}
}
----
-8. Add `parseMessages()` to `javascript.js`.
-[source,java]
+[start=8]
+. Add `parseMessages()` to `javascript.js`.
+
+[source,javascript]
----
function parseMessages(responseXML) {
@@ -846,7 +907,7 @@
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 @@
*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 @@
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 @@
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 @@
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 Property icon (image::images/newcssproperty.png[title="New CSS Property icon"]) in the toolbar of the lower pane.
+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 Property icon (image:images/newcssproperty.png[title="New CSS Property icon"]) in the toolbar of the lower pane.
-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 @@
*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 @@
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 @@
</html>
----
-2. テキスト・フィールドの目的を説明するテキストを追加します。次のテキストをコピーして、`<h1>`タグのすぐ下に貼り付けることもできます。
+
+[start=2]
+. テキスト・フィールドの目的を説明するテキストを追加します。次のテキストをコピーして、`<h1>`タグのすぐ下に貼り付けることもできます。
[source,html]
----
@@ -153,23 +161,31 @@
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 @@
</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 @@
----
入力するときは、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 @@
上のコードは、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 @@
[Ctrl]-[Tab]を押すと、ソース・エディタ内で開いているページ間を簡単に切り替えることができます。
-5. `init()`へのコールを開始`<body>`タグ内に挿入します。
+
+[start=5]
+. `init()`へのコールを開始`<body>`タグ内に挿入します。
[source,java]
----
@@ -437,7 +462,9 @@
「終了」をクリックすると、IDEによってクラスが作成され、ファイルがソース・エディタで開きます。
-3. ソース・エディタ内に、次のコードを貼り付けます。
+
+[start=3]
+. ソース・エディタ内に、次のコードを貼り付けます。
[source,java]
----
@@ -486,25 +513,41 @@
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 @@
*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 HashMap composers = compData.getComposers();
----
これで、すべての作曲家データの`HashMap`が作成されます。これは`doGet()`で使用されます。
-2. `doGet()`までスクロールし、次のようにメソッドを実装します。
+
+[start=2]
+. `doGet()`までスクロールし、次のようにメソッドを実装します。
[source,xml]
----
@@ -701,7 +749,9 @@
</tr>
----
表の2番目の行は、別のHTML表を含んでいます。この表は、作曲家の名前を挿入するためのオートコンプリート・ボックスを表します。
-2. `javascript.js`をソース・エディタで開き、次の3つの変数をファイルの先頭に追加します。
+
+[start=2]
+. `javascript.js`をソース・エディタで開き、次の3つの変数をファイルの先頭に追加します。
[source,java]
----
@@ -710,7 +760,9 @@
var completeTable;
var autoRow;
----
-3. 次の*太字*の行を`init()`関数に追加します。
+
+[start=3]
+. 次の*太字*の行を`init()`関数に追加します。
[source,java]
----
@@ -723,7 +775,9 @@
}
----
`init()`の目的の1つは、indexページのDOMを変更する他の関数からindexページ内の要素にアクセスできるようにすることです。
-4. `appendComposer()`を`javascript.js`に追加します。
+
+[start=4]
+. `appendComposer()`を`javascript.js`に追加します。
[source,java]
----
@@ -756,7 +810,9 @@
}
----
この関数は、表の新しい行を作成し、3つのパラメータによって関数に渡されたデータを使用して作曲家へのリンクを挿入してから、行をindexページの`complete-table`要素に挿入します。
-5. `getElementY()`を`javascript.js`に追加します。
+
+[start=5]
+. `getElementY()`を`javascript.js`に追加します。
[source,java]
----
@@ -780,7 +836,9 @@
*注意: *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 @@
}
----
この関数は`complete-table`要素の表示を'none'に設定し(非表示にし)、作成された既存の作曲家の名前エントリを除去します。
-7. `callback()`関数を変更して、サーバーから新しいデータを受け取るたびに`clearTable()`をコールするようにします。オートコンプリート・ボックスに作曲家のエントリがある場合は、新しいエントリが入力される前に除去されます。
+
+[start=7]
+. `callback()`関数を変更して、サーバーから新しいデータを受け取るたびに`clearTable()`をコールするようにします。オートコンプリート・ボックスに作曲家のエントリがある場合は、新しいエントリが入力される前に除去されます。
[source,java]
----
@@ -811,7 +871,9 @@
}
}
----
-8. `parseMessages()`を`javascript.js`に追加します。
+
+[start=8]
+. `parseMessages()`を`javascript.js`に追加します。
[source,java]
----
@@ -911,8 +973,12 @@
*注意:*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 @@
これで、アプリケーションの機能に必要なコードが完成しました。作業の結果を確認するため、今すぐアプリケーションを実行してみてください。
1. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。プロジェクトが再コンパイルされ、ターゲット・サーバーにデプロイされます。ブラウザが開き、indexページが表示されます。
+
image::images/no-css.png[title="スタイル・シートなしでの正常なデプロイメント"]
アプリケーションにスタイル・シートを追加するには、`.css`ファイルを作成し、プレゼンテーション・ページからそのファイルにリンクします。`.css`ファイルで作業する場合、IDEには、コード補完機能や、スタイルシート・ルールの生成と編集に役立つ次のウィンドウが提供されています。
@@ -959,7 +1026,9 @@
新規ファイルが作成され、エディタで開きます。
-3. エディタで`stylesheet.css`に次のルールを入力します。IDEのコード補完サポートを利用するには、候補を呼び出したい場所で[Ctrl]-[Space]を押します。
+
+[start=3]
+. エディタで`stylesheet.css`に次のルールを入力します。IDEのコード補完サポートを利用するには、候補を呼び出したい場所で[Ctrl]-[Space]を押します。
[source,java]
----
@@ -1027,19 +1096,26 @@
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 @@
*注意:* このオプションは、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 @@
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 @@
</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 @@
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 @@
</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 @@
----
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, pressionar Ctrl-Espaço completará automaticamente o nome do elemento.
+
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 @@
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 @@
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 @@
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 @@
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 @@
*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 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 @@
</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 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 @@
}
----
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 @@
}
----
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 @@
*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 @@
}
----
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 @@
}
}
----
-8. Adicione `parseMessages()` a `javascript.js`.
+
+[start=8]
+. Adicione `parseMessages()` a `javascript.js`.
[source,java]
----
@@ -911,8 +973,12 @@
*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 @@
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 @@
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 @@
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 inferior, editando a folha de propriedades, e adicionar propriedades clicando no ícone Adicionar Propriedade (image::images/newcssproperty.png[title="Ícone Nova Propriedade de CSS"]) na barra de ferramentas do painel inferior.
+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 inferior, editando a folha de propriedades, e adicionar propriedades clicando no ícone Adicionar Propriedade (image:images/newcssproperty.png[title="Ícone Nova Propriedade de CSS"]) na barra de ferramentas do painel inferior.
-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 @@
*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 @@
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 @@
</html>
----
-2. Для описания назначения текстового поля следует добавить соответствующий пояснительный текст. Непосредственно под тегами `<h1>` можно скопировать и вставить следующий текст:
+
+[start=2]
+. Для описания назначения текстового поля следует добавить соответствующий пояснительный текст. Непосредственно под тегами `<h1>` можно скопировать и вставить следующий текст:
[source,html]
----
@@ -153,23 +161,31 @@
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 @@
</form>
----
-6. В первый столбец первой строки таблицы введите следующий текст (изменения выделены *полужирным шрифтом*):
+
+[start=6]
+. В первый столбец первой строки таблицы введите следующий текст (изменения выделены *полужирным шрифтом*):
[source,xml]
----
<td>*<strong>Composer Name:</strong>*</td>
----
-7. Во второй столбец первой строки вместо перетаскивания поля "Ввод текста" из палитры введите указанный ниже код (изменения выделены *полужирным* шрифтом):
+
+[start=7]
+. Во второй столбец первой строки вместо перетаскивания поля "Ввод текста" из палитры введите указанный ниже код (изменения выделены *полужирным* шрифтом):
[source,xml]
----
@@ -217,6 +237,7 @@
----
При вводе кода можно использовать встроенную в среду IDE функцию автозавершения кода. Например, введите `<i`, а затем нажмите CTRL+ПРОБЕЛ. Список предлагаемых вариантов выбора отображается под курсором, а в расположенном выше поле появляется описание выбранного элемента. Для получения возможных вариантов выбора при написании кода достаточно в любой момент нажать в редакторе исходного кода сочетание клавиш CTRL+ПРОБЕЛ. Кроме того, при наличии единственного возможного варианта выбора нажатие CTRL+ПРОБЕЛ приведет к автоматическому завершению кода с использованием элемента с этим именем.
+
image::images/code-completion.png[title="Для вызова поддержки автозавершения кода и документации нажмите сочетание клавиш CTRL+ПРОБЕЛ в редакторе."]
Атрибут `onkeyup`, введенный выше, указывает на функцию JavaScript с именем `doCompletion()`. Эта функция вызывается при каждом нажатии клавиши в текстовом поле формы и соответствует вызову JavaScript на приведенной выше <<flow-diagram,блок-схеме>> Ajax.
@@ -270,7 +291,9 @@
С помощью этого кода выполняется простая проверка совместимости веб-браузеров 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 @@
Для быстрого перехода между страницами, открытыми в редакторе исходного кода, можно воспользоваться сочетанием клавиш CTRL+TAB.
-5. Вставьте вызов `init()` после открывающего тега `<body>`.
+
+[start=5]
+. Вставьте вызов `init()` после открывающего тега `<body>`.
[source,java]
----
@@ -437,7 +462,9 @@
После нажатия кнопки 'Готово' в IDE создается класс, а файл открывается в редакторе исходного кода.
-3. В редакторе исходного кода вставьте следующий код:
+
+[start=3]
+. В редакторе исходного кода вставьте следующий код:
[source,java]
----
@@ -486,25 +513,41 @@
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 @@
*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 HashMap composers = compData.getComposers();
----
При этом создается хранилище `HashMap`, включающее все данные о композиторах, которое затем используется методом `doGet()`.
-2. Выполните прокрутку вниз до метода `doGet()` и реализуйте его следующим образом:
+
+[start=2]
+. Выполните прокрутку вниз до метода `doGet()` и реализуйте его следующим образом:
[source,xml]
----
@@ -701,7 +749,9 @@
</tr>
----
Вторая строка таблицы содержит еще одну таблицу HTML. Эта таблица представляет поле автозавершения, используемое для автоматического ввода полных имен композиторов.
-2. Откройте `javascript.js` в редакторе исходного кода и добавьте к первому фрагменту файла три следующих переменных:
+
+[start=2]
+. Откройте `javascript.js` в редакторе исходного кода и добавьте к первому фрагменту файла три следующих переменных:
[source,java]
----
@@ -710,7 +760,9 @@
var completeTable;
var autoRow;
----
-3. Добавьте следующие строки (выделенные *полужирным шрифтом*) к функции `init()`.
+
+[start=3]
+. Добавьте следующие строки (выделенные *полужирным шрифтом*) к функции `init()`.
[source,java]
----
@@ -723,7 +775,9 @@
}
----
Одной из целей `init()` является предоставление доступа к элементам страницы индекса для других функций, используемых в целях изменения DOM страницы индекса.
-4. Добавьте `appendComposer()` в `javascript.js`.
+
+[start=4]
+. Добавьте `appendComposer()` в `javascript.js`.
[source,java]
----
@@ -756,7 +810,9 @@
}
----
Эта функция позволяет создавать новую строку таблицы и вставлять в нее ссылку на композитора с использованием данных, передаваемых в функцию посредством соответствующих трех параметров, а затем вставлять эту строку в элемент `complete-table` страницы-указателя.
-5. Добавьте `getElementY()` в `javascript.js`.
+
+[start=5]
+. Добавьте `getElementY()` в `javascript.js`.
[source,java]
----
@@ -780,7 +836,9 @@
*Примечание.* См. 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 @@
}
----
Эта функция позволяет скрывать элемент `complete-table` (т.е. делать его невидимым), но не удаляет какие-либо существующие записи имен композиторов, созданные ранее.
-7. Для вызова `clearTable()` при каждом получении данных с сервера можно соответствующим образом изменить функцию `callback()`. Поэтому любые скомбинированные записи, существующие в окне автозавершения, удаляются до того, как выполняется заполнение новыми записями.
+
+[start=7]
+. Для вызова `clearTable()` при каждом получении данных с сервера можно соответствующим образом изменить функцию `callback()`. Поэтому любые скомбинированные записи, существующие в окне автозавершения, удаляются до того, как выполняется заполнение новыми записями.
[source,java]
----
@@ -811,7 +871,9 @@
}
}
----
-8. Добавьте `parseMessages()` в `javascript.js`.
+
+[start=8]
+. Добавьте `parseMessages()` в `javascript.js`.
[source,java]
----
@@ -911,8 +973,12 @@
*Примечание.* Если страница индекса имеет вид ``index.jsp`` , потребуется изменить ссылку для возврата на эту страницу.
-5. Создайте еще один файл JSP в папке с веб-страницами проекта. Назовите файл `error.jsp`.
-6. Измените код заглушки в файле `error.jsp` следующим кодом:
+
+[start=5]
+. Создайте еще один файл JSP в папке с веб-страницами проекта. Назовите файл `error.jsp`.
+
+[start=6]
+. Измените код заглушки в файле `error.jsp` следующим кодом:
[source,html]
----
@@ -944,6 +1010,7 @@
На данном этапе создан весь код, необходимый для реализации функциональных возможностей приложения. Теперь для проверки результатов следует попытаться запустить приложение.
1. В окне "Проекты" щелкните правой кнопкой мыши узел проекта и выберите команду "Выполнить". Будет выполнена перекомпиляция проекта и его развертывание на целевом сервере. Откроется браузер, в котором отображается страница-указатель.
+
image::images/no-css.png[title="Успешное развертывание без таблицы стилей"]
Для добавления таблицы стилей к приложению создайте файл `.css` и создайте ссылку на него на страницах презентации. При работе с файлами `.css` IDE предоставляет поддержку функции автозавершения кода, а также следующие окна, которые используются для создания и изменения правил стилей.
@@ -959,7 +1026,9 @@
Новый файл будет создан и открыт в редакторе.
-3. Введите следующие правила `stylesheet.css` в редакторе. При необходимости просмотра предложений можно использовать поддержку автозавершения кода среды IDE путем нажатия CTRL+ПРОБЕЛ.
+
+[start=3]
+. Введите следующие правила `stylesheet.css` в редакторе. При необходимости просмотра предложений можно использовать поддержку автозавершения кода среды IDE путем нажатия CTRL+ПРОБЕЛ.
[source,java]
----
@@ -1027,19 +1096,26 @@
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'"]) на панели инструментов в верхней панели. Можно изменять правила в нижней панели путем редактирования таблицы свойств и добавления свойств, щелкнув значок 'Добавить свойство' (image::images/newcssproperty.png[title="Значок 'Новое свойство CSS'"]) на панели инструментов в нижней панели.
+Можно использовать окно 'Стили CSS' для быстрого просмотра свойств и редактирования правил стилей. При выборе правила в верхней панели окна 'Стиль CSS' отображаются свойства правила в нижней панели. Можно добавить CSS правила к таблице стилей, нажав значок 'Изменить правила CSS' (image:images/newcssrule.png[title="Значок 'Новое свойство CSS'"]) на панели инструментов в верхней панели. Можно изменять правила в нижней панели путем редактирования таблицы свойств и добавления свойств, щелкнув значок 'Добавить свойство' (image:images/newcssproperty.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 @@
*Примечание.* Этот параметр отображается на вкладке 'Общие' для сервера 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 @@
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 @@
</html>
----
-2. 添加一些说明性文本以介绍文本字段的用途。您可以复制以下文本并将其粘贴在 `<h1>` 标记下方的某一位置：
+
+[start=2]
+. 添加一些说明性文本以介绍文本字段的用途。您可以复制以下文本并将其粘贴在 `<h1>` 标记下方的某一位置：
[source,html]
----
@@ -153,23 +161,31 @@
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 @@
</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 @@
----
在键入时，请尝试使用 IDE 内置的代码完成支持。例如，键入 `<i`，然后按 Ctrl-空格组合键。建议的选项列表会显示在光标下方，并且选中元素的说明会显示在上方的框中。事实上，在源代码编辑器中编写代码时，可以随时按 Ctrl-空格键调出可能的选项。而且，如果只有一个可用的选项，按 Ctrl-空格键将自动完成元素名称。
+
image::images/code-completion.png[title="在编辑器中按 Ctrl-空格键以调用代码完成和文档支持"]
您在上文中键入的 `onkeyup` 属性指向名为 `doCompletion()` 的 JavaScript 函数。每次在窗体文本字段中按下一个键时，此函数都会被调用，并映射到以上 Ajax <<flow-diagram,流程图>>中所描述的 JavaScript 调用。
@@ -270,7 +291,9 @@
以上代码将对 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 @@
您可以按 Ctrl-Tab 组合键在源代码编辑器中打开的页面之间快速切换。
-5. 在开始标记 `<body>` 中，插入对 `init()` 的调用。
+
+[start=5]
+. 在开始标记 `<body>` 中，插入对 `init()` 的调用。
[source,java]
----
@@ -437,7 +462,9 @@
单击“完成”，此时 IDE 将创建此类并在源代码编辑器中打开该文件。
-3. 在源代码编辑器中，粘贴以下代码：
+
+[start=3]
+. 在源代码编辑器中，粘贴以下代码：
[source,java]
----
@@ -486,25 +513,41 @@
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 @@
*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 HashMap composers = compData.getComposers();
----
这将创建所有作曲家数据的 `HashMap`，然后由 `doGet()` 使用。
-2. 向下滚动到 `doGet()` 并按如下方式实现该方法：
+
+[start=2]
+. 向下滚动到 `doGet()` 并按如下方式实现该方法：
[source,xml]
----
@@ -701,7 +749,9 @@
</tr>
----
此表格的第二行包含其他 HTML 表格。此表格表示将用于填写作曲家名字的自动完成框。
-2. 在源代码编辑器中打开 `javascript.js`，并在文件顶部添加以下三个变量。
+
+[start=2]
+. 在源代码编辑器中打开 `javascript.js`，并在文件顶部添加以下三个变量。
[source,java]
----
@@ -710,7 +760,9 @@
var completeTable;
var autoRow;
----
-3. 将以下行（以*粗体*显示）添加到 `init()` 函数中。
+
+[start=3]
+. 将以下行（以*粗体*显示）添加到 `init()` 函数中。
[source,java]
----
@@ -723,7 +775,9 @@
}
----
`init()` 的一个作用是使修改索引页 DOM 的其他函数可以访问索引页内的元素。
-4. 将 `appendComposer()` 添加到 `javascript.js`。
+
+[start=4]
+. 将 `appendComposer()` 添加到 `javascript.js`。
[source,java]
----
@@ -756,7 +810,9 @@
}
----
此函数创建了一个新的表行，并用其所含的三个参数传递的数据将指向作曲家的链接插入此表行中，然后将此行插入索引页的 `complete-table` 元素中。
-5. 将 `getElementY()` 添加到 `javascript.js`。
+
+[start=5]
+. 将 `getElementY()` 添加到 `javascript.js`。
[source,java]
----
@@ -780,7 +836,9 @@
*注：*请在 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 @@
}
----
此函数用于将 `complete-table` 元素的显示方式设置为“无”（也就是使其不可见），并删除所有已创建的现有作曲家名字条目。
-7. 修改 `callback()` 函数以便每次从服务器接收到新数据时都调用 `clearTable()`。因此，在用新条目填充自动完成框之前其中已存在的任何作曲家条目均会删除。
+
+[start=7]
+. 修改 `callback()` 函数以便每次从服务器接收到新数据时都调用 `clearTable()`。因此，在用新条目填充自动完成框之前其中已存在的任何作曲家条目均会删除。
[source,java]
----
@@ -811,7 +871,9 @@
}
}
----
-8. 将 `parseMessages()` 添加到 `javascript.js`。
+
+[start=8]
+. 将 `parseMessages()` 添加到 `javascript.js`。
[source,java]
----
@@ -911,8 +973,12 @@
*注：*如果索引页为 ``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 @@
在此阶段，您已完成了实现此应用程序功能所需的所有代码。要查看您的努力成果，请立即尝试运行此应用程序。
1. 在 "Projects"（项目）窗口中，右键单击该项目节点并选择 "Run"（运行）。此项目会重新编译，并部署到目标服务器。此时您的浏览器会打开，并可以查看索引页。
+
image::images/no-css.png[title="不带样式表的成功部署"]
要向您的应用程序添加一个样式表，只需创建 `.css` 文件，并从您的演示页面链接到此文件。当您使用 `.css` 文件时，IDE 会为您提供代码完成支持，以及以下有助于生成和编辑样式表规则的窗口。
@@ -959,7 +1026,9 @@
此时会创建新文件，并在编辑器中打开。
-3. 在编辑器的 `stylesheet.css` 中键入以下规则。您可以使用 IDE 的代码完成支持，方法是：在希望查看建议时按 Ctrl-空格组合键。
+
+[start=3]
+. 在编辑器的 `stylesheet.css` 中键入以下规则。您可以使用 IDE 的代码完成支持，方法是：在希望查看建议时按 Ctrl-空格组合键。
[source,java]
----
@@ -1027,19 +1096,26 @@
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 @@
*注：*对于 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 @@
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 @@
*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 @@
*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 @@
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 @@
* 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 @@
*注意:*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 @@
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 @@
* このチュートリアルでは、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 @@
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 @@
*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 @@
*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 @@
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 @@
* 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 @@
*Примечание.* Проекты 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 @@
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 @@
* При добавлении апплета в файл 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 @@
*注：*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 @@
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 @@
* 对于本教程，如果将小应用程序代码添加到 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 @@
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 @@
[.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 @@
[.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 @@
[.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 @@
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 enables you to select the version of the Struts2 libraries that you want to add to the classpath.
@@ -198,16 +220,24 @@
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 @@
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 @@
[.feature]
--
+
image::images/pluginsmanager-settings-sm.png[role="left", link="images/pluginsmanager-settings.png"]
+
--
新しい更新センターを登録する場合は、「設定」タブの「追加」ボタンをクリックし、更新センター・カスタマイザに詳細を入力します。
@@ -147,7 +164,9 @@
[.feature]
--
+
image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin.png"]
+
--
「使用可能なプラグイン」タブをクリックすると、コミュニティによってNetBeansプラグイン・ポータルに提供されたすべてのプラグインが、使用可能なプラグインのリストに追加されていることがわかります。
@@ -156,7 +175,9 @@
[.feature]
--
+
image::images/portal-uc-list-sm.png[role="left", link="images/portal-uc-list.png"]
+
--
列見出しをクリックすることでリストをソートでき、「検索」フィールドに検索語を入力することでリストをフィルタできます。
@@ -180,6 +201,7 @@
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 @@
「フレームワーク」を選択すると、右パネルに「使用しているフレームワーク」テキスト領域が表示されます。アプリケーションがフレームワークを使用していない場合、この領域は空です。
-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 @@
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 @@
[.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 @@
[.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 @@
[.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 @@
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 permite selecionar a versão das bibliotecas Strut2 que você deseja adicionar no classpath.
@@ -198,16 +220,24 @@
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 @@
Подключаемые модули 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 @@
[.feature]
--
+
image::images/pluginsmanager-settings-sm.png[role="left", link="images/pluginsmanager-settings.png"]
+
--
Если необходимо зарегистрировать новый центр обновлений, нажмите кнопку Add ("Добавить") на вкладке Settings ("Параметры") и введите сведения в настройщик центра обновлений.
@@ -147,7 +164,9 @@
[.feature]
--
+
image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin.png"]
+
--
Если щелкнуть вкладку Available Plugins ("Доступные подключаемые модули"), то можно будет увидеть, что все подключаемые модули, загруженные сообществом на портал подключаемых модулей NetBeans, были внесены в список доступных подключаемых модулей.
@@ -156,7 +175,9 @@
[.feature]
--
+
image::images/portal-uc-list-sm.png[role="left", link="images/portal-uc-list.png"]
+
--
Этот список можно упорядочить, щелкнув заголовок столбца, либо отфильтровать, введя условия в поле поиска.
@@ -180,6 +201,7 @@
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 ("Настройка") предоставляет возможность создать образец страницы в проекте. Вкладка Libraries ("Библиотеки") позволяет выбрать версию библиотек Struts2, которую следует добавить к пути к классам.
@@ -198,16 +220,24 @@
После выбора значения 'Платформы' на правой панели отображается текстовая область 'Используемые платформы'. Если приложение не использует никакие платформы, эта область будет пуста.
-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 @@
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 @@
[.feature]
--
+
image::images/pluginsmanager-settings-sm.png[role="left", link="images/pluginsmanager-settings.png"]
+
--
如果要注册新的更新中心，可单击 "Settings"（设置）标签中的 "Add"（添加）按钮，然后在 "Update Center Customizer"（更新中心定制器）中提供详细信息。
@@ -147,7 +164,9 @@
[.feature]
--
+
image::images/portal-uc-plugin-sm.png[role="left", link="images/portal-uc-plugin.png"]
+
--
如果单击 "Available Plugins"（可用插件）标签，则可看到，社区向 NetBeans 插件门户贡献的所有插件均已添加到可用插件的列表中。
@@ -156,7 +175,9 @@
[.feature]
--
+
image::images/portal-uc-list-sm.png[role="left", link="images/portal-uc-list.png"]
+
--
通过单击列标题可对列表进行排序，通过在 "Search"（搜索）字段中输入搜索词可以过滤列表。
@@ -180,6 +201,7 @@
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 @@
选择 "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 @@
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 @@
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 @@
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 @@
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 @@
コマンド・ラインから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 @@
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 @@
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 @@
単純な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 @@
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 @@
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 @@
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 @@
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 @@
Чтобы проверить, корректно ли работает 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 @@
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 @@
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 @@
Мы создали простое приложение 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 @@
通过从命令行运行 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 @@
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 @@
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 @@
现在，您已经完成了这个简单的 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 @@
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 @@
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 @@
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 @@
</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 @@
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 @@
}
----
-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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
return language.getName();
}
----
-4. Save your changes.
+
+[start=4]
+. Save your changes.
== Creating the JSF Managed Bean
@@ -445,9 +486,15 @@
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 @@
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 @@
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 @@
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 @@
----
-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 @@
</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 @@
<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 @@
</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 @@
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 @@
</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 @@
</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 @@
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 @@
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 ``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 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 @@
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 @@
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 @@
このチュートリアルでは、ライブラリを他のユーザーと共有する必要がないため、プロジェクト・ライブラリを専用のフォルダにコピーする理由はほとんどありません。
-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 @@
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 @@
</session-factory>
</hibernate-configuration>
----
-9. 変更内容をファイルに保存します。
+
+[start=9]
+. 変更内容をファイルに保存します。
このファイルは、再度編集する必要がないため閉じてかまいません。
@@ -216,6 +240,7 @@
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 @@
}
----
-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 @@
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 @@
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 @@
結果ウィンドウにレコードのリストが表示されます。問合せが適切な結果を返すことをテストできたので、この問合せをヘルパー・クラスで使用できます。
-6. ``FilmHelper.java`` に次のメソッド ``getFilmTitles`` を追加して、filmIdが、変数 ``startID`` と ``endID`` で指定する範囲内にある映画を取り出します。
+
+[start=6]
+. ``FilmHelper.java`` に次のメソッド ``getFilmTitles`` を追加して、filmIdが、変数 ``startID`` と ``endID`` で指定する範囲内にある映画を取り出します。
[source,java]
----
@@ -343,7 +374,9 @@
return filmList;
}
----
-7. 特定の映画から俳優を取得する次のメソッド ``getActorsByID`` を追加します。メソッドは、入力変数として ``filmId`` を使用し、問合せを構成します。
+
+[start=7]
+. 特定の映画から俳優を取得する次のメソッド ``getActorsByID`` を追加します。メソッドは、入力変数として ``filmId`` を使用し、問合せを構成します。
[source,java]
----
@@ -362,7 +395,9 @@
return actorList;
}
----
-8. インポートを修正して変更内容を保存します。
+
+[start=8]
+. インポートを修正して変更内容を保存します。
インポートを修正するときは、 ``java.util.List`` と ``org.hibernate.Query`` を選択します。
@@ -390,7 +425,9 @@
return categoryList.get(0);
}
----
-2. ``filmId`` に基づいて1つの映画を取り出す次のメソッドを追加します。
+
+[start=2]
+. ``filmId`` に基づいて1つの映画を取り出す次のメソッドを追加します。
[source,java]
----
@@ -410,7 +447,9 @@
return film;
}
----
-3. ``langId`` に基づいて映画の言語を取り出す次のメソッドを追加します。
+
+[start=3]
+. ``langId`` に基づいて映画の言語を取り出す次のメソッドを追加します。
[source,java]
----
@@ -430,7 +469,9 @@
return language.getName();
}
----
-4. 変更を保存します。
+
+[start=4]
+. 変更を保存します。
== JSF管理対象Beanの作成
@@ -445,9 +486,15 @@
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 @@
private int selectedItemIndex;*
}
----
-2. 次の太字部分のコードを追加してFilmControllerインスタンスを作成し、映画を取り出します。
+
+[start=2]
+. 次の太字部分のコードを追加してFilmControllerインスタンスを作成し、映画を取り出します。
[source,java]
----
@@ -528,7 +577,9 @@
filmTitles = null;
}*
----
-3. 表の表示とページへのナビゲートに使用される、次のメソッドを追加します。* public boolean isHasNextPage() {
+
+[start=3]
+. 表の表示とページへのナビゲートに使用される、次のメソッドを追加します。* public boolean isHasNextPage() {
if (endId + pageSize <= recordCount) {
return true;
}
@@ -572,7 +623,9 @@
「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 @@
----
-5. インポートを修正([Ctrl]-[Shift]-[I])して変更内容を保存します。
+
+[start=5]
+. インポートを修正([Ctrl]-[Shift]-[I])して変更内容を保存します。
エディタでコード補完を使用すると、コードの入力に役立ちます。
@@ -640,7 +695,9 @@
</h:body>
----
-5. ``<ui:insert>`` 要素を変更して、デフォルトで生成される名前を「body」に変えます。
+
+[start=5]
+. ``<ui:insert>`` 要素を変更して、デフォルトで生成される名前を「body」に変えます。
[source,html]
----
@@ -649,7 +706,9 @@
<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 @@
</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 @@
``<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 @@
</h:form>
</ui:define>
----
-4. 取り出された項目を表示する表を生成する次の ``dataTable`` 要素(太字部分)を追加します。
+
+[start=4]
+. 取り出された項目を表示する表を生成する次の ``dataTable`` 要素(太字部分)を追加します。
[source,xml]
----
@@ -742,7 +807,9 @@
</h:form>
----
-5. 変更を保存します。
+
+[start=5]
+. 変更を保存します。
これで、indexページにデータベース内の映画のタイトル・リストが表示されます。表の各行に、管理対象Beanの ``prepareView`` メソッドを呼び出す「View」リンクがあります。 ``prepareView`` メソッドは「browse」を返し、 ``browse.xhtml`` を開きます。
@@ -757,12 +824,22 @@
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 @@
新しいファイルが ``template.xhtml`` ファイルを指定し、 ``<ui:define>`` タグに ``name="body"`` プロパティがあることを確認できます。
-7. ``<ui:define>`` タグの間に次の太字のコードを追加してフォームを作成し、管理対象BeanのFilmControllerでメソッドをコールして、データを取り出し、フォームを生成します。
+
+[start=7]
+. ``<ui:define>`` タグの間に次の太字のコードを追加してフォームを作成し、管理対象BeanのFilmControllerでメソッドをコールして、データを取り出し、フォームを生成します。
[source,xml]
----
@@ -853,7 +932,9 @@
``browse.xhtml`` と ``index.xhtml`` が同じページ・テンプレートを使用していることが確認できます。
-8. 変更を保存します。
+
+[start=8]
+. 変更を保存します。
== プロジェクトの実行
@@ -865,7 +946,9 @@
変更したファイルがすべて保存され、アプリケーションがビルドされて、サーバーにデプロイされます。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 @@
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 @@
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 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 @@
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 @@
</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 @@
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 @@
}
----
-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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
return language.getName();
}
----
-4. Salve as alterações.
+
+[start=4]
+. Salve as alterações.
== Criando o Bean Gerenciado pelo JSF
@@ -445,9 +486,15 @@
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 @@
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 @@
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 @@
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 @@
----
-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 @@
</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 @@
<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 @@
</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 @@
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 @@
</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 @@
</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 @@
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 @@
É 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 @@
É 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 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 @@
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 @@
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 @@
В рамках этого руководства копирование библиотек проекта в выделенную папку лишено смысла, поскольку совместное использование библиотек с другими пользователями не потребуется.
-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 @@
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 @@
</session-factory>
</hibernate-configuration>
----
-9. Сохраните измененный файл.
+
+[start=9]
+. Сохраните измененный файл.
Файл можно закрыть, т.к. необходимость в его изменении отсутствует.
@@ -216,6 +240,7 @@
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 @@
}
----
-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 @@
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 @@
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 @@
В окне результата отобразится список записей. Теперь, после подтверждения правильности получаемых после выполнения запроса результатов, можно использовать запрос в служебном классе.
-6. Добавьте следующий метод ``getFilmTitles`` к ``FilmHelper.java`` для извлечения фильмов с идентификатором, находящимся в определенном диапазоне, ограниченном переменными ``startID`` и ``endID`` .
+
+[start=6]
+. Добавьте следующий метод ``getFilmTitles`` к ``FilmHelper.java`` для извлечения фильмов с идентификатором, находящимся в определенном диапазоне, ограниченном переменными ``startID`` и ``endID`` .
[source,java]
----
@@ -343,7 +374,9 @@
return filmList;
}
----
-7. Добавьте следующий метод ``getActorsByID`` для извлечения актеров, задействованных в определенном фильме. Для создания запроса в этом методе в качестве входной переменной используется ``filmId`` .
+
+[start=7]
+. Добавьте следующий метод ``getActorsByID`` для извлечения актеров, задействованных в определенном фильме. Для создания запроса в этом методе в качестве входной переменной используется ``filmId`` .
[source,java]
----
@@ -362,7 +395,9 @@
return actorList;
}
----
-8. Исправьте операторы импорта и сохраните измененные данные.
+
+[start=8]
+. Исправьте операторы импорта и сохраните измененные данные.
После исправления параметров импорта выберите ``java.util.List`` и ``org.hibernate.Query`` .
@@ -390,7 +425,9 @@
return categoryList.get(0);
}
----
-2. Добавьте следующий метод для извлечения отдельного фильма согласно ``filmId`` .
+
+[start=2]
+. Добавьте следующий метод для извлечения отдельного фильма согласно ``filmId`` .
[source,java]
----
@@ -410,7 +447,9 @@
return film;
}
----
-3. Добавьте следующий метод для извлечения языка фильма согласно ``langId`` .
+
+[start=3]
+. Добавьте следующий метод для извлечения языка фильма согласно ``langId`` .
[source,java]
----
@@ -430,7 +469,9 @@
return language.getName();
}
----
-4. Сохраните изменения.
+
+[start=4]
+. Сохраните изменения.
== Создание управляемого компонента JSF
@@ -445,9 +486,15 @@
Имя управляемого компонента ``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 @@
private int selectedItemIndex;*
}
----
-2. Добавьте следующий код (выделенный полужирным шрифтом) для создания экземпляра FilmController и извлечения фильмов.
+
+[start=2]
+. Добавьте следующий код (выделенный полужирным шрифтом) для создания экземпляра FilmController и извлечения фильмов.
[source,java]
----
@@ -528,7 +577,9 @@
filmTitles = null;
}*
----
-3. Добавьте следующие методы, используемые для отображения таблицы и перехода к страницам.* public boolean isHasNextPage() {
+
+[start=3]
+. Добавьте следующие методы, используемые для отображения таблицы и перехода к страницам.* public boolean isHasNextPage() {
if (endId + pageSize <= recordCount) {
return true;
}
@@ -572,7 +623,9 @@
Методы, возвращающие "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 @@
----
-5. Исправьте операторы импорта (CTRL+SHIFT+I) и сохраните измененные данные.
+
+[start=5]
+. Исправьте операторы импорта (CTRL+SHIFT+I) и сохраните измененные данные.
Можно использовать автозавершение кода в редакторе, упрощающее ввод кода.
@@ -640,7 +695,9 @@
</h:body>
----
-5. Измените элемент ``<ui:insert>`` для изменения созданного по умолчанию имени на "body".
+
+[start=5]
+. Измените элемент ``<ui:insert>`` для изменения созданного по умолчанию имени на "body".
[source,html]
----
@@ -649,7 +706,9 @@
<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 @@
</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 @@
Элементы ``<ui:composition>`` и ``<ui:define>`` используются в сочетании с созданным шаблоном страницы. Элемент ``<ui:composition>`` ссылается на местоположение шаблона, используемого этой страницей. Элемент ``<ui:define>`` ссылается на позицию в шаблоне, занятую вложенным кодом.
-3. Добавьте следующие ссылки перехода, вызывающие методы ``next`` и ``previous`` в управляемом компоненте JSF.
+
+[start=3]
+. Добавьте следующие ссылки перехода, вызывающие методы ``next`` и ``previous`` в управляемом компоненте JSF.
[source,xml]
----
@@ -710,7 +773,9 @@
</h:form>
</ui:define>
----
-4. Добавьте следующий элемент (выделенный полужирным шрифтом) ``dataTable`` для создания таблицы, в которой будут отображены извлеченные элементы.
+
+[start=4]
+. Добавьте следующий элемент (выделенный полужирным шрифтом) ``dataTable`` для создания таблицы, в которой будут отображены извлеченные элементы.
[source,xml]
----
@@ -742,7 +807,9 @@
</h:form>
----
-5. Сохраните изменения.
+
+[start=5]
+. Сохраните изменения.
Теперь на начальной странице отображается список названий фильмов из базы данных. Каждая строка в таблице содержит ссылку "Просмотр", вызывающую метод ``prepareView`` в управляемом компоненте. Метод ``prepareView`` возвращает "browse" и открывает файл ``browse.xhtml`` .
@@ -757,12 +824,22 @@
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 @@
В новом файле указан файл ``template.xhtml`` , а тег ``<ui:define>`` обладает свойством ``name="body"``
-7. Добавьте следующий код (выделенный полужирным шрифтом) между тегами ``<ui:define>`` для создания формы и вызовите методы в управляемом компоненте "FilmController" для извлечения данных и заполнения формы.
+
+[start=7]
+. Добавьте следующий код (выделенный полужирным шрифтом) между тегами ``<ui:define>`` для создания формы и вызовите методы в управляемом компоненте "FilmController" для извлечения данных и заполнения формы.
[source,xml]
----
@@ -853,7 +932,9 @@
Файлы ``browse.xhtml`` и ``index.xhtml`` используют один и тот же шаблон страницы.
-8. Сохраните изменения.
+
+[start=8]
+. Сохраните изменения.
== Выполнение проекта
@@ -865,7 +946,9 @@
Все измененные файлы сохраняются, приложение собирается и развертывается на сервере приложений. Открывается окно браузера, в котором открывается URL-адрес ``http://localhost:8080/DVDStore/`` , где отображается список фильмов.
image::images/hib-browser1.png[title="Снимок браузера, в котором отображается список фильмов на странице индекса"]
-2. В браузере нажмите "Просмотр" для загрузки файла ``browse.xhtml`` для просмотра дополнительных сведений о фильме.
+
+[start=2]
+. В браузере нажмите "Просмотр" для загрузки файла ``browse.xhtml`` для просмотра дополнительных сведений о фильме.
=== Загрузка проекта решения
@@ -878,14 +961,24 @@
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 @@
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 @@
（对于本教程，没有理由将项目库复制到指定文件夹，因为您将需要与其他用户共享库）。
-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 @@
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 @@
</session-factory>
</hibernate-configuration>
----
-9. 保存对该文件所做的更改。
+
+[start=9]
+. 保存对该文件所做的更改。
由于不需要再次编辑该文件，因此可以关闭该文件。
@@ -216,6 +240,7 @@
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 @@
}
----
-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 @@
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 @@
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 @@
结果窗口中显示了一个记录列表。测试过该查询可返回期待的结果后，可在 helper 类中使用该查询。
-6. 将下面的 ``getFilmTitles`` 方法添加到 ``FilmHelper.java`` 以检索影片，其中 film id 介于变量 ``startID`` 和 ``endID`` 所指定的特定范围之间。
+
+[start=6]
+. 将下面的 ``getFilmTitles`` 方法添加到 ``FilmHelper.java`` 以检索影片，其中 film id 介于变量 ``startID`` 和 ``endID`` 所指定的特定范围之间。
[source,java]
----
@@ -343,7 +374,9 @@
return filmList;
}
----
-7. 添加下面的 ``getActorsByID`` 方法以检索特定影片中的演员。该方法将 ``filmId`` 作为输入变量以构造查询。
+
+[start=7]
+. 添加下面的 ``getActorsByID`` 方法以检索特定影片中的演员。该方法将 ``filmId`` 作为输入变量以构造查询。
[source,java]
----
@@ -362,7 +395,9 @@
return actorList;
}
----
-8. 修复导入并保存更改。
+
+[start=8]
+. 修复导入并保存更改。
修复导入时，要选择 ``java.util.List`` 和 ``org.hibernate.Query`` 。
@@ -390,7 +425,9 @@
return categoryList.get(0);
}
----
-2. 添加以下方法以根据 ``filmId`` 检索单个影片。
+
+[start=2]
+. 添加以下方法以根据 ``filmId`` 检索单个影片。
[source,java]
----
@@ -410,7 +447,9 @@
return film;
}
----
-3. 添加以下方法以根据 ``langId`` 检索影片语言。
+
+[start=3]
+. 添加以下方法以根据 ``langId`` 检索影片语言。
[source,java]
----
@@ -430,7 +469,9 @@
return language.getName();
}
----
-4. 保存所做的更改。
+
+[start=4]
+. 保存所做的更改。
== 创建 JSF 受管 Bean
@@ -445,9 +486,15 @@
在调用受管 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 @@
private int selectedItemIndex;*
}
----
-2. 添加以下代码（以粗体显示），创建 FilmController 实例并检索影片。
+
+[start=2]
+. 添加以下代码（以粗体显示），创建 FilmController 实例并检索影片。
[source,java]
----
@@ -528,7 +577,9 @@
filmTitles = null;
}*
----
-3. 添加用于显示表和导航页面的以下方法。* public boolean isHasNextPage() {
+
+[start=3]
+. 添加用于显示表和导航页面的以下方法。* public boolean isHasNextPage() {
if (endId + pageSize <= recordCount) {
return true;
}
@@ -572,7 +623,9 @@
返回 "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 @@
----
-5. 修复导入（Ctrl-Shift-I 组合键）并保存更改。
+
+[start=5]
+. 修复导入（Ctrl-Shift-I 组合键）并保存更改。
您可以在编辑器中使用代码完成以帮助键入代码。
@@ -640,7 +695,9 @@
</h:body>
----
-5. 修改 ``<ui:insert>`` 元素，以将生成的默认名称更改为 "body"。
+
+[start=5]
+. 修改 ``<ui:insert>`` 元素，以将生成的默认名称更改为 "body"。
[source,html]
----
@@ -649,7 +706,9 @@
<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 @@
</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 @@
``<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 @@
</h:form>
</ui:define>
----
-4. 添加以下 ``dataTable`` 元素（以粗体显示）来生成表，以便显示检索到的条目。
+
+[start=4]
+. 添加以下 ``dataTable`` 元素（以粗体显示）来生成表，以便显示检索到的条目。
[source,xml]
----
@@ -742,7 +807,9 @@
</h:form>
----
-5. 保存所做的更改。
+
+[start=5]
+. 保存所做的更改。
现在，index 页面将显示数据库中的影片名称列表。表中的每一行都包含 "View" 链接，用于调用受管 Bean 中的 ``prepareView`` 方法。 ``prepareView`` 方法返回 "browse" 并打开 ``browse.xhtml`` 。
@@ -757,12 +824,22 @@
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 @@
您可以看到新文件指定了 ``template.xhtml`` 文件，并且 ``<ui:define>`` 标记具有属性 ``name="body"``
-7. 在 ``<ui:define>`` 标记之间添加以下代码（以粗体显示）以创建窗体，并调用受管 Bean FilmController 中的方法以检索数据和填充窗体。
+
+[start=7]
+. 在 ``<ui:define>`` 标记之间添加以下代码（以粗体显示）以创建窗体，并调用受管 Bean FilmController 中的方法以检索数据和填充窗体。
[source,xml]
----
@@ -853,7 +932,9 @@
您可以看到 ``browse.xhtml`` 和 ``index.xhtml`` 使用相同的页面模板。
-8. 保存所做的更改。
+
+[start=8]
+. 保存所做的更改。
== 运行项目
@@ -865,7 +946,9 @@
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 @@
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 @@
_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 @@
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 @@
*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 @@
*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 @@
----
* `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 @@
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 @@
----
* `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 @@
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 @@
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 @@
*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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
_または_
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 @@
最初に、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 @@
*注意: *「プロジェクト」ウィンドウ([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 @@
*注意:*このプロジェクトでは、`DojoX`ライブラリは不要です。
-5. 「プロジェクト」ウィンドウで`Libraries`ノードを展開し、必要なすべてのライブラリがクラスパスにあることを確認します。
+
+[start=5]
+. 「プロジェクト」ウィンドウで`Libraries`ノードを展開し、必要なすべてのライブラリがクラスパスにあることを確認します。
*注意:*構成によっては、不足しているサーバーの問題を解決しなければならないことがあります。`Libraries`ノードの下に ``<Missing Java EE Server>`` ノードが表示される場合は、プロジェクト・ノードを右クリックし、ポップアップ・メニューで「不足しているサーバーの問題を解決」を選択します。
@@ -130,7 +137,9 @@
----
* `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 @@
`nihilo`テーマはツールキットにデフォルトで含まれています。「プロジェクト」ウィンドウで`dijit/themes`フォルダを展開して、デフォルトで提供されている他のサンプル・テーマを表示できます。
-4. 次のクラス・セレクタをページの`<body>`タグに追加して、使用しているテーマの名前を指定します。これを実行すると、ページにロードされているすべてのDojoウィジェットが、テーマに関連付けられたスタイルを使用してレンダリングされます。
+
+[start=4]
+. 次のクラス・セレクタをページの`<body>`タグに追加して、使用しているテーマの名前を指定します。これを実行すると、ページにロードされているすべてのDojoウィジェットが、テーマに関連付けられたスタイルを使用してレンダリングされます。
[source,java]
----
@@ -181,7 +192,9 @@
----
* `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 @@
この時点で、これらのソースをコンパイルして、`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 @@
`json.jar`ファイルができたので、`DojoTreeSample`プロジェクトを開いたときから発生している参照の問題を解決できます。
-11. 「プロジェクト」ウィンドウで`DojoTreeSample`の「ライブラリ」ノードを右クリックし、「JAR/フォルダの追加」を選択します。次に、ダイアログで`json`プロジェクトの`dist`フォルダの場所に移動し、`json.jar`ファイルを選択します。
+
+[start=11]
+. 「プロジェクト」ウィンドウで`DojoTreeSample`の「ライブラリ」ノードを右クリックし、「JAR/フォルダの追加」を選択します。次に、ダイアログで`json`プロジェクトの`dist`フォルダの場所に移動し、`json.jar`ファイルを選択します。
「ライブラリ」ノードを右クリックしてポップアップ・メニューで「プロジェクトの追加」を選択し、「プロジェクトの追加」ダイアログ・ボックスで`json`プロジェクトを探すこともできます。
@@ -257,8 +288,12 @@
*注意: *`json.jar`ファイルはプロジェクトの「`ライブラリ`」ノードの下に表示されますが、元の場所から参照されます。コピーされてプロジェクトに追加されるのではありません(たとえば、「ファイル」ウィンドウで`DojoTreeSample`プロジェクトの下には見つかりません)。したがって、JARファイルの場所を変更すると、参照が壊れます。
-12. 「`ソース・パッケージ`」> `dojo.indians`パッケージを展開し、`Tribe`クラスと`TribeDataManager`クラスをダブルクリックしてエディタで開きます。
-13. 必要なインポート文を両方のクラスに追加します。各クラスで、エディタ上で右クリックし、「インポートを修正」を選択します。
+
+[start=12]
+. 「`ソース・パッケージ`」> `dojo.indians`パッケージを展開し、`Tribe`クラスと`TribeDataManager`クラスをダブルクリックしてエディタで開きます。
+
+[start=13]
+. 必要なインポート文を両方のクラスに追加します。各クラスで、エディタ上で右クリックし、「インポートを修正」を選択します。
`Tribe`クラスには次のインポートが必要です。
@@ -280,7 +315,9 @@
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 @@
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 @@
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 @@
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 @@
次のステップでは、`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 @@
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 @@
この変更により、HTTPレスポンスの`Content-Type`ヘッダーが、返される内容がすべてJSON形式であることを示すように設定されます。
-5. `processRequest()`メソッドの`try`ブロック内のコメントアウトされているコードを、次のように置き換えます(*太字*部分が変更箇所)。
+
+[start=5]
+. `processRequest()`メソッドの`try`ブロック内のコメントアウトされているコードを、次のように置き換えます(*太字*部分が変更箇所)。
[source,java]
----
@@ -404,7 +468,9 @@
コードを再フォーマットするには、エディタ内で右クリックし、「フォーマット」を選択します。
-6. IDEのヒントを使用して、次のインポート文を追加します。
+
+[start=6]
+. IDEのヒントを使用して、次のインポート文を追加します。
[source,java]
----
@@ -412,7 +478,9 @@
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 @@
_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 @@
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 @@
*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 @@
*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 @@
----
* 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 @@
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 @@
----
* `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 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 @@
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 @@
*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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
_или_
Контейнер сервлетов 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 @@
Начните с открытия образца проекта в среде 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 @@
*Примечание. *Окно 'Проекты' (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 @@
*Примечание.* Библиотека `DojoX` для данного проекта не требуется.
-5. Разверните узел `Библиотеки` в окне "Проекты" и убедитесь, что все требуемые библиотеки находятся на пути класса.
+
+[start=5]
+. Разверните узел `Библиотеки` в окне "Проекты" и убедитесь, что все требуемые библиотеки находятся на пути класса.
*Примечание.* В зависимости от конфигурации может потребоваться устранить проблему, связанную с отсутствием сервера. Если в списке под узлом `Библиотеки` присутствует узел ``<Отсутствующий сервер Java EE>`` , щелкните правой кнопкой мыши узел проекта и выберите "Устранить проблему отсутствующего сервера".
@@ -130,7 +137,9 @@
----
* `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 @@
Тема `nihilo` включается по умолчанию в набор инструментальных средств. Вы можете развернуть папку `dijit/themes` в окне 'Проекты', чтобы увидеть другие образцы тем, которые предоставлены по умолчанию.
-4. Добавьте следующее средство выбора класса к тегу `<body>` страницы, чтобы указать имя темы, которая теперь используется. Когда мы это делаем, любой элемент оформления Dojo, загруженный на страницу, будет визуализирован с использованием стилей, связанных с заданной темой.
+
+[start=4]
+. Добавьте следующее средство выбора класса к тегу `<body>` страницы, чтобы указать имя темы, которая теперь используется. Когда мы это делаем, любой элемент оформления Dojo, загруженный на страницу, будет визуализирован с использованием стилей, связанных с заданной темой.
[source,java]
----
@@ -181,7 +192,9 @@
----
* `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 @@
На данный момент необходимо скомпилировать эти источники и создать архив 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 @@
Теперь, когда у нас есть файл `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 @@
*Примечание. *Хотя файл `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 @@
Обратите внимание, что интерфейсы 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 @@
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 @@
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 @@
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 @@
На следующем этапе мы реализуем сервлет, вызывающий метод `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 @@
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 @@
Это изменение устанавливает заголовок `Content-Type` для отклика HTTP, чтобы указать, что все возвращаемое содержимое имеет формат JSON.
-5. Замените закомментированный код внутри блока `try` метода `processRequest()` на следующий код (изменения выделены *жирным шрифтом*):
+
+[start=5]
+. Замените закомментированный код внутри блока `try` метода `processRequest()` на следующий код (изменения выделены *жирным шрифтом*):
[source,java]
----
@@ -404,7 +468,9 @@
Чтобы изменить формат кода, щелкните правой кнопкой мыши в редакторе и выберите 'Формат'.
-6. Используйте подсказки IDE, чтобы добавить следующие операторы импорта.
+
+[start=6]
+. Используйте подсказки IDE, чтобы добавить следующие операторы импорта.
[source,java]
----
@@ -412,7 +478,9 @@
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 @@
_或_
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 @@
首先在 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 @@
*注：*"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 @@
*注：*此项目不需要 `DojoX` 库。
-5. 在 "Projects"（项目）窗口中展开 `Libraries`（库）节点，并确认所有必需库均在类路径上。
+
+[start=5]
+. 在 "Projects"（项目）窗口中展开 `Libraries`（库）节点，并确认所有必需库均在类路径上。
*注：*根据您的配置不同，您可能需要解决缺少服务器问题。如果您在 `Libraries`（库）节点下看到 ``<Missing Java EE Server>`` （<缺少 Java EE 服务器>）节点，请右键单击项目节点，然后在弹出菜单中选择 "Resolve Missing Server Problem"（解决缺少服务器问题）。
@@ -130,7 +137,9 @@
----
* `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 @@
默认情况下，`nihilo` 主题包含在工具包中。通过在“项目”窗口中展开 `dijit/themes` 文件夹可以查看默认提供的其他样例主题。
-4. 在页 `<body>` 标记中添加以下类选择器可以指定使用的主题的名称。当您执行此操作时，加载到页面中的任何 Dojo 窗口部件都将使用与主题关联的样式来呈现。
+
+[start=4]
+. 在页 `<body>` 标记中添加以下类选择器可以指定使用的主题的名称。当您执行此操作时，加载到页面中的任何 Dojo 窗口部件都将使用与主题关联的样式来呈现。
[source,java]
----
@@ -181,7 +192,9 @@
----
* `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 @@
现在，我们要编译这些源代码并创建将添加到 `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 @@
现在，您已具有 `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 @@
*注：*尽管 `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 @@
请注意，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 @@
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 @@
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 @@
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 @@
您将实现一个 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 @@
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 @@
此更改将设置 HTTP 响应的 `Content-Type` 头，以指示任何返回的内容均为 JSON 格式。
-5. 将 `processRequest()` 方法的 `try` 块内的注释代码替换为以下代码（更改以*粗体*显示）：
+
+[start=5]
+. 将 `processRequest()` 方法的 `try` 块内的注释代码替换为以下代码（更改以*粗体*显示）：
[source,java]
----
@@ -404,7 +468,9 @@
要重新格式化代码，请在编辑器中单击右键并选择 "Format"（格式化代码）。
-6. 使用 IDE 的提示添加以下 import 语句。
+
+[start=6]
+. 使用 IDE 的提示添加以下 import 语句。
[source,java]
----
@@ -412,7 +478,9 @@
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 @@
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 @@
</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 @@
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 @@
-|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 @@
</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 @@
<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 @@
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 @@
</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 @@
$(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 @@
});
});
----
-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 @@
</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 @@
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 blend in esthetically with most web site designs, particularly designs that have a strong graphic identity. We will address these issues by using the jQuery accordion widget, in combination with jQuery UI's default theme.
-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 @@
</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 @@
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 @@
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 @@
-|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 @@
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 @@
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 @@
</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 @@
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 @@
-|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 @@
</head>
...
----
-8. ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
+
+[start=8]
+. ファイルを保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
これで、jQueryライブラリが`jqproject`プロジェクトに追加され、`index.html`ファイルから参照されるようになりました。jQueryの機能をページに追加し始めることができます。
@@ -189,14 +207,18 @@
<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命令は、DOMのすべての要素がブラウザにロードされた後にのみ実行される必要があります。jQuery動作はDOMの要素に接続されるので、期待する結果を得るにはこれらの要素がjQueryで使用できる必要があるため、これは重要です。jQueryは、`$`で表される、jQueryオブジェクトの後に続く組込みの`(document).ready`関数を使用して、これを処理してくれます。
-4. 先ほど作成したscriptタグの間に次の構文を追加します。
+
+[start=4]
+. 先ほど作成したscriptタグの間に次の構文を追加します。
[source,java]
----
@@ -270,7 +294,9 @@
</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 @@
$(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 @@
});
});
----
-8. ブラウザで、ページをリフレッシュし、「Test」をクリックします。青に変化した後、フェード・アウトしてページから消えます。(再度試すには、ページをリフレッシュする必要があります。)
+
+[start=8]
+. ブラウザで、ページをリフレッシュし、「Test」をクリックします。青に変化した後、フェード・アウトしてページから消えます。(再度試すには、ページをリフレッシュする必要があります。)
=== NetBeansのコード補完とAPIサポート
@@ -383,7 +416,9 @@
</div>
----
全体を囲んでいる`<div>`要素には、`id`属性と値`infolist`が指定されています。この`<div>`要素内に、`<h3>`タグと`<div>`タグが4セットあり、イメージと順序なしリストが含まれています。
-2. 前述のマークアップにいくつかのインラインCSSルールを追加します。テストの目的で作成した`.blue`スタイル・ルールを削除します。その場所に、次のルールを追加します。変更場所は*太字*で示されています。
+
+[start=2]
+. 前述のマークアップにいくつかのインラインCSSルールを追加します。テストの目的で作成した`.blue`スタイル・ルールを削除します。その場所に、次のルールを追加します。変更場所は*太字*で示されています。
[source,xml]
----
@@ -398,27 +433,42 @@
`<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 @@
</script>
</head>
----
-10. 静的なスタイルなしリストにアコーディオン動作を与えるには、1行のjQueryコードを追加するのみで済みます。次の行を`(document).ready`関数に追加します。変更場所は*太字*で示されています。
+
+[start=10]
+. 静的なスタイルなしリストにアコーディオン動作を与えるには、1行のjQueryコードを追加するのみで済みます。次の行を`(document).ready`関数に追加します。変更場所は*太字*で示されています。
[source,java]
----
@@ -456,8 +508,13 @@
上記のスニペットでは、「`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 @@
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/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 @@
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 @@
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 @@
</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 @@
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 @@
-|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 @@
</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 @@
<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 @@
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 @@
</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 @@
$(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 @@
});
});
----
-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 @@
</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 @@
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 combine esteticamente com a maioria dos designs de site, particularmente, designs que tenham uma forte identidade gráfica. Trataremos esses problemas usando o widget accordion do jQuery juntamente com o tema default da IU do jQuery.
-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 @@
</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 @@
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 @@
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 @@
-|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 @@
-image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0"]
-
-
-
-==== Для выполнения этого учебного курса потребуются следующие материалы.
+== Для выполнения этого учебного курса потребуются следующие материалы.
|===
|Программное обеспечение или материал |Требуемая версия
@@ -74,20 +70,35 @@
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 @@
</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 @@
Чтобы добавить библиотеку 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/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 @@
</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 @@
<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, которые мы добавим, должны быть выполнены только после загрузки браузером всех элементов модели DOM. Это важно, потому что поведения jQuery подключаются к элементам модели DOM, и эти элементы должны быть доступны для jQuery для получения ожидаемых результатов. jQuery выполняет это за нас с помощью встроенной функции `(document).ready`, которая следует за объектом jQuery, представленным `$`.
-4. Введите эту конструкцию между только что созданными тегами script:
+
+[start=4]
+. Введите эту конструкцию между только что созданными тегами script:
[source,java]
----
@@ -262,7 +295,9 @@
</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 @@
$(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 @@
});
});
----
-8. В браузере обновите страницу и щелкните "Test". Текст станет синим, затем темнеет и исчезает со страницы. (Чтобы повторить, необходимо обновить страницу.)
+
+[start=8]
+. В браузере обновите страницу и щелкните "Test". Текст станет синим, затем темнеет и исчезает со страницы. (Чтобы повторить, необходимо обновить страницу.)
=== Автозавершение кода NetBeans и поддержка интерфейса API
@@ -375,7 +417,9 @@
</div>
----
Обратите внимание, что общему заключающему элементу `<div>` предоставлен атрибут `id` со значением `infolist`. В этом элементе `<div>` находятся четыре комплекта тегов `<h3>` и теги `<div>`, содержащие изображение и нумерованный список.
-2. Добавьте несколько встроенных правил CSS к приведенной выше разметке. Удалите правило стиля `.blue`, созданное для целей тестирования выше. Вместо него добавьте следующие правила. (Изменения *выделены полужирным шрифтом*.)
+
+[start=2]
+. Добавьте несколько встроенных правил CSS к приведенной выше разметке. Удалите правило стиля `.blue`, созданное для целей тестирования выше. Вместо него добавьте следующие правила. (Изменения *выделены полужирным шрифтом*.)
[source,xml]
----
@@ -390,27 +434,42 @@
При вводе внутри тегов `<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, использование списка заметно усложнится. Во-вторых, документ визуально простой, и, скорей всего, не будет сочетаться с дизайном большинства веб-сайтов, в частности сайтом со множеством графики. Эти проблемы будут решены с помощью элемента оформления accordion jQuery вместе с темой jQuery UI по умолчанию.
-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 @@
</script>
</head>
----
-10. Для того, чтобы статический список без стиля использовал поведение accordion, необходимо просто добавить одну строку кода jQuery. Введите эту строку в функцию `(document).ready`. (Изменения *выделены полужирным шрифтом*.)
+
+[start=10]
+. Для того, чтобы статический список без стиля использовал поведение accordion, необходимо просто добавить одну строку кода jQuery. Введите эту строку в функцию `(document).ready`. (Изменения *выделены полужирным шрифтом*.)
[source,java]
----
@@ -448,8 +509,13 @@
В приведенном выше фрагменте кода также было указано "`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 @@
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/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 @@
-image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0"]
-
-
-
-==== 要完成本教程，需要使用以下资源。
+== 要完成本教程，需要使用以下资源。
|===
|软件或资源 |要求的版本
@@ -74,20 +70,35 @@
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 @@
</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 @@
要将 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/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 @@
</head>
...
----
-8. 保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。
+
+[start=8]
+. 保存文件（Ctrl-S；在 Mac 上为 ⌘-S）。
现在，jQuery 库包含在 `jqproject` 项目中，并从 `index.html` 文件中引用。我们可以开始向页面中添加 jQuery 功能。
@@ -181,14 +208,18 @@
<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 @@
通过在编辑器中单击右键并选择 "Format"（格式化代码）可以清理代码。
我们将要添加的 jQuery 指令必须在浏览器加载所有 DOM 元素之后才能执行。这点很重要，因为 jQuery 行为与 DOM 元素连接在一起，jQuery 必须可以使用这些元素，以便得到预期结果。jQuery 通过其内置的 `(document).ready` 函数帮助实现此目的，该函数在 jQuery 对象之后，由 `$` 表示。
-4. 在刚创建的脚本标记间输入以下结构：
+
+[start=4]
+. 在刚创建的脚本标记间输入以下结构：
[source,java]
----
@@ -262,7 +295,9 @@
</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 @@
$(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 @@
});
});
----
-8. 在浏览器中刷新页面，然后单击 "Test"。您将看到 "Test" 变蓝，然后淡出，并从页面中消失。（想再试一次，必须刷新页面。）
+
+[start=8]
+. 在浏览器中刷新页面，然后单击 "Test"。您将看到 "Test" 变蓝，然后淡出，并从页面中消失。（想再试一次，必须刷新页面。）
=== NetBeans 代码完成和 API 支持
@@ -375,7 +417,9 @@
</div>
----
注意整个 `<div>` 闭合元素被赋予了一个值为 `infolist` 的 `id` 属性。在此 `<div>` 元素中，有四组包含图像和未排序列表的 `<h3>` 标记和 `<div>` 标记。
-2. 向上面的标记中添加一些内联 CSS 规则。删除您为上面的测试创建的 `.blue` 样式规则。在其位置添加以下规则。（更改内容以*粗体*显示。）
+
+[start=2]
+. 向上面的标记中添加一些内联 CSS 规则。删除您为上面的测试创建的 `.blue` 样式规则。在其位置添加以下规则。（更改内容以*粗体*显示。）
[source,xml]
----
@@ -390,27 +434,42 @@
在 `<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 @@
</script>
</head>
----
-10. 让静态、无样式的列表接受折叠行为就和添加一行 jQuery 代码一样简单。将此行输入 `(document).ready` 函数中。（更改内容以*粗体*显示。）
+
+[start=10]
+. 让静态、无样式的列表接受折叠行为就和添加一行 jQuery 代码一样简单。将此行输入 `(document).ready` 函数中。（更改内容以*粗体*显示。）
[source,java]
----
@@ -448,8 +509,13 @@
您还在上面的代码片段中指定了 "`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 @@
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/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 @@
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 @@
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 @@
* 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 @@
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 @@
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 @@
* 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 @@
*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 @@
</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 installed once.
+
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 @@
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 @@
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 @@
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 @@
*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 @@
ユーザー名とパスワードを必ずメモしておいてください。
-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 @@
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 @@
* サーバーを起動および停止する
* ブラウザで管理コンソールを開く
* IDEの「出力」ウィンドウでサーバー・ログを表示する
+
image::images/weblogic-services-window1.png[title="「サービス」ウィンドウのWebLogic Server"]
@@ -118,11 +125,15 @@
このタブが表示されていない場合は、Oracle WebLogic Serverのノードを右クリックし、「サーバー・ログの表示」を選択します。
-2. Oracle WebLogic Serverのノードを右クリックし、「管理コンソールを表示」を選択します。
+
+[start=2]
+. Oracle WebLogic Serverのノードを右クリックし、「管理コンソールを表示」を選択します。
「管理コンソールを表示」を選択すると、サーバーのログイン画面がブラウザで開きます。
-3. サーバーのインストール時に指定したユーザー名とパスワードを使用してログインします。
+
+[start=3]
+. サーバーのインストール時に指定したユーザー名とパスワードを使用してログインします。
ログインすると、管理コンソールのホーム・ページがブラウザに表示されます。
@@ -147,7 +158,9 @@
サーバー・マネージャの「ドメイン」タブでは、ユーザー名とパスワードを表示および変更できます。
-2. 「JPA 2を有効化」をクリックします。「閉じる」をクリックします。
+
+[start=2]
+. 「JPA 2を有効化」をクリックします。「閉じる」をクリックします。
「JPA 2を有効化」をクリックすると、IDEでWebLogic Serverのクラスパスが変更され、JPA 2のサポートを有効にするためのファイルが追加されます。
@@ -156,10 +169,19 @@
* 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 @@
*注意:*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 @@
</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 @@
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 @@
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 @@
``customer`` 表とそれに関連する表がウィザードの「選択した表」の下に一覧表示されます。
-5. 生成されるクラスのパッケージとして「*ejb*」と入力します。「終了」をクリックします。
+
+[start=5]
+. 生成されるクラスのパッケージとして「*ejb*」と入力します。「終了」をクリックします。
「終了」をクリックすると、選択した各表のエンティティ・クラスがIDEによって生成されます。 ``ejb`` ソース・パッケージ・ノードを展開すると、生成されたエンティティ・クラスを表示できます。
@@ -374,8 +408,11 @@
*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 @@
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 @@
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 @@
* 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 @@
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 @@
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 @@
* 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 @@
*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 @@
</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 @@
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 @@
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 @@
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 @@
*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 @@
Не забудьте указать имя пользователя и пароль.
-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 @@
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 @@
* Запуск и остановка сервера
* Открытие администраторской консоли в браузере
* Просмотр журнала сервера в окне вывода IDE
+
image::images/weblogic-services-window1.png[title="Сервер WebLogic в окне "Службы"."]
@@ -118,11 +125,15 @@
Можно щелкнуть правой кнопкой мыши узел сервера Oracle WebLogic и выбрать 'Просмотреть журнал сервера', если вкладка не отображается.
-2. Щелкните правой кнопкой мыши узел сервера Oracle WebLogic и выберите команду "Просмотреть администраторскую консоль".
+
+[start=2]
+. Щелкните правой кнопкой мыши узел сервера Oracle WebLogic и выберите команду "Просмотреть администраторскую консоль".
При выборе команды "Просмотреть администраторскую консоль" в вашем браузере откроется экран входа на сервер.
-3. Войдите с помощью имени пользователя и пароля, которые вы указали при установке сервера.
+
+[start=3]
+. Войдите с помощью имени пользователя и пароля, которые вы указали при установке сервера.
После входа вы увидите домашнюю страницу администраторской консоли в окне браузера.
@@ -147,7 +158,9 @@
Вкладка "Домен" диспетчера серверов позволяет просматривать и изменять имя пользователя и пароль.
-2. Выберите "Активировать JPA 2". Выберите "Close" (Закрыть).
+
+[start=2]
+. Выберите "Активировать JPA 2". Выберите "Close" (Закрыть).
Когда вы выберете команду "Активировать JPA 2", IDE изменит путь класса сервера WebLogic для добавления файлов с целью активации поддержки JPA 2.
@@ -156,10 +169,19 @@
* 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 @@
*Примечание.* Вариант 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 @@
</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 @@
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 @@
8. Введите *jdbc/mysql-sample* как имя JNDI в диалоговом окне "Новый источник данных".
9. Выберите подключение к примеру базы данных MySQL. Нажмите кнопку "ОК" для закрытия диалогового окна.
10. Нажмите кнопку "Готово" в мастере создания блоков сохранения состояния.
+
image::images/new-persistence-eclipselink1.png[title="Мастер создания блоков сохранения состояния"]
Когда вы нажмете кнопку "Готово", для вашего проекта будет создан файл ``persistence.xml`` и открыт в редакторе. Вы можете нажать значок 'Исходный код' на панели инструментов редактора, чтобы открыть файл ``persistence.xml`` в редакторе исходного кода XML. Этот файл содержит всю информацию, которая нужна серверу для управления сущностями и сохранением состояния приложения.
@@ -334,7 +366,9 @@
Мастер содержит таблицу ``customer`` и связанные с ней в разделе "Выделенные таблицы".
-5. Введите *ejb* как пакет для сгенерированных классов. Нажмите кнопку "Завершить".
+
+[start=5]
+. Введите *ejb* как пакет для сгенерированных классов. Нажмите кнопку "Завершить".
Когда вы нажмете кнопку "Готово", среда IDE сгенерирует классы сущностей для каждой из выделенных таблиц. Вы можете расширить узел исходного пакета ``ejb`` для просмотра генерированных классов сущностей.
@@ -374,8 +408,11 @@
*Замечания по развертыванию на сервере 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 @@
请务必记下用户名和口令。
-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 @@
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 @@
* 启动和停止服务器
* 在浏览器中打开管理控制台
* 在 IDE 的 "Output"（输出）窗口中查看服务器日志
+
image::images/weblogic-services-window1.png[title=""Services"（服务）窗口中的 WebLogic Server"]
@@ -118,11 +125,15 @@
如果未显示该标签，您可以右键单击 "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 @@
在服务器管理器的 "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 @@
* 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 @@
*注：*只有在注册了 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 @@
</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 @@
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 @@
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 @@
该向导将在 "Selected Tables"（选定的表）下面列出 ``customer`` 表和相关的表。
-5. 键入 *ejb* 作为生成的类的包。单击 "Finish"（完成）。
+
+[start=5]
+. 键入 *ejb* 作为生成的类的包。单击 "Finish"（完成）。
单击 "Finish"（完成），此时 IDE 将为每个选定的表生成实体类。您可以展开 ``ejb`` 源包节点以查看生成的实体类。
@@ -374,8 +408,11 @@
*部署到 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 @@
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 of the tutorial, <<explore,Exploring the Application>>, is optional, and provides numerous exercises to help you to better understand the application and become more familiar with the IDE.
-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 @@
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 @@
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 @@
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 corresponding entity class to `String` objects and vice versa.
+
+[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 entity class to `String` objects and vice versa.
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 @@
[[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 @@
</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 @@
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 @@
[.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 @@
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 @@
|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 @@
</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 @@
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 @@
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 @@
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 @@
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 @@
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`」と入力します。
+
+[start=7]
+. 名前付き問合せを生成するためのチェックボックスと持続性ユニットを作成するためのチェックボックスが選択されていることを確認します。「終了」をクリックします。
「終了」をクリックすると、IDEは、プロジェクトの`jpa.entities`パッケージにエンティティ・クラスを生成します。
@@ -267,19 +261,34 @@
「利用可能なエンティティ・クラス」ボックスに、プロジェクトに含まれる7つのエンティティ・クラスが一覧表示されます。このボックスには、組込み可能なクラス(`ClientPK.java`と`ProjectPK.java`)は一覧表示されません。
-2. 「すべてを追加」をクリックして、すべてのクラスを「選択されているエンティティ・クラス」ボックスに移動します。
+
+[start=2]
+. 「すべてを追加」をクリックして、すべてのクラスを「選択されているエンティティ・クラス」ボックスに移動します。
+
image::images/newjsf-wizard.png[title="プロジェクトに含まれるすべてのエンティティ・クラスが表示された「新規エンティティからのJSFページ・クラス」ウィザード"]
+
「次」をクリックします。
-3. ウィザードのステップ3の「生成されたJSFページとクラス」で、「JPAセッションBeanパッケージ」に「`jpa.session`」と入力します。
-4. 「JSFクラス・パッケージ」に「`jsf`」と入力します。
-5. 「ローカリゼーション・バンドル名」フィールドに「`/resources/Bundle`」と入力します。これにより、`resources`という名前のパッケージが生成され、これに`Bundle.properties`ファイルが属します。ここを空白のままにした場合、プロパティ・バンドルはプロジェクトのデフォルトのパッケージ内に作成されます。
+
+[start=3]
+. ウィザードのステップ3の「生成されたJSFページとクラス」で、「JPAセッションBeanパッケージ」に「`jpa.session`」と入力します。
+
+[start=4]
+. 「JSFクラス・パッケージ」に「`jsf`」と入力します。
+
+[start=5]
+. 「ローカリゼーション・バンドル名」フィールドに「`/resources/Bundle`」と入力します。これにより、`resources`という名前のパッケージが生成され、これに`Bundle.properties`ファイルが属します。ここを空白のままにした場合、プロパティ・バンドルはプロジェクトのデフォルトのパッケージ内に作成されます。
+
image::images/newjsf-wizard2.png[title="生成されたファイルに対するパッケージ名とフォルダ名の指定"]
IDEをプロジェクトの規則により適応させるために、ウィザードで生成した任意のファイルをカスタマイズできます。「テンプレートのカスタマイズ」リンクをクリックし、ウィザードで使用されるファイル・テンプレートを変更します。
+
image::images/customize-template.png[title="ウィザードで生成されたファイルの「テンプレートをカスタマイズ」"]
+
一般に、IDEで管理されるすべてのテンプレートには、「テンプレート・マネージャ」(「ツール」>「テンプレート」)を使用してアクセスし、変更を加えることができます。
-6. 「終了」をクリックします。ステートレス・セッションBeanが`jpa.session`パッケージ内に生成され、JSFセッション・スコープ指定管理対象Beanが`jsf`パッケージ内に生成されます。各ステートレス・セッションBeanは、対応するエンティティ・クラスの操作を処理します。これには、Java Persistence APIを経由したエンティティ・クラスのインスタンスの作成、編集および破棄が含まれます。各JSF管理対象Beanは、`javax.faces.convert.Converter`インタフェースを実装し、対応するエンティティ・クラスのインスタンスと`String`型オブジェクトの間の変換作業を行います。
+
+[start=6]
+. 「終了」をクリックします。ステートレス・セッションBeanが`jpa.session`パッケージ内に生成され、JSFセッション・スコープ指定管理対象Beanが`jsf`パッケージ内に生成されます。各ステートレス・セッションBeanは、対応するエンティティ・クラスの操作を処理します。これには、Java Persistence APIを経由したエンティティ・クラスのインスタンスの作成、編集および破棄が含まれます。各JSF管理対象Beanは、`javax.faces.convert.Converter`インタフェースを実装し、対応するエンティティ・クラスのインスタンスと`String`型オブジェクトの間の変換作業を行います。
「Webページ」ノードを展開すると、エンティティ・クラスごとにフォルダが生成されたことがわかります。各フォルダには、`Create.xhtml`、`Edit.xhtml`、`List.xhtml`および`View.xhtml`ファイルが格納されます。`index.xhtml`ファイルも変更され、各`List.xhtml`ページへのリンクが挿入されます。
@@ -339,7 +348,7 @@
[[completedProject]]
=== 完了したプロジェクトの確認
-1. プロジェクトを実行するには、「プロジェクト」ウィンドウでプロジェクトのノードを右クリックして「実行」を選択するか、メイン・ツールバーで「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックします。
+1. プロジェクトを実行するには、「プロジェクト」ウィンドウでプロジェクトのノードを右クリックして「実行」を選択するか、メイン・ツールバーで「プロジェクトの実行」(image:images/run-project-btn.png[])ボタンをクリックします。
アプリケーションの開始ページが表示されると、リンク・リストが表示され、これらを使用して各データベース表に格納されたエントリを表示できます。
@@ -376,8 +385,12 @@
</h:form>
</h:body>
----
-2. 「`Show All Consultant Items`」リンクをクリックします。前出のコードを参照すると、ターゲット・ページが`/consultant/List.xhtml`であることがわかります。(JSF 2.xでは、ファイル拡張子は暗黙のナビゲーションによって推定されます。)
+
+[start=2]
+. 「`Show All Consultant Items`」リンクをクリックします。前出のコードを参照すると、ターゲット・ページが`/consultant/List.xhtml`であることがわかります。(JSF 2.xでは、ファイル拡張子は暗黙のナビゲーションによって推定されます。)
+
image::images/empty-consultants-list.png[title="コンサルタント表は現在空"]
+
このデータベースには、現在サンプル・データが含まれていません。「`Create New Consultant`」リンクをクリックし、表示されるWebフォームを使用することでデータを手動で追加できます。これにより、`/consultant/Create.xhtml`ページの表示がトリガーされます。また、SQLスクリプトをIDEで実行し、サンプル・データを含む表を生成することもできます。次の項では、両方の選択肢を示します。
indexリンクをクリックすると、開始ページ内に一覧表示されたリンクに戻ることができます。これらのリンクには、各データベース表が保持するデータのビューと、各エンティティ・フォルダの`List.xhtml`ファイルを表示するためのトリガーがあります。後述の説明にあるように、データを表に追加した後、各エントリに他のリンクが表示され、単一の表レコードのデータを表示(`View.xhtml`)、編集(`Edit.xhmtl`)および破棄できます。
@@ -394,12 +407,17 @@
1. メイン・メニューから「ファイル」>「ファイルを開く」を選択し、コンピュータ上のスクリプトの場所に移動します。「開く」をクリックします。ファイルがIDEのSQLエディタで自動的に開きます。
2. SQLエディタのツールバーの「接続」ドロップダウン・リストで`consult`データベースが選択されていることを確認します。
+
image::images/run-sql-insert.png[title="IDEのSQLエディタ内でスクリプトを開く"]
-エディタ内を右クリックして「文の実行」を選択するか、「SQLの実行」(image::images/run-sql-btn.png[])ボタンをクリックします。スクリプトの実行結果は「出力」ウィンドウで確認できます。
+エディタ内を右クリックして「文の実行」を選択するか、「SQLの実行」(image:images/run-sql-btn.png[])ボタンをクリックします。スクリプトの実行結果は「出力」ウィンドウで確認できます。
-3. GlassFishサーバーを再起動します。`consult`データベースに含まれる新しいデータをサーバーが再ロードしたり、キャッシュに保存できるようにするには、このステップが必要となります。そのためには、「出力」ウィンドウのGlassFishサーバーのタブ(GlassFishサーバーのタブにはサーバーのログが表示される)をクリックし、左マージンにある「サーバーを再起動」(image::images/glassfish-restart.png[])ボタンをクリックします。サーバーが停止し、再起動します。
-4. プロジェクトを再度実行し、「`Show All Consultant Items`」リンクをクリックします。リストが空でなくなっていることがわかります。
+
+[start=3]
+. GlassFishサーバーを再起動します。`consult`データベースに含まれる新しいデータをサーバーが再ロードしたり、キャッシュに保存できるようにするには、このステップが必要となります。そのためには、「出力」ウィンドウのGlassFishサーバーのタブ(GlassFishサーバーのタブにはサーバーのログが表示される)をクリックし、左マージンにある「サーバーを再起動」(image:images/glassfish-restart.png[])ボタンをクリックします。サーバーが停止し、再起動します。
+
+[start=4]
+. プロジェクトを再度実行し、「`Show All Consultant Items`」リンクをクリックします。リストが空でなくなっていることがわかります。
[.feature]
--
image:images/consultants-list-small.png[role="left", link="images/consultants-list.png"]
@@ -416,10 +434,12 @@
[.feature]
--
+
image::images/view-data-table-small.png[role="left", link="images/view-data-table.png"]
+
--
-表のセルの内側をダブルクリックして、データへのインライン変更を実行します。「レコードをコミット」(image::images/commit-records-icon.png[])アイコンをクリックし、変更内容をデータベースにコミットします。
+表のセルの内側をダブルクリックして、データへのインライン変更を実行します。「レコードをコミット」(image:images/commit-records-icon.png[])アイコンをクリックし、変更内容をデータベースにコミットします。
グラフィカル・ビューには多数の機能が用意されています。詳細は、link:../../docs/ide/database-improvements-screencast.html[+Database Support in NetBeans IDEでのデータベースのサポート+]を参照してください。
@@ -438,18 +458,28 @@
行番号を表示するには、エディタの左マージンを右クリックし、「行番号を表示」を選択します。
-2. IDEの「ファイル」ダイアログを使用し、`template.xhtml`を開きます。[Alt]-[Shift]-[O] (Macの場合は[Ctrl]-[Shift]-[O])を押して、「`template`」と入力します。
+
+[start=2]
+. IDEの「ファイル」ダイアログを使用し、`template.xhtml`を開きます。[Alt]-[Shift]-[O] (Macの場合は[Ctrl]-[Shift]-[O])を押して、「`template`」と入力します。
+
image::images/go-to-file.png[title="「ファイルに移動」ダイアログを使用してプロジェクト・ファイルを速やかに開く"]
「OK」をクリックするか、[Enter]を押します。
-3. このテンプレートは、他のファイルからタイトルと本体に内容を挿入するための`<ui:insert>`タグを適用します。`<ui:insert>`タグの上にカーソルを置いて、[Ctrl]-[Space]を押し、ドキュメント・ポップアップ・ウィンドウを呼び出します。
+
+[start=3]
+. このテンプレートは、他のファイルからタイトルと本体に内容を挿入するための`<ui:insert>`タグを適用します。`<ui:insert>`タグの上にカーソルを置いて、[Ctrl]-[Space]を押し、ドキュメント・ポップアップ・ウィンドウを呼び出します。
+
image::images/doc-popup.png[title="[Ctrl]-[Space]の押下による、Faceletsタグでのドキュメント・ポップアップの呼出し"]
JSFタグおよびその属性上で[Ctrl]-[Space]を押すと、ドキュメント・ポップアップを呼出しできます。表示されるドキュメントは、公式のlink:http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/index.html[+JSFタグ・ライブラリ・ドキュメント+]で提供されている説明から取得したものです。
-4. `List.xhtml`ファイルに戻ります([Ctrl]-[Tab]を押します)。`<ui:define>`タグは、テンプレートのタイトルと本体に適用する内容を定義するために使用されます。このパターンは、各エンティティ・クラスに対して生成される4つのFaceletsファイル(`Create.xhtml`、`Edit.xhtml`、`List.xhtml`、および`View.xhtml`)すべてに使用されます。
-5. `Bundle.properties`ファイルに含まれる、ローカライズされたメッセージに使用される任意のEL式にカーソルを置きます。[Ctrl]-[Space]を押してローカライズされたメッセージを表示します。
+
+[start=4]
+. `List.xhtml`ファイルに戻ります([Ctrl]-[Tab]を押します)。`<ui:define>`タグは、テンプレートのタイトルと本体に適用する内容を定義するために使用されます。このパターンは、各エンティティ・クラスに対して生成される4つのFaceletsファイル(`Create.xhtml`、`Edit.xhtml`、`List.xhtml`、および`View.xhtml`)すべてに使用されます。
+
+[start=5]
+. `Bundle.properties`ファイルに含まれる、ローカライズされたメッセージに使用される任意のEL式にカーソルを置きます。[Ctrl]-[Space]を押してローカライズされたメッセージを表示します。
[.feature]
--
image:images/localized-messages-small.png[role="left", link="images/localized-messages.png"]
@@ -457,26 +487,41 @@
前出のイメージに、「`List`」を解決するEL式が表示されています。これは、テンプレートのタイトルに適用され、ブラウザにレンダリングされるページから確認できます。
-6. ファイルの最下部にスクロールし、92行目にある「`Create New Consultant`」リンクのコードに移動します。この内容は次のとおりです。
+
+[start=6]
+. ファイルの最下部にスクロールし、92行目にある「`Create New Consultant`」リンクのコードに移動します。この内容は次のとおりです。
[source,java]
----
<h:commandLink action="#{consultantController.prepareCreate}" value="#{bundle.ListConsultantCreateLink}"/>
----
-7. `commandLink`の`action`属性の上で[Ctrl]-[Space]を押し、ドキュメント・ポップアップを呼び出します。
+
+[start=7]
+. `commandLink`の`action`属性の上で[Ctrl]-[Space]を押し、ドキュメント・ポップアップを呼び出します。
`action`属性は、ブラウザ内でリンクがクリックされた際のリクエストを処理するメソッドを示します。次のドキュメントが表示されます。
_ユーザーがこのコンポーネントをアクティブ化したときに起動するアプリケーション・アクションを表すメソッド式。この式は、パラメータを取得せず、オブジェクト(論理的な結果を取得するためにコールされるtoString()オブジェクト)を返すpublicメソッドに評価される必要があり、このオブジェクトはこのアプリケーションのNavigationHandlerに渡されます。_
つまり、`action`値は通常、`String`型として評価されるJSF管理対象Bean内のメソッドを参照します。この文字列は、リクエストを適切なビューに転送するため、JSFの`NavigationHandler`に使用されます。これは次の手順で確認します。
-8. カーソルを`consultantController`の上に置き、[Ctrl]-[Space]を押します。エディタのコード補完で、`consultantController`がJSF管理対象Beanであることが示されます。
+
+[start=8]
+. カーソルを`consultantController`の上に置き、[Ctrl]-[Space]を押します。エディタのコード補完で、`consultantController`がJSF管理対象Beanであることが示されます。
+
image::images/code-completion-managed-bean.png[title="JSF管理対象Beanに対して提供されるコード補完"]
-9. カーソルを`prepareCreate`に移動し、[Ctrl]-[Space]を押します。コード補完によって、`ConsultantController`管理対象Bean内に格納されたメソッドの一覧が表示されます。
+
+[start=9]
+. カーソルを`prepareCreate`に移動し、[Ctrl]-[Space]を押します。コード補完によって、`ConsultantController`管理対象Bean内に格納されたメソッドの一覧が表示されます。
+
image::images/code-completion-properties.png[title="クラス・メソッドに対して提供されるコード補完"]
-10. [Ctrl] (Macの場合は[⌘])を押し、マウスを`prepareCreate`の上に移動します。リンクが形成され、このリンクを使用して`ConsultantController`管理対象Bean内の`prepareCreate()`メソッドに直接移動できます。
+
+[start=10]
+. [Ctrl] (Macの場合は[⌘])を押し、マウスを`prepareCreate`の上に移動します。リンクが形成され、このリンクを使用して`ConsultantController`管理対象Bean内の`prepareCreate()`メソッドに直接移動できます。
+
image::images/editor-navigation.png[title="エディタのナビゲーションを使用した、ソース・コードへの速やかな移動"]
-11. リンクをクリックし、次に示す`prepareCreate()`メソッドを表示します。
+
+[start=11]
+. リンクをクリックし、次に示す`prepareCreate()`メソッドを表示します。
[source,java]
----
@@ -517,17 +562,25 @@
|StatusId |---
|===
-3. 「保存」をクリックします。これを実行すると、`StatusId`フィールドに検証エラーのフラグが表示されます。
+
+[start=3]
+. 「保存」をクリックします。これを実行すると、`StatusId`フィールドに検証エラーのフラグが表示されます。
+
image::images/create-new-consultant.png[title="フォームへのサンプル・データの入力"]
+
なぜこの状態になるのでしょうか。<<er-diagram,コンサルティング・エージェンシ・データベースのエンティティの関係図>>を再度考察するとわかります。前出の<<relationships,リレーショナル表>>にあるように、`CONSULTANT`表および`CONSULTANT_STATUS`表はnull可能ではない1対多の関係を共有しています。そのため、`CONSULTANT`表のすべてのエントリには、`CONSULTANT_STATUS`表内のエントリに対する参照が含まれている必要があります。これは、2つの表をリンクする`consultant_fk_consultant_status`外部キーによって示されています。
表に保持されている外部キーは、「サービス」ウィンドウ([Ctrl]-[5]、Macの場合は[⌘]-[5])で表の「外部キー」ノードを展開すると表示できます。
image::images/consultant-fk.png[title="「サービス」ウィンドウでの外部キー属性の調査"]
-4. 検証エラーを解決するには、「`StatusId`」ドロップダウン・リストから「`entity.ConsultantStatus[statusId=A]`」を選択します。
+
+[start=4]
+. 検証エラーを解決するには、「`StatusId`」ドロップダウン・リストから「`entity.ConsultantStatus[statusId=A]`」を選択します。
*注意:* `RecruiterId`フィールドは空白のままでかまいません。<<er-diagram,データベースのエンティティ関係図>>に示すとおり、`CONSULTANT`表と`RECRUITER`表との間には、null可能な1対多の関係があります。これは、`CONSULTANT`内のエントリは`RECRUITER`エントリと関連付ける必要がないということです。
-5. 「保存」をクリックします。consultantのエントリが正常に保存されたことを示すメッセージが表示されます。「`Show All Consultant Items`」をクリックすると、表にリストされた新規エントリが表示されます。
+
+[start=5]
+. 「保存」をクリックします。consultantのエントリが正常に保存されたことを示すメッセージが表示されます。「`Show All Consultant Items`」をクリックすると、表にリストされた新規エントリが表示されます。
一般に、生成されたFaceletsページには、次のことが発生するユーザー入力に対してエラーを表示します。
@@ -561,21 +614,35 @@
</h:selectOneMenu>
</h:panelGrid>
----
-2. `<f:selectItems>`タグに適用される`value`を確認します。`value`属性は、ドロップダウン・リストの各項目に表示するテキストを決定します。
+
+[start=2]
+. `<f:selectItems>`タグに適用される`value`を確認します。`value`属性は、ドロップダウン・リストの各項目に表示するテキストを決定します。
`itemsAvailableSelectOne`上で[Ctrl]-[Space]を押します。エディタのコード補完に、`ConsultantStatusController`の`getItemsAvailableSelectOne()`メソッドが`SelectItem`オブジェクトの配列を返すことが示されます。
+
image::images/code-completion-returned-object.png[title="メソッドに対して返されるクラスが表示されたコード補完"]
-3. [Ctrl] (Macの場合は[⌘])を押し、マウスを`itemsAvailableSelectOne`の上に移動します。リンクが形成され、このリンクを使用して`ConsultantStatus`エンティティのソース・コード内の`getItemsAvailableSelectOne()`メソッドに直接移動できます。リンクをクリックします。
-4. メソッド署名内の`SelectItem[]`戻り値の上にカーソルを置き、[Ctrl]-[Space]を押してドキュメント・ポップアップを呼び出します。
+
+[start=3]
+. [Ctrl] (Macの場合は[⌘])を押し、マウスを`itemsAvailableSelectOne`の上に移動します。リンクが形成され、このリンクを使用して`ConsultantStatus`エンティティのソース・コード内の`getItemsAvailableSelectOne()`メソッドに直接移動できます。リンクをクリックします。
+
+[start=4]
+. メソッド署名内の`SelectItem[]`戻り値の上にカーソルを置き、[Ctrl]-[Space]を押してドキュメント・ポップアップを呼び出します。
+
image::images/documentation-select-item.png[title="[Ctrl]-[Space]の押下によるドキュメント・サポートの呼出し"]
-ドキュメント・ウィンドウの「Webブラウザ」(image::images/web-browser-icon.png[])アイコンをクリックし、外部WebブラウザでJavadocを開きます。
+ドキュメント・ウィンドウの「Webブラウザ」(image:images/web-browser-icon.png[])アイコンをクリックし、外部WebブラウザでJavadocを開きます。
表示されるように、`SelectItem`クラスはJSFフレームワークに属しています。このドキュメントにあるように、`UISelectOne`コンポーネントは、前出の<<markup,ステップ1>>で調べたマークアップからの`<h:selectOneMenu>`タグによって表現されます。
-5. [Ctrl] (Macの場合は[⌘])を押し、マウスを`findAll()`の上に移動します。ポップアップが表示され、メソッド署名が示されます。
+
+[start=5]
+. [Ctrl] (Macの場合は[⌘])を押し、マウスを`findAll()`の上に移動します。ポップアップが表示され、メソッド署名が示されます。
+
image::images/method-signature.png[title="エディタでのメソッド署名のポップアップの表示"]
+
ここで、`ejbFacade.findAll()`が`ConsultantStatus`オブジェクトの`List`を返すことが確認できます。
-6. `JsfUtil.getSelectItems`に移動します。マウスを`getSelectItems`の上に移動し、[Ctrl] (Macの場合は[⌘])を押し、表示されるリンクをクリックします。
+
+[start=6]
+. `JsfUtil.getSelectItems`に移動します。マウスを`getSelectItems`の上に移動し、[Ctrl] (Macの場合は[⌘])を押し、表示されるリンクをクリックします。
*注意:* `JsfUtil`は、<<jsfPagesEntityClasses,エンティティからのJSFページ・クラス・ウィザード>>の完了時に生成されたユーティリティ・クラスの1つであることを思い出してください。
@@ -603,7 +670,9 @@
これで、ドロップダウン・リストに項目を表示するときにブラウザにレンダリングされるのがエンティティの`toString()`メソッドであることを確認したので、`ConsultantStatus``toString()`メソッドを変更します。
-7. エディタで`ConsultantStatus`エンティティ・クラスを開きます。`statusId`および`description`を返すように、`toString`メソッドを変更します。これらは、`CONSULTANT_STATUS`表の2つの列に対応するエンティティ・プロパティです。
+
+[start=7]
+. エディタで`ConsultantStatus`エンティティ・クラスを開きます。`statusId`および`description`を返すように、`toString`メソッドを変更します。これらは、`CONSULTANT_STATUS`表の2つの列に対応するエンティティ・プロパティです。
[source,java]
----
@@ -612,7 +681,9 @@
return *statusId + ", " + description;*
}
----
-8. プロジェクトを再実行します。ブラウザに開始ページが表示されたら、「`Show All Consultant Items`」リンクをクリックし、「`Create New Consultant`」をクリックします。
+
+[start=8]
+. プロジェクトを再実行します。ブラウザに開始ページが表示されたら、「`Show All Consultant Items`」リンクをクリックし、「`Create New Consultant`」をクリックします。
「`StatusId`」ドロップダウン・リストを確認します。これで、データベースの`CONSULTANT_STATUS`表に格納されている、あるレコードについてのステータスIDと説明が表示されるようになりました。
@@ -685,27 +756,46 @@
JDBCリソースと接続プールを作成する際は、`glassfish-resources.xml`で指定されているプロパティ値を使用します。
-2. 「サービス」ウィンドウで「GlassFish Server」ノードを右クリックし、ポップアップ・メニューで「ドメイン管理コンソールを開く」を選択して、ブラウザでGlassFishコンソールを開きます。
-3. GlassFishコンソールの共通タスク・ナビゲーション・パネルで、*「JDBC」*ノードおよび*「JDBCリソース」*および*「JDBC接続プール」*ノードを展開します。
+
+[start=2]
+. 「サービス」ウィンドウで「GlassFish Server」ノードを右クリックし、ポップアップ・メニューで「ドメイン管理コンソールを開く」を選択して、ブラウザでGlassFishコンソールを開きます。
+
+[start=3]
+. GlassFishコンソールの共通タスク・ナビゲーション・パネルで、*「JDBC」*ノードおよび*「JDBCリソース」*および*「JDBC接続プール」*ノードを展開します。
[.feature]
--
+
image::images/gf-admin-console-sm.png[role="left", link="images/gf-admin-console-lg.png"]
+
--
現在サーバーに登録されているDBCリソースを確認できます。`jdbc/consult`と`consultPool`が共通タスク・ナビゲーション・パネルの「JDBC」ノードの下に表示されていない場合は、これらを作成する必要があります。一部のJDBCリソースは、サーバーのインストール時にデフォルトで作成されており、これらはサブノードとして表示されます。
-4. *「JDBC接続プール」*ノードをクリックし、新規のJDBC接続プール・ペインで「新規」をクリックします。
+
+[start=4]
+. *「JDBC接続プール」*ノードをクリックし、新規のJDBC接続プール・ペインで「新規」をクリックします。
+
image::images/gf-new-jdbc-pool1.png[title="GlassFish管理コンソールの新規のJDBC接続プール・ペイン"]
-5. プール名として*consultPool*を入力し、リソース・タイプとして*javax.sql.ConnectionPoolDataSource*を選択し、データベース・ドライバ・ベンダーとして*MySql*を選択します。「次」をクリックします。
-6. 手順2で、*URL*、*username*および*password*プロパティの値を検索して指定します。「終了」をクリックします。
+
+[start=5]
+. プール名として*consultPool*を入力し、リソース・タイプとして*javax.sql.ConnectionPoolDataSource*を選択し、データベース・ドライバ・ベンダーとして*MySql*を選択します。「次」をクリックします。
+
+[start=6]
+. 手順2で、*URL*、*username*および*password*プロパティの値を検索して指定します。「終了」をクリックします。
+
image::images/gf-new-jdbc-pool2.png[title="GlassFish管理コンソールの新規のJDBC接続プール・パネル"]
`glassfish-resources.xml`で、プロパティの値を検索できます。
「終了」をクリックするとサーバー上に新規の接続プールが作成され、「JDBC接続プール」ノードの下にその接続プールのノードが表示されます。
-7. 共通タスク・ナビゲーション・パネルで*「JDBCリソース」*をクリックして、「新規」をクリックします。
-8. JNDI名に*jdbc/consult*と入力し、「プール名」ドロップダウン・リストで*consultPool*を選択します。「OK」をクリックします。
+
+[start=7]
+. 共通タスク・ナビゲーション・パネルで*「JDBCリソース」*をクリックして、「新規」をクリックします。
+
+[start=8]
+. JNDI名に*jdbc/consult*と入力し、「プール名」ドロップダウン・リストで*consultPool*を選択します。「OK」をクリックします。
+
image::images/gf-new-jdbc-resource.png[title="GlassFish管理コンソールの新規のJDBCリソース・ペイン"]
「OK」をクリックするとサーバー上に新規のJDBCリソースが作成され、「JDBCリソース」ノードの下にそのリソースのノードが表示されます。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_pt_BR.asciidoc
index 58b6c0b..b88e69a 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_pt_BR.asciidoc
@@ -118,8 +118,11 @@
4. Digite *consult* como o Nome do Banco de Dados na caixa de diálogo Criar Banco de Dados MySQL. Clique em OK. Um novo nó aparecerá sob o nó Bancos de Dados (`jdbc:mysql://localhost:3306/consult [raiz no esquema Default]`).
5. Clique com o botão direito do mouse no novo nó e selecione Conectar.
6. Selecione Arquivo > Abrir Arquivo, no menu principal e vá até o arquivo extraído `mysql_create_consult.sql`. Clique em Abrir. O arquivo abre automaticamente no editor SQL.
+
image::images/run-sql-script.png[title="Abrir arquivos SQL no editor do IDE"]
-7. Certifique-se de que o banco de dados `consult` esteja selecionado na lista drop-down Conexão da barra de ferramentas do editor SQL. Em seguida, clique no botão ( image::images/run-sql-btn.png[] ) Executar SQL.
+
+[start=7]
+. Certifique-se de que o banco de dados `consult` esteja selecionado na lista drop-down Conexão da barra de ferramentas do editor SQL. Em seguida, clique no botão ( image:images/run-sql-btn.png[] ) Executar SQL.
Quando você clica em Executar SQL, a saída a seguir é exibida na janela de Saída.
@@ -210,12 +213,22 @@
1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto ` ConsultingAgency` e selecione Novo > Classes de Entidade do Banco de Dados. (Se esta opção não estiver na lista, escolha Outros. Em seguida, no assistente de Arquivo, selecione a categoria Persistência e, depois, Classes de Entidade do Banco de Dados.)
2. Selecione Nova Fonte de Dados na lista drop-down Fonte de Dados para abrir a caixa de diálogo Criar Fonte de Dados.
3. Digite `jdbc/consult` como o Nome da JNDI e selecione a conexão `jdbc:mysql://localhost:3306/consult` como a Conexão do Banco de Dados.
+
image::images/create-datasource.png[title="Especificar um nome e uma conexão de banco de dados JNDI para criar uma fonte de dados"]
-4. Clique em OK para fechar a caixa de diálogo e retornar ao assistente. As tabelas no banco de dados `consult` serão exibidas na lista de conteúdo Tabelas Disponíveis.
-5. Clique no botão Adicionar Tudo para selecionar todas as tabelas contidas no banco de dados. Clique em Próximo.
+
+[start=4]
+. Clique em OK para fechar a caixa de diálogo e retornar ao assistente. As tabelas no banco de dados `consult` serão exibidas na lista de conteúdo Tabelas Disponíveis.
+
+[start=5]
+. Clique no botão Adicionar Tudo para selecionar todas as tabelas contidas no banco de dados. Clique em Próximo.
+
image::images/new-entities-wizard.png[]
-6. Digite `jpa.entities` como o nome do Pacote.
-7. Verifique se as caixas de seleção para gerar as consultas nomeadas e criar uma unidade persistente estão marcadas. Clique em Finalizar.
+
+[start=6]
+. Digite `jpa.entities` como o nome do Pacote.
+
+[start=7]
+. Verifique se as caixas de seleção para gerar as consultas nomeadas e criar uma unidade persistente estão marcadas. Clique em Finalizar.
Quando você clicar em Finalizar, o IDE gerará as classes de entidade no pacote `jpa.entities` do projeto.
@@ -253,19 +266,34 @@
A caixa Classes de Entidade Disponíveis lista as sete classes de entidade contidas no projeto. A caixa não lista as classes incorporadas (`ClientPK.java` e `ProjectPK.java`).
-2. Clique em Adicionar Tudo para mover todas as classes para a caixa Classes de Entidade Selecionadas.
+
+[start=2]
+. Clique em Adicionar Tudo para mover todas as classes para a caixa Classes de Entidade Selecionadas.
+
image::images/newjsf-wizard.png[title="O assistente de Novas Páginas JSF de Classes de Entidade exibe todas as classes de entidade contidas no projeto"]
+
Clique em Próximo.
-3. Na etapa 3 do assistente, Gerar Classes e Páginas JSF, digite `jpa.session` no Pacote de Bean de Sessão JPA.
-4. Digite `jsf` para o Pacote de Classes JSF.
-5. Digite '`/resources/Bundle`' no campo Nome do Pacote de Localização. Isso gerará um pacote com o nome `resources` no qual o arquivo `Bundle.properties` residirá. (Se deixá-lo em branco, o conjunto de propriedades será criado no pacote default do projeto.)
+
+[start=3]
+. Na etapa 3 do assistente, Gerar Classes e Páginas JSF, digite `jpa.session` no Pacote de Bean de Sessão JPA.
+
+[start=4]
+. Digite `jsf` para o Pacote de Classes JSF.
+
+[start=5]
+. Digite '`/resources/Bundle`' no campo Nome do Pacote de Localização. Isso gerará um pacote com o nome `resources` no qual o arquivo `Bundle.properties` residirá. (Se deixá-lo em branco, o conjunto de propriedades será criado no pacote default do projeto.)
+
image::images/newjsf-wizard2.png[title="Especificar pacote e nomes de pastas para os arquivos gerados"]
Para que o IDE se ajuste melhor às convenções do projeto, você pode personalizar os arquivos gerados pelo assistente. Clique no link Personalizar Modelo para modificar os modelos de arquivo utilizados pelo assistente.
+
image::images/customize-template.png[title="Personalizar modelos de arquivos gerados pelo assistente"]
+
Em geral, você pode acessar e fazer alterações em todos os modelos mantidos pelo IDE utilizando o Gerenciador de Modelos (Ferramentas > Modelos).
-6. Clique em Finalizar. O IDE gera os beans de sessão sem estado no pacote `jpa.session`, e o escopo de sessão e beans gerenciados com JSF no pacote `jsf`. Cada bean de sessão sem estado manipula as operações da classe de entidade correspondente, incluindo a criação, edição e destruição de instâncias da classe de entidade por meio da API de Persistência Java. Cada Bean gerenciado pelo JSF implementa a interface `javax.faces.convert.Converter` e realiza as tarefas de conversão das instâncias da classe de entidade correspondente para objetos `String` e vice-versa.
+
+[start=6]
+. Clique em Finalizar. O IDE gera os beans de sessão sem estado no pacote `jpa.session`, e o escopo de sessão e beans gerenciados com JSF no pacote `jsf`. Cada bean de sessão sem estado manipula as operações da classe de entidade correspondente, incluindo a criação, edição e destruição de instâncias da classe de entidade por meio da API de Persistência Java. Cada Bean gerenciado pelo JSF implementa a interface `javax.faces.convert.Converter` e realiza as tarefas de conversão das instâncias da classe de entidade correspondente para objetos `String` e vice-versa.
Se você expandir o nó Páginas Web, você poderá ver que o IDE gerou uma pasta para cada uma das classes de entidade. Cada pasta contém os arquivos `Create.xhtml`, `Edit.xhtml`, `List.xhtml` e `View.xhtml`. O IDE também modificou o arquivo `index.xhtml` inserindo links em cada uma das páginas `List.xhtml`.
@@ -325,7 +353,7 @@
[[completedProject]]
=== Examinando o Projeto Concluído
-1. Para executar o projeto, clique com o botão direito do mouse no nó do projeto, na janela Projetos, e selecione Executar ou clique no botão ( image::images/run-project-btn.png[] ) Executar Projeto na barra de ferramentas principal.
+1. Para executar o projeto, clique com o botão direito do mouse no nó do projeto, na janela Projetos, e selecione Executar ou clique no botão ( image:images/run-project-btn.png[] ) Executar Projeto na barra de ferramentas principal.
Quando a página de boas-vindas da aplicação é exibida, aparece uma lista de links que permite exibir as entradas contidas em cada uma das tabelas do banco de dados.
@@ -362,8 +390,12 @@
</h:form>
</h:body>
----
-2. Clique no link '`Mostrar todos os Itens do Consultor`'. Ao observar o código acima, você pode ver que a página de destino é `/consultant/List.xhtml`. (No JSF 2.x, a extensão do arquivo é deduzida devido à navegação implícita.)
+
+[start=2]
+. Clique no link '`Mostrar todos os Itens do Consultor`'. Ao observar o código acima, você pode ver que a página de destino é `/consultant/List.xhtml`. (No JSF 2.x, a extensão do arquivo é deduzida devido à navegação implícita.)
+
image::images/empty-consultants-list.png[title="A tabela Consultores está vazia no momento"]
+
Atualmente, o banco de dados não contém dados de amostra. É possível adicionar dados manualmente clicando no link '`Criar Novo Consultor`' e utilizando o Web form fornecido. A página `/consultant/Create.xhtml` é carregada para que seja exibida. Você também pode executar um script SQL no IDE para preencher as tabelas com os dados de amostra. As subseções a seguir exploram ambas as opções.
Você pode clicar no link do índice para voltar à lista de links da página de boas-vindas. Os links oferecem uma view dos dados contidos em cada tabela do banco de dados e carrega o arquivo `List.xhtml` de cada pasta de entidade para que seja exibido. Conforme será demonstrado posteriormente, após adicionar os dados às tabelas, outros links serão exibidos em cada entrada permitindo que você exiba (`View.xhtml`), edite (`Edit.xhmtl`) e destrua os dados de um único registro da tabela.
@@ -380,12 +412,17 @@
1. Selecione Arquivo > Abrir Arquivo no menu principal e, em seguida, vá até o local do script no seu computador. Clique em Abrir. O arquivo é aberto automaticamente no editor SQL do IDE.
2. Certifique-se de que o banco de dados `consult` esteja selecionado na lista drop-down Conexão da barra de ferramentas do editor SQL.
+
image::images/run-sql-insert.png[title="Abrir o script no editor SQL do IDE"]
-Clique com o botão direito do mouse no editor e selecione Executar Instrução ou clique no botão ( image::images/run-sql-btn.png[] ) Executar SQL. É possível ver o resultado da execução do script na janela de Saída.
+Clique com o botão direito do mouse no editor e selecione Executar Instrução ou clique no botão ( image:images/run-sql-btn.png[] ) Executar SQL. É possível ver o resultado da execução do script na janela de Saída.
-3. Reinicie o GlassFish Server. Essa é uma etapa necessária para ativar o servidor e recarregar e armazenar no cache os novos dados contidos no banco de dados `consult`. Para isso, clique na guia do GlassFish Server na janela de Saída (A guia do GlassFish Server exibirá o log do servidor.), em seguida, clique no botão ( image::images/glassfish-restart.png[] ) Reiniciar Servidor na margem esquerda. O servidor para e, em seguida, reinicia.
-4. Execute o projeto novamente e clique no link '`Mostrar Todos os Itens do Consultor`'. Você verá que a lista não está mais vazia.
+
+[start=3]
+. Reinicie o GlassFish Server. Essa é uma etapa necessária para ativar o servidor e recarregar e armazenar no cache os novos dados contidos no banco de dados `consult`. Para isso, clique na guia do GlassFish Server na janela de Saída (A guia do GlassFish Server exibirá o log do servidor.), em seguida, clique no botão ( image:images/glassfish-restart.png[] ) Reiniciar Servidor na margem esquerda. O servidor para e, em seguida, reinicia.
+
+[start=4]
+. Execute o projeto novamente e clique no link '`Mostrar Todos os Itens do Consultor`'. Você verá que a lista não está mais vazia.
[.feature]
--
image:images/consultants-list-small.png[role="left", link="images/consultants-list.png"]
@@ -402,10 +439,12 @@
[.feature]
--
+
image::images/view-data-table-small.png[role="left", link="images/view-data-table.png"]
+
--
-Clique duas vezes nas células da tabela para efetuar modificações diretamente nos dados. Clique no ícone ( image::images/commit-records-icon.png[] ) Confirmar Registros para confirmar as alterações feitas no banco de dados.
+Clique duas vezes nas células da tabela para efetuar modificações diretamente nos dados. Clique no ícone ( image:images/commit-records-icon.png[] ) Confirmar Registros para confirmar as alterações feitas no banco de dados.
A view gráfica oferece mais funcionalidade. Consulte link:../../docs/ide/database-improvements-screencast.html[+Suporte ao Banco de Dados no NetBeans IDE+] para obter mais informações.
@@ -424,18 +463,28 @@
Para exibir os números das linhas, clique com o botão direito do mouse na margem esquerda do editor e selecione Mostrar Números de Linhas.
-2. Utilize a caixa de diálogo Ir para Arquivo do IDE para abrir o arquivo `template.xhtml`. Pressione Alt-Shift-O (Ctrl-Shift-O no Mac) e, em seguida, digite `modelo`.
+
+[start=2]
+. Utilize a caixa de diálogo Ir para Arquivo do IDE para abrir o arquivo `template.xhtml`. Pressione Alt-Shift-O (Ctrl-Shift-O no Mac) e, em seguida, digite `modelo`.
+
image::images/go-to-file.png[title="Utilizar a caixa de diálogo Ir para Arquivo para abrir rapidamente arquivos do projeto"]
Clique em OK (ou pressione Enter).
-3. O modelo aplica as tags `<ui:insert>` para inserir o conteúdo de outros arquivos no título e corpo. Coloque o cursor na tag `<ui:insert>` e pressione Ctrl-Espaço para chamar uma janela pop-up de documentação.
+
+[start=3]
+. O modelo aplica as tags `<ui:insert>` para inserir o conteúdo de outros arquivos no título e corpo. Coloque o cursor na tag `<ui:insert>` e pressione Ctrl-Espaço para chamar uma janela pop-up de documentação.
+
image::images/doc-popup.png[title="Pressione Ctrl-Espaço para chamar um pop-up de documentação nas tags de Facelets"]
É possível pressionar Ctrl-Espaço nas tags JSF e seus atributos para chamar o pop-up da documentação. A documentação exibida é obtida das descrições fornecidas na link:http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/index.html[+Documentação da Biblioteca de Tags JSF+] Oficial.
-4. Volte para o arquivo `List.xhtml` (pressione Ctrl-Tab). As tags `<ui:define>` são utilizadas para definir o conteúdo que será aplicado ao título e ao corpo do modelo. Esse padrão é utilizado nos quatro arquivos de Facelets (`Create.xhtml`, `Edit.xhtml`, `List.xhtml` e `View.xhtml`) gerados para cada classe de entidade.
-5. Coloque seu cursor em qualquer uma das expressões EL utilizadas nas mensagens localizadas contidas no arquivo `Bundle.properties`. Pressione Ctrl-Espaço para exibir a mensagem localizada.
+
+[start=4]
+. Volte para o arquivo `List.xhtml` (pressione Ctrl-Tab). As tags `<ui:define>` são utilizadas para definir o conteúdo que será aplicado ao título e ao corpo do modelo. Esse padrão é utilizado nos quatro arquivos de Facelets (`Create.xhtml`, `Edit.xhtml`, `List.xhtml` e `View.xhtml`) gerados para cada classe de entidade.
+
+[start=5]
+. Coloque seu cursor em qualquer uma das expressões EL utilizadas nas mensagens localizadas contidas no arquivo `Bundle.properties`. Pressione Ctrl-Espaço para exibir a mensagem localizada.
[.feature]
--
image:images/localized-messages-small.png[role="left", link="images/localized-messages.png"]
@@ -443,26 +492,41 @@
Na imagem acima, você pode ver que a expressão EL é determinada como '`List`', que é aplicada ao título do modelo e pode ser verificada na página renderizada no browser.
-6. Navegue até a parte inferior do arquivo e localize o código do link `Criar novo consultor` (Linha 92). Trata-se do seguinte:
+
+[start=6]
+. Navegue até a parte inferior do arquivo e localize o código do link `Criar novo consultor` (Linha 92). Trata-se do seguinte:
[source,java]
----
<h:commandLink action="#{consultantController.prepareCreate}" value="#{bundle.ListConsultantCreateLink}"/>
----
-7. Pressione Ctrl-Espaço no atributo `action` do `commandLink` para chamar a janela pop-up da documentação.
+
+[start=7]
+. Pressione Ctrl-Espaço no atributo `action` do `commandLink` para chamar a janela pop-up da documentação.
O atributo `ação` indica o método que manipula a solicitação quando o link é clicado no browser. A documentação a seguir será fornecida:
_MethodExpression, que representa a ação da aplicação a qual será chamada quando este componente for ativado pelo usuário. A expressão deve ser interpretada como um método público que não toma nenhum parâmetro e retorna um Object (o toString() do qual é chamado para gerar o resultado lógico) que será passado para o NavigationHandler desta aplicação._
Em outras palavras, o valor de `action` se refere normalmente a um método em um bean gerenciado pelo JSF que é avaliado como uma `String`. Então, a string é utilizada pelo `NavigationHandler` do JSF para encaminhar a solicitação para a view apropriada. É possível verificar isso nas etapas a seguir.
-8. Coloque o cursor no `consultantController` e pressione Ctrl-Espaço. A funcionalidade autocompletar código do editor indica que `consultantController` é um Bean gerenciado pelo JSF.
+
+[start=8]
+. Coloque o cursor no `consultantController` e pressione Ctrl-Espaço. A funcionalidade autocompletar código do editor indica que `consultantController` é um Bean gerenciado pelo JSF.
+
image::images/code-completion-managed-bean.png[title="A funcionalidade autocompletar código é fornecida para Beans gerenciados pelo JSF"]
-9. Mova o cursor para `prepareCreate` e pressione Ctrl-Espaço. A funcionalidade autocompletar código lista os métodos contidos no Bean gerenciado `ConsultantController`.
+
+[start=9]
+. Mova o cursor para `prepareCreate` e pressione Ctrl-Espaço. A funcionalidade autocompletar código lista os métodos contidos no Bean gerenciado `ConsultantController`.
+
image::images/code-completion-properties.png[title="A funcionalidade autocompletar código é fornecida para métodos de classe"]
-10. Pressione Ctrl (&#8984 no Mac) e, em seguida mova o mouse sobre `prepareCreate`. É formado um link, que permite ir diretamente para o método `prepareCreate()` no Bean gerenciado `ConsultantController`.
+
+[start=10]
+. Pressione Ctrl (&#8984 no Mac) e, em seguida mova o mouse sobre `prepareCreate`. É formado um link, que permite ir diretamente para o método `prepareCreate()` no Bean gerenciado `ConsultantController`.
+
image::images/editor-navigation.png[title="Utilizar a navegação do editor para ir rapidamente até o código-fonte"]
-11. Clique no link e exiba o método `prepareCreate()` (exibido a seguir).
+
+[start=11]
+. Clique no link e exiba o método `prepareCreate()` (exibido a seguir).
[source,java]
----
@@ -503,17 +567,25 @@
|StatusId |---
|===
-3. Clique em Salvar. Quando você fizer isso, um erro de validação será sinalizado no campo `StatusId`.
+
+[start=3]
+. Clique em Salvar. Quando você fizer isso, um erro de validação será sinalizado no campo `StatusId`.
+
image::images/create-new-consultant.png[title="Informar os dados de amostra no form"]
+
Por que aconteceu isso? Examine novamente o <<er-diagram,diagrama de relacionamento com entidades do banco de dados da Agência de Consultoria>>. Conforme apresentado na <<relationships,tabela de relacionamentos>> acima, as tabelas `CONSULTANT` e `CONSULTANT_STATUS` compartilham um relacionamento que não pode ser nulo, um para muitos. Portanto, cada entrada da tabela `CONSULTANT` deve conter uma referência a uma entrada na tabela `CONSULTANT_STATUS`. Isso é indicado pela chave estrangeira `consultant_fk_consultant_status` que vincula as duas tabelas.
É possível exibir as chaves estrangeiras contidas nas tabelas expandindo o nó Chaves Estrangeiras da tabela na janela Serviços (Ctrl-5; &#8984-5 no Mac).
image::images/consultant-fk.png[title="Examinar os atributos da chave estrangeira na janela Serviços"]
-4. Para solucionar o erro de validação, selecione `entity.ConsultantStatus[statusId=A]` na lista drop-down `StatusId`.
+
+[start=4]
+. Para solucionar o erro de validação, selecione `entity.ConsultantStatus[statusId=A]` na lista drop-down `StatusId`.
*Observação: *Você pode deixar o campo `RecruiterId` em branco. Conforme indicado no <<er-diagram,diagrama de relacionamento com as entidades do banco de dados>>, há um relacionamento que pode ser nulo, um para muitos entre as tabelas `CONSULTANT` e `RECRUITER`, indicando que as entradas em `CONSULTANT` não precisam estar associadas a uma entrada de `RECRUITER`.
-5. Clique em Salvar. Será exibida uma mensagem indicando que a entrada do consultor foi salva com êxito. Se você clicar em `Exibir Todos os Itens do Consultor`, você verá a nova entrada listada na tabela.
+
+[start=5]
+. Clique em Salvar. Será exibida uma mensagem indicando que a entrada do consultor foi salva com êxito. Se você clicar em `Exibir Todos os Itens do Consultor`, você verá a nova entrada listada na tabela.
Em geral, as páginas de Facelets geradas produzem erros para entradas do usuário que introduz:
@@ -547,21 +619,35 @@
</h:selectOneMenu>
</h:panelGrid>
----
-2. Examine o `value` aplicado à tag `<f:selectItems>`. O atributo `value` determina o texto exibido para cada item na lista drop-down.
+
+[start=2]
+. Examine o `value` aplicado à tag `<f:selectItems>`. O atributo `value` determina o texto exibido para cada item na lista drop-down.
Pressione Ctrl-Espaço em `itemsAvailableSelectOne`. A funcionalidade autocompletar código do editor indica que o método `getItemsAvailableSelectOne()` do `ConsultantStatusController` retorna um array de objetos `SelectItem`.
+
image::images/code-completion-returned-object.png[title="A funcionalidade autocompletar código exibe as classes retornadas para os métodos"]
-3. Pressione Ctrl (&#8984 no Mac) e, em seguida, mova o mouse sobre `itemsAvailableSelectOne`. É formado um link que permite ir diretamente para o método `getItemsAvailableSelectOne()` no código-fonte da entidade `ConsultantStatus`. Clique neste link.
-4. Coloque o cursor sobre o valor de retorno `SelectItem[]` na assinatura do método e pressione Ctrl-Espaço para chamar a janela pop-up da documentação.
+
+[start=3]
+. Pressione Ctrl (&#8984 no Mac) e, em seguida, mova o mouse sobre `itemsAvailableSelectOne`. É formado um link que permite ir diretamente para o método `getItemsAvailableSelectOne()` no código-fonte da entidade `ConsultantStatus`. Clique neste link.
+
+[start=4]
+. Coloque o cursor sobre o valor de retorno `SelectItem[]` na assinatura do método e pressione Ctrl-Espaço para chamar a janela pop-up da documentação.
+
image::images/documentation-select-item.png[title="Pressione Ctrl-Espaço para chamar o suporte à documentação"]
-Clique no ícone ( image::images/web-browser-icon.png[] ) Web browser na janela da documentação para abrir o Javadoc em um Web browser externo.
+Clique no ícone ( image:images/web-browser-icon.png[] ) Web browser na janela da documentação para abrir o Javadoc em um Web browser externo.
Como você pode ver, a classe `SelectItem` pertence ao framework JSF. O componente `UISelectOne`, conforme mencionado na documentação, é representado pela tag `<h:selectOneMenu>` da marcação que você examinou na <<markup,Etapa 1>> acima.
-5. Pressione Ctrl (&#8984 no Mac) e, em seguida, mova o mouse sobre `findAll()`. Uma janela pop-up será exibida com a assinatura do método.
+
+[start=5]
+. Pressione Ctrl (&#8984 no Mac) e, em seguida, mova o mouse sobre `findAll()`. Uma janela pop-up será exibida com a assinatura do método.
+
image::images/method-signature.png[title="Exibir pop-ups das assinaturas do método no editor"]
+
É possível observar que aqui o `ejbFacade.findAll()` retorna uma `Lista` de objetos `ConsultantStatus`.
-6. Vá para `JsfUtil.getSelectItems`. Coloque o mouse sobre `getSelectItems` e pressione Ctrl (&#8984 no Mac), a seguir, clique no link exibido.
+
+[start=6]
+. Vá para `JsfUtil.getSelectItems`. Coloque o mouse sobre `getSelectItems` e pressione Ctrl (&#8984 no Mac), a seguir, clique no link exibido.
*Observação: *Lembre-se de que `JsfUtil` é uma das classes de utilitário geradas ao concluir o <<jsfPagesEntityClasses,assistente de Páginas JSF de Classes de Entidade>>.
@@ -589,7 +675,9 @@
Agora que você verificou que o método `toString()` da entidade é o método renderizado no browser ao exibir os itens em uma lista drop-down, modifique o método `toString()` do `ConsultantStatus`.
-7. Abra a classe de entidade `ConsultantStatus` no editor. Modifique o método `toString` para retornar `statusId` e `description`. Trata-se das propriedades da entidade que correspondem às duas colunas da tabela `CONSULTANT_STATUS`.
+
+[start=7]
+. Abra a classe de entidade `ConsultantStatus` no editor. Modifique o método `toString` para retornar `statusId` e `description`. Trata-se das propriedades da entidade que correspondem às duas colunas da tabela `CONSULTANT_STATUS`.
[source,java]
----
@@ -598,7 +686,9 @@
return *statusId + ", " + description;*
}
----
-8. Execute o projeto novamente. Quando o browser exibir a página de boas-vindas, clique no link `Mostrar Todos os Itens do Consultor` e, em seguida, em `Criar Novo Consultor`.
+
+[start=8]
+. Execute o projeto novamente. Quando o browser exibir a página de boas-vindas, clique no link `Mostrar Todos os Itens do Consultor` e, em seguida, em `Criar Novo Consultor`.
Inspecione a lista drop-down `StatusId`. Você verá que agora ela exibe o ID de status e a descrição do registro contido na tabela `CONSULTANT_STATUS` do banco de dados.
@@ -671,27 +761,46 @@
Use os valores de propriedade especificados em `glassfish-resources.xml` ao criar o recurso JDBC e o pool de conexões.
-2. Clique com o botão direito no nó GlassFish Server, na janela Serviços, e escolha Abrir Console Admin do Domínio no menu pop-up para abrir a Console do GlassFish no browser.
-3. No painel de navegação Tarefas Comuns da Console do GlassFish, expanda o nó *JDBC* e os nós *Recursos JDBC* e *Pool de Conexões JDBC*.
+
+[start=2]
+. Clique com o botão direito no nó GlassFish Server, na janela Serviços, e escolha Abrir Console Admin do Domínio no menu pop-up para abrir a Console do GlassFish no browser.
+
+[start=3]
+. No painel de navegação Tarefas Comuns da Console do GlassFish, expanda o nó *JDBC* e os nós *Recursos JDBC* e *Pool de Conexões JDBC*.
[.feature]
--
+
image::images/gf-admin-console-sm.png[role="left", link="images/gf-admin-console-lg.png"]
+
--
Você pode ver os recursos JDBC que estão registrados atualmente no servidor. Será necessário criar `jdbc/consult` e `consultPool` se não estiverem listados sob o nó JDBC no painel de navegação Tarefas Comuns. Alguns recursos JDBC foram criados por padrão quando você instalou o servidor e são exibidos como subnós.
-4. Clique no nó *Pools de Conexões JDBC* e clique em Novo no painel Novo Pool de Conexões JDBC.
+
+[start=4]
+. Clique no nó *Pools de Conexões JDBC* e clique em Novo no painel Novo Pool de Conexões JDBC.
+
image::images/gf-new-jdbc-pool1.png[title="Painel Novo Pool de Conexões JDBC na Console Admin do GlassFish"]
-5. Digite *consultPool* como Nome do Pool, selecione *javax.sql.ConnectionPoolDataSource* como Tipo de Recurso e selecione *MySql* como Fornecedor do Driver de Banco de Dados. Clique em Próximo.
-6. Na Etapa 2, localize e especifique os valores das propriedades *URL*, *nome do usuário* e *senha*. Clique em Finalizar.
+
+[start=5]
+. Digite *consultPool* como Nome do Pool, selecione *javax.sql.ConnectionPoolDataSource* como Tipo de Recurso e selecione *MySql* como Fornecedor do Driver de Banco de Dados. Clique em Próximo.
+
+[start=6]
+. Na Etapa 2, localize e especifique os valores das propriedades *URL*, *nome do usuário* e *senha*. Clique em Finalizar.
+
image::images/gf-new-jdbc-pool2.png[title="Painel Novo Pool de Conexões JDBC na Console Admin do GlassFish"]
Os valores das propriedades se encontram em `glassfish-resources.xml`.
O novo pool de conexões é criado no servidor quando você clica em Concluir e um nó do pool de conexões é exibido sob o nó Pools de Conexões JDBC.
-7. Clique no nó *Recursos JDBC* no painel de navegação Tarefas Comuns e clique em Novo.
-8. Digite *jdbc/consult* como Nome da JNDI e selecione *consultPool* na lista drop-down Nome do Pool. Clique em OK.
+
+[start=7]
+. Clique no nó *Recursos JDBC* no painel de navegação Tarefas Comuns e clique em Novo.
+
+[start=8]
+. Digite *jdbc/consult* como Nome da JNDI e selecione *consultPool* na lista drop-down Nome do Pool. Clique em OK.
+
image::images/gf-new-jdbc-resource.png[title="Painel Novo Recurso JDBC na Console Admin do GlassFish"]
O novo recurso JDBC é criado no servidor quando você clica em OK e um nó para o recurso é exibido sob o nó Recursos JDBC.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_ru.asciidoc
index adaf9ea..22ac512 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_ru.asciidoc
@@ -37,11 +37,6 @@
В среде IDE предоставляются два мастера для создания всех строк кода приложения. Первый – <<generateEntity,мастер создания классов сущностей из базы данных>>, позволяющий создавать классы сущностей из предоставленной базы данных. После создания классов сущностей используйте <<jsfPagesEntityClasses,мастер создания страниц JSF из классов сущностей>> для создания управляемых компонентов JSF и компонентов EJB для классов сущностей, а также набор страниц Facelets для обработки представления данных классов сущностей. Последний раздел руководства <<explore,Анализ приложения>> является дополнительным. В него включено множество упражнений, помогающих лучше понять приложение и ознакомиться со средой IDE.
-image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0"]
-
-
-
-
Для работы с этим учебным курсом требуется программное обеспечение и материалы, перечисленные ниже.
|===
@@ -118,8 +113,11 @@
4. В диалоговом окне "Создание базы данных MySQL" введите *consult* в поле "Имя базы данных". Нажмите кнопку "ОК". Под узлом "Базы данных" появится новый узел (`jdbc:mysql://localhost:3306/consult [корень в схеме по умолчанию]`).
5. Правой кнопкой мыши щелкните новый узел и выберите "Подключить".
6. В основном меню выберите "Файл > Открыть файл" и перейдите к извлеченному файлу `mysql_create_.sql`. Нажмите кнопку Open ("Открыть"). Файл автоматически откроется в редакторе SQL.
+
image::images/run-sql-script.png[title="Откройте файлы SQL в редакторе IDE"]
-7. Убедитесь, что база данных `consult` выбрана в раскрывающемся списке "Соединение" на панели инструментов редактора SQL, затем нажмите кнопку 'Выполнить SQL' ( image::images/run-sql-btn.png[] ).
+
+[start=7]
+. Убедитесь, что база данных `consult` выбрана в раскрывающемся списке "Соединение" на панели инструментов редактора SQL, затем нажмите кнопку 'Выполнить SQL' ( image:images/run-sql-btn.png[] ).
После нажатия кнопки "Запустить SQL" в окне вывода появятся следующие выходные данные.
@@ -210,12 +208,22 @@
1. В окне 'Проекты' щелкните правой кнопкой мыши узел проекта `ConsultingAgency` и выберите 'Создать' > 'Классы сущностей' в базе данных. Если данная команда отсутствует, выберите пункт "Прочие". После этого в мастере создания файла выберите категорию "Сохранение состояния", а затем - пункт "Классы сущностей из базы данных".
2. Для открытия диалогового окна "Создание источника данных" в раскрывающемся списке "Источник данных" выберите "Новый источник данных".
3. В поле "Имя JNDI" введите `jdbc/consult` и выберите подключение `jdbc:mysql://localhost:3306/consult` в списке "Подключение к базе данных".
+
image::images/create-datasource.png[title="Укажите имя JNDI и соединение с базой данных для создания источника данных"]
-4. Нажмите кнопку "ОК" для закрытия диалогового окна и возврата в мастер. Таблицы базы данных `consult` выводятся в окне списка "Доступные таблицы".
-5. Для выбора всех таблиц, имеющихся в базе данных, нажмите кнопку "Добавить все". Нажмите кнопку "Далее".
+
+[start=4]
+. Нажмите кнопку "ОК" для закрытия диалогового окна и возврата в мастер. Таблицы базы данных `consult` выводятся в окне списка "Доступные таблицы".
+
+[start=5]
+. Для выбора всех таблиц, имеющихся в базе данных, нажмите кнопку "Добавить все". Нажмите кнопку "Далее".
+
image::images/new-entities-wizard.png[]
-6. Введите `jpa.entities` в качестве имени пакета.
-7. Убедитесь, что установлены оба флажка — и создания именованных запросов, и создания блоков сохранения состояния. Нажмите кнопку "Завершить".
+
+[start=6]
+. Введите `jpa.entities` в качестве имени пакета.
+
+[start=7]
+. Убедитесь, что установлены оба флажка — и создания именованных запросов, и создания блоков сохранения состояния. Нажмите кнопку "Завершить".
При нажатии кнопки "Готово" среда IDE создает классы сущностей в пакете проекта `jpa.entities`.
@@ -253,19 +261,34 @@
В окне "Доступные классы сущностей" выводится список из семи классов сущностей, имеющихся в этом проекте. В окне не выводятся встраиваемые классы (`ClientPK.java` и `ProjectPK.java`).
-2. Нажмите кнопку "Добавить все" для переноса всех классов в окно "Выбранные классы сущностей".
+
+[start=2]
+. Нажмите кнопку "Добавить все" для переноса всех классов в окно "Выбранные классы сущностей".
+
image::images/newjsf-wizard.png[title="В мастере создания страниц JSF из классов сущностей отображаются все классы сущностей, содержащиеся в проекте"]
+
Нажмите кнопку "Далее".
-3. На третьем экране мастера "Создание страниц JSF и классов" в поле "Пакет сеансного компонента JPA" введите `jpa.session`.
-4. В поле "Пакет классов JSF" введите `jsf`.
-5. В поле "Имя набора локализаций" введите "`/resources/Bundle`". Будет создан пакет с именем `resources`, в который входит файл `Bundle.properties`. (Если поле оставить пустым, набор свойств будет создан в пакете проекта по умолчанию.)
+
+[start=3]
+. На третьем экране мастера "Создание страниц JSF и классов" в поле "Пакет сеансного компонента JPA" введите `jpa.session`.
+
+[start=4]
+. В поле "Пакет классов JSF" введите `jsf`.
+
+[start=5]
+. В поле "Имя набора локализаций" введите "`/resources/Bundle`". Будет создан пакет с именем `resources`, в который входит файл `Bundle.properties`. (Если поле оставить пустым, набор свойств будет создан в пакете проекта по умолчанию.)
+
image::images/newjsf-wizard2.png[title="Укажите имена пакетов и папок для созданных файлов"]
Для оптимизации правил проекта в среде IDE настройте файлы, созданные в мастере. Для изменения шаблонов, используемых в мастере, щелкните ссылку "Настройка шаблона".
+
image::images/customize-template.png[title="Настройка шаблонов для файлов, созданных мастером"]
+
В целом, для вызова и изменения всех шаблонов, поддерживаемых в среде IDE, используйте диспетчер шаблонов ("Сервис" > "Шаблоны").
-6. Нажмите кнопку "Завершить". В среде IDE создаются сеансные компоненты без сохранения состояния в пакете `jpa.session` и управляемые компоненты JSF в контексте сеанса в пакете `jsf`. Каждый сеансный компонент без сохранения состояния обрабатывает операции для соответствующего класса сущностей, включая создание, правку и удаление экземпляров класса сущностей, с помощью интерфейса Java Persistence API. Каждый управляемый компонент JSF реализует интерфейс `javax.faces.convert.Converter` и играет роль экземпляров преобразования соответствующего класса сущностей в объекты `String` и наоборот.
+
+[start=6]
+. Нажмите кнопку "Завершить". В среде IDE создаются сеансные компоненты без сохранения состояния в пакете `jpa.session` и управляемые компоненты JSF в контексте сеанса в пакете `jsf`. Каждый сеансный компонент без сохранения состояния обрабатывает операции для соответствующего класса сущностей, включая создание, правку и удаление экземпляров класса сущностей, с помощью интерфейса Java Persistence API. Каждый управляемый компонент JSF реализует интерфейс `javax.faces.convert.Converter` и играет роль экземпляров преобразования соответствующего класса сущностей в объекты `String` и наоборот.
При развертывании узла "Веб-страницы" можно отметить, что в среде IDE была создана папка для каждого класса сущностей. Каждая папка содержит файлы `Create.xhtml`, `Edit.xhtml`, `List.xhtml` и `View.xhtml`. В среде IDE также изменен файл `index.xhtml` посредством вставки ссылок на каждую из страниц `List.xhtml`.
@@ -325,7 +348,7 @@
[[completedProject]]
=== Изучение выполненного проекта
-1. Для запуска проекта щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Запустить' или нажмите кнопку 'Запустить проект' ( image::images/run-project-btn.png[] ) на главной панели инструментов.
+1. Для запуска проекта щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Запустить' или нажмите кнопку 'Запустить проект' ( image:images/run-project-btn.png[] ) на главной панели инструментов.
При отображении страницы приветствия приложения выводится список ссылок, позволяющих просмотреть записи, которые включены в каждую таблицу базы данных.
@@ -362,8 +385,12 @@
</h:form>
</h:body>
----
-2. Щелкните ссылку "`Показать все элементы консультантов`". При анализе приведенного выше кода можно отметить, что целевая страница – `/consultant/List.xhtml`. (В JSF 2.x расширение файла является предполагаемым из-за неявного перехода.)
+
+[start=2]
+. Щелкните ссылку "`Показать все элементы консультантов`". При анализе приведенного выше кода можно отметить, что целевая страница – `/consultant/List.xhtml`. (В JSF 2.x расширение файла является предполагаемым из-за неявного перехода.)
+
image::images/empty-consultants-list.png[title="Таблица 'Consultants' в настоящее вермя пуста"]
+
Текущая база данных не содержит данные примера. Данные можно добавить вручную посредством нажатия ссылки "`Create New Consultant`" и использования предоставленной веб-формы. При этом инициируется отображение страницы `/consultant/Create.xhtml`. Для заполнения таблиц данными примера также можно выполнить сценарий SQL в среде IDE. В следующих подразделах рассматриваются оба эти варианта.
Для возврата к списку ссылок на странице приветствия щелкните индексную ссылку. По ссылкам открывается представление данных, хранящихся в каждой таблице базы данных, и инициируется файл `List.xhtml` для каждой отображаемой папки сущностей. Как будет показано ниже, после внесения данных в таблицу появятся другие ссылки для каждой записи, с помощью которых можно просматривать (`View.xhtml`), править (`Edit.xhmtl`) и удалять данные отдельной записи таблицы.
@@ -380,15 +407,22 @@
1. Выберите в основном меню "Файл" > "Открыть файл", затем перейдите к папке сценария на компьютере. Нажмите кнопку Open ("Открыть"). Файл автоматически открывается в редакторе SQL среды IDE.
2. Убедитесь, что база данных `consult` выбрана в раскрывающемся списке "Соединение" на панели инструментов редактора SQL.
+
image::images/run-sql-insert.png[title="Откройте сценарий в редакторе SQL в IDE"]
-Щелкните правой кнопкой мыши в редакторе и выберите 'Запустить оператор' или нажмите кнопку 'Запустить SQL' ( image::images/run-sql-btn.png[] ). Результаты выполнения сценария отображаются в окне вывода.
+Щелкните правой кнопкой мыши в редакторе и выберите 'Запустить оператор' или нажмите кнопку 'Запустить SQL' ( image:images/run-sql-btn.png[] ). Результаты выполнения сценария отображаются в окне вывода.
-3. Перезапустите сервер приложений GlassFish. Это необходимо для перезагрузки и кэширования новых данных при помощи сервера, содержащихся в базе данных `consult`. Чтобы это сделать, перейдите на вкладку 'Сервер GlassFish' в окне вывода (на вкладке 'Сервер GlassFish' отображается журнал сервера). Затем нажмите кнопку 'Перезапустить сервер' в левом поле ( image::images/glassfish-restart.png[] ). Сервер остановится, затем перезапустится.
-4. Выполните проект еще раз и щелкните ссылку "`Показать все элементы консультантов`". Теперь можно заметить, что список больше не пуст.
+
+[start=3]
+. Перезапустите сервер приложений GlassFish. Это необходимо для перезагрузки и кэширования новых данных при помощи сервера, содержащихся в базе данных `consult`. Чтобы это сделать, перейдите на вкладку 'Сервер GlassFish' в окне вывода (на вкладке 'Сервер GlassFish' отображается журнал сервера). Затем нажмите кнопку 'Перезапустить сервер' в левом поле ( image:images/glassfish-restart.png[] ). Сервер остановится, затем перезапустится.
+
+[start=4]
+. Выполните проект еще раз и щелкните ссылку "`Показать все элементы консультантов`". Теперь можно заметить, что список больше не пуст.
[.feature]
--
+
image::images/consultants-list-small.png[role="left", link="images/consultants-list.png"]
+
--
@@ -402,10 +436,12 @@
[.feature]
--
+
image::images/view-data-table-small.png[role="left", link="images/view-data-table.png"]
+
--
-Дважды щелкните ячейки таблицы для выполнения внутристрочных изменений данных. Щелкните значок 'Фиксировать записи' ( image::images/commit-records-icon.png[] ) для фиксации изменений базы данных.
+Дважды щелкните ячейки таблицы для выполнения внутристрочных изменений данных. Щелкните значок 'Фиксировать записи' ( image:images/commit-records-icon.png[] ) для фиксации изменений базы данных.
Графическое представление обеспечивает большую функциональность. Дополнительные сведения см. в разделе link:../../docs/ide/database-improvements-screencast.html[+Поддержка баз данных в IDE NetBeans+].
@@ -424,45 +460,72 @@
Чтобы отобразить номера строк, щелкните правой кнопкой мыши на левой границе редактора и выберите 'Показать номера строк'.
-2. С помощью диалогового окна "Переход к файлу" в среде IDE откройте файл `template.xhtml`. Нажмите сочетание клавиш ALT+SCHIFT+O (CTRL+SHIFT+O в Mac), затем введите `template`.
+
+[start=2]
+. С помощью диалогового окна "Переход к файлу" в среде IDE откройте файл `template.xhtml`. Нажмите сочетание клавиш ALT+SCHIFT+O (CTRL+SHIFT+O в Mac), затем введите `template`.
+
image::images/go-to-file.png[title="С помощью диалогового окна "Переход к файлу" быстро откройте файлы проекта"]
Нажмите кнопку "ОК" (или нажмите ENTER).
-3. В шаблоне применяются теги `<ui:insert>` для вставки содержимого из других файлов в заголовок и тело. Установите курсор на тег `<ui:insert>`, затем нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова всплывающего окна документации.
+
+[start=3]
+. В шаблоне применяются теги `<ui:insert>` для вставки содержимого из других файлов в заголовок и тело. Установите курсор на тег `<ui:insert>`, затем нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова всплывающего окна документации.
+
image::images/doc-popup.png[title="Нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова всплывающего окна документации в тегах Facelets"]
Для вызова всплывающего окна документации можно нажать сочетание клавиш CTRL+ПРОБЕЛ, установив курсор на тегах JSF и соответствующих атрибутах. Отображаемая документация взята из описаний, предоставленных в официальной link:http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/index.html[+Документации о библиотеке тегов JSF+].
-4. Вернитесь к файлу `List.xhtml` (нажмите CTRL+TAB). Теги `<ui:define>` используются для определения содержимого, которое применяется в заголовке и теле шаблона. Этот шаблон используется для всех четырех файлов Facelets (`Create.xhtml`, `Edit.xhtml`, `List.xhtml` и `View.xhtml`), созданных для каждого класса сущностей.
-5. Установите курсор на одном из выражений на языке выражений, используемых для локализованных сообщений, содержащихся в файле `Bundle.properties`. Для просмотра локализованного сообщения нажмите сочетание клавиш CTRL+ПРОБЕЛ.
+
+[start=4]
+. Вернитесь к файлу `List.xhtml` (нажмите CTRL+TAB). Теги `<ui:define>` используются для определения содержимого, которое применяется в заголовке и теле шаблона. Этот шаблон используется для всех четырех файлов Facelets (`Create.xhtml`, `Edit.xhtml`, `List.xhtml` и `View.xhtml`), созданных для каждого класса сущностей.
+
+[start=5]
+. Установите курсор на одном из выражений на языке выражений, используемых для локализованных сообщений, содержащихся в файле `Bundle.properties`. Для просмотра локализованного сообщения нажмите сочетание клавиш CTRL+ПРОБЕЛ.
[.feature]
--
+
image::images/localized-messages-small.png[role="left", link="images/localized-messages.png"]
+
--
На приведенном выше изображении можно заметить, что выражение на языке выражений разрешено в списке "`List`", который применяется для заголовка шаблона и проверяется из отображаемой в браузере страницы.
-6. Выполните прокрутку до конца файла и найдите код для ссылки `Create New Consultant` (строка 92). Это выглядит следующим образом:
+
+[start=6]
+. Выполните прокрутку до конца файла и найдите код для ссылки `Create New Consultant` (строка 92). Это выглядит следующим образом:
[source,java]
----
<h:commandLink action="#{consultantController.prepareCreate}" value="#{bundle.ListConsultantCreateLink}"/>
----
-7. Для вызова всплывающего окна документации нажмите сочетание клавиш CTRL+ПРОБЕЛ на атрибуте `action` для `commandLink`.
+
+[start=7]
+. Для вызова всплывающего окна документации нажмите сочетание клавиш CTRL+ПРОБЕЛ на атрибуте `action` для `commandLink`.
Атрибут `action` указывает на метод, обрабатывающий запрос при щелчке ссылки в браузере. Предоставлена следующая документация:
_Компонент MethodExpression определяет вызываемую операцию приложения при его активации пользователем. Выражение должно определять общедоступный метод, который не принимает параметры и возвращает объект (метод toString() которого вызывается для получения логического результата), передаваемый в NavigationHandler для этого приложения._
Другими словами, значение `action` обычно относится к методу в управляемом компоненте JSF, который имеет значение `String`. Затем строка используется в `NavigationHandler` JSF для передачи запроса в соответствующее представление. Проверка этого осуществляется при выполнении следующих действий.
-8. Установите курсор на `consultantController` и нажмите сочетание клавиш CTRL+ПРОБЕЛ. Функция автозавершения кода в редакторе указывает на то, что `consultantController` является управляемым компонентом JSF.
+
+[start=8]
+. Установите курсор на `consultantController` и нажмите сочетание клавиш CTRL+ПРОБЕЛ. Функция автозавершения кода в редакторе указывает на то, что `consultantController` является управляемым компонентом JSF.
+
image::images/code-completion-managed-bean.png[title="Автозавершение кода обеспечено для управляемых компонентов JSF"]
-9. Переместите курсор на `prepareCreate` и нажмите сочетание клавиш CTRL+ПРОБЕЛ. При вызове функции автозавершения кода выводится список методов, содержащихся в управляемом компоненте `ConsultantController`.
+
+[start=9]
+. Переместите курсор на `prepareCreate` и нажмите сочетание клавиш CTRL+ПРОБЕЛ. При вызове функции автозавершения кода выводится список методов, содержащихся в управляемом компоненте `ConsultantController`.
+
image::images/code-completion-properties.png[title="Автозавершение кода обеспечено для методов классов"]
-10. Нажмите CTRL (&#8984 в Mac), затем наведите указатель мыши на `prepareCreate`. Будет создана ссылка, с помощью которой можно перейти непосредственно к методу `prepareCreate()` в управляемом компоненте `ConsultantController`.
+
+[start=10]
+. Нажмите CTRL (&#8984 в Mac), затем наведите указатель мыши на `prepareCreate`. Будет создана ссылка, с помощью которой можно перейти непосредственно к методу `prepareCreate()` в управляемом компоненте `ConsultantController`.
+
image::images/editor-navigation.png[title="Используйте навигацию в редакторе для быстрого перехода по исходному коду"]
-11. Щелкните ссылку и просмотрите метод `prepareCreate()` (отображаемый ниже).
+
+[start=11]
+. Щелкните ссылку и просмотрите метод `prepareCreate()` (отображаемый ниже).
[source,java]
----
@@ -503,17 +566,25 @@
|StatusId |---
|===
-3. Нажмите кнопку "Сохранить". При подобном заполнении поле `StatusId` будет отмечено ошибкой проверки.
+
+[start=3]
+. Нажмите кнопку "Сохранить". При подобном заполнении поле `StatusId` будет отмечено ошибкой проверки.
+
image::images/create-new-consultant.png[title="Введите в форму образец данных"]
+
Почему это произошло? Повторно проверьте <<er-diagram,диаграмму "сущность/отношение" для базы данных консультационного агентства>>. Как указано выше в <<relationships,таблице связей>>, в таблицах `CONSULTANT` и `CONSULTANT_STATUS` совместно используется ненулевое отношение "один ко многим". Поэтому каждая запись в таблице `CONSULTANT` должна содержать ссылку на запись в таблице `CONSULTANT_STATUS`. Это отмечено во внешнем ключе `consultant_fk_consultant_status`, который имеет ссылки на две таблицы.
Внешние ключи, хранящиеся в таблицах, можно просмотреть посредством развертывания узла "Внешние ключи" таблицы в окне "Службы" (CTRL+5; &#8984+5 на компьютере Mac).
image::images/consultant-fk.png[title="Проверьте атрибуты внешних ключей в окне 'Службы'"]
-4. Для устранения ошибки проверки выберите `entity.ConsultantStatus[statusId=A]` в раскрывающемся списке `StatusId`.
+
+[start=4]
+. Для устранения ошибки проверки выберите `entity.ConsultantStatus[statusId=A]` в раскрывающемся списке `StatusId`.
*Примечание. *Поле `RecruiterId` можно оставить пустым. Как указано на <<er-diagram,диаграмме "сущность/отношение" для базы данных>>, между таблицами `CONSULTANT` и `RECRUITER` существует нулевое отношение "один ко многим", что означает, что создавать отношение между записями в таблице `CONSULTANT` с записью `RECRUITER` не требуется.
-5. Нажмите кнопку "Сохранить". На экран выводится сообщение об успешном сохранении записи consultant. При щелчке ссылки `Show All Consultant Items` в таблице появится новая запись.
+
+[start=5]
+. Нажмите кнопку "Сохранить". На экран выводится сообщение об успешном сохранении записи consultant. При щелчке ссылки `Show All Consultant Items` в таблице появится новая запись.
Как правило, на созданных страницах Facelets отображаются ошибки вводимой пользователем информации:
@@ -547,21 +618,35 @@
</h:selectOneMenu>
</h:panelGrid>
----
-2. Проверьте атрибут `value`, применяемый к тегу `<f:selectItems>`. Атрибут `value` определяет текст, отображаемый для каждой позиции в раскрывающемся списке.
+
+[start=2]
+. Проверьте атрибут `value`, применяемый к тегу `<f:selectItems>`. Атрибут `value` определяет текст, отображаемый для каждой позиции в раскрывающемся списке.
Нажмите сочетание клавиш CTRL+ПРОБЕЛ, установив курсор на `itemsAvailableSelectOne`. Автозавершение кода в редакторе указывает, что метод `getItemsAvailableSelectOne()` для `ConsultantStatusController` возвращает массив объектов `SelectItem`.
+
image::images/code-completion-returned-object.png[title="Автозавершение кода отображает возвращаемые классы для методов"]
-3. Нажмите CTRL (&#8984 в Mac), затем наведите указатель мыши на `itemsAvailableSelectOne`. Создается ссылка, позволяющая переходить непосредственно к методу `getItemsAvailableSelectOne()` в исходном коде сущностей `ConsultantStatus`. Щелкните эту ссылку.
-4. Установите курсор на значении возврата `SelectItem[]` в сигнатуре метода и нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова всплывающего окна документации.
+
+[start=3]
+. Нажмите CTRL (&#8984 в Mac), затем наведите указатель мыши на `itemsAvailableSelectOne`. Создается ссылка, позволяющая переходить непосредственно к методу `getItemsAvailableSelectOne()` в исходном коде сущностей `ConsultantStatus`. Щелкните эту ссылку.
+
+[start=4]
+. Установите курсор на значении возврата `SelectItem[]` в сигнатуре метода и нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова всплывающего окна документации.
+
image::images/documentation-select-item.png[title="Для вызова поддержки документации нажмите сочетание клавиш CTRL+ПРОБЕЛ."]
-Щелкните значок веб-браузера ( image::images/web-browser-icon.png[] ) в окне документации, чтобы открыть Javadoc во внешнем веб-браузере.
+Щелкните значок веб-браузера ( image:images/web-browser-icon.png[] ) в окне документации, чтобы открыть Javadoc во внешнем веб-браузере.
Итак, класс `SelectItem` относится к инфраструктуре JSF. Компонент `UISelectOne`, как упоминалось в документации, представлен тегом `<h:selectOneMenu>` из разметки, проверенной выше в <<markup,Шаге 1>>.
-5. Нажмите CTRL (&#8984 в Mac), затем наведите указатель мыши на `findAll()`. Появится всплывающее окно, отображающее сигнатуру метода.
+
+[start=5]
+. Нажмите CTRL (&#8984 в Mac), затем наведите указатель мыши на `findAll()`. Появится всплывающее окно, отображающее сигнатуру метода.
+
image::images/method-signature.png[title="Просмотрите всплывающее окно сигнатур методов в редакторе"]
+
Здесь можно отметить, что `ejbFacade.findAll()` возвращает `List` объектов `ConsultantStatus`.
-6. Перейдите к `JsfUtil.getSelectItems`. Наведите указатель мыши на `getSelectItems` и нажмите CTRL (&#8984 на компьютере Mac), затем щелкните появившуюся ссылку.
+
+[start=6]
+. Перейдите к `JsfUtil.getSelectItems`. Наведите указатель мыши на `getSelectItems` и нажмите CTRL (&#8984 на компьютере Mac), затем щелкните появившуюся ссылку.
*Примечание. *Помните, что `JsfUtil` является одним из классов служебных программ, созданных при завершении <<jsfPagesEntityClasses,страниц JSF из мастера классов логических объектов>>.
@@ -589,7 +674,9 @@
После проверки того, что методом `toString()` сущности является метод, отображаемый в браузере при просмотре позиций в раскрывающемся списке, измените метод `ConsultantStatus` `toString()`.
-7. Откройте класс сущностей `ConsultantStatus` в редакторе. Измените метод `toString` для возврата `statusId` и `description`. Это свойства записей, соответствующие двум столбцам таблицы `CONSULTANT_STATUS`.
+
+[start=7]
+. Откройте класс сущностей `ConsultantStatus` в редакторе. Измените метод `toString` для возврата `statusId` и `description`. Это свойства записей, соответствующие двум столбцам таблицы `CONSULTANT_STATUS`.
[source,java]
----
@@ -598,7 +685,9 @@
return *statusId + ", " + description;*
}
----
-8. Выполните проект еще раз. При отображении в браузере страницы приветствия щелкните ссылку `Show All Consultant Items`, затем нажмите `Create New Consultant`.
+
+[start=8]
+. Выполните проект еще раз. При отображении в браузере страницы приветствия щелкните ссылку `Show All Consultant Items`, затем нажмите `Create New Consultant`.
Просмотрите раскрывающийся список `StatusId`. Теперь на экран будет выведен идентификатор состояния и описание записи, содержащейся в таблице `CONSULTANT_STATUS` базы данных.
@@ -671,27 +760,46 @@
Для создания ресурса JDBC и пула соединений потребуются значения свойств, указанные в файле `glassfish-resources.xml`.
-2. Щелкните правой кнопкой мыши узел GlassFish Server в окне "Службы" и выберите пункт меню "Открыть консоль администрирования домена". Консоль GlassFish откроется в браузере.
-3. На панели "Общие задачи" в консоли GlassFish разверните узел *JDBC*, а также узлы *Ресурсы JDBC* и *Пулы соединений JDBC*.
+
+[start=2]
+. Щелкните правой кнопкой мыши узел GlassFish Server в окне "Службы" и выберите пункт меню "Открыть консоль администрирования домена". Консоль GlassFish откроется в браузере.
+
+[start=3]
+. На панели "Общие задачи" в консоли GlassFish разверните узел *JDBC*, а также узлы *Ресурсы JDBC* и *Пулы соединений JDBC*.
[.feature]
--
+
image::images/gf-admin-console-sm.png[role="left", link="images/gf-admin-console-lg.png"]
+
--
В консоли отображаются текущие ресурсы JDBC, зарегистрированные на сервере. Если в списке под узлом JDBC на панели навигации "Общие задачи" отсутствуют ресурсы `jdbc/consult` и `consultPool`, их необходимо создать. Некоторые ресурсы JDBC , созданные по умолчанию при установке сервера, отображаются в виде дочерних узлов.
-4. Выберите узел *Пулы соединений JDBC*, затем в разделе "Новый пул соединений JDBC" нажмите "Создать".
+
+[start=4]
+. Выберите узел *Пулы соединений JDBC*, затем в разделе "Новый пул соединений JDBC" нажмите "Создать".
+
image::images/gf-new-jdbc-pool1.png[title="Раздел "Новый пул соединений JDBC" в консоли администрирования GlassFish"]
-5. Укажите *consultPool* в качестве имени пула, выберите *javax.sql.ConnectionPoolDataSource* в списке "Тип ресурса", затем выберите *MySql* в списке "Поставщик драйверов базы данных". Нажмите кнопку "Далее".
-6. На экране 2 укажите значения свойств *URL*, *имя пользователя* и *пароль*, найденные в файле. Нажмите "Готово".
+
+[start=5]
+. Укажите *consultPool* в качестве имени пула, выберите *javax.sql.ConnectionPoolDataSource* в списке "Тип ресурса", затем выберите *MySql* в списке "Поставщик драйверов базы данных". Нажмите кнопку "Далее".
+
+[start=6]
+. На экране 2 укажите значения свойств *URL*, *имя пользователя* и *пароль*, найденные в файле. Нажмите "Готово".
+
image::images/gf-new-jdbc-pool2.png[title="Панель "Новый пул соединений JDBC" в консоли администрирования GlassFish"]
Значения свойств можно найти в файле `glassfish-resources.xml`.
При нажатии на кнопку "Готово" на сервере создается новый пул соединений, и под узлом "Пулы соединений JDBC" в консоли появляется соответствующий узел.
-7. Выберите узел *Ресурсы JDBC* на панели навигации "Общие задачи" и нажмите "Создать".
-8. Укажите *jdbc/consult* в качестве имени JNDI и выберите *consultPool* в списке "Имя пула". Нажмите OK.
+
+[start=7]
+. Выберите узел *Ресурсы JDBC* на панели навигации "Общие задачи" и нажмите "Создать".
+
+[start=8]
+. Укажите *jdbc/consult* в качестве имени JNDI и выберите *consultPool* в списке "Имя пула". Нажмите OK.
+
image::images/gf-new-jdbc-resource.png[title="Раздел "Новый ресурс JDBC" в консоли администрирования GlassFish"]
При нажатии на кнопку "Готово" на сервере создается новый ресурс JDBC, и под узлом "Ресурсы JDBC" в консоли появляется соответствующий узел.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_zh_CN.asciidoc
index c7163e6..cd8c562 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-crud_zh_CN.asciidoc
@@ -118,8 +118,11 @@
4. 在 "Create MySQL Database"（创建 MySQL 数据库）对话框中键入 *consult* 作为数据库名称。单击 "OK"（确定）。"Databases"（数据库）节点 (`jdbc:mysql://localhost:3306/consult [root on Default schema]`) 下随即出现一个新的节点。
5. 右键单击新节点并选择 "Connect"（连接）。
6. 从主菜单中选择 "File"（文件）> "Open File"（打开文件）并导航至解压缩的文件 `mysql_create_consult.sql`。单击 "Open"（打开）。该文件会自动在 SQL 编辑器中打开。
+
image::images/run-sql-script.png[title="在 IDE 的编辑器中打开 SQL 文件"]
-7. 确保在 SQL 编辑器工具栏的 "Connection"（连接）下拉列表中选择了 `consult` 数据库，然后单击 "Run SQL"（运行 SQL）(image::images/run-sql-btn.png[]) 按钮。
+
+[start=7]
+. 确保在 SQL 编辑器工具栏的 "Connection"（连接）下拉列表中选择了 `consult` 数据库，然后单击 "Run SQL"（运行 SQL）(image:images/run-sql-btn.png[]) 按钮。
单击 "Run SQL"（运行 SQL）时，"Output"（输出）窗口中出现以下输出内容。
@@ -210,12 +213,22 @@
1. 在 "Projects"（项目）窗口中，右键单击 `ConsultingAgency` 项目节点，并选择 "New"（新建）> "Entity Classes from Database"（通过数据库生成实体类）。（如果未列出此选项，请选择 "Other"（其他）。然后，在文件向导中，选择 "Persistence"（持久性）类别，再选择 "Entity Classes from Database"（通过数据库生成实体类）。）
2. 从 "Data Source"（数据源）下拉列表中选择 "New Data Source"（新建数据源）以打开 "Create Data Source"（创建数据源）对话框。
3. 键入 `jdbc/consult` 作为 JNDI 名称，并选择 `jdbc:mysql://localhost:3306/consult` 连接作为数据库连接。
+
image::images/create-datasource.png[title="指定 JNDI 名称和数据库连接以创建数据源"]
-4. 单击 "OK"（确定）以关闭对话框并返回到向导。`consult` 数据库中的表出现在 "Available Tables"（可用表）列表框中。
-5. 单击 "Add All"（全部添加）按钮以选择数据库中包含的所有表。单击 "Next"（下一步）。
+
+[start=4]
+. 单击 "OK"（确定）以关闭对话框并返回到向导。`consult` 数据库中的表出现在 "Available Tables"（可用表）列表框中。
+
+[start=5]
+. 单击 "Add All"（全部添加）按钮以选择数据库中包含的所有表。单击 "Next"（下一步）。
+
image::images/new-entities-wizard.png[]
-6. 键入 `jpa.entities` 作为包名称。
-7. 确认已选中用于生成命名查询和创建持久性单元的复选框。单击 "Finish"（完成）。
+
+[start=6]
+. 键入 `jpa.entities` 作为包名称。
+
+[start=7]
+. 确认已选中用于生成命名查询和创建持久性单元的复选框。单击 "Finish"（完成）。
单击 "Finish"（完成），此时 IDE 将在项目的 `jpa.entities` 包中生成实体类。
@@ -253,19 +266,34 @@
"Available Entity Classes"（可用的实体类）框列出了项目中所包含的七个实体类。该框并未列出可嵌入类（`ClientPK.java` 和 `ProjectPK.java`）。
-2. 单击 "Add All"（全部添加）以将所有类移动到 "Selected Entity Classes"（选定的实体类）框中。
+
+[start=2]
+. 单击 "Add All"（全部添加）以将所有类移动到 "Selected Entity Classes"（选定的实体类）框中。
+
image::images/newjsf-wizard.png[title=""New JSF Pages from Entity Classes"（通过实体类新建 JSF 页）向导显示项目中包含的所有实体类"]
+
单击 "Next"（下一步）。
-3. 在向导的“步骤 3”即 "Generate JSF Pages and Classes"（生成 JSF 页和类）中，键入 `jpa.session` 作为 JPA 会话 Bean 包。
-4. 键入 `jsf` 作为 JSF 类包。
-5. 在 "Localization Bundle Name"（本地化包名称）字段中输入 "`/resources/Bundle`"。这样将生成一个名为 `resources` 的包，其中将包含 `Bundle.properties` 文件。（如果将此字段保留为空，则在项目的默认包中将创建属性包。）
+
+[start=3]
+. 在向导的“步骤 3”即 "Generate JSF Pages and Classes"（生成 JSF 页和类）中，键入 `jpa.session` 作为 JPA 会话 Bean 包。
+
+[start=4]
+. 键入 `jsf` 作为 JSF 类包。
+
+[start=5]
+. 在 "Localization Bundle Name"（本地化包名称）字段中输入 "`/resources/Bundle`"。这样将生成一个名为 `resources` 的包，其中将包含 `Bundle.properties` 文件。（如果将此字段保留为空，则在项目的默认包中将创建属性包。）
+
image::images/newjsf-wizard2.png[title="为生成的文件指定包名称和文件夹名称"]
要使 IDE 能更好地适应您的项目约定，可以定制由向导生成的任何文件。单击 "Customize Template"（定制模板）链接以修改向导所使用的文件模板。
+
image::images/customize-template.png[title="为向导所生成的文件定制模板"]
+
通常，可以使用 "Template Manager"（模板管理器）（"Tools"（工具）> "Templates"（模板））来访问和更改 IDE 维护的所有模板。
-6. 单击 "Finish"（完成）。IDE 在 `jpa.session` 包中生成无状态会话 Bean，并在 `jsf` 包中生成 JSF 会话范围的受管 Bean。每个无状态会话 Bean 用于处理相应实体类的操作，其中包括通过 Java 持久性 API 创建、编辑和销毁实体类的实例。每个 JSF 受管 Bean 用于实现 `javax.faces.convert.Converter` 接口，并执行将相应实体类的实例转换为 `String` 对象的操作，反之亦然。
+
+[start=6]
+. 单击 "Finish"（完成）。IDE 在 `jpa.session` 包中生成无状态会话 Bean，并在 `jsf` 包中生成 JSF 会话范围的受管 Bean。每个无状态会话 Bean 用于处理相应实体类的操作，其中包括通过 Java 持久性 API 创建、编辑和销毁实体类的实例。每个 JSF 受管 Bean 用于实现 `javax.faces.convert.Converter` 接口，并执行将相应实体类的实例转换为 `String` 对象的操作，反之亦然。
如果展开 "Web Pages"（Web 页）节点，则可以看到 IDE 为每个实体类生成了一个文件夹。每个文件夹都包含 `Create.xhtml`、`Edit.xhtml`、`List.xhtml` 和 `View.xhtml` 文件。IDE 还通过向每个 `List.xhtml` 页中插入链接来修改 `index.xhtml` 文件。
@@ -325,7 +353,7 @@
[[completedProject]]
=== 检查已完成的项目
-1. 要运行项目，请在 "Projects"（项目）窗口中右键单击项目节点并选择 "Run"（运行），或单击主工具栏中的 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮。
+1. 要运行项目，请在 "Projects"（项目）窗口中右键单击项目节点并选择 "Run"（运行），或单击主工具栏中的 "Run Project"（运行项目）(image:images/run-project-btn.png[]) 按钮。
当显示应用程序的欢迎页面时，将提供一个链接列表，用于查看包含在每个数据库表中的条目。
@@ -362,8 +390,12 @@
</h:form>
</h:body>
----
-2. 单击 "`Show All Consultant Items`" 链接。查看上面的代码，则可以看到目标页为 `/consultant/List.xhtml`。（在 JSF 2.x 中，由于隐式导航所以文件扩展名是推断出来的。）
+
+[start=2]
+. 单击 "`Show All Consultant Items`" 链接。查看上面的代码，则可以看到目标页为 `/consultant/List.xhtml`。（在 JSF 2.x 中，由于隐式导航所以文件扩展名是推断出来的。）
+
image::images/empty-consultants-list.png[title="Consultants 表当前为空"]
+
数据库目前不包含任何样例数据。可以通过单击 "`Create New Consultant`" 链接和使用提供的 Web 窗体手动添加数据。此操作将触发 `/consultant/Create.xhtml` 页进行显示。还在 IDE 中运行 SQL 脚本以使用样例数据填充表。以下子部分对这两个选项进行了说明。
您可以单击索引链接返回到欢迎页面列出的链接。这些链接提供了保存在每个数据库表中数据的视图，并触发了每个实体文件夹中 `List.xhtml` 文件的显示。稍后会有说明，在将数据添加到表之后，会显示其他链接，其中每个条目都允许您查看 (`View.xhtml`)、编辑 (`Edit.xhmtl`) 和销毁单个表记录的数据。
@@ -380,15 +412,22 @@
1. 从主菜单中选择 "File"（文件）> "Open File"（打开文件），然后导航到脚本在您的计算机上的位置。单击 "Open"（打开）。文件会自动在 IDE 的 SQL 编辑器中打开。
2. 确保在 SQL 编辑器工具栏的 "Connection"（连接）下拉列表中选择了 `consult` 数据库。
+
image::images/run-sql-insert.png[title="在 IDE 的 SQL 编辑器中打开脚本"]
-在编辑器中右键单击并选择 "Run Statement"（运行语句），或单击 "Run SQL"（运行 SQL）(image::images/run-sql-btn.png[]) 按钮。您可以在 "Output"（输出）窗口中查看脚本运行的结果。
+在编辑器中右键单击并选择 "Run Statement"（运行语句），或单击 "Run SQL"（运行 SQL）(image:images/run-sql-btn.png[]) 按钮。您可以在 "Output"（输出）窗口中查看脚本运行的结果。
-3. 重新启动 GlassFish Server。这是使服务器可以重新加载和缓存 `consult` 数据库中包含的新数据所必需的步骤。为此，请在 "Output" 窗口中单击 "GlassFish Server" 标签（"GlassFish Server" 标签显示服务器日志。），然后单击左旁注中的 "Restart Server"（重新启动服务器）(image::images/glassfish-restart.png[]) 按钮。服务器即会停止，然后重新启动。
-4. 重新运行项目，然后单击 "`Show All Consultant Items`" 链接。将看到该列表不再为空。
+
+[start=3]
+. 重新启动 GlassFish Server。这是使服务器可以重新加载和缓存 `consult` 数据库中包含的新数据所必需的步骤。为此，请在 "Output" 窗口中单击 "GlassFish Server" 标签（"GlassFish Server" 标签显示服务器日志。），然后单击左旁注中的 "Restart Server"（重新启动服务器）(image:images/glassfish-restart.png[]) 按钮。服务器即会停止，然后重新启动。
+
+[start=4]
+. 重新运行项目，然后单击 "`Show All Consultant Items`" 链接。将看到该列表不再为空。
[.feature]
--
+
image::images/consultants-list-small.png[role="left", link="images/consultants-list.png"]
+
--
@@ -402,10 +441,12 @@
[.feature]
--
+
image::images/view-data-table-small.png[role="left", link="images/view-data-table.png"]
+
--
-在窗体元格内双击以对数据进行内联修改。单击 "Commit Records"（提交记录）(image::images/commit-records-icon.png[]) 图标以提交对数据库的更改。
+在窗体元格内双击以对数据进行内联修改。单击 "Commit Records"（提交记录）(image:images/commit-records-icon.png[]) 图标以提交对数据库的更改。
图形视图提供了更多的功能。有关详细信息，请参见 link:../../docs/ide/database-improvements-screencast.html[+NetBeans IDE 中的数据库支持+]。
@@ -424,45 +465,72 @@
要显示行号，请右键单击编辑器的左旁注，然后选择 " Show Line"（显示行号）。
-2. 使用 IDE 的 "Go to File"（转至文件）对话框来打开 `template.xhtml`。按 Alt-Shift-O 组合键（在 Mac 上为 Ctrl-Shift-O 组合键），然后开始键入 `template`。
+
+[start=2]
+. 使用 IDE 的 "Go to File"（转至文件）对话框来打开 `template.xhtml`。按 Alt-Shift-O 组合键（在 Mac 上为 Ctrl-Shift-O 组合键），然后开始键入 `template`。
+
image::images/go-to-file.png[title="使用 "Go to File"（转至文件）对话框快速打开项目文件"]
单击 "OK"（确定）（或按 Enter 键）。
-3. 模板将使用 `<ui:insert>` 标记将其他文件的内容插入到其标题和正文中。将光标置于 `<ui:insert>` 标记上，然后按 Ctrl-空格键调用文档弹出式窗口。
+
+[start=3]
+. 模板将使用 `<ui:insert>` 标记将其他文件的内容插入到其标题和正文中。将光标置于 `<ui:insert>` 标记上，然后按 Ctrl-空格键调用文档弹出式窗口。
+
image::images/doc-popup.png[title="在 Facelets 标记上按 Ctrl-空格键调用文档弹出式窗口"]
可以在 JSF 标记及其属性上按 Ctrl-空格键调用文档弹出式窗口。您查看的文档是从正式的 link:http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/index.html[+JSF 标记库文档+]所提供的描述中获取的。
-4. 切换回 `List.xhtml` 文件（按 Ctrl-Tab 组合键）。`<ui:define>` 标记用来定义将应用于模板标题和正文的内容。为每个实体类生成的所有 4 个 Facelets 文件（`Create.xhtml`、`Edit.xhtml`、`List.xhtml` 和 `View.xhtml`）都使用了此模式。
-5. 将您的光标置于任何 EL 表达式（用于包含在 `Bundle.properties` 文件中的本地化消息）上。按 Ctrl-空格键查看本地化消息。
+
+[start=4]
+. 切换回 `List.xhtml` 文件（按 Ctrl-Tab 组合键）。`<ui:define>` 标记用来定义将应用于模板标题和正文的内容。为每个实体类生成的所有 4 个 Facelets 文件（`Create.xhtml`、`Edit.xhtml`、`List.xhtml` 和 `View.xhtml`）都使用了此模式。
+
+[start=5]
+. 将您的光标置于任何 EL 表达式（用于包含在 `Bundle.properties` 文件中的本地化消息）上。按 Ctrl-空格键查看本地化消息。
[.feature]
--
+
image::images/localized-messages-small.png[role="left", link="images/localized-messages.png"]
+
--
在上图上，可以看到 EL 表达式解析为 "`List`"，该表达式将应用到模板标题，并且可以从呈现在浏览器中的页面得到验证。
-6. 滚动到文件底部并找到 `Create New Consultant` 链接的代码（第 92 行）。如下所示：
+
+[start=6]
+. 滚动到文件底部并找到 `Create New Consultant` 链接的代码（第 92 行）。如下所示：
[source,java]
----
<h:commandLink action="#{consultantController.prepareCreate}" value="#{bundle.ListConsultantCreateLink}"/>
----
-7. 在 `commandLink` 的 `action` 属性上按 Ctrl-空格键以调用文档弹出式窗口。
+
+[start=7]
+. 在 `commandLink` 的 `action` 属性上按 Ctrl-空格键以调用文档弹出式窗口。
`action` 属性表示在浏览器中单击链接时处理请求的方法。将提供以下文档：
_方法表达式，用于表示在用户激活此组件时要调用的应用程序操作。该表达式的值必须为一个没有参数且返回对象（调用其 toString() 以派生逻辑结果）的公共方法，该对象将被传递到此应用程序的 NavigationHandler。_
换句话说，`action` 值通常是指 JSF 受管 Bean 中的一个方法，其值为 `String`。然后 JSF 的 `NavigationHandler` 会使用该字符串将请求转发到相应的视图中。可通过以下步骤来验证这一点。
-8. 将光标置于 `consultantController` 上，然后按 Ctrl-空格组合键。编辑器的代码完成表明 `consultantController` 是一个 JSF 受管 Bean。
+
+[start=8]
+. 将光标置于 `consultantController` 上，然后按 Ctrl-空格组合键。编辑器的代码完成表明 `consultantController` 是一个 JSF 受管 Bean。
+
image::images/code-completion-managed-bean.png[title="为 JSF 受管 Bean 提供代码完成"]
-9. 将光标移动到 `prepareCreate`，然后按 Ctrl-空格组合键。代码完成列出了包含在 `ConsultantController` 受管 Bean 中的方法。
+
+[start=9]
+. 将光标移动到 `prepareCreate`，然后按 Ctrl-空格组合键。代码完成列出了包含在 `ConsultantController` 受管 Bean 中的方法。
+
image::images/code-completion-properties.png[title="为类方法提供代码完成"]
-10. 按 Ctrl 键（在 Mac 上为 ⌘ 键），然后将鼠标悬停在 `prepareCreate` 上。形成了一个链接，您可以直接导航至 `ConsultantController` 受管 Bean 中的 `prepareCreate()` 方法。
+
+[start=10]
+. 按 Ctrl 键（在 Mac 上为 ⌘ 键），然后将鼠标悬停在 `prepareCreate` 上。形成了一个链接，您可以直接导航至 `ConsultantController` 受管 Bean 中的 `prepareCreate()` 方法。
+
image::images/editor-navigation.png[title="使用编辑器导航快速导航源代码"]
-11. 单击链接并查看 `prepareCreate()` 方法（如下所示）。
+
+[start=11]
+. 单击链接并查看 `prepareCreate()` 方法（如下所示）。
[source,java]
----
@@ -503,17 +571,25 @@
|StatusId |---
|===
-3. 单击 "Save"（保存）。当您执行此操作后，将对 `StatusId` 字段标记一个验证错误。
+
+[start=3]
+. 单击 "Save"（保存）。当您执行此操作后，将对 `StatusId` 字段标记一个验证错误。
+
image::images/create-new-consultant.png[title="在窗体中输入样例数据"]
+
为什么会出现这种情况？重新检查<<er-diagram,“咨询机构”数据库的实体关系图>>。如上面的<<relationships,关系表>>中所述，`CONSULTANT` 和 `CONSULTANT_STATUS` 表共享一个不允许为空值的一对多的关系。所以，`CONSULTANT` 表中的每一个条目都必须包含对 `CONSULTANT_STATUS` 表中条目的引用。这将通过链接这两个表的 `consultant_fk_consultant_status` 外键来表示。
可以通过在 "Services"（服务）窗口中展开一个表的 "Foreign Keys"（外键）节点（Ctrl-5 组合键；在 Mac 上为 ⌘-5 组合键）来查看表中保存的外键。
image::images/consultant-fk.png[title="在 "Services"（服务）窗口中检查外键属性"]
-4. 要解决验证错误，请从 `StatusId` 下拉列表中选择 `entity.ConsultantStatus[statusId=A]`。
+
+[start=4]
+. 要解决验证错误，请从 `StatusId` 下拉列表中选择 `entity.ConsultantStatus[statusId=A]`。
*注：*`RecruiterId` 字段可保留为空。正如<<er-diagram,数据库实体关系图>>中所示，在 `CONSULTANT` 和 `RECRUITER` 表之间存在一个允许为空值的一对多的关系，这就意味着 `CONSULTANT` 中的条目不需要与一个 `RECRUITER` 条目相关联。
-5. 单击 "Save"（保存）。将显示一条消息，表明顾问条目已成功保存。如果单击 `Show All Consultant Items`，将看到新条目列在表中。
+
+[start=5]
+. 单击 "Save"（保存）。将显示一条消息，表明顾问条目已成功保存。如果单击 `Show All Consultant Items`，将看到新条目列在表中。
通常，生成的 Facelets 页会为产生下列问题的用户输入提供出错信息：
@@ -547,21 +623,35 @@
</h:selectOneMenu>
</h:panelGrid>
----
-2. 检查应用于 `<f:selectItems>` 标记的 `value`。`value` 属性决定了为下拉列表中每项显示的文本。
+
+[start=2]
+. 检查应用于 `<f:selectItems>` 标记的 `value`。`value` 属性决定了为下拉列表中每项显示的文本。
在 `itemsAvailableSelectOne` 上按 Ctrl-空格组合键。编辑器的代码完成表示 `ConsultantStatusController` 的 `getItemsAvailableSelectOne()` 方法返回了 `SelectItem` 对象的数组。
+
image::images/code-completion-returned-object.png[title="代码完成显示方法的返回类"]
-3. 按 Ctrl 键（在 Mac 上为 ⌘ 键），然后将鼠标悬停在 `itemsAvailableSelectOne` 上。形成了一个链接，您可以直接导航至 `ConsultantStatus` 实体源代码中的 `getItemsAvailableSelectOne()` 方法。单击该链接。
-4. 将光标置于方法签名中的 `SelectItem[]` 返回值上，然后按 Ctrl-空格键调用文档弹出式窗口。
+
+[start=3]
+. 按 Ctrl 键（在 Mac 上为 ⌘ 键），然后将鼠标悬停在 `itemsAvailableSelectOne` 上。形成了一个链接，您可以直接导航至 `ConsultantStatus` 实体源代码中的 `getItemsAvailableSelectOne()` 方法。单击该链接。
+
+[start=4]
+. 将光标置于方法签名中的 `SelectItem[]` 返回值上，然后按 Ctrl-空格键调用文档弹出式窗口。
+
image::images/documentation-select-item.png[title="按 Ctrl-空格键调用文档支持"]
-单击 "documentation"（文档）窗口中的 "web browser"（Web 浏览器）(image::images/web-browser-icon.png[]) 图标以在外部 Web 浏览器中打开 Javadoc。
+单击 "documentation"（文档）窗口中的 "web browser"（Web 浏览器）(image:images/web-browser-icon.png[]) 图标以在外部 Web 浏览器中打开 Javadoc。
正如您所看到的，`SelectItem` 类属于 JSF 框架。文档中提到的 `UISelectOne` 组件使用您在上述<<markup,步骤 1>> 中检查的标记中的 `<h:selectOneMenu>` 标记来表示。
-5. 按 Ctrl 键（在 Mac 上为 ⌘ 键），然后将鼠标悬停在 `findAll()` 上。随即出现一个弹出式窗口，显示方法签名。
+
+[start=5]
+. 按 Ctrl 键（在 Mac 上为 ⌘ 键），然后将鼠标悬停在 `findAll()` 上。随即出现一个弹出式窗口，显示方法签名。
+
image::images/method-signature.png[title="在编辑器中查看方法签名的弹出式窗口"]
+
可以看到此处的 `ejbFacade.findAll()` 返回了 `ConsultantStatus` 对象的 `List`。
-6. 导航至 `JsfUtil.getSelectItems`。将鼠标悬停在 `getSelectItems` 上并按 Ctrl 键（在 Mac 上为 ⌘），然后单击显示的链接。
+
+[start=6]
+. 导航至 `JsfUtil.getSelectItems`。将鼠标悬停在 `getSelectItems` 上并按 Ctrl 键（在 Mac 上为 ⌘），然后单击显示的链接。
*注：*回想一下，`JsfUtil` 是在您完成<<jsfPagesEntityClasses,“通过实体类创建 JSF 页”向导>>时生成的一个实用程序类。
@@ -589,7 +679,9 @@
既然您已在查看下拉列表中的项时，验证了实体 `toString()` 方法正是浏览器中所呈现的内容，那么请修改 `ConsultantStatus` `toString()` 方法。
-7. 在编辑器中打开 `ConsultantStatus` 实体类。修改 `toString` 方法以返回 `statusId` 和 `description`。这些是对应于 `CONSULTANT_STATUS` 表的两列的实体属性。
+
+[start=7]
+. 在编辑器中打开 `ConsultantStatus` 实体类。修改 `toString` 方法以返回 `statusId` 和 `description`。这些是对应于 `CONSULTANT_STATUS` 表的两列的实体属性。
[source,java]
----
@@ -598,7 +690,9 @@
return *statusId + ", " + description;*
}
----
-8. 重新运行项目。当浏览器显示欢迎页面时，单击 `Show All Consultant Items` 链接，然后单击 `Create New Consultant`。
+
+[start=8]
+. 重新运行项目。当浏览器显示欢迎页面时，单击 `Show All Consultant Items` 链接，然后单击 `Create New Consultant`。
检查 `StatusId` 下拉列表。将看到现在显示的是数据库的 `CONSULTANT_STATUS` 表中所包含的一个记录的状态 ID 和描述。
@@ -671,27 +765,46 @@
创建 JDBC 资源和连接池时，将使用在 `glassfish-resources.xml` 中指定的属性值。
-2. 在 "Services"（服务）窗口中右键单击 "GlassFish Server" 节点，然后在弹出式菜单中选择 "Open Domain Admin Console"（打开域管理控制台）在浏览器中打开 GlassFish 控制台。
-3. 在 GlassFish 控制台的 "Common Tasks"（常见任务）导航面板中，展开 *JDBC* 节点以及 *JDBC Resources*（JDBC 资源）和 *JDBC Connection Pools*（JDBC 连接池）节点。
+
+[start=2]
+. 在 "Services"（服务）窗口中右键单击 "GlassFish Server" 节点，然后在弹出式菜单中选择 "Open Domain Admin Console"（打开域管理控制台）在浏览器中打开 GlassFish 控制台。
+
+[start=3]
+. 在 GlassFish 控制台的 "Common Tasks"（常见任务）导航面板中，展开 *JDBC* 节点以及 *JDBC Resources*（JDBC 资源）和 *JDBC Connection Pools*（JDBC 连接池）节点。
[.feature]
--
+
image::images/gf-admin-console-sm.png[role="left", link="images/gf-admin-console-lg.png"]
+
--
您可以看到当前注册到服务器的 JDBC 资源。如果在 "Common Tasks"（常见任务）导航面板中的 "JDBC" 节点下未列出 `jdbc/consult` 和 `consultPool`，则您将需要创建它们。在安装服务器时，默认情况下创建了一些 JDBC 资源并且这些资源显示为子节点。
-4. 单击 *JDBC Connection Pools*（JDBC 连接池）节点，然后在 "New JDBC Connection Pool"（新建 JDBC 连接池）窗格中单击 "New"（新建）。
+
+[start=4]
+. 单击 *JDBC Connection Pools*（JDBC 连接池）节点，然后在 "New JDBC Connection Pool"（新建 JDBC 连接池）窗格中单击 "New"（新建）。
+
image::images/gf-new-jdbc-pool1.png[title="GlassFish 管理控制台中的 "New JDBC Connection Pool"（新建 JDBC 连接池）窗格"]
-5. 键入 *consultPool* 作为池名称，选择 *javax.sql.ConnectionPoolDataSource* 作为资源类型并选择 *MySql* 作为数据库驱动程序供应商。单击 "Next"（下一步）。
-6. 在步骤 2 中，定位并指定 *URL*、*username* 和 *password* 属性的值。单击 "Finish"（完成）。
+
+[start=5]
+. 键入 *consultPool* 作为池名称，选择 *javax.sql.ConnectionPoolDataSource* 作为资源类型并选择 *MySql* 作为数据库驱动程序供应商。单击 "Next"（下一步）。
+
+[start=6]
+. 在步骤 2 中，定位并指定 *URL*、*username* 和 *password* 属性的值。单击 "Finish"（完成）。
+
image::images/gf-new-jdbc-pool2.png[title="GlassFish 管理控制台中的 "New JDBC Connection Pool"（新建 JDBC 连接池）面板"]
可以在 `glassfish-resources.xml` 中查找这些属性的值。
单击 "Finish"（完成）时，将在服务器上创建新的连接池，并在 "JDBC Connection Pools"（JDBC 连接池）节点下显示此连接池的节点。
-7. 在 "Common Tasks"（常见任务）导航面板中单击 *JDBC Resources*（JDBC 资源）节点并单击 "New"（新建）。
-8. 为 "JNDI Name"（JNDI 名称）键入 *jdbc/consult*，并在 "Pool Name"（池名称）下拉列表中选择 *consultPool*。单击 "OK"（确定）。
+
+[start=7]
+. 在 "Common Tasks"（常见任务）导航面板中单击 *JDBC Resources*（JDBC 资源）节点并单击 "New"（新建）。
+
+[start=8]
+. 为 "JNDI Name"（JNDI 名称）键入 *jdbc/consult*，并在 "Pool Name"（池名称）下拉列表中选择 *consultPool*。单击 "OK"（确定）。
+
image::images/gf-new-jdbc-resource.png[title="GlassFish 管理控制台中的 "New JDBC Resource"（新建 JDBC 资源）窗格"]
单击 "OK"（确定）时，将在服务器上创建新的 JDBC 资源，并在 "JDBC Resources"（JDBC 资源）节点下显示此资源的节点。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro.asciidoc
index 1da507f..fab6815 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro.asciidoc
@@ -48,23 +48,6 @@
The NetBeans IDE has provided long-standing support for JavaServer Faces. Starting with the release of JSF 2.0 and Java EE 6, NetBeans IDE has provided support for JSF 2.0 and JSF 2.1. For more information, see link:jsf20-support.html[+JSF 2.x Support in NetBeans IDE+].
-=== Contents
-
-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"]
-
-* <<support,Adding JSF 2.x Support to a Web Application>>
-* <<managedBean,Creating a Managed Bean>>
-* <<usingManagedBean,Using the Managed Bean Wizard>>
-* <<creatingConstructor,Creating a Constructor>>
-* <<addingProperties,Adding Properties>>
-* <<wire,Wiring the Managed Bean to Pages>>
-* <<index,index.xhtml>>
-* <<response,response.xhtml>>
-* <<template,Applying a Facelets Template>>
-* <<templateFile,Creating the Facelets Template File>>
-* <<templateClient,Creating Template Client Files>>
-* <<seealso,See Also>>
-
To complete this tutorial, you need the following software and resources.
|===
@@ -93,33 +76,51 @@
The IDE also allows you to create new projects with JSF 2.x support. For more information, see link:jsf20-support.html#creatingSupport[+Creating a New Project with JSF 2.x Support+].
-1. Click the Open Project ( image::images/open-project-btn.png[] ) button in the IDE's main toolbar, or press Ctrl-Shift-O (⌘-Shift-O on Mac).
+1. Click the Open Project ( image:images/open-project-btn.png[] ) button in the IDE's main toolbar, or press Ctrl-Shift-O (⌘-Shift-O on Mac).
2. In the Open Project dialog, navigate to the location on your computer where you stored the unzipped tutorial project. Select it, then click Open Project to open it in the IDE.
*Note.* You might be prompted to resolve the reference to the JUnit libraries when you open the NetBeans project if you did not install the JUnit plugin when you installed the IDE.
-3. Run the project to see what it looks like in a browser. Either right-click the `jsfDemo` 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. The project is packaged and deployed to the GlassFish server, and your browser opens to display the welcome page (`index.xhtml`).
+
+[start=3]
+. Run the project to see what it looks like in a browser. Either right-click the `jsfDemo` 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. The project is packaged and deployed to the GlassFish server, and your browser opens to display the welcome page (`index.xhtml`).
+
image::images/run-project.png[title="Run the project to view it in a browser"]
-4. Click the Submit button. The response page (`response.xhtml`) displays as follows:
+
+[start=4]
+. Click the Submit button. The response page (`response.xhtml`) displays as follows:
+
image::images/response.png[title="The welcome and response pages are currently static pages"]
Currently the welcome and response pages are static and, together with the `stylesheet.css` file and `duke.png` image, are the only application files accessible from a browser.
-5. In the Projects window (Ctrl-1; ⌘-1 on Mac), right-click your project node and choose Properties to open the Project Properties window.
-6. Select the Frameworks category and then click the Add button.
-7. Select JavaServer Faces in the Add a Framework dialog box. Click OK.
+
+[start=5]
+. In the Projects window (Ctrl-1; ⌘-1 on Mac), right-click your project node and choose Properties to open the Project Properties window.
+
+[start=6]
+. Select the Frameworks category and then click the Add button.
+
+[start=7]
+. Select JavaServer Faces in the Add a Framework dialog box. Click OK.
+
image::images/add-framework.png[title="Add JSF support to an existing project"]
After selecting JavaServer Faces, various configuration options become available. Under the Libraries tab, you can specify how the project accesses JSF 2.x libraries. The JSF version that is available will depend upon the version of the IDE and the GlassFish server. The default option is to use the libraries included with the server (the GlassFish server). However, the IDE also bundles the JSF 2.x libraries. (You can select the Registered Libraries option if you want your project to use these.)
image::images/libraries-tab.png[title="Specify access to JSF 2.x libraries"]
-8. Click the Configuration tab. You can specify how the Faces servlet is registered in the project's deployment descriptor. You can also indicate whether you want Facelets or JSP pages to be the used with the project.
+
+[start=8]
+. Click the Configuration tab. You can specify how the Faces servlet is registered in the project's deployment descriptor. You can also indicate whether you want Facelets or JSP pages to be the used with the project.
+
image::images/jsf-configuration.png[title="Specify Faces servlet options and preferred language"]
You can also easily configure your project to use various JSF component suites in the Components tab. To use a component suite you will need to download the required libraries and use the Ant Library manager to create a new library with the component suite libraries.
image::images/jsf-components.png[title="Specify Faces servlet options and preferred language"]
-9. Click OK to finalize changes and exit the Project Properties window.
+
+[start=9]
+. Click OK to finalize changes and exit the Project Properties window.
After adding JSF support to your project, the project's `web.xml` deployment descriptor is modified to look as follows. (Changes in *bold*.)
@@ -179,8 +180,11 @@
* *Package:* guessNumber
* *Name:* UserNumberBean
* *Scope:* Session
+
image::images/managed-bean.png[title="Use the JSF Managed Bean wizard to create a new managed bean"]
-3. Click Finish. The `UserNumberBean` class is generated and opens in the editor. Note the following annotations (shown in *bold*):
+
+[start=3]
+. Click Finish. The `UserNumberBean` class is generated and opens in the editor. Note the following annotations (shown in *bold*):
[source,java]
----
@@ -236,8 +240,13 @@
The above code generates a random number between 0 and 10, and outputs the number in the server log.
-2. Fix imports. To do so, click the hint badge ( image::images/hint-icon.png[] ) that displays in the editor's left margin, then choose the option to import `java.util.Random` into the class.
-3. Run the project again (click the Run Project ( image::images/run-project-btn.png[] ) button, or press F6; fn-F6 on Mac). When you run your project, the server's log file automatically opens in the Output window.
+
+[start=2]
+. Fix imports. To do so, click the hint badge ( image:images/hint-icon.png[] ) that displays in the editor's left margin, then choose the option to import `java.util.Random` into the class.
+
+[start=3]
+. Run the project again (click the Run Project ( image:images/run-project-btn.png[] ) button, or press F6; fn-F6 on Mac). When you run your project, the server's log file automatically opens in the Output window.
+
image::images/output1.png[title="The server's log file is automatically opens in the Output window"]
Notice that you do not see "`Duke's number: `" listed in the output (as would be indicated from the constructor). A `UserNumberBean` object was not created because JSF uses _lazy instantiation_ by default. That is, beans in particular scopes are only created and initialized when they are needed by the application.
@@ -245,7 +254,9 @@
The link:http://javaserverfaces.java.net/nonav/docs/2.1/managed-bean-javadocs/index.html[+Javadoc for the `@ManagedBean` annotation+] states:
_If the value of the `eager()` attribute is `true`, and the `managed-bean-scope` value is "application", the runtime must instantiate this class when the application starts. This instantiation and storing of the instance must happen before any requests are serviced. If _eager_ is unspecified or `false`, or the `managed-bean-scope` is something other than "application", the default "lazy" instantiation and scoped storage of the managed bean happens._
-4. Because `UserNumberBean` is session-scoped, have it implement the `Serializable` interface.
+
+[start=4]
+. Because `UserNumberBean` is session-scoped, have it implement the `Serializable` interface.
[source,java]
----
@@ -254,7 +265,7 @@
@SessionScoped
public class UserNumberBean *implements Serializable* {
----
-Use the hint badge ( image::images/hint-icon.png[] ) to import `java.io.Serializable` into the class.
+Use the hint badge ( image:images/hint-icon.png[] ) to import `java.io.Serializable` into the class.
[[addingProperties]]
@@ -274,14 +285,22 @@
Integer randomInt;
*Integer userNumber;*
----
-2. Right-click in the editor and choose Insert Code (Alt-Insert; Ctrl-I on Mac). Choose Getter and Setter.
+
+[start=2]
+. Right-click in the editor and choose Insert Code (Alt-Insert; Ctrl-I on Mac). Choose Getter and Setter.
+
image::images/getter-setter.png[title="Use the IDE to generate accessor methods for properties"]
-3. Select the `userNumber` : `Integer` option. Click Generate.
+
+[start=3]
+. Select the `userNumber` : `Integer` option. Click Generate.
+
image::images/generate-getters-setters.png[title="Use the IDE to generate accessor methods for properties"]
Note that the `getUserNumber()` and `setUserNumber(Integer userNumber)` methods are added to the class.
-4. Create a `response` property. Declare a `String` named `response`.
+
+[start=4]
+. Create a `response` property. Declare a `String` named `response`.
[source,java]
----
@@ -294,7 +313,9 @@
Integer userNumber;
*String response;*
----
-5. Create a getter method for `response`. (This application will not require a setter.) You could use the IDE's Generate Code pop-up shown in step 2 above to generate template code. For purposes of this tutorial however, just paste the below method into the class.
+
+[start=5]
+. Create a getter method for `response`. (This application will not require a setter.) You could use the IDE's Generate Code pop-up shown in step 2 above to generate template code. For purposes of this tutorial however, just paste the below method into the class.
[source,html]
----
@@ -318,7 +339,9 @@
The above method performs two functions:
1. It tests whether the user-entered number (`userNumber`) equals the random number generated for the session (`randomInt`) and returns a `String` response accordingly.
2. It invalidates the user session if the user guesses the right number (i.e., if `userNumber` equals `randomInt`). This is necessary so that a new number is generated should the user want to play again.
-6. Right-click in the editor and choose Fix Imports (Alt-Shift-I; ⌘-Shift-I on Mac). Import statements are automatically created for:
+
+[start=6]
+. Right-click in the editor and choose Fix Imports (Alt-Shift-I; ⌘-Shift-I on Mac). Import statements are automatically created for:
* `javax.servlet.http.HttpSession`
* `javax.faces.context.FacesContext`
@@ -326,7 +349,8 @@
image::images/documentation-support.png[title="Press Ctrl-Space to invoke code-completion and 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.
@@ -353,14 +377,19 @@
1. Open the `index.xhtml` page in the editor. Either double-click the `index.xhtml` node from the Projects window, or press Alt-Shift-O to use the Go to File dialog.
Both index and response pages already contain the JSF UI components you require for this exercise. Simply uncomment them and comment out the HTML elements currently being used.
-2. Comment out the HTML form element. To do so, highlight the HTML form element as in the image below, then press Ctrl-/ (⌘-/ on Mac).
+
+[start=2]
+. Comment out the HTML form element. To do so, highlight the HTML form element as in the image below, then press Ctrl-/ (⌘-/ on Mac).
*Note: *To highlight, either click and drag in the editor with your mouse, or, using the keyboard, hold Shift and press the arrow keys.
+
image::images/comment-out.png[title="Highlight code, then press Ctrl-/ to comment out code"]
Use Ctrl-/ (⌘-/ on Mac) to toggle comments in the editor. You can also apply this keyboard shortcut to other file types, such as Java and CSS.
-3. Uncomment the JSF HTML form component. Highlight the component as in the image below, then press Ctrl-/ (⌘-/ on Mac).
+
+[start=3]
+. Uncomment the JSF HTML form component. Highlight the component as in the image below, then press Ctrl-/ (⌘-/ on Mac).
*Note.* You might need to press Ctrl-/ twice to uncomment the code.
@@ -370,7 +399,9 @@
After uncommenting the JSF HTML form component, the editor indicates that the `<h:form>`, `<h:inputText>`, and `<h:commandButton>` tags haven't been declared.
image::images/undeclared-component.png[title="The editor provides error messages for undeclared components"]
-4. To declare these components, use the IDE's code completion to add the tag library namespace to the page's `<html>` tag. Place your cursor on any of the undeclared tags and press Alt-Enter and click Enter to add the suggested tag library. (If there are multiple options, make sure to select the tag that is displayed in the editor before clicking Enter.) The JSF HTML tag library namespace is added to the `<html>` tag (shown in *bold* below), and the error indicators disappear.
+
+[start=4]
+. To declare these components, use the IDE's code completion to add the tag library namespace to the page's `<html>` tag. Place your cursor on any of the undeclared tags and press Alt-Enter and click Enter to add the suggested tag library. (If there are multiple options, make sure to select the tag that is displayed in the editor before clicking Enter.) The JSF HTML tag library namespace is added to the `<html>` tag (shown in *bold* below), and the error indicators disappear.
*Note.* If the IDE does not provide the option to add the tag library you will need to manually modify the ``<html>`` element.
@@ -381,7 +412,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"
*xmlns:h="http://xmlns.jcp.org/jsf/html"*>
----
-5. Use the JSF expression language to bind `UserNumberBean`'s `userNumber` property to the `inputText` component. The `value` attribute can be used to specify the current value of the rendered component. Type in the code displayed in *bold* below.
+
+[start=5]
+. Use the JSF expression language to bind `UserNumberBean`'s `userNumber` property to the `inputText` component. The `value` attribute can be used to specify the current value of the rendered component. Type in the code displayed in *bold* below.
[source,java]
----
@@ -392,7 +425,9 @@
JSF expression language uses the `#{}` syntax. Within these delimiters, you specify the name of the managed bean and the bean property you want to apply, separated by a dot (`.`). Now, when the form data is sent to the server, the value is automatically saved in the `userNumber` property using the property's setter (`setUserNumber()`). Also, when the page is requested and a value for `userNumber` has already been set, the value will automatically display in the rendered `inputText` component. For more information, see the link:http://docs.oracle.com/javaee/7/tutorial/doc/jsf-develop001.htm#BNAQP[+Java EE 7 Tutorial: 12.1.2 Using the EL to Reference Managed Beans+].
-6. Specify the destination for the request that is invoked when clicking the form button. In the HTML version of the form, you were able to do this using the `<form>` tag's `action` attribute. With JSF, you can use the `commandButton`'s `action` attribute. Furthermore, due to JSF 2.x's implicit navigation feature, you only need to specify the name of the destination file, without the file extension.
+
+[start=6]
+. Specify the destination for the request that is invoked when clicking the form button. In the HTML version of the form, you were able to do this using the `<form>` tag's `action` attribute. With JSF, you can use the `commandButton`'s `action` attribute. Furthermore, due to JSF 2.x's implicit navigation feature, you only need to specify the name of the destination file, without the file extension.
Type in the code displayed in *bold* below.
@@ -426,31 +461,48 @@
Steps 7 through 12 below are optional. If you'd like to quickly build the project, skip ahead to <<response,`response.xhtml`>>.
-7. Test whether the above EL expression does in fact call the `setUserNumber()` method when the request is processed. To do so, use the IDE's Java debugger.
+
+[start=7]
+. Test whether the above EL expression does in fact call the `setUserNumber()` method when the request is processed. To do so, use the IDE's Java debugger.
Switch to the `UserNumberBean` class (Press Ctrl-Tab and choose the file from the list.) Set a breakpoint on the `setUserNumber()` method signature. You can do this by clicking in the left margin. A red badge displays, indicating a method breakpoint has been set.
image::images/set-breakpoint.png[title="Click in the editor's left margin to set breakpoints"]
-8. Click the Debug Project ( image::images/breakpoint-btn.png[] ) button in the IDE's main toolbar. A debug session starts, and the project welcome page opens in the browser.
+
+[start=8]
+. Click the Debug Project ( image:images/breakpoint-btn.png[] ) button in the IDE's main toolbar. A debug session starts, and the project welcome page opens in the browser.
*Notes.*
* You might be prompted to confirm the server port for debugging the application.
* If a Debug Project dialog displays, select the default 'Server side Java' option and click Debug.
-9. In the browser, enter a number into the form and click the 'submit' button.
-10. Switch back to the IDE and inspect the `UserNumberBean` class. The debugger is suspended within the `setUserNumber()` method.
+
+[start=9]
+. In the browser, enter a number into the form and click the 'submit' button.
+
+[start=10]
+. Switch back to the IDE and inspect the `UserNumberBean` class. The debugger is suspended within the `setUserNumber()` method.
+
image::images/debugger-suspended.png[title="Debugger suspends according to breakpoints"]
-11. Open the Debugger's Variables window (Choose Window > Debugging > Variables, or press Ctrl-Shift-1). You see the variable values for the point at which the debugger is suspended.
+
+[start=11]
+. Open the Debugger's Variables window (Choose Window > Debugging > Variables, or press Ctrl-Shift-1). You see the variable values for the point at which the debugger is suspended.
+
image::images/variables-window.png[title="Monitor variable values using the Debugger's Variables window"]
In the image above, a value of '`4`' is provided for the `userNumber` variable in the `setUserNumber()` signature. (The number 4 was entered into the form.) '`this`' refers to the `UserNumberBean` object that was created for the user session. Beneath it, you see that the value for the `userNumber` property is currently `null`.
-12. In the Debugger toolbar, click the Step Into ( image::images/step-into-btn.png[] ) button. The debugger executes the line on which it is currently suspended. The Variables window refreshes, indicating changes from the execution.
+
+[start=12]
+. In the Debugger toolbar, click the Step Into ( image:images/step-into-btn.png[] ) button. The debugger executes the line on which it is currently suspended. The Variables window refreshes, indicating changes from the execution.
+
image::images/variables-window2.png[title="Variables window refreshes when stepping through code"]
The `userNumber` property is now set to the value entered in the form.
-13. Choose Debug > Finish Debugger Session (Shift-F5; Shift-Fn-F5 on Mac) from the main menu to stop the debugger.
+
+[start=13]
+. Choose Debug > Finish Debugger Session (Shift-F5; Shift-Fn-F5 on Mac) from the main menu to stop the debugger.
[[response]]
@@ -461,7 +513,9 @@
*Note: *To highlight, either click and drag in the editor with your mouse, or, using the keyboard, hold Shift and press the arrow keys.
-3. Uncomment the JSF HTML form component. Highlight the opening and closing `<h:form>` tags and the code between them, then press Ctrl-/ (⌘-/ on Mac).
+
+[start=3]
+. Uncomment the JSF HTML form component. Highlight the opening and closing `<h:form>` tags and the code between them, then press Ctrl-/ (⌘-/ on Mac).
At this stage, your code between the `<body>` tags looks as follows:
@@ -502,7 +556,9 @@
After uncommenting the JSF HTML form component, the editor indicates that the `<h:form>` and `<h:commandButton>` tags haven't been declared.
-4. To declare these components, use the IDE's code completion to add the tag library namespace to the page's `<html>` tag.
+
+[start=4]
+. To declare these components, use the IDE's code completion to add the tag library namespace to the page's `<html>` tag.
Use the editor's code completion support to add required JSF namespaces to the file. When selecting a JSF or Facelets tag through code completion, the required namespace is automatically added to the document's root element. For more information, see link:jsf20-support.html#facelets[+JSF 2.x Support in NetBeans IDE+].
@@ -519,7 +575,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"
*xmlns:h="http://xmlns.jcp.org/jsf/html"*>
----
-5. Specify the destination for the request that is invoked when the user clicks the form button. You want to set the button so that when a user clicks it, he or she is returned to the index page. To accomplish this, use the `commandButton`'s `action` attribute. Type in the code displayed in *bold*.
+
+[start=5]
+. Specify the destination for the request that is invoked when the user clicks the form button. You want to set the button so that when a user clicks it, he or she is returned to the index page. To accomplish this, use the `commandButton`'s `action` attribute. Type in the code displayed in *bold*.
[source,xml]
----
@@ -533,7 +591,9 @@
*Note: *By typing `action="index"`, you are relying on JSF's implicit navigation feature. When a user clicks the form button, the JSF runtime searches for a file named `index`. It assumes the file extension is the same as the extension used by file from which the request originated (`response*.xhtml*`) and looks for for the `index.xhtml` file in the same directory as the originating file (i.e., the webroot).
-6. Replace the static "[ response here ]" text with the value of the `UserNumberBean`'s `response` property. To do this, use the JSF expression language. Enter the following (in *bold*).
+
+[start=6]
+. Replace the static "[ response here ]" text with the value of the `UserNumberBean`'s `response` property. To do this, use the JSF expression language. Enter the following (in *bold*).
[source,html]
----
@@ -542,7 +602,10 @@
<h4>*<h:outputText value="#{UserNumberBean.response}"/>*</h4>
----
-7. Run the project (click the Run Project ( image::images/run-project-btn.png[] ) button, or press F6; fn-F6 on Mac). When the welcome page displays in the browser, enter a number and click `submit`. You see the response page display similar to the following (provided you did not guess the correct number).
+
+[start=7]
+. Run the project (click the Run Project ( image:images/run-project-btn.png[] ) button, or press F6; fn-F6 on Mac). When the welcome page displays in the browser, enter a number and click `submit`. You see the response page display similar to the following (provided you did not guess the correct number).
+
image::images/response2.png[title="View the current status of the project in a browser"]
Two things are wrong with the current status of the response page:
@@ -552,7 +615,10 @@
The following two steps correct these points, respectively.
-8. Set the `<h:outputText>` tag's `escape` attribute to `false`. Place your cursor between `outputText` and `value`, insert a space, then press Ctrl-Space to invoke code-completion. Scroll down to choose the `escape` attribute and inspect the documentation.
+
+[start=8]
+. Set the `<h:outputText>` tag's `escape` attribute to `false`. Place your cursor between `outputText` and `value`, insert a space, then press Ctrl-Space to invoke code-completion. Scroll down to choose the `escape` attribute and inspect the documentation.
+
image::images/escape-false.png[title="Press Ctrl-Space to view possible attribute values and documentation"]
As indicated by the documentation, the `escape` value is set to `true` by default. This means that any characters that would normally be parsed as html are included in the string, as shown above. Setting the value to `false` enables any characters that can be parsed as html to be rendered as such.
@@ -565,7 +631,9 @@
<h4><h:outputText *escape="false"* value="#{UserNumberBean.response}"/></h4>
----
-9. Set the `<h:form>` tag's `prependId` attribute to `false`. Place your cursor just after '`m`' in `<h:form>` and insert a space, then press Ctrl-Space to invoke code-completion. Scroll down to choose the `prependId` attribute and inspect the documentation. Then click Enter, and type `false` as the value.
+
+[start=9]
+. Set the `<h:form>` tag's `prependId` attribute to `false`. Place your cursor just after '`m`' in `<h:form>` and insert a space, then press Ctrl-Space to invoke code-completion. Scroll down to choose the `prependId` attribute and inspect the documentation. Then click Enter, and type `false` as the value.
[source,java]
----
@@ -588,16 +656,28 @@
The id for the form element is `j_idt5`, and this id is _prepended_ to the id for the Back button included in the form (shown in *bold* above). Because the Back button relies on the `#backButton` style rule (defined in `stylesheet.css`), this rule becomes obstructed when the JSF id is prepended. This can be avoided by setting `prependId` to `false`.
-10. Run the project again (click the Run Project ( image::images/run-project-btn.png[] ) button, or press F6; fn-F6 on Mac). Enter a number in the welcome page, then click Submit. The response page now displays the response message without the `<p>` tags, and the Back button is positioned correctly.
+
+[start=10]
+. Run the project again (click the Run Project ( image:images/run-project-btn.png[] ) button, or press F6; fn-F6 on Mac). Enter a number in the welcome page, then click Submit. The response page now displays the response message without the `<p>` tags, and the Back button is positioned correctly.
+
image::images/response3.png[title="View the current status of the project in a browser"]
-11. Click the Back button. Because the current value of `UserNumberBean`'s `userNumber` property is bound to the JSF `inputText` component, the number you previously entered is now displayed in the text field.
-12. Inspect the server log in the IDE's Output window (Ctrl-4; ⌘-4 on Mac) to determine what the correct guess number is.
+
+[start=11]
+. Click the Back button. Because the current value of `UserNumberBean`'s `userNumber` property is bound to the JSF `inputText` component, the number you previously entered is now displayed in the text field.
+
+[start=12]
+. Inspect the server log in the IDE's Output window (Ctrl-4; ⌘-4 on Mac) to determine what the correct guess number is.
If you can't see the server log for any reason, you can open it by switching to the Services window (Ctrl-5; ⌘-5 on Mac) and expanding the Servers node. Then right-click the GlassFish server on which the project is deployed and choose View Server Log. If you cannot see the number in the server log, try rebuilding the application by right-clicking the project node and choosing Clean and Build.
-13. Type in the correct number and click Submit. The application compares your input with the currently saved number and displays the appropriate message.
+
+[start=13]
+. Type in the correct number and click Submit. The application compares your input with the currently saved number and displays the appropriate message.
+
image::images/yay.png[title="Correct response is displayed when entering the matching number"]
-14. Click the Back button again. Notice that the previously entered number is no longer displayed in the text field. Recall that `UserNumberBean`'s `getResponse()` method <<getResponse,invalidates the current user session>> upon guessing the correct number.
+
+[start=14]
+. Click the Back button again. Notice that the previously entered number is no longer displayed in the text field. Recall that `UserNumberBean`'s `getResponse()` method <<getResponse,invalidates the current user session>> upon guessing the correct number.
@@ -624,12 +704,16 @@
1. Create a Facelets template file. Press Ctrl-N (⌘-N on Mac) to open the File wizard. Select the JavaServer Faces category, then Facelets Template. Click Next.
2. Type in `template` for the file name.
3. Choose from any of the eight layout styles and click Finish. (You will be using the existing stylesheet, so it does not matter which layout style you choose.)
+
image::images/layout-style.png[title="Facelets Template wizard lets you select from common layout styles"]
+
The wizard generates the `template.xhtml` file and accompanying stylesheets based on your selection, and places these in a `resources` > `css` folder within the project's webroot.
After completing the wizard, the template file opens in the editor. To view the template in a browser, right-click in the editor and choose View.
-4. Examine the template file markup. Note the following points:
+
+[start=4]
+. Examine the template file markup. Note the following points:
* The `facelets` tag library is declared in the page's `<html>` tag. The tag library has the `ui` prefix.
[source,java]
@@ -661,8 +745,12 @@
*<ui:insert name="top">Top</ui:insert>*
</div>
----
-5. Reexamine the <<staticPage,welcome>> and <<responsePage,response>> pages. The only content that changes between the two pages is the title and the text contained in the grey square. The template, therefore, can provide all remaining content.
-6. Replace the entire content of your template file with the content below.
+
+[start=5]
+. Reexamine the <<staticPage,welcome>> and <<responsePage,response>> pages. The only content that changes between the two pages is the title and the text contained in the grey square. The template, therefore, can provide all remaining content.
+
+[start=6]
+. Replace the entire content of your template file with the content below.
[source,html]
----
@@ -694,7 +782,9 @@
* The project's `stylesheet.css` file replaces the template stylesheet references created by the wizard.
* All `<ui:insert>` tags (and their containing `<div>` tags) have been removed, except for one named `box`.
* An `<ui:insert>` tag pair has been placed around the page title, and named `title`.
-7. Copy relevant code from either the `index.xhtml` or `response.xhtml` file into the template. Add the content shown in *bold* below to the template file's `<h:body>` tags.
+
+[start=7]
+. Copy relevant code from either the `index.xhtml` or `response.xhtml` file into the template. Add the content shown in *bold* below to the template file's `<h:body>` tags.
[source,html]
----
@@ -710,7 +800,9 @@
</div>*
</h:body>
----
-8. Run the project. When the welcome page opens in the browser, modify the URL to the following:
+
+[start=8]
+. Run the project. When the welcome page opens in the browser, modify the URL to the following:
[source,java]
----
@@ -718,6 +810,7 @@
http://localhost:8080/jsfDemo/faces/template.xhtml
----
The template file displays as follows:
+
image::images/facelets-template.png[title="View the Facelets template in a browser"]
The project now contains a template file that provides the appearance and structure for all views. You can now create client files that invoke the template.
@@ -734,9 +827,14 @@
1. Press Ctrl-N (⌘-N on Mac) to open the New File wizard. Select the JavaServer Faces category, then select Facelets Template Client. Click Next.
2. Type in `greeting` for the file name.
3. Click the Browse button next to the Template field, then use the dialog that displays to navigate to the `template.xhtml` file you created in the previous section.
+
image::images/template-client.png[title="The Facelets Template Client wizard"]
-4. Click Finish. The new `greeting.xhtml` template client file is generated and displays in the editor.
-5. Examine the markup. Note the content hightlighted in *bold*.
+
+[start=4]
+. Click Finish. The new `greeting.xhtml` template client file is generated and displays in the editor.
+
+[start=5]
+. Examine the markup. Note the content hightlighted in *bold*.
[source,xml]
----
@@ -762,7 +860,9 @@
</html>
----
The template client file references a template using the `<ui:composition>` tag's `template` attribute. Because the template contains `<ui:insert>` tags for `title` and `box`, this template client contains `<ui:define>` tags for these two names. The content that you specify between the `<ui:define>` tags is what will be inserted into the template between the `<ui:insert>` tags of the corresponding name.
-6. Specify `greeting` as the title for the file. Make the following change in *bold*.
+
+[start=6]
+. Specify `greeting` as the title for the file. Make the following change in *bold*.
[source,xml]
----
@@ -771,7 +871,9 @@
*Greeting*
</ui:define>
----
-7. Switch to the `index.xhtml` file (press Ctrl-Tab) and copy the content that would normally appear in the grey square that displays in the rendered page. Then switch back to `greeting.xhtml` and paste it into the template client file. (Changes in *bold*.)
+
+[start=7]
+. Switch to the `index.xhtml` file (press Ctrl-Tab) and copy the content that would normally appear in the grey square that displays in the rendered page. Then switch back to `greeting.xhtml` and paste it into the template client file. (Changes in *bold*.)
[source,xml]
----
@@ -794,7 +896,9 @@
</h:form>*
</ui:define>
----
-8. Declare the JSF HTML tag library for the file. Place your cursor on any of the tags that are flagged with an error (any tag using the '`h`' prefix), and press Ctrl-Space. Then select the tag from the list of code completion suggestions. The tag library namespace is added to the file's `<html>` tag (shown in *bold* below), and the error indicators disappear.
+
+[start=8]
+. Declare the JSF HTML tag library for the file. Place your cursor on any of the tags that are flagged with an error (any tag using the '`h`' prefix), and press Ctrl-Space. Then select the tag from the list of code completion suggestions. The tag library namespace is added to the file's `<html>` tag (shown in *bold* below), and the error indicators disappear.
[source,java]
----
@@ -846,11 +950,16 @@
</html>
----
Note that the file is identical to `greeting.xhtml`, except for the content specified between the `<ui:define>` tags for `title` and `box`.
-2. In the project's `web.xml` deployment descriptor, modify the welcome file entry so that `greeting.xhtml` is the page that opens when the application is run.
+
+[start=2]
+. In the project's `web.xml` deployment descriptor, modify the welcome file entry so that `greeting.xhtml` is the page that opens when the application is run.
In the Projects window, double-click Configuration Files > `web.xml` to open it in the editor. Under the Pages tab, change the Welcome Files field to `faces/greeting.xhtml`.
+
image::images/welcome-files.png[title="Change the Welcome Files entry in the deployment descriptor"]
-3. Run the project to see what it looks like in a browser. Press F6 (fn-F6 on Mac), or click the Run Project ( image::images/run-project-btn.png[] ) button in the main toolbar. The project is deployed to the GlassFish server, and opens in a browser.
+
+[start=3]
+. Run the project to see what it looks like in a browser. Press F6 (fn-F6 on Mac), or click the Run Project ( image:images/run-project-btn.png[] ) button in the main toolbar. The project is deployed to the GlassFish server, and opens in a browser.
Using the Facelets template and template client files, the application behaves in exactly the same way as it did previously. By factoring out duplicated code in the application's welcome and response pages, you succeeded in reducing the size of the application and eliminated the possibility of writing more duplicate code, should more pages be added at a later point. This can make development more efficient and easier to maintain when working in large projects.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_ja.asciidoc
index 31b41d4..b58661c 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_ja.asciidoc
@@ -48,23 +48,6 @@
NetBeans IDEは、JavaServer Facesのサポートを長期にわたって提供してきました。JSF 2.0およびJava EE 6のリリース以降、NetBeans IDEはJSF 2.0およびJSF 2.1のサポートを提供してきました。詳細は、link:jsf20-support.html[+NetBeans IDEでのJSF 2.xのサポート+]を参照してください。
-=== 内容
-
-image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます"]
-
-* <<support,WebアプリケーションへのJSF 2.xサポートの追加>>
-* <<managedBean,管理対象Beanの作成>>
-* <<usingManagedBean,管理対象Beanウィザードの使用>>
-* <<creatingConstructor,コンストラクタの作成>>
-* <<addingProperties,プロパティの追加>>
-* <<wire,ページへの管理対象Beanの接続>>
-* <<index,index.xhtml>>
-* <<response,response.xhtml>>
-* <<template,Faceletsテンプレートの適用>>
-* <<templateFile,Faceletsテンプレート・ファイルの作成>>
-* <<templateClient,テンプレート・クライアント・ファイルの作成>>
-* <<seealso,関連項目>>
-
このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。
|===
@@ -93,33 +76,51 @@
IDEで、JSF 2.xをサポートする新しいプロジェクトを作成することもできます。詳細は、link:jsf20-support.html#creatingSupport[+JSF 2.xサポートを含む新しいプロジェクトの作成+]を参照してください。
-1. IDEのメイン・ツールバーで「プロジェクトを開く」(image::images/open-project-btn.png[])ボタンをクリックするか、[Ctrl]-[Shift]-[O] (Macの場合は[⌘]-[Shift]-[O])を押します。
+1. IDEのメイン・ツールバーで「プロジェクトを開く」(image:images/open-project-btn.png[])ボタンをクリックするか、[Ctrl]-[Shift]-[O] (Macの場合は[⌘]-[Shift]-[O])を押します。
2. 「プロジェクトを開く」ダイアログで、展開したチュートリアル・プロジェクトを格納した場所に移動します。選択して「プロジェクトを開く」をクリックし、IDEで開きます。
*注意:*IDEのインストール時にJUnitプラグインをインストールしていない場合は、NetBeansプロジェクトを開くときにJUnitライブラリへの参照を解決するよう求められることがあります。
-3. プロジェクトを実行して、ブラウザでどのように表示されるかを確認します。「プロジェクト」ウィンドウで「`jsfDemo`」プロジェクト・ノードを右クリックして「実行」を選択するか、メイン・ツールバーの「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックします。プロジェクトがパッケージ化されてGlassFishサーバーにデプロイされ、ブラウザが開いて開始ページ(`index.xhtml`)が表示されます。
+
+[start=3]
+. プロジェクトを実行して、ブラウザでどのように表示されるかを確認します。「プロジェクト」ウィンドウで「`jsfDemo`」プロジェクト・ノードを右クリックして「実行」を選択するか、メイン・ツールバーの「プロジェクトの実行」(image:images/run-project-btn.png[])ボタンをクリックします。プロジェクトがパッケージ化されてGlassFishサーバーにデプロイされ、ブラウザが開いて開始ページ(`index.xhtml`)が表示されます。
+
image::images/run-project.png[title="プロジェクトを実行してブラウザで表示"]
-4. 「送信」ボタンをクリックします。レスポンス・ページ(`response.xhtml`)が次のように表示されます。
+
+[start=4]
+. 「送信」ボタンをクリックします。レスポンス・ページ(`response.xhtml`)が次のように表示されます。
+
image::images/response.png[title="現在静的なページである開始ページとレスポンス・ページ"]
現在、開始ページとレスポンス・ページは静的なページで、`stylesheet.css`ファイルと`duke.png`イメージがあり、ブラウザからアクセスできる唯一のアプリケーション・ファイルです。
-5. 「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])で、プロジェクト・ノードを右クリックし、「プロパティ」を選択して、「プロジェクト・プロパティ」ウィンドウを開きます。
-6. 「フレームワーク」カテゴリを選択し、「追加」ボタンをクリックします。
-7. 「フレームワークの追加」ダイアログ・ボックスで、「JavaServer Faces」を選択します。「OK」をクリックします。
+
+[start=5]
+. 「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])で、プロジェクト・ノードを右クリックし、「プロパティ」を選択して、「プロジェクト・プロパティ」ウィンドウを開きます。
+
+[start=6]
+. 「フレームワーク」カテゴリを選択し、「追加」ボタンをクリックします。
+
+[start=7]
+. 「フレームワークの追加」ダイアログ・ボックスで、「JavaServer Faces」を選択します。「OK」をクリックします。
+
image::images/add-framework.png[title="既存のプロジェクトへのJSFサポートの追加"]
JavaServer Facesを選択すると、様々な構成オプションが使用可能になります。「ライブラリ」タブで、プロジェクトがJSF 2.xライブラリにアクセスする方法を指定できます。使用可能なJSFバージョンは、IDEとGlassFishサーバーのバージョンによって異なります。デフォルト・オプションでは、サーバー(GlassFishサーバー)に含まれているライブラリを使用します。ただし、IDEではJSF 2.xライブラリもバンドルされます。プロジェクトで登録されているライブラリを使用する場合は、「登録されているライブラリ」オプションを選択できます。
image::images/libraries-tab.png[title="JSF 2.xライブラリへのアクセスの指定"]
-8. 「構成」タブをクリックします。Facesサーブレットをプロジェクトのデプロイメント・ディスクリプタにどのように登録するかを指定できます。また、プロジェクトでFaceletsまたはJSPページを使用するかどうかを示すこともできます。
+
+[start=8]
+. 「構成」タブをクリックします。Facesサーブレットをプロジェクトのデプロイメント・ディスクリプタにどのように登録するかを指定できます。また、プロジェクトでFaceletsまたはJSPページを使用するかどうかを示すこともできます。
+
image::images/jsf-configuration.png[title="Facesサーブレット・オプションと優先言語の指定"]
プロジェクトで使用する様々なJSFコンポーネント・スイートを「コンポーネント」タブで簡単に構成することもできます。コンポーネント・スイートを使用するには、必要なライブラリをダウンロードし、Antライブラリ・マネージャを使用して、コンポーネント・スイートのライブラリを含む新しいライブラリを作成する必要があります。
image::images/jsf-components.png[title="Facesサーブレット・オプションと優先言語の指定"]
-9. 「OK」をクリックして変更を確定し、「プロジェクト・プロパティ」ウィンドウを終了します。
+
+[start=9]
+. 「OK」をクリックして変更を確定し、「プロジェクト・プロパティ」ウィンドウを終了します。
プロジェクトにJSFサポートを追加すると、プロジェクトの`web.xml`デプロイメント・ディスクリプタが変更されて次のようになります。変更場所は*太字*で示されています。
@@ -179,8 +180,11 @@
* *パッケージ:* guessNumber
* *名前:* UserNumberBean
* *スコープ:* session
+
image::images/managed-bean.png[title="JSF管理対象Beanウィザードを使用した新しい管理対象Beanの作成"]
-3. 「終了」をクリックします。`UserNumberBean`クラスが生成され、エディタで開かれます。次の注釈(*太字*で表示)を確認します。
+
+[start=3]
+. 「終了」をクリックします。`UserNumberBean`クラスが生成され、エディタで開かれます。次の注釈(*太字*で表示)を確認します。
[source,java]
----
@@ -236,8 +240,13 @@
このコードは0から10の間のランダムな数値を生成し、その数値をサーバー・ログに出力します。
-2. インポートを修正します。そのためには、エディタの左マージンに表示されるヒント・バッチ(image::images/hint-icon.png[])をクリックし、`java.util.Random`をクラスにインポートするオプションを選択します。
-3. プロジェクトを再度実行します(「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックするか、[F6] (Macの場合は[fn]-[F6])を押します)。プロジェクトを実行すると、サーバーのログ・ファイルが「出力」ウィンドウに自動的に開かれます。
+
+[start=2]
+. インポートを修正します。そのためには、エディタの左マージンに表示されるヒント・バッチ(image:images/hint-icon.png[])をクリックし、`java.util.Random`をクラスにインポートするオプションを選択します。
+
+[start=3]
+. プロジェクトを再度実行します(「プロジェクトの実行」(image:images/run-project-btn.png[])ボタンをクリックするか、[F6] (Macの場合は[fn]-[F6])を押します)。プロジェクトを実行すると、サーバーのログ・ファイルが「出力」ウィンドウに自動的に開かれます。
+
image::images/output1.png[title="「出力」ウィンドウにサーバーのログ・ファイルが自動的に開きます。"]
コンストラクタで示されるように、出力には`Duke's number: `が表示されません。`UserNumberBean`オブジェクトは作成されませんでした。これは、JSFがデフォルトで_遅延インスタンス化_を使用するためです。つまり、特定のスコープ内のBeansは、アプリケーションで必要とされたときにのみ作成され、インスタンス化されます。
@@ -245,7 +254,9 @@
link:http://javaserverfaces.java.net/nonav/docs/2.1/managed-bean-javadocs/index.html[+`@ManagedBean`注釈用のJavadoc+]には、次のように記載されています。
_`eager()`属性の値が`true`で、`managed-bean-scope`の値がapplicationの場合は、アプリケーションの開始時にランタイムがこのクラスをインスタンス化する必要があります。このインスタンス化とインスタンスの格納は、他のリクエストを処理する前に実行される必要があります。_eager_の値が指定されていないか`false`の場合、または`managed-bean-scope`がapplication以外の場合は、デフォルトの「遅延」インスタンス化と管理対象Beanのスコープ指定記憶域が生じます。_
-4. `UserNumberBean`はセッション・スコープ指定されているため、`Serializable`インタフェースを実装させます。
+
+[start=4]
+. `UserNumberBean`はセッション・スコープ指定されているため、`Serializable`インタフェースを実装させます。
[source,java]
----
@@ -254,7 +265,7 @@
@SessionScoped
public class UserNumberBean *implements Serializable* {
----
-ヒント・バッジ(image::images/hint-icon.png[])を使用して、`java.io.Serializable`をクラスにインポートします。
+ヒント・バッジ(image:images/hint-icon.png[])を使用して、`java.io.Serializable`をクラスにインポートします。
[[addingProperties]]
@@ -274,14 +285,22 @@
Integer randomInt;
*Integer userNumber;*
----
-2. エディタ内で右クリックし、「コードを挿入」を選択します([Alt]-[Insert]、Macの場合は[Ctrl]-[I])。取得メソッドおよび設定メソッドを選択します。
+
+[start=2]
+. エディタ内で右クリックし、「コードを挿入」を選択します([Alt]-[Insert]、Macの場合は[Ctrl]-[I])。取得メソッドおよび設定メソッドを選択します。
+
image::images/getter-setter.png[title="IDEを使用した、プロパティのアクセッサ・メソッドの生成"]
-3. 「`userNumber`: `Integer`」オプションを選択します。「生成」をクリックします。
+
+[start=3]
+. 「`userNumber`: `Integer`」オプションを選択します。「生成」をクリックします。
+
image::images/generate-getters-setters.png[title="IDEを使用した、プロパティのアクセッサ・メソッドの生成"]
`getUserNumber()`および`setUserNumber(Integer userNumber)`メソッドがクラスに追加されます。
-4. `response`プロパティを作成します。`response`という名前の`String`を宣言します。
+
+[start=4]
+. `response`プロパティを作成します。`response`という名前の`String`を宣言します。
[source,java]
----
@@ -294,7 +313,9 @@
Integer userNumber;
*String response;*
----
-5. `response`の取得メソッドを作成します。(このアプリケーションでは設定メソッドは必要ありません。)前出のステップ2で示したIDEの「コードを生成」ポップアップを使用して、テンプレート・コードを生成することもできます。ただし、このチュートリアルでは、単純に次のメソッドをクラスに貼り付けます。
+
+[start=5]
+. `response`の取得メソッドを作成します。(このアプリケーションでは設定メソッドは必要ありません。)前出のステップ2で示したIDEの「コードを生成」ポップアップを使用して、テンプレート・コードを生成することもできます。ただし、このチュートリアルでは、単純に次のメソッドをクラスに貼り付けます。
[source,html]
----
@@ -318,7 +339,9 @@
このメソッドでは2つの関数が実行されます。
1. ユーザーが入力した数値(`userNumber`)がセッション用に生成されたランダムな数値(`randomInt`)と等しいかどうか、および`String`レスポンスが返されるかどうかがテストされます。
2. ユーザーが正しい数値を推測した場合(たとえば`userNumber`と`randomInt`が正しい場合)、ユーザー・セッションは無効化されます。ユーザーが再度操作する場合に新しい数値が生成されるようにするには、この処理が必要です。
-6. エディタを右クリックし、「インポートを修正」を選択します([Alt]-[Shift]-[I]、Macの場合は[⌘]-[Shift]-[I])。次の項目用に、インポート文が自動的に作成されます。
+
+[start=6]
+. エディタを右クリックし、「インポートを修正」を選択します([Alt]-[Shift]-[I]、Macの場合は[⌘]-[Shift]-[I])。次の項目用に、インポート文が自動的に作成されます。
* `javax.servlet.http.HttpSession`
* `javax.faces.context.FacesContext`
@@ -326,7 +349,8 @@
image::images/documentation-support.png[title="[Ctrl]-[Space]の押下によるコード補完とドキュメント・サポートの呼出し"]
-ドキュメント・ウィンドウの「Webブラウザ」(image::images/web-browser-icon.png[])アイコンをクリックし、外部WebブラウザでJavadocを開きます。
+
+ドキュメント・ウィンドウの「Webブラウザ」(image:images/web-browser-icon.png[])アイコンをクリックし、外部WebブラウザでJavadocを開きます。
@@ -353,14 +377,19 @@
1. エディタで`index.xhtml`ページを開きます。「プロジェクト」ウィンドウで「`index.xhtml`」ノードをダブルクリックするか、[Alt]-[Shift]-[O]を押して「ファイルに移動」ダイアログを使用します。
indexページとresponseページの両方に、ここで必要なJSF UIコンポーネントがすでに含まれています。それらをコメント解除し、現在使用しているHTML要素をコメントアウトします。
-2. HTMLフォーム要素をコメントアウトします。これを行うには、次のイメージのHTMLフォーム要素を強調表示し、[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。
+
+[start=2]
+. HTMLフォーム要素をコメントアウトします。これを行うには、次のイメージのHTMLフォーム要素を強調表示し、[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。
*注意: *強調表示するには、マウスを使用してエディタ内でクリックしてドラッグするか、キーボードを使用して、[Shift]を押しながら矢印キーを押します。
+
image::images/comment-out.png[title="コードを強調表示した後の[Ctrl]-[/]の押下によるコードのコメントアウト"]
[Ctrl]-[/] (Macの場合は[⌘]-[/])を使用して、エディタ内のコメントを切り替えます。JavaやCSSなど、他のファイル・タイプにこのキーボード・ショートカットを適用することもできます。
-3. JSF HTMLフォーム・コンポーネントをコメント解除します。次のイメージに示すように、コンポーネントを強調表示して[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。
+
+[start=3]
+. JSF HTMLフォーム・コンポーネントをコメント解除します。次のイメージに示すように、コンポーネントを強調表示して[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。
*注意:*コードのコメントを外すには[Ctrl]-[/]を2回押すことが必要な場合があります。
@@ -370,7 +399,9 @@
JSF HTMLフォーム・コンポーネントをコメント解除すると、`<h:form>`、`<h:inputText>`および`<h:commandButton>`タグが宣言されていないことがエディタに表示されます。
image::images/undeclared-component.png[title="エディタに表示された、宣言されていないコンポーネントに関するエラー・メッセージ"]
-4. これらのコンポーネントを宣言するには、IDEのコード補完を使用して、タグ・ライブラリ名前空間をページの`<html>`タグに追加します。宣言されていないいずれかのタグにカーソルを置き、[Alt]-[Enter]を押して提案されるタグ・ライブラリを追加します。(複数のオプションがある場合は、エディタに表示されているタグを選択してから[Enter]を押してください。)JSF HTMLタグ・ライブラリ名前空間が`<html>`タグ(次に*太字*で表示)に追加され、エラー表示が消えます。
+
+[start=4]
+. これらのコンポーネントを宣言するには、IDEのコード補完を使用して、タグ・ライブラリ名前空間をページの`<html>`タグに追加します。宣言されていないいずれかのタグにカーソルを置き、[Alt]-[Enter]を押して提案されるタグ・ライブラリを追加します。(複数のオプションがある場合は、エディタに表示されているタグを選択してから[Enter]を押してください。)JSF HTMLタグ・ライブラリ名前空間が`<html>`タグ(次に*太字*で表示)に追加され、エラー表示が消えます。
*注意:*IDEでタグ・ライブラリを追加するオプションが表示されない場合、 ``<html>`` 要素を手動で変更する必要があります。
@@ -381,7 +412,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"
*xmlns:h="http://xmlns.jcp.org/jsf/html"*>
----
-5. JSF式言語を使用して、`UserNumberBean`の`userNumber`プロパティを`inputText`コンポーネントにバインドします。`value`属性は、レンダリングされたコンポーネントの現在の値を指定するために使用できます。次の*太字*で表示されているコードを入力します。
+
+[start=5]
+. JSF式言語を使用して、`UserNumberBean`の`userNumber`プロパティを`inputText`コンポーネントにバインドします。`value`属性は、レンダリングされたコンポーネントの現在の値を指定するために使用できます。次の*太字*で表示されているコードを入力します。
[source,java]
----
@@ -392,7 +425,9 @@
JSF式言語では`#{}`構文を使用します。これらの区切り文字内で、管理対象Beanの名前と、適用するBeanプロパティを、ドット(`.`)で区切って指定します。これで、フォーム・データがサーバーに送られると、プロパティの設定メソッド(`setUserNumber()`)を使用して、値が自動的に`userNumber`プロパティに保存されます。また、ページがリクエストされて`userNumber`の値がすでに設定されている場合、レンダリングされる`inputText`コンポーネントに値が自動的に表示されます。詳細は、link:http://docs.oracle.com/javaee/7/tutorial/doc/jsf-develop001.htm#BNAQP[+Java EE 7チュートリアル: 12.1.2項の式言語を使用した管理対象Beanの参照+]を参照してください。
-6. フォーム・ボタンをクリックして呼び出されたリクエストの宛先を指定します。フォームのHTMLバージョンでは、`<form>`タグの`action`属性を使用してこれを実行できました。JSFの場合は、`commandButton`の`action`属性を使用できます。また、JSF 2.xの暗黙的なナビゲーション機能により、宛先のファイルの名前を指定するのみで済みます。ファイル拡張子は不要です。
+
+[start=6]
+. フォーム・ボタンをクリックして呼び出されたリクエストの宛先を指定します。フォームのHTMLバージョンでは、`<form>`タグの`action`属性を使用してこれを実行できました。JSFの場合は、`commandButton`の`action`属性を使用できます。また、JSF 2.xの暗黙的なナビゲーション機能により、宛先のファイルの名前を指定するのみで済みます。ファイル拡張子は不要です。
次の*太字*で表示されているコードを入力します。
@@ -426,31 +461,48 @@
以降のステップ7から12は、オプションです。プロジェクトをすばやくビルドする場合は、<<response,`response.xhtml`>>に進みます。
-7. 前出のEL式でリクエストを処理するときに`setUserNumber()`メソッドが実際にコールされるかどうかをテストします。これを行うには、IDEのJavaデバッガを使用します。
+
+[start=7]
+. 前出のEL式でリクエストを処理するときに`setUserNumber()`メソッドが実際にコールされるかどうかをテストします。これを行うには、IDEのJavaデバッガを使用します。
`UserNumberBean`クラスに切り替えます([Ctrl]-[Tab]を押し、一覧からファイルを選択します。)`setUserNumber()`メソッドの署名にブレークポイントを設定します。これを行うには、左マージンをクリックします。赤のバッジが表示され、メソッドのブレークポイントが設定されたことを示します。
image::images/set-breakpoint.png[title="エディタの左マージンのクリックによるブレークポイントの設定"]
-8. IDEのメイン・ツールバーにある「プロジェクトをデバッグ」(image::images/breakpoint-btn.png[])ボタンをクリックします。デバッグ・セッションが開始され、プロジェクトの開始ページがブラウザに表示されます。
+
+[start=8]
+. IDEのメイン・ツールバーにある「プロジェクトをデバッグ」(image:images/breakpoint-btn.png[])ボタンをクリックします。デバッグ・セッションが開始され、プロジェクトの開始ページがブラウザに表示されます。
*注意:*
* アプリケーションのデバッグ用のサーバー・ポートの確認を求められることがあります。
* 「プロジェクトをデバッグ」ダイアログが表示されたら、デフォルトのサーバー側Javaオプションを選択して、「デバッグ」をクリックします。
-9. ブラウザで、フォームに数値を入力し、「送信」ボタンをクリックします。
-10. IDEに切り替え、`UserNumberBean`クラスを確認します。デバッガが`setUserNumber()`メソッド内で一時停止されています。
+
+[start=9]
+. ブラウザで、フォームに数値を入力し、「送信」ボタンをクリックします。
+
+[start=10]
+. IDEに切り替え、`UserNumberBean`クラスを確認します。デバッガが`setUserNumber()`メソッド内で一時停止されています。
+
image::images/debugger-suspended.png[title="ブレークポイントによるデバッガの一時停止"]
-11. デバッガの「変数」ウィンドウを開きます(「ウィンドウ」>「デバッグ」>「変数」を選択するか、[Ctrl]-[Shift]-[1]を押します)。デバッガが一時停止されている場所の変数値が表示されます。
+
+[start=11]
+. デバッガの「変数」ウィンドウを開きます(「ウィンドウ」>「デバッグ」>「変数」を選択するか、[Ctrl]-[Shift]-[1]を押します)。デバッガが一時停止されている場所の変数値が表示されます。
+
image::images/variables-window.png[title="デバッガの「変数」ウィンドウを使用した変数値のモニター"]
前出のイメージでは、`setUserNumber()`署名の`userNumber`変数に、値`4`が指定されています。(数値4がフォームに入力されたため。)「`this`」は、ユーザー・セッション用に作成された`UserNumberBean`オブジェクトを参照します。その下にある`userNumber`プロパティの値は、現在`null`と表示されています。
-12. デバッガのツールバーで、「ステップ・イン」(image::images/step-into-btn.png[])ボタンをクリックします。デバッガは、現在一時停止されている行を実行します。「変数」ウィンドウがリフレッシュされ、実行による変更が表示されます。
+
+[start=12]
+. デバッガのツールバーで、「ステップ・イン」(image:images/step-into-btn.png[])ボタンをクリックします。デバッガは、現在一時停止されている行を実行します。「変数」ウィンドウがリフレッシュされ、実行による変更が表示されます。
+
image::images/variables-window2.png[title="コードのステップ実行時の「変数」ウィンドウのリフレッシュ"]
`userNumber`プロパティは、フォームに入力された値に設定されます。
-13. メイン・メニューから「デバッグ」→「デバッガ・セッションを終了」([Shift]-[F5]、Macでは[Shift]-[Fn]-[F5])を選択して、デバッガを停止します。
+
+[start=13]
+. メイン・メニューから「デバッグ」→「デバッガ・セッションを終了」([Shift]-[F5]、Macでは[Shift]-[Fn]-[F5])を選択して、デバッガを停止します。
[[response]]
@@ -461,7 +513,9 @@
*注意: *強調表示するには、マウスを使用してエディタ内でクリックしてドラッグするか、キーボードを使用して、[Shift]を押しながら矢印キーを押します。
-3. JSF HTMLフォーム・コンポーネントをコメント解除します。`<h:form>`の開始タグと終了タグ、およびそれらのタグ間にあるコードを強調表示し、[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。
+
+[start=3]
+. JSF HTMLフォーム・コンポーネントをコメント解除します。`<h:form>`の開始タグと終了タグ、およびそれらのタグ間にあるコードを強調表示し、[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。
この時点では、`<body>`タグ間のコードは次のようになります。
@@ -502,7 +556,9 @@
JSF HTMLフォーム・コンポーネントをコメント解除すると、エディタに`<h:form>`と`<h:commandButton>`タグが宣言されていないことが表示されます。
-4. これらのコンポーネントを宣言するには、IDEのコード補完を使用して、タグ・ライブラリ名前空間をページの`<html>`タグに追加します。
+
+[start=4]
+. これらのコンポーネントを宣言するには、IDEのコード補完を使用して、タグ・ライブラリ名前空間をページの`<html>`タグに追加します。
エディタのコード補完サポートを使用して、必要なJSF名前空間をファイルに追加します。コード補完を使用してJSFまたはFaceletsタグを選択すると、必要な名前空間が自動的にドキュメントのルート要素に追加されます。詳細は、link:jsf20-support.html#facelets[+NetBeans IDEでのJSF 2.xのサポート+]を参照してください。
@@ -519,7 +575,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"
*xmlns:h="http://xmlns.jcp.org/jsf/html"*>
----
-5. フォーム・ボタンをクリックして呼び出されたリクエストの宛先を指定します。ユーザーがボタンをクリックするとindexページに戻るように、ボタンを設定します。これを行うには、`commandButton`の`action`属性を使用します。*太字*で表示されているコードを入力します。
+
+[start=5]
+. フォーム・ボタンをクリックして呼び出されたリクエストの宛先を指定します。ユーザーがボタンをクリックするとindexページに戻るように、ボタンを設定します。これを行うには、`commandButton`の`action`属性を使用します。*太字*で表示されているコードを入力します。
[source,xml]
----
@@ -533,7 +591,9 @@
*注意:* 「`action="index"`」と入力すると、JSFの暗黙的なナビゲーション機能に依存することになります。ユーザーがフォーム・ボタンをクリックすると、JSFランタイムは`index`という名前のファイルを検索します。リクエスト元のファイル(`response*.xhtml*`)で使用されているのと同じファイル拡張子であると想定し、元のファイルと同じディレクトリ内(webrootなど)で`index.xhtml`ファイルを探します。
-6. 静的テキスト「[response here]」を、`UserNumberBean`の`response`プロパティの値で置き換えます。これを行うには、JSF式言語を使用します。次の*太字*で示したコードを入力します。
+
+[start=6]
+. 静的テキスト「[response here]」を、`UserNumberBean`の`response`プロパティの値で置き換えます。これを行うには、JSF式言語を使用します。次の*太字*で示したコードを入力します。
[source,html]
----
@@ -542,7 +602,10 @@
<h4>*<h:outputText value="#{UserNumberBean.response}"/>*</h4>
----
-7. プロジェクトを実行します(「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックするか、[F6] (Macの場合は[fn]-[F6])を押します)。ブラウザに開始ページが表示されたら、数値を入力して「`送信`」をクリックします。次のようなレスポンス・ページが表示されます(正しい数値を推測しなかった場合)。
+
+[start=7]
+. プロジェクトを実行します(「プロジェクトの実行」(image:images/run-project-btn.png[])ボタンをクリックするか、[F6] (Macの場合は[fn]-[F6])を押します)。ブラウザに開始ページが表示されたら、数値を入力して「`送信`」をクリックします。次のようなレスポンス・ページが表示されます(正しい数値を推測しなかった場合)。
+
image::images/response2.png[title="ブラウザでのプロジェクトの現在のステータスの表示"]
レスポンス・ページの現在の状態に、2つの間違いがあります。
@@ -552,7 +615,10 @@
次の2つの手順で、これらの間違いを修正します。
-8. `<h:outputText>`タグの`escape`属性を`false`に設定します。カーソルを`outputText`と`value`の間に置き、スペースを挿入してから[Ctrl]-[Space]を押して、コード補完を呼び出します。下にスクロールして`escape`属性を選択し、ドキュメントを確認します。
+
+[start=8]
+. `<h:outputText>`タグの`escape`属性を`false`に設定します。カーソルを`outputText`と`value`の間に置き、スペースを挿入してから[Ctrl]-[Space]を押して、コード補完を呼び出します。下にスクロールして`escape`属性を選択し、ドキュメントを確認します。
+
image::images/escape-false.png[title="[Ctrl]-[Space]の押下による考えられる属性値とドキュメントの表示"]
ドキュメントで示されるように、`escape`の値はデフォルトで`true`に設定されます。つまり、前出に示すように、通常はhtmlとして解析される文字がすべて文字列に含まれます。値を`false`に設定すると、htmlとして解析できるすべての文字を、そのようにレンダリングできます。
@@ -565,7 +631,9 @@
<h4><h:outputText *escape="false"* value="#{UserNumberBean.response}"/></h4>
----
-9. `<h:form>`タグの`prependId`属性を`false`に設定します。カーソルを`<h:form>`の「`m`」のすぐ後に置き、スペースを入力してから[Ctrl]-[Space]を押して、コード補完を呼び出します。下にスクロールして`prependId`属性を選択し、ドキュメントを確認します。次に[Enter]を押し、値として「`false`」と入力します。
+
+[start=9]
+. `<h:form>`タグの`prependId`属性を`false`に設定します。カーソルを`<h:form>`の「`m`」のすぐ後に置き、スペースを入力してから[Ctrl]-[Space]を押して、コード補完を呼び出します。下にスクロールして`prependId`属性を選択し、ドキュメントを確認します。次に[Enter]を押し、値として「`false`」と入力します。
[source,java]
----
@@ -588,16 +656,28 @@
フォーム要素のIDは`j_idt5`です。このIDは、フォームに含まれている「戻る」ボタンのIDに付加されます(*太字*で表示)。「戻る」ボタンは`#backButton`スタイル・ルール(`stylesheet.css`で定義)に依存するため、JSFのIDが付加されると、このルールが妨げられます。これを回避するには、`prependId`を`false`に設定します。
-10. プロジェクトを再度実行します(「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックするか、[F6] (Macの場合は[fn]-[F6])を押します)。開始ページに数値を入力し、「送信」をクリックします。レスポンス・ページに`<p>`タグのないレスポンス・メッセージが表示され、「戻る」ボタンが正しい位置に配置されます。
+
+[start=10]
+. プロジェクトを再度実行します(「プロジェクトの実行」(image:images/run-project-btn.png[])ボタンをクリックするか、[F6] (Macの場合は[fn]-[F6])を押します)。開始ページに数値を入力し、「送信」をクリックします。レスポンス・ページに`<p>`タグのないレスポンス・メッセージが表示され、「戻る」ボタンが正しい位置に配置されます。
+
image::images/response3.png[title="ブラウザでのプロジェクトの現在のステータスの表示"]
-11. 「戻る」ボタンをクリックします。`UserNumberBean`の`userNumber`プロパティの現在の値はJSF`inputText`コンポーネントにバインドされているため、前に入力した数値がテキスト・フィールドに表示されます。
-12. IDEの「出力」ウィンドウでサーバー・ログを確認し([Ctrl]-[4]、Macの場合は[⌘]-[4])、正しい推測値を判断します。
+
+[start=11]
+. 「戻る」ボタンをクリックします。`UserNumberBean`の`userNumber`プロパティの現在の値はJSF`inputText`コンポーネントにバインドされているため、前に入力した数値がテキスト・フィールドに表示されます。
+
+[start=12]
+. IDEの「出力」ウィンドウでサーバー・ログを確認し([Ctrl]-[4]、Macの場合は[⌘]-[4])、正しい推測値を判断します。
なんらかの理由でサーバー・ログが表示されない場合は、「サービス」ウィンドウに切り替え([Ctrl]-[5]、Macの場合は[⌘]-[5])、「サーバー」ノードを展開します。次に、プロジェクトがデプロイされているGlassFishサーバーを右クリックし、「サーバー・ログを表示」を選択します。サーバー・ログに数値が見つけることができない場合は、プロジェクト・ノードを右クリックし、「消去してビルド」を選択して、アプリケーションを再ビルドしてみてください。
-13. 正しい数値を入力し、「送信」をクリックします。アプリケーションは、入力された数値を現在保存されている数値と比較し、適切なメッセージを表示します。
+
+[start=13]
+. 正しい数値を入力し、「送信」をクリックします。アプリケーションは、入力された数値を現在保存されている数値と比較し、適切なメッセージを表示します。
+
image::images/yay.png[title="一致する数値を入力すると正しいレスポンスが表示される"]
-14. 「戻る」ボタンをもう一度クリックします。前に入力した数値はテキスト・フィールドに表示されていません。`UserNumberBean`の`getResponse()`メソッドは、正しい数値が推測されると<<getResponse,現在のユーザー・セッションを無効にします>>。
+
+[start=14]
+. 「戻る」ボタンをもう一度クリックします。前に入力した数値はテキスト・フィールドに表示されていません。`UserNumberBean`の`getResponse()`メソッドは、正しい数値が推測されると<<getResponse,現在のユーザー・セッションを無効にします>>。
@@ -624,12 +704,16 @@
1. Faceletsテンプレート・ファイルを作成します。[Ctrl]-[N] (Macの場合は[⌘]-[N])を押して、ファイル・ウィザードを開きます。「JavaServer Faces」カテゴリを選択し、「Faceletsテンプレート」を選択します。「次」をクリックします。
2. ファイル名として「`template`」と入力します。
3. 8つのレイアウト・スタイルから任意のスタイルを選択し、「終了」をクリックします。(既存のスタイル・シートを使用するので、どのレイアウト・スタイルを選択してもかまいません。)
+
image::images/layout-style.png[title="Faceletsテンプレート・ウィザードでの一般的なレイアウト・スタイルからの選択"]
+
ウィザードで、選択に基づいて`template.xhtml`ファイルおよび付属するスタイル・シートが生成され、プロジェクトのwebroot内の「`resources`」>「`css`」フォルダに置かれます。
ウィザードが完了すると、テンプレート・ファイルがエディタに開かれます。ブラウザでこのテンプレートを表示するには、エディタ内を右クリックし、「表示」を選択します。
-4. テンプレート・ファイルのマークアップを確認します。次の点を確認します。
+
+[start=4]
+. テンプレート・ファイルのマークアップを確認します。次の点を確認します。
* `facelets`タグ・ライブラリがページの`<html>`タグ内で宣言されています。タグ・ライブラリに接頭辞`ui`があります。
[source,java]
@@ -661,8 +745,12 @@
*<ui:insert name="top">Top</ui:insert>*
</div>
----
-5. <<staticPage,開始>>ページと<<responsePage,レスポンス>>・ページを再度確認します。2つのページ間で異なるコンテンツは、グレーの四角形の中にあるタイトルとテキストのみです。そのため、テンプレートで残りのすべてのコンテンツを提供できます。
-6. テンプレート・ファイルのすべてのコンテンツを、次のコンテンツに置き換えます。
+
+[start=5]
+. <<staticPage,開始>>ページと<<responsePage,レスポンス>>・ページを再度確認します。2つのページ間で異なるコンテンツは、グレーの四角形の中にあるタイトルとテキストのみです。そのため、テンプレートで残りのすべてのコンテンツを提供できます。
+
+[start=6]
+. テンプレート・ファイルのすべてのコンテンツを、次のコンテンツに置き換えます。
[source,html]
----
@@ -694,7 +782,9 @@
* プロジェクトの`stylesheet.css`ファイルによって、ウィザードで作成されたテンプレート・スタイル・シート参照が置き換えられます。
* `<ui:insert>`タグ(およびそれらに含まれる`<div>`タグ)が、`box`という名前のものを除き、すべて除去されます。
* ページ・タイトルを囲んで`<ui:insert>`タグ・ペアが配置され、`title`という名前が付けられています。
-7. 該当するコードを、`index.xhtml`または`response.xhtml`ファイルからテンプレートにコピーします。次に*太字*で示されているコンテンツを、テンプレート・ファイルの`<h:body>`タグに追加します。
+
+[start=7]
+. 該当するコードを、`index.xhtml`または`response.xhtml`ファイルからテンプレートにコピーします。次に*太字*で示されているコンテンツを、テンプレート・ファイルの`<h:body>`タグに追加します。
[source,html]
----
@@ -710,7 +800,9 @@
</div>*
</h:body>
----
-8. プロジェクトを実行します。ブラウザで開始ページが開いたら、URLを次のように変更します。
+
+[start=8]
+. プロジェクトを実行します。ブラウザで開始ページが開いたら、URLを次のように変更します。
[source,java]
----
@@ -718,6 +810,7 @@
http://localhost:8080/jsfDemo/faces/template.xhtml
----
テンプレート・ファイルが次のように表示されます。
+
image::images/facelets-template.png[title="ブラウザでのFaceletsテンプレートの表示"]
これで、プロジェクトには、すべてのビューの外観と構造を定義するテンプレート・ファイルが作成されました。ここで、テンプレートを呼び出すクライアント・ファイルを作成できます。
@@ -734,9 +827,14 @@
1. [Ctrl]-[N] (Macの場合は[⌘]-[N])を押して、新規ファイル・ウィザードを開きます。「JavaServer Faces」カテゴリを選択し、「Faceletsテンプレート・クライアント」を選択します。「次」をクリックします。
2. ファイル名として「`greeting`」と入力します。
3. 「テンプレート」フィールドの横にある「参照」ボタンをクリックし、表示されたダイアログを使用して、前の項で作成した`template.xhtml`ファイルに移動します。
+
image::images/template-client.png[title="Faceletsテンプレート・クライアント・ウィザード"]
-4. 「終了」をクリックします。新しいテンプレート・クライアント・ファイル`greeting.xhtml`が生成され、エディタに表示されます。
-5. マークアップを確認します。*太字*で強調表示されているコンテンツを確認してください。
+
+[start=4]
+. 「終了」をクリックします。新しいテンプレート・クライアント・ファイル`greeting.xhtml`が生成され、エディタに表示されます。
+
+[start=5]
+. マークアップを確認します。*太字*で強調表示されているコンテンツを確認してください。
[source,xml]
----
@@ -762,7 +860,9 @@
</html>
----
テンプレート・クライアント・ファイルは、`<ui:composition>`タグの`template`属性を使用して、テンプレートを参照します。テンプレートには`title`および`box`の`<ui:insert>`タグが含まれているため、このテンプレート・クライアントには、これらの2つの名前の`<ui:define>`タグが含まれます。`<ui:define>`タグの間で指定するコンテンツは、テンプレートの対応する名前の`<ui:insert>`タグの間に挿入されるコンテンツです。
-6. ファイルのタイトルとして「`greeting`」を指定します。次に*太字*で示す変更を加えます。
+
+[start=6]
+. ファイルのタイトルとして「`greeting`」を指定します。次に*太字*で示す変更を加えます。
[source,xml]
----
@@ -771,7 +871,9 @@
*Greeting*
</ui:define>
----
-7. `index.xhtml`ファイルに切り替え([Ctrl]-[Tab])、表示されるページで、通常はグレーの四角形内に表示されるコンテンツをコピーします。`greeting.xhtml`に切り替え、テンプレート・クライアント・ファイルに貼り付けます。変更場所は*太字*で示されています。
+
+[start=7]
+. `index.xhtml`ファイルに切り替え([Ctrl]-[Tab])、表示されるページで、通常はグレーの四角形内に表示されるコンテンツをコピーします。`greeting.xhtml`に切り替え、テンプレート・クライアント・ファイルに貼り付けます。変更場所は*太字*で示されています。
[source,xml]
----
@@ -794,7 +896,9 @@
</h:form>*
</ui:define>
----
-8. ファイルのJSF HTMLタグ・ライブラリを宣言します。エラーのフラグが付いているタグ(「`h`」接頭辞を使用するタグ)にカーソルを置き、[Ctrl]-[Space]を押します。コード補完による候補の一覧から、タグを選択します。タグ・ライブラリ名前空間がファイルの`<html>`タグ(*太字*で表示)に追加され、エラー表示が消えます。
+
+[start=8]
+. ファイルのJSF HTMLタグ・ライブラリを宣言します。エラーのフラグが付いているタグ(「`h`」接頭辞を使用するタグ)にカーソルを置き、[Ctrl]-[Space]を押します。コード補完による候補の一覧から、タグを選択します。タグ・ライブラリ名前空間がファイルの`<html>`タグ(*太字*で表示)に追加され、エラー表示が消えます。
[source,java]
----
@@ -846,11 +950,16 @@
</html>
----
`title`および`box`の`<ui:define>`タグ間で指定されているコンテンツを除き、ファイルは`greeting.xhtml`と同じになります。
-2. プロジェクトの`web.xml`デプロイメント・ディスクリプタで、アプリケーションを実行したときに`greeting.xhtml`ページが開かれるように、開始ファイルのエントリを変更します。
+
+[start=2]
+. プロジェクトの`web.xml`デプロイメント・ディスクリプタで、アプリケーションを実行したときに`greeting.xhtml`ページが開かれるように、開始ファイルのエントリを変更します。
「プロジェクト」ウィンドウで「構成ファイル」>「`web.xml`」をダブルクリックして、エディタで開きます。「ページ」タブで「開始ファイル」フィールドを「`faces/greeting.xhtml`」に変更します。
+
image::images/welcome-files.png[title="デプロイメント・ディスクリプタでの「開始ファイル」エントリの変更"]
-3. プロジェクトを実行して、ブラウザでどのように表示されるかを確認します。[F6] (Macの場合は[fn]-[F6])を押すか、メイン・ツールバーの「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックします。プロジェクトがGlassFishサーバーにデプロイされ、ブラウザで開かれます。
+
+[start=3]
+. プロジェクトを実行して、ブラウザでどのように表示されるかを確認します。[F6] (Macの場合は[fn]-[F6])を押すか、メイン・ツールバーの「プロジェクトの実行」(image:images/run-project-btn.png[])ボタンをクリックします。プロジェクトがGlassFishサーバーにデプロイされ、ブラウザで開かれます。
Faceletsテンプレートおよびテンプレート・クライアント・ファイルを使用して、アプリケーションは以前とまったく同じように動作します。アプリケーションの開始ページとレスポンス・ページで重複しているコードを取り除くことによって、アプリケーションのサイズを小さくするとともに、後でページが追加されたときに重複したコードを記述することがなくなりました。これにより、大規模なプロジェクトで作業するときに、開発作業が効率化され、管理が容易になります。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_pt_BR.asciidoc
index 58c2cfe..16c4f16 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_pt_BR.asciidoc
@@ -48,10 +48,6 @@
O NetBeans IDE oferece, há muito tempo, suporte ao JavaServer Faces. A partir da release JSF 2.0 e Java EE 6, O NetBeans IDE oferece suporte para JSF 2.0 e JSF 2.1. Para obter mais informações, consulte link:jsf20-support.html[+Suporte JSF 2.x no NetBeans IDE+].
-
-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ê precisa dos seguintes recursos e softwares.
|===
@@ -80,33 +76,51 @@
O IDE também permite criar novos projetos com o suporte JSF 2.x. Para obter mais informações, consulte link:jsf20-support.html#creatingSupport[+Criando um Novo Projeto com o Suporte a JSF 2.x+].
-1. Clique no botão ( image::images/open-project-btn.png[] ) para Abrir o Projeto na barra de ferramentas principal do IDE ou pressione Ctrl-Shift-O (⌘-Shift-O no Mac).
+1. Clique no botão ( image:images/open-project-btn.png[] ) para Abrir o Projeto na barra de ferramentas principal do IDE ou pressione Ctrl-Shift-O (⌘-Shift-O no Mac).
2. Na caixa de diálogo Abrir Projeto, navegue até o local do computador onde você armazenou o projeto descompactado do tutorial. Selecione-o e clique em Abrir Projeto para abri-lo no IDE.
*Observação.* Você será solicitado a resolver a referência às bibliotecas JUnit quando abrir o projeto NetBeans, caso não tiver instalado o plug-in JUnit quando instalou o IDE.
-3. Execute o projeto para ver como ele é em um browser. Clique com o botão direito do mouse no nó `jsfDemo` do projeto, na janela Projetos e selecione Executar ou clique no botão ( image::images/run-project-btn.png[] ) Executar Projeto na barra de ferramentas principal. O projeto é encapsulado e implantado no GlassFish Server e o browser é aberto para exibir a página de boas-vindas (`index.xhtml`).
+
+[start=3]
+. Execute o projeto para ver como ele é em um browser. Clique com o botão direito do mouse no nó `jsfDemo` do projeto, na janela Projetos e selecione Executar ou clique no botão ( image:images/run-project-btn.png[] ) Executar Projeto na barra de ferramentas principal. O projeto é encapsulado e implantado no GlassFish Server e o browser é aberto para exibir a página de boas-vindas (`index.xhtml`).
+
image::images/run-project.png[title="Executar o projeto para exibi-lo em um browser"]
-4. Clique no botão Submeter. A página de resposta (`response.xhtml`) é exibida desta forma:
+
+[start=4]
+. Clique no botão Submeter. A página de resposta (`response.xhtml`) é exibida desta forma:
+
image::images/response.png[title="A página de boas-vindas e de resposta, atualmente, são páginas estáticas"]
No momento, as páginas de boas-vindas e resposta são estáticas e, juntamente com o arquivo `stylesheet.css` e a imagem `duke.png`, são os únicos arquivos da aplicação acessíveis do browser.
-5. Na janela Projetos (Ctrl-1; ⌘-1 no Mac), clique com o botão direito do mouse no nó do projeto e escolha Propriedades para abrir a janela Propriedades do Projeto.
-6. Selecione a categoria Frameworks e, em seguida e clique no botão Adicionar.
-7. Selecione JavaServer Faces na caixa de diálogo Adicionar um Framework. Clique em OK.
+
+[start=5]
+. Na janela Projetos (Ctrl-1; ⌘-1 no Mac), clique com o botão direito do mouse no nó do projeto e escolha Propriedades para abrir a janela Propriedades do Projeto.
+
+[start=6]
+. Selecione a categoria Frameworks e, em seguida e clique no botão Adicionar.
+
+[start=7]
+. Selecione JavaServer Faces na caixa de diálogo Adicionar um Framework. Clique em OK.
+
image::images/add-framework.png[title="Adicionar suporte JSF a um projeto existente"]
Após selecionar JavaServer Faces, diversas opções de configuração ficarão disponíveis. Na guia Bibliotecas, você pode especificar como o projeto acessa as bibliotecas JSF 2.x. A versão de JFS disponível dependerá da versão do IDE e do GlassFish Server. A opção default é utilizar as bibliotecas fornecidas com o servidor (o GlassFish Server). No entanto, o IDE também integra as bibliotecas JSF 2.x. (É possível selecionar a opção Bibliotecas Registradas se desejar que seu projeto as utilize.)
image::images/libraries-tab.png[title="Especificar o acesso a bibliotecas do JSF 2.x"]
-8. Clique na guia Configuração. É possível especificar como o servlet Faces é registrado no descritor de implantação do projeto. Também é possível indicar se você deseja utilizar Facelets ou páginas JSP no projeto.
+
+[start=8]
+. Clique na guia Configuração. É possível especificar como o servlet Faces é registrado no descritor de implantação do projeto. Também é possível indicar se você deseja utilizar Facelets ou páginas JSP no projeto.
+
image::images/jsf-configuration.png[title="Especificar idioma preferencial e opções de servlet do Faces"]
Você também pode configurar facilmente seus projetos para usar vários conjuntos de componentes do JSF, na guia Componentes. Para usar um conjunto de componentes, é preciso fazer o download das bibliotecas necessárias e usar o Gerenciador de bibliotecas Ant para criar uma nova biblioteca contendo as bibliotecas do conjunto de componentes.
image::images/jsf-components.png[title="Especificar idioma preferencial e opções de servlet do Faces"]
-9. Clique em OK para concluir as alterações e sair da janela Propriedades do Projeto.
+
+[start=9]
+. Clique em OK para concluir as alterações e sair da janela Propriedades do Projeto.
Depois de adicionar o suporte JSF ao seu projeto, o descritor de implantação `web.xml` do projeto é modificado para que tenha a aparência a seguir: (Alterações em *negrito*.)
@@ -166,8 +180,11 @@
* *Pacote:* guessNumber
* *Nome:* UserNumberBean
* *Escopo:* Session
+
image::images/managed-bean.png[title="Utilizar o Ben Gerenciado pelo JSF para criar um novo Bean gerenciado"]
-3. Clique em Finalizar. A classe `UserNumberBean` é gerada e aberta no editor. Observe as anotações a seguir (mostradas em *negrito*):
+
+[start=3]
+. Clique em Finalizar. A classe `UserNumberBean` é gerada e aberta no editor. Observe as anotações a seguir (mostradas em *negrito*):
[source,java]
----
@@ -223,8 +240,13 @@
O código acima gera um número aleatório entre 0 e 10, e o número é exibido no log do servidor.
-2. Corrigir importações. Para isso, clique no indicador de dica ( image::images/hint-icon.png[] ) exibido na margem esquerda do editor, em seguida, selecione a opção para importar `java.util.Random` para a classe.
-3. Execute o projeto novamente (clique no botão ( image::images/run-project-btn.png[] ) Executar Projeto ou pressione F6; fn-F6 no Mac). Quando você executa seu projeto, o arquivo de log do servidor é aberto automaticamente na janela de Saída.
+
+[start=2]
+. Corrigir importações. Para isso, clique no indicador de dica ( image:images/hint-icon.png[] ) exibido na margem esquerda do editor, em seguida, selecione a opção para importar `java.util.Random` para a classe.
+
+[start=3]
+. Execute o projeto novamente (clique no botão ( image:images/run-project-btn.png[] ) Executar Projeto ou pressione F6; fn-F6 no Mac). Quando você executa seu projeto, o arquivo de log do servidor é aberto automaticamente na janela de Saída.
+
image::images/output1.png[title="O arquivo de log do servidor é aberto automaticamente na janela de Saída"]
Observe que você não vê o "`número do Duke: `" listado na saída (como deveria ser indicado no construtor). Um objeto `UserNumberBean` não foi criado porque o JSF utiliza _instanciação lenta_ por default. Ou seja, os Beans em determinados escopos são criados e inicializados somente quando a aplicação precisa deles.
@@ -232,7 +254,9 @@
O link:http://javaserverfaces.java.net/nonav/docs/2.1/managed-bean-javadocs/index.html[+Javadoc da anotação`@ManagedBean`+] afirma:
_Se o valor do atributo `eager()` for `true` e o valor de `managed-bean-scope` for "application", o runtime deverá instanciar essa classe quando a aplicação for iniciada. Essa instanciação e o armazenamento da instância devem ocorrer antes das solicitações serem processadas. Se _eager_ não estiver especificado ou for `false`, ou se o `managed-bean-scope` for diferente de "application", ocorrerá a instanciação "lenta" default e o armazenamento com escopo do Bean gerenciado._
-4. Como o `UserNumberBean` está no escopo da sessão, implemente-o na interface `Serializable`.
+
+[start=4]
+. Como o `UserNumberBean` está no escopo da sessão, implemente-o na interface `Serializable`.
[source,java]
----
@@ -241,7 +265,7 @@
@SessionScoped
public class UserNumberBean *implements Serializable* {
----
-Utilize o indicador de dica ( image::images/hint-icon.png[] ) para importar `java.io.Serializable` para a classe.
+Utilize o indicador de dica ( image:images/hint-icon.png[] ) para importar `java.io.Serializable` para a classe.
[[addingProperties]]
@@ -261,14 +285,22 @@
Integer randomInt;
*Integer userNumber;*
----
-2. Clique com o botão direito do mouse no editor e selecione Inserir Código (Alt-Insert; Ctrl-I no Mac). Escolha Getter e Setter.
+
+[start=2]
+. Clique com o botão direito do mouse no editor e selecione Inserir Código (Alt-Insert; Ctrl-I no Mac). Escolha Getter e Setter.
+
image::images/getter-setter.png[title="Utilizar o IDE para gerar métodos de acesso para as propriedades"]
-3. Selecione a opção `userNumber` : `Integer`. Clique em Gerar.
+
+[start=3]
+. Selecione a opção `userNumber` : `Integer`. Clique em Gerar.
+
image::images/generate-getters-setters.png[title="Utilizar o IDE para gerar métodos de acesso para as propriedades"]
Observe que os métodos `getUserNumber()` e `setUserNumber(Integer userNumber)` são adicionados à classe.
-4. Crie uma propriedade `response`. Declare uma `String` denominada `response`.
+
+[start=4]
+. Crie uma propriedade `response`. Declare uma `String` denominada `response`.
[source,java]
----
@@ -281,7 +313,9 @@
Integer userNumber;
*String response;*
----
-5. Crie um método getter para `response`. (Esta aplicação não precisará de um setter.) Você pode utilizar a janela pop-up Gerar código do IDE mostrada acima, na etapa 2, para gerar o código do modelo. Neste tutorial, basta colar o método a seguir na classe.
+
+[start=5]
+. Crie um método getter para `response`. (Esta aplicação não precisará de um setter.) Você pode utilizar a janela pop-up Gerar código do IDE mostrada acima, na etapa 2, para gerar o código do modelo. Neste tutorial, basta colar o método a seguir na classe.
[source,html]
----
@@ -305,7 +339,9 @@
O método acima realiza duas funções:
1. Testa se o número informado pelo usuário (`userNumber`) é igual ao número aleatório gerado para a sessão (`randomInt`) e retorna uma resposta `String` apropriada.
2. Isso invalida a sessão do usuário se o usuário adivinhar o número correto (isto é, se `userNumber` for igual a `randomInt`). Isso é necessário para que um novo número seja gerado, caso o usuário queira jogar novamente.
-6. Clique com o botão direito do mouse no editor e selecione Corrigir Importações (Alt-Shift-I; &#8984-Shift-I no Mac). As instruções de importação são criadas automaticamente para:
+
+[start=6]
+. Clique com o botão direito do mouse no editor e selecione Corrigir Importações (Alt-Shift-I; &#8984-Shift-I no Mac). As instruções de importação são criadas automaticamente para:
* `javax.servlet.http.HttpSession`
* `javax.faces.context.FacesContext`
@@ -313,7 +349,8 @@
image::images/documentation-support.png[title="Pressione Ctrl-Espaço para chamar a funcionalidade autocompletar código e o suporte à documentação"]
-Clique no ícone ( image::images/web-browser-icon.png[] ) do Web browser na janela da documentação para abrir o Javadoc em um Web browser externo.
+
+Clique no ícone ( image:images/web-browser-icon.png[] ) do Web browser na janela da documentação para abrir o Javadoc em um Web browser externo.
@@ -340,14 +377,19 @@
1. Abra a página `index.xhtml` no editor. Clique duas vezes no nó `index.xhtml` da janela Projetos, ou pressione Alt-Shift-O para utilizar a caixa de diálogo Ir para Arquivo.
As páginas de índice e resposta já contêm os componentes de IU do JSF necessários para este exercício. Basta eliminar os comentários existentes e fazer comentários nos elementos HTML que estiverem sendo usados.
-2. Comente no elemento do form HTML. Para isso, realce o elemento de form HTML, como na imagem a seguir, e pressione Ctrl-/ (&#8984-/ no Mac).
+
+[start=2]
+. Comente no elemento do form HTML. Para isso, realce o elemento de form HTML, como na imagem a seguir, e pressione Ctrl-/ (&#8984-/ no Mac).
*Observação: *para realçar, clique e arraste o elemento no editor com o mouse ou, utilizando o teclado, mantenha Shift pressionado e pressione as teclas de seta.
+
image::images/comment-out.png[title="Realce o código, em seguida, pressione Ctrl-/ para comentá-lo"]
Utilize Ctrl-/ (&#8984-/ no Mac) para alternar entre comentários no editor. É possível aplicar esse atalho do teclado em outros tipos de arquivo, como Java e CSS.
-3. Elimine o comentário do componente do form HTML JSF. Realce o componente, conforme indicado na imagem a seguir, e pressione Ctrl-/ (&#8984-/ no Mac).
+
+[start=3]
+. Elimine o comentário do componente do form HTML JSF. Realce o componente, conforme indicado na imagem a seguir, e pressione Ctrl-/ (&#8984-/ no Mac).
*Observação.* Pode ser necessário pressionar Ctrl-/ duas vezes para remover os comentários do código.
@@ -357,7 +399,9 @@
Após eliminar o comentário do componente de form HTML JSF, o editor indicará que as tags `<h:form>`, `<h:inputText>` e `<h:commandButton>` não foram declaradas.
image::images/undeclared-component.png[title="O editor fornecerá mensagens de erro para os componentes não declarados"]
-4. Para declarar esses componentes, utilize a funcionalidade autocompletar código do IDE para adicionar o namespace da biblioteca de tag à tag `<html>` da página. Coloque o cursor em qualquer uma das tags não declaradas, pressione Alt-Enter e clique em Inserir para adicionar a biblioteca de tags sugerida. (Se houver várias opções, certifique-se de selecionar a tag exibida no editor antes de clicar em Inserir.) O namespace da biblioteca de tags HTML JSF será adicionado à tag `<html>` (mostrado em *negrito* abaixo), e os indicadores de erro desaparecerão.
+
+[start=4]
+. Para declarar esses componentes, utilize a funcionalidade autocompletar código do IDE para adicionar o namespace da biblioteca de tag à tag `<html>` da página. Coloque o cursor em qualquer uma das tags não declaradas, pressione Alt-Enter e clique em Inserir para adicionar a biblioteca de tags sugerida. (Se houver várias opções, certifique-se de selecionar a tag exibida no editor antes de clicar em Inserir.) O namespace da biblioteca de tags HTML JSF será adicionado à tag `<html>` (mostrado em *negrito* abaixo), e os indicadores de erro desaparecerão.
*Observação.* Se o IDE não fornecer a opção de adicionar a biblioteca de tags, será necessário modificar manualmente o elemento ``<html>`` .
@@ -368,7 +412,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"
*xmlns:h="http://xmlns.jcp.org/jsf/html"*>
----
-5. Utilize a linguagem de expressão JSF para vincular a propriedade `userNumber` do `UserNumberBean` ao componente `inputText`. O atributo `value` pode ser utilizado para especificar o valor atual do componente renderizado. Digite o código exibido em *negrito* abaixo.
+
+[start=5]
+. Utilize a linguagem de expressão JSF para vincular a propriedade `userNumber` do `UserNumberBean` ao componente `inputText`. O atributo `value` pode ser utilizado para especificar o valor atual do componente renderizado. Digite o código exibido em *negrito* abaixo.
[source,java]
----
@@ -379,7 +425,9 @@
A linguagem de expressão JSF utiliza a sintaxe `#{}`. Dentro desses delimitadores, especifique o nome do bean gerenciado e a propriedade do Bean que deseja aplicar, separados por um ponto (`.`). Agora, quando os dados do form forem enviados ao servidor, o valor será salvo automaticamente na propriedade `userNumber` utilizando o setter da propriedade (`setUserNumber()`). Além disso, quando a página for solicitada e um valor para `userNumber` já tiver sido definido, o valor será exibido automaticamente no componente `inputText` renderizado. Para obter mais informações, consulte o link:http://docs.oracle.com/javaee/7/tutorial/doc/jsf-develop001.htm#BNAQP[+Tutorial do Java EE 7: 12.1.2 Usando o EL para Beans Gerenciados de Referência+].
-6. Especifique o destino da solicitação chamada ao clicar no botão do form. Na versão HTML do form, você pode fazer isso utilizando o atributo `action` da tag `<form>`. Com o JSF, você pode utilizar o atributo `action` do `commandButton`. Além disso, devido à funcionalidade de navegação implícita do JSF 2.x, basta especificar apenas o nome do arquivo de destino, sem a sua extensão.
+
+[start=6]
+. Especifique o destino da solicitação chamada ao clicar no botão do form. Na versão HTML do form, você pode fazer isso utilizando o atributo `action` da tag `<form>`. Com o JSF, você pode utilizar o atributo `action` do `commandButton`. Além disso, devido à funcionalidade de navegação implícita do JSF 2.x, basta especificar apenas o nome do arquivo de destino, sem a sua extensão.
Digite o código exibido em *negrito* abaixo.
@@ -413,31 +461,48 @@
As etapas de 7 a 12 a seguir são opcionais. Se quiser construir o projeto rapidamente, passe para <<response,`response.xhtml`>>.
-7. Verifique se a expressão EL acima chama o método `setUserNumber()` quando a solicitação é processada. Para isso, utilize o depurador Java do IDE.
+
+[start=7]
+. Verifique se a expressão EL acima chama o método `setUserNumber()` quando a solicitação é processada. Para isso, utilize o depurador Java do IDE.
Alterne para a classe `UserNumberBean` (Pressione Ctrl-Tab e selecione o arquivo na lista.) Defina um ponto de interrupção na assinatura do método `setUserNumber()`. É possível fazer isso clicando na margem esquerda. É exibido um indicador vermelho, mostrando que um ponto de interrupção do método foi definido.
image::images/set-breakpoint.png[title="Clique no margem esquerda do editor para definir pontos de interrupção"]
-8. Clique no botão Depurar Projeto (image::images/breakpoint-btn.png[]) na barra de ferramentas principal do IDE. A sessão de depuração é iniciada, e a página de boas-vindas do projeto é aberta no browser.
+
+[start=8]
+. Clique no botão Depurar Projeto (image:images/breakpoint-btn.png[]) na barra de ferramentas principal do IDE. A sessão de depuração é iniciada, e a página de boas-vindas do projeto é aberta no browser.
*Observações.*
* Talvez seja necessário confirmar a porta do servidor para depurar a aplicação.
* Se uma caixa de diálogo Depurar Projeto for exibida, selecione a opção 'Java do Servidor' default e clique em Depurar.
-9. No browser, digite um número no form e clique no botão "Submeter".
-10. Volte ao IDE e inspecione a classe `UserNumberBean`. O depurador será interrompido no método `setUserNumber()`.
+
+[start=9]
+. No browser, digite um número no form e clique no botão "Submeter".
+
+[start=10]
+. Volte ao IDE e inspecione a classe `UserNumberBean`. O depurador será interrompido no método `setUserNumber()`.
+
image::images/debugger-suspended.png[title="O depurador é suspenso de acordo com pontos de interrupção"]
-11. Abra a janela Variáveis do Depurador (Selecione Janela > Depuração > Variáveis, ou pressione Ctrl-Shift-1). Você verá os valores das variáveis no ponto em que o depurador foi suspenso.
+
+[start=11]
+. Abra a janela Variáveis do Depurador (Selecione Janela > Depuração > Variáveis, ou pressione Ctrl-Shift-1). Você verá os valores das variáveis no ponto em que o depurador foi suspenso.
+
image::images/variables-window.png[title="Monitorar valores das variáveis utilizando a janela Variáveis do Depurador"]
Na imagem acima, o valor '`4`' foi fornecido à variável `userNumber` na assinatura `setUserNumber()`. (O número 4 foi inserido no form.) '`this`' se refere ao objeto `UserNumberBean` criado para a sessão do usuário. Abaixo dele, você verá que o valor da propriedade `userNumber` é atualmente `null`.
-12. Na barra de ferramentas do Depurador, clique no botão Fazer Step Into (image::images/step-into-btn.png[]). O depurador executará a linha na qual ele está atualmente suspenso. A janela Variáveis se será atualiza, indicando as alterações na execução.
+
+[start=12]
+. Na barra de ferramentas do Depurador, clique no botão Fazer Step Into (image:images/step-into-btn.png[]). O depurador executará a linha na qual ele está atualmente suspenso. A janela Variáveis se será atualiza, indicando as alterações na execução.
+
image::images/variables-window2.png[title="A janela de variáveis é atualizada ao percorrer o código"]
A propriedade `userNumber` agora está definida com o valor inserido no form.
-13. Escolha Depurar > Finalizar Sessão do Depurador (Shift-F5; Shift-Fn-F5 no Mac) no menu principal para interromper o depurador.
+
+[start=13]
+. Escolha Depurar > Finalizar Sessão do Depurador (Shift-F5; Shift-Fn-F5 no Mac) no menu principal para interromper o depurador.
[[response]]
@@ -448,7 +513,9 @@
*Observação: *Para realçar, clique e arraste o mouse no editor ou, utilizando o teclado, mantenha Shift pressionado e utilize as teclas de seta.
-3. Elimine o comentário do componente do form HTML JSF. Realce as tags `<h:form>` de abertura e fechamento e o código entre elas, depois pressione Ctrl-/ (&#8984-/ no Mac).
+
+[start=3]
+. Elimine o comentário do componente do form HTML JSF. Realce as tags `<h:form>` de abertura e fechamento e o código entre elas, depois pressione Ctrl-/ (&#8984-/ no Mac).
Neste estágio, o código entre as tags `<body>` terão a seguinte aparência:
@@ -489,7 +556,9 @@
Após eliminar o comentário do componente de form HTML JSF, o editor indicará que as tags `<h:form>` e `<h:commandButton>` não foram declaradas.
-4. Para declarar esses componentes, utilize a funcionalidade autocompletar código do IDE para adicionar o namespace da biblioteca de tag à tag `<html>` da página.
+
+[start=4]
+. Para declarar esses componentes, utilize a funcionalidade autocompletar código do IDE para adicionar o namespace da biblioteca de tag à tag `<html>` da página.
Utilize o suporte para a funcionalidade autocompletar código do editor para adicionar os namespaces JSF necessários ao arquivo. Quando você seleciona uma tag JSF ou Facelets por meio da funcionalidade autocompletar código, o namespace necessário é automaticamente adicionado ao elemento raiz do documento. Para obter mais informações, consulte link:jsf20-support.html#facelets[+Suporte JSF 2.x no NetBeans IDE+].
@@ -506,7 +575,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"
*xmlns:h="http://xmlns.jcp.org/jsf/html"*>
----
-5. Especifique o destino da solicitação que é chamada quando o usuário clica no botão do form. Você deseja definir o botão para que um usuário retorne à página de índice ao clicar nele. Para isso, utilize, o atributo `action` do `commandButton`. Digite o código exibido em *negrito*.
+
+[start=5]
+. Especifique o destino da solicitação que é chamada quando o usuário clica no botão do form. Você deseja definir o botão para que um usuário retorne à página de índice ao clicar nele. Para isso, utilize, o atributo `action` do `commandButton`. Digite o código exibido em *negrito*.
[source,xml]
----
@@ -520,7 +591,9 @@
*Observação: *Ao digitar `action="index"`, você estará confiando na funcionalidade de navegação implícita do JSF. Quando um usuário clica no botão do form, o runtime do JSF procura um arquivo denominado `índice`. Ele supõe que a extensão do arquivo é a mesma extensão utilizada pelo arquivo que originou a solicitação (`response*.xhtml*`) e procura o arquivo `index.xhtml` no mesmo diretório do arquivo de origem (por exemplo, webroot).
-6. Substitua o texto estático "[ response here ]" pelo valor da propriedade `response` do `UserNumberBean`. Para isso, utilize a linguagem de expressão JSF. Digite (em *negrito*):
+
+[start=6]
+. Substitua o texto estático "[ response here ]" pelo valor da propriedade `response` do `UserNumberBean`. Para isso, utilize a linguagem de expressão JSF. Digite (em *negrito*):
[source,html]
----
@@ -529,7 +602,10 @@
<h4>*<h:outputText value="#{UserNumberBean.response}"/>*</h4>
----
-7. Execute o projeto (clique no botão ( image::images/run-project-btn.png[] ) Executar Projeto ou pressione F6; fn-F6 no Mac). Quando a página de boas-vindas for exibida no browser, informe um número e clique em `submeter`. Você verá a página de resposta com uma aparência semelhante à seguinte (contanto que você não adivinhe o número correto):
+
+[start=7]
+. Execute o projeto (clique no botão ( image:images/run-project-btn.png[] ) Executar Projeto ou pressione F6; fn-F6 no Mac). Quando a página de boas-vindas for exibida no browser, informe um número e clique em `submeter`. Você verá a página de resposta com uma aparência semelhante à seguinte (contanto que você não adivinhe o número correto):
+
image::images/response2.png[title="Exibir o status atual do projeto em um browser"]
Há duas coisas erradas no status atual da página de resposta:
@@ -539,7 +615,10 @@
As duas etapas a seguir corrigirão estes pontos, respectivamente.
-8. Defina o atributo `escape` da tag `<h:outputText>` como `false`. Coloque o cursor entre `outputText` e `value`, insira um espaço e pressione Ctrl-Espaço para chamar a funcionalidade autocompletar código. Role para baixo para selecionar o atributo `escape` e inspecione a documentação.
+
+[start=8]
+. Defina o atributo `escape` da tag `<h:outputText>` como `false`. Coloque o cursor entre `outputText` e `value`, insira um espaço e pressione Ctrl-Espaço para chamar a funcionalidade autocompletar código. Role para baixo para selecionar o atributo `escape` e inspecione a documentação.
+
image::images/escape-false.png[title="Pressione Ctrl-Espaço para exibir possíveis valores do atributo e a documentação"]
Conforme indicado pela documentação, o valor `escape` está definido como `true` por default. Isso significa que os caracteres que normalmente são submetidos a parse como html serão incluídos na string, conforme ilustrado acima. Definir o valor como `false` permite aos caracteres que podem ser submetidos a parse como html sejam renderizados como tal.
@@ -552,7 +631,9 @@
<h4><h:outputText *escape="false"* value="#{UserNumberBean.response}"/></h4>
----
-9. Defina, o atributo `prependId` da tag `<h:form>` como `false`. Coloque o cursor logo depois de '`m`' em `<h:form>`, insira um espaço, em seguida, pressione Ctrl-Espaço para chamar a funcionalidade autocompletar código. Role para baixo para selecionar o atributo `prependId` e inspecione a documentação. Clique em Inserir e digite `false` como valor.
+
+[start=9]
+. Defina, o atributo `prependId` da tag `<h:form>` como `false`. Coloque o cursor logo depois de '`m`' em `<h:form>`, insira um espaço, em seguida, pressione Ctrl-Espaço para chamar a funcionalidade autocompletar código. Role para baixo para selecionar o atributo `prependId` e inspecione a documentação. Clique em Inserir e digite `false` como valor.
[source,java]
----
@@ -575,16 +656,28 @@
O ID do elemento do form é `j_idt5` e esse ID é _precedido_ pelo ID do botão Voltar incluído no form (mostrado em *negrito* acima). Como o botão Voltar depende da regra de estilo do `#backButton` (definido em `stylesheet.css`), essa regra se torna um empecilho quando o ID do JSF é inserido como prefixo. Isso pode ser evitado ao definir `prependId` como `false`.
-10. Execute o projeto novamente (clique no botão ( image::images/run-project-btn.png[] ) Executar Projeto ou pressione F6; fn-F6 no Mac). Insira um número na página de boas-vindas e clique em Submeter. A página de resposta agora exibe a mensagem de resposta sem as tags `<p>` e o botão Voltar está no lugar correto.
+
+[start=10]
+. Execute o projeto novamente (clique no botão ( image:images/run-project-btn.png[] ) Executar Projeto ou pressione F6; fn-F6 no Mac). Insira um número na página de boas-vindas e clique em Submeter. A página de resposta agora exibe a mensagem de resposta sem as tags `<p>` e o botão Voltar está no lugar correto.
+
image::images/response3.png[title="Exibir o status atual do projeto em um browser"]
-11. Clique no botão Voltar. Como o valor atual da propriedade `userNumber` do `UserNumberBean` está vinculado ao componente JSF `inputText`, o número inserido anteriormente agora será exibido no campo de texto.
-12. Inspecione o log do servidor na janela de Saída do IDE (Ctrl-4; &#8984-4 no Mac) para determinar qual é o suposto número correto.
+
+[start=11]
+. Clique no botão Voltar. Como o valor atual da propriedade `userNumber` do `UserNumberBean` está vinculado ao componente JSF `inputText`, o número inserido anteriormente agora será exibido no campo de texto.
+
+[start=12]
+. Inspecione o log do servidor na janela de Saída do IDE (Ctrl-4; &#8984-4 no Mac) para determinar qual é o suposto número correto.
Se, por alguma razão, você não puder ver o log do servidor, você poderá abri-lo alternando para a janela Serviços (Ctrl-5; &#8984-5 no Mac) e expandindo o nó Servidores. Em seguida, clique com o botão direito do mouse no GlassFish Server no qual o projeto está implantado e selecione Exibir Log do Servidor. Se você não conseguir ver o número no log do servidor, tente construir novamente a aplicação clicando com o botão direito do mouse no nó do projeto e selecionando Limpar e Construir Projeto.
-13. Digite o número correto e clique em Submeter. A aplicação irá comparar a sua entrada com o número atualmente salvo e exibirá a mensagem apropriada.
+
+[start=13]
+. Digite o número correto e clique em Submeter. A aplicação irá comparar a sua entrada com o número atualmente salvo e exibirá a mensagem apropriada.
+
image::images/yay.png[title="A resposta correta será exibida ao inserir o número correspondente"]
-14. Clique novamente no botão Voltar. Observe que o número inserido anteriormente não será mais exibido no campo de texto. Lembre-se de que o método `getResponse()` do `UserNumberBean` <<getResponse,invalida a sessão atual do usuário>> quando o número correto é descoberto.
+
+[start=14]
+. Clique novamente no botão Voltar. Observe que o número inserido anteriormente não será mais exibido no campo de texto. Lembre-se de que o método `getResponse()` do `UserNumberBean` <<getResponse,invalida a sessão atual do usuário>> quando o número correto é descoberto.
@@ -611,12 +704,16 @@
1. Crie um arquivo de modelo de Facelets. Pressione Ctrl-N (&#8984-N no Mac) para abrir o assistente Arquivo. Selecione a categoria JavaServer Faces e, em seguida, Modelo de Facelets. Clique em Próximo.
2. Digite `template` como nome do arquivo.
3. Escolha um dos oito estilos de layout e clique em Finalizar. (Você utilizará a folha de estilo existente, portanto, não importa qual estilo de layout você escolherá.)
+
image::images/layout-style.png[title="O assistente de Modelo de Facelets permite selecionar entre estilos de layout comuns"]
+
O assistente gera o arquivo `template.xhtml` e as folhas de estilo relacionadas com base na seleção feita, a seguir, coloca-as em uma pasta `resources` > `css` dentro da raiz da Web do projeto.
Depois de concluir o assistente, o arquivo de modelo é aberto no editor. Para exibir o modelo em um browser, clique com o botão direito do mouse no Editor e selecione Exibir.
-4. Examine a marcação do arquivo de modelo. Observe os pontos a seguir:
+
+[start=4]
+. Examine a marcação do arquivo de modelo. Observe os pontos a seguir:
* A biblioteca de tags `facelets` é declarada na tag `<html>` da página. A biblioteca de tags possui o prefixo `ui`.
[source,java]
@@ -648,8 +745,12 @@
*<ui:insert name="top">Top</ui:insert>*
</div>
----
-5. Examine novamente as páginas de <<staticPage,boas-vindas>> e de <<responsePage,resposta>>. O único conteúdo que é alterado nas duas páginas é o título e o texto contido no quadro cinza. O modelo, portanto, pode fornecer todo o conteúdo restante.
-6. Substitua todo o conteúdo de seu arquivo de modelo pelo conteúdo abaixo.
+
+[start=5]
+. Examine novamente as páginas de <<staticPage,boas-vindas>> e de <<responsePage,resposta>>. O único conteúdo que é alterado nas duas páginas é o título e o texto contido no quadro cinza. O modelo, portanto, pode fornecer todo o conteúdo restante.
+
+[start=6]
+. Substitua todo o conteúdo de seu arquivo de modelo pelo conteúdo abaixo.
[source,html]
----
@@ -681,7 +782,9 @@
* O arquivo `stylesheet.css` do projeto substitui as referências da folha de estilo do modelo criadas pelo assistente.
* Todas as tags `<ui:insert>` (e suas tags `<div>`) foram removidas, exceto uma denominada `box`.
* Um par de tags `<ui:insert>` foi colocado no título da página e foi denominado `title`.
-7. Copie o código relevante do arquivo `index.xhtml` ou `response.xhtml` para o modelo. Adicione o conteúdo mostrado em *negrito* abaixo das tags `<h:body>` do arquivo de modelo.
+
+[start=7]
+. Copie o código relevante do arquivo `index.xhtml` ou `response.xhtml` para o modelo. Adicione o conteúdo mostrado em *negrito* abaixo das tags `<h:body>` do arquivo de modelo.
[source,html]
----
@@ -697,7 +800,9 @@
</div>*
</h:body>
----
-8. Execute o projeto. Quando a página de boas-vindas abrir no browser, modifique o URL para o seguinte:
+
+[start=8]
+. Execute o projeto. Quando a página de boas-vindas abrir no browser, modifique o URL para o seguinte:
[source,java]
----
@@ -705,6 +810,7 @@
http://localhost:8080/jsfDemo/faces/template.xhtml
----
O arquivo de modelo é exibido da seguinte forma:
+
image::images/facelets-template.png[title="Exibir o modelo de Facelets em um browser"]
O projeto agora contém um arquivo de modelo que fornece a aparência e a estrutura de todas as views. Agora é possível criar arquivos de clientes que chamem o modelo.
@@ -721,9 +827,14 @@
1. Pressione Ctrl-N (⌘-N no Mac) para abrir o assistente de Novo Arquivo. Selecione a categoria JavaServer Faces e, em seguida, Cliente de Modelo de Facelets. Clique em Próximo.
2. Digite `greeting` como nome do arquivo.
3. Clique no botão Procurar ao lado do campo Modelo e, em seguida, utilize a caixa de diálogo exibida para navegar até o arquivo `template.xhtml` criado na seção anterior.
+
image::images/template-client.png[title="Assistente de Cliente de Modelo de Facelets"]
-4. Clique em Finalizar. O novo arquivo de cliente de modelo `greeting.xhtml` é gerado e exibido no editor.
-5. Examine a marcação. Observe o conteúdo realçado em *negrito*.
+
+[start=4]
+. Clique em Finalizar. O novo arquivo de cliente de modelo `greeting.xhtml` é gerado e exibido no editor.
+
+[start=5]
+. Examine a marcação. Observe o conteúdo realçado em *negrito*.
[source,xml]
----
@@ -749,7 +860,9 @@
</html>
----
O arquivo de cliente de modelo faz referência a um modelo utilizando o atributo `template` da tag `<ui:composition>`. Como o modelo contém tags `<ui:insert>` de `title` e `box`, esse cliente de modelo contém as tags `<ui:define>` desses dois nomes. O conteúdo especificado entre as tags `<ui:define>` será o conteúdo inserido no modelo entre as tags `<ui:insert>` do nome correspondente.
-6. Especifique `greeting` como o título do arquivo. Faça a seguinte alteração em *negrito*.
+
+[start=6]
+. Especifique `greeting` como o título do arquivo. Faça a seguinte alteração em *negrito*.
[source,xml]
----
@@ -758,7 +871,9 @@
*Greeting*
</ui:define>
----
-7. Alterne para o arquivo `index.xhtml` (pressione Ctrl-Tab) e copie o conteúdo que normalmente aparece no quadro cinza exibido na página renderizada. Em seguida, volte ao `greeting.xhtml` e cole-o no arquivo de cliente de modelo. (Alterações em *negrito*.)
+
+[start=7]
+. Alterne para o arquivo `index.xhtml` (pressione Ctrl-Tab) e copie o conteúdo que normalmente aparece no quadro cinza exibido na página renderizada. Em seguida, volte ao `greeting.xhtml` e cole-o no arquivo de cliente de modelo. (Alterações em *negrito*.)
[source,xml]
----
@@ -781,7 +896,9 @@
</h:form>*
</ui:define>
----
-8. Declare a biblioteca de tags HTML JSF do arquivo. Coloque o cursor em qualquer um das tags sinalizadas com um erro (qualquer tag com o prefixo `h`') e pressione Ctrl-Espaço. Em seguida, selecione a tag na lista de sugestões da funcionalidade autocompletar código. O namespace da biblioteca de tags será adicionado à tag `<html>` do arquivo (mostrado em *negrito* abaixo) e os indicadores de erro desaparecerão.
+
+[start=8]
+. Declare a biblioteca de tags HTML JSF do arquivo. Coloque o cursor em qualquer um das tags sinalizadas com um erro (qualquer tag com o prefixo `h`') e pressione Ctrl-Espaço. Em seguida, selecione a tag na lista de sugestões da funcionalidade autocompletar código. O namespace da biblioteca de tags será adicionado à tag `<html>` do arquivo (mostrado em *negrito* abaixo) e os indicadores de erro desaparecerão.
[source,java]
----
@@ -833,11 +950,16 @@
</html>
----
Observe que o arquivo é idêntico a `greeting.xhtml`, exceto pelo conteúdo especificado entre as tags `<ui:define>` de `title` e `box`.
-2. No descritor de implantação `web.xml` do projeto, modifique a entrada do arquivo de boas-vindas para que `greeting.xhtml` seja a página exibida quando a aplicação for executada.
+
+[start=2]
+. No descritor de implantação `web.xml` do projeto, modifique a entrada do arquivo de boas-vindas para que `greeting.xhtml` seja a página exibida quando a aplicação for executada.
Na janela Projetos, clique duas vezes em Arquivos de Configuração > `web.xml` para abri-lo no editor. Na guia Páginas, altere o campo Arquivos de Boas-Vindas para `faces/greeting.xhtml`.
+
image::images/welcome-files.png[title="Alterar a entrada de Arquivos de Boas-Vindas no descritor de implantação"]
-3. Execute o projeto para ver como ele é em um browser. Pressione F6 (fn-F6 no Mac) ou clique no botão (image::images/run-project-btn.png[]) Executar Projeto na barra de ferramentas principal. O projeto será implantado no GlassFish Server e aberto em um browser.
+
+[start=3]
+. Execute o projeto para ver como ele é em um browser. Pressione F6 (fn-F6 no Mac) ou clique no botão (image:images/run-project-btn.png[]) Executar Projeto na barra de ferramentas principal. O projeto será implantado no GlassFish Server e aberto em um browser.
Quando você utiliza o modelo de Facelets e os arquivos de clientes de modelo, a aplicação se comportará exatamente da mesma forma que antes. Fatorando o código duplicado nas páginas de boas-vindas e de resposta da aplicação, você consegue reduzir o tamanho da aplicação e eliminar a possibilidade de escrever mais códigos duplicados, caso mais páginas sejam adicionadas posteriormente. Isso pode tornar o desenvolvimento mais fácil e eficiente ao trabalhar em grandes projetos.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_ru.asciidoc
index c495605..90bd034 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_ru.asciidoc
@@ -80,33 +80,51 @@
IDE также позволяет создавать новые проекты с поддержкой JSF 2.x. Подробнее см. раздел link:jsf20-support.html#creatingSupport[+Создание нового проекта с поддержкой JSF 2.x+].
-1. Нажмите кнопку 'Открыть проект' ( image::images/open-project-btn.png[] ) на главной панели инструментов IDE или нажмите Ctrl-Shift-O (⌘-Shift-O в Mac).
+1. Нажмите кнопку 'Открыть проект' ( image:images/open-project-btn.png[] ) на главной панели инструментов IDE или нажмите Ctrl-Shift-O (⌘-Shift-O в Mac).
2. В диалоговом окне "Открытие проекта" перейдите к папке на компьютере, в которой хранится разархивированный файл учебного проекта. Выберите его, а затем для открытия проекта в среде IDE нажмите кнопку "Открыть проект".
*Примечание.* При открытии проекта NetBeans может быть отображен запрос на разрешение ссылки на библиотеки JUnit, если при установке IDE не был установлен подключаемый модуль JUnit.
-3. Выполните проект и посмотрите, как он выглядит в браузере. Либо щелкните правой кнопкой мыши узел проекта `jsfDemo` в окне 'Проекты' и выберите 'Запустить' или нажмите кнопку 'Запустить проект' ( image::images/run-project-btn.png[] ) на главной панели инструментов. Проект запакован и разворачивается на сервере GlassFish, а в браузере открывается страница приветствия(`index.xhtml`).
+
+[start=3]
+. Выполните проект и посмотрите, как он выглядит в браузере. Либо щелкните правой кнопкой мыши узел проекта `jsfDemo` в окне 'Проекты' и выберите 'Запустить' или нажмите кнопку 'Запустить проект' ( image:images/run-project-btn.png[] ) на главной панели инструментов. Проект запакован и разворачивается на сервере GlassFish, а в браузере открывается страница приветствия(`index.xhtml`).
+
image::images/run-project.png[title="Запустите проект, чтобы просмотреть его в браузере."]
-4. Нажмите кнопку "Отправить". Страница ответа (`response.xhtml`) отображается следующим образом:
+
+[start=4]
+. Нажмите кнопку "Отправить". Страница ответа (`response.xhtml`) отображается следующим образом:
+
image::images/response.png[title="Страницы приветствия и отклика в настоящее время являются статическими страницами"]
В настоящее время страницы приветствия и отклика являются статическими, и совместно с файлом `stylesheet.css` и изображением `duke.png` они являются единственными файлами приложений, доступными из браузера.
-5. В окне 'Проекты' (Ctrl-1; ⌘ -1 в Mac) щелкните правой кнопкой мыши узел проекта и выберите 'Свойства', чтобы открыть окно 'Свойства проекта'.
-6. Выберите категорию 'Платформы', а затем нажмите кнопку 'Добавить'.
-7. Выберите 'JavaServer Faces' в диалоговом окне 'Добавление платформы'. Нажмите кнопку 'ОК'.
+
+[start=5]
+. В окне 'Проекты' (Ctrl-1; ⌘ -1 в Mac) щелкните правой кнопкой мыши узел проекта и выберите 'Свойства', чтобы открыть окно 'Свойства проекта'.
+
+[start=6]
+. Выберите категорию 'Платформы', а затем нажмите кнопку 'Добавить'.
+
+[start=7]
+. Выберите 'JavaServer Faces' в диалоговом окне 'Добавление платформы'. Нажмите кнопку 'ОК'.
+
image::images/add-framework.png[title="Добавление поддержки JSF к существующему проекту"]
После выбора "JavaServer Faces" станут доступными различные параметры настройки. На вкладке 'Библиотеки' вы можете указать, как проект обращается к библиотекам JSF 2.x. Доступная версия JSF будет зависеть от версии IDE и сервера GlassFish. По умолчанию используются библиотеки, поставляемые с сервером (сервером GlassFish). Тем не менее, в IDE также входят библиотеки JSF 2.x. (Можно выбрать параметр "Зарегистрированные библиотеки", если их необходимо использовать в проекте).
image::images/libraries-tab.png[title="Укажите доступ к библиотекам JSF 2.x"]
-8. Выберите вкладку "Настройка". Можно указать способ регистрации сервлета Faces в дескрипторе развертывания проекта. Также можно указать, нужно ли в проекте использовать страницы Facelets или JSP.
+
+[start=8]
+. Выберите вкладку "Настройка". Можно указать способ регистрации сервлета Faces в дескрипторе развертывания проекта. Также можно указать, нужно ли в проекте использовать страницы Facelets или JSP.
+
image::images/jsf-configuration.png[title="Укажите параметры сервлета Faces и предпочитаемый язык"]
Вы также можете легко настроить проект для использования различных наборов компонентов JSF на вкладке 'Компоненты'. Чтобы использовать набор компонентов, нужно загрузить необходимые библиотеки и использовать диспетчер Ant Library для создания новой библиотеки с библиотеками наборов компонентов.
image::images/jsf-components.png[title="Укажите параметры сервлета Faces и предпочитаемый язык"]
-9. Нажмите кнопку "ОК" для подтверждения изменений и закройте окно "Свойства проекта".
+
+[start=9]
+. Нажмите кнопку "ОК" для подтверждения изменений и закройте окно "Свойства проекта".
После добавления поддержки JSF к проекту дескриптор развертывания `web.xml` изменяется и выглядит следующим образом. (Изменения *выделены полужирным шрифтом*.)
@@ -166,8 +184,11 @@
* *Пакет:* guessNumber;
* *Имя:* UserNumberBean
* *Контекст:* сеанс
+
image::images/managed-bean.png[title="Используйте мастер управляемых компонентов JSF для создания нового управляемого компонента"]
-3. Нажмите кнопку "Завершить". Класс `UserNumberBean` будет создан и открыт в редакторе. Обратите внимание на следующие аннотации (*выделено полужирным шрифтом*):
+
+[start=3]
+. Нажмите кнопку "Завершить". Класс `UserNumberBean` будет создан и открыт в редакторе. Обратите внимание на следующие аннотации (*выделено полужирным шрифтом*):
[source,java]
----
@@ -223,8 +244,13 @@
Вышеуказанный код создает случайное число от 0 до 10 и записывает это число в протокол сервера.
-2. Исправьте операторы импорта. Для этого щелкните метку4 подсказки ( image::images/hint-icon.png[] ), которая отображается на левой границе редактора, затем выберите параметр для импорта `java.util.Random` в класс.
-3. Повторно запустите проект (нажмите кнопку 'Запустить проект' ( image::images/run-project-btn.png[] ) или нажмите F6; fn-F6 в Mac). При выполнении проекта файл протокола сервера автоматически открывается в окне вывода.
+
+[start=2]
+. Исправьте операторы импорта. Для этого щелкните метку4 подсказки ( image:images/hint-icon.png[] ), которая отображается на левой границе редактора, затем выберите параметр для импорта `java.util.Random` в класс.
+
+[start=3]
+. Повторно запустите проект (нажмите кнопку 'Запустить проект' ( image:images/run-project-btn.png[] ) или нажмите F6; fn-F6 в Mac). При выполнении проекта файл протокола сервера автоматически открывается в окне вывода.
+
image::images/output1.png[title="Файл журнала сервера автоматически открывается в окне вывода."]
Обратите внимание на то, что в окне вывода не отображается "`Номер Дюка: `" (как указывалось в конструкторе). Объект `UserNumberBean` не создан, так как по умолчанию в JSF используется _"ленивое" создание экземпляра_. Таким образом, компоненты в определенных контекстах создаются и инициализируются, только если они необходимы в приложении.
@@ -232,7 +258,9 @@
Состояния link:http://javaserverfaces.java.net/nonav/docs/2.1/managed-bean-javadocs/index.html[+Документации Javadoc по аннотации `@ManagedBean`+]:
_Если атрибут `eager()` имеет значение `true`, а значением `managed-bean-scope` является "application", то в среде выполнения при запуске приложения должен быть создан экземпляр этого класса. Создание и сохранение экземпляра должно осуществляться до обслуживания запросов. Если атрибут _eager_ не указан либо имеет значение `false` или элементу `managed-bean-scope` не присвоено значение "приложение", по умолчанию происходит "ленивое" создание экземпляра и контекстное сохранение управляемого компонента._
-4. Поскольку класс `UserNumberBean` входит в контекст сеанса, реализуется интерфейс `Serializable`.
+
+[start=4]
+. Поскольку класс `UserNumberBean` входит в контекст сеанса, реализуется интерфейс `Serializable`.
[source,java]
----
@@ -241,7 +269,7 @@
@SessionScoped
public class UserNumberBean *implements Serializable* {
----
-Используйте метку подсказки ( image::images/hint-icon.png[] ) для импорта `java.io.Serializable` в класс.
+Используйте метку подсказки ( image:images/hint-icon.png[] ) для импорта `java.io.Serializable` в класс.
[[addingProperties]]
@@ -261,14 +289,22 @@
Integer randomInt;
*Integer userNumber;*
----
-2. Щелкните правой кнопкой мыши в редакторе и выберите команду "Вставить код" (ALT+INS; CTRL+I на компьютере Mac). Выберите методы получения и установки.
+
+[start=2]
+. Щелкните правой кнопкой мыши в редакторе и выберите команду "Вставить код" (ALT+INS; CTRL+I на компьютере Mac). Выберите методы получения и установки.
+
image::images/getter-setter.png[title="Используйте IDE для создания методов доступа для свойств"]
-3. Выберите параметр `userNumber`: `Integer`. Нажмите кнопку "Создать".
+
+[start=3]
+. Выберите параметр `userNumber`: `Integer`. Нажмите кнопку "Создать".
+
image::images/generate-getters-setters.png[title="Используйте IDE для создания методов доступа для свойств"]
Обратите внимание на то, что методы `getUserNumber()` и `setUserNumber(Integer userNumber)` добавлены в класс.
-4. Создайте свойство `response`. Объявите `String` с именем `response`.
+
+[start=4]
+. Создайте свойство `response`. Объявите `String` с именем `response`.
[source,java]
----
@@ -281,7 +317,9 @@
Integer userNumber;
*String response;*
----
-5. Создайте метод получения для `response`. (Для этого приложения не требуется метод установки). Для создания кода шаблона в среде IDE можно использовать всплывающее окно "Создание кода", упомянутое выше в действии 2. Однако в целях изучения данного руководства просто вставьте нижеуказанный метод в класс.
+
+[start=5]
+. Создайте метод получения для `response`. (Для этого приложения не требуется метод установки). Для создания кода шаблона в среде IDE можно использовать всплывающее окно "Создание кода", упомянутое выше в действии 2. Однако в целях изучения данного руководства просто вставьте нижеуказанный метод в класс.
[source,html]
----
@@ -305,7 +343,9 @@
Вышеуказанный метод выполняет две функции.
1. Тестирует введенное пользователем число (`userNumber`) на равенство случайному числу, сгенерированному для сеанса (`randomInt`), и возвращает соответствующий ответ `String`.
2. Определяет пользовательский сеанс как недействительный, если пользователь ввел правильное число (т.е., если `userNumber` равно `randomInt`). Это необходимо для того, чтобы новое сгенерированное число побудило пользователя сыграть еще раз.
-6. Щелкните правой кнопкой мыши в области редактора и выберите команду "Исправить операторы импорта" (ALT+SHIFT+I; &#8984+SHIFT+I на компьютере Mac). Параметры импорта автоматически создаются для:
+
+[start=6]
+. Щелкните правой кнопкой мыши в области редактора и выберите команду "Исправить операторы импорта" (ALT+SHIFT+I; &#8984+SHIFT+I на компьютере Mac). Параметры импорта автоматически создаются для:
* `javax.servlet.http.HttpSession`
* `javax.faces.context.FacesContext`
@@ -313,7 +353,8 @@
image::images/documentation-support.png[title="Для вызова поддержки автозавершения кода и документации нажмите сочетание клавиш CTRL+ПРОБЕЛ."]
-Щелкните значок веб-браузера ( image::images/web-browser-icon.png[] ) в окне документации, чтобы открыть Javadoc во внешнем веб-браузере.
+
+Щелкните значок веб-браузера ( image:images/web-browser-icon.png[] ) в окне документации, чтобы открыть Javadoc во внешнем веб-браузере.
@@ -340,14 +381,19 @@
1. Откройте страницу `index.xhtml` в редакторе. Дважды щелкните узел `index.xhtml` в окне "Проекты" или нажмите сочетание клавиш ALT+SHIFT+O для открытия диалогового окна "Переход к файлу".
Как индекс, так и страницы ответов уже содержат компоненты пользовательского интерфейса JSF, необходимые для этого упражнения. Просто раскомментируйте их и закомментируйте элементы HTML, используемые в настоящий момент.
-2. Закомментируйте элемент формы HTML. Для этого выделите элемент формы HTML, как показано на изображении ниже, затем нажмите CTRL+/ (&#8984+/ на компьютере Mac).
+
+[start=2]
+. Закомментируйте элемент формы HTML. Для этого выделите элемент формы HTML, как показано на изображении ниже, затем нажмите CTRL+/ (&#8984+/ на компьютере Mac).
*Примечание. *Для выделения воспользуйтесь функцией перетаскивания в редакторе с помощью мыши или с помощью клавиатуры удерживайте клавишу Shift и используйте клавиши со стрелками.
+
image::images/comment-out.png[title="Выделите код, затем нажмите Ctrl-/ для закомментирования кода"]
Для переключения комментариев нажмите сочетание клавиш CTRL+/ (&#8984+/ на компьютере Mac). Эту комбинацию клавиш также можно использовать для других типов файлов, например, Java и CSS.
-3. Раскомментируйте компонент формы HTML для JSF. Выделите этот компонент, как показано на рисунке ниже, затем нажмите CTRL+/ (&#8984+/ на компьютере Mac).
+
+[start=3]
+. Раскомментируйте компонент формы HTML для JSF. Выделите этот компонент, как показано на рисунке ниже, затем нажмите CTRL+/ (&#8984+/ на компьютере Mac).
*Примечание.* Возможно, вам придется нажать Ctrl-/ дважды, чтобы раскомментировать код.
@@ -357,7 +403,9 @@
После того как компонент формы HTML для JSF раскомментирован, в редакторе будет указано, что теги `<h:form>`, `<h:inputText>` и `<h:commandButton>` не объявлены.
image::images/undeclared-component.png[title="Редактор обеспечивает сообщения об ошибках для необъявленных компонентов"]
-4. Для объявления этих компонентов используйте автозавершение кода IDE, чтобы добавить пространство имен библиотеки тегов в тег `<html>` страницы. Наведите курсор на любой из необъявленных тегов, нажмите Alt-Enter и нажмите Enter, чтобы добавить предложенные библиотеки тегов. (При наличии нескольких параметров перед нажатием клавиши ВВОД убедитесь, что выбран тег, отображаемый в редакторе.) Пространство имен библиотеки тегов HTML для JSF добавляется к тегу `<html>` (*выделено ниже полужирным шрифтом*), и указания на ошибки исчезают.
+
+[start=4]
+. Для объявления этих компонентов используйте автозавершение кода IDE, чтобы добавить пространство имен библиотеки тегов в тег `<html>` страницы. Наведите курсор на любой из необъявленных тегов, нажмите Alt-Enter и нажмите Enter, чтобы добавить предложенные библиотеки тегов. (При наличии нескольких параметров перед нажатием клавиши ВВОД убедитесь, что выбран тег, отображаемый в редакторе.) Пространство имен библиотеки тегов HTML для JSF добавляется к тегу `<html>` (*выделено ниже полужирным шрифтом*), и указания на ошибки исчезают.
*Примечание.* Если в IDE нет возможности добавить библиотеку тегов, потребуется вручную изменить элемент ``<html>`` .
@@ -368,7 +416,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"
*xmlns:h="http://xmlns.jcp.org/jsf/html"*>
----
-5. Используйте язык выражения JSF для привязки свойства `userNumber` для `UserNumberBean` к компоненту `inputText`. Атрибут `value` используется для указания текущего значения визуализируемого компонента. Введите в код, отображаемый ниже *полужирным шрифтом*.
+
+[start=5]
+. Используйте язык выражения JSF для привязки свойства `userNumber` для `UserNumberBean` к компоненту `inputText`. Атрибут `value` используется для указания текущего значения визуализируемого компонента. Введите в код, отображаемый ниже *полужирным шрифтом*.
[source,java]
----
@@ -379,7 +429,9 @@
В языке выражения JSF используется синтаксис `#{}`. Внутри этих парных символов указывается имя требуемого управляемого компонента и его свойство, разделенные точкой (`.`). Теперь при отправке данных формы на сервер значение автоматически сохраняется в свойстве `userNumber` с помощью метода установки свойств (`setUserNumber()`). Кроме того, если страница запрошена и значение для `userNumber` уже установлено, значение автоматически отображается в визуализированном компоненте `inputText`. Дополнительные сведения приведены в link:http://docs.oracle.com/javaee/7/tutorial/doc/jsf-develop001.htm#BNAQP[+Руководстве по Java EE 7. Глава 12.1.2 Использование языка выражений для создания ссылок на управляемые сеансные объекты+].
-6. Укажите адресата для запроса, который вызывается при нажатии кнопки формы. В HTML-версии формы это возможно выполнить с помощью атрибута `action` тега `<form>`. С помощью JSF можно использовать атрибут `action` для `commandButton`. Кроме того, благодаря внутренней функции навигации JSF 2.x вам нужно только указать имя конечного файла без расширения.
+
+[start=6]
+. Укажите адресата для запроса, который вызывается при нажатии кнопки формы. В HTML-версии формы это возможно выполнить с помощью атрибута `action` тега `<form>`. С помощью JSF можно использовать атрибут `action` для `commandButton`. Кроме того, благодаря внутренней функции навигации JSF 2.x вам нужно только указать имя конечного файла без расширения.
Введите код, отображаемый ниже *полужирным шрифтом*.
@@ -413,31 +465,48 @@
Нижеприведенные действия с 7 по 12 являются дополнительными. Если необходимо выполнить быструю сборку проекта, сразу перейдите к <<response,`response.xhtml`>>.
-7. Протестируйте, выполняется ли вызов метода `setUserNumber()` вышеуказанным выражением на языке выражения при обработке запроса. Для выполнения этого используйте отладчик Java среды IDE.
+
+[start=7]
+. Протестируйте, выполняется ли вызов метода `setUserNumber()` вышеуказанным выражением на языке выражения при обработке запроса. Для выполнения этого используйте отладчик Java среды IDE.
Переключите на класс `UserNumberBean` (нажмите сочетание клавиш CTRL+TAB и выберите из списка файл). Установите точку останова в сигнатуре метода `setUserNumber()`. Это можно сделать, щелкнув мышкой в области левого поля. Появится красный значок, указывающий, что точка останова метода установлена.
image::images/set-breakpoint.png[title="Щелкните левую границу редактора для задания точек останова"]
-8. Нажмите кнопку 'Отладка проекта' (image::images/breakpoint-btn.png[]) на главной панели инструментов IDE. Начинается сеанс отладки, и в браузере открывается страница приветствия проекта.
+
+[start=8]
+. Нажмите кнопку 'Отладка проекта' (image:images/breakpoint-btn.png[]) на главной панели инструментов IDE. Начинается сеанс отладки, и в браузере открывается страница приветствия проекта.
*Примечания.*
* Вам может быть предложено подтвердить порт сервера для отладки приложений.
* Если появится диалоговое окно 'Отладить проект', выберите опцию по умолчанию 'Java на стороне сервера' и нажмите кнопку 'Отладка'.
-9. В браузере введите номер в форму и нажмите кнопку "Отправить".
-10. Вернитесь в среду IDE и проверьте класс `UserNumberBean`. Отладчик приостановлен в методе `setUserNumber()`.
+
+[start=9]
+. В браузере введите номер в форму и нажмите кнопку "Отправить".
+
+[start=10]
+. Вернитесь в среду IDE и проверьте класс `UserNumberBean`. Отладчик приостановлен в методе `setUserNumber()`.
+
image::images/debugger-suspended.png[title="Выполняется приостановка отладчика в соответствии с точками останова"]
-11. Откройте окно "Переменные отладчика" (выберите "Окно" > "Отладка > "Переменные" или нажмите сочетание клавиш CTRL+SHIFT+1). На экран будут выведены значения переменных для точки, в которой приостановлен отладчик.
+
+[start=11]
+. Откройте окно "Переменные отладчика" (выберите "Окно" > "Отладка > "Переменные" или нажмите сочетание клавиш CTRL+SHIFT+1). На экран будут выведены значения переменных для точки, в которой приостановлен отладчик.
+
image::images/variables-window.png[title="Отслеживание значений переменных с помощью окна 'Переменные отладчика'"]
На приведенном выше изображении значение "`4`" предоставлено для переменной `userNumber` в сигнатуре `setUserNumber()`. (Число 4 введено в форму.) "`this`" относится к объекту `UserNumberBean`, созданному для пользовательского сеанса. Далее можно отметить, что значение свойства `userNumber` в настоящий момент равно `null`.
-12. На панели отладчика нажмите кнопку 'Вход в' ( image::images/step-into-btn.png[] ). Отладчик выполняет обработку строки, на которой он в настоящий момент приостановлен. Происходит обновление окна "Переменные" с указанием выполненных изменений.
+
+[start=12]
+. На панели отладчика нажмите кнопку 'Вход в' ( image:images/step-into-btn.png[] ). Отладчик выполняет обработку строки, на которой он в настоящий момент приостановлен. Происходит обновление окна "Переменные" с указанием выполненных изменений.
+
image::images/variables-window2.png[title="Окно переменных обновляется при переходе по коду"]
Теперь свойству `userNumber` присвоено значение, введенное в форме.
-13. Выберите Отладка> Завершить сеанс отладки (Shift-F5; Shift-Fn-F5 на Mac) из главного меню, чтобы остановить отладчик.
+
+[start=13]
+. Выберите Отладка> Завершить сеанс отладки (Shift-F5; Shift-Fn-F5 на Mac) из главного меню, чтобы остановить отладчик.
[[response]]
@@ -448,7 +517,9 @@
*Примечание: * Для выделения воспользуйтесь функцией перетаскивания в редакторе с помощью мыши или с помощью клавиатуры удерживайте клавишу Shift и используйте клавиши со стрелками.
-3. Раскомментируйте компонент формы HTML для JSF. Выделите открывающий и закрывающий теги `<h:form>` и код между ними, затем нажмите CTRL+/ (&#8984+/ на компьютере Mac).
+
+[start=3]
+. Раскомментируйте компонент формы HTML для JSF. Выделите открывающий и закрывающий теги `<h:form>` и код между ними, затем нажмите CTRL+/ (&#8984+/ на компьютере Mac).
На данном этапе, код между тегами `<body>` выглядит следующим образом:
@@ -489,7 +560,9 @@
После того как компонент формы HTML для JSF раскомментирован, в редакторе будет указано, что теги `<h:form>` и `<h:commandButton>` не объявлены.
-4. Для объявления этих компонентов используйте автозавершение кода IDE, чтобы добавить пространство имен библиотеки тегов в тег `<html>` страницы.
+
+[start=4]
+. Для объявления этих компонентов используйте автозавершение кода IDE, чтобы добавить пространство имен библиотеки тегов в тег `<html>` страницы.
Используйте поддержку автозавершения кода в редакторе для добавления необходимых пространств имен JSF к файлу. При выборе тега JSF или Facelets через автозавершение кода происходит автоматическое добавление требуемого пространства имен к корневому элементу документа. Подробнее см. в разделе link:jsf20-support.html#facelets[+Поддержка JSF 2.x в IDE NetBeans+].
@@ -506,7 +579,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"
*xmlns:h="http://xmlns.jcp.org/jsf/html"*>
----
-5. Укажите адресата для запроса, который вызывается при нажатии пользователем кнопки формы. Кнопку необходимо установить так, чтобы при ее нажатии пользователь возвращался на страницу-указатель. Для этого следует использовать атрибут `action` для `commandButton`. Введите в код, отображаемый *полужирным шрифтом*.
+
+[start=5]
+. Укажите адресата для запроса, который вызывается при нажатии пользователем кнопки формы. Кнопку необходимо установить так, чтобы при ее нажатии пользователь возвращался на страницу-указатель. Для этого следует использовать атрибут `action` для `commandButton`. Введите в код, отображаемый *полужирным шрифтом*.
[source,xml]
----
@@ -520,7 +595,9 @@
*Примечание. * При вводе `action="index"` пользователи в работе зависят от функции явной навигации в JSF. При нажатии кнопки формы в среде выполнения JSF осуществляется поиск файла с именем `index`. Предполагается, что расширение файла такое же, как у файла, от которого был направлен запрос (`response*.xhtml*`), и поиск файла `index.xhtml` выполняется в папке исходного файла (т.е. в корневом веб-узле).
-6. Замените статический текст "[здесь ответ]" значением свойства `response` для `UserNumberBean`. Для этого используйте язык выражения JSF. Введите следующее (*выделено полужирным шрифтом*).
+
+[start=6]
+. Замените статический текст "[здесь ответ]" значением свойства `response` для `UserNumberBean`. Для этого используйте язык выражения JSF. Введите следующее (*выделено полужирным шрифтом*).
[source,html]
----
@@ -529,7 +606,10 @@
<h4>*<h:outputText value="#{UserNumberBean.response}"/>*</h4>
----
-7. Запустите проект (нажмите кнопку 'Запустить проект' ( image::images/run-project-btn.png[] ) или нажмите F6; fn-F6 в Mac). При появлении в браузере страницы приветствия введите номер и нажмите `submit`. Страница ответа будет отображаться следующим образом (выводится на экран, если введен неправильный номер).
+
+[start=7]
+. Запустите проект (нажмите кнопку 'Запустить проект' ( image:images/run-project-btn.png[] ) или нажмите F6; fn-F6 в Mac). При появлении в браузере страницы приветствия введите номер и нажмите `submit`. Страница ответа будет отображаться следующим образом (выводится на экран, если введен неправильный номер).
+
image::images/response2.png[title="Просмотрит текущее состояния проекта в браузере"]
Две ошибки в текущем состоянии страницы ответа:
@@ -539,7 +619,10 @@
При выполнении следующих двух шагов эти ошибки устраняются.
-8. Установите атрибут `escape` тега `<h:outputText>` на `false`. Установите курсор между `outputText` и `value`, вставьте пробел и нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова автозавершения кода. Прокрутите вниз для выбора атрибута `escape` и проверки документации.
+
+[start=8]
+. Установите атрибут `escape` тега `<h:outputText>` на `false`. Установите курсор между `outputText` и `value`, вставьте пробел и нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова автозавершения кода. Прокрутите вниз для выбора атрибута `escape` и проверки документации.
+
image::images/escape-false.png[title="Нажмите Ctrl-Пробел для просмотра возможных значений атрибутов и документации"]
Как указано в документации, значение `escape` установлено по умолчанию на `true`. Это означает, что символы, которые стандартно анализируются как html, включены в строку, как указано выше. Установка значения на `false` означает, что символы, анализируемые как HTML, можно визуализировать как HTML.
@@ -552,7 +635,9 @@
<h4><h:outputText *escape="false"* value="#{UserNumberBean.response}"/></h4>
----
-9. Установите атрибут `prependId` тега `<h:form>` на `false`. Установите курсор сразу после "`m`" в `<h:form>` и вставьте пробел, затем нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова автозавершения кода. Прокрутите вниз для выбора атрибута `prependId` и проверки документации. Затем нажмите ENTER и в качестве значения введите `false`.
+
+[start=9]
+. Установите атрибут `prependId` тега `<h:form>` на `false`. Установите курсор сразу после "`m`" в `<h:form>` и вставьте пробел, затем нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова автозавершения кода. Прокрутите вниз для выбора атрибута `prependId` и проверки документации. Затем нажмите ENTER и в качестве значения введите `false`.
[source,java]
----
@@ -575,16 +660,28 @@
Идентификатором элемента формы является `j_idt5`, и этот идентификатор _предшествует_ идентификатору кнопки "Назад", включенной в форму (*выделено полужирным шрифтом* в приведенном выше примере). Поскольку кнопка "Назад" зависит от правила стиля `#backButton` (определенного в `stylesheet.css`), это правило становится блокированным, если идентификатор JSF предшествует идентификатору кнопки. Этого можно избежать, если для `prependId` установить значение `false`.
-10. Повторно запустите проект (нажмите кнопку 'Запустить проект' ( image::images/run-project-btn.png[] ) или нажмите F6; fn-F6 в Mac). Введите число на странице приветствия, затем нажмите кнопку "Отправить". Теперь на странице ответа отображается ответное сообщение без тегов `<p>`, и кнопка "Назад" размещена правильно.
+
+[start=10]
+. Повторно запустите проект (нажмите кнопку 'Запустить проект' ( image:images/run-project-btn.png[] ) или нажмите F6; fn-F6 в Mac). Введите число на странице приветствия, затем нажмите кнопку "Отправить". Теперь на странице ответа отображается ответное сообщение без тегов `<p>`, и кнопка "Назад" размещена правильно.
+
image::images/response3.png[title="Просмотрит текущее состояния проекта в браузере"]
-11. Нажмите кнопку "Назад". Поскольку текущее значение свойства `userNumber` для `UserNumberBean` привязано к компоненту `inputText` JSF, ранее введенное число теперь отображается в текстовом поле.
-12. Проверьте протокол сервера в окне вывода среды IDE (CTRL+4; &#8984+4 на компьютере Mac) для определения правильного загаданного числа.
+
+[start=11]
+. Нажмите кнопку "Назад". Поскольку текущее значение свойства `userNumber` для `UserNumberBean` привязано к компоненту `inputText` JSF, ранее введенное число теперь отображается в текстовом поле.
+
+[start=12]
+. Проверьте протокол сервера в окне вывода среды IDE (CTRL+4; &#8984+4 на компьютере Mac) для определения правильного загаданного числа.
Если по каким-то причинам просмотреть протокол сервера невозможно, откройте его посредством переключения на окно "Службы" (CTRL+5; &#8984+5 на компьютере Mac) и развертывания узла "Серверы". Затем щелкните правой кнопкой мыши сервер GlassFish, на котором развернут проект и выберите 'Просмотреть журнал сервера'. Если номер не отображается в журнале сервера, попробуйте повторно выполнить сборку приложения, щелкнув правой кнопкой мыши узел проекта и выбрав 'Очистка и сборка'.
-13. Введите правильное число и нажмите кнопку "Отправить". В приложении происходит сравнение введенного числа с текущим сохраненным числом и выводится соответствующее сообщение.
+
+[start=13]
+. Введите правильное число и нажмите кнопку "Отправить". В приложении происходит сравнение введенного числа с текущим сохраненным числом и выводится соответствующее сообщение.
+
image::images/yay.png[title="При вводе соответствующего числа отображается правильный отклик"]
-14. Нажмите еще раз кнопку "Назад". Обратите внимание на то, что ранее введенное число более не отображается в текстовом поле. Следует помнить о том, что метод `getResponse()` для `UserNumberBean` <<getResponse,определяет текущий пользовательский сеанс как недействительный>> при угадывании правильного числа.
+
+[start=14]
+. Нажмите еще раз кнопку "Назад". Обратите внимание на то, что ранее введенное число более не отображается в текстовом поле. Следует помнить о том, что метод `getResponse()` для `UserNumberBean` <<getResponse,определяет текущий пользовательский сеанс как недействительный>> при угадывании правильного числа.
@@ -611,12 +708,16 @@
1. Создайте файл шаблона Facelets. Нажмите сочетание клавиш CTRL+N (&#8984+N на компьютере Mac) для открытия мастера создания файлов. Выберите категорию "JavaServer Faces", затем "Шаблон Facelets". Нажмите кнопку "Далее".
2. В поле "Имя файла" введите `template`.
3. Выберите один из восьми стилей размещения и нажмите кнопку "Готово". (Вы будете использовать существующую таблицу стилей, так что не имеет значения, какой стиль вы выберете.)
+
image::images/layout-style.png[title="Мастер шаблонов Facelets позволяет сделать выбор из распространенных стилей компоновки"]
+
Мастером будут созданы файл `template.xhtml` и сопутствующие таблицы стилей на основе выбора, которые будут помещены в папку `resources` > `css` в корневом веб-узле проекта.
После завершения выполнения мастера в редакторе открывается файл шаблона. Для просмотра шаблона в браузере, щелкните правой кнопкой мыши в редакторе и выберите 'Просмотр'.
-4. Проверьте разметку файла шаблона. Обратите внимание на следующие моменты.
+
+[start=4]
+. Проверьте разметку файла шаблона. Обратите внимание на следующие моменты.
* Библиотека тегов `facelets` объявлена в теге `<html>` страницы. Библиотека тегов имеет префикс `ui`.
[source,java]
@@ -648,8 +749,12 @@
*<ui:insert name="top">Top</ui:insert>*
</div>
----
-5. Повторно проверьте страницу <<staticPage,приветствия>> и страницу <<responsePage,ответа>>. Содержимым, которое изменяется на этих страницах, является только заголовок и текст в сером квадрате. Следовательно, шаблон может включать в себя все остальное содержимое.
-6. Замените все содержимое файла шаблона содержимым, приведенным ниже.
+
+[start=5]
+. Повторно проверьте страницу <<staticPage,приветствия>> и страницу <<responsePage,ответа>>. Содержимым, которое изменяется на этих страницах, является только заголовок и текст в сером квадрате. Следовательно, шаблон может включать в себя все остальное содержимое.
+
+[start=6]
+. Замените все содержимое файла шаблона содержимым, приведенным ниже.
[source,html]
----
@@ -681,7 +786,9 @@
* Файл `stylesheet.css` проекта заменяет ссылки на таблицу стилей шаблона, созданные в мастере.
* Все теги `<ui:insert>` (вместе с тегами `<div>`) удаляются за исключением одного с именем `box`.
* В теги `<ui:insert>` вставляется заголовок страницы с именем `title`.
-7. Скопируйте в шаблон соответствующий код из файла `index.xhtml` или файла `response.xhtml`. Добавьте содержимое, отображаемое ниже *полужирным шрифтом*, в теги `<h:body>` файла шаблона.
+
+[start=7]
+. Скопируйте в шаблон соответствующий код из файла `index.xhtml` или файла `response.xhtml`. Добавьте содержимое, отображаемое ниже *полужирным шрифтом*, в теги `<h:body>` файла шаблона.
[source,html]
----
@@ -697,7 +804,9 @@
</div>*
</h:body>
----
-8. Выполните проект. При открытии страницы приветствия в браузере измените URL-адрес на следующий:
+
+[start=8]
+. Выполните проект. При открытии страницы приветствия в браузере измените URL-адрес на следующий:
[source,java]
----
@@ -705,6 +814,7 @@
http://localhost:8080/jsfDemo/faces/template.xhtml
----
Файл шаблона отображается следующим образом:
+
image::images/facelets-template.png[title="Просмотрите шаблон Facelets в браузере"]
Теперь проект включает в себя файл шаблона, предоставляющий внешний вид и структуру всех представлений. Теперь можно создавать файлы клиента для вызова шаблона.
@@ -721,9 +831,14 @@
1. Нажмите сочетание клавиш CTRL+N (⌘-N на компьютере Mac) для открытия мастера создания файлов. Выберите категорию "JavaServer Faces", затем "Клиент шаблона Facelets". Нажмите кнопку "Далее".
2. В поле "Имя файла" введите `greeting`.
3. Нажмите кнопку "Обзор" рядом с полем "Шаблон", затем в открывшемся диалоговом окне перейдите к файлу `template.xhtml`, созданному в предыдущем разделе.
+
image::images/template-client.png[title="Мастер создания клиентов шаблона Facelets"]
-4. Нажмите кнопку "Завершить". Будет создан новый файл клиента шаблона `greeting.xhtml`, который откроется в редакторе.
-5. Проверьте разметку. Обратите внимание на содержимое, выделенное *полужирным шрифтом*.
+
+[start=4]
+. Нажмите кнопку "Завершить". Будет создан новый файл клиента шаблона `greeting.xhtml`, который откроется в редакторе.
+
+[start=5]
+. Проверьте разметку. Обратите внимание на содержимое, выделенное *полужирным шрифтом*.
[source,xml]
----
@@ -749,7 +864,9 @@
</html>
----
Файл клиента шаблона ссылается на шаблон с помощью атрибута `template` тега `<ui:composition>`. Поскольку шаблон содержит теги `<ui:insert>` для `title` и `box`, клиент шаблона содержит теги `<ui:define>` для этих двух имен. Содержимое, указываемое в тегах `<ui:define>`, - это содержимое, вставляемое в шаблон в тегах `<ui:insert>` соответствующего имени.
-6. Укажите `greeting` в качестве заголовка файла. Внесите следующее изменение, выделенное *полужирным шрифтом*.
+
+[start=6]
+. Укажите `greeting` в качестве заголовка файла. Внесите следующее изменение, выделенное *полужирным шрифтом*.
[source,xml]
----
@@ -758,7 +875,9 @@
*Greeting*
</ui:define>
----
-7. Перейдите к файлу `index.xhtml` (нажмите CTRL+TAB) и скопируйте содержимое, которое обычно появляется в сером квадрате, выведенном на визуализируемой странице. Затем обратно переключитесь на файл `greeting.xhtml` и вставьте его в файл клиента шаблона. (Изменения *выделены полужирным шрифтом*.)
+
+[start=7]
+. Перейдите к файлу `index.xhtml` (нажмите CTRL+TAB) и скопируйте содержимое, которое обычно появляется в сером квадрате, выведенном на визуализируемой странице. Затем обратно переключитесь на файл `greeting.xhtml` и вставьте его в файл клиента шаблона. (Изменения *выделены полужирным шрифтом*.)
[source,xml]
----
@@ -781,7 +900,9 @@
</h:form>*
</ui:define>
----
-8. Объявите библиотеку тегов HTML JSF для файла. Установите курсор на один из тегов, помеченных флагом ошибки (любой тег с префиксом "`h`"), и нажмите сочетание клавиш CTRL+ПРОБЕЛ. Затем выберите тег из списка предложений автозавершения кодов. Пространство имен библиотеки тегов добавляется к тегу `<html>` файла (выделено ниже *полужирным шрифтом*), и указания на ошибки исчезают.
+
+[start=8]
+. Объявите библиотеку тегов HTML JSF для файла. Установите курсор на один из тегов, помеченных флагом ошибки (любой тег с префиксом "`h`"), и нажмите сочетание клавиш CTRL+ПРОБЕЛ. Затем выберите тег из списка предложений автозавершения кодов. Пространство имен библиотеки тегов добавляется к тегу `<html>` файла (выделено ниже *полужирным шрифтом*), и указания на ошибки исчезают.
[source,java]
----
@@ -833,11 +954,16 @@
</html>
----
Обратите внимание на то, что файл идентичен файлу `greeting.xhtml`, за исключением содержимого, указанного в тегах `<ui:define>` для `title` и `box`.
-2. В дескрипторе развертывания `web.xml` проекта измените запись файла приветствия таким образом, чтобы при запуске приложения открывалась страница, представленная файлом `greeting.xhtml`.
+
+[start=2]
+. В дескрипторе развертывания `web.xml` проекта измените запись файла приветствия таким образом, чтобы при запуске приложения открывалась страница, представленная файлом `greeting.xhtml`.
В окне 'Проекты' дважды щелкните 'Файлы конфигурации' > `web.xml`, чтобы открыть его в редакторе. На вкладке "Страницы" измените поле "Файлы приветствия" на `faces/greeting.xhtml`.
+
image::images/welcome-files.png[title="Измените запись 'Файлы приветствия' в дескрипторе развертывания"]
-3. Выполните проект и посмотрите, как он выглядит в браузере. Нажмите F6 (fn-F6 в Mac) или нажмите кнопку 'Запустить проект'( image::images/run-project-btn.png[] ) на главной панели инструментов. Проект будет развернут на сервере GlassFish и открыт в браузере.
+
+[start=3]
+. Выполните проект и посмотрите, как он выглядит в браузере. Нажмите F6 (fn-F6 в Mac) или нажмите кнопку 'Запустить проект'( image:images/run-project-btn.png[] ) на главной панели инструментов. Проект будет развернут на сервере GlassFish и открыт в браузере.
При использовании шаблона Facelets и файлов клиента шаблона поведение приложения не меняется. Выделив повторяющийся код на страницах приветствия и ответа приложения, можно уменьшить размер приложения и устранить возможность написания повторяющегося кода, если впоследствии будут добавляться другие страницы. Это позволяет сделать разработку более эффективной и упростить управление при работе с большими проектами.
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_zh_CN.asciidoc
index 2ba78ed..8f40c88 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-intro_zh_CN.asciidoc
@@ -80,33 +80,51 @@
使用 IDE 还可以创建具有 JSF 2.x 支持的新项目。有关详细信息，请参见link:jsf20-support.html#creatingSupport[+创建具有 JSF 2.x 支持的新项目+]。
-1. 单击 IDE 主工具栏中的 "Open Project"（打开项目）(image::images/open-project-btn.png[]) 按钮，或者按 Ctrl-Shift-O（在 Mac 上按 ⌘-Shift-O）。
+1. 单击 IDE 主工具栏中的 "Open Project"（打开项目）(image:images/open-project-btn.png[]) 按钮，或者按 Ctrl-Shift-O（在 Mac 上按 ⌘-Shift-O）。
2. 在 "Open Project"（打开项目）对话框中，导航到计算机上存储已解压缩教程项目的位置。选择该项目，然后单击 "Open Project"（打开项目）以在 IDE 中打开。
*注：*如果在安装 IDE 时未安装 JUnit 插件，当打开 NetBeans 项目时，系统可能会提示您解析到 JUnit 库的引用。
-3. 运行该项目以查看其在浏览器中的外观。在 "Projects"（项目）窗口中右键单击 `jsfDemo` 项目节点并选择 "Run"（运行），或单击主工具栏中的 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮。该项目将打包并部署到 GlassFish Server，并且您的浏览器随即打开以显示欢迎页 (`index.xhtml`)。
+
+[start=3]
+. 运行该项目以查看其在浏览器中的外观。在 "Projects"（项目）窗口中右键单击 `jsfDemo` 项目节点并选择 "Run"（运行），或单击主工具栏中的 "Run Project"（运行项目）(image:images/run-project-btn.png[]) 按钮。该项目将打包并部署到 GlassFish Server，并且您的浏览器随即打开以显示欢迎页 (`index.xhtml`)。
+
image::images/run-project.png[title="运行项目以在浏览器中查看它"]
-4. 单击 "Submit" 按钮。响应页 (`response.xhtml`) 显示如下：
+
+[start=4]
+. 单击 "Submit" 按钮。响应页 (`response.xhtml`) 显示如下：
+
image::images/response.png[title="欢迎页和响应页当前为静态页"]
目前欢迎页和响应页为静态页面，另外还有 `stylesheet.css` 文件和 `duke.png` 图像，这些都是通过浏览器访问的仅有的应用程序文件。
-5. 在 "Projects"（项目）窗口（Ctrl-1 组合键；在 Mac 上为 ⌘-1 组合键）中，右键单击项目节点，然后选择 "Properties"（属性）打开 "Project Properties"（项目属性）窗口。
-6. 选择 "Frameworks"（框架）类别，然后单击 "Add"（添加）按钮。
-7. 在 "Add a Framework"（添加框架）对话框中选择 "JavaServer Faces"。单击 "OK"（确定）。
+
+[start=5]
+. 在 "Projects"（项目）窗口（Ctrl-1 组合键；在 Mac 上为 ⌘-1 组合键）中，右键单击项目节点，然后选择 "Properties"（属性）打开 "Project Properties"（项目属性）窗口。
+
+[start=6]
+. 选择 "Frameworks"（框架）类别，然后单击 "Add"（添加）按钮。
+
+[start=7]
+. 在 "Add a Framework"（添加框架）对话框中选择 "JavaServer Faces"。单击 "OK"（确定）。
+
image::images/add-framework.png[title="将 JSF 支持添加到现有项目"]
在选择了 JavaServer Faces 之后，各种配置选项就变为可用选项了。在 "Libraries"（库）标签下面，可以指定项目访问 JSF 2.x 库的方式。提供的 JSF 版本将取决于 IDE 和 GlassFish Server 的版本。默认选项是使用服务器 (GlassFish Server) 附带的库。但是，IDE 还捆绑了 JSF 2.x 库。（如果希望您的项目使用这些库，可以选择 "Registered Libraries"（已注册的库）选项。）
image::images/libraries-tab.png[title="指定对 JSF 2.x 库的访问权限"]
-8. 单击 "Configuration"（配置）标签。可以指定 Faces Servlet 在项目的部署描述符中注册的方式。还可以指定是否需要在项目中使用 Facelets 或 JSP 页。
+
+[start=8]
+. 单击 "Configuration"（配置）标签。可以指定 Faces Servlet 在项目的部署描述符中注册的方式。还可以指定是否需要在项目中使用 Facelets 或 JSP 页。
+
image::images/jsf-configuration.png[title="指定 Faces servlet 选项和首选语言"]
您还可以轻松配置项目，以使用 "Components"（组件）标签中的各个 JSF 组件套件。要使用组件套件，您需要下载所需的库并使用 Ant 库管理器创建具有组件套件库的新库。
image::images/jsf-components.png[title="指定 Faces servlet 选项和首选语言"]
-9. 单击 "OK"（确定）以完成更改并退出 "Project Properties"（项目属性）窗口。
+
+[start=9]
+. 单击 "OK"（确定）以完成更改并退出 "Project Properties"（项目属性）窗口。
在将 JSF 支持添加到项目中后，该项目的 `web.xml` 部署描述符修改为如下内容。（更改内容以*粗体*显示。）
@@ -166,8 +184,11 @@
* *Package（包）：*guessNumber
* *Name（名称）：*UserNumberBean
* *Scope（范围）：*Session（会话）
+
image::images/managed-bean.png[title="使用 JSF 受管 Bean 向导创建新的受管 Bean"]
-3. 单击 "Finish"（完成）。将会生成 `UserNumberBean` 类并在编辑器中将其打开。注意以下标注（*粗体*显示）：
+
+[start=3]
+. 单击 "Finish"（完成）。将会生成 `UserNumberBean` 类并在编辑器中将其打开。注意以下标注（*粗体*显示）：
[source,java]
----
@@ -223,8 +244,13 @@
以上代码将生成一个 0 到 10 之间的随机数字，并将其输出到服务器日志中。
-2. 修复导入。为此，请单击显示在编辑器左旁注中的提示标记 (image::images/hint-icon.png[])，然后选择相应选项将 `java.util.Random` 导入到类。
-3. 再次运行项目（单击 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮，或者按 F6；在 Mac 上按 fn-F6）。当运行项目时，服务器的日志文件将自动在 "Output"（输出）窗口中打开。
+
+[start=2]
+. 修复导入。为此，请单击显示在编辑器左旁注中的提示标记 (image:images/hint-icon.png[])，然后选择相应选项将 `java.util.Random` 导入到类。
+
+[start=3]
+. 再次运行项目（单击 "Run Project"（运行项目）(image:images/run-project-btn.png[]) 按钮，或者按 F6；在 Mac 上按 fn-F6）。当运行项目时，服务器的日志文件将自动在 "Output"（输出）窗口中打开。
+
image::images/output1.png[title="服务器的日志文件自动在 "Output"（输出）窗口中打开"]
请注意，输出中并未列出 "`Duke's number:`"（从构造函数中也表明了这一点）。因为默认情况下 JSF 使用_延迟实例化_，所以未创建 `UserNumberBean` 对象。也就是说，只有当应用程序需要时才会创建和初始化特定范围中的 Bean。
@@ -232,7 +258,9 @@
link:http://javaserverfaces.java.net/nonav/docs/2.1/managed-bean-javadocs/index.html[+`@ManagedBean` 标注的 Javadoc+] 中描述了以下内容：
_如果 `eager()` 属性的值为 `true`，且 `managed-bean-scope` 的值为 "application"，则当应用程序启动时，运行时必须对该类执行实例化操作。必须在提供任何请求服务之前，对实例执行实例化和存储操作。如果 _eager_ 未指定或为 `false`，或者 `managed-bean-scope` 不是 "application"，则会发生受管 Bean 的默认“延迟”实例化和作用域存储。_
-4. 因为 `UserNumberBean` 属于会话范围，所以它将实现 `Serializable` 接口。
+
+[start=4]
+. 因为 `UserNumberBean` 属于会话范围，所以它将实现 `Serializable` 接口。
[source,java]
----
@@ -241,7 +269,7 @@
@SessionScoped
public class UserNumberBean *implements Serializable* {
----
-使用提示标记 (image::images/hint-icon.png[]) 将 `java.io.Serializable` 导入到类。
+使用提示标记 (image:images/hint-icon.png[]) 将 `java.io.Serializable` 导入到类。
[[addingProperties]]
@@ -261,14 +289,22 @@
Integer randomInt;
*Integer userNumber;*
----
-2. 在编辑器中单击鼠标右键，然后选择 "Insert Code"（插入代码）（Alt-Insert 组合键；在 Mac 上为 Ctrl-I 组合键）。选择 "Getter and Setter"（Getter 和 Setter）。
+
+[start=2]
+. 在编辑器中单击鼠标右键，然后选择 "Insert Code"（插入代码）（Alt-Insert 组合键；在 Mac 上为 Ctrl-I 组合键）。选择 "Getter and Setter"（Getter 和 Setter）。
+
image::images/getter-setter.png[title="使用 IDE 生成属性的存取方法"]
-3. 选择 `userNumber` : `Integer` 选项。单击 "Generate"（生成）。
+
+[start=3]
+. 选择 `userNumber` : `Integer` 选项。单击 "Generate"（生成）。
+
image::images/generate-getters-setters.png[title="使用 IDE 生成属性的存取方法"]
请注意，`getUserNumber()` 和 `setUserNumber(Integer userNumber)` 方法已添加到类中。
-4. 创建一个 `response` 属性。声明一个名为 `response` 的 `String`。
+
+[start=4]
+. 创建一个 `response` 属性。声明一个名为 `response` 的 `String`。
[source,java]
----
@@ -281,7 +317,9 @@
Integer userNumber;
*String response;*
----
-5. 为 `response` 创建一个 getter 方法。（本应用程序不需要 setter。）可以使用以上步骤 2 中显示的 IDE 的 "Generate Code"（生成代码）弹出式窗口来生成模板代码。但是就本教程而言，只需将以下方法粘贴到类中即可。
+
+[start=5]
+. 为 `response` 创建一个 getter 方法。（本应用程序不需要 setter。）可以使用以上步骤 2 中显示的 IDE 的 "Generate Code"（生成代码）弹出式窗口来生成模板代码。但是就本教程而言，只需将以下方法粘贴到类中即可。
[source,html]
----
@@ -305,7 +343,9 @@
上面的方法执行了两个功能：
1. 测试用户输入的数字 (`userNumber`) 是否等于为会话生成的随机数字 (`randomInt`)，并相应地返回一个 `String` 响应。
2. 如果用户猜对了数字（即，如果 `userNumber` 等于 `randomInt`），则将使用户会话失效。这是必需的，以便当用户希望再玩一次时会生成一个新的数字。
-6. 在编辑器中单击鼠标右键，然后选择 "Fix Imports"（修复导入）（Alt-Shift-I 组合键；在 Mac 上为 ⌘-Shift-I 组合键）。将为以下内容自动创建导入声明：
+
+[start=6]
+. 在编辑器中单击鼠标右键，然后选择 "Fix Imports"（修复导入）（Alt-Shift-I 组合键；在 Mac 上为 ⌘-Shift-I 组合键）。将为以下内容自动创建导入声明：
* `javax.servlet.http.HttpSession`
* `javax.faces.context.FacesContext`
@@ -313,7 +353,8 @@
image::images/documentation-support.png[title="按 Ctrl-空格键调用代码完成和文档支持"]
-单击 "documentation"（文档）窗口中的 "web browser"（Web 浏览器）(image::images/web-browser-icon.png[]) 图标以在外部 Web 浏览器中打开 Javadoc。
+
+单击 "documentation"（文档）窗口中的 "web browser"（Web 浏览器）(image:images/web-browser-icon.png[]) 图标以在外部 Web 浏览器中打开 Javadoc。
@@ -340,14 +381,19 @@
1. 在编辑器中打开 `index.xhtml` 页。双击 "Projects"（项目）窗口中的 `index.xhtml` 节点，或者按 Alt-Shift-O 组合键以使用 "Go to File"（转至文件）对话框。
索引页和响应页都已包含了本练习所需的 JSF UI 组件。只需取消其注释，并注释掉当前正在使用的 HTML 元素。
-2. 注释掉 HTML 窗体元素。为此，请按照下图所示突出显示 HTML 窗体元素，然后按 Ctrl-/ 组合键（在 Mac 上为 ⌘-/ 组合键）。
+
+[start=2]
+. 注释掉 HTML 窗体元素。为此，请按照下图所示突出显示 HTML 窗体元素，然后按 Ctrl-/ 组合键（在 Mac 上为 ⌘-/ 组合键）。
*注：*要突出显示该表单元素，可以单击该元素，然后用鼠标在编辑器中拖动；也可以使用键盘，按住 Shift 键并按方向键。
+
image::images/comment-out.png[title="突出显示代码，然后按 Ctrl-/ 以注释掉代码"]
在编辑器中使用 Ctrl-/ 组合键（在 Mac 上为 ⌘-/ 组合键）启用/禁用注释。还可以将此快捷键应用于其他文件类型，如 Java 和 CSS。
-3. 取消 JSF HTML 窗体组件的注释。如下图所示突出显示组件，然后按 Ctrl-/ 组合键（在 Mac 上为 ⌘-/ 组合键）。
+
+[start=3]
+. 取消 JSF HTML 窗体组件的注释。如下图所示突出显示组件，然后按 Ctrl-/ 组合键（在 Mac 上为 ⌘-/ 组合键）。
*注：*您可能需要按两次 Ctrl-/ 来取消注释代码。
@@ -357,7 +403,9 @@
取消 JSF HTML 窗体组件的注释之后，编辑器指示 `<h:form>`、`<h:inputText>` 和 `<h:commandButton>` 标记未进行声明。
image::images/undeclared-component.png[title="编辑器针对未声明的组件提供错误消息"]
-4. 要声明这些组件，请使用 IDE 的代码完成将标记库名称空间添加到页面的 `<html>` 标记中。将光标放置在任何未声明的标记上方，然后按 Alt-Enter 组合键并单击 Enter 以添加建议的标记库。（如果有多个选项，请确保按 Enter 键之前选择了在编辑器中显示的标记。）JSF HTML 标记库名称空间将添加到 `<html>` 标记中（如以下*粗体*所示），并且错误指示符将消失。
+
+[start=4]
+. 要声明这些组件，请使用 IDE 的代码完成将标记库名称空间添加到页面的 `<html>` 标记中。将光标放置在任何未声明的标记上方，然后按 Alt-Enter 组合键并单击 Enter 以添加建议的标记库。（如果有多个选项，请确保按 Enter 键之前选择了在编辑器中显示的标记。）JSF HTML 标记库名称空间将添加到 `<html>` 标记中（如以下*粗体*所示），并且错误指示符将消失。
*注：*如果 IDE 未提供用于添加标记库的选项，则您需要手动修改 ``<html>`` 元素。
@@ -368,7 +416,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"
*xmlns:h="http://xmlns.jcp.org/jsf/html"*>
----
-5. 使用 JSF 表达式语言将 `UserNumberBean` 的 `userNumber` 属性绑定到 `inputText` 组件。`value` 属性可用于指定所呈现组件的当前值。键入以下*粗体*显示的代码。
+
+[start=5]
+. 使用 JSF 表达式语言将 `UserNumberBean` 的 `userNumber` 属性绑定到 `inputText` 组件。`value` 属性可用于指定所呈现组件的当前值。键入以下*粗体*显示的代码。
[source,java]
----
@@ -379,7 +429,9 @@
JSF 表达式语言使用 `#{}` 语法。在这些分隔符内，会指定用点 (`.`) 分隔的受管 Bean 的名称和需要应用的 Bean 属性。现在，将窗体数据发送至服务器时，会使用属性的 setter (`setUserNumber()`) 将该值自动保存到 `userNumber` 属性中。此外，当请求页面且已设置 `userNumber` 的值时，该值将自动显示在呈现的 `inputText` 组件中。有关更多信息，请参见 link:http://docs.oracle.com/javaee/7/tutorial/doc/jsf-develop001.htm#BNAQP[+Java EE 7 教程的第 12.1.2 节：使用 EL 引用受管 Bean+]。
-6. 为单击窗体按钮时调用的请求指定目标。在 HTML 窗体版本中，可以使用 `<form>` 标记的 `action` 属性来完成此操作。在 JSF 中，可以使用 `commandButton` 的 `action` 属性。此外，由于 JSF 2.x 的隐式导航功能，您只需指定目标文件的名称，而无需文件扩展名。
+
+[start=6]
+. 为单击窗体按钮时调用的请求指定目标。在 HTML 窗体版本中，可以使用 `<form>` 标记的 `action` 属性来完成此操作。在 JSF 中，可以使用 `commandButton` 的 `action` 属性。此外，由于 JSF 2.x 的隐式导航功能，您只需指定目标文件的名称，而无需文件扩展名。
键入以下*粗体*显示的代码。
@@ -413,31 +465,48 @@
以下步骤 7 至 12 为可选操作。如果希望快速构建项目，请跳至 <<response,`response.xhtml`>>。
-7. 测试当处理请求时上述 EL 表达式是否实际调用了 `setUserNumber()` 方法。要执行此操作，请使用 IDE 的 Java 调试器。
+
+[start=7]
+. 测试当处理请求时上述 EL 表达式是否实际调用了 `setUserNumber()` 方法。要执行此操作，请使用 IDE 的 Java 调试器。
切换到 `UserNumberBean` 类（按 Ctrl-Tab 组合键，然后从列表中选择文件。）在 `setUserNumber()` 方法签名上设置一个断点。可以通过单击左旁注来完成此操作。将显示一个红色的标记，表示已设置方法断点。
image::images/set-breakpoint.png[title="在编辑器的左旁注中单击以设置断点"]
-8. 单击 IDE 主工具栏中的 "Debug Project"（调试项目）(image::images/breakpoint-btn.png[]) 按钮。将启动调试会话，并在浏览器中打开项目欢迎页面。
+
+[start=8]
+. 单击 IDE 主工具栏中的 "Debug Project"（调试项目）(image:images/breakpoint-btn.png[]) 按钮。将启动调试会话，并在浏览器中打开项目欢迎页面。
*注：*
* 系统可能会提示您确认用于调试应用程序的服务器端口。
* 如果显示了 "Debug Project"（调试项目）对话框，请选择默认 "Server side Java"（服务器端 Java）选项，然后单击 "Debug"（调试）。
-9. 在浏览器中，将数字输入窗体中，然后单击 "submit" 按钮。
-10. 切换回 IDE 并检查 `UserNumberBean` 类。在 `setUserNumber()` 方法内挂起执行调试器。
+
+[start=9]
+. 在浏览器中，将数字输入窗体中，然后单击 "submit" 按钮。
+
+[start=10]
+. 切换回 IDE 并检查 `UserNumberBean` 类。在 `setUserNumber()` 方法内挂起执行调试器。
+
image::images/debugger-suspended.png[title="调试器根据断点挂起"]
-11. 打开调试器的 "Variables"（变量）窗口（选择 "Window"（窗口）> "Debugging"（调试）> "Variables"（变量），或者按 Ctrl-Shift-1 组合键）。将看到调试器挂起所在点的变量值。
+
+[start=11]
+. 打开调试器的 "Variables"（变量）窗口（选择 "Window"（窗口）> "Debugging"（调试）> "Variables"（变量），或者按 Ctrl-Shift-1 组合键）。将看到调试器挂起所在点的变量值。
+
image::images/variables-window.png[title="使用调试器的 "Variables"（变量）窗口监视变量值"]
在上图中，`setUserNumber()` 签名中 `userNumber` 变量的值为 "`4`"。（窗体中输入了数字 4。）"`this`" 指的是为用户会话创建的 `UserNumberBean` 对象。在其下方，可看到 `userNumber` 属性的值目前为`空值`。
-12. 在调试器工具栏中，单击 "Step Into"（步入）(image::images/step-into-btn.png[]) 按钮。调试器将执行当前挂起的行。"Variables"（变量）窗口将刷新，表示执行产生的更改。
+
+[start=12]
+. 在调试器工具栏中，单击 "Step Into"（步入）(image:images/step-into-btn.png[]) 按钮。调试器将执行当前挂起的行。"Variables"（变量）窗口将刷新，表示执行产生的更改。
+
image::images/variables-window2.png[title=""Variables"（变量）窗口在单步调试代码时刷新"]
`userNumber` 属性现在被设置为窗体中输入的值。
-13. 从主菜单中选择 "Debug"（调试）> "Finish Debugger Session"（结束调试器会话）（Shift-F5 组合键；在 Mac 上为 Shift-Fn-F5 组合键）停止调试器。
+
+[start=13]
+. 从主菜单中选择 "Debug"（调试）> "Finish Debugger Session"（结束调试器会话）（Shift-F5 组合键；在 Mac 上为 Shift-Fn-F5 组合键）停止调试器。
[[response]]
@@ -448,7 +517,9 @@
*注：*要突出显示该表单元素，可以单击该元素，然后用鼠标在编辑器中拖动；也可以使用键盘，按住 Shift 键并按方向键。
-3. 取消 JSF HTML 窗体组件的注释。突出显示 `<h:form>` 起始标记和结束标记及其之间的代码，然后按 Ctrl-/ 组合键（在 Mac 上为 ⌘-/ 组合键）。
+
+[start=3]
+. 取消 JSF HTML 窗体组件的注释。突出显示 `<h:form>` 起始标记和结束标记及其之间的代码，然后按 Ctrl-/ 组合键（在 Mac 上为 ⌘-/ 组合键）。
此时，`<body>` 标记之间的代码如下所示：
@@ -489,7 +560,9 @@
在取消 JSF HTML 窗体组件的注释后，编辑器将指示 `<h:form>` 和 `<h:commandButton>` 标签未进行声明。
-4. 要声明这些组件，请使用 IDE 的代码完成将标记库名称空间添加到页面的 `<html>` 标记中。
+
+[start=4]
+. 要声明这些组件，请使用 IDE 的代码完成将标记库名称空间添加到页面的 `<html>` 标记中。
使用编辑器的代码完成支持将所需的 JSF 名称空间添加到文件中。当通过代码完成选择一个 JSF 或 Facelets 标记时，会自动将所需的名称空间添加到文档的根元素中。有关详细信息，请参见 link:jsf20-support.html#facelets[+NetBeans IDE 中的 JSF 2.x 支持+]。
@@ -506,7 +579,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"
*xmlns:h="http://xmlns.jcp.org/jsf/html"*>
----
-5. 为用户单击窗体按钮时调用的请求指定目标。您希望设置一个按钮以便当用户单击该按钮时，会返回到索引页。要完成此功能，请使用 `commandButton` 的 `action` 属性。键入以*粗体*显示的代码。
+
+[start=5]
+. 为用户单击窗体按钮时调用的请求指定目标。您希望设置一个按钮以便当用户单击该按钮时，会返回到索引页。要完成此功能，请使用 `commandButton` 的 `action` 属性。键入以*粗体*显示的代码。
[source,xml]
----
@@ -520,7 +595,9 @@
*注：*通过键入 `action="index"`，将可依赖 JSF 的隐式导航功能。当用户单击窗体按钮时，JSF 运行时会搜索一个名为 `index` 的文件。JSF 运行时将假定文件扩展名与请求源自的文件 (`response*.xhtml*`) 所使用的扩展名相同，并在与源文件相同的目录（即 Web 根目录）中查找 `index.xhtml` 文件。
-6. 将静态的 "[ response here ]" 文本替换为 `UserNumberBean` 的 `response` 属性值。要执行此操作，请使用 JSF 表达式语言。输入以下内容（*粗体*）。
+
+[start=6]
+. 将静态的 "[ response here ]" 文本替换为 `UserNumberBean` 的 `response` 属性值。要执行此操作，请使用 JSF 表达式语言。输入以下内容（*粗体*）。
[source,html]
----
@@ -529,7 +606,10 @@
<h4>*<h:outputText value="#{UserNumberBean.response}"/>*</h4>
----
-7. 运行项目（单击 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮，或者按 F6；在 Mac 上按 fn-F6）。当浏览器中显示欢迎页面时，输入一个数字，然后单击 `submit`。将看到响应页显示类似于以下的内容（如果您没有猜对数字）。
+
+[start=7]
+. 运行项目（单击 "Run Project"（运行项目）(image:images/run-project-btn.png[]) 按钮，或者按 F6；在 Mac 上按 fn-F6）。当浏览器中显示欢迎页面时，输入一个数字，然后单击 `submit`。将看到响应页显示类似于以下的内容（如果您没有猜对数字）。
+
image::images/response2.png[title="在浏览器中查看项目的当前状态"]
响应页的当前状态中有两处错误：
@@ -539,7 +619,10 @@
以下两个步骤分别更正了这两个问题。
-8. 将 `<h:outputText>` 标记的 `escape` 属性设置为 `false`。将光标置于 `outputText` 和 `value` 之间，插入一个空格，然后按 Ctrl-空格键调用代码完成。向下滚动以选择 `escape` 属性并检查文档。
+
+[start=8]
+. 将 `<h:outputText>` 标记的 `escape` 属性设置为 `false`。将光标置于 `outputText` 和 `value` 之间，插入一个空格，然后按 Ctrl-空格键调用代码完成。向下滚动以选择 `escape` 属性并检查文档。
+
image::images/escape-false.png[title="按 Ctrl-空格键查看可能的属性值和文档"]
如文档所示，默认情况下，`escape` 值被设为 `true`。这意味着任何被正常解析为 html 的字符都包含在此字符串中，如上所示。将该值设置为 `false`，将使任何可解析为 html 的字符都像这样来呈现。
@@ -552,7 +635,9 @@
<h4><h:outputText *escape="false"* value="#{UserNumberBean.response}"/></h4>
----
-9. 将 `<h:form>` 标记的 `prependId` 属性设置为 `false`。将光标置于 `<h:form>` 中 "`m`" 的后面并插入一个空格，然后按 Ctrl-空格键调用代码完成。向下滚动以选择 `prependId` 属性并检查文档。然后按 Enter 键，并键入 `false` 作为值。
+
+[start=9]
+. 将 `<h:form>` 标记的 `prependId` 属性设置为 `false`。将光标置于 `<h:form>` 中 "`m`" 的后面并插入一个空格，然后按 Ctrl-空格键调用代码完成。向下滚动以选择 `prependId` 属性并检查文档。然后按 Enter 键，并键入 `false` 作为值。
[source,java]
----
@@ -575,16 +660,28 @@
窗体元素的 id 为 `j_idt5`，并且此 id 被置于包含在窗体中的 "Back" 按钮的 _ID_ 前面（如以上*粗体*显示）。因为 "Back" 按钮依赖于 `#backButton` 样式规则（在 `stylesheet.css` 中定义），所以在前置 JSF id 时，将禁用该规则。可以通过将 `prependId` 设置为 `false` 来避免这种情况。
-10. 再次运行项目（单击 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮，或者按 F6；在 Mac 上按 fn-F6）。在欢迎页面输入一个数字，然后单击 "Submit"。现在响应页显示了不带 `<p>` 标记的响应消息，并且 "Back" 按钮放在了正确的位置。
+
+[start=10]
+. 再次运行项目（单击 "Run Project"（运行项目）(image:images/run-project-btn.png[]) 按钮，或者按 F6；在 Mac 上按 fn-F6）。在欢迎页面输入一个数字，然后单击 "Submit"。现在响应页显示了不带 `<p>` 标记的响应消息，并且 "Back" 按钮放在了正确的位置。
+
image::images/response3.png[title="在浏览器中查看项目的当前状态"]
-11. 单击 "Back" 按钮。因为 `UserNumberBean` 的 `userNumber` 属性的当前值绑定到了 JSF `inputText` 组件，所以您之前输入的数字现在显示在文本字段中。
-12. 在 IDE 的 "Output"（输出）窗口中检查服务器日志（Ctrl-4 组合键；在 Mac 上为 ⌘-4 组合键），以确定正确的猜测数字是什么。
+
+[start=11]
+. 单击 "Back" 按钮。因为 `UserNumberBean` 的 `userNumber` 属性的当前值绑定到了 JSF `inputText` 组件，所以您之前输入的数字现在显示在文本字段中。
+
+[start=12]
+. 在 IDE 的 "Output"（输出）窗口中检查服务器日志（Ctrl-4 组合键；在 Mac 上为 ⌘-4 组合键），以确定正确的猜测数字是什么。
如果由于某种原因无法看到服务器日志，可以通过切换到 "Services"（服务）窗口（Ctrl-5 组合键；在 Mac 上为 ⌘-5 组合键）并展开 "Servers"（服务器）节点来打开日志。然后右键单击项目部署所在的 GlassFish Server，并选择 "View Server Log"（查看服务器日志）。如果在服务器日志中看不到该数字，请尝试通过右键单击项目节点并选择 "Clean and Build"（清理并构建）来重新构建应用程序。
-13. 键入正确的数字，然后单击 "Submit"。应用程序将您的输入与当前保存的数字进行比较，并显示相应的消息。
+
+[start=13]
+. 键入正确的数字，然后单击 "Submit"。应用程序将您的输入与当前保存的数字进行比较，并显示相应的消息。
+
image::images/yay.png[title="在输入匹配号时显示正确响应"]
-14. 再次单击 "Back" 按钮。请注意，以前输入的数字在文本字段中不再显示。回想一下，当猜对了数字后，`UserNumberBean` 的 `getResponse()` 方法就会<<getResponse,使当前的用户会话失效>>。
+
+[start=14]
+. 再次单击 "Back" 按钮。请注意，以前输入的数字在文本字段中不再显示。回想一下，当猜对了数字后，`UserNumberBean` 的 `getResponse()` 方法就会<<getResponse,使当前的用户会话失效>>。
@@ -611,12 +708,16 @@
1. 创建一个 Facelets 模板文件。按 Ctrl-N 组合键（在 Mac 上为 ⌘-N 组合键）来打开文件向导。选择 "JavaServer Faces" 类别，然后选择 "Facelets Template"（Facelets 模板）。单击 "Next"（下一步）。
2. 键入 `template` 作为文件名。
3. 从八种布局样式中选择任意一种，然后单击 "Finish"（完成）。（您将使用现有的样式表，所以无论您选择的是哪种布局样式都没有关系。）
+
image::images/layout-style.png[title="通过 Facelets 模板向导可从公用布局样式中进行选择"]
+
该向导会基于您的选择生成 `template.xhtml` 文件和附带的样式表，并将这些文件置于项目 Web 根目录内的 `resources` > `css` 文件夹中。
完成向导之后，模板文件在编辑器中打开。要在浏览器中查看模板，请右键单击编辑器并选择 "View"（视图）。
-4. 检查模板文件标记。请注意以下要点：
+
+[start=4]
+. 检查模板文件标记。请注意以下要点：
* 在页面的 `<html>` 标记中声明了 `facelets` 标记库。标记库具有 `ui` 前缀。
[source,java]
@@ -648,8 +749,12 @@
*<ui:insert name="top">Top</ui:insert>*
</div>
----
-5. 重新检查<<staticPage,欢迎>>和<<responsePage,响应>>页面。这两个页面之间唯一更改的内容是包含在灰色方块中的标题和文本。因此，模板可以提供其余所有内容。
-6. 将您的模板文件的全部内容替换为如下内容。
+
+[start=5]
+. 重新检查<<staticPage,欢迎>>和<<responsePage,响应>>页面。这两个页面之间唯一更改的内容是包含在灰色方块中的标题和文本。因此，模板可以提供其余所有内容。
+
+[start=6]
+. 将您的模板文件的全部内容替换为如下内容。
[source,html]
----
@@ -681,7 +786,9 @@
* 项目的 `stylesheet.css` 文件替换了由向导创建的模板样式表引用。
* 除了一个名为 `box` 的标记之外，所有 `<ui:insert>` 标记（及其包含的 `<div>` 标记）都已删除。
* 在页面标题周围放置了 `<ui:insert>` 标记对，并命名为 `title`。
-7. 将 `index.xhtml` 或 `response.xhtml` 文件中的相关代码复制到模板中。将以下*粗体*显示的内容添加到模板文件的 `<h:body>` 标记中。
+
+[start=7]
+. 将 `index.xhtml` 或 `response.xhtml` 文件中的相关代码复制到模板中。将以下*粗体*显示的内容添加到模板文件的 `<h:body>` 标记中。
[source,html]
----
@@ -697,7 +804,9 @@
</div>*
</h:body>
----
-8. 运行项目。当欢迎页面在浏览器中打开时，将 URL 修改为以下内容：
+
+[start=8]
+. 运行项目。当欢迎页面在浏览器中打开时，将 URL 修改为以下内容：
[source,java]
----
@@ -705,6 +814,7 @@
http://localhost:8080/jsfDemo/faces/template.xhtml
----
模板文件将如下所示：
+
image::images/facelets-template.png[title="在浏览器中查看 Facelets 模板"]
此项目现在包含了一个可为所有视图提供外观和结构的模板文件。您现在可以创建调用了模板的客户端文件。
@@ -721,9 +831,14 @@
1. 按 Ctrl-N 组合键（在 Mac 上为 ⌘-N 组合键）以打开新建文件向导。选择 "JavaServer Faces" 类别，然后选择 "Facelets Template Client"（Facelets 模板客户端）。单击 "Next"（下一步）。
2. 键入 `greeting` 作为文件名。
3. 单击 "Template"（模板）字段旁边的 "Browse"（浏览）按钮，然后使用显示的对话框导航到上一部分创建的 `template.xhtml` 文件。
+
image::images/template-client.png[title="Facelets 模板客户端向导"]
-4. 单击 "Finish"（完成）。将生成新的 `greeting.xhtml` 模板客户端文件并显示在编辑器中。
-5. 检查标记。请注意以*粗体*突出显示的内容。
+
+[start=4]
+. 单击 "Finish"（完成）。将生成新的 `greeting.xhtml` 模板客户端文件并显示在编辑器中。
+
+[start=5]
+. 检查标记。请注意以*粗体*突出显示的内容。
[source,xml]
----
@@ -749,7 +864,9 @@
</html>
----
模板客户端文件通过使用 `<ui:composition>` 标记的 `template` 属性来引用模板。因为模板包含了 `title` 和 `box` 的 `<ui:insert>` 标记，所以该模板客户端包含了这两个名称的 `<ui:define>` 标记。您在 `<ui:define>` 标记之间指定的内容就是将插入到模板中相应名称的 `<ui:insert>` 标记之间的内容。
-6. 指定 `greeting` 作为文件的标题。进行以下更改（*粗体*显示）。
+
+[start=6]
+. 指定 `greeting` 作为文件的标题。进行以下更改（*粗体*显示）。
[source,xml]
----
@@ -758,7 +875,9 @@
*Greeting*
</ui:define>
----
-7. 切换到 `index.xhtml` 文件（按 Ctrl-Tab 组合键），然后复制通常会出现在灰色方块（显示在所呈现的页面中）中的内容。然后切换回 `greeting.xhtml`，并将其粘贴到模板客户端文件中。（更改内容以*粗体*显示。）
+
+[start=7]
+. 切换到 `index.xhtml` 文件（按 Ctrl-Tab 组合键），然后复制通常会出现在灰色方块（显示在所呈现的页面中）中的内容。然后切换回 `greeting.xhtml`，并将其粘贴到模板客户端文件中。（更改内容以*粗体*显示。）
[source,xml]
----
@@ -781,7 +900,9 @@
</h:form>*
</ui:define>
----
-8. 为该文件声明 JSF HTML 标记库。将光标置于任意一个被标记为错误的标记（任何使用 "`h`" 前缀的标记）上，然后按 Ctrl-空格组合键。然后从代码完成建议列表中选择标记。标记库名称空间将添加到该文件的 `<html>` 标记中（如以下*粗体*所示），并且错误指示符将消失。
+
+[start=8]
+. 为该文件声明 JSF HTML 标记库。将光标置于任意一个被标记为错误的标记（任何使用 "`h`" 前缀的标记）上，然后按 Ctrl-空格组合键。然后从代码完成建议列表中选择标记。标记库名称空间将添加到该文件的 `<html>` 标记中（如以下*粗体*所示），并且错误指示符将消失。
[source,java]
----
@@ -833,11 +954,16 @@
</html>
----
请注意，该文件除了在 `title` 和 `box` 的 `<ui:define>` 标记之间指定的内容外，与 `greeting.xhtml` 是相同的。
-2. 在此项目的 `web.xml` 部署描述符中，修改欢迎文件条目以使 `greeting.xhtml` 成为在运行此应用程序时所打开的页面。
+
+[start=2]
+. 在此项目的 `web.xml` 部署描述符中，修改欢迎文件条目以使 `greeting.xhtml` 成为在运行此应用程序时所打开的页面。
在 "Projects"（项目）窗口中，双击 "Configuration Files"（配置文件）> `web.xml` 以在编辑器中将其打开。在 "Pages"（页面）标签下面，将 "Welcome Files"（欢迎文件）字段更改为 "`faces/greeting.xhtml`"。
+
image::images/welcome-files.png[title="更改部署描述符中的 "Welcome Files"（欢迎文件）条目"]
-3. 运行该项目以查看其在浏览器中的外观。按 F6（在 Mac 上按 fn-F6），或单击主工具栏中的 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮。该项目将被部署到 GlassFish Server 并在浏览器中打开。
+
+[start=3]
+. 运行该项目以查看其在浏览器中的外观。按 F6（在 Mac 上按 fn-F6），或单击主工具栏中的 "Run Project"（运行项目）(image:images/run-project-btn.png[]) 按钮。该项目将被部署到 GlassFish Server 并在浏览器中打开。
使用了 Facelets 模板和模板客户端文件，该应用程序的行为方式仍与以前一样。通过将应用程序欢迎页和响应页中的重复代码提取出来，可以成功减小应用程序的大小，并避免在以后添加更多页面时可能编写更多的重复代码。在使用大型项目时，这样便可以更有效更轻松地维护开发。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support.asciidoc
index 2f1de37..f631dd9 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support.asciidoc
@@ -35,30 +35,6 @@
The following topics demonstrate the JSF 2.x features that are at your disposal when working in the NetBeans IDE. To try out the new JSF features, link:https://netbeans.org/downloads/index.html[+download the Java bundle of the NetBeans IDE+], which includes Java Web and EE technologies. The download bundle also includes the GlassFish Server Open Source Edition, which is the reference implementation of the Java EE 6 platform specification (JSR 316).
-
-=== Contents
-
-* <<support,JSF 2.x Support for Projects>>
-* <<creatingSupport,Creating a New Project with JSF 2.x Support>>
-* <<addingSupport,Adding JSF 2.x Support to an Existing Project>>
-* <<editor,Utilizing the Editor>>
-* <<facelets,Facelets Editor>>
-* <<xml,Faces XML Configuration Editor>>
-* <<wizard,JSF Wizards>>
-* <<jsfPage,JSF Page Wizard>>
-* <<managedBean,JSF Managed Bean Wizard>>
-* <<facesConfig,Faces Configuration Wizard>>
-* <<composite,Composite Component Wizard>>
-* <<jsfPagesEntity,JSF Pages from Entity Classes Wizard>>
-* <<faceletsTemplate,Facelets Template Wizard>>
-* <<entity,Support for Entity Classes>>
-* <<jsfPages,Creating JSF Pages from Entity Classes>>
-* <<form,Form from Entity Dialog>>
-* <<dataTable,Data Table from Entity Dialog>>
-* <<palette,JSF Palette Components>>
-* <<seealso,See Also>>
-
-
[[support]]
== JSF 2.x Support for Projects
@@ -77,7 +53,7 @@
[[creatingSupport]]
=== Creating a New Project with JSF 2.x Support
-Use the IDE's Project wizard to create a new Java web application. To do so, click the New Project ( image::images/new-project-btn.png[] ) button in the IDE's main toolbar, or press Ctrl-Shift-N (⌘-Shift-N on Mac). When you arrive at Step 4: Frameworks, select JavaServer Faces.
+Use the IDE's Project wizard to create a new Java web application. To do so, click the New Project ( image:images/new-project-btn.png[] ) button in the IDE's main toolbar, or press Ctrl-Shift-N (⌘-Shift-N on Mac). When you arrive at Step 4: Frameworks, select JavaServer Faces.
image::images/new-proj-wizard-framework.png[title="Add JSF Framework support when creating a project"]
@@ -94,6 +70,7 @@
1. In the Projects window (Ctrl-1; ⌘-1 on Mac), right-click your project node and choose Properties. The Project Properties window displays.
2. Select the Frameworks category and then click the Add button.
3. Select JavaServer Faces in the Add a Framework dialog box. Click OK.
+
image::images/add-framework.png[title="Add JSF support to an existing project"]
After selecting JavaServer Faces, various configuration options become available, such as specifying the path to JSF 2.x libraries, and registration of the Faces servlet in the project's deployment descriptor.
@@ -198,7 +175,7 @@
The NetBeans IDE provides numerous wizards that facilitate development with JSF 2.x. You can create new Facelets pages, Facelets templates, JSF managed beans, composite components, Faces configuration files, and more.
-All wizards are accessible via the IDE's generic File wizard. To access the File wizard, press the New File ( image::images/new-file-btn.png[] ) button, or choose File > New File from the main menu (or press Ctrl-N; ⌘-N on Mac). JSF-specific wizards are listed within the JavaServer Faces category.
+All wizards are accessible via the IDE's generic File wizard. To access the File wizard, press the New File ( image:images/new-file-btn.png[] ) button, or choose File > New File from the main menu (or press Ctrl-N; ⌘-N on Mac). JSF-specific wizards are listed within the JavaServer Faces category.
image::images/file-wizard.png[title="JSF-oriented wizards are accessible from the File wizard"]
@@ -331,7 +308,7 @@
To view your template in a browser, right-click in the editor and choose View. A browser window opens to display the template.
-[[faceletsTemplate]]
+[[faceletsTemplateClient]]
=== Facelets Template Client Wizard
Use the Facelets Template Client wizard to generate a page that references a Facelets template in your project. From the JavaServer Faces category in the IDE's <<fileWizard,File wizard>>, select Facelets Template Client. You can specify the location of the Facelets Template that is used by the client. You can specify if the root tag is ``<html>`` or ``<ui:composition>``
@@ -377,7 +354,7 @@
For example, if you are applying the wizard to a `Customer` entity class, the settings shown in the image above will generate the following files:
|===
-|image::images/projects-win-generated-files.png[title="The Projects window displays newly generated files"] |
+|image:images/projects-win-generated-files.png[title="The Projects window displays newly generated files"] |
* A `faces-config.xml` file to register the location of the properties bundle that contains localized messages for the JSF views. For example, specifying `/my/org/Bundle` for Localization Bundle Name in the wizard generates the following entry:
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ca.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ca.asciidoc
index 0a9ad8b..8850d94 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ca.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ca.asciidoc
@@ -36,30 +36,6 @@
Els següents temes demostren les característiques JSF 2.0 que estan a la vostra disposició quant treballeu en l'IDE NetBeans 6.8. Per provar les noves característiques JSF, link:https://netbeans.org/downloads/index.html[+descarregueu el paquet Java de l'IDE NetBeans+], el qual inclou tecnologies Java Web i EE.
-=== Continguts
-
-* <<support,Suport JSF 2.0 per a projectes>>
-* <<creatingSupport,Creant un projecte nou amb suport JSF 2.0>>
-* <<addingSupport,Afegint suport JSF 2.0 per a un projecte existent>>
-* <<editor,Utilitzant l'editor>>
-* <<facelets,Editor de Facelets>>
-* <<xml,Editor de configuració Faces XML>>
-* <<wizard,Assistents JSF>>
-* <<jsfPage,Assistent de pàgina JSF>>
-* <<managedBean,Assistent Bean gestionat per JSF>>
-* <<facesConfig,Assistent de configuració de Faces>>
-* <<composite,Assistent de configuració de composició>>
-* <<jsfPagesEntity,Pàgines JSF des de l'assistent de classes d'entitat>>
-* <<faceletsTemplate,Assistent de plantilla Facelets>>
-* <<entity,Suport per classes d'entitat>>
-* <<jsfPages,Creant pàgines JSF des de classes d'entitat>>
-* <<form,Diàleg de formulari des d'entitat>>
-* <<dataTable,Diàleg de taula des de dades d'entitat>>
-* <<palette,Components de la paleta JSF>>
-* <<seealso,Vegeu també>>
-
-
-
[[support]]
== Suport JSF 2.0 per a projectes
@@ -78,7 +54,7 @@
[[creatingSupport]]
=== Creant un projecte nou amb suport JSF 2.0
-Utilitzeu l'assistent de projecte de l'IDE per a crear una nova aplicació web Java. Per a fer-ho, Cliqueu al botó Nou projecte ( image::images/new-project-btn.png[] ) de la barra d'eines principal de l'IDE, o premeu Ctrl-Maj-N (⌘-Mai-N a Mac). Quant arribeu al Pas 4: Frameworks, seleccioneu JavaServer Faces.
+Utilitzeu l'assistent de projecte de l'IDE per a crear una nova aplicació web Java. Per a fer-ho, Cliqueu al botó Nou projecte ( image:images/new-project-btn.png[] ) de la barra d'eines principal de l'IDE, o premeu Ctrl-Maj-N (⌘-Mai-N a Mac). Quant arribeu al Pas 4: Frameworks, seleccioneu JavaServer Faces.
image::images/new-proj-wizard-framework.png[title="Afegir el suport del Framework JSF quant creeu un projecte"]
@@ -196,7 +172,7 @@
L'IDE NetBeans proporciona nombrosos assistents que faciliten el desenvolupament amb JSF 2.0. Podeu crear noves pàgines Facelets, plantilles Facelets, beans gestionats amb JSF, components compostos, fitxers de configuració Faces, i més.
-Tots els assistents són accessibles mitjançant l'assistent de fitxer genèric de l'IDE. Per accedir a l'assistent de fitxer, pitgeu el botó de Nou fitxer ( image::images/new-file-btn.png[] ), o seleccioneu Fitxer &gt Nou fitxer, des del menú principal (o premeu Ctrl-N; &#8984-N a Mac). Els assistent específics de JSF són llistats dins de la categoria JavaServer Faces.
+Tots els assistents són accessibles mitjançant l'assistent de fitxer genèric de l'IDE. Per accedir a l'assistent de fitxer, pitgeu el botó de Nou fitxer ( image:images/new-file-btn.png[] ), o seleccioneu Fitxer &gt Nou fitxer, des del menú principal (o premeu Ctrl-N; &#8984-N a Mac). Els assistent específics de JSF són llistats dins de la categoria JavaServer Faces.
image::images/file-wizard.png[title="Els assistents orientats a JSF són accessibles des de l'assistent de fitxer"]
@@ -360,7 +336,7 @@
Per exemple, si esteu aplicant l'assistent al fitxer de la classe d'entitat `Customer`, les preferències de la següent imatge generaran els següents fitxers:
|===
-|image::images/projects-win-generated-files.png[title="La finestra de projectes mostra novament els fitxers generats"] |
+|image:images/projects-win-generated-files.png[title="La finestra de projectes mostra novament els fitxers generats"] |
* Un fitxer `faces-config.xml` per registra la localització de les propietats del paquet que contenen el missatges localitzats per a les vistes JSF. Per exemple, especificant `/my/org/Bundle` pels noms dels paquets de localització en l'assistent genera la següent entrada:
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ja.asciidoc
index ea50f4f..59c0447 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ja.asciidoc
@@ -36,29 +36,6 @@
以降の項では、NetBeans IDEでの作業中に自由に利用できるJSF 2.xの機能について説明します。新しいJSFの機能を試すには、Java WebテクノロジとJava EEテクノロジが含まれているlink:https://netbeans.org/downloads/index.html[+NetBeans IDEのJavaバンドル版をダウンロード+]します。このダウンロード・バンドルには、Java EE 6プラットフォーム仕様(JSR 316)のリファレンス実装であるGlassFish Server Open Source Editionも含まれています。
-=== 内容
-
-* <<support,プロジェクトのJSF 2.xサポート>>
-* <<creatingSupport,JSF 2.xサポートを含む新しいプロジェクトの作成>>
-* <<addingSupport,既存のプロジェクトへのJSF 2.xサポートの追加>>
-* <<editor,エディタの使用>>
-* <<facelets,Faceletsエディタ>>
-* <<xml,Faces XML構成エディタ>>
-* <<wizard,JSFのウィザード>>
-* <<jsfPage,JSFページ・ウィザード>>
-* <<managedBean,JSF管理対象Beanウィザード>>
-* <<facesConfig,Faces構成ウィザード>>
-* <<composite,合成コンポーネント・ウィザード>>
-* <<jsfPagesEntity,エンティティからのJSFページ・クラス・ウィザード>>
-* <<faceletsTemplate,Faceletsテンプレート・ウィザード>>
-* <<entity,エンティティ・クラスのサポート>>
-* <<jsfPages,エンティティ・クラスからのJSFページの作成>>
-* <<form,エンティティからのフォーム・ダイアログ>>
-* <<dataTable,エンティティからのデータ表ダイアログ>>
-* <<palette,JSFパレットのコンポーネント>>
-* <<seealso,関連項目>>
-
-
[[support]]
== プロジェクトのJSF 2.xサポート
@@ -77,7 +54,7 @@
[[creatingSupport]]
=== JSF 2.xサポートを含む新しいプロジェクトの作成
-新しいJava Webアプリケーションを作成するには、IDEのプロジェクト・ウィザードを使用します。そのためには、IDEのメイン・ツールバーにある「新規プロジェクト」(image::images/new-project-btn.png[])ボタンをクリックするか、[Ctrl]-[Shift]-[N] (Macの場合は[⌘]-[Shift]-[N])を押します。「ステップ4: フレームワーク」で、「JavaServer Faces」を選択します。
+新しいJava Webアプリケーションを作成するには、IDEのプロジェクト・ウィザードを使用します。そのためには、IDEのメイン・ツールバーにある「新規プロジェクト」(image:images/new-project-btn.png[])ボタンをクリックするか、[Ctrl]-[Shift]-[N] (Macの場合は[⌘]-[Shift]-[N])を押します。「ステップ4: フレームワーク」で、「JavaServer Faces」を選択します。
image::images/new-proj-wizard-framework.png[title="プロジェクト作成時のJSFフレームワーク・サポートの追加"]
@@ -94,6 +71,7 @@
1. 「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])で、プロジェクト・ノードを右クリックし、「プロパティ」を選択します。「プロジェクト・プロパティ」ウィンドウが表示されます。
2. 「フレームワーク」カテゴリを選択し、「追加」ボタンをクリックします。
3. 「フレームワークの追加」ダイアログ・ボックスで、「JavaServer Faces」を選択します。「OK」をクリックします。
+
image::images/add-framework.png[title="既存のプロジェクトへのJSFサポートの追加"]
JavaServer Facesを選択すると、JSF 2.xライブラリへのパスの指定や、プロジェクトのデプロイメント・ディスクリプタでのFacesサーブレットの登録など、様々な構成オプションを使用できるようになります。
@@ -198,7 +176,7 @@
NetBeans IDEには、JSF 2.xを使用した開発に役立つ多数のウィザードが用意されています。新しいFaceletsページ、Faceletsテンプレート、JSF管理対象Bean、合成コンポーネント、Faces構成ファイルなどを作成できます。
-すべてのウィザードは、IDEの一般的なファイル・ウィザードを経由してアクセスできます。ファイル・ウィザードにアクセスするには、「新規ファイル」(image::images/new-file-btn.png[])ボタンを押すか、メイン・メニューから「ファイル」>「新規ファイル」を選択します(または[Ctrl]-[N]、Macの場合は[⌘]-[N]を押します)。JSF固有のウィザードはJavaServer Facesカテゴリに一覧表示されます。
+すべてのウィザードは、IDEの一般的なファイル・ウィザードを経由してアクセスできます。ファイル・ウィザードにアクセスするには、「新規ファイル」(image:images/new-file-btn.png[])ボタンを押すか、メイン・メニューから「ファイル」>「新規ファイル」を選択します(または[Ctrl]-[N]、Macの場合は[⌘]-[N]を押します)。JSF固有のウィザードはJavaServer Facesカテゴリに一覧表示されます。
image::images/file-wizard.png[title="ファイル・ウィザードからJSF指向のウィザードにアクセス可能"]
@@ -331,7 +309,7 @@
ブラウザにテンプレートを表示するには、エディタ内で右クリックし、「表示」を選択します。ブラウザ・ウィンドウが開き、テンプレートが表示されます。
-[[faceletsTemplate]]
+[[faceletsTemplateClient]]
=== Faceletsテンプレート・クライアント・ウィザード
プロジェクトのFaceletsテンプレートを参照するページを生成するには、Faceletsテンプレート・クライアント・ウィザードを使用します。IDEの<<fileWizard,ファイル・ウィザード>>にある「JavaServer Faces」カテゴリから「Faceletsテンプレート・クライアント」を選択します。クライアントで使用するFaceletsテンプレートの場所を指定できます。ルート・タグを ``<html>`` にするか ``<ui:composition>`` にするかを指定できます
@@ -377,7 +355,7 @@
たとえば、ウィザードを`Customer`エンティティ・クラスに適用している場合、前出のイメージに示される設定によって次のファイルが生成されます。
|===
-|image::images/projects-win-generated-files.png[title="新しく生成されたファイルが表示された「プロジェクト」ウィンドウ"] |
+|image:images/projects-win-generated-files.png[title="新しく生成されたファイルが表示された「プロジェクト」ウィンドウ"] |
* プロパティのバンドルの場所を登録するための`faces-config.xml`ファイル。JSFビューのローカライズされたメッセージが格納されています。たとえば、ウィザードで「ローカリゼーション・バンドル名」に`/my/org/Bundle`を指定すると、次のエントリが生成されます。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_pt_BR.asciidoc
index 7bacdbc..c7b975d 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_pt_BR.asciidoc
@@ -57,7 +57,7 @@
[[creatingSupport]]
=== Criando um Novo Projeto com Suporte do JSF 2.x
-Utilize o assistente Projeto do IDE para criar um nova aplicação Java Web. Para isso, clique no botão Novo Projeto ( image::images/new-project-btn.png[] ) da barra de ferramentas principal do IDE ou pressione Ctrl-Shift-N (⌘-Shift-N no Mac). Quando chegar na Etapa 4: Frameworks, selecione JavaServer Faces.
+Utilize o assistente Projeto do IDE para criar um nova aplicação Java Web. Para isso, clique no botão Novo Projeto ( image:images/new-project-btn.png[] ) da barra de ferramentas principal do IDE ou pressione Ctrl-Shift-N (⌘-Shift-N no Mac). Quando chegar na Etapa 4: Frameworks, selecione JavaServer Faces.
image::images/new-proj-wizard-framework.png[title="Adiciona suporte ao Framework JSF ao criar um projeto"]
@@ -74,6 +74,7 @@
1. Na janela Projetos (Ctrl-1; &#8984-1 no Mac), clique com o botão direito do mouse no nó do projeto e selecione Propriedades. A Janela Propriedades do Projeto será exibida
2. Selecione a categoria Frameworks e, em seguida e clique no botão Adicionar.
3. Selecione JavaServer Faces na caixa de diálogo Adicionar um Framework. Clique em OK.
+
image::images/add-framework.png[title="Adicionar suporte JSF a um projeto existente"]
Após selecionar JavaServer Faces, diversas opções de configuração se tornarão disponíveis, como a especificação do caminho para bibliotecas JSF 2.x, e o registro de servlet Faces no descritor de implantação do projeto.
@@ -178,7 +179,7 @@
O NetBeans IDE fornece vários assistentes que facilitam o desenvolvimento com o JSF 2.x. Você pode criar novas páginas de Facelets, modelos de Facelets, beans gerenciados de JSF, componentes do composto, arquivos de configuração do Faces e muito mais.
-Todos os assistentes são acessíveis por meio do assistente de Arquivo genérico do IDE. Para acessar o assistente de Arquivo, pressione o botão Novo Arquivo ( image::images/new-file-btn.png[] ) ou selecione Arquivo > Novo Arquivo no menu principal (ou pressione Ctrl-N; ⌘-N no Mac). Os assistentes específicos do JSF são listados na categoria JavaServer Faces.
+Todos os assistentes são acessíveis por meio do assistente de Arquivo genérico do IDE. Para acessar o assistente de Arquivo, pressione o botão Novo Arquivo ( image:images/new-file-btn.png[] ) ou selecione Arquivo > Novo Arquivo no menu principal (ou pressione Ctrl-N; ⌘-N no Mac). Os assistentes específicos do JSF são listados na categoria JavaServer Faces.
image::images/file-wizard.png[title="Os assistentes orientados pelo JSF são acessíveis a partir do assistente de Arquivo"]
@@ -311,7 +312,7 @@
Para exibir o modelo em um browser, clique com o botão direito do mouse no editor e selecione Exibir. Será aberta uma janela do browser para exibir o modelo.
-[[faceletsTemplate]]
+[[faceletsTemplateClient]]
=== Assistente de Cliente de Modelo de Facelets
Utilize o assistente Cliente de Modelo de Facelets para gerar uma página que referencie um modelo de Facelets no seu projeto. Na categoria JavaServer Faces no <<fileWizard,assistente de Arquivo>> do IDE, selecione Cliente de Modelo de Facelets. Você pode especificar o local do Modelo de Facelets utilizado pelo cliente. Você pode especificar se a tag raiz é ``<html>`` ou ``<ui:composition>``
@@ -357,7 +358,7 @@
Por exemplo, se você estiver aplicando o assistente a uma classe de entidade `Customer` , as definições mostradas na imagem acima irão gerar os seguintes arquivos:
|===
-|image::images/projects-win-generated-files.png[title="A janela Projetos exibe arquivos recém-gerados"] |
+|image:images/projects-win-generated-files.png[title="A janela Projetos exibe arquivos recém-gerados"] |
* Um arquivo `faces-config.xml` para registrar a localização do conjunto de propriedades que contém as mensagens localizadas para as views JSF. Por exemplo, especificar `/my/org/Bundle` para o Nome do Conjunto de Localizações no assistente irá gerar a seguinte entrada:
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ru.asciidoc
index 6fbcf39..8e257c1 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_ru.asciidoc
@@ -57,7 +57,7 @@
[[creatingSupport]]
=== Создание нового проекта с поддержкой JSF 2.x
-Используйте мастер создания проекта в среде IDE для создания нового веб-приложения Java. Для этого нажмите кнопку 'Создать проект' ( image::images/new-project-btn.png[] ) на главной панели инструментов IDE или нажмите Ctrl-Shift-N (⌘-Shift-N в Mac). В 4 действии ("Платформы") выберите категорию "JavaServer Faces".
+Используйте мастер создания проекта в среде IDE для создания нового веб-приложения Java. Для этого нажмите кнопку 'Создать проект' ( image:images/new-project-btn.png[] ) на главной панели инструментов IDE или нажмите Ctrl-Shift-N (⌘-Shift-N в Mac). В 4 действии ("Платформы") выберите категорию "JavaServer Faces".
image::images/new-proj-wizard-framework.png[title="Добавление поддержки платформы при создании проекта"]
@@ -74,6 +74,7 @@
1. В окне 'Проекты' (Ctrl-1; ⌘-1 в Mac) щелкните правой кнопкой мыши узел проекта и выберите 'Свойства'. Открывается окно "Свойства проекта".
2. Выберите категорию 'Платформы', а затем нажмите кнопку 'Добавить'.
3. Выберите 'JavaServer Faces' в диалоговом окне 'Добавление платформы'. Нажмите ОК.
+
image::images/add-framework.png[title="Добавление поддержки JSF к существующему проекту"]
После выбора категории 'JavaServer Faces' становятся доступными различные параметры конфигурации, например указание пути к библиотекам JSF 2.x и регистрация сервлета Faces в дескрипторе развертывания проекта.
@@ -178,7 +179,7 @@
IDE NetBeans включает в себя множество мастеров, упрощающих разработку с использованием JSF2.x. С помощью этих мастеров можно создавать новые страницы Facelets, шаблоны Facelet, управляемые компоненты JSF, составные компоненты, файлы конфигурации Faces и многое другое.
-Все мастеры доступны через общий мастер создания файла в среде IDE. Для доступа к мастеру создания файлов нажмите кнопку 'Создать файл' ( image::images/new-file-btn.png[] ) или выберите 'Файл' > 'Создать файл' в главном меню (или нажмите Ctrl-N; ⌘-N в Mac). Список специфичных для JSF мастеров представлен в категории "JavaServer Faces".
+Все мастеры доступны через общий мастер создания файла в среде IDE. Для доступа к мастеру создания файлов нажмите кнопку 'Создать файл' ( image:images/new-file-btn.png[] ) или выберите 'Файл' > 'Создать файл' в главном меню (или нажмите Ctrl-N; ⌘-N в Mac). Список специфичных для JSF мастеров представлен в категории "JavaServer Faces".
image::images/file-wizard.png[title="Мастер, ориентированные на работу с JSF, доступны из мастера создания файлов"]
@@ -311,7 +312,7 @@
Для просмотра шаблона в браузере, щелкните правой кнопкой мыши в редакторе и выберите 'Просмотр'. Откроется окно браузера с отображением шаблона.
-[[faceletsTemplate]]
+[[faceletsTemplateClient]]
=== Мастер создания шаблонов Facelets
Используйте мастер создания клиентов шаблона Facelets для создания страницы в проекте, ссылающейся на шаблон Facelets. В категории "JavaServer Faces" <<fileWizard,мастера создания файлов>> в среде IDE выберите Facelets Template Client ("Клиент шаблона Facelets"). Можно указать местоположение шаблона Facelets, используемого клиентом. Также можно указать, является ли тегом корня ``<html>`` или ``<ui:composition>``
@@ -357,7 +358,7 @@
Например, при использовании мастера для класса сущностей `Customer` параметры настройки, отображаемые на вышеприведенном изображении, вызывают создание следующих файлов:
|===
-|image::images/projects-win-generated-files.png[title="В окне 'Проекты' отображается новые созданные файлы"] |
+|image:images/projects-win-generated-files.png[title="В окне 'Проекты' отображается новые созданные файлы"] |
* Файл `faces-config.xml` для регистрации местонахождения набора свойств, который содержит локализованные сообщения для представлений JSF. Например, при указании `/my/org/Bundle` в поле "Имя набора локализаций" в мастере создается следующая запись:
diff --git a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_zh_CN.asciidoc
index cd986fe..81cc8f5 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/jsf20-support_zh_CN.asciidoc
@@ -57,7 +57,7 @@
[[creatingSupport]]
=== 创建具有 JSF 2.x 支持的新项目
-使用 IDE 的项目向导，创建一个新的 Java Web 应用程序。为此，请单击 IDE 主工具栏中的 "New Project"（新建项目）(image::images/new-project-btn.png[]) 按钮，或者按 Ctrl-Shift-N（在 Mac 上按 ⌘-Shift-N）。到“步骤 4 ：Frameworks（框架）”时，请选择 "JavaServer Faces"。
+使用 IDE 的项目向导，创建一个新的 Java Web 应用程序。为此，请单击 IDE 主工具栏中的 "New Project"（新建项目）(image:images/new-project-btn.png[]) 按钮，或者按 Ctrl-Shift-N（在 Mac 上按 ⌘-Shift-N）。到“步骤 4 ：Frameworks（框架）”时，请选择 "JavaServer Faces"。
image::images/new-proj-wizard-framework.png[title="创建项目时添加 JSF 框架支持"]
@@ -74,6 +74,7 @@
1. 在 "Projects"（项目）窗口（Ctrl-1 组合键；在 Mac 上为 ⌘-1 组合键）中，右键单击项目节点，然后选择 "Properties"（属性）。将显示 "Project Properties"（项目属性）窗口。
2. 选择 "Frameworks"（框架）类别，然后单击 "Add"（添加）按钮。
3. 在 "Add a Framework"（添加框架）对话框中选择 "JavaServer Faces"。单击 "OK"（确定）。
+
image::images/add-framework.png[title="将 JSF 支持添加到现有项目"]
选择 "JavaServer Faces" 后，将会看到各种配置选项，例如指定 JSF 2.x 库的路径以及 Faces servlet 在项目的部署描述符中的注册。
@@ -178,7 +179,7 @@
NetBeans IDE 提供了各种向导以便于使用 JSF 2.x 进行开发。您可以创建新的 Facelets 页、Facelets 模板、JSF 受管 Bean、复合组件、Faces 配置文件等。
-所有向导都可以通过 IDE 的通用文件向导访问。要访问文件向导，请按 "New File"（新建文件）(image::images/new-file-btn.png[]) 按钮，或从主菜单中选择 "File"（文件）> "New File"（新建文件）（或按 Ctrl-N；在 Mac 上按 ⌘-N）。在 "JavaServer Faces" 类别中列出了特定于 JSF 的向导。
+所有向导都可以通过 IDE 的通用文件向导访问。要访问文件向导，请按 "New File"（新建文件）(image:images/new-file-btn.png[]) 按钮，或从主菜单中选择 "File"（文件）> "New File"（新建文件）（或按 Ctrl-N；在 Mac 上按 ⌘-N）。在 "JavaServer Faces" 类别中列出了特定于 JSF 的向导。
image::images/file-wizard.png[title="可从文件向导访问面向 JSF 的向导"]
@@ -311,7 +312,7 @@
要在浏览器中查看模板，请右键单击编辑器，然后选择 "View"（视图）。随即会打开一个浏览器窗口，显示该模板。
-[[faceletsTemplate]]
+[[faceletsTemplateClient]]
=== Facelets 模板客户端向导
使用 Facelets 模板客户端向导可生成页面，以便在项目中引用 Facelets 模板。从 IDE 的<<fileWizard,文件向导>>的 "JavaServer Faces" 类别中，选择 "Facelets Template Client"（Facelets 模板客户端）。可以指定客户端使用的 Facelets 模板的位置。还可以指定根标记是 ``<html>`` 还是 ``<ui:composition>``
@@ -357,7 +358,7 @@
例如，如果将该向导应用于 `Customer` 实体类，则上图中显示的设置将生成以下文件：
|===
-|image::images/projects-win-generated-files.png[title=""Projects"（项目）窗口将显示新生成的文件"] |
+|image:images/projects-win-generated-files.png[title=""Projects"（项目）窗口将显示新生成的文件"] |
* `faces-config.xml` 文件，用于注册包含 JSF 视图的本地化消息的属性包的位置。例如，在向导中指定 `/my/org/Bundle` 作为本地化包名称会生成以下条目：
diff --git a/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp.asciidoc
index a6a255d..fe97ac9 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp.asciidoc
@@ -79,12 +79,12 @@
In order to implement the scenario described above, you develop a simple application for a fictitious organization named IFPWAFCAD, The International Former Professional Wrestlers' Association for Counseling and Development.
-==== index.jsp
+=== index.jsp
image::images/index-page.png[title="index.jsp displayed in a browser"]
-==== response.jsp
+=== response.jsp
image::images/response-page.png[title="response.jsp displayed in a browser"]
@@ -96,23 +96,33 @@
Begin by creating a new Java web project in the IDE:
1. Choose File > New Project (Ctrl-Shift-N; ⌘-Shift-N on Mac) from the main menu. Select the Java Web category, then select Web Application. Click Next.
+
image::images/new-project.png[title="Use the IDE's New Project wizard to create a new project"]
The New Project wizard allows you to create an empty web application in a standard IDE project. The standard project uses an IDE-generated Ant build script to compile, deploy, and run the application.
-2. In Project Name, enter *IFPWAFCAD*. Also, specify the location for the project on your computer. (By default, the IDE places projects in a `NetBeansProjects` folder located in your home directory.) Click Next.
-3. In the Server and Settings panel, specify the GlassFish server as server which will be used to run the application.
+
+[start=2]
+. In Project Name, enter *IFPWAFCAD*. Also, specify the location for the project on your computer. (By default, the IDE places projects in a `NetBeansProjects` folder located in your home directory.) Click Next.
+
+[start=3]
+. In the Server and Settings panel, specify the GlassFish server as server which will be used to run the application.
*Note. *The GlassFish server displays in the Server drop-down field if you installed the Java version of the link:https://netbeans.org/downloads/index.html[+NetBeans IDE+]. Because the GlassFish server is included in the download, it is automatically registered with the IDE. If you want to use a different server for this project, click the Add button located next to the Server drop-down field, and register a different server with the IDE. However, working with servers other than the GlassFish server is beyond the scope of this tutorial.
-4. In the Java EE Version field, select *Java EE 5*.
+
+[start=4]
+. In the Java EE Version field, select *Java EE 5*.
+
image::images/server-settings.png[title="Specify server settings in the New Web Application wizard"]
Java EE 6 and Java EE 7 web projects do not require the use of the `web.xml` deployment descriptor, and the NetBeans project template does not include the `web.xml` file in Java EE 6 and Java EE 7 projects. However, this tutorial demonstrates how to declare a data source in the deployment descriptor, and it does not rely on any features specific to Java EE 6 or Java EE 7, so you can set the project version to Java EE 5.
*Note.* You could equally set the project version to Java EE 6 or Java EE 7 and then create a `web.xml` deployment descriptor. (From the New File wizard, select the Web category, then Standard Deployment Descriptor.)
-5. Click Finish. The IDE creates a project template for the entire application, and opens an empty JSP page (`index.jsp`) in the editor. The `index.jsp` file serves as the welcome page for the application.
+
+[start=5]
+. Click Finish. The IDE creates a project template for the entire application, and opens an empty JSP page (`index.jsp`) in the editor. The `index.jsp` file serves as the welcome page for the application.
[[prepareInterface]]
@@ -133,16 +143,24 @@
1. In the editor, change the text between the `<title>` tags to: `IFPWAFCAD Homepage`.
2. Change the text between the `<h1>` tags to: `Welcome to IFPWAFCAD, the International Former Professional Wrestlers' Association for Counseling and Development!`.
3. Open the IDE's Palette by choosing Window > Palette (Ctrl-Shift-8; ⌘-Shift-8 on Mac) from the main menu. Hover your pointer over the Table icon from the HTML category and note that the default code snippet for the item displays.
+
image::images/palette.png[title="Palette displays code snippet when hovering over an item"]
+
[tips]#You can configure the Palette to your liking - right-click in the Palette and choose Show Big Icons and Hide Item Names to have it display as in the image above.#
-4. Place your cursor at a point just after the `<h1>` tags. (This is where you want to implement the new HTML table.) Then, in the Palette, double-click the Table icon.
-5. In the Insert Table dialog that displays, specify the following values then click OK:
+
+[start=4]
+. Place your cursor at a point just after the `<h1>` tags. (This is where you want to implement the new HTML table.) Then, in the Palette, double-click the Table icon.
+
+[start=5]
+. In the Insert Table dialog that displays, specify the following values then click OK:
* *Rows*: 2
* *Columns*: 1
* *Border Size*: 0
The HTML table code is generated and added to your page.
-6. Add the following content to the table heading and the cell of the first table row (new content shown in *bold*):
+
+[start=6]
+. Add the following content to the table heading and the cell of the first table row (new content shown in *bold*):
[source,xml]
----
@@ -159,9 +177,14 @@
professional wrestler in your area, select a subject below:*</td>
</tr>
----
-7. For the bottom row of the table, insert an HTML form. To do so, place your cursor between the second pair of `<td>` tags, then double-click the HTML form ( image::images/html-form-icon.png[] ) icon in the Palette. In the Insert Form dialog, type in `response.jsp` in the Action text field, then click OK.
+
+[start=7]
+. For the bottom row of the table, insert an HTML form. To do so, place your cursor between the second pair of `<td>` tags, then double-click the HTML form ( image:images/html-form-icon.png[] ) icon in the Palette. In the Insert Form dialog, type in `response.jsp` in the Action text field, then click OK.
+
image::images/insert-form.png[title="Specify form settings in the Insert Form dialog"]
-8. Type in the following content between the `<form>` tags (new content shown in *bold*):
+
+[start=8]
+. Type in the following content between the `<form>` tags (new content shown in *bold*):
[source,xml]
----
@@ -174,13 +197,21 @@
</td>
</tr>
----
-9. Press Enter to add an empty line after the content you just added and then double-click Drop-down List in the Palette to open the Insert Drop-down dialog box.
-10. Type `subject_id` for the Name text field in the Insert Drop-down dialog and click OK. Note that the code snippet for the drop-down list is added to the form.
+
+[start=9]
+. Press Enter to add an empty line after the content you just added and then double-click Drop-down List in the Palette to open the Insert Drop-down dialog box.
+
+[start=10]
+. Type `subject_id` for the Name text field in the Insert Drop-down dialog and click OK. Note that the code snippet for the drop-down list is added to the form.
The number of options for the drop-down is currently not important. Later in the tutorial you will add JSTL tags that dynamically generate options based on the data gathered from the Subject database table.
-11. Add a submit button item ( image::images/submit-button.png[] ) to a point just after the drop-down list you just added. You can either use the Palette to do this, or invoke the editor's code completion as illustrated in the previous step. In the Insert Button dialog, enter `submit` for both the Label and Name text fields, then click OK.
-12. To format your code, right-click in the editor and choose Format (Alt-Shift-F; Ctrl-Shift-F on Mac). Your code is automatically formatted, and should now look similar to the following:
+
+[start=11]
+. Add a submit button item ( image:images/submit-button.png[] ) to a point just after the drop-down list you just added. You can either use the Palette to do this, or invoke the editor's code completion as illustrated in the previous step. In the Insert Button dialog, enter `submit` for both the Label and Name text fields, then click OK.
+
+[start=12]
+. To format your code, right-click in the editor and choose Format (Alt-Shift-F; Ctrl-Shift-F on Mac). Your code is automatically formatted, and should now look similar to the following:
[source,xml]
----
@@ -230,9 +261,14 @@
1. Right-click the IFPWAFCAD project node in the Projects window and choose New > JSP. The New JSP File dialog opens.
2. In the JSP File Name field, enter `response`. Note that Web Pages is currently selected for the Location field, meaning that the file will be created in the project's `web` directory. This is the same location as where the `index.jsp` welcome page resides.
3. Accept any other default settings and click Finish. A template for the new `response.jsp` page is generated and opens in the editor. A new JSP node also displays under Web Pages in the Projects window.
+
image::images/response-jsp-node.png[title="response.jsp node appears in the Projects window"]
-4. In the editor, change the title to: `IFPWAFCAD - {placeholder}`.
-5. Remove the `<h1>Hello World!</h1>` line between the `<body>` tags, then copy and paste the following HTML table into the body of the page:
+
+[start=4]
+. In the editor, change the title to: `IFPWAFCAD - {placeholder}`.
+
+[start=5]
+. Remove the `<h1>Hello World!</h1>` line between the `<body>` tags, then copy and paste the following HTML table into the body of the page:
[source,xml]
----
@@ -277,7 +313,7 @@
Create a simple stylesheet that enhances the display of the web interface. This tutorial assumes that you understand how style rules function, and how they affect corresponding HTML elements found in `index.jsp` and `response.jsp`.
-1. Open the New File wizard by pressing the New File ( image::images/new-file-btn.png[] ) button in the IDE's main toolbar. Select the Web category, then select Cascading Style Sheet and click Next.
+1. Open the New File wizard by pressing the New File ( image:images/new-file-btn.png[] ) button in the IDE's main toolbar. Select the Web category, then select Cascading Style Sheet and click Next.
2. Type `style` for CSS File Name and click Finish. The IDE creates an empty CSS file and places it in the same project location as `index.jsp` and `response.jsp`. Note that a node for `style.css` now displays within the project in the Projects window, and the file opens in the editor.
3. In the editor, add the following content to the `style.css` file:
@@ -327,7 +363,9 @@
text-decoration: underline;
}
----
-4. Link the stylesheet to `index.jsp` and `response.jsp`. In both pages, add the following line between the `<head>` tags:
+
+[start=4]
+. Link the stylesheet to `index.jsp` and `response.jsp`. In both pages, add the following line between the `<head>` tags:
[source,java]
----
@@ -380,22 +418,35 @@
The following steps demonstrate how to declare a connection pool, and a data source that relies on the connection pool. The NetBeans JDBC Resource wizard allows you to perform both actions.
-1. Open the New File wizard by pressing the New File ( image::images/new-file-btn.png[] ) button in the IDE's main toolbar. Select the GlassFish server category, then select JDBC Resource and click Next.
+1. Open the New File wizard by pressing the New File ( image:images/new-file-btn.png[] ) button in the IDE's main toolbar. Select the GlassFish server category, then select JDBC Resource and click Next.
2. In step 2, General Attributes, choose the Create New JDBC Connection Pool option, then in the JNDI Name text field, type in *jdbc/IFPWAFCAD*.
+
image::images/jdbc-resource-wizard.png[title="Specify data source settings in the JDBC Resource wizard"]
+
[tips]#The JDBC data source relies on link:http://www.oracle.com/technetwork/java/jndi/index.html[+JNDI+], the Java Naming and Directory Interface. The JNDI API provides a uniform way for applications to find and access data sources. For more information, see link:http://docs.oracle.com/javase/jndi/tutorial/[+The JNDI Tutorial+].#
-3. Optionally, add a description for the data source. For example, type in: `Accesses the database that provides data for the IFPWAFCAD application`.
-4. Click Next, then click Next again to skip step 3, Additional Properties.
-5. In Step 4, type in *IfpwafcadPool* for JDBC Connection Pool Name. Make sure the Extract from Existing Connection option is selected, and choose `jdbc:mysql://localhost:3306/MyNewDatabase` from the drop-down list. Click Next.
+
+[start=3]
+. Optionally, add a description for the data source. For example, type in: `Accesses the database that provides data for the IFPWAFCAD application`.
+
+[start=4]
+. Click Next, then click Next again to skip step 3, Additional Properties.
+
+[start=5]
+. In Step 4, type in *IfpwafcadPool* for JDBC Connection Pool Name. Make sure the Extract from Existing Connection option is selected, and choose `jdbc:mysql://localhost:3306/MyNewDatabase` from the drop-down list. Click Next.
+
image::images/jdbc-resource-wizard2.png[title="Specify connection pool settings in the JDBC Resource wizard"]
-*Note: *The wizard detects any database connections that have been set up in the IDE. Therefore, you need to have already created a connection to the `MyNewDatabase` database at this point. You can verify what connections have been created by opening the Services window (Ctrl-5; ⌘-5 on Mac) and looking for connection nodes ( image::images/connection-node-icon.png[] ) under the Databases category.
-6. In Step 5, select `javax.sql.ConnectionPoolDataSource` in the Resource Type drop-down list.
+*Note: *The wizard detects any database connections that have been set up in the IDE. Therefore, you need to have already created a connection to the `MyNewDatabase` database at this point. You can verify what connections have been created by opening the Services window (Ctrl-5; ⌘-5 on Mac) and looking for connection nodes ( image:images/connection-node-icon.png[] ) under the Databases category.
+
+[start=6]
+. In Step 5, select `javax.sql.ConnectionPoolDataSource` in the Resource Type drop-down list.
Note that the IDE extracts information from the database connection you specified in the previous step, and sets name-value properties for the new connection pool.
image::images/jdbc-resource-wizard3.png[title="Default values are based on information extracted from the selected database connection"]
-7. Click Finish. The wizard generates a `glassfish-resources.xml` file that contains entries for the data source and connection pool you specified.
+
+[start=7]
+. Click Finish. The wizard generates a `glassfish-resources.xml` file that contains entries for the data source and connection pool you specified.
In the Projects window, you can open the `glassfish-resources.xml` file that was created under the Server Resources node and note that, within the `<resources>` tags, a data source and connection pool have been declared containing the values you previously specified.
@@ -403,6 +454,7 @@
1. In the Projects window, right-click the IFPWAFCAD project node and choose Deploy. The server starts up if not already running, and the project is compiled and deployed to it.
2. Open the Services window (Ctrl-5; ⌘-5 on Mac) and expand the Servers > GlassFish > Resources > JDBC > JDBC Resources and Connection Pools nodes. Note that the new data source and connection pool are now displayed:
+
image::images/services-window-glassfish.png[title="New data source and connection pool displayed in Services window"]
@@ -429,7 +481,9 @@
The new resource is now listed under the Resource References heading.
-6. To verify that the resource is now added to the `web.xml` file, click the Source tab located along the top of the editor. Notice that the following <`resource-ref`> tags are now included.
+
+[start=6]
+. To verify that the resource is now added to the `web.xml` file, click the Source tab located along the top of the editor. Notice that the following <`resource-ref`> tags are now included.
[source,xml]
----
@@ -453,12 +507,23 @@
1. Choose Tools > Servers to open the Servers manager. Select the GlassFish server in the left pane.
2. In the main pane, select the Enable JDBC Driver Deployment option.
+
image::images/servers-window.png[title="JDBC Driver Deployment option enables automatic driver deployment"]
-3. Before you close the Servers manager, make a note of the path indicated in the Domains folder text field. When you connect to the GlassFish server in the IDE, you are actually connecting to an _instance_ of the application server. Each instance runs applications in a unique domain, and the Domain Name field indicates the name of the domain your server is using. As shown in the image above, the driver JAR file should be located within `domain1`, which is the default domain created upon installing the GlassFish server.
-4. Click Close to exit the Servers manager.
-5. On your computer, navigate to the GlassFish server installation directory and drill into the `domains` > `domain1` > `lib` subfolder. Because you should have already deployed the IFPWAFCAD project to the server, you should see the `mysql-connector-java-5.1.6-bin.jar` file. If you do not see the driver JAR file, perform the following step.
-6. Deploy your project to the server. In the IDE's Projects window, choose Deploy from the right-click menu of the project node. You can view progress in the IDE's Output window (Ctrl-4; ⌘-4 on Mac). The output indicates that the MySQL driver is deployed to a location in the GlassFish server.
+
+[start=3]
+. Before you close the Servers manager, make a note of the path indicated in the Domains folder text field. When you connect to the GlassFish server in the IDE, you are actually connecting to an _instance_ of the application server. Each instance runs applications in a unique domain, and the Domain Name field indicates the name of the domain your server is using. As shown in the image above, the driver JAR file should be located within `domain1`, which is the default domain created upon installing the GlassFish server.
+
+[start=4]
+. Click Close to exit the Servers manager.
+
+[start=5]
+. On your computer, navigate to the GlassFish server installation directory and drill into the `domains` > `domain1` > `lib` subfolder. Because you should have already deployed the IFPWAFCAD project to the server, you should see the `mysql-connector-java-5.1.6-bin.jar` file. If you do not see the driver JAR file, perform the following step.
+
+[start=6]
+. Deploy your project to the server. In the IDE's Projects window, choose Deploy from the right-click menu of the project node. You can view progress in the IDE's Output window (Ctrl-4; ⌘-4 on Mac). The output indicates that the MySQL driver is deployed to a location in the GlassFish server.
+
image::images/output-window.png[title="Output window indicates that the MySQL driver has been deployed"]
+
Now, if you return to the `domain1/lib` subfolder on your computer, you can see that the `mysql-connector-java-5.1.6-bin.jar` file has been automatically added.
@@ -502,17 +567,23 @@
In order to dynamically display the contents of the form in `index.jsp`, you need to access all `name`s from the `Subject` database table.
1. Hover your mouse over the DB Report item in the Palette.
+
image::images/db-report.png[title="Type 'db' and press Ctrl-Space to access database-specific JSTL snippets"]
The DB Report item uses the `<sql:query>` tag to create an SQL query, then it uses the `<c:forEach>` tag to loop through the query's `resultset` and output the retrieved data.
-2. Place your cursor above the `<%@page ... %>` declaration (line 7), then double-click the DB Report item in the Palette. In the dialog that displays, enter the following details:
+
+[start=2]
+. Place your cursor above the `<%@page ... %>` declaration (line 7), then double-click the DB Report item in the Palette. In the dialog that displays, enter the following details:
* *Variable Name:* `subjects`
* *Scope:* `page`
* *Data Source:* `jdbc/IFPWAFCAD`
* *Query Statement:* `SELECT subject_id, name FROM Subject`
+
image::images/insert-db-report.png[title="Use the Insert DB Report dialog to specify query-specific details"]
-3. Click OK. The following content is generated in the `index.jsp` file. (New content shown in *bold*.)
+
+[start=3]
+. Click OK. The following content is generated in the `index.jsp` file. (New content shown in *bold*.)
[source,xml]
----
@@ -550,7 +621,9 @@
"http://www.w3.org/TR/html4/loose.dtd">
----
Note that the IDE automatically added `taglib` directives needed for the JSTL tags used in the generated content (`<sql:query>` and `<c:forEach>`). A `taglib` directive declares that the JSP page uses custom (i.e., JSTL) tags, names the tag library that defines them, and specifies their tag prefix.
-4. Run the project to see how it displays in a browser. Right-click the project node in the Projects window and choose Run.
+
+[start=4]
+. Run the project to see how it displays in a browser. Right-click the project node in the Projects window and choose Run.
When you choose Run, the IDE deploys the project to the GlassFish server, the index page is compiled into a servlet, and the welcome page opens in your default browser. The code generated from the DB Report item creates the following table in the welcome page.
@@ -560,8 +633,12 @@
The following steps demonstrate how to integrate the generated code into the HTML drop-down list you created earlier in the tutorial.
-5. Examine the column data in the generated code. Two `<c:forEach>` tags are used; one is nested inside the other. This causes the JSP container (i.e., the GlassFish server) to perform a loop on all table rows, and for each row, it loops through all columns. In this manner, data for the entire table is displayed.
-6. Integrate the `<c:forEach>` tags into the HTML form as follows. The value of each item becomes the `subject_id`, and the output text becomes the `name`, as recorded in the database. (Changes are displayed in *bold*).
+
+[start=5]
+. Examine the column data in the generated code. Two `<c:forEach>` tags are used; one is nested inside the other. This causes the JSP container (i.e., the GlassFish server) to perform a loop on all table rows, and for each row, it loops through all columns. In this manner, data for the entire table is displayed.
+
+[start=6]
+. Integrate the `<c:forEach>` tags into the HTML form as follows. The value of each item becomes the `subject_id`, and the output text becomes the `name`, as recorded in the database. (Changes are displayed in *bold*).
[source,xml]
----
@@ -596,7 +673,9 @@
In either case, the `<c:forEach>` tags loop through all `subject_id` and `name` values from the SQL query, and insert each pair into the HTML `<option>` tags. In this manner, the form's drop-down list is populated with data.
-7. Delete the table that was generated from the DB Report item. (Deletion shown below as *[.line-through]#strike-through text#*.)
+
+[start=7]
+. Delete the table that was generated from the DB Report item. (Deletion shown below as *[.line-through]#strike-through text#*.)
[source,xml]
----
@@ -634,8 +713,12 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
----
-8. Save your changes (Ctrl-S; ⌘-S on Mac).
-9. Refresh the welcome page of the project in your browser.
+
+[start=8]
+. Save your changes (Ctrl-S; ⌘-S on Mac).
+
+[start=9]
+. Refresh the welcome page of the project in your browser.
Note that the drop-down list in the browser now contains subject names that were retrieved from the database.
@@ -652,8 +735,11 @@
* *Scope:* `page`
* *Data Source:* `jdbc/IFPWAFCAD`
* *Query Statement:* `SELECT * FROM Subject, Counselor WHERE Counselor.counselor_id = Subject.counselor_idfk AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>`
+
image::images/insert-db-query2.png[title="Use the Insert DB Query dialog to specify query-specific details"]
-3. Click OK. The following content is generated in the `response.jsp` file. (New content shown in *bold*.)
+
+[start=3]
+. Click OK. The following content is generated in the `response.jsp` file. (New content shown in *bold*.)
[source,xml]
----
@@ -676,7 +762,9 @@
"http://www.w3.org/TR/html4/loose.dtd">
----
Note that the IDE automatically added the `taglib` directive needed for the `<sql:query>` tag. Also, note that you used an `<sql:param>` tag directly within the query. Because this query relies on the `subject_id` value that was submitted from `index.jsp`, you can extract the value using an EL (Expression Language) statement in the form of `${param.subject_id}`, and then pass it to the `<sql:param>` tag so that it can be used in place of the SQL question mark (`?`) during runtime.
-4. Use a `<c:set>` tag to set a variable that corresponds to the first record (i.e., row) of the `resultset` returned from the query. (New content shown in *bold*.)
+
+[start=4]
+. Use a `<c:set>` tag to set a variable that corresponds to the first record (i.e., row) of the `resultset` returned from the query. (New content shown in *bold*.)
[source,xml]
----
@@ -690,7 +778,9 @@
*<c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>*
----
Although the `resultset` returned from the query should only contain a single record, this is a necessary step because the page needs to access values from the record using EL (Expression Language) statements. Recall that in `index.jsp`, you were able to access values from the `resultset` simply by using a `<c:forEach>` tag. However, the `<c:forEach>` tag operates by setting a variable for the rows contained in the query, thus enabling you to extract values by including the row variable in EL statements.
-5. Add the `taglib` directive for the JSTL `core` library to the top of the file, so that the `<c:set>` tag is understood. (New content shown in *bold*.)
+
+[start=5]
+. Add the `taglib` directive for the JSTL `core` library to the top of the file, so that the `<c:set>` tag is understood. (New content shown in *bold*.)
[source,java]
----
@@ -698,7 +788,9 @@
*<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>*
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
----
-6. In the HTML markup, replace all placeholders with EL statements code that display the data held in the `counselorDetails` variable. (Changes below shown in *bold*):
+
+[start=6]
+. In the HTML markup, replace all placeholders with EL statements code that display the data held in the `counselorDetails` variable. (Changes below shown in *bold*):
[source,xml]
----
@@ -743,7 +835,7 @@
You've now completed the application. Try running it again to see how it displays in a browser. Note that because of NetBeans' Compile on Save feature, you do not need to worry about compiling or redeploying the application. When you run a project, you can be sure the deployment contains your latest changes.
-Click the Run Project ( image::images/run-project-btn.png[] ) button in the main toolbar. The `index.jsp` page opens in the IDE's default browser.
+Click the Run Project ( image:images/run-project-btn.png[] ) button in the main toolbar. The `index.jsp` page opens in the IDE's default browser.
When `index.jsp` displays in the browser, select a subject from the drop-down list and click `submit`. You should now be forwarded to the `response.jsp` page, showing details corresponding to your selection.
@@ -771,10 +863,13 @@
Use the IDE's Services window (Ctrl-5; ⌘-5 on Mac) to ensure that the MySQL server is running, and that `MyNewDatabase` is accessible and contains appropriate table data.
* To connect to the MySQL database server, right-click the MySQL Server node and choose Connect.
-* If a connection node ( image::images/db-connection-node.png[] ) for `MyNewDatabase` does not display in the Services window, you can create a connection by right-clicking the MySQL driver node ( image::images/driver-node.png[] ) and choosing Connect Using. Enter the required details in the dialog that displays.
+* If a connection node ( image:images/db-connection-node.png[] ) for `MyNewDatabase` does not display in the Services window, you can create a connection by right-clicking the MySQL driver node ( image:images/driver-node.png[] ) and choosing Connect Using. Enter the required details in the dialog that displays.
+
image::images/new-db-connection-dialog.png[title="Establish a database connection in the IDE using the New Database Connection dialog"]
+
[tips]#The fields provided in the New Database Connection dialog mirror the URL string entered in the Show JDBC URL option. Therefore, if you know the URL (e.g., `jdbc:mysql://localhost:3306/MyNewDatabase`) you can paste it into the Show JDBC URL field, and the remaining dialog fields become automatically populated.#
-* To ensure that the `Subject` and `Counselor` tables exist and that they contain sample data, expand the `MyNewDatabase` connection node ( image::images/db-connection-node.png[] ) and locate the `MyNewDatabase` catalog node ( image::images/db-catalog-node.png[] ). Expand the catalog node to view existing tables. You can view table data by right-clicking a table node and choosing View Data.
+* To ensure that the `Subject` and `Counselor` tables exist and that they contain sample data, expand the `MyNewDatabase` connection node ( image:images/db-connection-node.png[] ) and locate the `MyNewDatabase` catalog node ( image:images/db-catalog-node.png[] ). Expand the catalog node to view existing tables. You can view table data by right-clicking a table node and choosing View Data.
+
image::images/services-window-view-data.png[title="View table data by choosing View Data from the right-click menu of a database table node"]
@@ -822,8 +917,11 @@
3. Enter the username and password if you are prompted. You can view the username and password in the Servers manager.
4. In the tree on the left side of the console, expand the Resources > JDBC > JDBC Connection Pools > `IfpwafcadPool` node. Details for the `IfpwafcadPool` connection pool display in the main window.
5. Click the Ping button. If the connection pool is set up correctly, you will see a '`Ping Succeeded`' message.
+
image::images/ping-succeeded.png[title="Test your connection pool by clicking Ping in the GlassFish server Admin Console"]
-6. If the ping fails, click the Additional Properties tab and ensure that the listed property values are correctly set.
+
+[start=6]
+. If the ping fails, click the Additional Properties tab and ensure that the listed property values are correctly set.
link:/about/contact_form.html?to=3&subject=Feedback:%20Creating%20Web%20App%20MySQL[+Send Us Your Feedback+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_ja.asciidoc
index 9829fc7..47190aa 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_ja.asciidoc
@@ -78,12 +78,12 @@
前述のシナリオを実装するため、IFPWAFCAD (The International Former Professional Wrestlers' Association for Counseling and Development)という架空の企業向けに単純なアプリケーションを開発します。
-==== index.jsp
+=== index.jsp
image::images/index-page.png[title="ブラウザに表示されたindex.jsp"]
-==== response.jsp
+== response.jsp
image::images/response-page.png[title="ブラウザに表示されたresponse.jsp"]
@@ -95,23 +95,33 @@
最初に、IDEで新しいJava Webプロジェクトを作成します。
1. メイン・メニューから「ファイル」>「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択します。「Java Web」カテゴリを選択し、「Webアプリケーション」を選択します。「次」をクリックします。
+
image::images/new-project.png[title="IDEの新規プロジェクト・ウィザードを使用した新規プロジェクトの作成"]
新規プロジェクト・ウィザードを使用すると、標準的なIDEプロジェクト内に空のWebアプリケーションを作成できます。標準的なプロジェクトでは、IDEが生成したAntビルド・スクリプトを使用して、アプリケーションをコンパイル、デプロイおよび実行します。
-2. 「プロジェクト名」に「*IFPWAFCAD*」と入力します。また、コンピュータ上でのプロジェクトの場所を指定します。デフォルトでは、IDEはホーム・ディレクトリの`NetBeansProjects`フォルダにプロジェクトを配置します。「次」をクリックします。
-3. 「サーバーと設定」パネルで、アプリケーションの実行に使用するサーバーとしてGlassFishサーバーを指定します。
+
+[start=2]
+. 「プロジェクト名」に「*IFPWAFCAD*」と入力します。また、コンピュータ上でのプロジェクトの場所を指定します。デフォルトでは、IDEはホーム・ディレクトリの`NetBeansProjects`フォルダにプロジェクトを配置します。「次」をクリックします。
+
+[start=3]
+. 「サーバーと設定」パネルで、アプリケーションの実行に使用するサーバーとしてGlassFishサーバーを指定します。
*注意: *GlassFishサーバーは、Javaバージョンのlink:https://netbeans.org/downloads/index.html[+NetBeans IDE+]がインストールされている場合に、「サーバー」ドロップダウン・フィールドに表示されます。GlassFishサーバーはダウンロードに含まれているため、自動的にIDEに登録されます。このプロジェクトで他のサーバーを使用する場合は、「サーバー」ドロップダウン・フィールドの横にある「追加」ボタンをクリックし、他のサーバーをIDEに登録します。ただし、GlassFishサーバー以外のサーバーの操作については、このチュートリアルでは説明しません。
-4. 「Java EEバージョン」フィールドで「*Java EE 5*」を選択します。
+
+[start=4]
+. 「Java EEバージョン」フィールドで「*Java EE 5*」を選択します。
+
image::images/server-settings.png[title="新規Webアプリケーション・ウィザードでのサーバー設定の指定"]
Java EE 6およびJava EE 7 Webプロジェクトでは`web.xml`デプロイメント・ディスクリプタを使用する必要はなく、Java EE 6およびJava EE 7プロジェクトのNetBeansプロジェクト・テンプレートには`web.xml`ファイルは含まれていません。ただし、このチュートリアルでは、デプロイメント・ディスクリプタでデータ・ソースを宣言する方法について説明し、Java EE 6またはJava EE 7固有の機能に依存しないため、プロジェクトのバージョンをJava EE 5に設定できます。
*注意:*同様に、プロジェクトのバージョンをJava EE 6またはJava EE 7に設定し、`web.xml`デプロイメント・ディスクリプタを作成することもできます。これを行うには、新規ファイル・ウィザードから「Web」カテゴリを選択し、「標準のデプロイメント・ディスクリプタ」を選択します。
-5. 「終了」をクリックします。IDEでアプリケーション全体のプロジェクト・テンプレートが作成され、空のJSPページ(`index.jsp`)がエディタに表示されます。`index.jsp`ファイルはアプリケーションの開始ページとして動作します。
+
+[start=5]
+. 「終了」をクリックします。IDEでアプリケーション全体のプロジェクト・テンプレートが作成され、空のJSPページ(`index.jsp`)がエディタに表示されます。`index.jsp`ファイルはアプリケーションの開始ページとして動作します。
[[prepareInterface]]
@@ -132,16 +142,24 @@
1. エディタで、`<title>`タグ間のテキストを「`IFPWAFCAD Homepage`」に変更します。
2. `<h1>`タグ間のテキストを「`Welcome to IFPWAFCAD, the International Former Professional Wrestlers' Association for Counseling and Development!`」に変更します。
3. メイン・メニューで「ウィンドウ」>「パレット」([Ctrl]-[Shift]-[8]、Macの場合は[⌘]-[Shift]-[8])を選択してIDEのパレットを開きます。ポインタをHTMLカテゴリの「表」アイコン上に置くと、項目のデフォルトのコード・スニペットが表示されます。
+
image::images/palette.png[title="項目の上にポインタを置いてコード・スニペットが表示されたパレット"]
+
[tips]#「パレット」は好みにあわせて構成できます。「パレット」を右クリックして「大きなアイコンを表示」と「項目の名前を非表示」を選択すると、上のイメージのようになります。#
-4. `<h1>`タグのすぐ後ろの場所にカーソルを置きます。ここに、新しいHTML表を実装します。「パレット」で「表」アイコンをダブルクリックします。
-5. 表示される「挿入表」ダイアログで次の値を指定し、「OK」をクリックします。
+
+[start=4]
+. `<h1>`タグのすぐ後ろの場所にカーソルを置きます。ここに、新しいHTML表を実装します。「パレット」で「表」アイコンをダブルクリックします。
+
+[start=5]
+. 表示される「挿入表」ダイアログで次の値を指定し、「OK」をクリックします。
* *行*: 2
* *列*: 1
* *境界線のサイズ*: 0
HTML表コードが生成され、ページに追加されます。
-6. 次の内容を、表の見出しと、表の最初の行のセルに追加します(追加する内容は*太字*で表示)。
+
+[start=6]
+. 次の内容を、表の見出しと、表の最初の行のセルに追加します(追加する内容は*太字*で表示)。
[source,xml]
----
@@ -158,9 +176,14 @@
professional wrestler in your area, select a subject below:*</td>
</tr>
----
-7. 表の最後の行にHTMLフォームを挿入します。そのためには、2番目のペアの`<td>`タグの間にカーソルを置き、パレットの「HTMLフォーム」(image::images/html-form-icon.png[])アイコンをダブルクリックします。「挿入フォーム」ダイアログで、「アクション」テキスト・フィールドに「`response.jsp`」と入力し、「OK」をクリックします。
+
+[start=7]
+. 表の最後の行にHTMLフォームを挿入します。そのためには、2番目のペアの`<td>`タグの間にカーソルを置き、パレットの「HTMLフォーム」(image:images/html-form-icon.png[])アイコンをダブルクリックします。「挿入フォーム」ダイアログで、「アクション」テキスト・フィールドに「`response.jsp`」と入力し、「OK」をクリックします。
+
image::images/insert-form.png[title="「挿入フォーム」ダイアログでのフォーム設定の指定"]
-8. `<form>`タグの間に次の内容を入力します(追加する内容は*太字*で表示)。
+
+[start=8]
+. `<form>`タグの間に次の内容を入力します(追加する内容は*太字*で表示)。
[source,xml]
----
@@ -173,13 +196,21 @@
</td>
</tr>
----
-9. [Enter]を押して、追加したコンテンツの後に空の行を追加し、パレットで「ドロップダウン・リスト」をダブルクリックして、「ドロップダウンの挿入」ダイアログ・ボックスを開きます。
-10. 「ドロップダウンの挿入」ダイアログの「名前」テキスト・フィールドに「`subject_id`」と入力し、「OK」をクリックします。ドロップダウン・リストのコード・スニペットがフォームに追加されます。
+
+[start=9]
+. [Enter]を押して、追加したコンテンツの後に空の行を追加し、パレットで「ドロップダウン・リスト」をダブルクリックして、「ドロップダウンの挿入」ダイアログ・ボックスを開きます。
+
+[start=10]
+. 「ドロップダウンの挿入」ダイアログの「名前」テキスト・フィールドに「`subject_id`」と入力し、「OK」をクリックします。ドロップダウン・リストのコード・スニペットがフォームに追加されます。
ドロップダウン・リストのオプションの数は、ここでは重要ではありません。チュートリアルの後の手順で、Subjectデータベース表から収集したデータに基づいてオプションを動的に生成するJSTLタグを追加します。
-11. 送信ボタン項目(image::images/submit-button.png[])を、先ほど追加したドロップダウン・リストの直後に追加します。これは、パレットを使用するか、前述のステップのようにエディタのコード補完を呼び出すことで操作できます。「挿入ボタン」ダイアログで、「ラベル」テキスト・フィールドと「名前」テキスト・フィールドの両方に「`submit`」と入力し、「OK」をクリックします。
-12. コードをフォーマットするには、エディタ内を右クリックし、「フォーマット」([Alt]-[Shift]-[F]、Macの場合は[Ctrl]-[Shift]-[F])を選択します。コードが自動的にフォーマットされ、次のような外観になります。
+
+[start=11]
+. 送信ボタン項目(image:images/submit-button.png[])を、先ほど追加したドロップダウン・リストの直後に追加します。これは、パレットを使用するか、前述のステップのようにエディタのコード補完を呼び出すことで操作できます。「挿入ボタン」ダイアログで、「ラベル」テキスト・フィールドと「名前」テキスト・フィールドの両方に「`submit`」と入力し、「OK」をクリックします。
+
+[start=12]
+. コードをフォーマットするには、エディタ内を右クリックし、「フォーマット」([Alt]-[Shift]-[F]、Macの場合は[Ctrl]-[Shift]-[F])を選択します。コードが自動的にフォーマットされ、次のような外観になります。
[source,xml]
----
@@ -229,9 +260,14 @@
1. 「プロジェクト」ウィンドウで「IFPWAFCAD」プロジェクト・ノードを右クリックし、「新規」>「JSP」を選択します。新規JSPファイル・ウィザードが開きます。
2. 「JSPファイル名」フィールドに「`response`」と入力します。「場所」フィールドには現在「Webページ」が選択されています。これは、プロジェクトの`web`ディレクトリにファイルが作成されることを意味します。この場所は、開始ページ`index.jsp`がある場所と同じです。
3. その他のデフォルト設定を受け入れ、「終了」をクリックします。新しい`response.jsp`ページのテンプレートが生成され、エディタ内に表示されます。また、新しいJSPノードが「プロジェクト」ウィンドウの「Webページ」の下に表示されます。
+
image::images/response-jsp-node.png[title="「プロジェクト」ウィンドウに表示されたresponse.jspノード"]
-4. エディタで、タイトルを「`IFPWAFCAD - {placeholder}`」に変更します。
-5. `<h1>Hello World!</h1>`行(`<body>`タグの間にあります)を除去し、次のHTML表をコピーしてページの本文に貼り付けます。
+
+[start=4]
+. エディタで、タイトルを「`IFPWAFCAD - {placeholder}`」に変更します。
+
+[start=5]
+. `<h1>Hello World!</h1>`行(`<body>`タグの間にあります)を除去し、次のHTML表をコピーしてページの本文に貼り付けます。
[source,xml]
----
@@ -276,7 +312,7 @@
Webページの見た目を整える単純なスタイル・シートを作成します。このチュートリアルは、スタイル・ルールの機能について、およびスタイル・ルールが`index.jsp`と`response.jsp`内の該当するHTML要素にどのように影響するかについて、実用的な知識がある方を対象としています。
-1. IDEのメイン・ツールバーで「新規ファイル」(image::images/new-file-btn.png[])ボタンを押して、新規ファイル・ウィザードを開きます。「Web」カテゴリを選択し、「Cascading Style Sheet」を選択して「次」をクリックします。
+1. IDEのメイン・ツールバーで「新規ファイル」(image:images/new-file-btn.png[])ボタンを押して、新規ファイル・ウィザードを開きます。「Web」カテゴリを選択し、「Cascading Style Sheet」を選択して「次」をクリックします。
2. 「CSSファイル名」に「`style`」と入力し、「終了」をクリックします。空のCSSファイルが作成され、`index.jsp`および`response.jsp`と同じプロジェクトの場所に配置されます。これで、`style.css`のノードが「プロジェクト」ウィンドウのプロジェクト内に表示されるようになり、ファイルがエディタに表示されます。
3. エディタで、次の内容を`style.css`ファイルに追加します。
@@ -326,7 +362,9 @@
text-decoration: underline;
}
----
-4. スタイル・シートを`index.jsp`と`response.jsp`にリンクします。両方のページで、`<head>`タグの間に次の行を追加します。
+
+[start=4]
+. スタイル・シートを`index.jsp`と`response.jsp`にリンクします。両方のページで、`<head>`タグの間に次の行を追加します。
[source,java]
----
@@ -379,22 +417,35 @@
次の手順は、接続プールと、その接続プールに依存するデータ・ソースを宣言する方法です。NetBeansの新規JDBCリソース・ウィザードを使用すると、両方のアクションを実行できます。
-1. IDEのメイン・ツールバーで「新規ファイル」(image::images/new-file-btn.png[])ボタンを押して、新規ファイル・ウィザードを開きます。「GlassFish」サーバー・カテゴリを選択し、「JDBCリソース」を選択して「次」をクリックします。
+1. IDEのメイン・ツールバーで「新規ファイル」(image:images/new-file-btn.png[])ボタンを押して、新規ファイル・ウィザードを開きます。「GlassFish」サーバー・カテゴリを選択し、「JDBCリソース」を選択して「次」をクリックします。
2. ステップ2の「一般属性」で、「新規のJDBC接続プールを作成」オプションを選択し、「JNDI名」テキスト・フィールドに「*jdbc/IFPWAFCAD*」と入力します。
+
image::images/jdbc-resource-wizard.png[title="JDBCリソース・ウィザードでのデータ・ソース設定の指定"]
+
[tips]#JDBCデータ・ソースは、link:http://www.oracle.com/technetwork/java/jndi/index.html[+JNDI+] (Java Naming and Directory Interface)に依存します。JNDI APIは、アプリケーションでデータ・ソースを検索、利用するための共通の手段を提供します。詳細は、link:http://docs.oracle.com/javase/jndi/tutorial/[+JNDIチュートリアル+]を参照してください。#
-3. (オプション)データ・ソースには説明を追加できます。たとえば、「`IFPWAFCADアプリケーション用のデータを提供するデータベースにアクセスします`」と入力します。
-4. 「次」をクリックし、もう一度「次」をクリックして、ステップ3「追加のプロパティ」をスキップします。
-5. ステップ4で「JDBC接続プール名」に「*IfpwafcadPool*」と入力します。「既存の接続から抽出」オプションが選択されていることを確認し、ドロップダウン・リストから「`jdbc:mysql://localhost:3306/MyNewDatabase`」を選択します。「次」をクリックします。
+
+[start=3]
+. (オプション)データ・ソースには説明を追加できます。たとえば、「`IFPWAFCADアプリケーション用のデータを提供するデータベースにアクセスします`」と入力します。
+
+[start=4]
+. 「次」をクリックし、もう一度「次」をクリックして、ステップ3「追加のプロパティ」をスキップします。
+
+[start=5]
+. ステップ4で「JDBC接続プール名」に「*IfpwafcadPool*」と入力します。「既存の接続から抽出」オプションが選択されていることを確認し、ドロップダウン・リストから「`jdbc:mysql://localhost:3306/MyNewDatabase`」を選択します。「次」をクリックします。
+
image::images/jdbc-resource-wizard2.png[title="JDBCリソース・ウィザードでの接続プール設定の指定"]
-*注意:* IDEで設定されたデータベース接続がある場合は、ウィザードで検出されます。そのため、この時点で`MyNewDatabase`データベースへの接続がすでに作成されている必要はありません。作成済の接続を確認するには、「サービス」ウィンドウを開き([Ctrl]-[5]、Macの場合は[⌘]-[5])、「データベース」カテゴリで接続ノード(image::images/connection-node-icon.png[])を検索します。
-6. 手順5で、「リソースの型」ドロップダウン・リストで「`javax.sql.ConnectionPoolDataSource`」を選択します。
+*注意:* IDEで設定されたデータベース接続がある場合は、ウィザードで検出されます。そのため、この時点で`MyNewDatabase`データベースへの接続がすでに作成されている必要はありません。作成済の接続を確認するには、「サービス」ウィンドウを開き([Ctrl]-[5]、Macの場合は[⌘]-[5])、「データベース」カテゴリで接続ノード(image:images/connection-node-icon.png[])を検索します。
+
+[start=6]
+. 手順5で、「リソースの型」ドロップダウン・リストで「`javax.sql.ConnectionPoolDataSource`」を選択します。
IDEは、前のステップで指定したデータベース接続から情報を抽出し、新規接続プール用の名前と値のプロパティを設定することに注意してください。
image::images/jdbc-resource-wizard3.png[title="選択したデータベース接続から抽出された情報に基づくデフォルト値"]
-7. 「終了」をクリックします。ウィザードによって`glassfish-resources.xml`ファイルが生成され、指定したデータ・ソースと接続プール用のエントリが格納されます。
+
+[start=7]
+. 「終了」をクリックします。ウィザードによって`glassfish-resources.xml`ファイルが生成され、指定したデータ・ソースと接続プール用のエントリが格納されます。
「プロジェクト」ウィンドウで、「サーバー・リソース」ノードに作成した`glassfish-resources.xml`ファイルを開くことができます。`<resources>`タグ内には、前に指定した値を持つデータ・ソースと接続プールが宣言されています。
@@ -402,6 +453,7 @@
1. 「プロジェクト」ウィンドウで「IFPWAFCAD」プロジェクト・ノードを右クリックし、「デプロイ」を選択します。サーバーが起動し(実行されていない場合)、プロジェクトがコンパイルされ、そのサーバーにデプロイされます。
2. 「サービス」ウィンドウを開き([Ctrl]-[5]、Macの場合は[⌘]-[5])、「サーバー」>「GlassFish」>「リソース」>「JDBC」>「JDBCリソース」ノードおよび「接続プール」ノードを展開します。新しいデータ・ソースと接続プールが表示されます。
+
image::images/services-window-glassfish.png[title="「サービス」ウィンドウに表示された新しいデータ・ソースと接続プール"]
@@ -428,7 +480,9 @@
「リソース参照」見出しの下に新しいリソースが表示されます。
-6. リソースが`web.xml`ファイルに追加されたことを確認するには、エディタの最上部にある「ソース」タブをクリックします。次に示す<`resource-ref`> タグが含まれるようになりました。
+
+[start=6]
+. リソースが`web.xml`ファイルに追加されたことを確認するには、エディタの最上部にある「ソース」タブをクリックします。次に示す<`resource-ref`> タグが含まれるようになりました。
[source,xml]
----
@@ -452,12 +506,23 @@
1. 「ツール」>「サーバー」を選択してサーバー・マネージャを開きます。左ペインでGlassFishサーバーを選択します。
2. メイン・ペインで、「JDBCドライバのデプロイメントを有効化」オプションを選択します。
+
image::images/servers-window.png[title="JDBCドライバのデプロイメント・オプションによる、ドライバの自動デプロイメントの有効化"]
-3. サーバー・マネージャを閉じる前に、「ドメイン・フォルダ」テキスト・フィールドに指定されたパスをメモします。IDEでGlassFishサーバーに接続すると、実際はアプリケーション・サーバーの_インスタンス_に接続されます。各インスタンスは一意のドメインでアプリケーションを実行し、「ドメイン名」フィールドはサーバーが使用しているドメインの名前を示します。上のイメージに示されているように、ドライバのJARファイルは`domain1`内に存在します。これは、GlassFishサーバーをインストールしたときに作成されたデフォルトのドメインです。
-4. 「閉じる」をクリックしてサーバー・マネージャを終了します。
-5. コンピュータ上で、GlassFishサーバーのインストール・ディレクトリに移動し、「`domains`」>「`domain1`」>「`lib`」サブフォルダに移動します。IFPWAFCADプロジェクトはすでにサーバーにデプロイされているため、「`mysql-connector-java-5.1.6-bin.jar`」ファイルが存在しているはずです。ドライバのJARファイルがない場合は、次のステップを実行します。
-6. プロジェクトをサーバーにデプロイします。IDEの「プロジェクト」ウィンドウで、プロジェクト・ノードの右クリック・メニューから「デプロイ」を選択します。進捗状況は、IDEの出力ウィンドウ([Ctrl]-[4]、Macの場合は[⌘]-[4])に表示されます。この出力に、GlassFishサーバーの場所にMySQLドライバがデプロイされることが示されます。
+
+[start=3]
+. サーバー・マネージャを閉じる前に、「ドメイン・フォルダ」テキスト・フィールドに指定されたパスをメモします。IDEでGlassFishサーバーに接続すると、実際はアプリケーション・サーバーの_インスタンス_に接続されます。各インスタンスは一意のドメインでアプリケーションを実行し、「ドメイン名」フィールドはサーバーが使用しているドメインの名前を示します。上のイメージに示されているように、ドライバのJARファイルは`domain1`内に存在します。これは、GlassFishサーバーをインストールしたときに作成されたデフォルトのドメインです。
+
+[start=4]
+. 「閉じる」をクリックしてサーバー・マネージャを終了します。
+
+[start=5]
+. コンピュータ上で、GlassFishサーバーのインストール・ディレクトリに移動し、「`domains`」>「`domain1`」>「`lib`」サブフォルダに移動します。IFPWAFCADプロジェクトはすでにサーバーにデプロイされているため、「`mysql-connector-java-5.1.6-bin.jar`」ファイルが存在しているはずです。ドライバのJARファイルがない場合は、次のステップを実行します。
+
+[start=6]
+. プロジェクトをサーバーにデプロイします。IDEの「プロジェクト」ウィンドウで、プロジェクト・ノードの右クリック・メニューから「デプロイ」を選択します。進捗状況は、IDEの出力ウィンドウ([Ctrl]-[4]、Macの場合は[⌘]-[4])に表示されます。この出力に、GlassFishサーバーの場所にMySQLドライバがデプロイされることが示されます。
+
image::images/output-window.png[title="MySQLドライバがデプロイされたことを示す「出力」ウィンドウ"]
+
ここでコンピュータ上の`domain1/lib`サブフォルダに戻ると、`mysql-connector-java-5.1.6-bin.jar`ファイルが自動的に追加されています。
@@ -501,17 +566,23 @@
`index.jsp`内のフォームの内容を動的に表示するには、`Subject`データベース表のすべての`name`にアクセスする必要があります。
1. マウスをパレットの「DBレポート」項目の上に移動します。
+
image::images/db-report.png[title="「db」と入力した後の[Ctrl]-[Space]の押下による、データベース固有のJSTLスニペットへのアクセス"]
「DBレポート」項目は、`<sql:query>`タグを使用してSQL問合せを作成してから、`<c:forEach>`タグを使用して問合せの`resultset`をループし、取得したデータを出力します。
-2. `<%@page ... %>`宣言(行7)のすぐ上の行にカーソルを置き、パレットの「DBレポート」項目をダブルクリックします。表示されたダイアログに、次の詳細を入力します。
+
+[start=2]
+. `<%@page ... %>`宣言(行7)のすぐ上の行にカーソルを置き、パレットの「DBレポート」項目をダブルクリックします。表示されたダイアログに、次の詳細を入力します。
* *変数名:* `subjects`
* *スコープ:* `page`
* *データ・ソース:* `jdbc/IFPWAFCAD`
* *問合せ文:* `SELECT subject_id, name FROM Subject`
+
image::images/insert-db-report.png[title="「DBレポートの挿入」ダイアログを使用した、問合せ固有の詳細の指定"]
-3. 「OK」をクリックします。次の内容が`index.jsp`ファイル内に生成されます。新しい内容は*太字*で表示しています。
+
+[start=3]
+. 「OK」をクリックします。次の内容が`index.jsp`ファイル内に生成されます。新しい内容は*太字*で表示しています。
[source,xml]
----
@@ -549,7 +620,9 @@
"http://www.w3.org/TR/html4/loose.dtd">
----
生成されたコンテンツで使用されるJSTLタグに必要な`taglib`ディレクティブ(`<sql:query>`および`<c:forEach>`)が、IDEによって自動的に追加されました。`taglib`ディレクティブは、JSPページがカスタム(つまり、JSTL)タグを使用することを宣言し、タグを定義するタグ・ライブラリおよびタグの接頭辞を指定します。
-4. プロジェクトを実行し、ブラウザでどのように表示されるかを確認します。「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。
+
+[start=4]
+. プロジェクトを実行し、ブラウザでどのように表示されるかを確認します。「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。
「実行」を選択すると、IDEによってプロジェクトがGlassFishサーバーにデプロイされ、indexページがサーブレットにコンパイルされ、開始ページがデフォルトのブラウザに表示されます。「DBレポート」項目から生成されたコードによって、開始ページ内に次の表が作成されます。
@@ -559,8 +632,12 @@
次の手順では、生成されたコードを、このチュートリアルで以前に作成したHTMLドロップダウン・リストに統合する方法について説明します。
-5. 生成されたコードの列データを確認します。2つの`<c:forEach>`タグが使用されており、1つがもう1つの入れ子になっています。これにより、JSPコンテナ(つまり、GlassFishサーバー)が表のすべての行でループを実行し、行ごとにすべての列をループします。この方法で、表全体のデータが表示されます。
-6. 次のように、`<c:forEach>`タグをHTMLフォームに統合します。データベースに記録されているように、各項目の値は`subject_id`に、出力テキストは`name`になります。変更場所は*太字*で示されています。
+
+[start=5]
+. 生成されたコードの列データを確認します。2つの`<c:forEach>`タグが使用されており、1つがもう1つの入れ子になっています。これにより、JSPコンテナ(つまり、GlassFishサーバー)が表のすべての行でループを実行し、行ごとにすべての列をループします。この方法で、表全体のデータが表示されます。
+
+[start=6]
+. 次のように、`<c:forEach>`タグをHTMLフォームに統合します。データベースに記録されているように、各項目の値は`subject_id`に、出力テキストは`name`になります。変更場所は*太字*で示されています。
[source,xml]
----
@@ -595,7 +672,9 @@
どちらの場合も、`<c:forEach>`タグはSQL問合せからすべての`subject_id`の値と`name`の値をループし、各ペアをHTMLの`<option>`タグに挿入します。この方法で、フォームのドロップダウン・リストがデータと一緒に生成されます。
-7. 「DBレポート」項目から生成された表を削除します。削除場所は*[.line-through]#取消し線#*で示されています。
+
+[start=7]
+. 「DBレポート」項目から生成された表を削除します。削除場所は*[.line-through]#取消し線#*で示されています。
[source,xml]
----
@@ -633,8 +712,12 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
----
-8. 変更を保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
-9. プロジェクトの開始ページをブラウザでリフレッシュします。
+
+[start=8]
+. 変更を保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
+
+[start=9]
+. プロジェクトの開始ページをブラウザでリフレッシュします。
ブラウザのドロップダウン・リストに、データベースから取得されたサブジェクトが追加されています。
@@ -651,8 +734,11 @@
* *スコープ:* `page`
* *データ・ソース:* `jdbc/IFPWAFCAD`
* *問合せ文:* `SELECT * FROM Subject, Counselor WHERE Counselor.counselor_id=Subject.counselor_idfk AND Subject.subject_id=? <sql:param value="${param.subject_id}"/>`
+
image::images/insert-db-query2.png[title="「DB問合せの挿入」ダイアログを使用した、問合せ固有の詳細の指定"]
-3. 「OK」をクリックします。次の内容が`response.jsp`ファイル内に生成されます。新しい内容は*太字*で表示しています。
+
+[start=3]
+. 「OK」をクリックします。次の内容が`response.jsp`ファイル内に生成されます。新しい内容は*太字*で表示しています。
[source,xml]
----
@@ -675,7 +761,9 @@
"http://www.w3.org/TR/html4/loose.dtd">
----
`<sql:query>`タグのために必要な`taglib`ディレクティブが、IDEによって自動的に追加されました。また、問合せ内で`<sql:param>`タグを直接使用しました。この問合せは`index.jsp`から送信される`subject_id`の値に依存しているため、`${param.subject_id}`形式の式言語(EL)文を使用してその値を抽出して`<sql:param>`タグに渡すことができます。実行時にはこの値が、SQL疑問符(`?`)のかわりに使用されます。
-4. `<c:set>`タグを使用して、問合せから返される`resultset`の最初のレコード(つまり、行)に対応する変数を設定します。新しい内容は*太字*で表示しています。
+
+[start=4]
+. `<c:set>`タグを使用して、問合せから返される`resultset`の最初のレコード(つまり、行)に対応する変数を設定します。新しい内容は*太字*で表示しています。
[source,xml]
----
@@ -689,7 +777,9 @@
*<c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>*
----
問合せから返される`resultset`には本来1件のレコードのみが含まれますが、このページは式言語(EL)文を使用してレコードの値にアクセスする必要があるため、このステップが必要になります。`index.jsp`では、`<c:forEach>`タグを使用するのみで`resultset`の値にアクセスできました。ただし、`<c:forEach>`タグは、問合せに含まれる行に変数を設定することで動作します。そのため、EL文に行変数を含めることで値を抽出できます。
-5. JSTL`コア`ライブラリ用の`taglib`ディレクティブをファイルの先頭に追加し、`<c:set>`タグが認識されるようにします。新しい内容は*太字*で表示しています。
+
+[start=5]
+. JSTL`コア`ライブラリ用の`taglib`ディレクティブをファイルの先頭に追加し、`<c:set>`タグが認識されるようにします。新しい内容は*太字*で表示しています。
[source,java]
----
@@ -697,7 +787,9 @@
*<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>*
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
----
-6. HTMLマークアップで、すべてのプレースホルダを、`counselorDetails`変数に保持されているデータを表示するEL文のコードに置き換えます。変更場所は*太字*で示されています。
+
+[start=6]
+. HTMLマークアップで、すべてのプレースホルダを、`counselorDetails`変数に保持されているデータを表示するEL文のコードに置き換えます。変更場所は*太字*で示されています。
[source,xml]
----
@@ -742,7 +834,7 @@
これで、アプリケーションは完成です。アプリケーションをもう一度実行し、ブラウザでどのように表示されるかを確認します。NetBeansには「保存時にコンパイル」機能があるため、アプリケーションのコンパイルや再デプロイに気を遣う必要はありません。プロジェクトを実行すると、確実に最新の変更がデプロイメントに反映されます。
-メイン・ツールバーの「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックします。IDEのデフォルトのブラウザで`index.jsp`ページが開きます。
+メイン・ツールバーの「プロジェクトの実行」(image:images/run-project-btn.png[])ボタンをクリックします。IDEのデフォルトのブラウザで`index.jsp`ページが開きます。
ブラウザに`index.jsp`が表示されたら、ドロップダウン・リストからサブジェクトを選択し、「`submit`」をクリックします。ここで`response.jsp`ページに移動します。ここには選択内容に対応する詳細が表示されます。
@@ -770,10 +862,13 @@
IDEの「サービス」ウィンドウ([Ctrl]-[5]、Macの場合は[⌘]-[5])を使用して、MySQLサーバーが実行されていること、および`MyNewDatabase`がアクセス可能で適切な表データを含んでいることを確認します。
* MySQLデータベース・サーバーに接続するには、「MySQLサーバー」ノードを右クリックし、「接続」を選択します。
-* `MyNewDatabase`の接続ノード(image::images/db-connection-node.png[])が「サービス」ウィンドウに表示されない場合は、MySQLのドライバ・ノード(image::images/driver-node.png[])を右クリックし、「接続」を選択することで接続を作成できます。表示されたダイアログで、必要な詳細情報を入力します。
+* `MyNewDatabase`の接続ノード(image:images/db-connection-node.png[])が「サービス」ウィンドウに表示されない場合は、MySQLのドライバ・ノード(image:images/driver-node.png[])を右クリックし、「接続」を選択することで接続を作成できます。表示されたダイアログで、必要な詳細情報を入力します。
+
image::images/new-db-connection-dialog.png[title="「データベースの新規接続」ダイアログを使用したIDEでのデータベース接続の確立"]
+
[tips]#「データベースの新規接続」ダイアログの各フィールドの値は、「JDBC URLを表示」オプションに入力するURL文字列が反映されます。したがって、URL (たとえば、`jdbc:mysql://localhost:3306/MyNewDatabase`)がわかっていれば、そのURLをコピーして「JDBC URLを表示」フィールドに貼り付けると、ダイアログにある残りのフィールドは自動的に入力されます。#
-* `Subject`表と`Counselor`表が存在し、これらの表にサンプル・データが含まれていることを確認するには、「`MyNewDatabase`」接続ノード(image::images/db-connection-node.png[])を展開し、「`MyNewDatabase`」カタログ・ノード(image::images/db-catalog-node.png[])を見つけます。カタログ・ノードを展開し、既存の表を表示します。表ノードを右クリックして「データを表示」を選択すると、表のデータを確認できます。
+* `Subject`表と`Counselor`表が存在し、これらの表にサンプル・データが含まれていることを確認するには、「`MyNewDatabase`」接続ノード(image:images/db-connection-node.png[])を展開し、「`MyNewDatabase`」カタログ・ノード(image:images/db-catalog-node.png[])を見つけます。カタログ・ノードを展開し、既存の表を表示します。表ノードを右クリックして「データを表示」を選択すると、表のデータを確認できます。
+
image::images/services-window-view-data.png[title="データベース表ノードの右クリック・メニューから「データを表示」を選択することによる表データの表示"]
@@ -821,8 +916,11 @@
3. 要求された場合は、ユーザー名とパスワードを入力します。サーバー・マネージャで、ユーザー名とパスワードを表示できます。
4. コンソールの左側にあるツリーで、「リソース」>「JDBC」>「JDBC接続プール」>「`IfpwafcadPool`」ノードを展開します。「`IfpwafcadPool`」接続プールの詳細がメイン・ウィンドウに表示されます。
5. 「Ping」ボタンをクリックします。接続プールが正しく設定されている場合、「`Pingが成功しました`」というメッセージが表示されます。
+
image::images/ping-succeeded.png[title="GlassFishサーバーの管理コンソールでのPingのクリックによる接続プールのテスト"]
-6. Pingが失敗した場合は、「追加プロパティ」タブをクリックし、一覧表示されているプロパティの値が正しく設定されていることを確認します。
+
+[start=6]
+. Pingが失敗した場合は、「追加プロパティ」タブをクリックし、一覧表示されているプロパティの値が正しく設定されていることを確認します。
link:/about/contact_form.html?to=3&subject=Feedback:%20Creating%20Web%20App%20MySQL[+ご意見をお寄せください+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_pt_BR.asciidoc
index 34554aa..9fc1430 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_pt_BR.asciidoc
@@ -79,12 +79,12 @@
Para implementar o cenário descrito acima, desenvolva uma aplicação simples para uma organização fictícia com o nome IFPWAFCAD, Associação Internacional de Ex-Lutadores Profissionais para Aconselhamento e Desenvolvimento.
-==== index.jsp
+=== index.jsp
image::images/index-page.png[title="index.jsp exibido em um browser"]
-==== response.jsp
+== response.jsp
image::images/response-page.png[title="response.jsp exibido em um browser"]
@@ -96,23 +96,33 @@
Comece criando um novo projeto Java Web no IDE:
1. Escolha Arquivo > Novo Projeto (Ctrl-Shift-N; &#8984-Shift-N no Mac) no menu principal. Selecione a categoria Java Web e aplicação Web. Clique em Próximo.
+
image::images/new-project.png[title="Utilize o assistente de Novo Projeto do IDE para criar um novo projeto"]
O assistente de Novo Projeto permite criar uma aplicação Web vazia em um projeto IDE padrão. O projeto padrão utiliza um script de construção Ant gerado pelo IDE para compilar, implantar e executar a aplicação.
-2. Em Nome do Projeto, digite *IFPWAFCAD*. Além disso, especifique o local para o projeto no computador. (Por default, o IDE coloca projetos em uma pasta`NetBeansProjects` localizada no diretório home). Clique em Próximo.
-3. No painel Servidor e Configurações, especifique o GlassFish Server como o servidor que será utilizado para executar a aplicação.
+
+[start=2]
+. Em Nome do Projeto, digite *IFPWAFCAD*. Além disso, especifique o local para o projeto no computador. (Por default, o IDE coloca projetos em uma pasta`NetBeansProjects` localizada no diretório home). Clique em Próximo.
+
+[start=3]
+. No painel Servidor e Configurações, especifique o GlassFish Server como o servidor que será utilizado para executar a aplicação.
*Observação.*O GlassFish Server será exibido no campo drop-down Servidor se você tiver instalado a versão Java do link:https://netbeans.org/downloads/index.html[+NetBeans IDE+]. Como o GlassFish Server está incluído no download, ele é automaticamente registrado no IDE. Se você quiser utilizar um servidor diferente para esse projeto, clique no botão Adicionar localizado ao lado do campo drop-down Servidor e registre um servidor diferente no IDE. No entanto, trabalhar com servidores que não o GlassFish Server está além do escopo deste tutorial.
-4. No campo Versão do Java EE, selecione *Java EE 5*.
+
+[start=4]
+. No campo Versão do Java EE, selecione *Java EE 5*.
+
image::images/server-settings.png[title="Especificar configurações de servidor no assistente de Nova Aplicação Web"]
Os projetos da Web Java EE 6 e Java EE 7 não exigem o uso do descritor de implantação `web.xml` e o modelo de projeto do NetBeans não inclui o arquivo `web.xml` em projetos Java EE 6 e Java EE 7. No entanto, este tutorial demonstra como declarar uma fonte de dados no descritor de implantação e não conta com nenhuma funcionalidade específico do Java EE 6 ou Java EE 7, portanto, é possível definir a versão do projeto como Java EE 5.
*Observação.* Você pode igualmente definir a versão do projeto como Java EE 6 ou Java EE 7 e, em seguida, criar um descritor de implantação `web.xml`. (No assistente de Novo Arquivo, selecione a categoria Web e, em seguida, Descritor de Implantação Padrão).
-5. Clique em Finalizar. O IDE cria um modelo de projeto para toda a aplicação e abre uma página JSP vazia (`index.jsp`) no editor. O arquivo `index.jsp` serve como página de boas-vindas da aplicação.
+
+[start=5]
+. Clique em Finalizar. O IDE cria um modelo de projeto para toda a aplicação e abre uma página JSP vazia (`index.jsp`) no editor. O arquivo `index.jsp` serve como página de boas-vindas da aplicação.
[[prepareInterface]]
@@ -133,16 +143,24 @@
1. No editor, altere o texto entre as tags `<title>` para `Homepage da IFPWAFCAD`.
2. Altere o texto entre as tags `<h1>` para: `Bem-vindo à IFPWAFCAD, a Associação internacional de Ex-Lutadores Profissionais para Aconselhamento e Desenvolvimento!`.
3. Abra a Paleta do IDE selecionando Janela > Paleta (Ctrl-Shift-8; &#8984-Shift-8 no Mac) no menu principal. Coloque o ponteiro do mouse sobre o ícone Tabela na categoria HTML e observe que o snippet de código default do item é exibido.
+
image::images/palette.png[title="A Paleta exibe o snippet de código ao passar o mouse sobre um item"]
+
[tips]#Você pode configurar a Paleta conforme desejar: clique com o botão direito do mouse na Paleta e selecione Mostrar Ícones Grandes e Ocultar Nomes dos Itens para que ela seja exibida como na imagem acima.#
-4. Coloque o cursor em um ponto logo depois das tags `<h1>`. (É aí que você deseja implementar a nova tabela HTML.) Em seguida, na Paleta, clique duas vezes no ícone Tabela.
-5. Na caixa de diálogo Inserir Tabela exibida, especifique os seguintes valores e clique em OK:
+
+[start=4]
+. Coloque o cursor em um ponto logo depois das tags `<h1>`. (É aí que você deseja implementar a nova tabela HTML.) Em seguida, na Paleta, clique duas vezes no ícone Tabela.
+
+[start=5]
+. Na caixa de diálogo Inserir Tabela exibida, especifique os seguintes valores e clique em OK:
* *Linhas*: 2
* *Colunas*: 1
* *Tamanho da Borda*: 0
O código da tabela HTML é gerado e adicionado a sua página.
-6. Adicione o conteúdo a seguir ao cabeçalho da tabela e à célula da primeira linha da tabela (novo conteúdo mostrado em *negrito*):
+
+[start=6]
+. Adicione o conteúdo a seguir ao cabeçalho da tabela e à célula da primeira linha da tabela (novo conteúdo mostrado em *negrito*):
[source,xml]
----
@@ -159,9 +177,14 @@
professional wrestler in your area, select a subject below:*</td>
</tr>
----
-7. Na linha inferior da tabela, insira um form HTML. Para isso, coloque o cursor entre o segundo par de tags `<td>`, em seguida, clique duas vezes no ícone do form HTML ( image::images/html-form-icon.png[] ) na Paleta. Na caixa de diálogo Inserir Form, digite `response.jsp` no campo Texto da Ação e, em seguida, clique em OK.
+
+[start=7]
+. Na linha inferior da tabela, insira um form HTML. Para isso, coloque o cursor entre o segundo par de tags `<td>`, em seguida, clique duas vezes no ícone do form HTML ( image:images/html-form-icon.png[] ) na Paleta. Na caixa de diálogo Inserir Form, digite `response.jsp` no campo Texto da Ação e, em seguida, clique em OK.
+
image::images/insert-form.png[title="Especificar as configurações do form na caixa de diálogo Inserir Form"]
-8. Digite o conteúdo a seguir entre as tags `<form>` (novo conteúdo mostrado em *negrito*):
+
+[start=8]
+. Digite o conteúdo a seguir entre as tags `<form>` (novo conteúdo mostrado em *negrito*):
[source,xml]
----
@@ -174,13 +197,21 @@
</td>
</tr>
----
-9. Pressione Enter para adicionar uma linha vazia após o conteúdo que você acabou de adicionar e, em seguida, clique duas vezes na Lista Drop-down na Paleta para abrir a caixa de diálogo Inserir Lista Drop-down.
-10. Digite `subject_id` para o campo de texto Nome na caixa de diálogo Inserir Lista Drop-down e clique em OK. Observe que o snippet de código da lista drop-down será adicionado ao form.
+
+[start=9]
+. Pressione Enter para adicionar uma linha vazia após o conteúdo que você acabou de adicionar e, em seguida, clique duas vezes na Lista Drop-down na Paleta para abrir a caixa de diálogo Inserir Lista Drop-down.
+
+[start=10]
+. Digite `subject_id` para o campo de texto Nome na caixa de diálogo Inserir Lista Drop-down e clique em OK. Observe que o snippet de código da lista drop-down será adicionado ao form.
O número de opções da lista drop-down não é importante no momento. Mais adiante neste tutorial, você adicionará tags JSTL que irão gerar dinamicamente as opções com base nos dados coletados da tabela do banco de dados Subject.
-11. Adicione um item de botão Submeter ( image::images/submit-button.png[] ) ao ponto bem ao lado da lista drop-down adicionada. É possível utilizar a Paleta para fazer isso ou chamar a funcionalidade autocompletar código do editor, conforme ilustrado na etapa anterior. Na caixa de diálogo Inserir Botão, digite `submit` nos campos de texto Nome e Label e clique em OK.
-12. Para formatar seu código, clique com o botão direito do mouse no editor e selecione Formatar (Alt-Shift-F; Ctrl-Shift-F no Mac). Seu código será formatado automaticamente e deverá ter a aparência semelhante ao seguinte código:
+
+[start=11]
+. Adicione um item de botão Submeter ( image:images/submit-button.png[] ) ao ponto bem ao lado da lista drop-down adicionada. É possível utilizar a Paleta para fazer isso ou chamar a funcionalidade autocompletar código do editor, conforme ilustrado na etapa anterior. Na caixa de diálogo Inserir Botão, digite `submit` nos campos de texto Nome e Label e clique em OK.
+
+[start=12]
+. Para formatar seu código, clique com o botão direito do mouse no editor e selecione Formatar (Alt-Shift-F; Ctrl-Shift-F no Mac). Seu código será formatado automaticamente e deverá ter a aparência semelhante ao seguinte código:
[source,xml]
----
@@ -230,9 +261,14 @@
1. Clique com o botão direito do mouse no nó do projeto IFPWAFCAD na janela Projetos e selecione Novo > JSP. A caixa de diálogo Novo Arquivo JSF será aberta.
2. No campo Nome do Arquivo JSP, digite `response`. Observe que a opção Páginas Web está atualmente selecionada no campo Localização, o que significa que o arquivo será criado no diretório `web` do projeto. Trata-se do mesmo local em que se encontra a página de boas-vindas `index.jsp`.
3. Aceite as outras configurações default e clique em Finalizar. Um modelo, aberto no editor, será gerado para a nova página `response.jsp`. O novo nó JSP também será exibido abaixo de Páginas Web na janela Projetos.
+
image::images/response-jsp-node.png[title="o nó response.jsp é exibido na janela Projetos"]
-4. No editor, altere o título `IFPWAFCAD: {placeholder}`.
-5. Remova a linha `<h1>Hello World!</h1>` alinhe entre as tags `<body>` e copie e cole a tabela HTML a seguir no corpo da página:
+
+[start=4]
+. No editor, altere o título `IFPWAFCAD: {placeholder}`.
+
+[start=5]
+. Remova a linha `<h1>Hello World!</h1>` alinhe entre as tags `<body>` e copie e cole a tabela HTML a seguir no corpo da página:
[source,xml]
----
@@ -277,7 +313,7 @@
Crie uma folha de estilo simples para melhorar a view da interface da Web. Este tutorial pressupõe que você sabe como funciona as regras de estilo e como elas afetam os elementos HTML correspondentes encontrados em `index.jsp` e `response.jsp`.
-1. Abra o assistente de Novo Projeto pressionando o botão ( image::images/new-file-btn.png[] ) Novo Arquivo na barra de ferramentas principal do IDE. Selecione a categoria Web, em seguida, Folha de Estilo em Cascata e clique em Próximo.
+1. Abra o assistente de Novo Projeto pressionando o botão ( image:images/new-file-btn.png[] ) Novo Arquivo na barra de ferramentas principal do IDE. Selecione a categoria Web, em seguida, Folha de Estilo em Cascata e clique em Próximo.
2. Digite `style` em Nome do Arquivo CSS e clique em Finalizar. O IDE cria um arquivo CSS vazio e o coloca no mesmo local do projeto onde estão `index.jsp` e `response.jsp`. Observe que agora será exibido um nó de `style.css` no projeto, na janela Projetos, e o arquivo será aberto no editor.
3. No editor, adicione o conteúdo a seguir ao arquivo `style.css`:
@@ -327,7 +363,9 @@
text-decoration: underline;
}
----
-4. Vincule a folha de estilo a `index.jsp` e `response.jsp`. Nas duas páginas, adicione a linha a seguir entre as tags `<head>`:
+
+[start=4]
+. Vincule a folha de estilo a `index.jsp` e `response.jsp`. Nas duas páginas, adicione a linha a seguir entre as tags `<head>`:
[source,java]
----
@@ -380,22 +418,35 @@
As etapas a seguir demonstram como declarar um pool de conexões e uma fonte de dados com base no pool de conexões. O assistente de Recursos JDBC do NetBeans permite executar as duas ações.
-1. Abra o assistente de Novo Projeto pressionando o botão ( image::images/new-file-btn.png[] ) Novo Arquivo na barra de ferramentas principal do IDE. Selecione a categoria do GlassFish Server e, em seguida, Recurso JDBC e clique em Próximo.
+1. Abra o assistente de Novo Projeto pressionando o botão ( image:images/new-file-btn.png[] ) Novo Arquivo na barra de ferramentas principal do IDE. Selecione a categoria do GlassFish Server e, em seguida, Recurso JDBC e clique em Próximo.
2. Na Etapa 2, Atributos Gerais, selecione a opção Criar Novo Pool de Conexões JDBC e, em seguida, no campo de texto Nome JNDI, digite *jdbc/IFPWAFCAD*.
+
image::images/jdbc-resource-wizard.png[title="Especificar definições da fonte de dados no assistente de Recurso JDBC"]
+
[tips]#A fonte de dados JDBC conta com a link:http://www.oracle.com/technetwork/java/jndi/index.html[+JNDI+], a Interface de Nomenclatura e Diretório Java. A API JNDI fornece uma maneira uniforme de as aplicações encontrarem e acessarem as fontes de dados. Para obter mais informações, consulte link:http://docs.oracle.com/javase/jndi/tutorial/[+Tutorial do JNDI+].#
-3. Como opção, adicione uma descrição para a fonte de dados. Por exemplo, digite: `Accesses the database that provides data for the IFPWAFCAD application`.
-4. Clique em Próximo e em Próximo novamente para ignorar a etapa 3, Propriedades Adicionais.
-5. Na Etapa 4, digite *IfpwafcadPool* para Nome do Pool de Conexões JDBC. Certifique-se de que a opção Extrair da Conexão Existente esteja selecionada e escolha `jdbc:mysql://localhost:3306/MyNewDatabase` na lista drop-down. Clique em Próximo.
+
+[start=3]
+. Como opção, adicione uma descrição para a fonte de dados. Por exemplo, digite: `Accesses the database that provides data for the IFPWAFCAD application`.
+
+[start=4]
+. Clique em Próximo e em Próximo novamente para ignorar a etapa 3, Propriedades Adicionais.
+
+[start=5]
+. Na Etapa 4, digite *IfpwafcadPool* para Nome do Pool de Conexões JDBC. Certifique-se de que a opção Extrair da Conexão Existente esteja selecionada e escolha `jdbc:mysql://localhost:3306/MyNewDatabase` na lista drop-down. Clique em Próximo.
+
image::images/jdbc-resource-wizard2.png[title="Especificar definições do pool de conexões no assistente de Recurso JDBC"]
-*Observação: *O assistente detecta as conexões de banco de dados que tenham sido configuradas no IDE. Portanto, neste ponto, é necessário que você já tenha criado uma conexão ao banco de dados `MyNewDatabase`. Você pode verificar as conexões que foram criadas ao abrir a janela Serviços (Ctrl-5; &8984-5 no Mac) e procurar nós de conexão (image::images/connection-node-icon.png[]) na categoria Bancos de Dados.
-6. Na Etapa 5, selecione `javax.sql.ConnectionPoolDataSource` na lista drop-down Tipo de Recurso.
+*Observação: *O assistente detecta as conexões de banco de dados que tenham sido configuradas no IDE. Portanto, neste ponto, é necessário que você já tenha criado uma conexão ao banco de dados `MyNewDatabase`. Você pode verificar as conexões que foram criadas ao abrir a janela Serviços (Ctrl-5; &8984-5 no Mac) e procurar nós de conexão (image:images/connection-node-icon.png[]) na categoria Bancos de Dados.
+
+[start=6]
+. Na Etapa 5, selecione `javax.sql.ConnectionPoolDataSource` na lista drop-down Tipo de Recurso.
Observe que o IDE extrai informações da conexão de banco de dados especificada na etapa anterior e define as propriedades de nome e valor para o novo pool de conexões.
image::images/jdbc-resource-wizard3.png[title="Os valores default são baseados nas informações extraídas da conexão de banco de dados selecionada"]
-7. Clique em Finalizar. O assistente gera um arquivo `glassfish-resources.xml` que contém entradas para a fonte de dados e o pool de conexões especificados.
+
+[start=7]
+. Clique em Finalizar. O assistente gera um arquivo `glassfish-resources.xml` que contém entradas para a fonte de dados e o pool de conexões especificados.
Na janela Projetos, você pode abrir o arquivo `glassfish-resources.xml` recém-criado em Recursos do Servidor e observar que, nas tags `<resources>`, foram declarados uma fonte de dados e um pool de conexões com os valores previamente especificados.
@@ -403,6 +454,7 @@
1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto IFPWAFCAD e selecione Implantar. O servidor será iniciado caso não esteja em execução e o projeto será compilado e implantado nele.
2. Abra a janela Serviços (Ctrl-5; &#8984-5 no Mac) e expanda os nós Servidores > GlassFish > Recursos > JDBC > Recursos JDBC e Pools de Conexões. Observe que a nova fonte de dados e o pool de conexões agora são exibidos:
+
image::images/services-window-glassfish.png[title="Nova fonte de dados e novo pool de conexões exibidos na janela Serviços"]
@@ -429,7 +481,9 @@
O novo recurso agora será listado abaixo do cabeçalho Referências de Recursos.
-6. Para verificar se o recurso foi adicionado ao arquivo `web.xml`, clique na guia Código-fonte localizada na parte superior do editor. Observe que as tags <`resource-ref`> a seguir agora estão incluídas.
+
+[start=6]
+. Para verificar se o recurso foi adicionado ao arquivo `web.xml`, clique na guia Código-fonte localizada na parte superior do editor. Observe que as tags <`resource-ref`> a seguir agora estão incluídas.
[source,xml]
----
@@ -453,12 +507,23 @@
1. Selecione Ferramentas > Servidores para abrir o gerenciador Servidores. Selecione o servidores do GlassFish Server no painel esquerdo.
2. No painel principal, selecione a opção Ativar Implantação do Driver JDBC.
+
image::images/servers-window.png[title="Opção Implantação de Driver JDBC ativa a implantação de driver automática"]
-3. Antes de fechar o gerenciador de Servidores, anote o caminho indicado no campo de texto da pasta Domínios. Ao se conectar ao GlassFish Server no IDE, você está se conectando, na realidade, a uma _instância_ do servidor de aplicações. Cada instância executa aplicações em um domínio exclusivo e o campo Nome do Domínio indica o nome do domínio que o servidor está utilizando. Conforme mostrado na imagem acima, o arquivo JAR do driver deverá estar localizado em `domain1`, que é o domínio default criado na instalação do GlassFish Server.
-4. Clique em Fechar para sair do gerenciador Servidores.
-5. No computador, vá até o diretório de instalação do GlassFish Server e entre na subpasta `domínios` > `domain1` > `lib. `. Como você já deve ter implantando o projeto IFPWAFCAD no servidor, você verá o arquivo `mysql-connector-java-5.1.6-bin.jar`. Se você não vir o arquivo JAR do driver, execute a etapa a seguir.
-6. Implante seu projeto no servidor. Na janela Projetos do IDE, selecione Implantar no menu de contexto do nó do projeto. Você pode ver o progresso na janela de Saída do IDE (Ctrl-4; &#8984-4 no Mac). A saída indica que o driver MySQL está implantado no GlassFish Server.
+
+[start=3]
+. Antes de fechar o gerenciador de Servidores, anote o caminho indicado no campo de texto da pasta Domínios. Ao se conectar ao GlassFish Server no IDE, você está se conectando, na realidade, a uma _instância_ do servidor de aplicações. Cada instância executa aplicações em um domínio exclusivo e o campo Nome do Domínio indica o nome do domínio que o servidor está utilizando. Conforme mostrado na imagem acima, o arquivo JAR do driver deverá estar localizado em `domain1`, que é o domínio default criado na instalação do GlassFish Server.
+
+[start=4]
+. Clique em Fechar para sair do gerenciador Servidores.
+
+[start=5]
+. No computador, vá até o diretório de instalação do GlassFish Server e entre na subpasta `domínios` > `domain1` > `lib. `. Como você já deve ter implantando o projeto IFPWAFCAD no servidor, você verá o arquivo `mysql-connector-java-5.1.6-bin.jar`. Se você não vir o arquivo JAR do driver, execute a etapa a seguir.
+
+[start=6]
+. Implante seu projeto no servidor. Na janela Projetos do IDE, selecione Implantar no menu de contexto do nó do projeto. Você pode ver o progresso na janela de Saída do IDE (Ctrl-4; &#8984-4 no Mac). A saída indica que o driver MySQL está implantado no GlassFish Server.
+
image::images/output-window.png[title="A janela de Saída indica que o driver MySQL foi implantado"]
+
Agora, se você voltar à subpasta `domain1/lib` no computador, você verá que o arquivo `mysql-connector-java-5.1.6.x-bin.jar` foi adicionado automaticamente.
@@ -502,17 +567,23 @@
Para exibir dinamicamente o conteúdo do form no `index.jsp`, você precisa acessar os `name`s da tabela de banco de dados Subject.
1. Coloque o mouse sobre o item Relatório do BD na Paleta.
+
image::images/db-report.png[title="Digite 'db' e pressione Ctrl-Espaço para acessar os snippets JSTL específicos do banco de dados"]
O item Relatório do BD utiliza a tag `<sql:query>` para criar uma consulta SQL e, em seguida, utiliza a tag `<c:forEach>` para passar pelo `resultset`da consulta e obter os dados recuperados.
-2. Coloque o cursor acima da declaração `<%@page ... %>` (linha 7) e, em seguida, clique duas vezes no item Relatório do BD na Paleta. Na caixa de diálogo que é exibida, insira os seguintes detalhes:
+
+[start=2]
+. Coloque o cursor acima da declaração `<%@page ... %>` (linha 7) e, em seguida, clique duas vezes no item Relatório do BD na Paleta. Na caixa de diálogo que é exibida, insira os seguintes detalhes:
* *Nome da Variável:* `subjects`
* *Escopo:* `page`
* *Fonte de Dados:* `jdbc/IFPWAFCAD`
* *Instrução da Consulta:* `SELECT subject_id, name FROM Subject`
+
image::images/insert-db-report.png[title="Use a caixa de diálogo Inserir Relatório do BD para especificar detalhes específicos da consulta"]
-3. Clique em OK. O conteúdo a seguir é gerado no arquivo `index.jsp`. (Novo conteúdo mostrado em *negrito*.)
+
+[start=3]
+. Clique em OK. O conteúdo a seguir é gerado no arquivo `index.jsp`. (Novo conteúdo mostrado em *negrito*.)
[source,xml]
----
@@ -550,7 +621,9 @@
"http://www.w3.org/TR/html4/loose.dtd">
----
Observe que o IDE adicionou automaticamente as diretivas `taglib` necessárias para as tags JSTL utilizadas no conteúdo gerado `<sql:query>` e `<c:forEach>`). Uma diretiva `taglib` declara que a página do JSP utiliza tags personalizadas (por exemplo, JSTL), nomeia a biblioteca de tags que as define e especifica seu prefixo de tag.
-4. Execute o projeto para ver como ele é exibido no browser. Clique com o botão direito do mouse no nó na janela Projetos e selecione Executar.
+
+[start=4]
+. Execute o projeto para ver como ele é exibido no browser. Clique com o botão direito do mouse no nó na janela Projetos e selecione Executar.
Quando você seleciona Executar, o IDE implanta o projeto no GlassFish Server, a página de índice é compilada em um servlet e a página de boas-vindas é aberta no browser default. O código gerado do item Relatório de BD cria a tabela a seguir na página de boas-vindas.
@@ -560,8 +633,12 @@
As etapas a seguir demonstram como integrar o código gerado à lista drop-down HTML criada anteriormente no tutorial.
-5. Examine os dados da coluna no código gerado. Duas tags `<c:forEach>` são utilizadas, uma está aninhada dentro da outra. Isso faz com que o contêiner JSP (por exemplo, o GlassFish Server) execute um loop em todas as linhas da tabela e, para cada linha, ele executa um loop em todas as colunas. Dessa maneira, os dados da tabela inteira são exibidos.
-6. Integre as tags `<c:forEach>` no form HTML, conforme a seguir. O valor de cada item se torna `subject_id` e o texto de saída se torna o `name`, conforme registrado no banco de dados. (As alterações são exibidas em *negrito*).
+
+[start=5]
+. Examine os dados da coluna no código gerado. Duas tags `<c:forEach>` são utilizadas, uma está aninhada dentro da outra. Isso faz com que o contêiner JSP (por exemplo, o GlassFish Server) execute um loop em todas as linhas da tabela e, para cada linha, ele executa um loop em todas as colunas. Dessa maneira, os dados da tabela inteira são exibidos.
+
+[start=6]
+. Integre as tags `<c:forEach>` no form HTML, conforme a seguir. O valor de cada item se torna `subject_id` e o texto de saída se torna o `name`, conforme registrado no banco de dados. (As alterações são exibidas em *negrito*).
[source,xml]
----
@@ -596,7 +673,9 @@
Em qualquer um dos casos, as tags `<c:forEach>` executam loop em todos os valores de `subject_id` e `name` da consulta SQL e inserem cada par nas tags `<option>` HTML. Dessa maneira, a lista drop-down do form é preenchida com dados.
-7. Delete a tabela que foi gerada a partir do item Relatório de BD. (A exclusão é mostrada a seguir como *[.line-through]#texto tachado#*.)
+
+[start=7]
+. Delete a tabela que foi gerada a partir do item Relatório de BD. (A exclusão é mostrada a seguir como *[.line-through]#texto tachado#*.)
[source,xml]
----
@@ -634,8 +713,12 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
----
-8. Salve as alterações (Ctrl-S; &#8984-S no Mac).
-9. Atualize a página de boas-vindas do projeto no browser.
+
+[start=8]
+. Salve as alterações (Ctrl-S; &#8984-S no Mac).
+
+[start=9]
+. Atualize a página de boas-vindas do projeto no browser.
Note que a lista drop-down do browser contém, agora, nomes de assuntos que foram recuperados do banco de dados.
@@ -652,8 +735,11 @@
* *Escopo:* `page`
* *Fonte de Dados:* `jdbc/IFPWAFCAD`
* *Instrução de Consulta:* `SELECT * FROM Subject, Counselor WHERE Counselor.counselor_id = Subject.counselor_idfk AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>`
+
image::images/insert-db-query2.png[title="Use a caixa de diálogo Inserir Consulta do BD para especificar detalhes específicos da consulta"]
-3. Clique em OK. O conteúdo a seguir é gerado no arquivo `response.jsp`. (Novo conteúdo mostrado em *negrito*.)
+
+[start=3]
+. Clique em OK. O conteúdo a seguir é gerado no arquivo `response.jsp`. (Novo conteúdo mostrado em *negrito*.)
[source,xml]
----
@@ -676,7 +762,9 @@
"http://www.w3.org/TR/html4/loose.dtd">
----
Observe que o IDE adicionou automaticamente a diretiva `taglib` necessária para a tag `<sql:query>`. Além disso, observe que você utilizou uma tag `<sql:param>` diretamente na consulta. Como essa consulta conta com o valor `subject_id` que foi submetido de `index.jsp`, é possível extrair o valor utilizando uma instrução EL (Linguagem de Expressão) na forma de `${param.subject_id}` e, em seguida, passá-lo para a tag `<sql:param>`, para que ele possa ser utilizado no local do ponto de interrogação da SQL (`?`) durante o runtime.
-4. Utilize uma tag `<c:set>` para definir uma variável que corresponda ao primeiro registro (ou seja, linha) do `resultset` retornado da consulta. (Novo conteúdo mostrado em *negrito*.)
+
+[start=4]
+. Utilize uma tag `<c:set>` para definir uma variável que corresponda ao primeiro registro (ou seja, linha) do `resultset` retornado da consulta. (Novo conteúdo mostrado em *negrito*.)
[source,xml]
----
@@ -690,7 +778,9 @@
*<c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>*
----
Embora o `resultset` retornado da consulta deva conter apenas um único registro, está é uma etapa necessária, pois a página precisa acessar valores do registro utilizando instruções EL (Linguagem de Expressão). Lembre-se que no `index.jsp` você podia acessar valores do `resultset` simplesmente utilizando uma tag `<c:forEach>`. No entanto, a tag `<c:forEach>` opera definindo uma variável para linhas contidas na consulta, permitindo, assim, extrair valores incluindo a variável da linha nas instruções EL.
-5. Adicione a diretiva `taglib` para a biblioteca `core` do JSTL na parte superior do arquivo, para que a tag `<c:set>` seja entendida. (Novo conteúdo mostrado em *negrito*.)
+
+[start=5]
+. Adicione a diretiva `taglib` para a biblioteca `core` do JSTL na parte superior do arquivo, para que a tag `<c:set>` seja entendida. (Novo conteúdo mostrado em *negrito*.)
[source,java]
----
@@ -698,7 +788,9 @@
*<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>*
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
----
-6. Na marcação HTML, substitua todos os espaços reservados por código de instruções EL que exibem os dados contidos na variável `counselorDetails`. (Alterações mostradas a seguir em *negrito*):
+
+[start=6]
+. Na marcação HTML, substitua todos os espaços reservados por código de instruções EL que exibem os dados contidos na variável `counselorDetails`. (Alterações mostradas a seguir em *negrito*):
[source,xml]
----
@@ -743,7 +835,7 @@
Você, agora, concluiu a aplicação. Tente executá-lo novamente para ver como ele é exibido no browser. Observe que, graças à funcionalidade Compilar ao Salvar do NetBeans, você não precisa se preocupar com a compilação ou reimplantação da aplicação. Assim, ao executar um projeto, você terá certeza de que a implantação contém as alterações mais recentes.
-Clique no botão ( image::images/run-project-btn.png[] ) Executar Projeto na barra de ferramentas principal. A página `index.jsp` será aberta no browser default do IDE.
+Clique no botão ( image:images/run-project-btn.png[] ) Executar Projeto na barra de ferramentas principal. A página `index.jsp` será aberta no browser default do IDE.
Quando `index.jsp` for exibido no browser, selecione um assunto na lista drop-down e clique em `submit`. Você será direcionado à página `response.jsp`, mostrando os detalhes correspondentes à sua seleção.
@@ -771,10 +863,13 @@
Utilize a janela Serviços do IDE (Ctrl-5; &#8984-5 no Mac) para garantir que o servidor MySQL esteja em execução e que o `MyNewDatabase` esteja acessível e contenha os dados da tabela adequados.
* Para conectar-se ao servidor de banco de dados MySQL, clique com o botão direito do mouse no nó Servidor MySQL e selecione Conectar.
-* Se um nó de conexão ( image::images/db-connection-node.png[] ) para o `MyNewDatabase` não for exibido na janela Serviços, você poderá criar uma conexão clicando com o botão direito do mouse no nó do driver MySQL ( image::images/driver-node.png[] ) e selecionando a opção Conectar Usando. Insira os detalhes necessários na caixa de diálogo exibida.
+* Se um nó de conexão ( image:images/db-connection-node.png[] ) para o `MyNewDatabase` não for exibido na janela Serviços, você poderá criar uma conexão clicando com o botão direito do mouse no nó do driver MySQL ( image:images/driver-node.png[] ) e selecionando a opção Conectar Usando. Insira os detalhes necessários na caixa de diálogo exibida.
+
image::images/new-db-connection-dialog.png[title="Estabeleça uma conexão de banco de dados no IDE utilizando a caixa de diálogo Nova Conexão de Banco de Dados"]
+
[tips]#Os campos fornecidos na caixa de diálogo Nova Conexão de Banco de Dados espelham a string de URL inserida na opção Mostrar URL do JDBC. Portanto, se você souber o URL (por exemplo, `jdbc:mysql://localhost:3306/MyNewDatabase`) você poderá colá-lo no campo Mostrar URL do JDBC e os campos remanescentes da caixa de diálogo serão automaticamente preenchidos.#
-* Para garantir que as tabelas `Subject` e `Counselor` existam e que contenham dados de amostra, expanda o nó de conexão `MyNewDatabase` ( image::images/db-connection-node.png[] ) e localize o nó do catálogo `MyNewDatabase` ( image::images/db-catalog-node.png[] ). Expanda o nó de catálogo para exibir as tabelas existentes. Você pode exibir os dados da tabela clicando com o botão direito do mouse em um nó da tabela e selecionando Exibir Dados.
+* Para garantir que as tabelas `Subject` e `Counselor` existam e que contenham dados de amostra, expanda o nó de conexão `MyNewDatabase` ( image:images/db-connection-node.png[] ) e localize o nó do catálogo `MyNewDatabase` ( image:images/db-catalog-node.png[] ). Expanda o nó de catálogo para exibir as tabelas existentes. Você pode exibir os dados da tabela clicando com o botão direito do mouse em um nó da tabela e selecionando Exibir Dados.
+
image::images/services-window-view-data.png[title="Exibir dados da tabela selecionando a opção Exibir Dados no menu contextual de um nó da tabela de banco de dados"]
@@ -822,8 +917,11 @@
3. Informe o nome do usuário e a senha se for solicitado. Você pode exibir o nome de usuário e senha no gerenciador de Servidores.
4. Na árvore à esquerda da console, expanda o nó Recursos > JDBC > Pools de Conexões de JDBC > `IfpwafcadPool`. OS detalhes do pool de conexões `IfpwafcadPool` são exibidos na janela principal.
5. Clique no botão Ping. Se o pool de conexões estiver configurado adequadamente, você verá uma mensagem "`Ping Bem-sucedido`".
+
image::images/ping-succeeded.png[title="Teste o seu pool de conexões clicando em Ping na Console de Administração do GlassFish Server"]
-6. Se o ping falhar, clique na guia Propriedades Adicionais e verifique se os valores da propriedade listados estão corretamente definidos.
+
+[start=6]
+. Se o ping falhar, clique na guia Propriedades Adicionais e verifique se os valores da propriedade listados estão corretamente definidos.
link:/about/contact_form.html?to=3&subject=Feedback:%20Creating%20Web%20App%20MySQL[+Envie-nos Seu Feedback+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_ru.asciidoc
index 0ddaf5a..5e39c05 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_ru.asciidoc
@@ -78,12 +78,12 @@
Для реализации описанного выше сценария необходимо разработать простое приложение для организации IFPWAFCAD Международной ассоциации по консультированию и развитию для бывших профессиональных борцов.
-==== index.jsp
+=== index.jsp
image::images/index-page.png[title="Файл index.jsp отображается в браузере"]
-==== response.jsp
+=== response.jsp
image::images/response-page.png[title="Файл response.jsp отображается в браузере"]
@@ -95,23 +95,33 @@
Сначала необходимо создать новый веб-проект в среде IDE:
1. Выберите "Файл > Новый проект" (CTRL+SHIFT+N; &#8984+SHIFT+N в Mac ОС) в главном меню. Выберите категорию "Java Web", а затем выберите "Веб-приложение". Нажмите кнопку "Далее".
+
image::images/new-project.png[title="Используйте мастер создания проекта для создания нового проекта "]
С помощью этого мастера можно создать пустое веб-приложение в стандартном проекте IDE. В стандартном проекте для компиляции, развертывания и выполнения приложения используется созданный в среде IDE сценарий сборки проекта Ant.
-2. *В поле "Имя проекта" введите "IFPWAFCAD".* Также укажите местоположение проекта на компьютере. По умолчанию проекты в среде IDE помещаются в папку `NetBeansProjects` в домашнем каталоге. Нажмите кнопку "Далее".
-3. В панели "Сервер и параметры" укажите сервер GlassFish в качестве сервера, на котором будет запускаться приложение.
+
+[start=2]
+. *В поле "Имя проекта" введите "IFPWAFCAD".* Также укажите местоположение проекта на компьютере. По умолчанию проекты в среде IDE помещаются в папку `NetBeansProjects` в домашнем каталоге. Нажмите кнопку "Далее".
+
+[start=3]
+. В панели "Сервер и параметры" укажите сервер GlassFish в качестве сервера, на котором будет запускаться приложение.
*Примечание.*Сервер GlassFish отображается в раскрывающемся списке 'Сервер', если установлена версия Java link:https://netbeans.org/downloads/index.html[+IDE NetBeans+]. Поскольку сервер GlassFish включен в загрузку, он регистрируется в среде IDE автоматически. Для использования в проекте другого сервера нажмите кнопку "Добавить" рядом с полем с раскрывающимся списком "Сервер" и зарегистрируйте другой сервер в среде IDE. Работа с другими серверами, помимо GlassFish в рамках данного учебного курса не рассматривается.
-4. В поле "Версия Java EE" выберите *Java EE 5*.
+
+[start=4]
+. В поле "Версия Java EE" выберите *Java EE 5*.
+
image::images/server-settings.png[title="Укажите настройки сервера в мастере создания веб-приложений"]
Для веб-проектов Java EE 6 и Java EE 7 использование дескриптора развертывания `web.xml` не требуется. Шаблон проекта NetBeans не содержит файл `web.xml` в проектах Java EE 6 и Java EE 7. Однако в данном учебном курсе рассматривается процесс объявления источника данных в дескрипторе развертывания. Функции, характерные только для Java EE 6 или Java EE 7, не требуются, поэтому в качестве версии проекта можно указать Java EE 5.
*Примечание.* Точно так же можно указать в качестве версии проекта Java EE 6 или Java EE 7, а затем создать дескриптор развертывания `web.xml`. В мастере создания файла выберите категорию "Web", а затем выберите "Стандартный дескриптор развертывания".
-5. Нажмите кнопку "Завершить". Создается шаблон проекта для всего приложения и в редакторе открывается пустая страница JSP (`index.jsp`). Файл `index.jsp`служит в приложении страницей приветствия.
+
+[start=5]
+. Нажмите кнопку "Завершить". Создается шаблон проекта для всего приложения и в редакторе открывается пустая страница JSP (`index.jsp`). Файл `index.jsp`служит в приложении страницей приветствия.
[[prepareInterface]]
@@ -132,16 +142,24 @@
1. В редакторе измените текст между тегами `<title>` на `Домашняя страница IFPWAFCAD`.
2. Измените текст между тегами `<h1>` на `Добро пожаловать в IFPWAFCAD, Международную ассоциацию по консультированию и развитию для бывших профессиональных борцов!`
3. Откройте палитру среды IDE, выбрав в главном меню "Окно" > "Палитра" (CTRL+SHIFT+8; &#8984+SHIFT+8 в ОС Mac). Наведите курсор на значок "Таблица" в категории "HTML" и обратите внимание на то, что отображается фрагмент кода для элемента по умолчанию.
+
image::images/palette.png[title="На палитре отображается фрагмент кода при подведении курсора к элементу"]
+
[tips]#Палитру можно настроить в соответствии с существующими требованиями - щелкните правой кнопкой мыши палитру и выберите 'Показать крупные значки' и 'Скрыть имена элементов', чтобы палитра выглядела как на рисунке выше.#
-4. Установите курсор сразу же после тегов `<h1>`. (Именно в этом месте будет внедрена новая таблица HTML). Далее в окне "Палитра" дважды щелкните значок "Таблица".
-5. В появившемся диалоговом окне "Вставка таблицы" укажите следующие значения и затем нажмите кнопку "ОК":
+
+[start=4]
+. Установите курсор сразу же после тегов `<h1>`. (Именно в этом месте будет внедрена новая таблица HTML). Далее в окне "Палитра" дважды щелкните значок "Таблица".
+
+[start=5]
+. В появившемся диалоговом окне "Вставка таблицы" укажите следующие значения и затем нажмите кнопку "ОК":
* *Рядов*: 2
* *Столбцов*: 1
* *Размер границы*: 0
Код таблицы HTML создан и добавлен на страницу.
-6. Добавьте следующее содержимое в заголовок таблицы и ячейку первой строки таблицы (новое содержимое выделено *полужирным шрифтом*):
+
+[start=6]
+. Добавьте следующее содержимое в заголовок таблицы и ячейку первой строки таблицы (новое содержимое выделено *полужирным шрифтом*):
[source,xml]
----
@@ -158,9 +176,14 @@
professional wrestler in your area, select a subject below:*</td>
</tr>
----
-7. Для нижней строки таблицы вставьте форму HTML. Для этого поместите курсор между второй парой тегов `<td>` и дважды щелкните значок формы HTML ( image::images/html-form-icon.png[] ) на палитре. В диалоговом окне "Вставка формы" введите `response.jsp` в текстовом поле "Действие" и нажмите кнопку "ОК".
+
+[start=7]
+. Для нижней строки таблицы вставьте форму HTML. Для этого поместите курсор между второй парой тегов `<td>` и дважды щелкните значок формы HTML ( image:images/html-form-icon.png[] ) на палитре. В диалоговом окне "Вставка формы" введите `response.jsp` в текстовом поле "Действие" и нажмите кнопку "ОК".
+
image::images/insert-form.png[title="Укажите настройки формы в диалоговом окне 'Вставить форму'"]
-8. Между тегами `<form>` введите следующее содержимое (новое содержимое выделено *полужирным шрифтом*):
+
+[start=8]
+. Между тегами `<form>` введите следующее содержимое (новое содержимое выделено *полужирным шрифтом*):
[source,xml]
----
@@ -173,13 +196,21 @@
</td>
</tr>
----
-9. Нажмите клавишу Enter, чтобы добавить пустую строку после добавленного содержимого, затем дважды щелкните "Список" в палитре, чтобы открыть диалоговое окно "Вставить список".
-10. В диалоговом окне "Вставить список" ведите `subject_id` для текстового поля "Имя" и нажмите "OK". Обратите внимание на то, что к форме добавляется фрагмент кода для раскрывающегося списка.
+
+[start=9]
+. Нажмите клавишу Enter, чтобы добавить пустую строку после добавленного содержимого, затем дважды щелкните "Список" в палитре, чтобы открыть диалоговое окно "Вставить список".
+
+[start=10]
+. В диалоговом окне "Вставить список" ведите `subject_id` для текстового поля "Имя" и нажмите "OK". Обратите внимание на то, что к форме добавляется фрагмент кода для раскрывающегося списка.
Количество параметров для раскрывающегося списка не имеет значения. Позже в этом учебном курсе будет показано добавление тегов JSTL для динамического создания на основе данных, полученных из таблицы базы данных "Subject".
-11. Добавьте элемент кнопки 'Отправить' ( image::images/submit-button.png[] ) в точку, расположенную непосредственно после только что добавленного раскрывающегося списка. Для этого можно использовать окно "Палитра" или вызвать дополнение кода в редакторе, как показано в предыдущем шаге. В диалоговом окне "Вставка кнопки" в текстовых полях "Подпись" и "Имя" введите `Отправить` и нажмите кнопку ОК.
-12. Для форматирования кода щелкните правой кнопкой мыши в редакторе и выберите 'Формат' (Alt-Shift-F; Ctrl-Shift-F в Mac). Код автоматически форматируется и должен теперь выглядеть следующим образом:
+
+[start=11]
+. Добавьте элемент кнопки 'Отправить' ( image:images/submit-button.png[] ) в точку, расположенную непосредственно после только что добавленного раскрывающегося списка. Для этого можно использовать окно "Палитра" или вызвать дополнение кода в редакторе, как показано в предыдущем шаге. В диалоговом окне "Вставка кнопки" в текстовых полях "Подпись" и "Имя" введите `Отправить` и нажмите кнопку ОК.
+
+[start=12]
+. Для форматирования кода щелкните правой кнопкой мыши в редакторе и выберите 'Формат' (Alt-Shift-F; Ctrl-Shift-F в Mac). Код автоматически форматируется и должен теперь выглядеть следующим образом:
[source,xml]
----
@@ -229,9 +260,14 @@
1. Щелкните правой кнопкой мыши узел проекта "IFPWAFCAD" в окне "Проекты" и выберите "Создать > JSP". Откроется диалоговое окно "Новый файл JSP".
2. В поле "Имя файла JSP" введите `response`. Обратите внимание на то, что в настоящий момент для поля "Расположение" выбран каталог "Веб-страницы", это означает, что файл будет создан в каталоге проекта `web`. Это то же местоположение, что и для страницы приветствия `index.jsp`.
3. Примите остальные значения по умолчанию и нажмите кнопку "Готово". В редакторе выполняется создание и открытие шаблона новой страницы `response.jsp`. Новый узел JSP также отображается в каталоге "Веб-страницы" в окне "Проекты".
+
image::images/response-jsp-node.png[title="Узел response.jsp отображается в окне 'Проекты'"]
-4. В редакторе измените заголовок на `IFPWAFCAD - {местозаполнитель}`
-5. Удалите строку `<h1>Hello World!</h1>` строка между тегами `<body>`. Скопируйте и вставьте в тело страницы следующую таблицу HTML:
+
+[start=4]
+. В редакторе измените заголовок на `IFPWAFCAD - {местозаполнитель}`
+
+[start=5]
+. Удалите строку `<h1>Hello World!</h1>` строка между тегами `<body>`. Скопируйте и вставьте в тело страницы следующую таблицу HTML:
[source,xml]
----
@@ -276,7 +312,7 @@
Создайте простую таблицу стилей для расширения просмотра в веб-интерфейсе. При работе с данным учебным курсом предполагается, что пользователь обладает знаниями о правилах стилей и их влиянии на соответствующие элементы HTML на страницах `index.jsp` и `response.jsp`.
-1. Откройте мастер создания файлов, нажав кнопку 'Создать файл' ( image::images/new-file-btn.png[] ) на главной панели инструментов IDE. Выберите категорию "Web", а затем выберите "Каскадная таблица стилей" и нажмите кнопку "Далее".
+1. Откройте мастер создания файлов, нажав кнопку 'Создать файл' ( image:images/new-file-btn.png[] ) на главной панели инструментов IDE. Выберите категорию "Web", а затем выберите "Каскадная таблица стилей" и нажмите кнопку "Далее".
2. Введите `style` в поле "Имя файла CSS" и нажмите кнопку "Готово". Среда IDE создает пустой файл CSS и располагает его в том же местоположении проекта, что и `index.jsp` и `response.jsp`. Обратите внимание на то, что узел для `style.css` отображается теперь внутри проекта в окне "Проекты", а файл открывается в редакторе.
3. В редакторе добавьте следующее содержимое к файлу `style.css`:
@@ -326,7 +362,9 @@
text-decoration: underline;
}
----
-4. Подключите таблицу стилей к `index.jsp` и `response.jsp`. На обеих страницах добавьте следующую строку между тегами `<head>`:
+
+[start=4]
+. Подключите таблицу стилей к `index.jsp` и `response.jsp`. На обеих страницах добавьте следующую строку между тегами `<head>`:
[source,java]
----
@@ -379,22 +417,35 @@
Далее рассматривается процесс объявления пула подключений и источника данных, использующего этот пул. Оба действия можно выполнить с помощью мастера ресурсов JDBC NetBeans.
-1. Откройте мастер создания файлов, нажав кнопку 'Создать файл' ( image::images/new-file-btn.png[] ) на главной панели инструментов IDE. Выберите категорию сервера GlassFish, затем выберите "Ресурс JDBC" и нажмите кнопку "Далее".
+1. Откройте мастер создания файлов, нажав кнопку 'Создать файл' ( image:images/new-file-btn.png[] ) на главной панели инструментов IDE. Выберите категорию сервера GlassFish, затем выберите "Ресурс JDBC" и нажмите кнопку "Далее".
2. В шаге 2, в области "Общие атрибуты" выберите параметр "Создать новый пул соединений JDBC", а затем в текстовом поле "Имя JNDI" введите *jdbc/IFPWAFCAD*.
+
image::images/jdbc-resource-wizard.png[title="Укажите настройки источника данных в мастере ресурсов JDBC"]
+
[tips]#Источник данных JDBC использует link:http://www.oracle.com/technetwork/java/jndi/index.html[+JNDI+]. В интерфейсе API JNDI предоставляется единый для всех приложений способ поиска источников данных и получения доступа к ним. Дополнительные сведения приведены в link:http://docs.oracle.com/javase/jndi/tutorial/[+Учебном курсе по JND+].#
-3. Дополнительно можно добавить описание источника данных. Например, укажите `Обеспечивает доступ к базам данных, поставляющим данные для приложения IFPWAFCAD`.
-4. Нажмите кнопку "Далее". После этого еще раз нажмите кнопку "Далее" и пропустите шаг 3, "Дополнительные свойства".
-5. В шаге 4 укажите имя пула подключений JDBC *IfpwafcadPool*. Убедитесь, что выбран параметр "Извлечь из существующего соединения" и выберите `jdbc:mysql://localhost:3306/MyNewDatabase` из раскрывающегося списка. Нажмите кнопку "Далее".
+
+[start=3]
+. Дополнительно можно добавить описание источника данных. Например, укажите `Обеспечивает доступ к базам данных, поставляющим данные для приложения IFPWAFCAD`.
+
+[start=4]
+. Нажмите кнопку "Далее". После этого еще раз нажмите кнопку "Далее" и пропустите шаг 3, "Дополнительные свойства".
+
+[start=5]
+. В шаге 4 укажите имя пула подключений JDBC *IfpwafcadPool*. Убедитесь, что выбран параметр "Извлечь из существующего соединения" и выберите `jdbc:mysql://localhost:3306/MyNewDatabase` из раскрывающегося списка. Нажмите кнопку "Далее".
+
image::images/jdbc-resource-wizard2.png[title="Укажите настройки пула подключений в мастере ресурсов JDBC"]
-*Примечание. *Мастер обнаруживает все соединения с базой данных, настроенные в IDE. Поэтому на этот момент должно существовать созданное подключение к базе данных `MyNewDatabase`. Можно проверить, какие подключения были созданы, открыв окно 'Службы' (Ctrl-5; ⌘-5 в Mac) и выполнив поиск узлов подключения ( image::images/connection-node-icon.png[] ) в категории 'Базы данных'.
-6. На этапе 5 выберите файл `javax.sql.ConnectionPoolDataSource` в списке "Тип ресурса".
+*Примечание. *Мастер обнаруживает все соединения с базой данных, настроенные в IDE. Поэтому на этот момент должно существовать созданное подключение к базе данных `MyNewDatabase`. Можно проверить, какие подключения были созданы, открыв окно 'Службы' (Ctrl-5; ⌘-5 в Mac) и выполнив поиск узлов подключения ( image:images/connection-node-icon.png[] ) в категории 'Базы данных'.
+
+[start=6]
+. На этапе 5 выберите файл `javax.sql.ConnectionPoolDataSource` в списке "Тип ресурса".
Обратите внимание на то, что среда IDE извлекает информацию из подключенной базы данных, указанной на предыдущем этапе, и задает свойства "имя-значение" для нового пула подключений.
image::images/jdbc-resource-wizard3.png[title="Значения по умолчанию основаны на данных, извлеченных из выбранного подключения к базе данных"]
-7. Нажмите кнопку "Завершить". Мастер ресурсов создает файл `glassfish-resources.xml`, который содержит записи для источника данных и указанный пул подключения.
+
+[start=7]
+. Нажмите кнопку "Завершить". Мастер ресурсов создает файл `glassfish-resources.xml`, который содержит записи для источника данных и указанный пул подключения.
В окне "Проекты" можно открыть `glassfish-resources.xml`, созданный в дереве узла "Серверные ресурсы". Обратите внимание, что в тегах `<resources>` источник данных и пул соединений объявлены как содержащие ранее указанные значения.
@@ -402,6 +453,7 @@
1. В окне 'Проекты', щелкните правой кнопкой мыши узел проекта IFPWAFCAD и выберите 'Развернуть'. Запустится сервер, если это не было выполнено ранее, и проект будет скомпилирован и развернут на этом сервере.
2. Откройте окно "Службы" (CTRL+5; &#8984+5 в системе Mac OS) и разверните узлы "Серверы" > "GlassFish" > "Ресурсы" > "JDBC" > "Ресурсы и пулы подключения JDBC". Проверьте, что теперь отображаются новый источник данных и пул подключений:
+
image::images/services-window-glassfish.png[title="Новый источник данных и пул подключений отображаются в окне 'Службы'"]
@@ -428,7 +480,9 @@
Новый ресурс теперь перечислен в списке под заголовком 'Ссылки на ресурсы'.
-6. Чтобы убедиться, что ресурс добавлен в файл `web.xml`, перейдите на вкладку "Исходный код" в верхней части экрана редактора. Заметим, что теперь в код включены следующие теги <`resource-ref`>.
+
+[start=6]
+. Чтобы убедиться, что ресурс добавлен в файл `web.xml`, перейдите на вкладку "Исходный код" в верхней части экрана редактора. Заметим, что теперь в код включены следующие теги <`resource-ref`>.
[source,xml]
----
@@ -452,12 +506,23 @@
1. Выберите "Сервис > Серверы", чтобы открыть Диспетчер серверов. На левой панели выберите "GlassFish".
2. В главном окне выберите параметр "Включить развертывание драйвера JDBC".
+
image::images/servers-window.png[title="Параметр развертывания драйвера JDBC обеспечивает поддержку автоматического развертывания драйверов"]
-3. Прежде чем закрыть Диспетчер серверов, запишите путь, указанный в текстовом поле "Папка доменов". При подключении к серверу GlassFish в среде IDE фактически подключение выполняется к _экземпляру_ сервера приложений. Каждый экземпляр запускает приложения в уникальном домене, а в поле "Имя домена" указано имя используемого сервером домена. Как видно на рисунке выше, файл JAR драйвера должен находиться в `domain1`. Это домен по умолчанию, созданный при установке сервера GlassFish.
-4. Нажмите кнопку "Закрыть", чтобы выйти из Диспетчера серверов.
-5. На компьютере перейдите к каталогу установки GlassFish и войдите в подпапку `domains` > `domain1` > `lib`. Поскольку проект IFPWAFCAD уже должен быть развернут на сервере, должен отображаться файл `mysql-connector-java-5.1.6-bin.jar`. Если файл JAR драйвера не отображается, выполните следующий шаг.
-6. Разверните проект на сервере. В окне 'Проекты' среды IDE выберите 'Развернуть' в контекстном меню узла проекта. Ход выполнения можно видеть в окне "Вывод" среды IDE (CTRL+4; &#8984+4 для Mac). В окне "Вывод" указывается, что драйвер MySQL развернут в местоположении на сервере GlassFish.
+
+[start=3]
+. Прежде чем закрыть Диспетчер серверов, запишите путь, указанный в текстовом поле "Папка доменов". При подключении к серверу GlassFish в среде IDE фактически подключение выполняется к _экземпляру_ сервера приложений. Каждый экземпляр запускает приложения в уникальном домене, а в поле "Имя домена" указано имя используемого сервером домена. Как видно на рисунке выше, файл JAR драйвера должен находиться в `domain1`. Это домен по умолчанию, созданный при установке сервера GlassFish.
+
+[start=4]
+. Нажмите кнопку "Закрыть", чтобы выйти из Диспетчера серверов.
+
+[start=5]
+. На компьютере перейдите к каталогу установки GlassFish и войдите в подпапку `domains` > `domain1` > `lib`. Поскольку проект IFPWAFCAD уже должен быть развернут на сервере, должен отображаться файл `mysql-connector-java-5.1.6-bin.jar`. Если файл JAR драйвера не отображается, выполните следующий шаг.
+
+[start=6]
+. Разверните проект на сервере. В окне 'Проекты' среды IDE выберите 'Развернуть' в контекстном меню узла проекта. Ход выполнения можно видеть в окне "Вывод" среды IDE (CTRL+4; &#8984+4 для Mac). В окне "Вывод" указывается, что драйвер MySQL развернут в местоположении на сервере GlassFish.
+
image::images/output-window.png[title="В окне вывода указывается, что драйвер MySQL был развернут"]
+
При возврате в подпапку `domain1/lib` на компьютере видно, что файл `mysql-connector-java-5.1.6.x-bin.jar` добавлен автоматически.
@@ -501,17 +566,23 @@
Для динамического отображения содержимого формы на странице `index.jsp` необходимо получить доступ ко всем `именам` из таблицы базы данных "Subject":
1. Наведите курсор мыши на элемент "Отчет БД" в окне "Палитра".
+
image::images/db-report.png[title="Введите 'db' и нажмите Ctrl-Пробел для доступа к фрагментам JSTL, связанных с базами данных"]
Для элемента "Отчет БД" при создании запроса SQL используется тег `<sql:query>`, после чего с помощью тега `<c:forEach>` обрабатывается `resultset` запроса, а затем выполняется вывод извлеченных данных.
-2. Установите курсор над объявлением `<%@page ... %>` (строка 7) и дважды щелкните элемент "Отчет БД" в окне "Палитра". В открывшемся диалоговом окне введите следующие подробные сведения:
+
+[start=2]
+. Установите курсор над объявлением `<%@page ... %>` (строка 7) и дважды щелкните элемент "Отчет БД" в окне "Палитра". В открывшемся диалоговом окне введите следующие подробные сведения:
* *Имя переменной:* `subjects`
* *Контекст:* `страница`
* *Источник данных:* `jdbc/IFPWAFCAD`
* *Оператор запроса:* `SELECT subject_id, name FROM Subject`
+
image::images/insert-db-report.png[title="Используйте диалоговое окно 'Вставить отчет базы данных' для указания сведения, связанных с запросом"]
-3. Нажмите кнопку "ОК". В файле `index.jsp` создается следующее содержимое. Новое содержимое выделено *полужирным шрифтом*.
+
+[start=3]
+. Нажмите кнопку "ОК". В файле `index.jsp` создается следующее содержимое. Новое содержимое выделено *полужирным шрифтом*.
[source,xml]
----
@@ -549,7 +620,9 @@
"http://www.w3.org/TR/html4/loose.dtd">
----
Обратите внимание на то, что в среде IDE автоматически добавлены директивы `taglib`, необходимые для тегов JSTL, используемых в созданном содержимом, (`<sql:query>` и `<c:forEach>`). Директива `taglib` объявляет, что на странице JSP используются пользовательские теги (JSTL), указывает библиотеку тегов, которая их определяет, а также префикс тега.
-4. Запустите проект, чтобы проверить его отображение в браузере. Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите "Выполнить".
+
+[start=4]
+. Запустите проект, чтобы проверить его отображение в браузере. Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите "Выполнить".
При выборе "Выполнить", IDE развертывает проект на сервере GlassFish, страница индексов компилируется в сервлет, а страница приветствия открывается в браузере по умолчанию. Код, созданный на основе элемента "Отчет БД", определяет следующую таблицу на странице приветствия.
@@ -559,8 +632,12 @@
В следующих шагах рассматривается интеграция созданного кода в раскрывающийся список HTML, созданный выше при работе с данным учебным курсом.
-5. Проверьте данные столбцов в созданном коде. Используется два тега `<c:forEach>`, причем один из них вставляется в другой. В результате контейнер JSP (сервер GlassFish) выполняет цикл по всем строкам таблицы с циклическим прохождением всех столбцов. Аналогично отображаются данные для всей таблицы.
-6. Интегрируйте теги `<c:forEach>` в форму HTML следующим образом. Значение каждого элемента изменяется на `subject_id`, а текст вывода - на `name`, как записано в базе данных. (Изменения выделяются *полужирным шрифтом*).
+
+[start=5]
+. Проверьте данные столбцов в созданном коде. Используется два тега `<c:forEach>`, причем один из них вставляется в другой. В результате контейнер JSP (сервер GlassFish) выполняет цикл по всем строкам таблицы с циклическим прохождением всех столбцов. Аналогично отображаются данные для всей таблицы.
+
+[start=6]
+. Интегрируйте теги `<c:forEach>` в форму HTML следующим образом. Значение каждого элемента изменяется на `subject_id`, а текст вывода - на `name`, как записано в базе данных. (Изменения выделяются *полужирным шрифтом*).
[source,xml]
----
@@ -595,7 +672,9 @@
Во всех случаях теги `<c:forEach>` циклически обрабатывает значения `subject_id` и `name` из запроса SQL со вставкой каждой пары в теги HTML `<option>`. Таким образом раскрывающийся список формы заполняется данными.
-7. Удалите таблицу, созданную из элемента "Отчет БД". (Удаление показано ниже *[.line-through]#перечеркнутым текстом#*.)
+
+[start=7]
+. Удалите таблицу, созданную из элемента "Отчет БД". (Удаление показано ниже *[.line-through]#перечеркнутым текстом#*.)
[source,xml]
----
@@ -633,8 +712,12 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
----
-8. Сохраните изменения (CTRK+S; &#8984+S в Mac OS).
-9. Обновите страницу приветствия проекта в браузере.
+
+[start=8]
+. Сохраните изменения (CTRK+S; &#8984+S в Mac OS).
+
+[start=9]
+. Обновите страницу приветствия проекта в браузере.
Заметим, что раскрывающийся список в браузере теперь содержит названия тем, полученные из базы данных.
@@ -651,8 +734,11 @@
* *Контекст:* `страница`
* *Источник данных:* `jdbc/IFPWAFCAD`
* *Оператор запроса:* `SELECT * FROM Subject, Counselor WHERE Counselor.counselor_id = Subject.counselor_idfk AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>`
+
image::images/insert-db-query2.png[title="Используйте диалоговое окно 'Вставить запрос базы данных' для указания сведения, связанных с запросом"]
-3. Нажмите кнопку "ОК". В файле `response.jsp` создается следующее содержимое. Новое содержимое выделено *полужирным шрифтом*.
+
+[start=3]
+. Нажмите кнопку "ОК". В файле `response.jsp` создается следующее содержимое. Новое содержимое выделено *полужирным шрифтом*.
[source,xml]
----
@@ -675,7 +761,9 @@
"http://www.w3.org/TR/html4/loose.dtd">
----
Обратите внимание на то, что в среде IDE автоматически добавлена директива `taglib` для тега `<sql:query>`. Также отметьте, что непосредственно в запросе использовался тег `<sql:param>`. Поскольку для этого запроса используется значение `subject_id`, отправленное с `index.jsp`, извлечь это значение можно с помощью оператора EL (язык выражений) в форме `${param.subject_id}`, а затем передать его для тега `<sql:param>`. В этом случае его можно использовать вместо вопросительного знака SQL (`?`) во время выполнения.
-4. Используйте тег `<c:set>` для установки переменной, соответствующей первой записи (строке) `resultset`, возвращенного из запроса. Новое содержимое выделено *полужирным шрифтом*.
+
+[start=4]
+. Используйте тег `<c:set>` для установки переменной, соответствующей первой записи (строке) `resultset`, возвращенного из запроса. Новое содержимое выделено *полужирным шрифтом*.
[source,xml]
----
@@ -689,7 +777,9 @@
*<c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>*
----
Несмотря на то, что возвращенный из запроса `resultset` должен содержать только одну запись, этот шаг является обязательным, поскольку для страницы необходимо обеспечить доступ к значениям в записи с помощью операторов EL (язык выражений). Вспомните, что на странице `index.jsp` можно было получить доступ к значениям из `resultset` просто посредством тега `<c:forEach>`. Однако тег `<c:forEach>` функционирует путем настройки переменной для строк из запроса, что позволяет извлекать значения путем включения переменной строки в операторы EL.
-5. Добавьте директиву `taglib` для `базовой` библиотеки JSTL файла. Это обеспечит распознавание тега `<c:set>`. Новое содержимое выделено *полужирным шрифтом*.
+
+[start=5]
+. Добавьте директиву `taglib` для `базовой` библиотеки JSTL файла. Это обеспечит распознавание тега `<c:set>`. Новое содержимое выделено *полужирным шрифтом*.
[source,java]
----
@@ -697,7 +787,9 @@
*<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>*
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
----
-6. В разметке HTML замените все местозаполнители кодом операторов EL с отображением данных из переменной `counselorDetails`. (Изменения выделены ниже *полужирным шрифтом*):
+
+[start=6]
+. В разметке HTML замените все местозаполнители кодом операторов EL с отображением данных из переменной `counselorDetails`. (Изменения выделены ниже *полужирным шрифтом*):
[source,xml]
----
@@ -742,7 +834,7 @@
Процесс создания приложения завершен. Попробуйте снова запустить его для просмотра результата в браузере. Обратите внимание на то, что благодаря функции NetBeans "Компиляция при сохранении" специально выполнять компиляцию или повторное развертывание приложения не требуется. При выполнении проекта развертывание гарантированно содержит самые последние изменения.
-Нажмите кнопку 'Запустить проект' (image::images/run-project-btn.png[]) на главной панели инструментов. В браузере по умолчанию среды IDE открывается страница `index.jsp.`.
+Нажмите кнопку 'Запустить проект' (image:images/run-project-btn.png[]) на главной панели инструментов. В браузере по умолчанию среды IDE открывается страница `index.jsp.`.
Когда в браузере отображена страница `index.jsp`, выберите тему из раскрывающегося списка и нажмите кнопку `submit`. Выполняется переадресация на страницу `response.jsp`, отображающую подробные сведения в соответствии с выбором.
@@ -770,10 +862,13 @@
В среде IDE в окне "Службы" (CTRL+5; &#8984+5 для Mac) проверьте функционирование сервера MySQL, а также доступность `MyNewDatabase` и наличие в ней соответствующих табличных данных.
* Для подключения к серверу баз данных MySQL щелкните правой кнопкой мыши узел сервера MySQL и выберите 'Подключение'.
-* Если узел подключения ( image::images/db-connection-node.png[] ) для `MyNewDatabase` не отображается в окне 'Службы' можно создать подключение, щелкнув правой кнопкой мыши узел драйвера MySQL ( image::images/driver-node.png[] ) и выбрав 'Подключение с помощью'. В появившемся диалоговом окне укажите требуемые подробные сведения.
+* Если узел подключения ( image:images/db-connection-node.png[] ) для `MyNewDatabase` не отображается в окне 'Службы' можно создать подключение, щелкнув правой кнопкой мыши узел драйвера MySQL ( image:images/driver-node.png[] ) и выбрав 'Подключение с помощью'. В появившемся диалоговом окне укажите требуемые подробные сведения.
+
image::images/new-db-connection-dialog.png[title="Установите подключение к базе данных в среде IDE с помощью диалогового окна 'Создать подключение к базе данных'"]
+
[tips]#Поля в диалоговом окне "Новое подключение к базе данных" зеркально отражают строку URL в параметре "Показать URL JDBC". Таким образом, если известен URL (например, `jdbc:mysql://localhost:3306/MyNewDatabase`), можно вставить его в поле "Показать URL JDBC". При этом остальные поля заполняются автоматически.#
-* Чтобы убедиться, что таблицы `Subject` и `Counselor` существуют и содержат образцы данных, разверните узел подключения `MyNewDatabase`( image::images/db-connection-node.png[] ) и найдите узел каталога `MyNewDatabase` ( image::images/db-catalog-node.png[] ). Для просмотра существующих таблиц разверните узел каталога. Табличные данные можно просмотреть, щелкнув правой кнопкой мыши узел таблицы и выбрав 'Просмотреть данные'.
+* Чтобы убедиться, что таблицы `Subject` и `Counselor` существуют и содержат образцы данных, разверните узел подключения `MyNewDatabase`( image:images/db-connection-node.png[] ) и найдите узел каталога `MyNewDatabase` ( image:images/db-catalog-node.png[] ). Для просмотра существующих таблиц разверните узел каталога. Табличные данные можно просмотреть, щелкнув правой кнопкой мыши узел таблицы и выбрав 'Просмотреть данные'.
+
image::images/services-window-view-data.png[title="Просмотрите данные таблицы, выбрав 'Просмотреть данные' в контекстном меню узла таблицы баз данных"]
@@ -821,8 +916,11 @@
3. При отображении соответствующего запроса введите имя пользователя и пароль. Имя пользователя и пароль можно посмотреть в Диспетчере серверов.
4. В дереве в левой части консоли разверните узел "Ресурсы > JDBC > Пулы подключений > `IfpwafcadPool`". В главном окне отображаются подробные сведения о пуле подключений `IfpwafcadPool`.
5. Нажмите кнопку "Ping". Если пул подключений настроен правильно, отображается сообщение `Ping Succeeded`.
+
image::images/ping-succeeded.png[title="Проверьте пул подключений, щелкнув 'Ping' на консоли администрирования сервера GlassFish"]
-6. Если выполнение ping-тестирования завершается неуспешно, откройте вкладку "Дополнительные свойства" для проверки правильности настройки указанных значений свойств.
+
+[start=6]
+. Если выполнение ping-тестирования завершается неуспешно, откройте вкладку "Дополнительные свойства" для проверки правильности настройки указанных значений свойств.
link:/about/contact_form.html?to=3&subject=Feedback:%20Creating%20Web%20App%20MySQL[+Мы ждем ваших отзывов+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_zh_CN.asciidoc
index db26af8..adb97bc 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/mysql-webapp_zh_CN.asciidoc
@@ -79,12 +79,12 @@
为了实现上述方案，您将为一个假想的组织 IFPWAFCAD（即 International Former Professional Wrestlers' Association for Counseling and Development，国际前职业摔跤咨询与发展协会）开发一个简单的应用程序。
-==== index.jsp
+=== index.jsp
image::images/index-page.png[title="浏览器中显示的 index.jsp"]
-==== response.jsp
+=== response.jsp
image::images/response-page.png[title="浏览器中显示的 response.jsp"]
@@ -96,23 +96,33 @@
首先，在 IDE 中创建一个新的 Java Web 项目：
1. 从主菜单中，选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N 组合键；在 Mac 上为 ⌘-Shift-N 组合键）。选择 "Java Web" 类别，然后选择 "Web Application"（Web 应用程序）。单击 "Next"（下一步）。
+
image::images/new-project.png[title="使用 IDE 的新建项目向导创建新项目"]
使用新建项目向导，可以在标准 IDE 项目中创建空的 Web 应用程序。标准项目使用 IDE 构建的 Ant 构建脚本来编译、部署和运行应用程序。
-2. 在 "Project Name"（项目名称）中，输入 *IFPWAFCAD*。同时，指定项目在计算机上的位置。（默认情况下，IDE 会将项目置于主目录下的 `NetBeansProjects` 文件夹中。）单击 "Next"（下一步）。
-3. 在 "Server and Settings"（服务器和设置）面板中，指定 GlassFish Server 作为用于运行应用程序的服务器。
+
+[start=2]
+. 在 "Project Name"（项目名称）中，输入 *IFPWAFCAD*。同时，指定项目在计算机上的位置。（默认情况下，IDE 会将项目置于主目录下的 `NetBeansProjects` 文件夹中。）单击 "Next"（下一步）。
+
+[start=3]
+. 在 "Server and Settings"（服务器和设置）面板中，指定 GlassFish Server 作为用于运行应用程序的服务器。
*注：*如果您安装了 Java 版本的 link:https://netbeans.org/downloads/index.html[+NetBeans IDE+]，则 GlassFish Server 将显示在 "Server"（服务器）下拉字段中。由于 GlassFish Server 包含在下载中，因此会在 IDE 中自动进行注册。如果要对此项目使用其他服务器，请单击位于 "Server"（服务器）下拉字段旁边的 "Add"（添加）按钮，然后在 IDE 中注册其他服务器。但是，使用 GlassFish Server 之外的服务器不在本教程的讲述范围之内。
-4. 在 "Java EE Version"（Java EE 版本）字段中，选择 *Java EE 5*。
+
+[start=4]
+. 在 "Java EE Version"（Java EE 版本）字段中，选择 *Java EE 5*。
+
image::images/server-settings.png[title="在新建 Web 应用程序向导中指定服务器设置"]
Java EE 6 和 Java EE 7 Web 项目不需要使用 `web.xml` 部署描述符，且 NetBeans 项目模板不在 Java EE 6 和 Java EE 7 项目中包含 `web.xml` 文件。但是，本教程介绍了如何在部署描述符中声明数据源，此操作不依赖于任何特定于 Java EE 6 或 Java EE 7 的功能，因此可以将项目版本设置为 Java EE 5。
*注：*您同样可以将项目版本设置为 Java EE 6 或 Java EE 7，然后创建 `web.xml` 部署描述符。（从新建文件向导中选择 "Web" 类别，然后选择 "Standard Deployment Descriptor"（标准部署描述符）。）
-5. 单击 "Finish"（完成）。IDE 将为整个应用程序创建一个项目模板，并在编辑器中打开一个空的 JSP 页 (`index.jsp`)。`index.jsp` 文件充当应用程序的欢迎页面。
+
+[start=5]
+. 单击 "Finish"（完成）。IDE 将为整个应用程序创建一个项目模板，并在编辑器中打开一个空的 JSP 页 (`index.jsp`)。`index.jsp` 文件充当应用程序的欢迎页面。
[[prepareInterface]]
@@ -133,16 +143,24 @@
1. 在编辑器中，将 `<title>` 标记之间的文本更改为：`IFPWAFCAD Homepage`。
2. 将 `<h1>` 标记之间的文本更改为：`Welcome to IFPWAFCAD, the International Former Professional Wrestlers' Association for Counseling and Development!`。
3. 通过从主菜单中选择 "Window"（窗口）> "Palette"（组件面板）（Ctrl-Shift-8 组合键；在 Mac 上为 ⌘-Shift-8 组合键）打开 IDE 的 "Palette"（组件面板）。将指针悬停在 "HTML" 类别中的 "Table"（表）图标上，并注意为该项显示的默认代码片段。
+
image::images/palette.png[title="悬停在某一项之上时组件面板显示代码片段"]
+
[tips]#您可以根据自己的喜好配置 "Palette"（组件面板）- 在 "Palette"（组件面板）中单击鼠标右键并选择 "Show Big Icons"（显示大图标）和 "Hide Item Names"（隐藏项名称）可使其显示上图所示的内容。#
-4. 将光标指针放在紧靠 `<h1>` 标记后面的位置。（该位置即是您要实现新的 HTML 表的位置。）然后，在 "Palette"（组件面板）中双击 "Table"（表）图标。
-5. 在显示的 "Insert Table"（插入表格）对话框中，指定以下值，然后单击 "OK"（确定）：
+
+[start=4]
+. 将光标指针放在紧靠 `<h1>` 标记后面的位置。（该位置即是您要实现新的 HTML 表的位置。）然后，在 "Palette"（组件面板）中双击 "Table"（表）图标。
+
+[start=5]
+. 在显示的 "Insert Table"（插入表格）对话框中，指定以下值，然后单击 "OK"（确定）：
* *Rows（行）：*2
* *Columns（列）：*1
* *Border Size（边框大小）：*0
此时会生成 HTML 表代码并已添加到您的页面中。
-6. 将以下内容添加到表标题和第一个表行的单元格中（新内容以*粗体*显示）：
+
+[start=6]
+. 将以下内容添加到表标题和第一个表行的单元格中（新内容以*粗体*显示）：
[source,xml]
----
@@ -159,9 +177,14 @@
professional wrestler in your area, select a subject below:*</td>
</tr>
----
-7. 在底部的表行中，插入一个 HTML 窗体。为此，请将光标置于第二对 `<td>` 标记之间，然后在 "Palette"（组件面板）中双击 "HTML form"（HTML 窗体）(image::images/html-form-icon.png[]) 图标。在 "Insert Form"（插入窗体）对话框的 "Action"（操作）文本字段中，键入 `response.jsp`，然后单击 "OK"（确定）。
+
+[start=7]
+. 在底部的表行中，插入一个 HTML 窗体。为此，请将光标置于第二对 `<td>` 标记之间，然后在 "Palette"（组件面板）中双击 "HTML form"（HTML 窗体）(image:images/html-form-icon.png[]) 图标。在 "Insert Form"（插入窗体）对话框的 "Action"（操作）文本字段中，键入 `response.jsp`，然后单击 "OK"（确定）。
+
image::images/insert-form.png[title="在 "Insert Form"（插入窗体）对话框中指定窗体设置"]
-8. 在 `<form>` 标记之间键入以下内容（新内容以*粗体*显示）：
+
+[start=8]
+. 在 `<form>` 标记之间键入以下内容（新内容以*粗体*显示）：
[source,xml]
----
@@ -174,13 +197,21 @@
</td>
</tr>
----
-9. 按 Enter 键将在您刚刚添加的内容之后添加一空行，然后双击 "Palette"（组件面板）中的 "Drop-down List"（下拉列表）以打开 "Insert Drop-down"（插入下拉列表）对话框。
-10. 在 "Insert Drop-down"（插入下拉列表）对话框的 "Name"（名称）文本字段中键入 `subject_id`，然后单击 "OK"（确定）。请注意，下拉列表的代码片段会添加到窗体中。
+
+[start=9]
+. 按 Enter 键将在您刚刚添加的内容之后添加一空行，然后双击 "Palette"（组件面板）中的 "Drop-down List"（下拉列表）以打开 "Insert Drop-down"（插入下拉列表）对话框。
+
+[start=10]
+. 在 "Insert Drop-down"（插入下拉列表）对话框的 "Name"（名称）文本字段中键入 `subject_id`，然后单击 "OK"（确定）。请注意，下拉列表的代码片段会添加到窗体中。
下拉列表的选项数目当前并不重要。稍后，我们将在本教程中添加动态生成选项（基于从 Subject 数据库表收集的数据）的 JSTL 标记。
-11. 就在您刚刚添加的下拉列表后的位置点处添加 "submit"（提交）按钮项 (image::images/submit-button.png[])。可以使用 "Palette"（组件面板）执行此操作，也可以调用编辑器的代码完成（如上一步中所述）。在 "Insert button"（插入按钮）对话框的 "Label"（标签）和 "Name"（名称）字段中均输入 `submit`，然后单击 "OK"（确定）。
-12. 要设置代码的格式，请在编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）（Alt-Shift-F 组合键；在 Mac 上为 Ctrl-Shift-F 组合键）。系统会为您的代码自动设置格式，并且类似于以下内容：
+
+[start=11]
+. 就在您刚刚添加的下拉列表后的位置点处添加 "submit"（提交）按钮项 (image:images/submit-button.png[])。可以使用 "Palette"（组件面板）执行此操作，也可以调用编辑器的代码完成（如上一步中所述）。在 "Insert button"（插入按钮）对话框的 "Label"（标签）和 "Name"（名称）字段中均输入 `submit`，然后单击 "OK"（确定）。
+
+[start=12]
+. 要设置代码的格式，请在编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）（Alt-Shift-F 组合键；在 Mac 上为 Ctrl-Shift-F 组合键）。系统会为您的代码自动设置格式，并且类似于以下内容：
[source,xml]
----
@@ -230,9 +261,14 @@
1. 在 "Projects"（项目）窗口中右键单击 IFPWAFCAD 项目节点，然后选择 "New"（新建）> "JSP"。“新建 JSP 文件”对话框打开。
2. 在 JSP "File Name"（文件名）字段中，输入 `response`。请注意，当前为 "Location"（位置）字段选择了 "Web Pages"（Web 页），这表示将在项目的 `web` 目录中创建该文件。此目录同样是 `index.jsp` 欢迎页驻留的位置。
3. 接受任何其他默认设置，然后单击 "Finish"（完成）。新的 `response.jsp` 页面模板生成，并在编辑器中打开。新的 JSP 节点还会在 "Projects"（项目）窗口的 "Web Pages"（Web 页）下显示。
+
image::images/response-jsp-node.png[title="response.jsp 节点显示在 "Projects"（项目）窗口中"]
-4. 在编辑器中，将标题更改为：`IFPWAFCAD - {placeholder}`。
-5. 删除 `<body>` 标记之间的 `<h1>Hello World!</h1>` 一行，然后复制下面的 HTML 表并将其粘贴到页面主体中：
+
+[start=4]
+. 在编辑器中，将标题更改为：`IFPWAFCAD - {placeholder}`。
+
+[start=5]
+. 删除 `<body>` 标记之间的 `<h1>Hello World!</h1>` 一行，然后复制下面的 HTML 表并将其粘贴到页面主体中：
[source,xml]
----
@@ -277,7 +313,7 @@
创建简单的样式表，以便增强 Web 界面的显示。本教程假定您了解样式规则的作用方式，以及它们影响 `index.jsp` 和 `response.jsp` 中相应 HTML 元素的方式。
-1. 通过按 IDE 主工具栏中的 "New File"（新建文件）(image::images/new-file-btn.png[]) 按钮打开新建文件向导。选择 "Web" 类别，然后选择 "Cascading Style Sheet"（级联样式表）并单击 "Next"（下一步）。
+1. 通过按 IDE 主工具栏中的 "New File"（新建文件）(image:images/new-file-btn.png[]) 按钮打开新建文件向导。选择 "Web" 类别，然后选择 "Cascading Style Sheet"（级联样式表）并单击 "Next"（下一步）。
2. 键入 `style` 作为 CSS 文件名，并单击 "Finish"（完成）。IDE 会创建一个空 CSS 文件，并将其放置在 `index.jsp` 和 `response.jsp` 所在的同一个项目位置。请注意，`style.css` 的节点现在显示在 "Projects"（项目）窗口的项目中，并且该文件在编辑器中打开。
3. 在编辑器中，将以下内容添加到 `style.css` 文件中：
@@ -327,7 +363,9 @@
text-decoration: underline;
}
----
-4. 将样式表链接到 `index.jsp` 和 `response.jsp`。在这两个页面中，将以下行添加到 `<head>` 标记之间：
+
+[start=4]
+. 将样式表链接到 `index.jsp` 和 `response.jsp`。在这两个页面中，将以下行添加到 `<head>` 标记之间：
[source,java]
----
@@ -380,22 +418,35 @@
下面的步骤介绍了如何声明连接池以及依赖于连接池的数据源。使用 NetBeans“JDBC 资源”向导，可以执行这两个操作。
-1. 通过按 IDE 主工具栏中的 "New File"（新建文件）(image::images/new-file-btn.png[]) 按钮打开新建文件向导。选择 "GlassFish" 服务器类别，然后选择 "JDBC Resource"（JDBC 资源）并单击 "Next"（下一步）。
+1. 通过按 IDE 主工具栏中的 "New File"（新建文件）(image:images/new-file-btn.png[]) 按钮打开新建文件向导。选择 "GlassFish" 服务器类别，然后选择 "JDBC Resource"（JDBC 资源）并单击 "Next"（下一步）。
2. 在步骤 2 "General Attributes"（常规属性）中，选择 "Create New JDBC Connection Pool"（创建新的 JDBC 连接池）选项，然后在 "JNDI Name"（JNDI 名称）文本字段中键入 *jdbc/IFPWAFCAD*。
+
image::images/jdbc-resource-wizard.png[title="在 JDBC 资源向导中指定数据源设置"]
+
[tips]#JDBC 数据源依赖于 link:http://www.oracle.com/technetwork/java/jndi/index.html[+JNDI+]（Java Naming and Directory Interface，Java 命名和目录接口）。JNDI API 为应用程序查找和访问数据源提供了统一的方式。有关详细信息，请参见 link:http://docs.oracle.com/javase/jndi/tutorial/[+JNDI 教程+]。#
-3. （可选）为数据源添加描述。例如，键入：`Accesses the database that provides data for the IFPWAFCAD application`。
-4. 单击 "Next"（下一步），然后再次单击 "Next"（下一步）以跳过步骤 3“附加属性”。
-5. 在步骤 4 中，键入 *IfpwafcadPool* 作为 JDBC 连接池名称。确保 "Extract from Existing Connection"（从现有连接中提取）选项已选中，然后从下拉列表中选择 `jdbc:mysql://localhost:3306/MyNewDatabase`。单击 "Next"（下一步）。
+
+[start=3]
+. （可选）为数据源添加描述。例如，键入：`Accesses the database that provides data for the IFPWAFCAD application`。
+
+[start=4]
+. 单击 "Next"（下一步），然后再次单击 "Next"（下一步）以跳过步骤 3“附加属性”。
+
+[start=5]
+. 在步骤 4 中，键入 *IfpwafcadPool* 作为 JDBC 连接池名称。确保 "Extract from Existing Connection"（从现有连接中提取）选项已选中，然后从下拉列表中选择 `jdbc:mysql://localhost:3306/MyNewDatabase`。单击 "Next"（下一步）。
+
image::images/jdbc-resource-wizard2.png[title="在 JDBC 资源向导中指定连接池设置"]
-*注：*该向导会检测已在 IDE 中设置的任何数据库连接。所以，此时您必须已创建 `MyNewDatabase` 数据库的连接。您可以通过打开 "Services"（服务）窗口（Ctrl-5；在 Mac 上为 ⌘-5）并在 "Databases"（数据库）类别下查找连接节点 (image::images/connection-node-icon.png[])，验证已创建的连接。
-6. 在步骤 5 中，在 "Resource Type"（资源类型）下拉列表中选择 `javax.sql.ConnectionPoolDataSource`。
+*注：*该向导会检测已在 IDE 中设置的任何数据库连接。所以，此时您必须已创建 `MyNewDatabase` 数据库的连接。您可以通过打开 "Services"（服务）窗口（Ctrl-5；在 Mac 上为 ⌘-5）并在 "Databases"（数据库）类别下查找连接节点 (image:images/connection-node-icon.png[])，验证已创建的连接。
+
+[start=6]
+. 在步骤 5 中，在 "Resource Type"（资源类型）下拉列表中选择 `javax.sql.ConnectionPoolDataSource`。
请注意 IDE 将从上一步中指定的数据库连接中提取信息，并为新连接池设置名称-值属性。
image::images/jdbc-resource-wizard3.png[title="默认值基于从所选数据库连接提取的信息"]
-7. 单击 "Finish"（完成）。该向导生成 `glassfish-resources.xml` 文件，其中包含数据源和所指定的连接池的相应条目。
+
+[start=7]
+. 单击 "Finish"（完成）。该向导生成 `glassfish-resources.xml` 文件，其中包含数据源和所指定的连接池的相应条目。
在 "Projects"（项目）窗口中，可以打开在 "Server Resources"（服务器资源）节点下创建的 `glassfish-resources.xml` 文件，请注意，在 `<resources>` 标记中已声明数据源和连接池包含您以前指定的值。
@@ -403,6 +454,7 @@
1. 在 "Projects"（项目）窗口中，右键单击 "IFPWAFCAD" 项目节点，然后选择 "Deploy"（部署）。如果尚未运行服务器，则会启动服务器；同时，会编译项目并将其部署到服务器。
2. 打开 "Services"（服务）窗口（Ctrl-5 组合键；在 Mac 上为 ⌘-5 组合键），然后展开 "Servers"（服务器）> "GlassFish" > "Resources"（资源）> "JDBC" 下的 "JDBC Resources"（JDBC 资源）和 "Connection Pools"（连接池）节点。请注意，新数据源和连接池现在都已显示：
+
image::images/services-window-glassfish.png[title=""Services"（服务）窗口中显示在新数据源和连接池"]
@@ -429,7 +481,9 @@
现在，新资源会列在 "Resource References"（资源引用）标题下面。
-6. 要验证该资源现在是否已添加到 `web.xml` 文件中，请单击编辑器顶部的 "Source"（源）标签。请注意，现在包含了以下 <`resource-ref`> 标记。
+
+[start=6]
+. 要验证该资源现在是否已添加到 `web.xml` 文件中，请单击编辑器顶部的 "Source"（源）标签。请注意，现在包含了以下 <`resource-ref`> 标记。
[source,xml]
----
@@ -453,12 +507,23 @@
1. 选择 "Tools"（工具）> "Servers"（服务器）以打开服务器管理器。在左窗格中选择 GlassFish Server。
2. 在主窗格中，选择 "Enable JDBC Driver Deployment"（启用 JDBC 驱动程序部署）选项。
+
image::images/servers-window.png[title="使用 "JDBC Driver Deployment"（JDBC 驱动程序部署）选项可进行自动驱动程序部署"]
-3. 在关闭服务器管理器之前，请记录 "Domains"（域）文件夹文本字段中指示的路径。在连接 IDE 中的 GlassFish Server 时，实际上是连接到应用服务器的_实例_。每个实例均会在唯一的域中运行应用程序，"Domain Name"（域名）字段指示了服务器所使用的域名。如上图所示，驱动程序 JAR 文件应该位于 `domain1` 中，它是安装 GlassFish Server 时创建的默认域。
-4. 单击 "Close"（关闭）退出服务器管理器。
-5. 在计算机上，导航至 GlassFish Server 安装目录，并向下浏览到 `domains` > `domain1` > `lib` 子文件夹。您应该已将 IFPWAFCAD 项目部署到服务器，因此应会看到 `mysql-connector-java-5.1.6-bin.jar` 文件。如果没有看到驱动程序 JAR 文件，请执行下列步骤。
-6. 将您的项目部署到服务器。在 IDE 的 "Projects"（项目）窗口中，从项目节点的右键单击菜单中选择 "Deploy"（部署）。在 IDE 的 "Output"（输出）窗口中可以查看进度（Ctrl-4 组合键；在 Mac 上为 ⌘-4 组合键）。输出会提示 MySQL 驱动程序已部署到 GlassFish Server 中的某个位置。
+
+[start=3]
+. 在关闭服务器管理器之前，请记录 "Domains"（域）文件夹文本字段中指示的路径。在连接 IDE 中的 GlassFish Server 时，实际上是连接到应用服务器的_实例_。每个实例均会在唯一的域中运行应用程序，"Domain Name"（域名）字段指示了服务器所使用的域名。如上图所示，驱动程序 JAR 文件应该位于 `domain1` 中，它是安装 GlassFish Server 时创建的默认域。
+
+[start=4]
+. 单击 "Close"（关闭）退出服务器管理器。
+
+[start=5]
+. 在计算机上，导航至 GlassFish Server 安装目录，并向下浏览到 `domains` > `domain1` > `lib` 子文件夹。您应该已将 IFPWAFCAD 项目部署到服务器，因此应会看到 `mysql-connector-java-5.1.6-bin.jar` 文件。如果没有看到驱动程序 JAR 文件，请执行下列步骤。
+
+[start=6]
+. 将您的项目部署到服务器。在 IDE 的 "Projects"（项目）窗口中，从项目节点的右键单击菜单中选择 "Deploy"（部署）。在 IDE 的 "Output"（输出）窗口中可以查看进度（Ctrl-4 组合键；在 Mac 上为 ⌘-4 组合键）。输出会提示 MySQL 驱动程序已部署到 GlassFish Server 中的某个位置。
+
image::images/output-window.png[title=""Output"（输出）窗口指示已部署 MySQL 驱动程序"]
+
现在，如果返回到计算机上的 `domain1/lib` 子文件夹，则会看到已自动添加了 `mysql-connector-java-5.1.6-bin.jar` 文件。
@@ -502,17 +567,23 @@
要在 `index.jsp` 中动态显示窗体的内容，您需要从 `Subject` 数据库表访问所有 `name`。
1. 将鼠标悬停在 "Palette"（组件面板）中的 "DB Report"（数据库报告）项上。
+
image::images/db-report.png[title="键入 "db" 并按 Ctrl-空格键以访问特定于数据库的 JSTL 代码片段"]
"DB Report"（数据库报告）项使用 `<sql:query>` 标记创建 SQL 查询，然后使用 `<c:forEach>` 标记对查询的 `resultset` 执行循环操作并输出检索到的数据。
-2. 将光标置于 `<%@page ... %>` 声明（第 7 行）上方，然后双击 "Palette"（组件面板）中的 "DB Report"（数据库报告）项。在显示的对话框中，输入以下详细信息：
+
+[start=2]
+. 将光标置于 `<%@page ... %>` 声明（第 7 行）上方，然后双击 "Palette"（组件面板）中的 "DB Report"（数据库报告）项。在显示的对话框中，输入以下详细信息：
* *Variable Name（变量名称）：*`subjects`
* *Scope（范围）：*`page`
* *"Data Source（数据源）：*`jdbc/IFPWAFCAD`
* *Query Statement（查询语句）：*`SELECT subject_id, name FROM Subject`
+
image::images/insert-db-report.png[title="使用 "Insert DB Report"（插入数据库报告）对话框指定特定于查询的详细信息"]
-3. 单击 "OK"（确定）。在 `index.jsp` 文件中生成以下内容。（新内容以*粗体*显示。）
+
+[start=3]
+. 单击 "OK"（确定）。在 `index.jsp` 文件中生成以下内容。（新内容以*粗体*显示。）
[source,xml]
----
@@ -550,7 +621,9 @@
"http://www.w3.org/TR/html4/loose.dtd">
----
请注意，IDE 自动添加了生成的内容中使用的 JSTL 标记（`<sql:query>` 和 `<c:forEach>`）所需的 `taglib` 指令。`taglib` 指令声明 JSP 页使用定制（即，JSTL）标记，命名用于定义这些标记的标记库，并指定其标记前缀。
-4. 运行该项目以查看其在浏览器中的显示方式。在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "Run"（运行）。
+
+[start=4]
+. 运行该项目以查看其在浏览器中的显示方式。在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "Run"（运行）。
当您选择 "Run"（运行）时，IDE 会将项目部署到 GlassFish Server，索引页将编译为 Servlet，并在默认浏览器中打开欢迎页。通过 "DB Report"（数据库报告）项生成的代码在欢迎页面中创建以下表格。
@@ -560,8 +633,12 @@
以下步骤演示了如何将生成的代码集成到您在本教程前面所创建的 HTML 下拉列表中。
-5. 检查生成的代码中的列数据。共使用了两个 `<c:forEach>` 标记；其中一个标记嵌套在另一个标记内。这导致 JSP 容器（即，GlassFish Server）对所有表行执行循环，对于每行，可对其中的所有列执行循环操作。以此方式显示整个表的数据。
-6. 将 `<c:forEach>` 标记集成到 HTML 窗体中，如下所示。根据数据库中记录的数据，每项的值将变为 `subject_id`，输出文本将变为 `name`。（所做的更改以*粗体*显示）。
+
+[start=5]
+. 检查生成的代码中的列数据。共使用了两个 `<c:forEach>` 标记；其中一个标记嵌套在另一个标记内。这导致 JSP 容器（即，GlassFish Server）对所有表行执行循环，对于每行，可对其中的所有列执行循环操作。以此方式显示整个表的数据。
+
+[start=6]
+. 将 `<c:forEach>` 标记集成到 HTML 窗体中，如下所示。根据数据库中记录的数据，每项的值将变为 `subject_id`，输出文本将变为 `name`。（所做的更改以*粗体*显示）。
[source,xml]
----
@@ -596,7 +673,9 @@
在两种情况下，`<c:forEach>` 标记都会对 SQL 查询中的所有 `subject_id` 和 `name` 值执行循环操作，并将每对值插入 HTML `<option>` 标记中。在这种方式下，窗体的下拉列表中会填入数据。
-7. 删除通过 "DB Report"（数据库报告）项生成的表。（删除的内容在下面以*[.line-through]#删除线文本#*显示。）
+
+[start=7]
+. 删除通过 "DB Report"（数据库报告）项生成的表。（删除的内容在下面以*[.line-through]#删除线文本#*显示。）
[source,xml]
----
@@ -634,8 +713,12 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
----
-8. 保存更改（Ctrl-S 组合键；在 Mac 上为 ⌘-S 组合键）。
-9. 在浏览器中刷新项目的欢迎页。
+
+[start=8]
+. 保存更改（Ctrl-S 组合键；在 Mac 上为 ⌘-S 组合键）。
+
+[start=9]
+. 在浏览器中刷新项目的欢迎页。
请注意，浏览器中的下拉列表现在包含从数据库检索到的主题名称。
@@ -652,8 +735,11 @@
* *Scope（范围）：*`page`
* *"Data Source（数据源）：*`jdbc/IFPWAFCAD`
* *Query Statement（查询语句）：*`SELECT * FROM Subject, Counselor WHERE Counselor.counselor_id = Subject.counselor_idfk AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>`
+
image::images/insert-db-query2.png[title="使用 "Insert DB Query"（插入数据库查询）对话框指定特定于查询的详细信息"]
-3. 单击 "OK"（确定）。在 `response.jsp` 文件中生成以下内容。（新内容以*粗体*显示。）
+
+[start=3]
+. 单击 "OK"（确定）。在 `response.jsp` 文件中生成以下内容。（新内容以*粗体*显示。）
[source,xml]
----
@@ -676,7 +762,9 @@
"http://www.w3.org/TR/html4/loose.dtd">
----
请注意，IDE 自动添加了 `<sql:query>` 标记所需的 `taglib` 指令。另请注意，您在查询中直接使用了 `<sql:param>` 标记。由于此查询依赖于从 `index.jsp` 提交的 `subject_id` 值，因此可以使用 `${param.subject_id}` 格式的 EL（Expression Language，表达式语言）语句提取值，然后将其传递到 `<sql:param>` 标记，以便在运行时可以使用该值替换 SQL 问号 (`?`)。
-4. 使用 `<c:set>` 标记设置与查询所返回的 `resultset` 的第一个记录（即，行）相对应的变量。（新内容以*粗体*显示。）
+
+[start=4]
+. 使用 `<c:set>` 标记设置与查询所返回的 `resultset` 的第一个记录（即，行）相对应的变量。（新内容以*粗体*显示。）
[source,xml]
----
@@ -690,7 +778,9 @@
*<c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>*
----
尽管查询所返回的 `resultset` 应仅包含一个记录，但此步骤非常有必要，因为页面需要使用 EL（Expression Language，表达式语言）语句访问记录中的值。回想一下，在 `index.jsp` 中，您使用 `<c:forEach>` 标记即可轻松访问 `resultset` 中的值。但是，`<c:forEach>` 标记的操作方式是通过为查询中包含的行设置变量，从而使您可以通过在 EL 语句中包含行变量来提取值。
-5. 将 JSTL `core` 库的 `taglib` 指令添加到文件顶部，以便可以识别 `<c:set>` 标记。（新内容以*粗体*显示。）
+
+[start=5]
+. 将 JSTL `core` 库的 `taglib` 指令添加到文件顶部，以便可以识别 `<c:set>` 标记。（新内容以*粗体*显示。）
[source,java]
----
@@ -698,7 +788,9 @@
*<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>*
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
----
-6. 在 HTML 标记中，将所有占位符替换为 EL 语句代码，该代码显示 `counselorDetails` 变量中保存的数据。（所做的更改在下面以*粗体*显示）：
+
+[start=6]
+. 在 HTML 标记中，将所有占位符替换为 EL 语句代码，该代码显示 `counselorDetails` 变量中保存的数据。（所做的更改在下面以*粗体*显示）：
[source,xml]
----
@@ -743,7 +835,7 @@
现在，您已完成该应用程序。可以尝试再次运行它以查看其在浏览器中的显示方式。请注意，由于 NetBeans 具备“在保存时编译”功能，因此您无需担心编译或重新部署应用程序的问题。运行项目时，您可以确保部署包含您的最新更改。
-单击主工具栏中的 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮。在 IDE 的默认浏览器中打开 `index.jsp` 页。
+单击主工具栏中的 "Run Project"（运行项目）(image:images/run-project-btn.png[]) 按钮。在 IDE 的默认浏览器中打开 `index.jsp` 页。
当 `index.jsp` 显示在浏览器中时，从下拉列表中选择一个主题，然后单击 `submit`。应会立即转至 `response.jsp` 页，其中显示了与您的选择相对应的详细信息。
@@ -771,10 +863,13 @@
使用 IDE 的 "Services"（服务）窗口（Ctrl-5 组合键；在 Mac 上为 ⌘-5 组合键）确保 MySQL 服务器正在运行，并且 `MyNewDatabase` 可以访问且包含相应的表数据。
* 要连接到 MySQL 数据库服务器，请右键单击 MySQL 服务器节点并选择 "Connect"（连接）。
-* 如果 `MyNewDatabase` 的连接节点 (image::images/db-connection-node.png[]) 未显示在 "Services"（服务）窗口中，您可以通过右键单击 MySQL 驱动程序节点 (image::images/driver-node.png[]) 并选择 "Connect Using"（连接设置），来创建连接。在显示的对话框中输入所需的详细信息。
+* 如果 `MyNewDatabase` 的连接节点 (image:images/db-connection-node.png[]) 未显示在 "Services"（服务）窗口中，您可以通过右键单击 MySQL 驱动程序节点 (image:images/driver-node.png[]) 并选择 "Connect Using"（连接设置），来创建连接。在显示的对话框中输入所需的详细信息。
+
image::images/new-db-connection-dialog.png[title="在 IDE 中使用 "New Database Connection"（新建数据库连接）对话框建立数据库连接"]
+
[tips]#"New Database Connection"（新建数据库连接）对话框中提供的字段是对 "Show JDBC URL"（显示 JDBC URL）选项中输入的 URL 字符串的镜像。因此，如果您知道该 URL（例如 `jdbc:mysql://localhost:3306/MyNewDatabase`），则可以将其粘贴到 "Show JDBC URL"（显示 JDBC URL）字段中，随之将会自动填充其余对话框字段。#
-* 要确保 `Subject` 和 `Counselor` 表存在且它们包含样例数据，请展开 `MyNewDatabase` 连接节点 (image::images/db-connection-node.png[]) 并找到 `MyNewDatabase` 目录节点 (image::images/db-catalog-node.png[])。展开该目录节点以查看现有表。可以通过右键单击表节点并选择 "View Data"（查看数据）来查看表数据。
+* 要确保 `Subject` 和 `Counselor` 表存在且它们包含样例数据，请展开 `MyNewDatabase` 连接节点 (image:images/db-connection-node.png[]) 并找到 `MyNewDatabase` 目录节点 (image:images/db-catalog-node.png[])。展开该目录节点以查看现有表。可以通过右键单击表节点并选择 "View Data"（查看数据）来查看表数据。
+
image::images/services-window-view-data.png[title="通过从数据库表节点的右键单击菜单中选择 "View Data"（查看数据）来查看表数据"]
@@ -822,8 +917,11 @@
3. 根据提示输入用户名和口令。可以在服务器管理器中查看用户名和口令。
4. 在控制台左侧的树中，展开 "Resources"（资源）> "JDBC" > "JDBC Connection Pools"（JDBC 连接池）> `IfpwafcadPool` 节点。`IfpwafcadPool` 连接池的详细信息将显示在主窗口中。
5. 单击 "Ping" 按钮。如果连接池设置正确，将看到 "`Ping Succeeded`" 消息。
+
image::images/ping-succeeded.png[title="通过在 GlassFish Server 管理控制台中单击 "Ping" 测试连接池"]
-6. 如果 ping 失败，请单击 "Additional Properties"（附加属性）标签，并确保所列的属性值设置正确。
+
+[start=6]
+. 如果 ping 失败，请单击 "Additional Properties"（附加属性）标签，并确保所列的属性值设置正确。
link:/about/contact_form.html?to=3&subject=Feedback:%20Creating%20Web%20App%20MySQL[+请将您的反馈意见发送给我们+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud.asciidoc
index 9af34ae..e42b1a3 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud.asciidoc
@@ -106,16 +106,24 @@
1. Open the Services window in the IDE (Window > Services or Ctrl-5).
2. Right-click the Cloud node and select Add Cloud to open the Add Cloud Provider wizard.
+
image::images/add-cloud.png[]
-3. In the Choose Cloud field, select Oracle Cloud and click Next to open the Oracle Cloud panel.
+
+[start=3]
+. In the Choose Cloud field, select Oracle Cloud and click Next to open the Oracle Cloud panel.
+
image::images/oracle-cloud1.png[]
-4. Fill in all fields. Browse for the folder containing the Oracle Java Cloud Service SDK JAR. Click Next.
+
+[start=4]
+. Fill in all fields. Browse for the folder containing the Oracle Java Cloud Service SDK JAR. Click Next.
When you click Next the IDE tests the connection to the cloud. A list of Cloud services appears if the connection is successful. Only the Oracle Cloud Remote server (Oracle WebLogic) is currently available.
*Note:* After you register an Oracle Cloud provider, you can change the Cloud details in its Properties. Open Properties by right-clicking the Oracle Cloud node and selecting Properties.
-5. Confirm that the Oracle Cloud provider is displayed in the list of Cloud resources. Click Finish.
+
+[start=5]
+. Confirm that the Oracle Cloud provider is displayed in the list of Cloud resources. Click Finish.
Oracle Cloud is now listed under the Cloud node in the Services window. You can right-click the Oracle Cloud node to open a context menu that provides commands for refreshing the list of services, opening a list of jobs and logs, removing the cloud instance or viewing the cloud's properties.
@@ -165,10 +173,16 @@
*To change a web application's server between local and Oracle Cloud:*
1. In the Projects window, right-click the application's node and select Properties.
+
image::images/project-contextmenu.png[]
-2. In the Project Properties, select the Run category.
+
+[start=2]
+. In the Project Properties, select the Run category.
+
image::images/run-properties.png[]
-3. From the Server drop-down list, select the server you want (either Oracle Cloud Remote or local Oracle WebLogic). The server must be registered in the IDE. You can add a server by right-clicking the Servers node in the Services window.
+
+[start=3]
+. From the Server drop-down list, select the server you want (either Oracle Cloud Remote or local Oracle WebLogic). The server must be registered in the IDE. You can add a server by right-clicking the Servers node in the Services window.
== Creating a Web Application
@@ -197,21 +211,47 @@
Use the HR username and password when you register the HR schema with NetBeans IDE.
-2. Create a Java Web Application using Java EE5 and your on-premises installation of WebLogic server. Enable the JSF framework for the application.
+
+[start=2]
+. Create a Java Web Application using Java EE5 and your on-premises installation of WebLogic server. Enable the JSF framework for the application.
+
image::images/crudapp-eevers.png[]
+
+
image::images/crudapp-jsf.png[]
-3. In the Projects window, right-click the project's root node and select New > Entity Classes from Database. The Entity Classes from Database wizard opens.
-4. In the Entity Classes from Database wizard, select New Data Source from the Data Source drop-down box. The Create Data Source dialog opens.
+
+[start=3]
+. In the Projects window, right-click the project's root node and select New > Entity Classes from Database. The Entity Classes from Database wizard opens.
+
+[start=4]
+. In the Entity Classes from Database wizard, select New Data Source from the Data Source drop-down box. The Create Data Source dialog opens.
+
image::images/crudapp-newdatasource.png[]
-5. Name this datasource to match the database service name in your registered Oracle Cloud account.
+
+[start=5]
+. Name this datasource to match the database service name in your registered Oracle Cloud account.
+
image::images/cloud-db-name.png[]
-6. Select the OracleXE HR database connection you created in Step 1. Click OK. The Create Data Source dialog closes.
+
+[start=6]
+. Select the OracleXE HR database connection you created in Step 1. Click OK. The Create Data Source dialog closes.
+
image::images/create-datasource.png[]
-7. In the Entity Classes from Database wizard, the Available Tables field fills with the HR schema table names. Select one of the tables, such as EMPLOYEES, and click Add. Click through the rest of the wizard, giving an arbitrary name to the package containing the entity classes and accepting all default values in other fields.
-8. In the Projects window, right-click the project's root node and select New > JSF Pages from Entity Classes. The New JSF Pages from Entity Classes wizard opens.
-9. In the Entity Classes panel, click Select All and click Next.
-10. In the Generate JSF Pages and Classes panel, give appropriate names to the packages and JSF file folder and click Finish.
-11. In the Projects window, right-click the project's root node and select Run. The IDE builds the project and deploys it to the on-premises WebLogic server. A browser opens on the project's landing page.
+
+[start=7]
+. In the Entity Classes from Database wizard, the Available Tables field fills with the HR schema table names. Select one of the tables, such as EMPLOYEES, and click Add. Click through the rest of the wizard, giving an arbitrary name to the package containing the entity classes and accepting all default values in other fields.
+
+[start=8]
+. In the Projects window, right-click the project's root node and select New > JSF Pages from Entity Classes. The New JSF Pages from Entity Classes wizard opens.
+
+[start=9]
+. In the Entity Classes panel, click Select All and click Next.
+
+[start=10]
+. In the Generate JSF Pages and Classes panel, give appropriate names to the packages and JSF file folder and click Finish.
+
+[start=11]
+. In the Projects window, right-click the project's root node and select Run. The IDE builds the project and deploys it to the on-premises WebLogic server. A browser opens on the project's landing page.
You now have a local version of a Java web application using CRUD and JSF. You can test and tweak the application locally. When the application is in a final state, deploy it to Oracle Cloud.
@@ -219,15 +259,25 @@
1. In the Projects window, right-click the project's root node and select Properties.
2. Select the Run category in the Properties window. In this category, expand the Server drop-down list and select Oracle Cloud Remote. Click OK.
+
image::images/crudapp-properties.png[]
-3. In the Projects window, expand the project's Configuration Files node and double-click ` persistence.xml`. The file opens in the XML Editor's Design view.
-4. Under Table Generation Strategy, select Create.
+
+[start=3]
+. In the Projects window, expand the project's Configuration Files node and double-click ` persistence.xml`. The file opens in the XML Editor's Design view.
+
+[start=4]
+. Under Table Generation Strategy, select Create.
+
image::images/crudapp-persistence.png[]
-5. If your on-premises WebLogic server has JPA 2.0 enabled, you must change the persistence provider from the default EclipseLink, which uses JPA 2.0, to a JPA 1.0 provider such as OpenJPA.
+
+[start=5]
+. If your on-premises WebLogic server has JPA 2.0 enabled, you must change the persistence provider from the default EclipseLink, which uses JPA 2.0, to a JPA 1.0 provider such as OpenJPA.
*Note: *If your on-premises WebLogic server is not JPA 2.0-enabled, EclipseLink falls back to JPA 1.0. In this case you do not need to change persistence providers.
-6. In the Projects window, right-click the project's root node and select Run. The IDE builds the project and deploys it to the Oracle Cloud Remote server. You can follow the progress of deployment in the IDE's Output window, in the Oracle Cloud Remote Deployment tab.
+
+[start=6]
+. In the Projects window, right-click the project's root node and select Run. The IDE builds the project and deploys it to the Oracle Cloud Remote server. You can follow the progress of deployment in the IDE's Output window, in the Oracle Cloud Remote Deployment tab.
*Caution: *Oracle Cloud does not yet support the uploading of database tables. Therefore no data is available for your application when it is on Oracle Cloud.
@@ -241,26 +291,45 @@
*To test whitelisting:*
1. In the Projects window, right-click <<create-webapp,the web application you created>> and select New > Servlet. The New Servlet wizard opens.
+
image::images/new-servlet.png[]
-2. Give the servlet an arbitrary name, select an existing package for it and click Finish. The servlet class opens in the editor.
-3. Find the servlet's ``processRequest`` method, type ``System.ex`` in the method body and press Ctrl-Space to open code completion. Code completion does not offer you the possibility to complete ``System.exit`` because ``System.exit`` is disallowed by the Oracle Cloud whitelist. The IDE shows ``exit`` with a line through it.
+
+[start=2]
+. Give the servlet an arbitrary name, select an existing package for it and click Finish. The servlet class opens in the editor.
+
+[start=3]
+. Find the servlet's ``processRequest`` method, type ``System.ex`` in the method body and press Ctrl-Space to open code completion. Code completion does not offer you the possibility to complete ``System.exit`` because ``System.exit`` is disallowed by the Oracle Cloud whitelist. The IDE shows ``exit`` with a line through it.
+
image::images/cc-failure.png[]
-4. Finish typing ``System.exit(1);`` . A warning appears. Scroll the cursor over the warning icon, and a tooltip appears informing you that ``java.lang.System.exit`` is not allowed.
+
+[start=4]
+. Finish typing ``System.exit(1);`` . A warning appears. Scroll the cursor over the warning icon, and a tooltip appears informing you that ``java.lang.System.exit`` is not allowed.
+
image::images/whitelist-warning.png[]
-5. In the Projects window, right-click the application's node and select Verify. Open the Output window (Window > Output > Output or Ctrl-4). The Output window includes a Whitelist tab that shows errors due to whitelist restrictions.
+
+[start=5]
+. In the Projects window, right-click the application's node and select Verify. Open the Output window (Window > Output > Output or Ctrl-4). The Output window includes a Whitelist tab that shows errors due to whitelist restrictions.
+
image::images/whitelist-output.png[]
-6. Open the Action Items window (Window > Action Items or Ctrl-6). Whitelist violations appear as a separate group of action items.
+
+[start=6]
+. Open the Action Items window (Window > Action Items or Ctrl-6). Whitelist violations appear as a separate group of action items.
*Tip:* Turn on Group Action Items by Category (bottom button on left) to see whitelist violations more easily.
image::images/whitelist-tasks.png[]
-7. Try to deploy the project. A warning dialog appears informing you that whitelist violations were detected and asking if you want to continue with deployment. Click No. The dialog disappears.
-8.
+
+[start=7]
+. Try to deploy the project. A warning dialog appears informing you that whitelist violations were detected and asking if you want to continue with deployment. Click No. The dialog disappears.
+
+[start=8]
+.
In the Projects window, right-click the application's node and select Properties. The application's Project Properties open. Select the Whitelists category. A list of active whitelists appears. In this dialog you can disable the whitelist.
When a web application's server is set to Oracle Cloud Remote, the Oracle Cloud whitelist applies both to that project and any of that project's subprojects. For example, an Enterprise application set to run on Oracle Cloud Remote has the Oracle Cloud whitelist apply to the Enterprise application itself and any EJB modules or web applications that are part of the Enterprise application. Both the project and its subprojects have a Whitelist category in their Project Properties. You can use the Project Properties dialog to set whitelists separately for the project and its individual subprojects.
image::images/whitelist-properties.png[]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Running%20Web%20Apps%20on%20Oracle%20Cloud[+Send Us Your Feedback+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_ja.asciidoc
index 34ad6b9..a54af94 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_ja.asciidoc
@@ -106,16 +106,24 @@
1. IDEで「サービス」ウィンドウを開きます(「ウィンドウ」→「サービス」または[Ctrl]-[5])。
2. 「クラウド」ノードを右クリックし、「クラウドの追加」を選択して「クラウド・プロバイダの追加」ウィザードを開きます。
+
image::images/add-cloud.png[]
-3. 「クラウドを選択」フィールドで、Oracle Cloudを選択し、「次」をクリックして「Oracle Cloud」パネルを開きます。
+
+[start=3]
+. 「クラウドを選択」フィールドで、Oracle Cloudを選択し、「次」をクリックして「Oracle Cloud」パネルを開きます。
+
image::images/oracle-cloud1.png[]
-4. すべてのフィールドに入力します。Oracle Java Cloud Service SDK JARが含まれているフォルダを参照します。「次」をクリックします。
+
+[start=4]
+. すべてのフィールドに入力します。Oracle Java Cloud Service SDK JARが含まれているフォルダを参照します。「次」をクリックします。
「次」をクリックすると、IDEによりクラウドへの接続がテストされます。接続に成功した場合は、クラウド・サービスのリストが表示されます。Oracle Cloud Remoteサーバー(Oracle WebLogic)のみが現在使用可能です。
*注意:* Oracle Cloudプロバイダを登録した後、「プロパティ」でクラウドの詳細を変更できます。「Oracle Cloud」ノードを右クリックし、「プロパティ」を選択して、「プロパティ」を開きます。
-5. Oracle Cloudプロバイダがクラウド・リソースのリストに表示されていることを確認します。「終了」をクリックします。
+
+[start=5]
+. Oracle Cloudプロバイダがクラウド・リソースのリストに表示されていることを確認します。「終了」をクリックします。
Oracle Cloudは、「サービス」ウィンドウの「クラウド」ノードにリストされています。「Oracle Cloud」ノードを右クリックして、サービスのリストをリフレッシュする、ジョブおよびログのリストを開く、クラウド・インスタンスを削除する、またはクラウドのプロパティを表示するコマンドを提供するコンテキスト・メニューを開くことができます。
@@ -165,10 +173,16 @@
*WebアプリケーションのサーバーをローカルとOracle Cloud間で変更する手順:*
1. 「プロジェクト」ウィンドウでアプリケーションのノードを右クリックし、「プロパティ」を選択します。
+
image::images/project-contextmenu.png[]
-2. 「プロジェクト・プロパティ」で、「実行」カテゴリを選択します。
+
+[start=2]
+. 「プロジェクト・プロパティ」で、「実行」カテゴリを選択します。
+
image::images/run-properties.png[]
-3. 「サーバー」ドロップダウン・リストから、目的のサーバー(Oracle Cloud RemoteまたはローカルOracle WebLogic)を選択します。サーバーをIDEに登録する必要があります。「サービス」ウィンドウの「サーバー」ノードを右クリックしてサーバーを追加できます。
+
+[start=3]
+. 「サーバー」ドロップダウン・リストから、目的のサーバー(Oracle Cloud RemoteまたはローカルOracle WebLogic)を選択します。サーバーをIDEに登録する必要があります。「サービス」ウィンドウの「サーバー」ノードを右クリックしてサーバーを追加できます。
== Webアプリケーションの作成
@@ -197,21 +211,47 @@
NetBeans IDEにHRスキーマを登録する際には、HRユーザー名とパスワードを使用します。
-2. Java EE5おびよびWebLogicサーバーのオンプレミス・インストールを使用してJava Webアプリケーションを作成します。アプリケーションに対してJSFフレームワークを有効にします。
+
+[start=2]
+. Java EE5おびよびWebLogicサーバーのオンプレミス・インストールを使用してJava Webアプリケーションを作成します。アプリケーションに対してJSFフレームワークを有効にします。
+
image::images/crudapp-eevers.png[]
+
+
image::images/crudapp-jsf.png[]
-3. 「プロジェクト」ウィンドウで、プロジェクトのルート・ノードを右クリックし、「新規」→「データベースからのエンティティ・クラス」を選択します。「データベースからのエンティティ・クラス」ウィザードが開きます。
-4. 「データベースからのエンティティ・クラス」ウィザードで、「データ・ソース」ドロップダウン・ボックスから「新しいデータ・ソース」を選択します。「データ・ソースを作成」ダイアログが開きます。
+
+[start=3]
+. 「プロジェクト」ウィンドウで、プロジェクトのルート・ノードを右クリックし、「新規」→「データベースからのエンティティ・クラス」を選択します。「データベースからのエンティティ・クラス」ウィザードが開きます。
+
+[start=4]
+. 「データベースからのエンティティ・クラス」ウィザードで、「データ・ソース」ドロップダウン・ボックスから「新しいデータ・ソース」を選択します。「データ・ソースを作成」ダイアログが開きます。
+
image::images/crudapp-newdatasource.png[]
-5. このデータソースに、登録したOracle Cloudアカウントのデータベース・サービス名と一致する名前を付けます。
+
+[start=5]
+. このデータソースに、登録したOracle Cloudアカウントのデータベース・サービス名と一致する名前を付けます。
+
image::images/cloud-db-name.png[]
-6. 手順1で作成したOracleXE HRデータベース接続を選択します。「OK」をクリックします。「データ・ソースを作成」ダイアログが閉じます。
+
+[start=6]
+. 手順1で作成したOracleXE HRデータベース接続を選択します。「OK」をクリックします。「データ・ソースを作成」ダイアログが閉じます。
+
image::images/create-datasource.png[]
-7. 「データベースからのエンティティ・クラス」ウィザードで、「使用可能な表」フィールドにHRスキーマ表名が入力されます。EMPLOYEESなど、表の1つを選択し、「追加」をクリックします。ウィザードの残りの部分をクリックして、エンティティ・クラスを含むパッケージに任意の名前を付け、他のフィールドはすべてデフォルト値を受け入れます。
-8. 「プロジェクト」ウィンドウで、プロジェクトのルート・ノードを右クリックし、「新規」→「エンティティからのJSFページ・クラス」を選択します。「新規エンティティからのJSFページ・クラス」ウィザードが開きます。
-9. 「エンティティ・クラス」パネルで、「すべて選択」をクリックし、「次」をクリックします。
-10. 「生成されたJSFページとクラス」パネルで、パッケージとJSFファイル・フォルダに適切な名前を付け、「終了」をクリックします。
-11. 「プロジェクト」ウィンドウでプロジェクトのルート・ノードを右クリックし、「実行」を選択します。IDEは、プロジェクトをビルドし、それをオンプレミスWebLogicサーバーにデプロイします。プロジェクトのランディング・ページにブラウザが開きます。
+
+[start=7]
+. 「データベースからのエンティティ・クラス」ウィザードで、「使用可能な表」フィールドにHRスキーマ表名が入力されます。EMPLOYEESなど、表の1つを選択し、「追加」をクリックします。ウィザードの残りの部分をクリックして、エンティティ・クラスを含むパッケージに任意の名前を付け、他のフィールドはすべてデフォルト値を受け入れます。
+
+[start=8]
+. 「プロジェクト」ウィンドウで、プロジェクトのルート・ノードを右クリックし、「新規」→「エンティティからのJSFページ・クラス」を選択します。「新規エンティティからのJSFページ・クラス」ウィザードが開きます。
+
+[start=9]
+. 「エンティティ・クラス」パネルで、「すべて選択」をクリックし、「次」をクリックします。
+
+[start=10]
+. 「生成されたJSFページとクラス」パネルで、パッケージとJSFファイル・フォルダに適切な名前を付け、「終了」をクリックします。
+
+[start=11]
+. 「プロジェクト」ウィンドウでプロジェクトのルート・ノードを右クリックし、「実行」を選択します。IDEは、プロジェクトをビルドし、それをオンプレミスWebLogicサーバーにデプロイします。プロジェクトのランディング・ページにブラウザが開きます。
これで、CRUDおよびJSFを使用したJava Webアプリケーションのローカル・バージョンが作成されます。アプリケーションをローカルにテストおよび調整できます。アプリケーションが最終状態になったら、Oracle Cloudにデプロイします。
@@ -219,15 +259,25 @@
1. 「プロジェクト」ウィンドウでプロジェクトのルート・ノードを右クリックし、「プロパティ」を選択します。
2. 「プロパティ」ウィンドウで「実行」カテゴリを選択します。このカテゴリで、「サーバー」ドロップダウン・リストを展開し、Oracle Cloud Remoteを選択します。「OK」をクリックします。
+
image::images/crudapp-properties.png[]
-3. 「プロジェクト」ウィンドウで、プロジェクトの「構成ファイル」ノードを展開し、「`persistence.xml`」をダブルクリックします。ファイルがXMLエディタの「デザイン」ビューに開きます。
-4. 「表生成戦略」で、「作成」を選択します。
+
+[start=3]
+. 「プロジェクト」ウィンドウで、プロジェクトの「構成ファイル」ノードを展開し、「`persistence.xml`」をダブルクリックします。ファイルがXMLエディタの「デザイン」ビューに開きます。
+
+[start=4]
+. 「表生成戦略」で、「作成」を選択します。
+
image::images/crudapp-persistence.png[]
-5. オンプレミスWebLogicサーバーでJPA 2.0が有効になっている場合は、持続性プロバイダを、JPA 2.0を使用するデフォルトのEclipseLinkから、OpenJPAなどのJPA 1.0プロバイダに変更する必要があります。
+
+[start=5]
+. オンプレミスWebLogicサーバーでJPA 2.0が有効になっている場合は、持続性プロバイダを、JPA 2.0を使用するデフォルトのEclipseLinkから、OpenJPAなどのJPA 1.0プロバイダに変更する必要があります。
*注意: *オンプレミスWebLogicサーバーがJPA 2.0対応でない場合、EclipseLinkはJPA 1.0にフォールバックします。この場合は、持続性プロバイダを変更する必要がありません。
-6. 「プロジェクト」ウィンドウでプロジェクトのルート・ノードを右クリックし、「実行」を選択します。IDEは、プロジェクトをビルドし、それをOracle Cloud Remoteサーバーにデプロイします。IDEの「出力」ウィンドウの「Oracle Cloud Remoteデプロイメント」タブで、デプロイメントの進捗状況をフォローできます。
+
+[start=6]
+. 「プロジェクト」ウィンドウでプロジェクトのルート・ノードを右クリックし、「実行」を選択します。IDEは、プロジェクトをビルドし、それをOracle Cloud Remoteサーバーにデプロイします。IDEの「出力」ウィンドウの「Oracle Cloud Remoteデプロイメント」タブで、デプロイメントの進捗状況をフォローできます。
*注意: *Oracle Cloudは、データベース表のアップロードをまだサポートしていません。したがって、これがOracle Cloud上にある場合は、アプリケーションで使用可能なデータはありません。
@@ -241,26 +291,45 @@
*ホワイトリストをテストする手順:*
1. 「プロジェクト」ウィンドウで、<<create-webapp,作成したWebアプリケーション>>を右クリックし、「新規」→「サーブレット」を選択します。新規サーブレット・ウィザードが開きます。
+
image::images/new-servlet.png[]
-2. サーブレットに任意の名前を付け、そのサーブレットの既存のパッケージを選択し、「終了」をクリックします。サーブレット・クラスがエディタに開きます。
-3. サーブレットの ``processRequest`` メソッドを探し、メソッド本文に「 ``System.ex`` 」と入力し、[Ctrl]-[Space]を押してコード補完を開きます。 ``System.exit`` はOracle Cloudホワイトリストで禁止されているため、コード補完は ``System.exit`` を補完する可能性のある提案を行いません。IDEは、取消し線が引かれた ``exit`` を表示します。
+
+[start=2]
+. サーブレットに任意の名前を付け、そのサーブレットの既存のパッケージを選択し、「終了」をクリックします。サーブレット・クラスがエディタに開きます。
+
+[start=3]
+. サーブレットの ``processRequest`` メソッドを探し、メソッド本文に「 ``System.ex`` 」と入力し、[Ctrl]-[Space]を押してコード補完を開きます。 ``System.exit`` はOracle Cloudホワイトリストで禁止されているため、コード補完は ``System.exit`` を補完する可能性のある提案を行いません。IDEは、取消し線が引かれた ``exit`` を表示します。
+
image::images/cc-failure.png[]
-4. ``System.exit(1);`` の入力を終了します。警告が表示されます。カーソルを警告アイコンにスクロールすると、 ``java.lang.System.exit`` が許可されていないことを通知するツールチップが表示されます。
+
+[start=4]
+. ``System.exit(1);`` の入力を終了します。警告が表示されます。カーソルを警告アイコンにスクロールすると、 ``java.lang.System.exit`` が許可されていないことを通知するツールチップが表示されます。
+
image::images/whitelist-warning.png[]
-5. 「プロジェクト」ウィンドウでアプリケーションのノードを右クリックし、「検査」を選択します。「出力」ウィンドウを開きます(「ウィンドウ」→「出力」→「出力」または[Ctrl]-[4])。「出力」ウィンドウには、ホワイトリストの制限によるエラーを示す「ホワイト・リスト」タブがあります。
+
+[start=5]
+. 「プロジェクト」ウィンドウでアプリケーションのノードを右クリックし、「検査」を選択します。「出力」ウィンドウを開きます(「ウィンドウ」→「出力」→「出力」または[Ctrl]-[4])。「出力」ウィンドウには、ホワイトリストの制限によるエラーを示す「ホワイト・リスト」タブがあります。
+
image::images/whitelist-output.png[]
-6. 「アクション項目」ウィンドウを開きます(「ウィンドウ」→「アクション項目」または[Ctrl]-[6])。ホワイトリスト違反がアクション項目の独立したグループとして表示されます。
+
+[start=6]
+. 「アクション項目」ウィンドウを開きます(「ウィンドウ」→「アクション項目」または[Ctrl]-[6])。ホワイトリスト違反がアクション項目の独立したグループとして表示されます。
*ヒント:* 「アクション項目をカテゴリでグループ化」(左側の下部のボタン)をオンにすると、ホワイトリスト違反をより簡単に表示できます。
image::images/whitelist-tasks.png[]
-7. プロジェクトのデプロイを試行します。ホワイトリスト違反が検出されたことを通知し、デプロイメントを続行するかどうかを確認する警告ダイアログが表示されます。「いいえ」をクリックします。ダイアログが消えます。
-8.
+
+[start=7]
+. プロジェクトのデプロイを試行します。ホワイトリスト違反が検出されたことを通知し、デプロイメントを続行するかどうかを確認する警告ダイアログが表示されます。「いいえ」をクリックします。ダイアログが消えます。
+
+[start=8]
+.
「プロジェクト」ウィンドウでアプリケーションのノードを右クリックし、「プロパティ」を選択します。アプリケーションの「プロジェクト・プロパティ」が開きます。「ホワイト・リスト」カテゴリを選択します。アクティブなホワイトリストのリストが表示されます。このダイアログで、ホワイトリストを無効にできます。
WebアプリケーションのサーバーがOracle Cloud Remoteに設定されている場合、Oracle Cloudホワイトリストはプロジェクトとそのプロジェクトのサブプロジェクトの両方に適用されます。たとえば、Oracle Cloud Remoteで実行するように設定されたEnterpriseアプリケーションにOracle Cloudがある場合、ホワイトリストはEnterpriseアプリケーション自体と、Enterpriseアプリケーションの一部である任意のEJBモジュールまたはWebアプリケーションに適用されます。プロジェクトとそのサブプロジェクトの両方の「プロジェクト・プロパティ」に「ホワイト・リスト」カテゴリがあります。「プロジェクト・プロパティ」ダイアログを使用して、プロジェクトとその個々のサブプロジェクトごとにホワイトリストを別々に設定できます。
image::images/whitelist-properties.png[]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Running%20Web%20Apps%20on%20Oracle%20Cloud[+ご意見をお寄せください+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_pt_BR.asciidoc
index 8e78344..e8819d5 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_pt_BR.asciidoc
@@ -106,16 +106,24 @@
1. Abra a janela Serviços no IDE (Janela > Serviços ou Ctrl-5).
2. Clique com o botão direito do mouse no nó Nuvem e selecione Adicionar Nuvem para abrir o assistente Adicionar Provedor de Nuvem
+
image::images/add-cloud.png[]
-3. No campo Escolher Nuvem, selecione Oracle Cloud e clique em Próximo para abrir o painel Oracle Cloud.
+
+[start=3]
+. No campo Escolher Nuvem, selecione Oracle Cloud e clique em Próximo para abrir o painel Oracle Cloud.
+
image::images/oracle-cloud1.png[]
-4. Preencha todos os campos. Procure a pasta contendo o Oracle Java Cloud Service SDK JAR. Clique em Próximo.
+
+[start=4]
+. Preencha todos os campos. Procure a pasta contendo o Oracle Java Cloud Service SDK JAR. Clique em Próximo.
Quando você clica em Próximo, o IDE testa a conexão com a nuvem. Uma lista de serviços de Nuvem é exibida caso a conexão seja bem-sucedida. Só o servidor Oracle Cloud Remote (Oracle WebLogic) está disponível no momento.
*Observação:* depois de registrar um provedor Oracle Cloud, você pode alterar os detalhes da Nuvem nas respectivas Propriedades. Abra a caixa de diálogo Propriedades clicando com o botão direito do mouse em Oracle Cloud e selecionando Propriedades.
-5. Confirme se o provedor Oracle Cloud é exibido na lista de recursos de Nuvem. Clique em Finalizar.
+
+[start=5]
+. Confirme se o provedor Oracle Cloud é exibido na lista de recursos de Nuvem. Clique em Finalizar.
O Oracle Cloud agora está listado no nó Nuvem da janela Serviços. Você pode clicar com o botão direito do mouse no nó Oracle Cloud para abrir um menu de contexto que oferece comandos para atualizar a lista de serviços, abrindo uma lista de jobs e logs, removendo a instância da nuvem ou exibindo as propriedades da nuvem.
@@ -165,10 +173,16 @@
*Para alterar um servidor de aplicação Web entre local e o Oracle Cloud:*
1. Na janela Projetos, clique com o botão direito do mouse no nó da aplicação e selecione Propriedades.
+
image::images/project-contextmenu.png[]
-2. Nas Propriedades do Projeto, selecione a categoria Executar.
+
+[start=2]
+. Nas Propriedades do Projeto, selecione a categoria Executar.
+
image::images/run-properties.png[]
-3. Na lista drop-down Servidor, selecione o servidor que você deseja (o Oracle Cloud Remote ou Oracle WebLogic local). O servidor deve estar registrado no IDE. É possível adicionar um servidor clicando com o botão direito do mouse na janela Serviços.
+
+[start=3]
+. Na lista drop-down Servidor, selecione o servidor que você deseja (o Oracle Cloud Remote ou Oracle WebLogic local). O servidor deve estar registrado no IDE. É possível adicionar um servidor clicando com o botão direito do mouse na janela Serviços.
== Criando uma Aplicação Web
@@ -197,21 +211,47 @@
Use o nome de usuário e a senha de RH quando você se registrar no esquema RH com o NetBeans IDE.
-2. Crie uma Aplicação Web Java usando o Java EE5 e sua instalação do servidor WebLogic local. Ative o framework JSF para a aplicação.
+
+[start=2]
+. Crie uma Aplicação Web Java usando o Java EE5 e sua instalação do servidor WebLogic local. Ative o framework JSF para a aplicação.
+
image::images/crudapp-eevers.png[]
+
+
image::images/crudapp-jsf.png[]
-3. Na janela Projetos, clique com o botão direito do mouse no nó de root do projeto e selecione Novo > Classes de Entidade do Banco de Dados. As Classes de Entidade do assistente do Banco de Dados são abertas.
-4. Em Classes de Entidade do assistente do Banco de Dados, selecione Nova Fonte de Dados na caixa drop-down Fonte de Dados. A caixa de diálogo Criar Fonte de Dados é aberta.
+
+[start=3]
+. Na janela Projetos, clique com o botão direito do mouse no nó de root do projeto e selecione Novo > Classes de Entidade do Banco de Dados. As Classes de Entidade do assistente do Banco de Dados são abertas.
+
+[start=4]
+. Em Classes de Entidade do assistente do Banco de Dados, selecione Nova Fonte de Dados na caixa drop-down Fonte de Dados. A caixa de diálogo Criar Fonte de Dados é aberta.
+
image::images/crudapp-newdatasource.png[]
-5. Nomeie essa origem de dados para corresponder ao nome do serviço de banco de dados na sua conta Oracle Cloud registrada..
+
+[start=5]
+. Nomeie essa origem de dados para corresponder ao nome do serviço de banco de dados na sua conta Oracle Cloud registrada..
+
image::images/cloud-db-name.png[]
-6. Selecione a conexão do banco de dados do OracleXE HR criada na Etapa 1. Clique em OK. A caixa de diálogo Criar Fonte de Dados é fechada.
+
+[start=6]
+. Selecione a conexão do banco de dados do OracleXE HR criada na Etapa 1. Clique em OK. A caixa de diálogo Criar Fonte de Dados é fechada.
+
image::images/create-datasource.png[]
-7. Em Classes da Entidade do assistente de Banco de Dados, o campo Tabelas Disponíveis é preenchido com os nomes de tabela do esquema de RH. Selecione uma ou mais tabelas, como EMPLOYEES, e clique em Adicionar. Clique no restante do assistente, dando um nome arbitrário ao pacote contendo as classes da entidade e aceitando todos os valores default em outros campos.
-8. Na janela Projetos, clique com o botão direito do mouse no nó de root do projeto e selecione Novo > Páginas JSF das Classes de Entidade. O Assistente de Novas Páginas JSF de Classes de Entidade é aberto.
-9. No painel Classes de Entidade, clique em Selecionar Tudo e clique em Próximo.
-10. No painel Gerar Páginas e Classes JSF, dê os nomes apropriados aos pacotes e à pasta de arquivos JSF e clique em Finalizar.
-11. Na janela Projetos, clique com o botão direito do mouse no nó root do projeto e selecione Executar. O IDE cria o projeto e o implanta no local, no servidor WebLogic. Um browser é aberto na página inicial do projeto.
+
+[start=7]
+. Em Classes da Entidade do assistente de Banco de Dados, o campo Tabelas Disponíveis é preenchido com os nomes de tabela do esquema de RH. Selecione uma ou mais tabelas, como EMPLOYEES, e clique em Adicionar. Clique no restante do assistente, dando um nome arbitrário ao pacote contendo as classes da entidade e aceitando todos os valores default em outros campos.
+
+[start=8]
+. Na janela Projetos, clique com o botão direito do mouse no nó de root do projeto e selecione Novo > Páginas JSF das Classes de Entidade. O Assistente de Novas Páginas JSF de Classes de Entidade é aberto.
+
+[start=9]
+. No painel Classes de Entidade, clique em Selecionar Tudo e clique em Próximo.
+
+[start=10]
+. No painel Gerar Páginas e Classes JSF, dê os nomes apropriados aos pacotes e à pasta de arquivos JSF e clique em Finalizar.
+
+[start=11]
+. Na janela Projetos, clique com o botão direito do mouse no nó root do projeto e selecione Executar. O IDE cria o projeto e o implanta no local, no servidor WebLogic. Um browser é aberto na página inicial do projeto.
Agora, você tem uma versão local de uma aplicação Web Java usando CRUD e JSF. É possível testar e ajustar a aplicação localmente. Quando a aplicação estiver em estado final, implante-a no Oracle Cloud.
@@ -219,15 +259,25 @@
1. Na janela Projetos, clique com o botão direito do mouse no nó root do projeto e selecione Propriedades.
2. Selecione a categoria Executar na janela Propriedades. Nessa categoria, expanda a lista drop-down Servidor e selecione Oracle Cloud Remote. Clique em OK.
+
image::images/crudapp-properties.png[]
-3. Na janela Projetos, expanda o nó Arquivos de Configuração do projeto e clique duas vezes em ` persistence.xml`. O arquivo é aberto na view Design do Editor XML.
-4. Em Estratégia de Geração de Tabela, selecione Criar
+
+[start=3]
+. Na janela Projetos, expanda o nó Arquivos de Configuração do projeto e clique duas vezes em ` persistence.xml`. O arquivo é aberto na view Design do Editor XML.
+
+[start=4]
+. Em Estratégia de Geração de Tabela, selecione Criar
+
image::images/crudapp-persistence.png[]
-5. Se seu servidor WebLogic local tiver o JPA 2.0 ativado, você deverá alterar o provedor de persistência do EclipseLink default, que usa JPA 2.0, para um provedor JPA 1.0, como OpenJPA.
+
+[start=5]
+. Se seu servidor WebLogic local tiver o JPA 2.0 ativado, você deverá alterar o provedor de persistência do EclipseLink default, que usa JPA 2.0, para um provedor JPA 1.0, como OpenJPA.
*Observação: *Se o seu servidor WebLogic local não estiver ativado para JPA 2.0, o EclipseLink fará o fallback para o JPA 1.0. Nesse caso, não é necessário para alterar provedores de persistência.
-6. Na janela Projetos, clique com o botão direito do mouse no nó root do projeto e selecione Executar. O IDE compila o projeto e o implanta no servidor Oracle Cloud Remote. Você pode seguir o andamento da implantação na janela de Saída do IDE, na guia Implantação do Oracle Cloud Remote.
+
+[start=6]
+. Na janela Projetos, clique com o botão direito do mouse no nó root do projeto e selecione Executar. O IDE compila o projeto e o implanta no servidor Oracle Cloud Remote. Você pode seguir o andamento da implantação na janela de Saída do IDE, na guia Implantação do Oracle Cloud Remote.
*Cuidado: *O Oracle Cloud ainda não suporta o upload de tabelas no banco de dados. Portanto, nenhum dado está disponível para sua aplicação quando ela estiver no Oracle Cloud.
@@ -241,26 +291,45 @@
*Para testar a lista de permissão:*
1. Na janela Projetos, clique com o botão direito do mouse na<<create-webapp,aplicação web criada>> e selecione Novo > Servlet. O assistente Novo Servlet será aberto.
+
image::images/new-servlet.png[]
-2. Dê um nome arbitrário ao servlet, selecione um pacote existente para ele e clique em Concluir. A classe do servlet será aberta no editor.
-3. Localize o método ``processRequest`` , digite ``System.ex`` no corpo do método e pressione Ctrl+Space para abrir o recurso autocompletar código. O recurso autocompletar código não oferece a possibilidade de completar o ``System.exit`` , pois o ``System.exit`` não está permitido na lista de permissões do Oracle Cloud. O IDE mostra ``exit`` com uma linha.
+
+[start=2]
+. Dê um nome arbitrário ao servlet, selecione um pacote existente para ele e clique em Concluir. A classe do servlet será aberta no editor.
+
+[start=3]
+. Localize o método ``processRequest`` , digite ``System.ex`` no corpo do método e pressione Ctrl+Space para abrir o recurso autocompletar código. O recurso autocompletar código não oferece a possibilidade de completar o ``System.exit`` , pois o ``System.exit`` não está permitido na lista de permissões do Oracle Cloud. O IDE mostra ``exit`` com uma linha.
+
image::images/cc-failure.png[]
-4. Finalize digitando ``System.exit(1);`` . Uma advertência será exibida. Role o cursor pelo ícone de advertência e uma dica de ferramenta será exibida, informando que o ``java.lang.System.exit`` não é permitido
+
+[start=4]
+. Finalize digitando ``System.exit(1);`` . Uma advertência será exibida. Role o cursor pelo ícone de advertência e uma dica de ferramenta será exibida, informando que o ``java.lang.System.exit`` não é permitido
+
image::images/whitelist-warning.png[]
-5. Na janela Projetos, clique com o botão direito do mouse no nó da aplicação e selecione Verificar. Abra a janela de Saída (Janela > Saída > Saída ou Ctrl-4). A janela de Saída inclui uma guia Lista de Permissões que mostra erros devido a restrições da lista de restrições.
+
+[start=5]
+. Na janela Projetos, clique com o botão direito do mouse no nó da aplicação e selecione Verificar. Abra a janela de Saída (Janela > Saída > Saída ou Ctrl-4). A janela de Saída inclui uma guia Lista de Permissões que mostra erros devido a restrições da lista de restrições.
+
image::images/whitelist-output.png[]
-6. Abra a janela Itens de Ação (Janela > Itens de Ação ou Ctrl-6). As violações de lista de permissão aparecem como um grupo separado de itens de ação.
+
+[start=6]
+. Abra a janela Itens de Ação (Janela > Itens de Ação ou Ctrl-6). As violações de lista de permissão aparecem como um grupo separado de itens de ação.
*Dica:* Ative os Itens de Ação de Grupo por Categoria (botão inferior à esquerda) para ver as violações de lista de permissão mais facilmente.
image::images/whitelist-tasks.png[]
-7. Tente implantar o projeto. Uma caixa de diálogo de advertência é exibida, informando que foram detectadas violações da lista de permissões e perguntando se você quer continuar com a implantação. Clique em Não. A caixa de diálogo desaparecerá.
-8.
+
+[start=7]
+. Tente implantar o projeto. Uma caixa de diálogo de advertência é exibida, informando que foram detectadas violações da lista de permissões e perguntando se você quer continuar com a implantação. Clique em Não. A caixa de diálogo desaparecerá.
+
+[start=8]
+.
Na janela Projetos, clique com o botão direito do mouse no nó da aplicação e selecione Propriedades. As Propriedades do Projeto da aplicação serão abertas. Selecione a categoria das Listas de Permissão. Uma lista ativa de listas de permissão é exibida. Nessa caixa de diálogo, é possível desativar a lista de permissões.
Quando um servidor da aplicação da Web é definido como Oracle Cloud Remote, a lista de permissões do Oracle Cloud se aplica ao projeto e a qualquer subprojeto desse projeto. Por exemplo, uma aplicação Corporativa definida para execução no Oracle Cloud Remote tem a lista de permissões do Oracle Cloud aplicada à aplicação Corporativa e a quaisquer módulos EJB ou aplicações Web que sejam parte da aplicação Corporativa. Tanto o projeto quanto seus subprojetos têm uma categoria Lista de Permissão em suas Propriedades do Projeto. É possível usar a caixa de diálogo Propriedades do Projeto pra definir listas de permissões para o projeto e seus subprojetos específicos.
image::images/whitelist-properties.png[]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Running%20Web%20Apps%20on%20Oracle%20Cloud[+Envie-nos Seu Feedback+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_ru.asciidoc
index 334c668..837dc47 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_ru.asciidoc
@@ -106,16 +106,24 @@
1. Откройте окно 'Службы' в IDE ('Окно' > 'Службы' или Ctrl-5).
2. Щелкните правой кнопкой мыши узел Cloud и выберите пункт 'Добавить облако', чтобы открыть мастер добавления поставщика облачных услуг.
+
image::images/add-cloud.png[]
-3. В поле 'Выбрать облако' выберите Oracle Cloud и нажмите кнопку 'Далее', чтобы открыть панель Oracle Cloud.
+
+[start=3]
+. В поле 'Выбрать облако' выберите Oracle Cloud и нажмите кнопку 'Далее', чтобы открыть панель Oracle Cloud.
+
image::images/oracle-cloud1.png[]
-4. Заполните все поля. Перейдите к папке, содержащей файл JAR для Oracle Java Cloud Service SDK. Нажмите кнопку 'Далее'.
+
+[start=4]
+. Заполните все поля. Перейдите к папке, содержащей файл JAR для Oracle Java Cloud Service SDK. Нажмите кнопку 'Далее'.
После нажатия кнопки 'Далее' IDE проверяет подключение к облаку. Если соединение прошло успешно, отображается перечень облачных служб. В настоящее время доступен только удаленный сервер Oracle Cloud (Oracle WebLogic).
*Примечание.* После регистрации поставщика Oracle Cloud можно изменить данные облака в его свойствах. Откройте окно 'Свойства', щелкнув правой кнопкой мыши узел Oracle Cloud и выберите 'Свойства'.
-5. Убедитесь, что поставщик Oracle Cloud отображается в списке ресурсов облачных служб. Нажмите кнопку 'Готово'.
+
+[start=5]
+. Убедитесь, что поставщик Oracle Cloud отображается в списке ресурсов облачных служб. Нажмите кнопку 'Готово'.
Сейчас Oracle Cloud указан в узле 'Облако' в окне 'Службы'. Можно щелкнуть правой кнопкой мыши узел Oracle Cloud, чтобы открыть контекстное меню, которое содержит команды для обновления списка служб, открыв список заданий и журналов и удалив экземпляр облака или просмотрев свойства облака.
@@ -165,10 +173,16 @@
*Чтобы изменить сервер веб-приложения между локальным сервером и Oracle Cloud:*
1. В окне 'Проекты' щелкните правой кнопкой мыши узел приложения и выберите 'Свойства'.
+
image::images/project-contextmenu.png[]
-2. В окне 'Свойства проекта' выберите категорию 'Выполнить'.
+
+[start=2]
+. В окне 'Свойства проекта' выберите категорию 'Выполнить'.
+
image::images/run-properties.png[]
-3. В раскрывающемся списке 'Сервер' выберите нужный сервер (удаленный сервер Oracle Cloud или локальный Oracle WebLogic). Сервер должен быть зарегистрирован в IDE. Можно добавить сервер, щелкнув правой кнопкой узел 'Серверы' в окне 'Службы'.
+
+[start=3]
+. В раскрывающемся списке 'Сервер' выберите нужный сервер (удаленный сервер Oracle Cloud или локальный Oracle WebLogic). Сервер должен быть зарегистрирован в IDE. Можно добавить сервер, щелкнув правой кнопкой узел 'Серверы' в окне 'Службы'.
== Создание веб-приложения
@@ -197,21 +211,47 @@
Используйте имя пользователя и пароль HR при регистрации схемы HR в IDE NetBeans.
-2. Создайте веб-приложение Java с использованием Java EE5 и локальной установки сервера WebLogic. Включите поддержку платформы JSF для приложений.
+
+[start=2]
+. Создайте веб-приложение Java с использованием Java EE5 и локальной установки сервера WebLogic. Включите поддержку платформы JSF для приложений.
+
image::images/crudapp-eevers.png[]
+
+
image::images/crudapp-jsf.png[]
-3. В окне 'Проекты' щелкните правой кнопкой мыши корневой узел проекта и выберите 'Создать' > 'Классы логических объектов из баз данных'. Откроется мастер создания логических объектов на основе баз данных.
-4. В мастере создания логических объектов на основе баз данных выберите 'Новый источник данных' из раскрывающегося списка 'Источники данных'. Откроется диалоговое окно 'Создать источник данных'.
+
+[start=3]
+. В окне 'Проекты' щелкните правой кнопкой мыши корневой узел проекта и выберите 'Создать' > 'Классы логических объектов из баз данных'. Откроется мастер создания логических объектов на основе баз данных.
+
+[start=4]
+. В мастере создания логических объектов на основе баз данных выберите 'Новый источник данных' из раскрывающегося списка 'Источники данных'. Откроется диалоговое окно 'Создать источник данных'.
+
image::images/crudapp-newdatasource.png[]
-5. Имя этого источника данных должно совпадать с именем службы базы данных в используемой зарегистрированной учетной записи Oracle Cloud.
+
+[start=5]
+. Имя этого источника данных должно совпадать с именем службы базы данных в используемой зарегистрированной учетной записи Oracle Cloud.
+
image::images/cloud-db-name.png[]
-6. Выберите подключение к базе данных OracleXE HR, созданное на шаге 1. Нажмите кнопку 'ОК'. Диалоговое окно 'Создать источники данных' закрывается.
+
+[start=6]
+. Выберите подключение к базе данных OracleXE HR, созданное на шаге 1. Нажмите кнопку 'ОК'. Диалоговое окно 'Создать источники данных' закрывается.
+
image::images/create-datasource.png[]
-7. В мастере создания логических объектов на основе баз данных поле 'Доступные таблицы' заполняется именами таблиц схем HR. Выберите одну из таблиц, например EMPLOYEES, и нажмите 'Добавить'. Щелкните в остальных частях мастера, задав произвольное имя для пакета, содержащего классы логических объектов, и приняв все значения по умолчанию в других полях.
-8. В окне 'Проекты' щелкните правой кнопкой мыши корневой узел проекта и выберите 'Создать' > 'Страницы JSF' из классов логических объектов. Откроется мастер создания страниц JSF из классов логических объектов
-9. На панели 'Классы логических объектов' нажмите 'Выделить все' и нажмите кнопку 'Далее'.
-10. На панели 'Создание страниц и классов JSF' задайте соответствующие имена для пакетов и папки файла JSF и нажмите кнопку 'Готово'.
-11. В окне 'Проекты' щелкните правой кнопкой мыши корневой узел проекта и выберите пункт 'Выполнить'. IDE создает проект и развертывает его на локальном сервере WebLogic. Браузер открывается на целевой странице проекта.
+
+[start=7]
+. В мастере создания логических объектов на основе баз данных поле 'Доступные таблицы' заполняется именами таблиц схем HR. Выберите одну из таблиц, например EMPLOYEES, и нажмите 'Добавить'. Щелкните в остальных частях мастера, задав произвольное имя для пакета, содержащего классы логических объектов, и приняв все значения по умолчанию в других полях.
+
+[start=8]
+. В окне 'Проекты' щелкните правой кнопкой мыши корневой узел проекта и выберите 'Создать' > 'Страницы JSF' из классов логических объектов. Откроется мастер создания страниц JSF из классов логических объектов
+
+[start=9]
+. На панели 'Классы логических объектов' нажмите 'Выделить все' и нажмите кнопку 'Далее'.
+
+[start=10]
+. На панели 'Создание страниц и классов JSF' задайте соответствующие имена для пакетов и папки файла JSF и нажмите кнопку 'Готово'.
+
+[start=11]
+. В окне 'Проекты' щелкните правой кнопкой мыши корневой узел проекта и выберите пункт 'Выполнить'. IDE создает проект и развертывает его на локальном сервере WebLogic. Браузер открывается на целевой странице проекта.
Теперь у вас есть локальная версия веб-приложения Java, использующая CRUD и JSF. Можно проверить и настроить приложение локально. Когда приложение находится в конечном состоянии, разверните его в Oracle Cloud.
@@ -219,15 +259,25 @@
1. В окне 'Проекты' щелкните правой кнопкой мыши корневой узел проекта и выберите 'Свойства'.
2. Выберите категорию 'Выполнить' в окне 'Свойства'. В этой категории разверните раскрывающийся список 'Сервер' и выберите удаленный сервер Oracle Cloud. Нажмите кнопку 'ОК'.
+
image::images/crudapp-properties.png[]
-3. В окне 'Проекты' разверните узел проекта 'Файлы конфигурации' и дважды щелкните ` persistence.xml`. Файл откроется в режиме конструктора редактора XML.
-4. В разделе 'Стратегия поколений таблицы' выберите пункт 'Создать'.
+
+[start=3]
+. В окне 'Проекты' разверните узел проекта 'Файлы конфигурации' и дважды щелкните ` persistence.xml`. Файл откроется в режиме конструктора редактора XML.
+
+[start=4]
+. В разделе 'Стратегия поколений таблицы' выберите пункт 'Создать'.
+
image::images/crudapp-persistence.png[]
-5. Если на локальном сервере WebLogic включена поддержка JPA 2.0 , необходимо изменить поставщика сохранения c заданного по умолчанию EclipseLink, который использует JPA 2.0, на поставщика, который использует JPA 1.0, такого как OpenJPA.
+
+[start=5]
+. Если на локальном сервере WebLogic включена поддержка JPA 2.0 , необходимо изменить поставщика сохранения c заданного по умолчанию EclipseLink, который использует JPA 2.0, на поставщика, который использует JPA 1.0, такого как OpenJPA.
*Примечание. *Если на локальном сервере WebLogic не включена поддержка JPA 2.0, выполняется откат EclipseLink к JPA 1.0. В этом случае не нужно менять поставщиков сохранения.
-6. В окне 'Проекты' щелкните правой кнопкой мыши корневой узел проекта и выберите пункт 'Выполнить'. В IDE создается проект и он развертывается на удаленном сервере Oracle Cloud. Можно отслеживать ход выполнения развертывания в окне 'Выходные данные' в IDE на вкладке 'Удаленное развертывание в Oracle Cloud'.
+
+[start=6]
+. В окне 'Проекты' щелкните правой кнопкой мыши корневой узел проекта и выберите пункт 'Выполнить'. В IDE создается проект и он развертывается на удаленном сервере Oracle Cloud. Можно отслеживать ход выполнения развертывания в окне 'Выходные данные' в IDE на вкладке 'Удаленное развертывание в Oracle Cloud'.
*Предостережение. *Oracle Cloud в настоящее время не поддерживает загрузку таблиц баз данных. Поэтому данные недоступны для используемых приложений при их нахождении в Oracle Cloud.
@@ -241,26 +291,45 @@
*Проверка на соответствие стандартам белого списка:*
1. В окне 'Проекты' щелкните правой кнопкой мыши <<create-webapp,созданное веб-приложение>> и выберите 'Создать' > 'Сервлет'. Откроется мастер создания сервлетов.
+
image::images/new-servlet.png[]
-2. Задайте для сервлета произвольное имя, выберите существующий пакет для него и нажмите кнопку 'Готово'. Класс сервлета открывается в редакторе.
-3. Найдите метод сервлета ``processRequest`` , введите ``System.ex`` в теле метода и нажмите сочетание клавиш Ctrl-Space, чтобы открыть функцию автозавершения кода. Функция автозавершения кода не обеспечивает возможности завершения ``System.exit`` , потому что ``System.exit`` запрещен в белом списке Oracle Cloud. В IDE отображается ``exit`` с линией, проходящей через него.
+
+[start=2]
+. Задайте для сервлета произвольное имя, выберите существующий пакет для него и нажмите кнопку 'Готово'. Класс сервлета открывается в редакторе.
+
+[start=3]
+. Найдите метод сервлета ``processRequest`` , введите ``System.ex`` в теле метода и нажмите сочетание клавиш Ctrl-Space, чтобы открыть функцию автозавершения кода. Функция автозавершения кода не обеспечивает возможности завершения ``System.exit`` , потому что ``System.exit`` запрещен в белом списке Oracle Cloud. В IDE отображается ``exit`` с линией, проходящей через него.
+
image::images/cc-failure.png[]
-4. Завершите ввод ``System.exit(1);`` . Отобразится предупреждение. Наведите курсор на значок предупреждения, и появится подсказка о том, что ``java.lang.System.exit`` запрещен.
+
+[start=4]
+. Завершите ввод ``System.exit(1);`` . Отобразится предупреждение. Наведите курсор на значок предупреждения, и появится подсказка о том, что ``java.lang.System.exit`` запрещен.
+
image::images/whitelist-warning.png[]
-5. В окне 'Проекты' щелкните правой кнопкой мыши узел приложения и выберите 'Проверить'. Откройте окно 'Выходные данные' ('Окно' > 'Выходные данные' > 'Выходные данные' или сочетание клавиш Ctrl-4). Окно 'Выходные данные' включает в себя вкладку 'Белый список', в которой отображаются ошибки, связанные с ограничениями белого списка.
+
+[start=5]
+. В окне 'Проекты' щелкните правой кнопкой мыши узел приложения и выберите 'Проверить'. Откройте окно 'Выходные данные' ('Окно' > 'Выходные данные' > 'Выходные данные' или сочетание клавиш Ctrl-4). Окно 'Выходные данные' включает в себя вкладку 'Белый список', в которой отображаются ошибки, связанные с ограничениями белого списка.
+
image::images/whitelist-output.png[]
-6. Откройте окно 'Элементы действий' ('Окно' > 'Элементы действий' или сочетание клавиш Ctrl-6). Нарушения соответствия стандартам белого списка отображаются как отдельная группа элементов действий.
+
+[start=6]
+. Откройте окно 'Элементы действий' ('Окно' > 'Элементы действий' или сочетание клавиш Ctrl-6). Нарушения соответствия стандартам белого списка отображаются как отдельная группа элементов действий.
*Совет.* Включите 'Элементы действий группы' по категориям (нижняя кнопка слева), чтобы сразу увидеть нарушения стандартов белого списка.
image::images/whitelist-tasks.png[]
-7. Попробуйте выполнить развертывание проекта. Отображается диалоговое окно предупреждения, сообщающее о том, что были выявлены нарушения стандартов белого списка, и отобразится запрос на подтверждение продолжения развертывания. Нажмите кнопку 'Нет'. Диалоговое окно исчезнет.
-8.
+
+[start=7]
+. Попробуйте выполнить развертывание проекта. Отображается диалоговое окно предупреждения, сообщающее о том, что были выявлены нарушения стандартов белого списка, и отобразится запрос на подтверждение продолжения развертывания. Нажмите кнопку 'Нет'. Диалоговое окно исчезнет.
+
+[start=8]
+.
В окне 'Проекты' щелкните правой кнопкой мыши узел приложения и выберите 'Свойства'. Откроется окно 'Свойства проекта' приложения. Выберите категорию 'Белые списки'. Отобразится список активных белых списков. В этом диалоговом окне можно отключить белый список.
Когда сервер веб-приложений настроен как удаленный сервер Oracle Cloud, белый список Oracle Cloud применяется как к этому проекту, так и ко всем подпроектам этого проекта. Например, для корпоративного приложения, настроенного для запуска на удаленном сервере Oracle Cloud, имеется белый список Oracle Cloud, который применяется к самому корпоративному приложению и ко всем модулям EJB и веб-приложениям, которые являются частью этого корпоративного приложения. У обоих проектов и его подпроектов имеется категория 'Белый список' в их 'Свойствах проекта'. Можно использовать диалоговое окно 'Свойства проекта' для настройки белых списков по отдельности для проектов и их отдельных подпроектов.
image::images/whitelist-properties.png[]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Running%20Web%20Apps%20on%20Oracle%20Cloud[+Мы ждем ваших отзывов+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_zh_CN.asciidoc
index 3a3c3ae..2f78a70 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/oracle-cloud_zh_CN.asciidoc
@@ -106,16 +106,24 @@
1. 在 IDE 中打开 "Services"（服务）窗口（"Window"（窗口）> "Services"（服务）或 Ctrl-5 组合键）。
2. 右键单击 "Cloud"（云）节点，并选择 "Add Cloud"（添加云）打开 "Add Cloud Provider"（添加云提供器）向导。
+
image::images/add-cloud.png[]
-3. 在 "Choose Cloud"（选择云）字段中，选择 "Oracle Cloud" 并单击 "Next"（下一步）以打开 "Oracle Cloud" 面板。
+
+[start=3]
+. 在 "Choose Cloud"（选择云）字段中，选择 "Oracle Cloud" 并单击 "Next"（下一步）以打开 "Oracle Cloud" 面板。
+
image::images/oracle-cloud1.png[]
-4. 填写所有字段。浏览包含 Oracle Java Cloud Service SDK JAR 的文件夹。单击 "Next"（下一步）。
+
+[start=4]
+. 填写所有字段。浏览包含 Oracle Java Cloud Service SDK JAR 的文件夹。单击 "Next"（下一步）。
单击 "Next"（下一步）后，IDE 会测试到云的连接。如果连接成功，则会显示云服务列表。当前只有 Oracle Cloud Remote 服务器 (Oracle WebLogic) 可用。
*注：*在注册 Oracle Cloud 提供器之后，您可以在其 "Properties"（属性）中更改云详细信息。右键单击 "Oracle Cloud" 节点并选择 "Properties"（属性）以便打开 "Properties"（属性）。
-5. 确认 Oracle Cloud 提供器已在云资源列表中显示。单击 "Finish"（完成）。
+
+[start=5]
+. 确认 Oracle Cloud 提供器已在云资源列表中显示。单击 "Finish"（完成）。
现在，Oracle Cloud 将在 "Services"（服务）窗口中的 "Cloud"（云）节点下方列出。您可以右键单击 "Oracle Cloud" 节点打开上下文菜单，该菜单提供了用于刷新服务列表、打开作业和日志列表、删除云实例或查看云属性的命令。
@@ -165,10 +173,16 @@
*在本地和 Oracle Cloud 之间更改 Web 应用程序服务器：*
1. 在 "Projects"（项目）窗口中，右键单击该应用程序的节点，然后选择 "Properties"（属性）。
+
image::images/project-contextmenu.png[]
-2. 在 "Project Properties"（项目属性）中，选择 "Run"（运行）类别。
+
+[start=2]
+. 在 "Project Properties"（项目属性）中，选择 "Run"（运行）类别。
+
image::images/run-properties.png[]
-3. 从 "Server"（服务器）下拉列表中，选择所需服务器（"Oracle Cloud Remote" 或 "local Oracle WebLogic"（本地 Oracle WebLogic））。该服务器必须已在 IDE 中注册。您可以通过在 "Services"（服务）窗口右键单击 "Servers"（服务器）节点来添加服务器。
+
+[start=3]
+. 从 "Server"（服务器）下拉列表中，选择所需服务器（"Oracle Cloud Remote" 或 "local Oracle WebLogic"（本地 Oracle WebLogic））。该服务器必须已在 IDE 中注册。您可以通过在 "Services"（服务）窗口右键单击 "Servers"（服务器）节点来添加服务器。
== 创建 Web 应用程序
@@ -197,21 +211,47 @@
将 HR 方案注册到 NetBeans IDE 时，请使用 HR 用户名和口令。
-2. 使用 Java EE5 和 WebLogic Server 本地安装创建 Java Web 应用程序。为该应用程序启用 JSF 框架。
+
+[start=2]
+. 使用 Java EE5 和 WebLogic Server 本地安装创建 Java Web 应用程序。为该应用程序启用 JSF 框架。
+
image::images/crudapp-eevers.png[]
+
+
image::images/crudapp-jsf.png[]
-3. 在 "Projects"（项目）窗口中，右键单击项目的根节点，并选择 "New"（新建）> "Entity Classes from Database"（通过数据库生成实体类）。此时将打开 "Entity Classes from Database"（通过数据库生成实体类）向导。
-4. 在 "Entity Classes from Database"（通过数据库生成实体类）向导中，从 "Data Source"（数据源）下拉框中选择 "New Data Source"（新建数据源）。此时将打开 "Create Data Source"（创建数据源）对话框。
+
+[start=3]
+. 在 "Projects"（项目）窗口中，右键单击项目的根节点，并选择 "New"（新建）> "Entity Classes from Database"（通过数据库生成实体类）。此时将打开 "Entity Classes from Database"（通过数据库生成实体类）向导。
+
+[start=4]
+. 在 "Entity Classes from Database"（通过数据库生成实体类）向导中，从 "Data Source"（数据源）下拉框中选择 "New Data Source"（新建数据源）。此时将打开 "Create Data Source"（创建数据源）对话框。
+
image::images/crudapp-newdatasource.png[]
-5. 为此数据源命名，使其与已注册的 Oracle Cloud 帐户中的数据库服务名称匹配。
+
+[start=5]
+. 为此数据源命名，使其与已注册的 Oracle Cloud 帐户中的数据库服务名称匹配。
+
image::images/cloud-db-name.png[]
-6. 选择您在步骤 1 中创建的 OracleXE HR 数据库连接。单击 "OK"（确定）。此时将关闭 "Create Data Source"（创建数据源）对话框。
+
+[start=6]
+. 选择您在步骤 1 中创建的 OracleXE HR 数据库连接。单击 "OK"（确定）。此时将关闭 "Create Data Source"（创建数据源）对话框。
+
image::images/create-datasource.png[]
-7. 在 "Entity Classes from Database"（通过数据库生成实体类）向导中，"Available Tables"（可用表）字段已使用 HR 方案表名填充。选择某个表（例如，EMPLOYEES），然后单击 "Add"（添加）。点进向导的其余部分，为包含实体类的包指定一个任意名称，并在其他字段中接受所有默认值。
-8. 在 "Projects"（项目）窗口中，右键单击项目的根节点，然后选择 "New"（新建）> "JSF Pages from Entity Classes"（通过实体类创建 JSF 页）。此时将打开 "New JSF Pages from Entity Classes"（通过实体类新建 JSF 页）向导。
-9. 在 "Entity Classes"（实体类）面板中，单击 "Select All"（全选）和 "Next"（下一步）。
-10. 在 "Generate JSF Pages and Classes"（生成 JSF 页和类）面板中，为包和 JSF 文件所在的文件夹指定适当的名称并单击 "Finish"（完成）。
-11. 在 "Projects"（项目）窗口中，右键单击项目的根节点，然后选择 "Run"（运行）。IDE 会构建项目并将其部署到本地 WebLogic Server。该项目的登录页上会打开一个浏览器。
+
+[start=7]
+. 在 "Entity Classes from Database"（通过数据库生成实体类）向导中，"Available Tables"（可用表）字段已使用 HR 方案表名填充。选择某个表（例如，EMPLOYEES），然后单击 "Add"（添加）。点进向导的其余部分，为包含实体类的包指定一个任意名称，并在其他字段中接受所有默认值。
+
+[start=8]
+. 在 "Projects"（项目）窗口中，右键单击项目的根节点，然后选择 "New"（新建）> "JSF Pages from Entity Classes"（通过实体类创建 JSF 页）。此时将打开 "New JSF Pages from Entity Classes"（通过实体类新建 JSF 页）向导。
+
+[start=9]
+. 在 "Entity Classes"（实体类）面板中，单击 "Select All"（全选）和 "Next"（下一步）。
+
+[start=10]
+. 在 "Generate JSF Pages and Classes"（生成 JSF 页和类）面板中，为包和 JSF 文件所在的文件夹指定适当的名称并单击 "Finish"（完成）。
+
+[start=11]
+. 在 "Projects"（项目）窗口中，右键单击项目的根节点，然后选择 "Run"（运行）。IDE 会构建项目并将其部署到本地 WebLogic Server。该项目的登录页上会打开一个浏览器。
现在，您已使用 CRUD 和 JSF 创建 Java Web 应用程序的本地版本。您可以本地测试和调整该应用程序。当应用程序处于最终状态时，请将其部署到 Oracle Cloud。
@@ -219,15 +259,25 @@
1. 在 "Projects"（项目）窗口中，右键单击项目的根节点，然后选择 "Properties"（属性）。
2. 在 "Properties"（属性）窗口中选择 "Run"（运行）类别。在此类别中，展开 "Server"（服务器）下拉列表并选择 "Oracle Cloud Remote"。单击 "OK"（确定）。
+
image::images/crudapp-properties.png[]
-3. 在 "Projects"（项目）窗口中，展开项目的 "Configuration Files"（配置文件）节点，然后双击 `persistence.xml`。该文件将在 XML 编辑器的设计视图中打开。
-4. 在 "Table Generation Strategy"（表生成策略）下选择 "Create"（创建）。
+
+[start=3]
+. 在 "Projects"（项目）窗口中，展开项目的 "Configuration Files"（配置文件）节点，然后双击 `persistence.xml`。该文件将在 XML 编辑器的设计视图中打开。
+
+[start=4]
+. 在 "Table Generation Strategy"（表生成策略）下选择 "Create"（创建）。
+
image::images/crudapp-persistence.png[]
-5. 如果您的本地 WebLogic Server 已启用 JPA 2.0，则必须将持久性提供器从默认的 "EclipseLink"（使用 JPA 2.0）更改为 JPA 1.0 提供器（例如，OpenJPA）。
+
+[start=5]
+. 如果您的本地 WebLogic Server 已启用 JPA 2.0，则必须将持久性提供器从默认的 "EclipseLink"（使用 JPA 2.0）更改为 JPA 1.0 提供器（例如，OpenJPA）。
*注：*如果您的本地 WebLogic Server 未启用 JPA 2.0，EclipseLink 会退回到使用 JPA 1.0。此种情况下，您不必更改持久性提供器。
-6. 在 "Projects"（项目）窗口中，右键单击项目的根节点，然后选择 "Run"（运行）。IDE 会构建项目并将其部署到 Oracle Cloud Remote 服务器。您可以在 IDE "Output"（输出）窗口中的 "Oracle Cloud Remote Deployment"（Oracle Cloud Remote 部署）标签内跟进部署进度。
+
+[start=6]
+. 在 "Projects"（项目）窗口中，右键单击项目的根节点，然后选择 "Run"（运行）。IDE 会构建项目并将其部署到 Oracle Cloud Remote 服务器。您可以在 IDE "Output"（输出）窗口中的 "Oracle Cloud Remote Deployment"（Oracle Cloud Remote 部署）标签内跟进部署进度。
*注意：*Oracle Cloud 尚不支持上载数据库表。因此，当应用程序位于 Oracle Cloud 中时，没有任何数据可用于该应用程序。
@@ -241,26 +291,45 @@
*测试白名单：*
1. 在 "Projects"（项目）窗口中，右键单击<<create-webapp,您创建的 Web 应用程序>>，并选择 "New"（新建）> "Servlet"。此时将打开新建 Servlet 向导。
+
image::images/new-servlet.png[]
-2. 为 servlet 指定任意名称，并为其选择一个现有包，然后单击 "Finish"（完成）。servlet 类随即在编辑器中打开。
-3. 找到 servlet 的 ``processRequest`` 方法，在方法主体中键入 ``System.ex`` ，并按 Ctrl-空格键打开代码完成。代码完成不会向您提供完成 ``System.exit`` 的可能性，因为 Oracle Cloud 白名单已禁止 ``System.exit`` 。IDE 显示带有删除线的 ``exit`` 。
+
+[start=2]
+. 为 servlet 指定任意名称，并为其选择一个现有包，然后单击 "Finish"（完成）。servlet 类随即在编辑器中打开。
+
+[start=3]
+. 找到 servlet 的 ``processRequest`` 方法，在方法主体中键入 ``System.ex`` ，并按 Ctrl-空格键打开代码完成。代码完成不会向您提供完成 ``System.exit`` 的可能性，因为 Oracle Cloud 白名单已禁止 ``System.exit`` 。IDE 显示带有删除线的 ``exit`` 。
+
image::images/cc-failure.png[]
-4. 完成键入 ``System.exit(1);`` 。此时将出现一条警告。在警告图标上滚动光标，此时会出现一条工具提示，通知您不允许使用 ``java.lang.System.exit`` 。
+
+[start=4]
+. 完成键入 ``System.exit(1);`` 。此时将出现一条警告。在警告图标上滚动光标，此时会出现一条工具提示，通知您不允许使用 ``java.lang.System.exit`` 。
+
image::images/whitelist-warning.png[]
-5. 在 "Projects"（项目）窗口中，右键单击应用程序的节点，然后选择 "Verify"（验证）。打开 "Output"（输出）窗口（"Window"（窗口）> "Output"（输出） > "Output"（输出）或 Ctrl-4 组合键）。"Output"（输出）窗口包含一个 "Whitelist"（白名单）标签，该标签显示因白名单限制而导致的错误。
+
+[start=5]
+. 在 "Projects"（项目）窗口中，右键单击应用程序的节点，然后选择 "Verify"（验证）。打开 "Output"（输出）窗口（"Window"（窗口）> "Output"（输出） > "Output"（输出）或 Ctrl-4 组合键）。"Output"（输出）窗口包含一个 "Whitelist"（白名单）标签，该标签显示因白名单限制而导致的错误。
+
image::images/whitelist-output.png[]
-6. 打开 "Action Items"（操作项）窗口（"Window"（窗口）> "Action Items"（操作项）或 Ctrl-6 组合键）。白名单违规作为单独的一组操作项显示。
+
+[start=6]
+. 打开 "Action Items"（操作项）窗口（"Window"（窗口）> "Action Items"（操作项）或 Ctrl-6 组合键）。白名单违规作为单独的一组操作项显示。
*提示：*打开 "Group Action Items by Category"（按类别对操作项进行分组）（左下方的按钮）可以更方便地查看白名单违规。
image::images/whitelist-tasks.png[]
-7. 尝试部署项目。此时会显示一个警告对话框，通知您已检测到白名单违规，并询问您是否要继续部署。单击 "No"（否）。此对话框随即消失。
-8.
+
+[start=7]
+. 尝试部署项目。此时会显示一个警告对话框，通知您已检测到白名单违规，并询问您是否要继续部署。单击 "No"（否）。此对话框随即消失。
+
+[start=8]
+.
在 "Projects"（项目）窗口中，右键单击该应用程序的节点，然后选择 "Properties"（属性）。此时将打开该应用程序的 "Project Properties"（项目属性）。选择 "Whitelists"（白名单）类别。此时会显示一个活动白名单列表。在此对话框中，您可以禁用白名单。
将 Web 应用程序的服务器设置为 Oracle Cloud Remote 后，Oracle Cloud 白名单适用于该项目及其所有子项目。例如，已设置为在 Oracle Cloud Remote 上运行的企业应用程序具有 Oracle Cloud 白名单，该白名单适用于该企业应用程序本身及其包含的所有 EJB 模块或 Web 应用程序。该项目及其子项目的 "Project Properties"（项目属性）中都具有 "Whitelist"（白名单）类别。使用 "Project Properties"（项目属性）对话框可以为该项目及其各子项目单独设置白名单。
image::images/whitelist-properties.png[]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Running%20Web%20Apps%20on%20Oracle%20Cloud[+请将您的反馈意见发送给我们+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring.asciidoc
index 926acb2..8ef102e 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring.asciidoc
@@ -82,16 +82,29 @@
The Java EE version depends upon the version of the server that is selected. The default Java EE version is Java EE 7 Web when the selected server is GlassFish Server 4.0.
-5. In Step 4, the Frameworks panel, select Spring Web MVC.
-6. Select *Spring Framework 3.x* in the Spring Library drop-down list.
+
+[start=5]
+. In Step 4, the Frameworks panel, select Spring Web MVC.
+
+[start=6]
+. Select *Spring Framework 3.x* in the Spring Library drop-down list.
+
image::images/frameworks-window.png[title="Spring Web MVC displayed in the Frameworks panel"]
Note that the IDE enables you to add the Spring 4.x library to your project, but for this tutorial you will use SimpleFormController that is not supported in Spring 4.x. Also, when you select Spring Web MVC, note that the JSTL (JavaServer Pages Standard Tag Library) library is added to the classpath during project creation by default. Deselect this option (as in the above screenshot), since you do not require JSTL for this tutorial.
-7. Click the Configuration tab and note that the wizard enables you to specify the name and mapping of the Spring Dispatcher servlet.
+
+[start=7]
+. Click the Configuration tab and note that the wizard enables you to specify the name and mapping of the Spring Dispatcher servlet.
+
image::images/spring-configuration.png[title="Specify the name and mapping of the Spring Dispatcher servlet under the Configuration tab"]
-8. Click Finish. The IDE creates a project for the entire application, including all metadata, as well as the project's Ant build script which you can inspect from the Files window (Ctrl-2; ⌘-2 on Mac). You can view the template structure from the Projects window (Ctrl-1; ⌘-1 on Mac). Also note that four files open by default in the IDE's editor: `dispatcher-servlet.xml`, `applicationContext.xml`, `redirect.jsp`, and `index.jsp`.
-9. In the Projects window, expand the new project's Libraries node and note that the Spring JARs are included in the project's classpath.
+
+[start=8]
+. Click Finish. The IDE creates a project for the entire application, including all metadata, as well as the project's Ant build script which you can inspect from the Files window (Ctrl-2; ⌘-2 on Mac). You can view the template structure from the Projects window (Ctrl-1; ⌘-1 on Mac). Also note that four files open by default in the IDE's editor: `dispatcher-servlet.xml`, `applicationContext.xml`, `redirect.jsp`, and `index.jsp`.
+
+[start=9]
+. In the Projects window, expand the new project's Libraries node and note that the Spring JARs are included in the project's classpath.
+
image::images/spring-libraries.png[title="Spring JARs are listed under the project's Libraries node"]
@@ -100,9 +113,12 @@
Before making any changes to project files, try running the new project in the IDE:
-1. Click the Run Project ( image::images/run-project-btn.png[] ) in the IDE's main toolbar. The IDE automatically starts the GlassFish server if it is not already running, compiles the project, then deploys it to the server. Note any output displayed in the IDE's Output window (Ctrl-4; ⌘-4 on Mac). The generated output completes with a `BUILD SUCCESSFUL` message.
+1. Click the Run Project ( image:images/run-project-btn.png[] ) in the IDE's main toolbar. The IDE automatically starts the GlassFish server if it is not already running, compiles the project, then deploys it to the server. Note any output displayed in the IDE's Output window (Ctrl-4; ⌘-4 on Mac). The generated output completes with a `BUILD SUCCESSFUL` message.
+
image::images/output.png[title="Output window displays information when running the project"]
+
The IDE's default browser starts up, and you see content from the welcome page view (`/WEB-INF/jsp/index.jsp`).
+
image::images/browser-output.png[title="Welcome page output is displayed in browser"]
When you run your project in the IDE, the project is compiled and deployed to the server, and then opens in your default browser. Furthermore, the IDE provides a Deploy on Save feature, which is activated by default for web projects. When you save files in the editor, your project is automatically recompiled and deployed to the server. To view changes, you can simply refresh pages in your browser.
@@ -190,7 +206,7 @@
Now that you are sure your environment is set up properly, you can begin extending the skeleton project according to your needs. Start by creating the `HelloService` class.
-1. Click the New File ( image::images/new-file-btn.png[] ) button in the IDE's toolbar. (Alternatively, press Ctrl-N; ⌘-N on Mac.)
+1. 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 *Java* category, then select *Java Class* and click Next.
3. In the New Java Class wizard that displays, type in *HelloService* for Class Name, and enter *service* for Package Name to create a new package for the class.
4. Click Finish. The IDE creates the new class and opens it in the editor.
@@ -218,14 +234,26 @@
*Note: *SimpleFormController is deprecated in Spring 3.x. It is used in this tutorial for demonstration purposes. However, annotated controllers should be used instead of XML files.
1. Open the New File wizard by pressing Ctrl-N (⌘-N on Mac). Under Categories select *Spring Framework*; under File Types select *Simple Form Controller*.
+
image::images/simple-form-controller.png[title="NetBeans IDE provides templates for various Spring artifacts"]
+
[tips]#NetBeans IDE provides templates for various Spring artifacts, including the Spring XML Configuration File, the link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/AbstractController.html[+`AbstractController`+], and the link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html[+`SimpleFormController`+].#
-2. Click Next.
-3. Name the class *HelloController* and create a new package for it by typing *controller* in the Package text field. Click Finish. The IDE creates the new class and opens it in the editor.
-4. Specify controller properties by uncommenting the setter methods that display by default in the class template. To uncomment the code snippet, highlight the code as in the image below, then press Ctrl-/ (⌘-/ on Mac).
+
+[start=2]
+. Click Next.
+
+[start=3]
+. Name the class *HelloController* and create a new package for it by typing *controller* in the Package text field. Click Finish. The IDE creates the new class and opens it in the editor.
+
+[start=4]
+. Specify controller properties by uncommenting the setter methods that display by default in the class template. To uncomment the code snippet, highlight the code as in the image below, then press Ctrl-/ (⌘-/ on Mac).
+
image::images/comment-out.png[title="Highlight code snippets, then press Ctrl-/ to toggle comments"]
+
[tips]#Pressing Ctrl-/ (⌘-/ on Mac) toggles comments in the editor.#
-5. Make changes as follows (shown in *bold*).
+
+[start=5]
+. Make changes as follows (shown in *bold*).
[source,java]
----
@@ -246,10 +274,18 @@
You now need to create the `Name` class as a simple bean to hold information for each request.
-6. In the Projects window, right-click on the project node and choose New > Java Class. The New Java Class wizard displays.
-7. Enter *Name* for the Class Name, and for Package select *controller* from the drop-down list.
-8. Click Finish. The `Name` class is created and opens in the editor.
-9. For the `Name` class, create a field named `value`, then create accessor methods (i.e., getter and setter methods) for this field. Start by declaring the `value` field:
+
+[start=6]
+. In the Projects window, right-click on the project node and choose New > Java Class. The New Java Class wizard displays.
+
+[start=7]
+. Enter *Name* for the Class Name, and for Package select *controller* from the drop-down list.
+
+[start=8]
+. Click Finish. The `Name` class is created and opens in the editor.
+
+[start=9]
+. For the `Name` class, create a field named `value`, then create accessor methods (i.e., getter and setter methods) for this field. Start by declaring the `value` field:
[source,java]
----
@@ -265,8 +301,11 @@
The IDE can create accessor methods for you. In the editor, right-click on `value` and choose Insert Code (or press Alt-Insert; Ctrl-I on Mac). In the popup menu, choose Getter and Setter.
+
image::images/generate-code.png[title="The Generate Code popup menu enables you to set accessor methods"]
-10. In the dialog that displays, select the `value : String` option, then click OK. The `getValue()` and `setValue()` methods are added to the `Name` class:
+
+[start=10]
+. In the dialog that displays, select the `value : String` option, then click OK. The `getValue()` and `setValue()` methods are added to the `Name` class:
[source,java]
----
@@ -279,8 +318,12 @@
this.value = value;
}
----
-11. Press Ctrl-Tab and choose `HelloController` to switch back to the `HelloController` class. Note that the previous error badge has disappeared since the `Name` class now exists.
-12. Delete the `doSubmitAction()` method and uncomment the link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html#setFormView(java.lang.String)[+`onSubmit()`+] method. The `onSubmit()` method enables you to create your own `ModelAndView`, which is what is required here. Make the following changes:
+
+[start=11]
+. Press Ctrl-Tab and choose `HelloController` to switch back to the `HelloController` class. Note that the previous error badge has disappeared since the `Name` class now exists.
+
+[start=12]
+. Delete the `doSubmitAction()` method and uncomment the link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html#setFormView(java.lang.String)[+`onSubmit()`+] method. The `onSubmit()` method enables you to create your own `ModelAndView`, which is what is required here. Make the following changes:
[source,java]
----
@@ -299,12 +342,17 @@
}
----
As indicated above, the `command` is recast as a `Name` object. An instance of `ModelAndView` is created, and the success view is obtained using a getter in `SimpleFormController`. Finally, the model is populated with data. The only item in our model is the hello message obtained from the `HelloService` created earlier. You use the `addObject()` method to add the hello message to the model under the name `helloMessage`.
-13. Fix import errors by right-clicking in the editor and choosing Fix Imports (Ctrl-Shift-I; ⌘-Shift-I on Mac).
+
+[start=13]
+. Fix import errors by right-clicking in the editor and choosing Fix Imports (Ctrl-Shift-I; ⌘-Shift-I on Mac).
+
image::images/fix-imports70.png[title="Press Ctrl-Shift-I to fix imports in your file"]
*Note.* Confirm that * ``org.springframework.validation.BindException`` * and * ``org.springframework.web.servlet.ModelAndView`` * are selected in the Fix All Imports dialog box.
-14. Click OK. The following import statement is added to the top of the file:
+
+[start=14]
+. Click OK. The following import statement is added to the top of the file:
[source,java]
----
@@ -314,7 +362,9 @@
As stated in the API documentation, this class "represents a model and view returned by a handler, to be resolved by a `DispatcherServlet`. The view can take the form of a `String` view name which will need to be resolved by a `ViewResolver` object; alternatively a `View` object can be specified directly. The model is a `Map`, allowing the use of multiple objects keyed by name."
Note that at this stage, not all errors are fixed because the class still cannot identify the `HelloService` class, nor make use of its `sayHello()` method.
-15. Within `HelloController`, declare a private field named `HelloService`:
+
+[start=15]
+. Within `HelloController`, declare a private field named `HelloService`:
[source,java]
----
@@ -338,7 +388,9 @@
import service.HelloService;
----
All errors should now be fixed.
-16. Register `HelloService` in `applicationContext.xml`. Open `applicationContext.xml` in the editor and enter the following bean declaration:
+
+[start=16]
+. Register `HelloService` in `applicationContext.xml`. Open `applicationContext.xml` in the editor and enter the following bean declaration:
[source,java]
----
@@ -346,8 +398,11 @@
<bean name="helloService" class="service.HelloService" />
----
Spring support in the IDE includes code completion within XML configuration files for Java classes as well as bean references. To invoke code completion, press Ctrl-Space when working in the editor:
+
image::images/code-completion.png[title="Code completion invoked when pressing Ctrl-Space"]
-17. Register `HelloController` in `dispatcher-servlet.xml`. Open `dispatcher-servlet.xml` in the editor and enter the following bean declaration:
+
+[start=17]
+. Register `HelloController` in `dispatcher-servlet.xml`. Open `dispatcher-servlet.xml` in the editor and enter the following bean declaration:
[source,java]
----
@@ -377,8 +432,12 @@
</body>
----
-4. Create another JSP page in the same manner <<create-jsp,as above>>, but name it `nameView`.
-5. In the editor, add the following Spring tag library declaration to `nameView.jsp`.
+
+[start=4]
+. Create another JSP page in the same manner <<create-jsp,as above>>, but name it `nameView`.
+
+[start=5]
+. In the editor, add the following Spring tag library declaration to `nameView.jsp`.
[source,java]
----
@@ -386,8 +445,12 @@
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
----
This imports the link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html[+Spring tag library+], which contains tags useful when implementing views as JSP pages.
-6. Change the contents of the `<title>` and `<h1>` tags to read: `Enter Your Name`.
-7. Enter the following code beneath the `<h1>` tags:
+
+[start=6]
+. Change the contents of the `<title>` and `<h1>` tags to read: `Enter Your Name`.
+
+[start=7]
+. Enter the following code beneath the `<h1>` tags:
[source,xml]
----
@@ -406,7 +469,9 @@
link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html#spring.tld.bind[+spring:bind+] allows you to bind a bean property. The bind tag provides a bind status and value, which you use as the name and value of the input field. This way, when the form is submitted, Spring will know how to extract the submitted value. Here, our command class (`controller.Name`) has a `value` property, therefore you set the `path` to `value`.
link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html#spring.tld.nestedPath[+spring:nestedPath+] enables you to prepend a specified path to a bean. So, when used with `spring:bind` as shown above, the path to the bean becomes: `name.value`. As you recall, the command name of `HelloController` is `name`. Therefore, this path refers to the `value` property of a bean named `name` in the page scope.
-8. Change the relative entry point for the application. Currently, the project entry point is still `index.htm` which, as described in <<running,Running the Skeleton Project>> above, redirects to `WEB-INF/jsp/index.jsp`. You can specify an entry point for the project when it is deployed and run. In the Projects window, right-click the project node and choose Properties. The Project Properties dialog displays. Under Categories select Run. In the Relative URL field, type in `/hello.htm`, then click OK.
+
+[start=8]
+. Change the relative entry point for the application. Currently, the project entry point is still `index.htm` which, as described in <<running,Running the Skeleton Project>> above, redirects to `WEB-INF/jsp/index.jsp`. You can specify an entry point for the project when it is deployed and run. In the Projects window, right-click the project node and choose Properties. The Project Properties dialog displays. Under Categories select Run. In the Relative URL field, type in `/hello.htm`, then click OK.
At this moment you may wonder where the mapping of `hello.htm` to `HelloController` is located. You have not added a mapping to the `urlMapping` bean, as is the case for `index.htm`, the skeleton project's welcome page. This is possible with a bit of Spring magic provided by the following bean definition in `dispatcher-servlet.xml`:
@@ -416,10 +481,16 @@
<bean class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>
----
This bean is responsible for automatically creating an URL mapping for all controllers registered in the file. It takes the fully-qualified class name of the controller (in our case, `controller.HelloController`) and strips the package name and `Controller` suffix, then uses the result as a URL mapping. Therefore, for `HelloController` it creates a `hello.htm` mapping. This magic however does not work for controllers that are included in the Spring Framework, such as `ParameterizableViewController`. They require an explicit mapping.
-9. In the Projects window right-click the project node and choose Run. This compiles, deploys and runs the project. Your default browser opens, displaying `hello.htm` as the project's `nameView`:
+
+[start=9]
+. In the Projects window right-click the project node and choose Run. This compiles, deploys and runs the project. Your default browser opens, displaying `hello.htm` as the project's `nameView`:
+
image::images/name-view.png[title="nameView is displayed in a browser"]
+
Enter your name in the text field and click enter. The `helloView` displays with a greeting message:
+
image::images/hello-view.png[title="helloView is displayed in a browser"]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Spring[+Send Us Your Feedback+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_ja.asciidoc
index dd8771d..2062375 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_ja.asciidoc
@@ -82,16 +82,29 @@
Java EEのバージョンは、選択したサーバーのバージョンによって異なります。選択したサーバーがGlassFish Server 4.0の場合、デフォルトJava EEバージョンはJava EE 7 Webです。
-5. ステップ4の「フレームワーク」パネルで、「Spring Web MVC」を選択します。
-6. 「Springライブラリ」ドロップダウン・リストで*「Spring Framework 3.x」*を選択します。
+
+[start=5]
+. ステップ4の「フレームワーク」パネルで、「Spring Web MVC」を選択します。
+
+[start=6]
+. 「Springライブラリ」ドロップダウン・リストで*「Spring Framework 3.x」*を選択します。
+
image::images/frameworks-window.png[title="「フレームワーク」パネルに表示された「Spring Web MVC」"]
IDEではSpring 4.xライブラリをプロジェクトに追加できますが、このチュートリアルではSpring 4.xでサポートされていないSimpleFormControllerを使用します。また、Spring Web MVCを選択すると、デフォルトでプロジェクト作成時にJSTL (JavaServer Pages Standard Tag Library)ライブラリがクラスパスに追加されます。このチュートリアルではJSTLは必要ないため、このオプションの選択を解除します(上のスクリーンショットを参照)。
-7. 「構成」タブをクリックすると、このウィザードでSpring Dispatcherサーブレットの名前とマッピングを指定できます。
+
+[start=7]
+. 「構成」タブをクリックすると、このウィザードでSpring Dispatcherサーブレットの名前とマッピングを指定できます。
+
image::images/spring-configuration.png[title="「構成」タブでのSpring Dispatcherサーブレットの名前とマッピングの指定"]
-8. 「終了」をクリックします。IDEでアプリケーション全体のプロジェクトが作成されます。このプロジェクトには、すべてのメタデータに加え、「ファイル」ウィンドウ([Ctrl]-[2]、Macの場合は[⌘]-[2])から検査できる、プロジェクトのAntビルド・スクリプトが含まれます。テンプレート構造は「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])から表示できます。また、IDEのエディタで`dispatcher-servlet.xml`、`applicationContext.xml`、`redirect.jsp`および`index.jsp`の4つのファイルがデフォルトで開きます。
-9. 「プロジェクト」ウィンドウで新規プロジェクトの「ライブラリ」ノードを展開すると、Spring JARがプロジェクトのクラスパスに含まれていることが確認できます。
+
+[start=8]
+. 「終了」をクリックします。IDEでアプリケーション全体のプロジェクトが作成されます。このプロジェクトには、すべてのメタデータに加え、「ファイル」ウィンドウ([Ctrl]-[2]、Macの場合は[⌘]-[2])から検査できる、プロジェクトのAntビルド・スクリプトが含まれます。テンプレート構造は「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])から表示できます。また、IDEのエディタで`dispatcher-servlet.xml`、`applicationContext.xml`、`redirect.jsp`および`index.jsp`の4つのファイルがデフォルトで開きます。
+
+[start=9]
+. 「プロジェクト」ウィンドウで新規プロジェクトの「ライブラリ」ノードを展開すると、Spring JARがプロジェクトのクラスパスに含まれていることが確認できます。
+
image::images/spring-libraries.png[title="プロジェクトの「ライブラリ」ノードに一覧表示されているSpring JAR"]
@@ -100,9 +113,12 @@
プロジェクト・ファイルになんらかの変更を加える前に、次のようにIDEで新規プロジェクトの実行を試します。
-1. IDEのメイン・ツールバーにある「プロジェクトの実行」(image::images/run-project-btn.png[])をクリックします。GlassFishサーバーが実行されていない場合は、IDEが自動的にGlassFishサーバーを起動し、プロジェクトをコンパイルしてサーバーにデプロイします。出力内容は、IDEの出力ウィンドウ([Ctrl]-[4]、Macの場合は[⌘]-[4])に表示されます。生成された出力は、「`BUILD SUCCESSFUL`」のメッセージが表示されて完了します。
+1. IDEのメイン・ツールバーにある「プロジェクトの実行」(image:images/run-project-btn.png[])をクリックします。GlassFishサーバーが実行されていない場合は、IDEが自動的にGlassFishサーバーを起動し、プロジェクトをコンパイルしてサーバーにデプロイします。出力内容は、IDEの出力ウィンドウ([Ctrl]-[4]、Macの場合は[⌘]-[4])に表示されます。生成された出力は、「`BUILD SUCCESSFUL`」のメッセージが表示されて完了します。
+
image::images/output.png[title="プロジェクト実行時の情報が表示された「出力」ウィンドウ"]
+
IDEのデフォルト・ブラウザが開始され、開始ページのビュー(`/WEB-INF/jsp/index.jsp`)からコンテンツが表示されます。
+
image::images/browser-output.png[title="ブラウザに表示された開始ページ出力"]
IDEでプロジェクトを実行すると、コンパイルされたプロジェクトがサーバーにデプロイされ、デフォルトのブラウザで開かれます。また、IDEには「保存時にデプロイ」機能が用意されており、Webプロジェクトに対してデフォルトでアクティブ化されています。ファイルをエディタで保存すると、プロジェクトが自動的に再コンパイルされ、サーバーにデプロイされます。変更の確認は、ブラウザでページを単純にリフレッシュするのみで表示できます。
@@ -190,7 +206,7 @@
これまでの手順で、環境を適切に設定できたため、次は必要に応じてスケルトン・プロジェクトを拡張します。`HelloService`クラスの作成から始めます。
-1. IDEのメイン・ツールバーにある「新規ファイル」(image::images/new-file-btn.png[])ボタンをクリックします。または、[Ctrl]-[N] (Macの場合は[⌘]-[N])を押します。
+1. IDEのメイン・ツールバーにある「新規ファイル」(image:images/new-file-btn.png[])ボタンをクリックします。または、[Ctrl]-[N] (Macの場合は[⌘]-[N])を押します。
2. 「*Java*」カテゴリを選択し、「*Javaクラス*」を選択して、「次」をクリックします。
3. 表示された新規Javaクラス・ウィザードで、「クラス名」に「*HelloService*」、「パッケージ」に「*service*」と入力して、このクラスの新規パッケージを作成します。
4. 「終了」をクリックします。IDEによって新しいクラスが生成され、エディタで開きます。
@@ -218,14 +234,26 @@
*注意: *SimpleFormControllerはSpring 3.xで非推奨になっています。このチュートリアルでは、デモの目的でのみ使用されます。ただし、注釈の付いたコントローラをXMLファイルのかわりに使用してください。
1. [Ctrl]-[N] (Macの場合は[⌘]-[N])を押して、新規ファイル・ウィザードを開きます。「カテゴリ」で「*Spring Framework*」を選択します。または、「ファイル・タイプ」で「*単純フォーム・コントローラ*」を選択します。
+
image::images/simple-form-controller.png[title="NetBeans IDEで提供される様々なSpringアーティファクト用のテンプレート"]
+
[tips]#NetBeans IDEには、「Spring XML構成ファイル」、「link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/AbstractController.html[+`抽象コントローラ`+]」、「link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html[+`単純フォーム・コントローラ`+]」など、様々なSpringアーティファクト用のテンプレートが用意されています。#
-2. 「次」をクリックします。
-3. クラスに「*HelloController*」という名前を付け、「パッケージ」テキスト・フィールドに「*controller*」と入力してクラスの新規パッケージを作成します。「終了」をクリックします。IDEによって新しいクラスが生成され、エディタで開きます。
-4. クラス・テンプレートのデフォルトで表示する取得メソッドのコメントを解除し、コントローラ・プロパティを指定します。コード・スニペットのコメントを解除するには、次のイメージに示すようにコードを強調表示して、[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。
+
+[start=2]
+. 「次」をクリックします。
+
+[start=3]
+. クラスに「*HelloController*」という名前を付け、「パッケージ」テキスト・フィールドに「*controller*」と入力してクラスの新規パッケージを作成します。「終了」をクリックします。IDEによって新しいクラスが生成され、エディタで開きます。
+
+[start=4]
+. クラス・テンプレートのデフォルトで表示する取得メソッドのコメントを解除し、コントローラ・プロパティを指定します。コード・スニペットのコメントを解除するには、次のイメージに示すようにコードを強調表示して、[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。
+
image::images/comment-out.png[title="コード・スニペットを強調表示した後の[Ctrl]-[/]の押下によるコメントの切替え"]
+
[tips]#[Ctrl]-[/] (Macの場合は[⌘]-[/])を押して、エディタ内のコメントを切り替えます。#
-5. 次のように変更を加えます(*太字*で表示)。
+
+[start=5]
+. 次のように変更を加えます(*太字*で表示)。
[source,java]
----
@@ -246,10 +274,18 @@
ここで、各リクエストの情報を保持するための単純なBeanとして、`Name`クラスを作成する必要があります。
-6. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「新規」>「Javaクラス」を選択します。新規Javaクラス・ウィザードが表示されます。
-7. 「クラス名」に「*Name*」と入力し、「パッケージ」のドロップダウン・リストから「*controller*」を選択します。
-8. 「終了」をクリックします。`Name`クラスが作成され、エディタで開きます。
-9. `Name`クラスに対し、`value`という名前のフィールドを作成し、このフィールドのアクセッサ・メソッド(取得メソッドと設定メソッド)を作成します。まず、`value`フィールドを宣言します。
+
+[start=6]
+. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「新規」>「Javaクラス」を選択します。新規Javaクラス・ウィザードが表示されます。
+
+[start=7]
+. 「クラス名」に「*Name*」と入力し、「パッケージ」のドロップダウン・リストから「*controller*」を選択します。
+
+[start=8]
+. 「終了」をクリックします。`Name`クラスが作成され、エディタで開きます。
+
+[start=9]
+. `Name`クラスに対し、`value`という名前のフィールドを作成し、このフィールドのアクセッサ・メソッド(取得メソッドと設定メソッド)を作成します。まず、`value`フィールドを宣言します。
[source,java]
----
@@ -265,8 +301,11 @@
IDEでアクセッサ・メソッドが作成されます。エディタ内で`value`を右クリックし、「コードを挿入」を選択するか、[Alt]-[Insert] (Macの場合は[Ctrl]-[I])を押します。ポップアップ・メニューで、「取得メソッドおよび設定メソッド」を選択します。
+
image::images/generate-code.png[title="「コードを生成」ポップアップ・メニューから使用できるアクセッサ・メソッドの設定"]
-10. 表示されるダイアログで、「`value: String`」オプションを選択し、「OK」をクリックします。`getValue()`および`setValue()`メソッドが`Name`クラスに追加されます。
+
+[start=10]
+. 表示されるダイアログで、「`value: String`」オプションを選択し、「OK」をクリックします。`getValue()`および`setValue()`メソッドが`Name`クラスに追加されます。
[source,java]
----
@@ -279,8 +318,12 @@
this.value = value;
}
----
-11. [Ctrl]-[Tab]を押し、`HelloController`を選択して、`HelloController`クラスに切り替えます。`Name`クラスが存在するようになったため、以前のエラー・バッジは表示されなくなります。
-12. `doSubmitAction()`メソッドを削除し、link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html#setFormView(java.lang.String)[+`onSubmit()`+]メソッドのコメントを解除します。`onSubmit()`メソッドを使用し、ここで必要な独自の`ModelAndView`を作成できます。次の変更を加えます。
+
+[start=11]
+. [Ctrl]-[Tab]を押し、`HelloController`を選択して、`HelloController`クラスに切り替えます。`Name`クラスが存在するようになったため、以前のエラー・バッジは表示されなくなります。
+
+[start=12]
+. `doSubmitAction()`メソッドを削除し、link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html#setFormView(java.lang.String)[+`onSubmit()`+]メソッドのコメントを解除します。`onSubmit()`メソッドを使用し、ここで必要な独自の`ModelAndView`を作成できます。次の変更を加えます。
[source,java]
----
@@ -299,12 +342,17 @@
}
----
上記に示すとおり、`command`は`Name`オブジェクトにキャストされます。`ModelAndView`のインスタンスが作成され、成功ビューが`SimpleFormController`の取得メソッドを使用して取得されます。最後に、モデルにデータが取り込まれます。このモデル内の唯一の項目は、以前の手順で作成した`HelloService`から取得された挨拶メッセージです。`addObject()`メソッドを使用し、`helloMessage`という名前のモデルに挨拶メッセージを追加します。
-13. エディタ内を右クリックし、「インポートを修正」([Ctrl]-[Shift]-[I]、Macの場合は[⌘]-[Shift]-[I])を選択してインポート・エラーを修正します。
+
+[start=13]
+. エディタ内を右クリックし、「インポートを修正」([Ctrl]-[Shift]-[I]、Macの場合は[⌘]-[Shift]-[I])を選択してインポート・エラーを修正します。
+
image::images/fix-imports70.png[title="[Ctrl]-[Shift]-[I]の押下によるファイルのインポートの修正"]
*注意:*「すべてのインポートを修正」ダイアログ・ボックスで* ``org.springframework.validation.BindException`` *と* ``org.springframework.web.servlet.ModelAndView`` *が選択されていることを確認してください。
-14. 「OK」をクリックします。次のインポート文がファイルの最初に追加されます。
+
+[start=14]
+. 「OK」をクリックします。次のインポート文がファイルの最初に追加されます。
[source,java]
----
@@ -314,7 +362,9 @@
APIドキュメントで説明されているように、このクラスは「ハンドラによって返されるモデルとビューを示しており、`DispatcherServlet`によって解決されます。このビューは、`ViewResolver`によって解決される必要がある`String`ビュー名か、または直接指定できる`View`オブジェクトの形を取ることができます。モデルは`Map`であるため、名前をキーとする複数のオブジェクトが使用できます」。
この時点では、クラスで`HelloService`クラスを特定することも、`sayHello()`メソッドを使用することもできないため、すべてのエラーが修正されるわけではありません。
-15. `HelloController`内で`HelloService`という名前のprivateフィールドを宣言します。
+
+[start=15]
+. `HelloController`内で`HelloService`という名前のprivateフィールドを宣言します。
[source,java]
----
@@ -338,7 +388,9 @@
import service.HelloService;
----
今度はすべてのエラーが修正されるはずです。
-16. `HelloService`を`applicationContext.xml`に登録します。`applicationContext.xml`をエディタで開き、次のBean宣言を入力します。
+
+[start=16]
+. `HelloService`を`applicationContext.xml`に登録します。`applicationContext.xml`をエディタで開き、次のBean宣言を入力します。
[source,java]
----
@@ -346,8 +398,11 @@
<bean name="helloService" class="service.HelloService" />
----
IDE内のSpringサポートには、Bean参照と同様に、JavaクラスのXML構成ファイル内でのコード補完が含まれています。コード補完を呼び出すには、エディタでの作業時に[Ctrl]-[Space]を押します。
+
image::images/code-completion.png[title="[Ctrl]-[Space]を押して呼び出されたコード補完"]
-17. `HelloController`を`dispatcher-servlet.xml`に登録します。`dispatcher-servlet.xml`をエディタで開き、次のBean宣言を入力します。
+
+[start=17]
+. `HelloController`を`dispatcher-servlet.xml`に登録します。`dispatcher-servlet.xml`をエディタで開き、次のBean宣言を入力します。
[source,java]
----
@@ -377,8 +432,12 @@
</body>
----
-4. もう1つのJSPページを<<create-jsp,上記>>と同じ方法で作成し、名前は「`nameView`」とします。
-5. エディタで、次のSpringタグ・ライブラリ宣言を`nameView.jsp`に追加します。
+
+[start=4]
+. もう1つのJSPページを<<create-jsp,上記>>と同じ方法で作成し、名前は「`nameView`」とします。
+
+[start=5]
+. エディタで、次のSpringタグ・ライブラリ宣言を`nameView.jsp`に追加します。
[source,java]
----
@@ -386,8 +445,12 @@
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
----
これにより、link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html[+Springタグ・ライブラリ+]がインポートされます。このライブラリには、ビューをJSPページとして実装する際に役立つタグが格納されます。
-6. 「`Enter your name`」の入力を読み取るように、`<title>`タグと`<h1>`タグの内容を変更します。
-7. `<h1>`タグの下に次のコードを入力します。
+
+[start=6]
+. 「`Enter your name`」の入力を読み取るように、`<title>`タグと`<h1>`タグの内容を変更します。
+
+[start=7]
+. `<h1>`タグの下に次のコードを入力します。
[source,xml]
----
@@ -406,7 +469,9 @@
link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html#spring.tld.bind[+spring:bind+]を使用することで、Beanプロパティをバインドできます。bindタグによってバインド・ステータスと値が提供され、これが入力フィールドの名前および値として使用されます。この方法で、フォームの送信時に、送信された値の抽出方法がSpringで識別されます。ここで、コマンド・クラス(`controller.Name`)に`value`プロパティが追加されるため、「`path`」を「`value`」に設定します。
link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html#spring.tld.nestedPath[+spring:nestedPath+]を使用することで、指定したパスをBeanの前に付加できます。そのため、上記のように`spring:bind`と一緒に使用すると、Beanへのパスは`name.value`になります。再コール時、`HelloController`コマンドの名前は`name`になります。そのため、ページ範囲内の`name`という名前のBeanの`value`プロパティがこのパスから参照されます。
-8. アプリケーションの相対エントリ・ポイントを変更します。現在、プロジェクトのエントリ・ポイントは依然として`index.htm`であり、前述の<<running,スケルトン・プロジェクトの実行>>にあるとおり、このページから`WEB-INF/jsp/index.jsp`にリダイレクトされます。プロジェクトのデプロイおよび実行時のエントリ・ポイントを指定できます。「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「プロパティ」を選択します。「プロジェクト・プロパティ」ダイアログが表示されます。「カテゴリ」で「実行」を選択します。「相対URL」フィールドに「`/hello.htm`」と入力し、「OK」をクリックします。
+
+[start=8]
+. アプリケーションの相対エントリ・ポイントを変更します。現在、プロジェクトのエントリ・ポイントは依然として`index.htm`であり、前述の<<running,スケルトン・プロジェクトの実行>>にあるとおり、このページから`WEB-INF/jsp/index.jsp`にリダイレクトされます。プロジェクトのデプロイおよび実行時のエントリ・ポイントを指定できます。「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「プロパティ」を選択します。「プロジェクト・プロパティ」ダイアログが表示されます。「カテゴリ」で「実行」を選択します。「相対URL」フィールドに「`/hello.htm`」と入力し、「OK」をクリックします。
この時点では、`hello.htm`から`HelloController`へのマッピングがどこにあるか疑問に感じるかもしれません。`urlMapping` Beanへのマッピングは、スケルトン・プロジェクトの開始ページである`index.htm`の場合と同様に、まだ追加していません。この処理は、次のようにBeanを`dispatcher-servlet.xml`に定義することで実現できるSpringの機能を使用すれば可能になります。
@@ -416,10 +481,16 @@
<bean class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>
----
このBeanには、このファイルに登録されたすべてのコントローラに対してURLマッピングを自動的に作成する役割があります。コントローラ(ここでは`controller.HelloController`)の完全修飾クラス名が取得され、パッケージ名と`Controller`接尾辞が取り除かれて、その結果がURLマッピングに使用されます。そのため、`HelloController`の場合は`hello.htm`というマッピングが作成されます。しかしこの機能は、`ParameterizableViewController`のようなSpring Frameworkに含まれるコントローラには機能しません。これらには、明示的なマッピングが必要になります。
-9. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。これにより、プロジェクトがコンパイル、デプロイおよび実行されます。デフォルト・ブラウザが開き、`hello.htm`がプロジェクトの`nameView`として表示されます。
+
+[start=9]
+. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。これにより、プロジェクトがコンパイル、デプロイおよび実行されます。デフォルト・ブラウザが開き、`hello.htm`がプロジェクトの`nameView`として表示されます。
+
image::images/name-view.png[title="ブラウザでのnameViewの表示"]
+
テキスト・フィールドに名前を入力し、[Enter]を押します。`helloView`が次のように挨拶メッセージと一緒に表示されます。
+
image::images/hello-view.png[title="ブラウザでのhelloViewの表示"]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Spring[+ご意見をお寄せください+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_pt_BR.asciidoc
index 7d572f2..aeb2018 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_pt_BR.asciidoc
@@ -82,16 +82,29 @@
A versão do Java EE depende da versão do servidor que está selecionada. A versão default do Java EE é Java EE 7 Web quando o servidor selecionado for GlassFish Server 4.0
-5. Na Etapa 4, no painel Frameworks, selecione Spring Web MVC.
-6. Selecione *Spring Framework 3.x* na lista drop-down Biblioteca de Springs.
+
+[start=5]
+. Na Etapa 4, no painel Frameworks, selecione Spring Web MVC.
+
+[start=6]
+. Selecione *Spring Framework 3.x* na lista drop-down Biblioteca de Springs.
+
image::images/frameworks-window.png[title="Spring Web MVC exibido no painel Frameworks"]
Observe que o IDE permite adicionar a biblioteca do Spring 4.x ao projeto, mas neste tutorial você usará SimpleFormController, que não é suportado no Spring 4.x. Além disso, quando você selecionar Spring Web MVC, lembre-se de que a biblioteca JSTL (JavaServer Pages Standard Tag Library) é adicionada ao classpath durante a criação do projeto por padrão. Desmarque essa opção (conforme indicado na captura de tela acima), já que o JSTL não é necessário para este tutorial.
-7. Clique na guia Configuração e observe que o assistente permite especificar o nome e o mapeamento do servlet Spring Dispatcher.
+
+[start=7]
+. Clique na guia Configuração e observe que o assistente permite especificar o nome e o mapeamento do servlet Spring Dispatcher.
+
image::images/spring-configuration.png[title="Especifique o nome e o mapeamento do servlet Spring Dispatcher na guia Configuração"]
-8. Clique em Finalizar. O IDE cria um projeto para a aplicação inteiro, incluindo todos os metadados, assim como o script de construção Ant do projeto que você pode inspecionar na janela Arquivos (Ctrl-2; &#8984-2 no Mac). Você pode exibir a estrutura do modelo na janela Projetos (Ctrl-1; &#8984-1 no Mac). Observe também que quatro arquivos são abertos por default no editor do IDE: `dispatcher-servlet.xml`, `applicationContext.xml`, `redirect.jsp` e `index.jsp`.
-9. Na janela Projetos, expanda o novo nó Bibliotecas do projeto e observe que JARs do Spring estão incluídos no classpath do projeto.
+
+[start=8]
+. Clique em Finalizar. O IDE cria um projeto para a aplicação inteiro, incluindo todos os metadados, assim como o script de construção Ant do projeto que você pode inspecionar na janela Arquivos (Ctrl-2; &#8984-2 no Mac). Você pode exibir a estrutura do modelo na janela Projetos (Ctrl-1; &#8984-1 no Mac). Observe também que quatro arquivos são abertos por default no editor do IDE: `dispatcher-servlet.xml`, `applicationContext.xml`, `redirect.jsp` e `index.jsp`.
+
+[start=9]
+. Na janela Projetos, expanda o novo nó Bibliotecas do projeto e observe que JARs do Spring estão incluídos no classpath do projeto.
+
image::images/spring-libraries.png[title="Os JARs Spring são listados no nó das Bibliotecas do projeto"]
@@ -100,9 +113,12 @@
Antes de fazer quaisquer alterações nos arquivos do projeto, tente executar o novo projeto no IDE:
-1. Clique em Executar Projeto (image::images/run-project-btn.png[]) na barra de ferramentas principal do IDE. O IDE inicia automaticamente o GlassFish Server se ele ainda não estiver sendo executado, compila o projeto e o implanta no servidor. Observe as saída exibida na janela de Saída do IDE (Ctrl-4; &#8984-4 no Mac). A saída gerada termina com a mensagem `BUILD SUCCESSFUL.`
+1. Clique em Executar Projeto (image:images/run-project-btn.png[]) na barra de ferramentas principal do IDE. O IDE inicia automaticamente o GlassFish Server se ele ainda não estiver sendo executado, compila o projeto e o implanta no servidor. Observe as saída exibida na janela de Saída do IDE (Ctrl-4; &#8984-4 no Mac). A saída gerada termina com a mensagem `BUILD SUCCESSFUL.`
+
image::images/output.png[title="A janela de Saída exibe informações ao executar o projeto"]
+
O browser default do IDE é iniciado e você vê o conteúdo da view da página de boas-vindas (`/WEB-INF/jsp/index.jsp`).
+
image::images/browser-output.png[title="A saída de página de boas-vindas é exibida no browser"]
Quando você executa o projeto no IDE, o projeto é compilado e implantado no servidor e, em seguida, aberto no browser default. Além disso, o IDE fornece uma funcionalidade Implantar ao Salvar, que é ativado por default em projetos Web. Quando você salva arquivos no editor, o projeto é automaticamente recompilado e implantado no servidor. Para exibir alterações, você pode, simplesmente, atualizar as páginas no browser.
@@ -190,7 +206,7 @@
Agora que você tem certeza de que seu ambiente está configurado corretamente, você pode começar a estender o projeto de esqueleto de acordo com as suas necessidades. Comece criando a classe `HelloService`.
-1. 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. 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 *Java*, *Classe Java* e clique em Próximo.
3. No assistente de Nova Classe Java exibido, digite *HelloService* no Nome da Classe e *service* no Nome do Pacote para criar um novo pacote para a classe.
4. Clique em Finalizar. O IDE cria a nova classe e a abre no editor.
@@ -218,14 +234,26 @@
*Observação: *SimpleFormController é obsoleto no Spring 3.x. Ele é utilizado neste tutorial para fins de demonstração. Entretanto, os controladores anotados devem ser utilizados em vez dos arquivos XML.
1. Abra o assistente de Novo Arquivo pressionando Ctrl-N (⌘-N no Mac). Em Categorias, selecione *Spring Framework* em Tipos de Arquivos e *Controlador de Form Simplificado*.
+
image::images/simple-form-controller.png[title="O NetBeans IDE fornece modelos para diversos artefatos do Spring"]
+
[tips]#O NetBeans IDE fornece modelos para vários artefatos do Spring, incluindo o Arquivo de Configuração do Spring XML, o link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/AbstractController.html[+`AbstractController`+] e o link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html[+`SimpleFormController`+].#
-2. Clique em Próximo.
-3. Chame a classe de *HelloController* e crie um novo pacote para ela, digitando *controller* no campo de texto Pacote. Clique em Finalizar. O IDE cria a nova classe e a abre no editor.
-4. Especifique as propriedades do controlador, removendo o comentário dos métodos setter exibidos por default no modelo da classe. Para remover os comentários do snippet de código, realce o código como na imagem a seguir e pressione Ctrl-/ (&#8984-/ no Mac).
+
+[start=2]
+. Clique em Próximo.
+
+[start=3]
+. Chame a classe de *HelloController* e crie um novo pacote para ela, digitando *controller* no campo de texto Pacote. Clique em Finalizar. O IDE cria a nova classe e a abre no editor.
+
+[start=4]
+. Especifique as propriedades do controlador, removendo o comentário dos métodos setter exibidos por default no modelo da classe. Para remover os comentários do snippet de código, realce o código como na imagem a seguir e pressione Ctrl-/ (&#8984-/ no Mac).
+
image::images/comment-out.png[title="Realce os snippets do código e, em seguida, pressione Ctrl-/ para alternar entre os comentários"]
+
[tips]#Pressionar Ctrl-/ (&#8984-/ no Mac) alterna entre os comentários no editor.#
-5. Faças as alterações a seguir (alterações em *negrito*).
+
+[start=5]
+. Faças as alterações a seguir (alterações em *negrito*).
[source,java]
----
@@ -246,10 +274,18 @@
Você precisa criar a classe `Name` como um bean simples para manter as informações de cada solicitação.
-6. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Nova > Classe Java. O assistente de Nova Classe Java é exibido.
-7. Digite *Name* para o Nome da Classe, e, para Pacote, selecione *controller* na lista drop-down.
-8. Clique em Finalizar. A classe `Name` é criada e aberta no editor.
-9. Para a classe `Name`, crie um campo denominado `value` e, em seguida, crie os métodos acessadores (por exemplo, os métodos getter e setter) para esse campo. Inicie declarando o campo `value`:
+
+[start=6]
+. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Nova > Classe Java. O assistente de Nova Classe Java é exibido.
+
+[start=7]
+. Digite *Name* para o Nome da Classe, e, para Pacote, selecione *controller* na lista drop-down.
+
+[start=8]
+. Clique em Finalizar. A classe `Name` é criada e aberta no editor.
+
+[start=9]
+. Para a classe `Name`, crie um campo denominado `value` e, em seguida, crie os métodos acessadores (por exemplo, os métodos getter e setter) para esse campo. Inicie declarando o campo `value`:
[source,java]
----
@@ -265,8 +301,11 @@
O IDE pode criar métodos do assessor para você. No editor, clique com o botão direito do mouse em `valor` e selecione Inserir Código (ou pressione Alt-Insert; Ctrl-I no Mac). No menu pop-up, escolha Getter e Setter.
+
image::images/generate-code.png[title="O menu pop-up Gerar Código permite definir métodos acessadores"]
-10. Na caixa de diálogo exibida, selecione a opção `value : String`e clique em OK. Os métodos `getValue()` e `setValue()` são adicionados à classe `Name`:
+
+[start=10]
+. Na caixa de diálogo exibida, selecione a opção `value : String`e clique em OK. Os métodos `getValue()` e `setValue()` são adicionados à classe `Name`:
[source,java]
----
@@ -279,8 +318,12 @@
this.value = value;
}
----
-11. Pressione Ctrl-Tab e selecione `HelloController` para retornar à classe `HelloController`. Observe que o indicador de erro anterior desapareceu, mas a classe `Name` existe agora.
-12. Delete o método `doSubmitAction()` e remova os comentários do método link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html#setFormView(java.lang.String)[+`onSubmit()`+]. O método `onSubmit()` permite que você crie seu próprio `ModelAndView`, que é o necessário aqui. Faça as seguintes alterações:
+
+[start=11]
+. Pressione Ctrl-Tab e selecione `HelloController` para retornar à classe `HelloController`. Observe que o indicador de erro anterior desapareceu, mas a classe `Name` existe agora.
+
+[start=12]
+. Delete o método `doSubmitAction()` e remova os comentários do método link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html#setFormView(java.lang.String)[+`onSubmit()`+]. O método `onSubmit()` permite que você crie seu próprio `ModelAndView`, que é o necessário aqui. Faça as seguintes alterações:
[source,java]
----
@@ -299,12 +342,17 @@
}
----
Conforme indicado acima, o `command` é reconvertido como um objeto `Name`. Uma instância de `ModelAndView` é criada, e a view de sucesso é obtida por meio de um getter em `SimpleFormController`. Finalmente, o modelo é preenchido com os dados. O único item em nosso modelo é a mensagem hello obtida do `HelloService` criado anteriormente. Use o método `addObject()` para adicionar a mensagem hello ao modelo sob o nome `helloMessage`.
-13. Corrija os erros de importação clicando com o botão direito do mouse no editor e selecionando Corrigir importações (Ctrl-Shift-I; ⌘-Shift-I no Mac).
+
+[start=13]
+. Corrija os erros de importação clicando com o botão direito do mouse no editor e selecionando Corrigir importações (Ctrl-Shift-I; ⌘-Shift-I no Mac).
+
image::images/fix-imports70.png[title="Pressione Ctrl-Shift-I para corrigir as importações no seu arquivo"]
*Observação.* Certifique-se de que as opções * ``org.springframework.validation.BindException`` * e * ``org.springframework.web.servlet.ModelAndView`` * estejam selecionadas na caixa de diálogo Corrigir Todas as Importações.
-14. Clique em OK. A instrução de importação a seguir será adicionada ao início do arquivo:
+
+[start=14]
+. Clique em OK. A instrução de importação a seguir será adicionada ao início do arquivo:
[source,java]
----
@@ -314,7 +362,9 @@
Conforme informado na documentação da API, essa classe "representa um modelo e uma view retornados por um handler, a serem resolvidos por um `DispatcherServlet`. A view pode tomar a forma de um nome de view de `String`, que precisará ser resolvido por um objeto `ViewResolver`, como alternativa, um objeto `View` poderá ser especificado diretamente. O modelo é um `Map`, que permite o uso de vários objetos, classificados por nome".
Observe que nesse estágio, nem todos os erros são corrigidos, pois a classe ainda não pode identificar a classe `HelloService` e não utiliza seu método `sayHello()`.
-15. No `HelloController`, declare um campo privado chamado `HelloService`:
+
+[start=15]
+. No `HelloController`, declare um campo privado chamado `HelloService`:
[source,java]
----
@@ -338,7 +388,9 @@
import service.HelloService;
----
Todos os erros deverão ser corrigidos agora.
-16. Registre `HelloService` em `applicationContext.xml`. Abra `applicationContext.xml` no editor e insira a seguinte declaração de bean:
+
+[start=16]
+. Registre `HelloService` em `applicationContext.xml`. Abra `applicationContext.xml` no editor e insira a seguinte declaração de bean:
[source,java]
----
@@ -346,8 +398,11 @@
<bean name="helloService" class="service.HelloService" />
----
O suporte a Spring no IDE inclui a funcionalidade autocompletar código nos arquivos de configuração XML para classes Java, bem como nas referências de bean. Para chamar a funcionalidade autocompletar código, pressione Ctrl-Espaço ao trabalhar no editor:
+
image::images/code-completion.png[title="Funcionalidade autocompletar código chamada ao pressionar Ctrl-Espaço"]
-17. Registre `HelloController` em `dispatcher-servlet.xml`. Abra `dispatcher-servlet.xml` no editor e insira a seguinte declaração de bean:
+
+[start=17]
+. Registre `HelloController` em `dispatcher-servlet.xml`. Abra `dispatcher-servlet.xml` no editor e insira a seguinte declaração de bean:
[source,java]
----
@@ -377,8 +432,12 @@
</body>
----
-4. Crie outra página JSP da mesma maneira <<create-jsp,conforme acima>>, mas nomeie-a como `nameView`.
-5. No editor, adicione a declaração da biblioteca de tags do Spring a seguir a `nameView.JSP`.
+
+[start=4]
+. Crie outra página JSP da mesma maneira <<create-jsp,conforme acima>>, mas nomeie-a como `nameView`.
+
+[start=5]
+. No editor, adicione a declaração da biblioteca de tags do Spring a seguir a `nameView.JSP`.
[source,java]
----
@@ -386,8 +445,12 @@
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
----
Isso importa a link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html[+biblioteca de tags do Spring+], que contém tags úteis para a implementação de views como páginas JSP.
-6. Altere o conteúdo das tags `<title>` e `<h1>` para que se leia: `Enter Your Name`.
-7. Insira o código a seguir abaixo das tags `<h1>`:
+
+[start=6]
+. Altere o conteúdo das tags `<title>` e `<h1>` para que se leia: `Enter Your Name`.
+
+[start=7]
+. Insira o código a seguir abaixo das tags `<h1>`:
[source,xml]
----
@@ -406,7 +469,9 @@
link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html#spring.tld.bind[+spring:bind+] permite que você vincule uma propriedade de bean. A tag de vinculação fornece um status de e valor de vinculação, que você utiliza como o nome e o valor do campo de entrada. Dessa forma, quando o form for enviado, o Spring saberá como extrair o valor enviado. Aqui, nossa classe de comando (`controller.Name`) possui uma propriedade `value`, portanto, a definição de `path` como `value`.
link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html#spring.tld.nestedPath[+spring:nestedPath+] permite que você anexe um caminho especificado a um bean. Sendo assim, quando usado com `spring:bind` conforme mostrado acima, o caminho para o bean se torna: `name.value`. Como você deve lembrar, o nome do comando de `HelloController` é `name`. Portanto, esse caminho se refere à propriedade `value` de um bean chamado `name` no escopo da página.
-8. Altere o ponto de entrada relativo da aplicação. Atualmente, o ponto de entrada do projeto ainda é `index.htm` que, conforme descrito em <<running,Executando o Projeto de Esqueleto>> acima, redireciona para `WEB-INF/jsp/index.jsp`. Você pode especificar um ponto de entrada para o projeto quando ele é implantado e executado. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Propriedades. A caixa de diálogo Propriedades do Projeto será exibida. Em Categorias, selecione Executar. No campo URL Relativo, digite `/hello.htm`, em seguida, clique em OK.
+
+[start=8]
+. Altere o ponto de entrada relativo da aplicação. Atualmente, o ponto de entrada do projeto ainda é `index.htm` que, conforme descrito em <<running,Executando o Projeto de Esqueleto>> acima, redireciona para `WEB-INF/jsp/index.jsp`. Você pode especificar um ponto de entrada para o projeto quando ele é implantado e executado. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Propriedades. A caixa de diálogo Propriedades do Projeto será exibida. Em Categorias, selecione Executar. No campo URL Relativo, digite `/hello.htm`, em seguida, clique em OK.
Nesse momento, você deve estar pensando onde o mapeamento de `hello.htm` para `HelloController` se encontra. Você não adicionou um mapeamento para o bean `urlMapping`, como é o caso de `index.htm`, a página de boas-vindas do projeto de esqueleto. Isso é possível com um pouco da mágica do Spring fornecida a seguir pela definição do bean em `dispatcher-servlet.xml`:
@@ -416,10 +481,16 @@
<bean class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>
----
Esse bean é responsável por criar automaticamente um mapeamento de URL para todos os controladores registrados no arquivo. Ele pega o nome de classe totalmente qualificado do controlador (em nosso caso, `controller.HelloController`) e retira o nome do pacote e o sufixo `Controller`, em seguida, usa o resultado como um mapeamento de URL. Portanto, para `HelloController`, ele cria um mapeamento `hello.htm`. Entretanto, essa mágica não funciona para controladores que estão incluídos no Spring Framework, como o `ParameterizableViewController`. Eles requerem mapeamento explícito.
-9. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Executar. Isso compilará, implantará e executará o projeto. Seu browser default abrirá, exibindo `hello.htm` como o `nameView` do projeto:
+
+[start=9]
+. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Executar. Isso compilará, implantará e executará o projeto. Seu browser default abrirá, exibindo `hello.htm` como o `nameView` do projeto:
+
image::images/name-view.png[title="A nameView é exibida em um browser"]
+
Informe seu nome no campo de texto e clique Enter. O `helloView` é exibido com uma mensagem de saudação:
+
image::images/hello-view.png[title="A helloView é exibida em um browser"]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Spring[+Envie-nos Seu Feedback+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_ru.asciidoc
index 356aa5e..18267d7 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_ru.asciidoc
@@ -82,16 +82,29 @@
Версия Java EE зависит от версии выбранного сервера. Если выбран сервер GlassFish Server 4.0, в качестве версии Java EE по умолчанию указывается Java EE 7 Web.
-5. На четвертом экране мастера на панели "Frameworks" выберите "Spring Web MVC".
-6. Выберите *Spring Framework 3.x* в списке "Библиотека Spring".
+
+[start=5]
+. На четвертом экране мастера на панели "Frameworks" выберите "Spring Web MVC".
+
+[start=6]
+. Выберите *Spring Framework 3.x* в списке "Библиотека Spring".
+
image::images/frameworks-window.png[title="Spring Web MVC отображается на панели палтформы"]
Обратите внимание, что IDE позволяет добавить библиотеку Spring 4.x в проект, но в данном учебном курсе используется компонент SimpleFormController, не поддерживаемый на платформе Spring 4.x. Кроме того, если выбран вариант Spring Web MVC, следует помнить, что во время создания проекта в путь к классу по умолчанию добавляется библиотека JSTL (JavaServer Pages Standard Tag Library). Отключите этот параметр (как показано на снимке экрана), поскольку в этом учебном курсе не требуется JSTL.
-7. Выберите вкладку "Настройка" и обратите внимание, что в мастере можно настроить имя и отображение сервлета обработчика Spring.
+
+[start=7]
+. Выберите вкладку "Настройка" и обратите внимание, что в мастере можно настроить имя и отображение сервлета обработчика Spring.
+
image::images/spring-configuration.png[title="Укажите имя и сопоставление сервлета Spring Dispatcher на вкладке 'Конфигурация'"]
-8. Нажмите кнопку "Завершить". В результате создается проект для всего приложения, в т.ч. все метаданные, а также сценарий сборки проекта Ant, с которым можно ознакомиться в окне "Файлы" (сочетание клавиш CTRL+2; &#8984+2 в Mac OS). Структуру шаблона можно просмотреть в окне "Проекты" (сочетание клавиш CTRL+1; &#8984+1 в Mac OS). Также следует отметить, что по умолчанию в редакторе среды IDE открываются четыре файла: `dispatcher-servlet.xml`, `applicationContext.xml`, `redirect.jsp` и `index.jsp`.
-9. В окне 'Проекты' разверните узел 'Библиотеки' нового проекта и обратите внимание, что файлы JAR Spring включены в путь к классу проекта.
+
+[start=8]
+. Нажмите кнопку "Завершить". В результате создается проект для всего приложения, в т.ч. все метаданные, а также сценарий сборки проекта Ant, с которым можно ознакомиться в окне "Файлы" (сочетание клавиш CTRL+2; &#8984+2 в Mac OS). Структуру шаблона можно просмотреть в окне "Проекты" (сочетание клавиш CTRL+1; &#8984+1 в Mac OS). Также следует отметить, что по умолчанию в редакторе среды IDE открываются четыре файла: `dispatcher-servlet.xml`, `applicationContext.xml`, `redirect.jsp` и `index.jsp`.
+
+[start=9]
+. В окне 'Проекты' разверните узел 'Библиотеки' нового проекта и обратите внимание, что файлы JAR Spring включены в путь к классу проекта.
+
image::images/spring-libraries.png[title="Файлы JAR Spring указаны в узле 'Библиотеки' проекта"]
@@ -100,9 +113,12 @@
Перед изменением файлов проекта следует попытаться запустить созданный проект в среде IDE:
-1. Нажмите кнопку 'Запустить проект' (image::images/run-project-btn.png[]) на главной панели инструментов IDE. В среде IDE автоматически запускается сервер GlassFish, если он не был запущен, проект компилируется и развертывается на сервере. Обратите внимание на данные, отображаемые в окне "Вывод" среды IDE (сочетание клавиш CTRL+4; &#8984+4 в Mac OS). В конце этих данных отображается сообщение `BUILD SUCCESSFUL`.
+1. Нажмите кнопку 'Запустить проект' (image:images/run-project-btn.png[]) на главной панели инструментов IDE. В среде IDE автоматически запускается сервер GlassFish, если он не был запущен, проект компилируется и развертывается на сервере. Обратите внимание на данные, отображаемые в окне "Вывод" среды IDE (сочетание клавиш CTRL+4; &#8984+4 в Mac OS). В конце этих данных отображается сообщение `BUILD SUCCESSFUL`.
+
image::images/output.png[title="В окне вывода отображаются сведения при запуске проекта"]
+
В среде IDE запускается браузер по умолчанию, и отображается содержимое представления страницы приветствия (`/WEB-INF/jsp/index.jsp`).
+
image::images/browser-output.png[title="Выходные данные страницы приветствия отображаются в браузере"]
При выполнении проекта в среде IDE он компилируется и развертывается на сервере, а затем открывается в браузере по умолчанию. Более того, среда IDE предоставляет возможность "Развертывание при сохранении", которая включена по умолчанию для веб-проектов. При сохранении файлов в редакторе проект автоматически компилируется и развертывается на сервере. Для просмотра изменений достаточно просто обновить страницу в браузере.
@@ -190,7 +206,7 @@
Теперь, после проверки правильности настроек среды, можно начать расширение схемы проекта в соответствии с имеющимися требованиями. Начните с создания класса `HelloService`.
-1. Нажмите кнопку 'Создать файл' (image::images/new-file-btn.png[]) на панели инструментов IDE. (В качестве альтернативы нажмите Ctrl-N; ⌘-N в Mac.)
+1. Нажмите кнопку 'Создать файл' (image:images/new-file-btn.png[]) на панели инструментов IDE. (В качестве альтернативы нажмите Ctrl-N; ⌘-N в Mac.)
2. Выберите категорию *Java*, затем *Класс Java* и нажмите кнопку "Далее".
3. В мастере создания класса Java введите имя класса *HelloService*, затем введите имя пакета *service*, чтобы создать для класса новый пакет.
4. Нажмите кнопку "Завершить". В среде IDE создается и открывается в редакторе новый класс.
@@ -218,14 +234,26 @@
*Примечание: * SimpleFormController устарел в Spring 3.x. Он используется в этом учебном руководстве для выполнения задач демонстрации. Однако следует использовать контроллер с аннотациями вместо файлов XML.
1. Откройте мастер создания файлов, нажав Ctrl-N (⌘-N в Mac). Выберите категорию *Spring Framework* и тип файла *Simple Form Controller*.
+
image::images/simple-form-controller.png[title="IDE NetBeans обеспечивает шаблоны для различных артефактов Spring"]
+
[tips]#IDE NetBeans обеспечивает шаблоны для различных артефактов Spring, включая файл конфигурации Spring XML, link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/AbstractController.html[+`AbstractController`+] и link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html[+`SimpleFormController`+].#
-2. Нажмите кнопку "Далее".
-3. Назовите класс *HelloController* и создайте для него новый пакет, для этого введите в поле "Package" текст *controller*. Нажмите кнопку "Завершить". В среде IDE создается и открывается в редакторе новый класс.
-4. Укажите свойства контроллера, раскомментировав методы установки, отображаемые шаблоном класса по умолчанию. Чтобы раскомментировать фрагмент кода, выделите его, как показано на рисунке, и нажмите сочетание клавиш CTRL+/ (&#8984+/ в Mac OS).
+
+[start=2]
+. Нажмите кнопку "Далее".
+
+[start=3]
+. Назовите класс *HelloController* и создайте для него новый пакет, для этого введите в поле "Package" текст *controller*. Нажмите кнопку "Завершить". В среде IDE создается и открывается в редакторе новый класс.
+
+[start=4]
+. Укажите свойства контроллера, раскомментировав методы установки, отображаемые шаблоном класса по умолчанию. Чтобы раскомментировать фрагмент кода, выделите его, как показано на рисунке, и нажмите сочетание клавиш CTRL+/ (&#8984+/ в Mac OS).
+
image::images/comment-out.png[title="Выделите фрагменты кода, затем нажмите Ctrl-/ для переключения комментариев"]
+
[tips]#Нажатие сочетания клавиш CTRL+/ (&#8984+/ в Mac OS) переключает комментарии в редакторе.#
-5. Внесите следующие изменения (показаны *полужирным шрифтом*).
+
+[start=5]
+. Внесите следующие изменения (показаны *полужирным шрифтом*).
[source,java]
----
@@ -246,10 +274,18 @@
Требуется создать класс `Name` в качестве простого компонента, хранящего данные каждого запроса.
-6. В окне 'Проекты', щелкните правой кнопкой мыши узел проекта и выберите 'Создать' > 'Класс Java'. Отображается мастер создания класса Java.
-7. Введите имя класса *Name* и выберите в выпадающем списке пакет *controller*.
-8. Нажмите кнопку "Завершить". Класс `Name` будет создан и открыт в редакторе.
-9. В классе `Name` создайте поле `value`, затем создайте методы доступа (т.е. методы получения и установки) для этого поля. Сначала объявите поле `value`:
+
+[start=6]
+. В окне 'Проекты', щелкните правой кнопкой мыши узел проекта и выберите 'Создать' > 'Класс Java'. Отображается мастер создания класса Java.
+
+[start=7]
+. Введите имя класса *Name* и выберите в выпадающем списке пакет *controller*.
+
+[start=8]
+. Нажмите кнопку "Завершить". Класс `Name` будет создан и открыт в редакторе.
+
+[start=9]
+. В классе `Name` создайте поле `value`, затем создайте методы доступа (т.е. методы получения и установки) для этого поля. Сначала объявите поле `value`:
[source,java]
----
@@ -265,8 +301,11 @@
В среде IDE предусмотрена возможность автоматического создания методов доступа. В редакторе щелкните правой кнопкой мыши в `value` и выберите 'Вставить код' (или нажмите Alt-Insert; Ctrl-I в Mac). Во всплывающем меню выберите пункт "Методы получения и установки".
+
image::images/generate-code.png[title="Всплывающее меню создания кода позволяет настроить методы доступа"]
-10. В диалоговом окне выберите параметр `value : String` и нажмите кнопку "ОК". Методы `getValue()` и `setValue()` добавляются к классу `Name`:
+
+[start=10]
+. В диалоговом окне выберите параметр `value : String` и нажмите кнопку "ОК". Методы `getValue()` и `setValue()` добавляются к классу `Name`:
[source,java]
----
@@ -279,8 +318,12 @@
this.value = value;
}
----
-11. Нажмите сочетание клавиш CTRL+TAB и выберите `HelloController`, чтобы переключиться обратно к классу `HelloController`. Обратите внимание, что значок ошибки исчез, поскольку класс `Name` теперь существует.
-12. Удалите метод `doSubmitAction()` и раскомментируйте метод link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html#setFormView(java.lang.String)[+`onSubmit()`+]. Метод `onSubmit()` позволяет создать собственный `ModelAndView`, что требуется здесь. Внесите следующие изменения:
+
+[start=11]
+. Нажмите сочетание клавиш CTRL+TAB и выберите `HelloController`, чтобы переключиться обратно к классу `HelloController`. Обратите внимание, что значок ошибки исчез, поскольку класс `Name` теперь существует.
+
+[start=12]
+. Удалите метод `doSubmitAction()` и раскомментируйте метод link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html#setFormView(java.lang.String)[+`onSubmit()`+]. Метод `onSubmit()` позволяет создать собственный `ModelAndView`, что требуется здесь. Внесите следующие изменения:
[source,java]
----
@@ -299,12 +342,17 @@
}
----
Как указано выше, `command` приводится к объекту `Name`. Создается экземпляр `ModelAndView` и с помощью метода получения в `SimpleFormController` создается представление. После этого модель заполняется данными. Единственный элемент модели в данном случае — приветственное сообщение, получаемое из ранее созданной службы `HelloService`. Для добавления к модели приветственного сообщения можно использовать метод `addObject()` под именем `helloMessage`.
-13. Исправьте ошибки импорта, щелкнув правой кнопкой мыши в редакторе и выбрав 'Исправить ошибки' (Ctrl-Shift-I; ⌘-Shift-I в Mac).
+
+[start=13]
+. Исправьте ошибки импорта, щелкнув правой кнопкой мыши в редакторе и выбрав 'Исправить ошибки' (Ctrl-Shift-I; ⌘-Shift-I в Mac).
+
image::images/fix-imports70.png[title="Нажмите Ctrl-Shift-I, чтобы исправить выражения импорта в файле"]
*Примечание.* Убедитесь, что * ``org.springframework.validation.BindException`` * и * ``org.springframework.web.servlet.ModelAndView`` * выбраны в диалоговом окне 'Исправить все выражения импорта'.
-14. Нажмите кнопку "ОК". В начало файла добавляется следующий оператор импорта:
+
+[start=14]
+. Нажмите кнопку "ОК". В начало файла добавляется следующий оператор импорта:
[source,java]
----
@@ -314,7 +362,9 @@
Как указано в документации API, этот класс "представляет модель и представление, возвращаемые контроллером для разрешения `DispatcherServlet`. Представление может принимать форму имени представления `String`, которое должно быть разрешено объектом `ViewResolver`; в качестве альтернативы объект `View` может быть указан непосредственно. Модель — это объект `Map`, что позволяет использовать несколько объектов, выбираемых по имени."
Обратите внимание, что на данном этапе исправлены не все ошибки, поскольку класс по-прежнему не может определить класс `HelloService` и использовать его метод `sayHello()`.
-15. Внутри `HelloController` объявите частное поле `HelloService`:
+
+[start=15]
+. Внутри `HelloController` объявите частное поле `HelloService`:
[source,java]
----
@@ -338,7 +388,9 @@
import service.HelloService;
----
Все ошибки исправлены.
-16. Зарегистрируйте `HelloService` в файле `applicationContext.xml`. Откройте в редакторе файл `applicationContext.xml` и введите следующее определение компонента:
+
+[start=16]
+. Зарегистрируйте `HelloService` в файле `applicationContext.xml`. Откройте в редакторе файл `applicationContext.xml` и введите следующее определение компонента:
[source,java]
----
@@ -346,8 +398,11 @@
<bean name="helloService" class="service.HelloService" />
----
В состав поддержки Spring в среде IDE входит автозавершение кода в файлах настройки XML для классов Java и ссылок на компоненты. Для вызова автозавершения кода нажмите сочетание клавиш CTRL+ПРОБЕЛ в редакторе:
+
image::images/code-completion.png[title="Автозавершение кода вызывается при нажатии Ctrl-Space"]
-17. Зарегистрируйте `HelloController` в файле `dispatcher-servlet.xml`. Откройте в редакторе файл `dispatcher-servlet.xml` и введите следующее определение компонента:
+
+[start=17]
+. Зарегистрируйте `HelloController` в файле `dispatcher-servlet.xml`. Откройте в редакторе файл `dispatcher-servlet.xml` и введите следующее определение компонента:
[source,java]
----
@@ -377,8 +432,12 @@
</body>
----
-4. <<create-jsp,Тем же способом>> создайте вторую страницу JSP и назовите ее `nameView`.
-5. В редакторе добавьте следующее определение библиотеки тегов Spring к `nameView.jsp`.
+
+[start=4]
+. <<create-jsp,Тем же способом>> создайте вторую страницу JSP и назовите ее `nameView`.
+
+[start=5]
+. В редакторе добавьте следующее определение библиотеки тегов Spring к `nameView.jsp`.
[source,java]
----
@@ -386,8 +445,12 @@
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
----
При этом импортируется link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html[+библиотека тегов Spring+], содержащая полезные теги для реализации представлений как страниц JSP.
-6. Измените содержимое тегов `<title>` и `<h1>` на `Enter Your Name`.
-7. После тега `<h1>` введите следующий код:
+
+[start=6]
+. Измените содержимое тегов `<title>` и `<h1>` на `Enter Your Name`.
+
+[start=7]
+. После тега `<h1>` введите следующий код:
[source,xml]
----
@@ -406,7 +469,9 @@
link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html#spring.tld.bind[+spring:bind+] позволяет привязать свойство компонента. Тег привязки обеспечивает состояние и значение привязки, которые используются в качестве имени и значения поля ввода. Таким образом, при передаче формы платформе Spring будет известен способ извлечения переданного значения. Здесь командный класс (`controller.Name`) имеет свойство `value`, поэтому нужно установить `path` равным `value`.
link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html#spring.tld.nestedPath[+spring:nestedPath+] позволяет добавить к компоненту слева определенный путь. Поэтому при использовании вместе с `spring:bind` путь к компоненту становится равным `name.value`. Как уже указывалось, имя команды `HelloController` — `name`. Поэтому этот путь ссылается на свойство `value` компонента `name` в контексте страницы.
-8. Измените относительную точку входа для приложения. В настоящий момент точка входа по-прежнему `index.htm`, что в соответствии с разделом <<running,Выполнение схемы проекта>> перенаправляется на `WEB-INF/jsp/index.jsp`. Можно указать точку входа для проекта после его развертывания и запуска. В окне 'Проекты', щелкните правой кнопкой мыши узел проекта и выберите 'Свойства'. Открывается диалоговое окно "Свойства проекта". В области "Категории" выберите "Выполнить". В поле "Относительный URL-адрес" введите `/hello.htm` и нажмите кнопку "ОК".
+
+[start=8]
+. Измените относительную точку входа для приложения. В настоящий момент точка входа по-прежнему `index.htm`, что в соответствии с разделом <<running,Выполнение схемы проекта>> перенаправляется на `WEB-INF/jsp/index.jsp`. Можно указать точку входа для проекта после его развертывания и запуска. В окне 'Проекты', щелкните правой кнопкой мыши узел проекта и выберите 'Свойства'. Открывается диалоговое окно "Свойства проекта". В области "Категории" выберите "Выполнить". В поле "Относительный URL-адрес" введите `/hello.htm` и нажмите кнопку "ОК".
Возникает вопрос: где же располагается отображение `hello.htm` на `HelloController`? Отображение не добавлялось к компоненту `urlMapping`, как в случае страницы приветствия схемы проекта `index.htm`. Такая возможность обеспечивается средствами автоматизации платформы Spring, предоставляемыми следующим определением компонента `dispatcher-servlet.xml`:
@@ -416,10 +481,16 @@
<bean class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>
----
Этот компонент отвечает за автоматическое создание отображения URL-адресов для всех зарегистрированных в файле контроллеров. Из полностью определенного имени контроллера (в данном случае `controller.HelloController`) удаляется имя пакета и суффикс `Controller`, и затем результат используется как образец URL-адреса. Таким образом, для `HelloController` создается отображение `hello.htm`. Это средство, однако, не срабатывает для контроллеров, включенных в платформу Spring, например, `ParameterizableViewController`. Для них требуется явное отображение.
-9. В окне 'Проекты' щелкните правой кнопкой мыши узел проекта и выберите 'Выполнить'. Проект компилируется, развертывается и выполняется. Открывается браузер по умолчанию и отображается `hello.htm` как `nameView` проекта:
+
+[start=9]
+. В окне 'Проекты' щелкните правой кнопкой мыши узел проекта и выберите 'Выполнить'. Проект компилируется, развертывается и выполняется. Открывается браузер по умолчанию и отображается `hello.htm` как `nameView` проекта:
+
image::images/name-view.png[title="nameView отображается в браузере"]
+
Введите имя в текстовом поле и нажмите ENTER. Отображается `helloView` с приветственным сообщением:
+
image::images/hello-view.png[title="helloView отображается в браузере"]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Spring[+Мы ждем ваших отзывов+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_zh_CN.asciidoc
index 6d86b8b..480d93a 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-spring_zh_CN.asciidoc
@@ -82,16 +82,29 @@
Java EE 版本取决于所选服务器的版本。当所选服务器为 GlassFish Server 4.0 时，默认 Java EE 版本是 Java EE 7 Web。
-5. 在步骤 4 "Frameworks"（框架）面板中，选择 "Spring Web MVC"。
-6. 在 "Spring Library"（Spring 库）下拉列表中选择 *Spring Framework 3.x*。
+
+[start=5]
+. 在步骤 4 "Frameworks"（框架）面板中，选择 "Spring Web MVC"。
+
+[start=6]
+. 在 "Spring Library"（Spring 库）下拉列表中选择 *Spring Framework 3.x*。
+
image::images/frameworks-window.png[title=""Frameworks"（框架）面板中显示的 Spring Web MVC"]
请注意，尽管使用 IDE 可以将 Spring 4.x 库添加到项目中，但是对于本教程，将使用 Spring 4.x 中不支持的 SimpleFormController。另外，当选择 "Spring Web MVC" 时，注意到在项目创建期间默认将 JSTL (JavaServer Pages Standard Tag Library) 库添加到类路径中。取消选择此选项（如以上屏幕快照中所示），因为本教程中不需要 JSTL。
-7. 单击 "Configuration"（配置）标签，并请注意，您可以在向导中指定 Spring 分派程序 Servlet 的名称和映射。
+
+[start=7]
+. 单击 "Configuration"（配置）标签，并请注意，您可以在向导中指定 Spring 分派程序 Servlet 的名称和映射。
+
image::images/spring-configuration.png[title="在 "Configuration"（配置）标签下指定 Spring 分派程序 Servlet 的名称和映射"]
-8. 单击 "Finish"（完成）。IDE 将为整个应用程序创建一个项目，包括所有元数据以及可以从 "Files"（文件）窗口（Ctrl-2 组合键；在 Mac 上为 ⌘-2 组合键）中查看的项目的 Ant 构建脚本。可以从 "Projects"（项目）窗口（Ctrl-1 组合键；在 Mac 上为 ⌘-1 组合键）中查看模板结构。另请注意，默认情况下在 IDE 的编辑器中打开四个文件：`dispatcher-servlet.xml`、`applicationContext.xml`、`redirect.jsp` 和 `index.jsp`。
-9. 在 "Projects"（项目）窗口中，展开新项目的 "Libraries"（库）节点，并请注意 Spring JAR 包含在项目的类路径中。
+
+[start=8]
+. 单击 "Finish"（完成）。IDE 将为整个应用程序创建一个项目，包括所有元数据以及可以从 "Files"（文件）窗口（Ctrl-2 组合键；在 Mac 上为 ⌘-2 组合键）中查看的项目的 Ant 构建脚本。可以从 "Projects"（项目）窗口（Ctrl-1 组合键；在 Mac 上为 ⌘-1 组合键）中查看模板结构。另请注意，默认情况下在 IDE 的编辑器中打开四个文件：`dispatcher-servlet.xml`、`applicationContext.xml`、`redirect.jsp` 和 `index.jsp`。
+
+[start=9]
+. 在 "Projects"（项目）窗口中，展开新项目的 "Libraries"（库）节点，并请注意 Spring JAR 包含在项目的类路径中。
+
image::images/spring-libraries.png[title="Spring JAR 在项目的 "Libraries"（库）节点下列出"]
@@ -100,9 +113,12 @@
在对项目文件进行任何更改之前，尝试在 IDE 中运行新项目：
-1. 单击 IDE 主工具栏中的 "Run Project"（运行项目）(image::images/run-project-btn.png[])。IDE 将自动启动 GlassFish Server（如果尚未运行），编译项目，然后将其部署到该服务器。请注意 IDE "Output"（输出）窗口（Ctrl-4 组合键；在 Mac 上为 ⌘-4 组合键）中显示的任何输出。构建的输出以`成功构建`消息结尾。
+1. 单击 IDE 主工具栏中的 "Run Project"（运行项目）(image:images/run-project-btn.png[])。IDE 将自动启动 GlassFish Server（如果尚未运行），编译项目，然后将其部署到该服务器。请注意 IDE "Output"（输出）窗口（Ctrl-4 组合键；在 Mac 上为 ⌘-4 组合键）中显示的任何输出。构建的输出以`成功构建`消息结尾。
+
image::images/output.png[title="运行项目时 "Output"（输出）窗口将显示信息"]
+
IDE 的默认浏览器将启动，并且您会看到欢迎页视图 (`/WEB-INF/jsp/index.jsp`) 的内容。
+
image::images/browser-output.png[title="欢迎页输出显示在浏览器中"]
在 IDE 中运行项目时，将编译项目并将其部署到服务器，然后在默认浏览器中将其打开。此外，IDE 还提供“在保存时部署”功能，默认情况下将为 Web 项目激活该功能。在编辑器中保存文件时，会自动重新编译项目并将其部署到服务器。要查看更改，只需在浏览器中刷新页面即可。
@@ -190,7 +206,7 @@
确定正确设置环境之后，可以开始根据需要扩展框架项目。从创建 `HelloService` 类开始。
-1. 在 IDE 的工具栏中单击 "New File"（新建文件）(image::images/new-file-btn.png[]) 按钮。（也可以按 Ctrl-N 组合键；在 Mac 上按 ⌘-N 组合键。）
+1. 在 IDE 的工具栏中单击 "New File"（新建文件）(image:images/new-file-btn.png[]) 按钮。（也可以按 Ctrl-N 组合键；在 Mac 上按 ⌘-N 组合键。）
2. 选择 *Java* 类别，然后选择 *Java Class*（Java 类）并单击 "Next"（下一步）。
3. 在显示的新建 Java 类向导中，为 "Class Name"（类名）键入 *HelloService*，为 "Package Name"（包名）输入 *service* 来为该类创建一个新包。
4. 单击 "Finish"（完成）。IDE 将创建新类，并在编辑器中打开该类。
@@ -218,14 +234,26 @@
*注：*SimpleFormController 在 Spring 3.x 中已过时。在本教程中使用它是出于演示目的。但是，应使用标注的控制器而非 XML 文件。
1. 按 Ctrl-N 组合键（在 Mac 上按 ⌘-N 组合键）打开新建文件向导。在 "Categories"（类别）下，选择 *Spring Framework*；在 "File Types"（文件类型）下，选择 *Simple Form Controller*（简单窗体控制器）。
+
image::images/simple-form-controller.png[title="NetBeans IDE 为各种 Spring 工件提供模板"]
+
[tips]#NetBeans IDE 为各种 Spring 工件（包括 Spring XML 配置文件、link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/AbstractController.html[+`AbstractController`+] 和 link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html[+`SimpleFormController`+]）提供了模板。#
-2. 单击 "Next"（下一步）。
-3. 将该类命名为 *HelloController* 并通过在 "Package"（包）文本字段中键入 *controller* 为其创建一个新的包。单击 "Finish"（完成）。IDE 将创建新类，并在编辑器中打开该类。
-4. 通过取消注释 setter 方法（默认情况下，在类模板中显示）来指定控制器属性。要取消注释代码片段，请突出显示该代码（如下图所示），然后按 Ctrl-/ 组合键（在 Mac 上按 ⌘-/ 组合键）。
+
+[start=2]
+. 单击 "Next"（下一步）。
+
+[start=3]
+. 将该类命名为 *HelloController* 并通过在 "Package"（包）文本字段中键入 *controller* 为其创建一个新的包。单击 "Finish"（完成）。IDE 将创建新类，并在编辑器中打开该类。
+
+[start=4]
+. 通过取消注释 setter 方法（默认情况下，在类模板中显示）来指定控制器属性。要取消注释代码片段，请突出显示该代码（如下图所示），然后按 Ctrl-/ 组合键（在 Mac 上按 ⌘-/ 组合键）。
+
image::images/comment-out.png[title="突出显示代码片段，然后按 Ctrl-/ 以开启/关闭注释"]
+
[tips]#按 Ctrl-/ 组合键（在 Mac 上按 ⌘-/ 组合键）可在编辑器中开启/关闭注释。#
-5. 进行以下更改（以*粗体*显示）。
+
+[start=5]
+. 进行以下更改（以*粗体*显示）。
[source,java]
----
@@ -246,10 +274,18 @@
现在，您需要创建 `Name` 类作为简单 Bean 以包含每个请求的信息。
-6. 在 "Projects"（项目）窗口中，右键单击项目节点并选择 "New"（新建）> "Java Class"（Java 类）。此时将显示新建 Java 类向导。
-7. 在 "Class Name"（类名）中输入 *Name*，从 "Package"（包）的下拉列表中选择 *controller*。
-8. 单击 "Finish"（完成）。`Name` 类随即创建，并在编辑器中打开。
-9. 对于 `Name` 类，创建一个名为 `value` 的字段，然后为该字段创建存取方法（即，getter 和 setter 方法）。首先声明 `value` 字段：
+
+[start=6]
+. 在 "Projects"（项目）窗口中，右键单击项目节点并选择 "New"（新建）> "Java Class"（Java 类）。此时将显示新建 Java 类向导。
+
+[start=7]
+. 在 "Class Name"（类名）中输入 *Name*，从 "Package"（包）的下拉列表中选择 *controller*。
+
+[start=8]
+. 单击 "Finish"（完成）。`Name` 类随即创建，并在编辑器中打开。
+
+[start=9]
+. 对于 `Name` 类，创建一个名为 `value` 的字段，然后为该字段创建存取方法（即，getter 和 setter 方法）。首先声明 `value` 字段：
[source,java]
----
@@ -265,8 +301,11 @@
IDE 可以为您创建存取方法。在编辑器中，右键单击 `value`，然后选择 "Insert Code"（插入代码）（或按 Alt-Insert 组合键；在 Mac 上按 Ctrl-I 组合键）。在弹出式菜单中，选择 "Getter and Setter"（getter 和 setter）。
+
image::images/generate-code.png[title="通过 "Generate Code"（生成代码）弹出式菜单可以设置存取方法"]
-10. 在显示的对话框中，选择 `value : String` 选项，然后单击 "OK"（确定）。`getValue()` 和 `setValue()` 方法会添加到 `Name` 类中：
+
+[start=10]
+. 在显示的对话框中，选择 `value : String` 选项，然后单击 "OK"（确定）。`getValue()` 和 `setValue()` 方法会添加到 `Name` 类中：
[source,java]
----
@@ -279,8 +318,12 @@
this.value = value;
}
----
-11. 按 Ctrl-Tab 组合键并选择 `HelloController` 以切换回 `HelloController` 类。请注意，以前的错误标记已经消失，因为现在存在 `Name` 类。
-12. 删除 `doSubmitAction()` 方法并取消注释 link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html#setFormView(java.lang.String)[+`onSubmit()`+] 方法。使用 `onSubmit()` 方法，您可以创建自己的 `ModelAndView`，此处需要这样做。进行以下更改：
+
+[start=11]
+. 按 Ctrl-Tab 组合键并选择 `HelloController` 以切换回 `HelloController` 类。请注意，以前的错误标记已经消失，因为现在存在 `Name` 类。
+
+[start=12]
+. 删除 `doSubmitAction()` 方法并取消注释 link:http://static.springsource.org/spring/docs/3.1.x/javadoc-api/org/springframework/web/servlet/mvc/SimpleFormController.html#setFormView(java.lang.String)[+`onSubmit()`+] 方法。使用 `onSubmit()` 方法，您可以创建自己的 `ModelAndView`，此处需要这样做。进行以下更改：
[source,java]
----
@@ -299,12 +342,17 @@
}
----
如上所述，将 `command` 重塑为 `Name` 对象。创建 `ModelAndView` 的一个实例，并且在 `SimpleFormController` 中使用 getter 获取成功视图。最后，用数据填充模型。我们模型中的唯一项就是从以前创建的 `HelloService` 中获取的 hello 消息。使用 `addObject` 方法将此 hello 消息添加到名称 `helloMessage` 下的模型中。
-13. 在编辑器中单击鼠标右键并选择 "Fix Imports"（修复导入）（Ctrl-Shift-I 组合键；在 Mac 上为 ⌘-Shift-I 组合键）以修复导入错误。
+
+[start=13]
+. 在编辑器中单击鼠标右键并选择 "Fix Imports"（修复导入）（Ctrl-Shift-I 组合键；在 Mac 上为 ⌘-Shift-I 组合键）以修复导入错误。
+
image::images/fix-imports70.png[title="按 Ctrl-Shift-I 修复文件中的导入"]
*注：*确认在 "Fix All Imports"（修复所有导入）对话框中选择了 * ``org.springframework.validation.BindException`` * 和 * ``org.springframework.web.servlet.ModelAndView`` *。
-14. 单击 "OK"（确定）。向文件顶部添加以下导入语句：
+
+[start=14]
+. 单击 "OK"（确定）。向文件顶部添加以下导入语句：
[source,java]
----
@@ -314,7 +362,9 @@
如 API 文档中所述，此类“表示处理程序返回的要由 `DispatcherServlet` 解析的模型和视图。视图可以采用需要由 `ViewResolver` 对象解析的 `String` 视图名称格式；或者，也可以直接指定 `View` 对象。模型是一个 `Map`，允许使用按照名称键入的多个对象。”
请注意，此时并未修复所有错误，因为该类仍然无法识别 `HelloService` 类，也不能使用其 `sayHello()` 方法。
-15. 在 `HelloController` 中，声明一个名为 `HelloService` 的私有字段：
+
+[start=15]
+. 在 `HelloController` 中，声明一个名为 `HelloService` 的私有字段：
[source,java]
----
@@ -338,7 +388,9 @@
import service.HelloService;
----
现在应该修复了所有错误。
-16. 在 `applicationContext.xml` 中注册 `HelloService`。在编辑器中打开 `applicationContext.xml`，然后输入以下 Bean 声明：
+
+[start=16]
+. 在 `applicationContext.xml` 中注册 `HelloService`。在编辑器中打开 `applicationContext.xml`，然后输入以下 Bean 声明：
[source,java]
----
@@ -346,8 +398,11 @@
<bean name="helloService" class="service.HelloService" />
----
IDE 中的 Spring 支持包括 XML 配置文件中 Java 类以及 Bean 引用的代码完成。要调用代码完成，请在使用编辑器时按 Ctrl-空格键：
+
image::images/code-completion.png[title="按 Ctrl-空格键时调用的代码完成"]
-17. 在 `dispatcher-servlet.xml` 中注册 `HelloController`。在编辑器中打开 `dispatcher-servlet.xml`，然后输入以下 Bean 声明：
+
+[start=17]
+. 在 `dispatcher-servlet.xml` 中注册 `HelloController`。在编辑器中打开 `dispatcher-servlet.xml`，然后输入以下 Bean 声明：
[source,java]
----
@@ -377,8 +432,12 @@
</body>
----
-4. 采用与<<create-jsp,以上所述>>相同的方式创建另一个 JSP 页，但将其命名为 `nameView`。
-5. 在编辑器中，将以下 Spring 标记库声明添加到 `nameView.jsp` 中。
+
+[start=4]
+. 采用与<<create-jsp,以上所述>>相同的方式创建另一个 JSP 页，但将其命名为 `nameView`。
+
+[start=5]
+. 在编辑器中，将以下 Spring 标记库声明添加到 `nameView.jsp` 中。
[source,java]
----
@@ -386,8 +445,12 @@
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
----
这将导入 link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html[+Spring 标记库+]，它包含将视图作为 JSP 页实现时有用的标记。
-6. 将 `<title>` 和 `<h1>` 标记的内容更改为：`Enter Your Name`。
-7. 在 `<h1>` 标记下面输入以下代码：
+
+[start=6]
+. 将 `<title>` 和 `<h1>` 标记的内容更改为：`Enter Your Name`。
+
+[start=7]
+. 在 `<h1>` 标记下面输入以下代码：
[source,xml]
----
@@ -406,7 +469,9 @@
link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html#spring.tld.bind[+spring:bind+] 允许您绑定一个 bean 属性。绑定标记提供一个绑定状态和值，您可以将它用作输入字段的名称和值。采用这种方法提交窗体时，Spring 将知道如何提取提交的值。此处，我们的命令类 (`controller.Name`) 具有一个 `value` 属性，因此将 `path` 设置为 `value`。
link:http://static.springframework.org/spring/docs/2.5.x/reference/spring.tld.html#spring.tld.nestedPath[+spring:nestedPath+] 使您能够在 Bean 前面加上指定的路径。因此，当与上面显示的 `spring:bind` 一起使用时，Bean 的路径变为：`name.value`。当再次调用时，`HelloController` 的命令名称为 `name`。因此，该路径引用该页面范围内名为 `name` 的 Bean 的 `value` 属性。
-8. 更改应用程序的相对入口点。当前，项目入口点仍然为 `index.htm`，如上面的<<running,运行框架项目>>中所述，它重定向到 `WEB-INF/jsp/index.jsp`。当部署和运行项目时，可以指定项目的入口点。在 "Projects"（项目）窗口中，右键单击该项目节点并选择 "Properties"（属性）。此时将显示 "Project Properties"（项目属性）对话框。在 "Categories"（类别）下，选择 "Run"（运行）。在 "Relative URL"（相对 URL）字段中，键入 `/hello.htm`，然后单击 "OK"（确定）。
+
+[start=8]
+. 更改应用程序的相对入口点。当前，项目入口点仍然为 `index.htm`，如上面的<<running,运行框架项目>>中所述，它重定向到 `WEB-INF/jsp/index.jsp`。当部署和运行项目时，可以指定项目的入口点。在 "Projects"（项目）窗口中，右键单击该项目节点并选择 "Properties"（属性）。此时将显示 "Project Properties"（项目属性）对话框。在 "Categories"（类别）下，选择 "Run"（运行）。在 "Relative URL"（相对 URL）字段中，键入 `/hello.htm`，然后单击 "OK"（确定）。
此时，您可能希望了解 `hello.htm` 到 `HelloController` 的映射所在的位置。您尚未添加到 `urlMapping` Bean 的映射，框架项目的欢迎页 `index.htm` 就是这样。这可能就是 Spring 的特殊魅力所在，它是由 `dispatcher-servlet.xml` 文件中的下列 bean 定义提供的：
@@ -416,10 +481,16 @@
<bean class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping"/>
----
此 Bean 负责为文件中注册的所有控制器自动创建 URL 映射。它获取控制器的全限定类名（本例中为 `controller.HelloController`）并且去除读写包名称和 `Controller` 后缀，然后将结果用作 URL 映射。因此，对于 `HelloController` 而言，它创建了一个 `hello.htm` 映射。但是，此特点并不适于 Spring Framework 中包含的控制器，如 `ParameterizableViewController`。它们需要显式映射。
-9. 在 "Projects"（项目）窗口中，右键单击该项目节点并选择 "Run"（运行）。这将编译、部署和运行该项目。您的默认浏览器会打开，并且将 `hello.htm` 显示为项目的 `nameView`：
+
+[start=9]
+. 在 "Projects"（项目）窗口中，右键单击该项目节点并选择 "Run"（运行）。这将编译、部署和运行该项目。您的默认浏览器会打开，并且将 `hello.htm` 显示为项目的 `nameView`：
+
image::images/name-view.png[title="nameView 显示在浏览器中"]
+
在文本字段中输入您的名字，然后按 Enter 键。将显示带有问候消息的 `helloView`：
+
image::images/hello-view.png[title="helloView 显示在浏览器中"]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Spring[+请将您的反馈意见发送给我们+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts.asciidoc
index f9ff18c..d359214 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts.asciidoc
@@ -80,6 +80,7 @@
2. In the Name and Location panel, enter `MyStrutsApp` for Project Name and click Next.
3. In the Server and Settings panel, select the server to which you want to deploy your application. Only servers that are registered with the IDE are listed. (To register a server, click Add next to the Server drop-down list.) Also, note that the Context Path to your deployed application becomes `/MyStrutsApp`. Click Next.
4. Select Struts in the Frameworks panel.
+
image::images/new-project-wizard.png[title="Struts option displays in Frameworks panel of New Web Application wizard"]
For purposes of this tutorial, do not change any of the configuration values in the lower region of this panel. The wizard displays the following configuration options.
@@ -88,7 +89,9 @@
* *Action URL Pattern*: Specifies the patterns of incoming requests which are mapped to the Struts action controller. This generates a mapping entry in the deployment descriptor. By default, only the `*.do` pattern is mapped.
* *Application Resource*: Lets you specify the resource bundle which will be used in the `struts-config.xml` file for localizing messages. By default, this is `com.myapp.struts.ApplicationResource`.
* *Add Struts TLDs*: Lets you generate tag library descriptors for the Struts tag libraries. A tag library descriptor is an XML document which contains additional information about the entire tag library as well as each individual tag. In general this is not necessary, because you can refer to on-line URIs rather than local TLD files.
-5. Click Finish. The IDE creates the project folder in your file system. As with any web application in the IDE, the project folder contains all of your sources and the IDE's project metadata, such as the Ant build script. However, your web application in addition has all of the Struts libraries on its classpath. Not only are they on the application's classpath, but they are included in the project and will be packaged with it later when you build the project.
+
+[start=5]
+. Click Finish. The IDE creates the project folder in your file system. As with any web application in the IDE, the project folder contains all of your sources and the IDE's project metadata, such as the Ant build script. However, your web application in addition has all of the Struts libraries on its classpath. Not only are they on the application's classpath, but they are included in the project and will be packaged with it later when you build the project.
The project opens in the IDE. The Projects window is the main entry point to your project sources. It shows a logical view of important project contents. For example, if you expand several nodes within the new project, it may appear as follows:
@@ -155,7 +158,9 @@
The link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+bean taglib+] provides you with numerous tags that are helpful when associating a form bean (i.e., an `ActionForm` bean) with the data collected from the form. The link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_html.html[+html taglib+] offers an interface between the view and other components necessary to a web application. For example, below you replace common html `form` tags with Struts' `<html:form>` tags. One benefit this provides is that it causes the server to locate or create a bean object that corresponds to the value provided for `html:form`'s `action` element.
-4. Below the `<h1>` (or `<h2>`) tags, add the following:
+
+[start=4]
+. Below the `<h1>` (or `<h2>`) tags, add the following:
[source,xml]
----
@@ -169,8 +174,12 @@
Whenever you finish typing in the Source Editor, you can tidy up the code by right-clicking and choosing Format (Alt-Shift-F).
-5. In the Palette (Window > Palette) in the right region of the IDE, drag a Table item from the HTML category to a point just above the `<html:submit value="Login" />` line. The Insert Table dialog box displays. Set the rows to `3`, columns to `2`, and leave all other settings at `0`. Later in the tutorial, you will <<style,attach a stylesheet>> to affect the table display.
+
+[start=5]
+. In the Palette (Window > Palette) in the right region of the IDE, drag a Table item from the HTML category to a point just above the `<html:submit value="Login" />` line. The Insert Table dialog box displays. Set the rows to `3`, columns to `2`, and leave all other settings at `0`. Later in the tutorial, you will <<style,attach a stylesheet>> to affect the table display.
+
image::images/insert-table.png[title="The Palette provides dialogs for easy-to-use code templates"]
+
Click OK, then optionally reformat the code (Alt-Shift-F). The form in `login.jsp` now looks as follows:
[source,xml]
@@ -207,7 +216,9 @@
*Note: *You can safely delete the `<thead>` table row, as it is not used in this tutorial.
-6. In the first table row, enter the following (changes in *bold*):
+
+[start=6]
+. In the first table row, enter the following (changes in *bold*):
[source,xml]
----
@@ -217,7 +228,9 @@
<td>*<html:text property="name" />*</td>
</tr>
----
-7. In the second table row, enter the following (changes in *bold*):
+
+[start=7]
+. In the second table row, enter the following (changes in *bold*):
[source,xml]
----
@@ -228,7 +241,9 @@
</tr>
----
The `html:text` element enables you to match the input fields from the form with properties in the form bean that will be created in the next step. So for example, the value of `property` must match a field declared in the form bean associated with this form.
-8. Move the <html:submit value="Login" /> element into the second column of the third table row, so that the third table row appears as follows (changes in *bold*):
+
+[start=8]
+. Move the <html:submit value="Login" /> element into the second column of the third table row, so that the third table row appears as follows (changes in *bold*):
[source,xml]
----
@@ -288,7 +303,9 @@
<p>Your email address is: .</p>
</body>
----
-3. Add a link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+bean taglib+] directive to the top of the file:
+
+[start=3]
+. Add a link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+bean taglib+] directive to the top of the file:
[source,java]
----
@@ -296,7 +313,9 @@
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
----
-4. Add the following `<bean:write>` tags (changes in *bold*):
+
+[start=4]
+. Add the following `<bean:write>` tags (changes in *bold*):
[source,html]
----
@@ -331,7 +350,9 @@
The IDE provides navigation support in the `struts-config.xml` file. Hold down the Ctrl key and hover your mouse over the `LoginForm` bean's fully qualified class name. The name becomes a link, enabling you to navigate directly to the class in the Source Editor:
image::images/navigation-support.png[title="Navigation support is provided in struts-config.xml"]
-3. In the `LoginForm` bean in the Source Editor, create fields and accompanying accessor methods that correspond to the `name` and `email` text input fields that you created in `login.jsp`. Because `name` has already been created in the `LoginForm` skeleton, you only need to implement `email`.
+
+[start=3]
+. In the `LoginForm` bean in the Source Editor, create fields and accompanying accessor methods that correspond to the `name` and `email` text input fields that you created in `login.jsp`. Because `name` has already been created in the `LoginForm` skeleton, you only need to implement `email`.
Add the following declaration beneath `name` (changes in *bold*):
@@ -360,8 +381,11 @@
2. In the Name and Location panel, change the name to `LoginAction`.
3. Select `com.myapp.struts` in the Package drop-down list.
4. Type `/login` in Action Path. This value must match the value you set for the `action` attribute of the `<html:form>` tags in `login.jsp`. Make sure settings appear as in the screenshot below, then click Next.
+
image::images/new-struts-action.png[title="New Struts Action wizard"]
-5. In the third step of the wizard, you are given the opportunity to associate the `Action` class with a form bean. Notice that the `LoginForm` bean you previously created is listed as an option for ActionForm Bean Name. Make the following adjustments to the panel:
+
+[start=5]
+. In the third step of the wizard, you are given the opportunity to associate the `Action` class with a form bean. Notice that the `LoginForm` bean you previously created is listed as an option for ActionForm Bean Name. Make the following adjustments to the panel:
* Delete the forward slash for the Input Resource field
* Set Scope to Request (Session is the default scope setting in Struts.)
* Deselect the Validate ActionForm Bean option
@@ -422,7 +446,9 @@
String email = formBean.getEmail();
----
In order to use the incoming form data, you need to take `execute`'s `ActionForm` argument and cast it as `LoginForm`, then apply the getter methods that you created earlier.
-2. Type in the following conditional clause to perform validation on the incoming data:
+
+[start=2]
+. Type in the following conditional clause to perform validation on the incoming data:
[source,java]
----
@@ -462,7 +488,9 @@
return mapping.findForward(SUCCESS);
}
----
-3. Add a declaration for `FAILURE` to the `LoginAction` class (changes in *bold*):
+
+[start=3]
+. Add a declaration for `FAILURE` to the `LoginAction` class (changes in *bold*):
[source,java]
----
@@ -487,8 +515,12 @@
// error message
private String error;
----
-2. Add a getter method and a setter method for `error`, as <<accessors,demonstrated above>>.
-3. Modify the setter method so that it appears as follows:
+
+[start=2]
+. Add a getter method and a setter method for `error`, as <<accessors,demonstrated above>>.
+
+[start=3]
+. Modify the setter method so that it appears as follows:
[source,xml]
----
@@ -499,7 +531,9 @@
}
----
-4. Open `login.jsp` and make the following changes:
+
+[start=4]
+. Open `login.jsp` and make the following changes:
[source,xml]
----
@@ -518,7 +552,9 @@
</tr>
----
-5. In `LoginAction`, within the `if` conditional clause, add a statement to set the error message before forwarding the `failure` condition (changes in *bold*):
+
+[start=5]
+. In `LoginAction`, within the `if` conditional clause, add a statement to set the error message before forwarding the `failure` condition (changes in *bold*):
[source,java]
----
@@ -577,9 +613,14 @@
In order for the application to match JSP pages with forwarding conditions returned by `LoginAction`'s `execute` method, you need to add `forward` entries to the `struts-config.xml` file.
1. Open `struts-config.xml` in the Source Editor, right-click anywhere in the `action` entry for `LoginForm`, and choose Struts > Add Forward.
+
image::images/add-forward.png[title="Right-click and choose Struts > Add Forward"]
-2. In the Add Forward dialog box, type `success` in Forward Name. Enter the path to `success.jsp` in the Resource File field (i.e., `/WEB-INF/success.jsp`). The dialog box should now look as follows:
+
+[start=2]
+. In the Add Forward dialog box, type `success` in Forward Name. Enter the path to `success.jsp` in the Resource File field (i.e., `/WEB-INF/success.jsp`). The dialog box should now look as follows:
+
image::images/add-forward-dialog.png[title="Add Forward dialog creates a forward entry in struts-config.xml"]
+
Click Add. Note that the following `forward` entry was added to `struts-config.xml` (changes in *bold*):
[source,xml]
@@ -590,7 +631,9 @@
</action>
----
-3. Perform the same action to add a forward entry for `failure`. Set the Resource File path to `/login.jsp`. The following `forward` entry is added to `struts-config.xml` (changes in *bold*):
+
+[start=3]
+. Perform the same action to add a forward entry for `failure`. Set the Resource File path to `/login.jsp`. The following `forward` entry is added to `struts-config.xml` (changes in *bold*):
[source,java]
----
@@ -613,7 +656,9 @@
=== Setting the Welcome Page
1. In the Projects window, double-click the `web.xml` deployment descriptor. The tabs listed along the top of the Source Editor provide you with an interface to the `web.xml` file. Click on the Pages tab. In the Welcome Files field, enter `login.jsp`.
+
image::images/welcome-files.png[title="Graphical editor for the application's deployment descriptor"]
+
Now click on the Source tab to view the file. Note that `login.jsp` is now listed in the `welcome-file` entry:
[source,xml]
@@ -640,13 +685,17 @@
=== Running the Application
1. In the Projects window, right-click the project node and choose Run. The IDE builds the web application and deploys it, using the server you specified when creating the project. The browser opens and displays the `login.jsp` page. Type in some data that should fail validation, i.e., either leave either field blank, or enter an email address with a missing '@' sign:
+
image::images/login-form.png[title="Form contains data that will fail validation"]
When you click Login, the login form page redisplays, containing an error message:
+
image::images/login-form-error.png[title="Form redisplays with error message"]
Try entering data that should pass validation. Upon clicking Login, you are presented with the success page:
+
image::images/success-page.png[title="Success page displays showing input data"]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Struts[+Send Us Your Feedback+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_ja.asciidoc
index 6e6443b..2bb1796 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_ja.asciidoc
@@ -80,6 +80,7 @@
2. 「名前と場所」パネルで「プロジェクト名」に「`MyStrutsApp`」と入力し、「次」をクリックします。
3. 「サーバーと設定」パネルで、アプリケーションのデプロイ先のサーバーを選択します。表示されるのは、IDEに登録されているサーバーのみです。サーバーを登録するには、「サーバー」ドロップダウン・リスト横の「追加」をクリックします。デプロイしたアプリケーションのコンテキスト・パスは`/MyStrutsApp`になります。「次」をクリックします。
4. 「フレームワーク」パネルで「Struts」を選択します。
+
image::images/new-project-wizard.png[title="新規Webアプリケーション・ウィザードの「フレームワーク」パネルに表示された「Struts」オプション"]
このチュートリアルの目的のためには、このパネルの下部領域にある構成値を変更しないでください。ウィザードには、次の構成オプションが表示されます。
@@ -88,7 +89,9 @@
* *アクションのURLパターン*: Strutsアクション・コントローラにマップされる、受信リクエストのパターンを指定します。この指定によって、デプロイメント・ディスクリプタにマッピング・エントリが生成されます。デフォルトでは、`*.do`パターンのみマップされます。
* *アプリケーション・リソース*: メッセージのローカライズのために`struts-config.xml`ファイルで使用されるリソース・バンドルを指定できます。デフォルトでは、`com.myapp.struts.ApplicationResource`です。
* *Struts TLDを追加*: Strutsタグ・ライブラリ用のタグ・ライブラリ・ディスクリプタを生成できます。タグ・ライブラリ・ディスクリプタは、タグ・ライブラリ全体のみでなく、各個別タグに関する追加情報も格納されるXMLドキュメントです。一般に、ローカルTLDファイルではなく、オンラインのURIを参照できるため、これは必要ありません。
-5. 「終了」をクリックします。IDEによって、ファイル・システムにプロジェクト・フォルダが作成されます。IDEのWebアプリケーションでは、プロジェクト・フォルダに、すべてのソースとIDEのプロジェクト・メタデータ(Antビルド・スクリプトがなど)が含まれます。ただし、使用するWebアプリケーションには、そのクラスパス上にすべてのStrutsライブラリがさらに含まれます。これらはアプリケーションのクラスパス上に存在するのみでなく、プロジェクトに含まれるため、後でプロジェクトをビルドしたときに一緒にパッケージ化されます。
+
+[start=5]
+. 「終了」をクリックします。IDEによって、ファイル・システムにプロジェクト・フォルダが作成されます。IDEのWebアプリケーションでは、プロジェクト・フォルダに、すべてのソースとIDEのプロジェクト・メタデータ(Antビルド・スクリプトがなど)が含まれます。ただし、使用するWebアプリケーションには、そのクラスパス上にすべてのStrutsライブラリがさらに含まれます。これらはアプリケーションのクラスパス上に存在するのみでなく、プロジェクトに含まれるため、後でプロジェクトをビルドしたときに一緒にパッケージ化されます。
IDEでプロジェクトが開きます。「プロジェクト」ウィンドウは、プロジェクト・ソースへのメインのエントリ・ポイントです。ここには重要なプロジェクト内容の論理ビューが表示されます。たとえば、新しいプロジェクト内のいくつかのノードを展開すると、次のようになります。
@@ -155,7 +158,9 @@
link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+Bean taglib+]は、フォームから収集されたデータにフォームBean (`ActionForm` Bean)を関連付ける際に役立つ、多数のタグを提供します。link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_html.html[+html taglib+]は、ビューと、Webアプリケーションに必要な他のコンポーネントとの間のインタフェースを提供します。たとえば、次では一般的なhtml`form`タグをStrutsの`<html:form>`タグに置き換えます。この利点の1つは、こうすることで、`html:form`の`action`要素に提供される値に対応するBeanオブジェクトを、サーバーが検索または作成することです。
-4. `<h1>` (または`<h2>`)タグの下に、次を追加します。
+
+[start=4]
+. `<h1>` (または`<h2>`)タグの下に、次を追加します。
[source,xml]
----
@@ -169,8 +174,12 @@
ソース・エディタでの入力が終了するたびに、右クリックして「フォーマット」を選択([Alt]-[Shift]-[F])することにより、コードを整えることができます。
-5. IDEの右側にあるパレット(「ウィンドウ」>「パレット」)で、「表」項目を「HTML」カテゴリから`<html:submit value="Login" />`行の直前の位置にドラッグします。「挿入表」ダイアログ・ボックスが表示されます。行を`3`、列を`2`に設定し、その他の設定はすべて`0`のままにします。このチュートリアルの後の方で、表の表示に影響する<<style,スタイル・シートを添付>>します。
+
+[start=5]
+. IDEの右側にあるパレット(「ウィンドウ」>「パレット」)で、「表」項目を「HTML」カテゴリから`<html:submit value="Login" />`行の直前の位置にドラッグします。「挿入表」ダイアログ・ボックスが表示されます。行を`3`、列を`2`に設定し、その他の設定はすべて`0`のままにします。このチュートリアルの後の方で、表の表示に影響する<<style,スタイル・シートを添付>>します。
+
image::images/insert-table.png[title="パレットによって提供される、コード・テンプレート用の簡単に使用できるダイアログ"]
+
「OK」をクリックし、必要に応じてコードの書式を再設定します([Alt]-[Shift]-[F])。これで、`login.jsp`のフォームは次のようになります。
[source,xml]
@@ -207,7 +216,9 @@
*注意: *このチュートリアルでは使用されないため、表の`<thead>`行は安全に削除できます。
-6. 表の最初の行に、次の*太字*で示した部分を入力します。
+
+[start=6]
+. 表の最初の行に、次の*太字*で示した部分を入力します。
[source,xml]
----
@@ -217,7 +228,9 @@
<td>*<html:text property="name" />*</td>
</tr>
----
-7. 表の2行目に、次の*太字*で示した部分を入力します。
+
+[start=7]
+. 表の2行目に、次の*太字*で示した部分を入力します。
[source,xml]
----
@@ -228,7 +241,9 @@
</tr>
----
`html:text`要素によって、フォームからの入力フィールドを、次のステップで作成されるフォームBeanのプロパティと一致させることができます。たとえば、`property`の値は、このフォームに関連付けられたフォームBeanで宣言されているフィールドと一致します。
-8. 表の3行目の2列目に<html:submit value="Login" /> 要素を移動し、表の3行目が次の*太字*で示した部分になるようにします。
+
+[start=8]
+. 表の3行目の2列目に<html:submit value="Login" /> 要素を移動し、表の3行目が次の*太字*で示した部分になるようにします。
[source,xml]
----
@@ -288,7 +303,9 @@
<p>Your email address is: .</p>
</body>
----
-3. ファイルの先頭にlink:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+Bean taglib+]ディレクティブを追加します。
+
+[start=3]
+. ファイルの先頭にlink:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+Bean taglib+]ディレクティブを追加します。
[source,java]
----
@@ -296,7 +313,9 @@
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
----
-4. 次の*太字*で示した`<bean:write>`タグを追加します。
+
+[start=4]
+. 次の*太字*で示した`<bean:write>`タグを追加します。
[source,html]
----
@@ -331,7 +350,9 @@
`struts-config.xml`ファイルには、IDEのナビゲーション・サポートが用意されています。[Ctrl]キーを押したまま、`LoginForm` Beanの完全修飾クラス名の上にマウスを動かします。名前がリンクになり、ソース・エディタ内のそのクラスに直接移動できます。
image::images/navigation-support.png[title="struts-config.xmlに提供されたナビゲーション・サポート"]
-3. ソース・エディタの`LoginForm` Beanで、`login.jsp`内に作成した`name`および`email`テキスト入力フィールドに対応するフィールドと付随するアクセッサ・メソッドを作成します。`name`は`LoginForm`スケルトンですでに作成されているため、実装する必要があるのは`email`のみです。
+
+[start=3]
+. ソース・エディタの`LoginForm` Beanで、`login.jsp`内に作成した`name`および`email`テキスト入力フィールドに対応するフィールドと付随するアクセッサ・メソッドを作成します。`name`は`LoginForm`スケルトンですでに作成されているため、実装する必要があるのは`email`のみです。
`name`の下に、次の*太字*で示した宣言を追加します。
@@ -360,8 +381,11 @@
2. 「名前と場所」パネルで名前を`LoginAction`に変更します。
3. 「パッケージ」ドロップダウン・リストから「`com.myapp.struts`」を選択します。
4. 「アクションのパス」に「`/login`」と入力します。この値は、`login.jsp`で`<html:form>`タグの`action`属性に設定したのと同じです。設定が、次に示すスクリーンショットの表示のようになっていることを確認し、「次」をクリックします。
+
image::images/new-struts-action.png[title="新規Strutsアクション・ウィザード"]
-5. ウィザードの3番目のステップで、`Action`クラスをフォームBeanと関連付けられます。ActionForm Bean名のオプションとして、前に作成した`LoginForm` Beanが表示されています。パネルに対して次の調整を適用します。
+
+[start=5]
+. ウィザードの3番目のステップで、`Action`クラスをフォームBeanと関連付けられます。ActionForm Bean名のオプションとして、前に作成した`LoginForm` Beanが表示されています。パネルに対して次の調整を適用します。
* 「入力リソース」フィールドのスラッシュを削除します。
* 「スコープ」を「リクエスト」に設定します(Strutsでは、「セッション」がデフォルトのスコープ設定します。)
* 「ActionForm Beanを検証」オプションを選択解除します。
@@ -422,7 +446,9 @@
String email = formBean.getEmail();
----
受信フォーム・データを使用するには、`execute`の`ActionForm`引数を受け取り、`LoginForm`としてキャストして、前に作成した取得メソッドを適用します。
-2. 受信データに検証を実行するため、次の条件節を入力します。
+
+[start=2]
+. 受信データに検証を実行するため、次の条件節を入力します。
[source,java]
----
@@ -462,7 +488,9 @@
return mapping.findForward(SUCCESS);
}
----
-3. `FAILURE`の宣言を`LoginAction`クラスに追加します(変更箇所は*太字*で表示)。
+
+[start=3]
+. `FAILURE`の宣言を`LoginAction`クラスに追加します(変更箇所は*太字*で表示)。
[source,java]
----
@@ -487,8 +515,12 @@
// error message
private String error;
----
-2. <<accessors,前に示した>>ように、`error`用の取得メソッドと設定メソッドを追加します。
-3. 設定メソッドを次のように変更します。
+
+[start=2]
+. <<accessors,前に示した>>ように、`error`用の取得メソッドと設定メソッドを追加します。
+
+[start=3]
+. 設定メソッドを次のように変更します。
[source,xml]
----
@@ -499,7 +531,9 @@
}
----
-4. `login.jsp`を開き、次の変更を行います。
+
+[start=4]
+. `login.jsp`を開き、次の変更を行います。
[source,xml]
----
@@ -518,7 +552,9 @@
</tr>
----
-5. `LoginAction`の`if`条件節内に、`failure`条件を転送する前にエラー・メッセージを設定する文を追加します(*太字*部分)。
+
+[start=5]
+. `LoginAction`の`if`条件節内に、`failure`条件を転送する前にエラー・メッセージを設定する文を追加します(*太字*部分)。
[source,java]
----
@@ -577,9 +613,14 @@
アプリケーションが、JSPページと`LoginAction`の`execute`メソッドによって返された転送条件を一致させるようにするには、`struts-config.xml`ファイルに`forward`エントリを追加する必要があります。
1. ソース・エディタで`struts-config.xml`を開き、`LoginForm`の`action`エントリ内を右クリックし、「Struts」>「転送を追加」を選択します。
+
image::images/add-forward.png[title="右クリックして「Struts」>「転送の追加」を選択"]
-2. 「転送を追加」ダイアログ・ボックスで、「転送名」に「`success`」と入力します。「リソース・ファイル」フィールドに`success.jsp`のパス(`/WEB-INF/success.jsp`)を入力します。ダイアログ・ボックスは次のようになるはずです。
+
+[start=2]
+. 「転送を追加」ダイアログ・ボックスで、「転送名」に「`success`」と入力します。「リソース・ファイル」フィールドに`success.jsp`のパス(`/WEB-INF/success.jsp`)を入力します。ダイアログ・ボックスは次のようになるはずです。
+
image::images/add-forward-dialog.png[title="「転送の追加」ダイアログでのstruts-config.xmlへのforwardエントリの作成"]
+
「Add」をクリックします。次の*太字*で示した`forward`エントリが、`struts-config.xml`に追加されます。
[source,xml]
@@ -590,7 +631,9 @@
</action>
----
-3. 同じ処理を行い、`failure`のforwardエントリを追加します。「リソース・ファイル」のパスを「`/login.jsp`」に設定します。次の*太字*で示した`forward`エントリが、`struts-config.xml`に追加されます。
+
+[start=3]
+. 同じ処理を行い、`failure`のforwardエントリを追加します。「リソース・ファイル」のパスを「`/login.jsp`」に設定します。次の*太字*で示した`forward`エントリが、`struts-config.xml`に追加されます。
[source,java]
----
@@ -613,7 +656,9 @@
=== 開始ページの設定
1. 「プロジェクト」ウィンドウで`web.xml`デプロイメント・ディスクリプタをダブルクリックします。ソース・エディタ最上部に、`web.xml`ファイルへのインタフェースを提供するタブが表示されます。「ページ」タブをクリックします。「開始ファイル」フィールドに「`login.jsp`」と入力します。
+
image::images/welcome-files.png[title="アプリケーションのデプロイメント・ディスクリプタのグラフィカル・エディタ"]
+
ここで、「ソース」タブをクリックしてファイルを表示します。`welcome-file`エントリ内に`login.jsp`が示されます。
[source,xml]
@@ -640,13 +685,17 @@
=== アプリケーションの実行
1. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。Webアプリケーションがビルドされ、プロジェクトを作成するときに指定したサーバーを使用してデプロイされます。ブラウザが開き、`login.jsp`ページが表示されます。検証に失敗するデータを入力します(つまり、いずれかのフィールドを空のままにするか、「@」符号が含まれていない電子メール・アドレスを入力)。
+
image::images/login-form.png[title="検証に失敗するデータを含むフォーム"]
「Login」をクリックすると、エラー・メッセージを含むログイン・フォームが再表示されます。
+
image::images/login-form-error.png[title="エラー・メッセージ付きで再表示されたフォーム"]
検証をパスするデータを入力してみます。「Login」をクリックすると、成功ページが表示されます。
+
image::images/success-page.png[title="入力データが表示された成功ページ"]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Struts[+ご意見をお寄せください+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_pt_BR.asciidoc
index 6ff26e7..3941c9b 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_pt_BR.asciidoc
@@ -80,6 +80,7 @@
2. No painel Nome e Localização, digite `MyStrutsApp` no Nome do Projeto e clique em Próximo.
3. No painel Servidor e Definições, selecione o servidor no qual deseja implantar a aplicação. Somente os servidores registrados com o IDE serão listados. (Para registrar um servidor, clique em Adicionar ao lado da lista drop-down Servidor.) Observe também que o Caminho de Contexto para a aplicação implantada será `/MyStrutsApp`. Clique em Próximo.
4. Selecione Struts no painel Frameworks.
+
image::images/new-project-wizard.png[title="A opção Struts é exibida no painel Frameworks do assistente de Nova Aplicação Web"]
Para a finalidade deste tutorial, não altere nenhum valor de configuração na região inferior deste painel. O assistente exibe as seguintes opções de configuração.
@@ -88,7 +89,9 @@
* *Padrão do URL da Ação*: especifica os padrões das solicitações de entrada que são mapeadas para o controlador da ação do Struts. Isso gera uma entrada de mapeamento no descritor de implantação. Por default, somente o padrão `*.do` é mapeado.
* *Recurso da Aplicação*: permite especificar o pacote de recursos que será usado no arquivo `struts-config.xml` para a localização de mensagens. Por default, é `com.myapp.struts.ApplicationResource`.
* *Adicionar TLDs do Struts*: permite gerar descritores de bibliotecas de tags para as bibliotecas de tags do Struts. Um descritor de biblioteca de tags é um documento XML que contém informações adicionais sobre toda a biblioteca de tags, bem como sobre cada tag individual. Em geral, isso não é necessário porque é possível consultar URIs on-line em vez dos arquivos TLD locais.
-5. Clique em Finalizar. O IDE criará a pasta do projeto no sistema de arquivos. Assim como em qualquer aplicação Web do IDE, a pasta do projeto contém todos os seus códigos-fontes e os metadados do projeto do IDE, como o script de construção do Ant. No entanto, sua aplicação Web tem, além disso, todas as bibliotecas do Struts no seu classpath. Tais bibliotecas não estão somente no classpath da aplicação, mas também estão incluídas no projeto e serão encapsuladas com ele posteriormente quando este for construído.
+
+[start=5]
+. Clique em Finalizar. O IDE criará a pasta do projeto no sistema de arquivos. Assim como em qualquer aplicação Web do IDE, a pasta do projeto contém todos os seus códigos-fontes e os metadados do projeto do IDE, como o script de construção do Ant. No entanto, sua aplicação Web tem, além disso, todas as bibliotecas do Struts no seu classpath. Tais bibliotecas não estão somente no classpath da aplicação, mas também estão incluídas no projeto e serão encapsuladas com ele posteriormente quando este for construído.
O projeto será aberto no IDE. A janela Projetos é o ponto de entrada principal para os códigos-fonte do projeto. Ela mostra uma view lógica do conteúdo importante do projeto. Por exemplo, ao expandir diversos nós no novo projeto, ela será exibida da seguinte maneira:
@@ -155,7 +158,9 @@
O link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+bean taglib+] fornecerá inúmeras tags, úteis ao associar um bean de form (isto é, um Bean `ActionForm`) aos dados coletados do form. O link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_html.html[+html taglib+] oferece uma interface entre a view e os outros componentes necessários para a aplicação Web. Abaixo, por exemplo, você substitui as tags html `form` comuns pelas tags `<html:form>` do Struts. Uma vantagem dessa substituição é que ela faz com que o servidor localize ou crie um objeto do Bean que corresponda ao valor fornecido pelo elemento `action` de `html:form`.
-4. Abaixo das tags `<h1>` (ou `<h2>`), adicione o seguinte:
+
+[start=4]
+. Abaixo das tags `<h1>` (ou `<h2>`), adicione o seguinte:
[source,xml]
----
@@ -169,8 +174,12 @@
Sempre que terminar de digitar no Editor de Código-Fonte, você pode arrumar o código clicando com o botão direito do mouse e selecionando Formatar (Alt-Shift-F).
-5. Na Paleta (Janela > Paleta), à direita do IDE, arraste um item Tabela da categoria HTML para um local logo acima da linha `<html:submit value="Log-in" />`. A caixa de diálogo Inserir Tabela será exibida. Defina as linhas como `3`, as colunas como `2` e deixe todas as outras definições como `0`. Mais adiante neste tutorial, você <<style,anexará uma folha de estilo>> para afetar a view da tabela.
+
+[start=5]
+. Na Paleta (Janela > Paleta), à direita do IDE, arraste um item Tabela da categoria HTML para um local logo acima da linha `<html:submit value="Log-in" />`. A caixa de diálogo Inserir Tabela será exibida. Defina as linhas como `3`, as colunas como `2` e deixe todas as outras definições como `0`. Mais adiante neste tutorial, você <<style,anexará uma folha de estilo>> para afetar a view da tabela.
+
image::images/insert-table.png[title="A Paleta fornece caixas de diálogos para facilitar o uso de modelos de código"]
+
Clique em OK e, opcionalmente, reformate o código (Alt-Shift-F). O form em `login.jsp` estará da seguinte forma:
[source,xml]
@@ -207,7 +216,9 @@
*Observação: *Você pode deletar com segurança a linha `<thead>` da tabela, pois ela não será utilizada neste tutorial.
-6. Na primeira linha da tabela, insira o seguinte (alterações em *negrito*):
+
+[start=6]
+. Na primeira linha da tabela, insira o seguinte (alterações em *negrito*):
[source,xml]
----
@@ -217,7 +228,9 @@
<td>*<html:text property="name" />*</td>
</tr>
----
-7. Na segunda linha da tabela, digite o seguinte (alterações em *negrito*):
+
+[start=7]
+. Na segunda linha da tabela, digite o seguinte (alterações em *negrito*):
[source,xml]
----
@@ -228,7 +241,9 @@
</tr>
----
O elemento `html:text` permite combinar os campos de entrada do form com as propriedades no Bean de form que serão criadas na próxima etapa. Assim, por exemplo, o valor de `property` deve corresponder a um campo declarado no Bean de form associado a este form.
-8. Mova o elemento <html:submit value="Log-in" /> para a segunda coluna da terceira linha da tabela para que a terceira linha da tabela apareça da seguinte forma (alterações em *negrito*):
+
+[start=8]
+. Mova o elemento <html:submit value="Log-in" /> para a segunda coluna da terceira linha da tabela para que a terceira linha da tabela apareça da seguinte forma (alterações em *negrito*):
[source,xml]
----
@@ -288,7 +303,9 @@
<p>Your email address is: .</p>
</body>
----
-3. Adicione uma diretiva link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+bean taglib+] na parte superior do arquivo:
+
+[start=3]
+. Adicione uma diretiva link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+bean taglib+] na parte superior do arquivo:
[source,java]
----
@@ -296,7 +313,9 @@
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
----
-4. Adicione as tags `<bean:write>` a seguir (alterações em *negrito*):
+
+[start=4]
+. Adicione as tags `<bean:write>` a seguir (alterações em *negrito*):
[source,html]
----
@@ -331,7 +350,9 @@
O IDE oferece suporte à navegação no arquivo `struts-config.xml`. Mantenha pressionada a tecla Ctrl e coloque o mouse sobre o nome de classe totalmente qualificado do Bean `LoginForm`. O nome se torna um link, permitindo que você vá diretamente para a classe no Editor de Código-Fonte:
image::images/navigation-support.png[title="O suporte à navegação é fornecido em struts-config.xml"]
-3. No Bean `LoginForm` no Editor de Código-Fonte, crie campos e métodos acessadores que correspondam aos campos de entrada de texto `name` e `email` que você criou no arquivo `login.jsp`. Como o `name` já foi criado no esqueleto de `LoginForm`, será necessário implementar somente o `email`.
+
+[start=3]
+. No Bean `LoginForm` no Editor de Código-Fonte, crie campos e métodos acessadores que correspondam aos campos de entrada de texto `name` e `email` que você criou no arquivo `login.jsp`. Como o `name` já foi criado no esqueleto de `LoginForm`, será necessário implementar somente o `email`.
Adicione a declaração a seguir abaixo de `name` (alterações em *negrito*):
@@ -360,8 +381,11 @@
2. No painel Nome e Localização, altere o nome para `LoginAction`.
3. Selecione `com.myapp.struts` na lista drop-down Pacote.
4. Digite `/Login` no Caminho da Ação. Este valor deve corresponder ao valor definido para o atributo `action` das tags `<html:form>` no `login.jsp`. Verifique se as definições aparecem conforme indicado na captura de tela abaixo e clique em Próximo.
+
image::images/new-struts-action.png[title="Assistente de Nova Ação do Struts"]
-5. Na terceira etapa do assistente, você pode associar a classe `Action` a um Bean de form. Observe que o Bean `LoginForm` criado anteriormente está listado como uma opção de Nome do Bean ActionForm. Faça os seguintes ajustes no painel:
+
+[start=5]
+. Na terceira etapa do assistente, você pode associar a classe `Action` a um Bean de form. Observe que o Bean `LoginForm` criado anteriormente está listado como uma opção de Nome do Bean ActionForm. Faça os seguintes ajustes no painel:
* Delete a barra inclinada do campo Recurso de Entrada
* Defina Escopo para Solicitação (Sessão é a definição de escopo default no Struts.)
* Desmarque a opção Validar Bean ActionForm
@@ -422,7 +446,9 @@
String email = formBean.getEmail();
----
Para usar os dados de entrada do form, é necessário tomar o argumento `ActionForm` de `execute` e lançá-lo como `LoginForm`, e ,em seguida, aplicar os métodos getter criados anteriormente.
-2. Digite o seguinte na cláusula condicional para realizar a validação dos dados de entrada:
+
+[start=2]
+. Digite o seguinte na cláusula condicional para realizar a validação dos dados de entrada:
[source,java]
----
@@ -462,7 +488,9 @@
return mapping.findForward(SUCCESS);
}
----
-3. Adicione a declaração `FAILURE` na classe `LoginAction` (alterações em *negrito*):
+
+[start=3]
+. Adicione a declaração `FAILURE` na classe `LoginAction` (alterações em *negrito*):
[source,java]
----
@@ -487,8 +515,12 @@
// error message
private String error;
----
-2. Adicione um método getter e um método setter para `error`, conforme <<accessors,demonstrado acima>>.
-3. Modifique o método setter para que apareça da seguinte forma:
+
+[start=2]
+. Adicione um método getter e um método setter para `error`, conforme <<accessors,demonstrado acima>>.
+
+[start=3]
+. Modifique o método setter para que apareça da seguinte forma:
[source,xml]
----
@@ -499,7 +531,9 @@
}
----
-4. Abra `login.jsp` e faça as seguintes alterações:
+
+[start=4]
+. Abra `login.jsp` e faça as seguintes alterações:
[source,xml]
----
@@ -518,7 +552,9 @@
</tr>
----
-5. Em `LoginAction`, na cláusula condicional `if`, adicione uma instrução para definir a mensagem de erro antes de encaminhar a condição de `failure` (alterações em *negrito*):
+
+[start=5]
+. Em `LoginAction`, na cláusula condicional `if`, adicione uma instrução para definir a mensagem de erro antes de encaminhar a condição de `failure` (alterações em *negrito*):
[source,java]
----
@@ -577,9 +613,14 @@
Para que a aplicação corresponda às páginas JSP com condições de encaminhamento retornadas pelo método `execute` do `LoginAction`, será necessário adicionar entradas `forward` ao arquivo `struts-config.xml` file.
1. Abra `struts-config.xml` no Editor de Código-Fonte, clique com o botão direito do mouse em qualquer parte da entrada `action` de `LoginForm` e selecione Struts > Adicionar Encaminhamento.
+
image::images/add-forward.png[title="Clique com o botão direito do mouse e selecione Struts > Adicionar Encaminhamento"]
-2. Na caixa de diálogo Adicionar Encaminhamento, digite `success` no Nome de Encaminhamento. Indique o caminho a `success.jsp` no campo Arquivo de Recurso (isto é, `/WEB-INF/success.jsp`). A caixa de diálogo deverá ter a seguinte aparência:
+
+[start=2]
+. Na caixa de diálogo Adicionar Encaminhamento, digite `success` no Nome de Encaminhamento. Indique o caminho a `success.jsp` no campo Arquivo de Recurso (isto é, `/WEB-INF/success.jsp`). A caixa de diálogo deverá ter a seguinte aparência:
+
image::images/add-forward-dialog.png[title="A caixa de diálogo Adicionar Encaminhamento cria uma entrada de encaminhamento no arquivo struts-config.xml"]
+
Clique em Adicionar. Observe que a entrada `forward` a seguir foi adicionada a `struts-config.xml` (alterações em *negrito*):
[source,xml]
@@ -590,7 +631,9 @@
</action>
----
-3. Execute a mesma ação para adicionar uma entrada de encaminhamento a `failure`. Defina o caminho do Arquivo de Recurso como `/login.jsp`. A entrada `forward` a seguir será adicionada a `struts-config.xml` (alterações em *negrito*):
+
+[start=3]
+. Execute a mesma ação para adicionar uma entrada de encaminhamento a `failure`. Defina o caminho do Arquivo de Recurso como `/login.jsp`. A entrada `forward` a seguir será adicionada a `struts-config.xml` (alterações em *negrito*):
[source,java]
----
@@ -613,7 +656,9 @@
=== Definindo a Página de Boas-Vindas
1. Na janela Projetos, clique duas vezes no descritor de implantação `web.xml`. As guias listadas na parte superior do Editor de Código-Fonte oferecem uma interface para o arquivo `web.xml`. Clique na guia Páginas. No campo Arquivos de Boas-Vindas, digite `login.jsp`.
+
image::images/welcome-files.png[title="Editor gráfico para o descritor de implantação da aplicação"]
+
Agora clique na guia Código-fonte para exibir o arquivo. Observe que `login.jsp` estará listado na entrada `welcome-file`:
[source,xml]
@@ -640,13 +685,17 @@
=== Executando a Aplicação
1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e selecione Executar. O IDE construirá a aplicação Web e o implantará, usando o servidor especificado ao criar o projeto. O browser será aberto e exibirá a página `loginForm.jsp`. Digite dados que falharão durante o processo de validação, ou seja, deixe um campo em branco ou insira um endereço de e-mail sem o símbolo '@':
+
image::images/login-form.png[title="O form contém dados que não serão aprovados por validação"]
Quando você clicar em Log-in, a página de form de log-in será reexibida, contendo uma mensagem de erro:
+
image::images/login-form-error.png[title="O form é exibido novamente com a mensagem de erro"]
Tente inserir dados que sejam aprovados na validação. Quando você clicar em Log-in, a página de sucesso será exibida:
+
image::images/success-page.png[title="A página de sucesso é exibida mostrando os dados de entrada"]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Struts[+Envie-nos Seu Feedback+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_ru.asciidoc
index 77e9747..2630480 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_ru.asciidoc
@@ -80,6 +80,7 @@
2. На панели выбора имени и расположения в поле "Имя проекта" введите `MyStrutsApp` и нажмите кнопку "Далее".
3. На панели "Сервер и параметры" выберите сервер, на котором нужно развернуть приложение. В списке представлены только те серверы, которые зарегистрированы в среде IDE. (Чтобы зарегистрировать сервер, нажмите кнопку "Добавить" рядом с раскрывающимся списком серверов.) Кроме того, обратите внимание, что контекстный путь к вашему развернутому приложению становится вида `/MyStrutsApp`. Нажмите кнопку "Далее".
4. На панели 'Платформы' выберите 'Struts'.
+
image::images/new-project-wizard.png[title="Параметр Struts отображается на панели 'Платформы' мастера создания веб-приложений"]
Поскольку это учебный проект, не меняйте никакие значения в нижней части панели. В мастере отображаются следующие параметры конфигурации.
@@ -88,7 +89,9 @@
* *Шаблон URL-адреса действия *: Указывает шаблоны входящих запросов, которые сопоставляются с контроллером действий Struts. Так создается запись сопоставления в дескрипторе развертывания. По умолчанию сопоставляется только шаблон `*.do`.
* *Ресурс приложения*: Позволяет указать набор ресурсов, который будет использоваться в файле `struts-config.xml` для локализации сообщений. По умолчанию это `com.myapp.struts.ApplicationResource`.
* *Добавить файлы TLD Struts *: Позволяет создавать дескрипторы библиотеки тегов для библиотек тегов Struts. Дескриптор библиотеки тегов -- это документ XML, содержащий дополнительные сведения обо всей библиотеке тегов, а также о каждом отдельном теге. В целом это не является необходимым, поскольку можно сослаться на оперативные идентификаторы URI, а не на локальные файлы TLD.
-5. Нажмите кнопку "Завершить". Среда IDE создает папку проекта в вашей файловой системе. Как и в случае любого веб-приложения в среде IDE, папка проекта содержит все исходные коды и метаданные проекта среды IDE, например сценарий сборки Ant. Однако у веб-приложения, кроме того, в пути к классам есть все библиотеки Struts. Они не только есть в пути к классам приложения, но они также входят в проект и будут пакетированы с ним позднее при сборке проекта.
+
+[start=5]
+. Нажмите кнопку "Завершить". Среда IDE создает папку проекта в вашей файловой системе. Как и в случае любого веб-приложения в среде IDE, папка проекта содержит все исходные коды и метаданные проекта среды IDE, например сценарий сборки Ant. Однако у веб-приложения, кроме того, в пути к классам есть все библиотеки Struts. Они не только есть в пути к классам приложения, но они также входят в проект и будут пакетированы с ним позднее при сборке проекта.
Проект откроется в среде IDE. Окно "Проекты" является основной точкой входа исходных файлов проекта. Показано логическое представление важного содержимого проекта. Например, если раскрыть несколько узлов в новом проекте, они могут выглядеть следующим образом:
@@ -155,7 +158,9 @@
Библиотека тегов компонента link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+bean taglib+] содержит различные теги, которые можно использовать при ассоциировании компонента формы (например, компонента `ActionForm`) с данными, получаемыми с формы. link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_html.html[+Библиотека тегов html+] предлагает интерфейс между представлением и другими компонентами, необходимыми в веб-приложении. Например, ниже можно заменить обычные теги HTML `form` тегами Struts `<html:form>`. Благодаря этому, например, сервер ищет или создает объект компонента, соответствующий значению, указанному для элемента `action` в `html:form`.
-4. Ниже тегов `<h1>` или `<h2>` добавьте следующее:
+
+[start=4]
+. Ниже тегов `<h1>` или `<h2>` добавьте следующее:
[source,xml]
----
@@ -169,8 +174,12 @@
При завершении ввода текста в редакторе исходного кода можно дополнительно упорядочить код, щелкнув правой кнопкой мыши и выбрав 'Формат' (Alt-Shift-F).
-5. В окне "Палитра" ("Окно" > "Палитра") в правой области среды IDE перетащите элемент "Таблица" из раздела HTML в точку чуть выше строки `<html:submit value="Login" />`. Отобразится диалоговое окно вставки таблицы. Укажите число строк — `3`, столбцов — `2` и оставьте все остальные значения — `0`. Позднее в этом учебном курсе вы сможете добавить <<style,таблицу стилей>> для изменения отображения таблицы.
+
+[start=5]
+. В окне "Палитра" ("Окно" > "Палитра") в правой области среды IDE перетащите элемент "Таблица" из раздела HTML в точку чуть выше строки `<html:submit value="Login" />`. Отобразится диалоговое окно вставки таблицы. Укажите число строк — `3`, столбцов — `2` и оставьте все остальные значения — `0`. Позднее в этом учебном курсе вы сможете добавить <<style,таблицу стилей>> для изменения отображения таблицы.
+
image::images/insert-table.png[title="На палитре предоставлено диалоговое окно для простых в использовании шаблонов кода"]
+
Нажмите кнопку "ОК", а затем при желании переформатируйте код (Alt-Shift-F). Форма в файле `login.jsp` теперь выглядит таким образом:
[source,xml]
@@ -207,7 +216,9 @@
*Примечание. *Строку таблицы `<thead>` можно безопасно удалить, поскольку она не используется в этом учебном курсе.
-6. В первой строке таблицы введите следующее (изменения указаны *жирным шрифтом*):
+
+[start=6]
+. В первой строке таблицы введите следующее (изменения указаны *жирным шрифтом*):
[source,xml]
----
@@ -217,7 +228,9 @@
<td>*<html:text property="name" />*</td>
</tr>
----
-7. Во второй строке таблицы введите следующее (изменения указаны *жирным шрифтом*):
+
+[start=7]
+. Во второй строке таблицы введите следующее (изменения указаны *жирным шрифтом*):
[source,xml]
----
@@ -228,7 +241,9 @@
</tr>
----
Элемент `html:text` позволяет соотносить поля ввода из формы со свойствами в компоненте формы, который будет создан на следующем шаге. Так, например, значение элемента `property` должно соответствовать полю, объявленному в компоненте формы, связанном с этой формой.
-8. Переместите элемент <html:submit value="Login" /> во второй столбец третьей строки таблицы, чтобы третья строка таблицы выглядела следующим образом (изменения выделены *жирным шрифтом*):
+
+[start=8]
+. Переместите элемент <html:submit value="Login" /> во второй столбец третьей строки таблицы, чтобы третья строка таблицы выглядела следующим образом (изменения выделены *жирным шрифтом*):
[source,xml]
----
@@ -288,7 +303,9 @@
<p>Your email address is: .</p>
</body>
----
-3. Добавьте директиву link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+bean taglib+] к верхней части файла:
+
+[start=3]
+. Добавьте директиву link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+bean taglib+] к верхней части файла:
[source,java]
----
@@ -296,7 +313,9 @@
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
----
-4. Добавьте следующие теги `<bean:write>` (изменения выделены *жирным шрифтом*):
+
+[start=4]
+. Добавьте следующие теги `<bean:write>` (изменения выделены *жирным шрифтом*):
[source,html]
----
@@ -331,7 +350,9 @@
Среда IDE обеспечивает поддержку переходов в файле `struts-config.xml`. Удерживая клавишу Ctrl, наведите указатель мыши на полное имя класса компонента `LoginForm`. Имя становится ссылкой, что позволяет перейти прямо к классу в редакторе исходного кода.
image::images/navigation-support.png[title="Поддержка переходов предоставлена в struts-config.xml"]
-3. В компоненте `LoginForm` в редакторе исходного кода создайте поля и сопутствующие методы доступа, соответствующие полям текстового ввода `name` и `email`, созданным в файле `login.jsp`. Поскольку поле `name` уже создано в скелете `LoginForm`, нужно реализовать только поле `email`.
+
+[start=3]
+. В компоненте `LoginForm` в редакторе исходного кода создайте поля и сопутствующие методы доступа, соответствующие полям текстового ввода `name` и `email`, созданным в файле `login.jsp`. Поскольку поле `name` уже создано в скелете `LoginForm`, нужно реализовать только поле `email`.
Добавьте следующее объявление ниже поля `name` (изменения выделены *жирным шрифтом*):
@@ -360,8 +381,11 @@
2. На панели "Имя и расположение" измените имя на `LoginAction`.
3. Выберите `com.myapp.struts` в раскрывающемся списке "Пакет".
4. Введите `/login` в пути действия. Значение должно соответствовать значению, указанному для атрибута `action` в тегах `<html:form>` в файле `login.jsp`. Выставьте параметры, как указано на снимке экрана ниже, а затем нажмите кнопку "Далее".
+
image::images/new-struts-action.png[title="Мастер создания действий Struts"]
-5. В третьем действии этого мастера предоставляется возможность ассоциировать класс `Action` с компонентом формы. Обратите внимание, что ранее созданный компонент `LoginForm` указан как вариант для пункта "Имя компонента ActionForm". Внесите на панель следующие изменения:
+
+[start=5]
+. В третьем действии этого мастера предоставляется возможность ассоциировать класс `Action` с компонентом формы. Обратите внимание, что ранее созданный компонент `LoginForm` указан как вариант для пункта "Имя компонента ActionForm". Внесите на панель следующие изменения:
* Удалите прямую косую черту из поля "Входной ресурс"
* Укажите область запроса (Сеанс — это область запроса по умолчанию в платформе Struts.)
* Снимите флажок "Проверить компонент ActionForm"
@@ -422,7 +446,9 @@
String email = formBean.getEmail();
----
Чтобы использовать входящие данные формы, необходимо взять аргумент `ActionForm` из `execute`и привести его к `LoginForm`, затем применить методы получения, которые уже созданы ранее.
-2. Введите следующее условие для выполнения проверки входящих данных:
+
+[start=2]
+. Введите следующее условие для выполнения проверки входящих данных:
[source,java]
----
@@ -462,7 +488,9 @@
return mapping.findForward(SUCCESS);
}
----
-3. Добавьте объявление `FAILURE` к классу `LoginAction` (изменения выделены *жирным шрифтом*):
+
+[start=3]
+. Добавьте объявление `FAILURE` к классу `LoginAction` (изменения выделены *жирным шрифтом*):
[source,java]
----
@@ -487,8 +515,12 @@
// error message
private String error;
----
-2. Добавьте методы получения и установки для `error`, как <<accessors,указано выше>>.
-3. Измените метод установки, чтобы он выглядел следующим образом:
+
+[start=2]
+. Добавьте методы получения и установки для `error`, как <<accessors,указано выше>>.
+
+[start=3]
+. Измените метод установки, чтобы он выглядел следующим образом:
[source,xml]
----
@@ -499,7 +531,9 @@
}
----
-4. Откройте `login.jsp` и внесите следующие изменения:
+
+[start=4]
+. Откройте `login.jsp` и внесите следующие изменения:
[source,xml]
----
@@ -518,7 +552,9 @@
</tr>
----
-5. В `LoginAction` в рамках блока `if` добавьте оператор, устанавливающий сообщение об ошибке, перед пересылкой условия `failure` (изменения выделены *жирным шрифтом*):
+
+[start=5]
+. В `LoginAction` в рамках блока `if` добавьте оператор, устанавливающий сообщение об ошибке, перед пересылкой условия `failure` (изменения выделены *жирным шрифтом*):
[source,java]
----
@@ -577,9 +613,14 @@
Чтобы приложение соответствовало страницам JSP с условиями пересылки, возвращенными методом исполнения `LoginAction` `execute`, необходимо добавить записи `forward` к файлу `struts-config.xml`.
1. Откройте `struts-config.xml` в редакторе исходного кода, щелкните правой кнопкой мыши в любом местоположении в записи `action` для `LoginForm` и выберите Struts > 'Добавить Forward'.
+
image::images/add-forward.png[title="Щелкните правой кнопкой мыши и выберите Struts > 'Добавить Forward'"]
-2. В диалоговом окне "Добавить Forward" введите `success` в поле "Имя пересылку". Укажите путь к файлу `success.jsp` в поле файла ресурсов (напр., `/WEB-INF/success.jsp`). Диалоговое окно должно теперь выглядеть следующим образом:
+
+[start=2]
+. В диалоговом окне "Добавить Forward" введите `success` в поле "Имя пересылку". Укажите путь к файлу `success.jsp` в поле файла ресурсов (напр., `/WEB-INF/success.jsp`). Диалоговое окно должно теперь выглядеть следующим образом:
+
image::images/add-forward-dialog.png[title="В диалоговом окне 'Добавить Forward' создается запись Forward в struts-config.xml"]
+
Нажмите кнопку "Add". Обратите внимание, что следующая запись `forward` была добавлена к файлу `struts-config.xml` (изменения выделены *жирным шрифтом*):
[source,xml]
@@ -590,7 +631,9 @@
</action>
----
-3. Выполните такое же действие, чтобы добавить запись пересылки для `failure`. Укажите в пути к файлу ресурсов `/login.jsp`. Следующая запись `forward` добавляется к файлу `struts-config.xml` (изменения выделены *жирным шрифтом*):
+
+[start=3]
+. Выполните такое же действие, чтобы добавить запись пересылки для `failure`. Укажите в пути к файлу ресурсов `/login.jsp`. Следующая запись `forward` добавляется к файлу `struts-config.xml` (изменения выделены *жирным шрифтом*):
[source,java]
----
@@ -613,7 +656,9 @@
=== Настройка страницы приветствия
1. В окне 'Проекты' дважды щелкните дескриптор развертывания `web.xml`. Перечисленные наверху редактора исходного кода вкладки предоставляют интерфейс к файлу `web.xml`. Щелкните вкладку "Страницы". В поле "Файлы приветствия" введите `login.jsp`.
+
image::images/welcome-files.png[title="Графический редактор для дескриптора развертывания приложения"]
+
Теперь перейдите на вкладку 'Исходный код' для просмотра файла. Обратите внимание, что `login.jsp` теперь указан в записи `welcome-file`:
[source,xml]
@@ -640,13 +685,17 @@
=== Запуск приложения
1. В окне "Проекты" щелкните правой кнопкой мыши узел проекта и выберите команду "Выполнить". Среда IDE собирает веб-приложение и развертывает его, используя сервер, указанный при создании проекта Страница `login.jsp` будет открыта и отображена в браузере. Введите какие-то данные, которые должны не пройти проверку, например, оставьте одно поле пустым или введите адрес электронной почты без знака "@":
+
image::images/login-form.png[title="Форма содержит данные, которые не пройдут проверку правильности"]
При нажатии кнопки "Вход" страница формы входа отображается заново и содержит сообщение об ошибке:
+
image::images/login-form-error.png[title="Форма повторно отображается с сообщением об ошибке"]
Попробуйте ввести данные, которые должны пройти проверку. После нажатия кнопки "Вход" вы видите страницу успешного входа:
+
image::images/success-page.png[title="Отображается страница успешного завершения, на которой отображаются входные данные"]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Struts[+Мы ждем ваших отзывов+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_zh_CN.asciidoc
index 8b7dd13..f75da71 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-struts_zh_CN.asciidoc
@@ -80,6 +80,7 @@
2. 在 "Name and Location"（名称和位置）面板中，输入 `MyStrutsApp` 作为项目名称，然后单击 "Next"（下一步）。
3. 在 "Server and Settings"（服务器和设置）面板中，选择您要将应用程序部署到的服务器。这里仅列出了已在 IDE 中注册的服务器。（要注册服务器，请单击 "Server"（服务器）下拉列表旁边的 "Add"（添加）。）另请注意，所部署应用程序的上下文路径是 `/MyStrutsApp`。单击 "Next"（下一步）。
4. 在 "Frameworks"（框架）面板中选择 "Struts"。
+
image::images/new-project-wizard.png[title="Struts 选项显示在新建 Web 应用程序向导的 "Frameworks"（框架）面板中"]
出于本教程的目的，请勿更改此面板下部区域中的任何配置值。向导会显示以下配置选项。
@@ -88,7 +89,9 @@
* *Action URL Pattern（操作 URL 模式）*：指定映射到 Struts 操作控制器的传入请求模式。这会在部署描述符中生成一个映射条目。默认情况下，只映射 `*.do` 模式。
* *Application Resource（应用程序资源）*：用于指定将在 `struts-config.xml` 文件中用来本地化消息的资源包。默认情况下，它是 `com.myapp.struts.ApplicationResource`。
* *Add Struts TLDs（添加 Struts TLD）*：用于生成 Struts 标记库的标记库描述符。标记库描述符是一个 XML 文档，其中包括有关整个标记库以及每个单独标记的附加信息。通常，此操作是不必要的，因为您可以参阅联机 URI，而不是本地 TLD 文件。
-5. 单击 "Finish"（完成）。IDE 将在您的文件系统中创建项目文件夹。与 IDE 中的任何 Web 应用程序一样，此项目文件夹中包含所有的源代码和 IDE 的项目元数据（如 Ant 构建脚本）。但是除此之外，您的 Web 应用程序在其类路径上还具有所有的 Struts 库。这些 Struts 库不仅位于应用程序的类路径上，而且还包含在项目中，并且在稍后构建项目时将与项目打包在一起。
+
+[start=5]
+. 单击 "Finish"（完成）。IDE 将在您的文件系统中创建项目文件夹。与 IDE 中的任何 Web 应用程序一样，此项目文件夹中包含所有的源代码和 IDE 的项目元数据（如 Ant 构建脚本）。但是除此之外，您的 Web 应用程序在其类路径上还具有所有的 Struts 库。这些 Struts 库不仅位于应用程序的类路径上，而且还包含在项目中，并且在稍后构建项目时将与项目打包在一起。
此项目在 IDE 中打开。"Projects"（项目）窗口是项目源的主入口点。它显示重要项目内容的逻辑视图。例如，如果展开新项目中的若干节点，则项目可能显示如下：
@@ -155,7 +158,9 @@
link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+Bean 标记库+]为您提供了大量标记，在将窗体 Bean（即 `ActionForm` Bean）与从窗体中收集的数据关联时，这些标记非常有用。link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_html.html[+html 标记库+]在视图和 Web 应用程序所必需的其他组件之间提供了一个接口。例如，下面您将使用 Struts 的 `<html:form>` 标记替换常用的 html `form` 标记。这样做的一个好处是使服务器查找或创建一个 Bean 对象，该对象对应于为 `html:form` 的 `action` 元素提供的值。
-4. 在 `<h1>`（或 `<h2>`）标记下，添加以下代码：
+
+[start=4]
+. 在 `<h1>`（或 `<h2>`）标记下，添加以下代码：
[source,xml]
----
@@ -169,8 +174,12 @@
无论何时在源代码编辑器中完成键入，都可以通过右键单击并选择 "Format"（格式化）（Alt-Shift-F 组合键）来整理代码。
-5. 在 IDE 右侧区域的组件面板（"Window"（窗口）> "Palette"（组件面板））中，将 "Table"（表）项从 "HTML" 类别拖动至 `<html:submit value="Login" />` 行上方的某个位置。将显示 "Insert Table"（插入表格）对话框。将行设置为 `3`，列设置为 `2`，其他所有设置都保留为 `0`。在本教程中，稍后您将<<style,附加样式表>>来影响表的显示。
+
+[start=5]
+. 在 IDE 右侧区域的组件面板（"Window"（窗口）> "Palette"（组件面板））中，将 "Table"（表）项从 "HTML" 类别拖动至 `<html:submit value="Login" />` 行上方的某个位置。将显示 "Insert Table"（插入表格）对话框。将行设置为 `3`，列设置为 `2`，其他所有设置都保留为 `0`。在本教程中，稍后您将<<style,附加样式表>>来影响表的显示。
+
image::images/insert-table.png[title=""Palette"（组件面板）为易于使用的代码模板提供对话框"]
+
单击 "OK"（确定），然后可以选择重新设置代码格式（Alt-Shift-F 组合键）。现在，`login.jsp` 中的窗体显示如下：
[source,xml]
@@ -207,7 +216,9 @@
*注：*可以安全地删除 `<thead>` 表行，因为它不会在本教程中使用。
-6. 在第一个表行中，输入以下内容（更改的内容以*粗体*显示）：
+
+[start=6]
+. 在第一个表行中，输入以下内容（更改的内容以*粗体*显示）：
[source,xml]
----
@@ -217,7 +228,9 @@
<td>*<html:text property="name" />*</td>
</tr>
----
-7. 在第二个表行中，输入以下内容（更改的内容以*粗体*显示）：
+
+[start=7]
+. 在第二个表行中，输入以下内容（更改的内容以*粗体*显示）：
[source,xml]
----
@@ -228,7 +241,9 @@
</tr>
----
通过 `html:text` 元素，您可以将此窗体中的输入字段与下一步中将创建的窗体 Bean 中的属性相匹配。例如，`property` 的值必须与此窗体关联的窗体 Bean 中声明的字段相匹配。
-8. 将 <html:submit value="Login" /> 元素移动到第三个表行的第二列，以便第三个表行如下所示（更改的内容以*粗体*显示）：
+
+[start=8]
+. 将 <html:submit value="Login" /> 元素移动到第三个表行的第二列，以便第三个表行如下所示（更改的内容以*粗体*显示）：
[source,xml]
----
@@ -288,7 +303,9 @@
<p>Your email address is: .</p>
</body>
----
-3. 将 link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+Bean 标记库+]指令添加到文件顶部：
+
+[start=3]
+. 将 link:http://struts.apache.org/release/1.3.x/struts-taglib/dev_bean.html[+Bean 标记库+]指令添加到文件顶部：
[source,java]
----
@@ -296,7 +313,9 @@
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
----
-4. 添加以下 `<bean:write>` 标记（更改的内容以*粗体*显示）：
+
+[start=4]
+. 添加以下 `<bean:write>` 标记（更改的内容以*粗体*显示）：
[source,html]
----
@@ -331,7 +350,9 @@
IDE 在 `struts-config.xml` 文件中提供导航支持。按住 Ctrl 键并将鼠标悬停在 `LoginForm` Bean 的全限定类名上。此名称将变为一个链接，使您能够直接导航至源代码编辑器中的该类：
image::images/navigation-support.png[title="在 struts-config.xml 中提供导航支持"]
-3. 在源代码编辑器中的 `LoginForm` Bean 中，创建字段以及随附的存取方法，这些方法与 `login.jsp` 中创建的 `name` 和 `email` 文本输入字段相对应。由于已在 `LoginForm` 框架中创建 `name`，因此只需要实现 `email`。
+
+[start=3]
+. 在源代码编辑器中的 `LoginForm` Bean 中，创建字段以及随附的存取方法，这些方法与 `login.jsp` 中创建的 `name` 和 `email` 文本输入字段相对应。由于已在 `LoginForm` 框架中创建 `name`，因此只需要实现 `email`。
将以下声明添加到 `name` 下（更改的内容以*粗体*显示）：
@@ -360,8 +381,11 @@
2. 在 "Name and Location"（名称和位置）面板中，将名称更改为 `LoginAction`。
3. 在 "Package"（包）下拉列表中选择 `com.myapp.struts`。
4. 在 "Action Path"（操作路径）中键入 `/login`。该值必须与为 `login.jsp` 中 `<html:form>` 标记的 `action` 属性所设置的值相匹配。请确保设置与以下屏幕快照中显示的一样，然后单击 "Next"（下一步）。
+
image::images/new-struts-action.png[title="新建 Struts 操作向导"]
-5. 在此向导的第三步中，可以选择将 `Action` 类与窗体 Bean 相关联。请注意，以前创建的 `LoginForm` Bean 作为“ActionForm Bean 名称”的一个选项列出。对面板进行以下调整：
+
+[start=5]
+. 在此向导的第三步中，可以选择将 `Action` 类与窗体 Bean 相关联。请注意，以前创建的 `LoginForm` Bean 作为“ActionForm Bean 名称”的一个选项列出。对面板进行以下调整：
* 删除 "Input Resource"（输入资源）字段的正斜杠
* 将 "Scope"（范围）设置为 "Request"（请求）（在 Struts 中，"Session"（会话）是默认范围设置。）
* 取消选择 "Validate ActionForm Bean"（验证 ActionForm Bean）选项
@@ -422,7 +446,9 @@
String email = formBean.getEmail();
----
为了使用传入的窗体数据，需要使用 `execute` 的 `ActionForm` 参数，并将其强制转换为 `LoginForm`，然后应用先前创建的 getter 方法。
-2. 键入以下条件子句以对传入数据执行验证：
+
+[start=2]
+. 键入以下条件子句以对传入数据执行验证：
[source,java]
----
@@ -462,7 +488,9 @@
return mapping.findForward(SUCCESS);
}
----
-3. 将 `FAILURE` 的声明添加到 `LoginAction` 类中（更改以*粗体*显示）：
+
+[start=3]
+. 将 `FAILURE` 的声明添加到 `LoginAction` 类中（更改以*粗体*显示）：
[source,java]
----
@@ -487,8 +515,12 @@
// error message
private String error;
----
-2. 为 `error` 添加 getter 方法和 setter 方法，<<accessors,如上所述>>。
-3. 修改 setter 方法使它如下所示：
+
+[start=2]
+. 为 `error` 添加 getter 方法和 setter 方法，<<accessors,如上所述>>。
+
+[start=3]
+. 修改 setter 方法使它如下所示：
[source,xml]
----
@@ -499,7 +531,9 @@
}
----
-4. 打开 `login.jsp` 并进行以下更改：
+
+[start=4]
+. 打开 `login.jsp` 并进行以下更改：
[source,xml]
----
@@ -518,7 +552,9 @@
</tr>
----
-5. 在 `LoginAction` 中，在 `if` 条件子句中添加一条语句，以便在转发 `failure` 条件之前设置错误消息（更改的内容以*粗体*显示）：
+
+[start=5]
+. 在 `LoginAction` 中，在 `if` 条件子句中添加一条语句，以便在转发 `failure` 条件之前设置错误消息（更改的内容以*粗体*显示）：
[source,java]
----
@@ -577,9 +613,14 @@
为了让应用程序能够使 JSP 页与 `LoginAction` 的 `execute` 方法所返回的转发条件相匹配，您需要将 `forward` 条目添加到 `struts-config.xml` 文件中。
1. 在源代码编辑器中打开 `struts-config.xml`，右键单击 `LoginForm` 的 `action` 条目中的任何位置，然后选择 "Struts" > "Add Forward"（添加转发）。
+
image::images/add-forward.png[title="右键单击并选择 "Struts" > "Add Forward"（添加转发）"]
-2. 在 "Add Forward"（添加转发）对话框的 "Forward Name"（转发名称）中，键入 `success`。在 "Resource File"（资源文件）字段中输入 `success.jsp` 的路径（即 `/WEB-INF/success.jsp`）。此对话框现在应如下所示：
+
+[start=2]
+. 在 "Add Forward"（添加转发）对话框的 "Forward Name"（转发名称）中，键入 `success`。在 "Resource File"（资源文件）字段中输入 `success.jsp` 的路径（即 `/WEB-INF/success.jsp`）。此对话框现在应如下所示：
+
image::images/add-forward-dialog.png[title=""Add Forward"（添加转发）对话框在 struts-config.xml 中创建一个转发条目"]
+
单击 "ADD"（添加）。请注意，以下 `forward` 条目已添加到 `struts-config.xml` 中（更改的内容以*粗体*显示）：
[source,xml]
@@ -590,7 +631,9 @@
</action>
----
-3. 执行相同的操作以添加 `failure` 的转发条目。将 "Resource File"（资源文件）路径设置为 `/login.jsp`。以下 `forward` 条目将添加到 `struts-config.xml`（更改的内容以*粗体*显示）：
+
+[start=3]
+. 执行相同的操作以添加 `failure` 的转发条目。将 "Resource File"（资源文件）路径设置为 `/login.jsp`。以下 `forward` 条目将添加到 `struts-config.xml`（更改的内容以*粗体*显示）：
[source,java]
----
@@ -613,7 +656,9 @@
=== 设置欢迎页
1. 在 "Projects"（项目）窗口中，双击 `web.xml` 部署描述符。源代码编辑器顶部列出的标签为您提供了 `web.xml` 文件的界面。单击 "PAges"（页面）标签。在 "Welcome File"（欢迎文件）字段中，输入 `login.jsp`。
+
image::images/welcome-files.png[title="应用程序的部署描述符的图形编辑器"]
+
现在单击 "Source"（源）标签可查看此文件。注意 `login.jsp` 现在已列在 `welcome-file` 条目中：
[source,xml]
@@ -640,13 +685,17 @@
=== 运行应用程序
1. 在 "Projects"（项目）窗口中，右键单击该项目节点并选择 "Run"（运行）。IDE 将构建 Web 应用程序并使用您在创建此项目时所指定的服务器对其进行部署。浏览器将打开并显示 `login.jsp` 页。键入一些会验证失败的数据，即将任一字段保留为空或输入缺少 "@" 符号的电子邮件地址：
+
image::images/login-form.png[title="窗体包含将验证失败的数据"]
单击 "Login" 之后，登录窗体页会重新显示，其中包含一条错误消息：
+
image::images/login-form-error.png[title="窗体重新显示，但具有错误消息"]
尝试输入应该通过验证的数据。单击 "Login" 之后，您将会看到成功页：
+
image::images/success-page.png[title="成功页显示，并显示输入数据"]
+
link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Struts[+请将您的反馈意见发送给我们+]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket.asciidoc
index 75c22fd..f16c33a 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket.asciidoc
@@ -104,7 +104,9 @@
* *Wicket Home Page.* Specifies the name of the home page, which will consist of a file called ``xxx.java`` and ``xxx.html`` .
* *Main Package.* The Java package in which all the generated artifacts will be put by the IDE.
* *Version.* The Wicket version. Any library in the Library Manager with a name starting with "Wicket" will be listed in the Version drop-down above. By default, the only version listed is 1.6.0 because that is the version provided by the plugin.
-5. Click Finish.
+
+[start=5]
+. Click Finish.
The IDE creates the ``MyFirstWicketApp `` project. The project contains all of your sources and project metadata, such as the project's Ant build script. The project opens in the IDE. You can view its logical structure in the Projects window (Ctrl-1):
@@ -121,13 +123,17 @@
Click Next.
-2. In the Name and Location panel, type ``MyFirstWicketApp`` in Project Name. Change the Project Location and the default Maven settings as required by your needs.
+
+[start=2]
+. In the Name and Location panel, type ``MyFirstWicketApp`` in Project Name. Change the Project Location and the default Maven settings as required by your needs.
image::images/maven-3.png[]
Click Next.
-3. Choose the appropriate server for your needs, as well as "Java EE 6 Web" for the Java EE Version setting.
+
+[start=3]
+. Choose the appropriate server for your needs, as well as "Java EE 6 Web" for the Java EE Version setting.
image::images/maven-4.png[]
@@ -135,11 +141,15 @@
image::images/maven-5.png[]
-4. Because we have added support for Java EE 6, no ``web.xml`` file is created in the previous step. However, Wicket requires the Wicket application filter to be registered in the ``web.xml`` file. Therefore, before continuining, we add a new ``web.xml`` file in the application.
+
+[start=4]
+. Because we have added support for Java EE 6, no ``web.xml`` file is created in the previous step. However, Wicket requires the Wicket application filter to be registered in the ``web.xml`` file. Therefore, before continuining, we add a new ``web.xml`` file in the application.
Right-click the application, choose New > Other, followed by Web > Standard Deployment Descriptor (web.xml). Click Next and then click Finish.
-5. Now we are ready to add Wicket support to the application. Right-click the project node and choose Properties. In the Project Properties dialog, select Frameworks, and click Wicket. Use the descriptions in the previous sections to fill out the details in the Wicket Configuration part of the dialog. Click OK.
+
+[start=5]
+. Now we are ready to add Wicket support to the application. Right-click the project node and choose Properties. In the Project Properties dialog, select Frameworks, and click Wicket. Use the descriptions in the previous sections to fill out the details in the Wicket Configuration part of the dialog. Click OK.
The IDE creates all the Wicket files needed to get started:
@@ -156,7 +166,9 @@
Click Next.
-2. In the Search field, type "wicket" and then select the archetype you would like to use.
+
+[start=2]
+. In the Search field, type "wicket" and then select the archetype you would like to use.
image::images/maven-8.png[]
@@ -187,8 +199,12 @@
image::images/maven-9.png[]
-2. In the dialog shown above, click New Library and create a new library with a name beginning with "Wicket". Add JARs to the library, that is, register the JARs of your preferred version of Wicket into the library you have created.
-3.
+
+[start=2]
+. In the dialog shown above, click New Library and create a new library with a name beginning with "Wicket". Add JARs to the library, that is, register the JARs of your preferred version of Wicket into the library you have created.
+
+[start=3]
+.
When next you create a new web application, or when you add Wicket support to an existing application, the Frameworks panel will display your newly registered library, if its name begins with the word "Wicket":
image::images/maven-91.png[]
@@ -428,7 +444,9 @@
In this way, you can navigate quickly and efficiently between the two sides of Wicket components.
* *Footer Panel.* The structure of the footer panel is the same as the header panel, described above.
-2.
+
+[start=2]
+.
Right-click the project and run it. The IDE compiles the application, creates a WAR file, sends it to the deployment server, opens the IDE's default browser, and displays the application:
image::images/deploy-1.png[]
@@ -456,7 +474,9 @@
image::images/widget-2.png[]
-2. After adding a line below the H1 element in the HTML file, drag the Label item from the Palette and drop it below the H1 element. You see the dialog below:
+
+[start=2]
+. After adding a line below the H1 element in the HTML file, drag the Label item from the Palette and drop it below the H1 element. You see the dialog below:
image::images/widget-3.png[]
@@ -513,7 +533,9 @@
}
----
-3.
+
+[start=3]
+.
Save the files. Refresh the browser and you will see the Wicket Label, rendered in the ``HomePage.html`` file:
image::images/deploy-2.png[]
@@ -539,7 +561,9 @@
Choose Wicket Panel and click Next.
-2. Type ``BannerPanel`` in File Name. You should now see the following:
+
+[start=2]
+. Type ``BannerPanel`` in File Name. You should now see the following:
image::images/panel-2.png[]
@@ -547,7 +571,9 @@
Notice that we now have two new files in our package, ``BannerPanel.html`` and ``BannerPanel.java`` .
-3. Open ``BannerPanel.html`` and notice that the content of the file is as follows:
+
+[start=3]
+. Open ``BannerPanel.html`` and notice that the content of the file is as follows:
[source,xml]
@@ -607,7 +633,9 @@
}
}
----
-4. Our panel, while simple, is actually complete already. Lets add it to the home page. Open ``HomePage.java`` and then create a new instance of BannerPanel, by adding the following line to the end of the Constructor:
+
+[start=4]
+. Our panel, while simple, is actually complete already. Lets add it to the home page. Open ``HomePage.java`` and then create a new instance of BannerPanel, by adding the following line to the end of the Constructor:
[source,java]
@@ -615,7 +643,9 @@
add(new BannerPanel("bannerPanel"));
----
-5. Next, we need to render the panel. Open ``HomePage.html`` and add the placeholder tag right above the closing BODY tag, making sure to use the same Wicket identifier as used in the Java file:
+
+[start=5]
+. Next, we need to render the panel. Open ``HomePage.html`` and add the placeholder tag right above the closing BODY tag, making sure to use the same Wicket identifier as used in the Java file:
[source,java]
@@ -623,7 +653,9 @@
<span wicket:id='bannerPanel'/>
----
-6.
+
+[start=6]
+.
Run the project again. Notice that the panel is displayed, exactly where the HTML file specified it should be rendered:
image::images/result-3.png[]
@@ -668,7 +700,9 @@
</html>
----
-2. On the matching Java side, notice that the following has been added automatically:
+
+[start=2]
+. On the matching Java side, notice that the following has been added automatically:
[source,java]
@@ -696,7 +730,9 @@
}
};
----
-3. Press Ctrl-Shift-I and then make sure to select the correct import statements:
+
+[start=3]
+. Press Ctrl-Shift-I and then make sure to select the correct import statements:
image::images/imports-1.png[]
@@ -717,7 +753,9 @@
import org.apache.wicket.model.Model;
import org.apache.wicket.util.string.Strings;
----
-4.
+
+[start=4]
+.
Refresh the browser again and you will have an AJAX autocomplete field. As you type, the field will be filled with countries matching the entered text.
image::images/result-4.png[]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_ja.asciidoc
index 125601f..7c942e7 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_ja.asciidoc
@@ -104,7 +104,9 @@
* *Wicketホーム・ページ。* ``xxx.java`` および ``xxx.html`` という名前のファイルで構成されるホーム・ページの名前を指定します。
* *メイン・パッケージ。*生成されたすべてのアーティファクトがIDEによって格納されるJavaパッケージ。
* *バージョン。*Wicketのバージョン。名前が"Wicket"で始まるライブラリ・マネージャ内のライブラリが前述の「バージョン」ドロップダウンにリストされます。プラグインに含まれているバージョンは1.6.0のため、デフォルトでリストされるバージョンは1.6.0のみです。
-5. 「終了」をクリックします。
+
+[start=5]
+. 「終了」をクリックします。
IDEによって ``MyFirstWicketApp`` プロジェクトが作成されます。プロジェクトには、すべてのソースおよびプロジェクト・メタデータ(プロジェクトのAntビルド・スクリプトなど)が含まれます。IDEでプロジェクトが開きます。「プロジェクト」ウィンドウ([Ctrl]-[1])で、論理構造を表示できます。
@@ -121,13 +123,17 @@
「次」をクリックします。
-2. 「名前と場所」パネルで、「プロジェクト名」に「 ``MyFirstWicketApp`` 」と入力します。必要に応じてプロジェクトの場所とデフォルトのMaven設定を変更します。
+
+[start=2]
+. 「名前と場所」パネルで、「プロジェクト名」に「 ``MyFirstWicketApp`` 」と入力します。必要に応じてプロジェクトの場所とデフォルトのMaven設定を変更します。
image::images/maven-3.png[]
「次」をクリックします。
-3. ニーズに合う適切なサーバーを選択し、「Java EEバージョン」設定に「Java EE 6 Web」を選択します。
+
+[start=3]
+. ニーズに合う適切なサーバーを選択し、「Java EEバージョン」設定に「Java EE 6 Web」を選択します。
image::images/maven-4.png[]
@@ -135,11 +141,15 @@
image::images/maven-5.png[]
-4. Java EE 6のサポートを追加したため、前述の手順で ``web.xml`` ファイルは作成されていません。しかし、WicketではWicketアプリケーション・フィルタを ``web.xml`` ファイルに登録する必要があります。したがって、先に進む前に ``web.xml`` ファイルをアプリケーションに追加します。
+
+[start=4]
+. Java EE 6のサポートを追加したため、前述の手順で ``web.xml`` ファイルは作成されていません。しかし、WicketではWicketアプリケーション・フィルタを ``web.xml`` ファイルに登録する必要があります。したがって、先に進む前に ``web.xml`` ファイルをアプリケーションに追加します。
アプリケーションを右クリックし、「新規」>「その他」を選択し、続けて「Web」>「標準のデプロイメント・ディスクリプタ(web.xml)」を選択します。「次」をクリックし、「終了」をクリックします。
-5. これで、アプリケーションにWicketサポートを追加する準備ができました。プロジェクト・ノードを右クリックし、「プロパティ」を選択します。「プロジェクト・プロパティ」ダイアログで、「フレームワーク」を選択し、「Wicket」をクリックします。前の項の説明を使用して、ダイアログのWicket構成部分の詳細を指定します。「OK」をクリックします。
+
+[start=5]
+. これで、アプリケーションにWicketサポートを追加する準備ができました。プロジェクト・ノードを右クリックし、「プロパティ」を選択します。「プロジェクト・プロパティ」ダイアログで、「フレームワーク」を選択し、「Wicket」をクリックします。前の項の説明を使用して、ダイアログのWicket構成部分の詳細を指定します。「OK」をクリックします。
IDEによって、必要なWicketファイルがすべて作成されます。
@@ -156,7 +166,9 @@
「次」をクリックします。
-2. 「検索」フィールドに"wicket"と入力し、使用する原型を選択します。
+
+[start=2]
+. 「検索」フィールドに"wicket"と入力し、使用する原型を選択します。
image::images/maven-8.png[]
@@ -187,8 +199,12 @@
image::images/maven-9.png[]
-2. 前述のダイアログで「新規ライブラリ」をクリックして、"Wicket"で始まる名前の新しいライブラリを作成します。JARをライブラリに追加します。つまり、希望のバージョンのWicketのJARを、作成したライブラリに登録します。
-3.
+
+[start=2]
+. 前述のダイアログで「新規ライブラリ」をクリックして、"Wicket"で始まる名前の新しいライブラリを作成します。JARをライブラリに追加します。つまり、希望のバージョンのWicketのJARを、作成したライブラリに登録します。
+
+[start=3]
+.
次に新規のWebアプリケーションを作成する際、あるいは既存のアプリケーションにWicketサポートを追加する際、新たに登録したライブラリが("Wicket"で始まる名前であれば)「フレームワーク」パネルに表示されます。
image::images/maven-91.png[]
@@ -428,7 +444,9 @@
このようにして、Wicketコンポーネントの2つの側の間を迅速かつ効率的に移動できます。
* *フッター・パネル。*フッター・パネルの構造は、前述のヘッダー・パネルと同じです。
-2.
+
+[start=2]
+.
プロジェクトを右クリックし、実行します。IDEでアプリケーションがコンパイルされ、WARファイルが作成されてデプロイメント・サーバーに送信されます。IDEのデフォルト・ブラウザが開き、アプリケーションが表示されます。
image::images/deploy-1.png[]
@@ -456,7 +474,9 @@
image::images/widget-2.png[]
-2. HTMLファイルのH1要素の下に1行追加した後、パレットから「ラベル」アイテムをドラッグし、H1要素の下にドロップします。次のダイアログが表示されます。
+
+[start=2]
+. HTMLファイルのH1要素の下に1行追加した後、パレットから「ラベル」アイテムをドラッグし、H1要素の下にドロップします。次のダイアログが表示されます。
image::images/widget-3.png[]
@@ -513,7 +533,9 @@
}
----
-3.
+
+[start=3]
+.
ファイルを保存します。ブラウザをリフレッシュすると、 ``HomePage.html`` でレンダリングされるWicket Labelを確認できます。
image::images/deploy-2.png[]
@@ -539,7 +561,9 @@
「Wicketパネル」を選択し、「次」をクリックします。
-2. 「ファイル名」に「 ``BannerPanel`` 」と入力します。次のようになります。
+
+[start=2]
+. 「ファイル名」に「 ``BannerPanel`` 」と入力します。次のようになります。
image::images/panel-2.png[]
@@ -547,7 +571,9 @@
パッケージに ``BannerPanel.html`` および ``BannerPanel.java`` という2つの新しいファイルがあることに注意してください。
-3. ``BannerPanel.html`` を開き、ファイルの内容が次のようになっていることを確認します。
+
+[start=3]
+. ``BannerPanel.html`` を開き、ファイルの内容が次のようになっていることを確認します。
[source,xml]
@@ -607,7 +633,9 @@
}
}
----
-4. 単純ですが、これでパネルは完成です。ホーム・ページに追加しましょう。 ``HomePage.java`` を開き、次の行をコンストラクタの最後に追加して、BannerPanelの新しいインスタンスを作成します。
+
+[start=4]
+. 単純ですが、これでパネルは完成です。ホーム・ページに追加しましょう。 ``HomePage.java`` を開き、次の行をコンストラクタの最後に追加して、BannerPanelの新しいインスタンスを作成します。
[source,java]
@@ -615,7 +643,9 @@
add(new BannerPanel("bannerPanel"));
----
-5. 次に、パネルをレンダリングする必要があります。 ``HomePage.html`` を開き、終了のBODYタグの直前にプレースホルダ・タグを追加します。Javaファイルで使用されているのと同じWicket識別子を必ず使用してください。
+
+[start=5]
+. 次に、パネルをレンダリングする必要があります。 ``HomePage.html`` を開き、終了のBODYタグの直前にプレースホルダ・タグを追加します。Javaファイルで使用されているのと同じWicket識別子を必ず使用してください。
[source,java]
@@ -623,7 +653,9 @@
<span wicket:id='bannerPanel'/>
----
-6.
+
+[start=6]
+.
プロジェクトを再実行します。HTMLファイルで指定された場所にパネルが表示されていることに注意してください。
image::images/result-3.png[]
@@ -668,7 +700,9 @@
</html>
----
-2. 対応するJava側で、次のコードが自動的に追加されていることに注意してください。
+
+[start=2]
+. 対応するJava側で、次のコードが自動的に追加されていることに注意してください。
[source,java]
@@ -696,7 +730,9 @@
}
};
----
-3. [Ctrl]-[Shift]-[I]を押します。正しいインポート文を必ず選択します。
+
+[start=3]
+. [Ctrl]-[Shift]-[I]を押します。正しいインポート文を必ず選択します。
image::images/imports-1.png[]
@@ -717,7 +753,9 @@
import org.apache.wicket.model.Model;
import org.apache.wicket.util.string.Strings;
----
-4.
+
+[start=4]
+.
ブラウザを再度リフレッシュすると、AJAXのオートコンプリート・フィールドが表示されます。入力すると、このフィールドに、入力したテキストに一致する国が表示されます。
image::images/result-4.png[]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_pt_BR.asciidoc
index 5650fe1..2c28c35 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_pt_BR.asciidoc
@@ -104,7 +104,9 @@
* *Home Page do Wicket.* Especifica o nome da home page que consistira de um arquivo chamado ``xxx.java`` e ``xxx.html`` .
* *Pacote Principal.* O pacote Java no qual todos os artefatos gerados serão colocados pelo IDE.
* *Versão.* A versão do Wicket. Qualquer biblioteca no Gerenciador de Bibliotecas com um nome que começa com "Wicket" será listada na lista drop-down Versão acima. Por default, a única versão listada é 1.6.0 porque é a versão fornecida pelo plug-in.
-5. Clique em Finalizar.
+
+[start=5]
+. Clique em Finalizar.
O IDE cria o projeto ``MyFirstWicketApp`` . O projeto contém todos os códigos-fonte e metadados do projeto, como o script de construção Ant do projeto. O projeto será aberto no IDE. Você pode exibir sua estrutura lógica na janela Projetos (Ctrl-1):
@@ -121,13 +123,17 @@
Clique em Próximo.
-2. No painel Nome e Localização, digite ``MyFirstWicketApp`` no Nome do Projeto. Altere a Localização do Projeto e as definições default de Maven, conforme necessário.
+
+[start=2]
+. No painel Nome e Localização, digite ``MyFirstWicketApp`` no Nome do Projeto. Altere a Localização do Projeto e as definições default de Maven, conforme necessário.
image::images/maven-3.png[]
Clique em Próximo.
-3. Escolha o servidor apropriado para suas necessidades, bem como "Java EE 6 Web" para a definição da Versão do Java EE.
+
+[start=3]
+. Escolha o servidor apropriado para suas necessidades, bem como "Java EE 6 Web" para a definição da Versão do Java EE.
image::images/maven-4.png[]
@@ -135,11 +141,15 @@
image::images/maven-5.png[]
-4. Como não adicionamos suporte para Java EE 6, nenhum arquivo ``web.xml`` foi criado na etapa anterior. No entanto, o Wicket exige que o filtro da aplicação Wicket seja registrado no arquivo ``web.xml`` . Portanto, antes de continuar, adicionamos um novo arquivo ``web.xml`` na aplicação.
+
+[start=4]
+. Como não adicionamos suporte para Java EE 6, nenhum arquivo ``web.xml`` foi criado na etapa anterior. No entanto, o Wicket exige que o filtro da aplicação Wicket seja registrado no arquivo ``web.xml`` . Portanto, antes de continuar, adicionamos um novo arquivo ``web.xml`` na aplicação.
Clique com o botão direito do mouse na aplicação, escolha Novo > Outro, seguido por Web > Descritor de Implantação Padrão (web.xml). Clique em Próximo e, em seguida, em Finalizar.
-5. Agora você está pronto para adicionar suporte do Wicket à aplicação. Clique com o botão direito do mouse no nó do projeto e escolha Propriedades. Na caixa de diálogo Propriedades do Projeto, selecione Frameworks e clique em Wicket. Use as descrições das seções anteriores para preencher os detalhes na parte de Configuração de Wicket na caixa de diálogo. Clique em OK.
+
+[start=5]
+. Agora você está pronto para adicionar suporte do Wicket à aplicação. Clique com o botão direito do mouse no nó do projeto e escolha Propriedades. Na caixa de diálogo Propriedades do Projeto, selecione Frameworks e clique em Wicket. Use as descrições das seções anteriores para preencher os detalhes na parte de Configuração de Wicket na caixa de diálogo. Clique em OK.
O IDE cria todos os arquivos do Wicket necessários para começar:
@@ -156,7 +166,9 @@
Clique em Próximo.
-2. No campo Pesquisa, digite "wicket" e, em seguida, selecione o arquétipo que você deseja usar.
+
+[start=2]
+. No campo Pesquisa, digite "wicket" e, em seguida, selecione o arquétipo que você deseja usar.
image::images/maven-8.png[]
@@ -187,8 +199,12 @@
image::images/maven-9.png[]
-2. Na caixa de diálogo mostrada acima, clique em Nova Biblioteca e crie uma nova biblioteca com um nome começando com "Wicket". Adicione JARs à biblioteca, isto é, registre os JARs de sua versão preferida do Wicket na biblioteca criada.
-3.
+
+[start=2]
+. Na caixa de diálogo mostrada acima, clique em Nova Biblioteca e crie uma nova biblioteca com um nome começando com "Wicket". Adicione JARs à biblioteca, isto é, registre os JARs de sua versão preferida do Wicket na biblioteca criada.
+
+[start=3]
+.
Na próxima vez que você criar uma nova aplicação web ou quando você adicionar suporte do Wicket a uma aplicação existente, o painel Frameworks exibirá sua biblioteca recém-registrada, se seu nome começar com a palavra "Wicket":
image::images/maven-91.png[]
@@ -428,7 +444,9 @@
Desta forma, você pode navegar de forma rápida e eficiente entre as duas partes dos componentes do Wicket.
* *Painel Rodapé.* A estrutura do painel rodapé é igual à do painel cabeçalho, descrita acima.
-2.
+
+[start=2]
+.
Clique com o botão direito do mouse no projeto e execute-o. O IDE compila a aplicação, cria um arquivo WAR, envia-o para o servidor de implantação, abre o browser default do IDE e exibe a aplicação:
image::images/deploy-1.png[]
@@ -456,7 +474,9 @@
image::images/widget-2.png[]
-2. Após adicionar uma linha abaixo do elemento H1 no arquivo HTML, arraste o item Label da Paleta e solte-o abaixo do elemento H1. Você verá a caixa de diálogo abaixo:
+
+[start=2]
+. Após adicionar uma linha abaixo do elemento H1 no arquivo HTML, arraste o item Label da Paleta e solte-o abaixo do elemento H1. Você verá a caixa de diálogo abaixo:
image::images/widget-3.png[]
@@ -513,7 +533,9 @@
}
----
-3.
+
+[start=3]
+.
Salve os arquivos. Altere o browser e você verá o Label do Wicket, convertido no arquivo ``HomePage.html`` :
image::images/deploy-2.png[]
@@ -539,7 +561,9 @@
Escolha Painel Wicket e clique em Próximo.
-2. Digite ``BannerPanel`` no Nome do Arquivo. Agora você deverá ver o seguinte:
+
+[start=2]
+. Digite ``BannerPanel`` no Nome do Arquivo. Agora você deverá ver o seguinte:
image::images/panel-2.png[]
@@ -547,7 +571,9 @@
Observe que agora teremos dois arquivos novos em nosso pacote, ``BannerPanel.html`` e ``BannerPanel.java`` .
-3. Abra ``BannerPanel.html`` e observe que o conteúdo do arquivo é o seguinte:
+
+[start=3]
+. Abra ``BannerPanel.html`` e observe que o conteúdo do arquivo é o seguinte:
[source,xml]
@@ -607,7 +633,9 @@
}
}
----
-4. Nosso painel, embora simples, já está concluído. Vamos adicioná-lo à home page. Abra ``HomePage.java`` e, em seguida, crie uma nova instância de BannerPanel, adicionando a seguinte linha ao fim do Construtor:
+
+[start=4]
+. Nosso painel, embora simples, já está concluído. Vamos adicioná-lo à home page. Abra ``HomePage.java`` e, em seguida, crie uma nova instância de BannerPanel, adicionando a seguinte linha ao fim do Construtor:
[source,java]
@@ -615,7 +643,9 @@
add(new BannerPanel("bannerPanel"));
----
-5. Em seguida, precisaremos converter o painel. Abra ``HomePage.html`` e adicione a tag do placeholder direito acima da tag BODY de fechamento, certificando-se de usar o mesmo identificador de Wicket usado no arquivo Java:
+
+[start=5]
+. Em seguida, precisaremos converter o painel. Abra ``HomePage.html`` e adicione a tag do placeholder direito acima da tag BODY de fechamento, certificando-se de usar o mesmo identificador de Wicket usado no arquivo Java:
[source,java]
@@ -623,7 +653,9 @@
<span wicket:id='bannerPanel'/>
----
-6.
+
+[start=6]
+.
Execute o projeto novamente. Observe que o painel é exibido, exatamente onde o arquivo HTML especificado deve ser convertido:
image::images/result-3.png[]
@@ -668,7 +700,9 @@
</html>
----
-2. Na parte Java correspondente, observe que o seguinte foi adicionado automaticamente:
+
+[start=2]
+. Na parte Java correspondente, observe que o seguinte foi adicionado automaticamente:
[source,java]
@@ -696,7 +730,9 @@
}
};
----
-3. Pressione Ctrl-Shift-I e, em seguida, certifique-se de selecionar as instruções de importação corretas:
+
+[start=3]
+. Pressione Ctrl-Shift-I e, em seguida, certifique-se de selecionar as instruções de importação corretas:
image::images/imports-1.png[]
@@ -717,7 +753,9 @@
import org.apache.wicket.model.Model;
import org.apache.wicket.util.string.Strings;
----
-4.
+
+[start=4]
+.
Atualize o browser novamente e você terá um campo de preenchimento automático do AJAX. Conforme você digita, o campo será preenchido com países correspondentes ao texto digitado.
image::images/result-4.png[]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_ru.asciidoc
index 6159f0b..28f7cea 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_ru.asciidoc
@@ -104,7 +104,9 @@
* *Главная страница Wicket.* Имя главной страницы, которая состоит из файлов ``xxx.java`` и ``xxx.html`` .
* *Основной пакет.* Пакет Java, в который среда IDE помещает все созданные артефакты.
* *Версия.* Версия Wicket. В вышеуказанном списке 'Версия' будут отображаться все библиотеки с префиксом 'Wicket', доступные в Диспетчере библиотек. По умолчанию в списке отображается только версия 1.6.0, так как именно эта версия предоставляется подключаемым модулем.
-5. Нажмите 'Готово'.
+
+[start=5]
+. Нажмите 'Готово'.
Среда IDE создает проект ``MyFirstWicketApp `` . Проект содержит все исходные файлы и метаданные проекта, например сценарий построения Ant. Проект откроется в среде IDE. Логическую структуру можно просмотреть в окне 'Проекты' (Ctrl-1):
@@ -121,13 +123,17 @@
Нажмите 'Далее'.
-2. На панели 'Имя и расположение' в поле 'Имя проекта' введите ``MyFirstWicketApp`` . Измените значения в поле 'Местоположение проекта' и параметры Maven как требуется.
+
+[start=2]
+. На панели 'Имя и расположение' в поле 'Имя проекта' введите ``MyFirstWicketApp`` . Измените значения в поле 'Местоположение проекта' и параметры Maven как требуется.
image::images/maven-3.png[]
Нажмите 'Далее'.
-3. Выберите нужный сервер. В качестве версии Java EE укажите 'Java EE 6 Web'.
+
+[start=3]
+. Выберите нужный сервер. В качестве версии Java EE укажите 'Java EE 6 Web'.
image::images/maven-4.png[]
@@ -135,11 +141,15 @@
image::images/maven-5.png[]
-4. Поскольку мы реализовали поддержку Java EE 6, на предыдущем этапе не создается файл ``web.xml`` . Однако Wicket требует, чтобы в файле ``web.xml`` был зарегистрирован фильтр приложения Wicket. Поэтому прежде чем продолжить, необходимо добавить в приложение новый файл ``web.xml`` .
+
+[start=4]
+. Поскольку мы реализовали поддержку Java EE 6, на предыдущем этапе не создается файл ``web.xml`` . Однако Wicket требует, чтобы в файле ``web.xml`` был зарегистрирован фильтр приложения Wicket. Поэтому прежде чем продолжить, необходимо добавить в приложение новый файл ``web.xml`` .
Щелкните приложение правой кнопкой мыши и выберите Создать > Другие, затем выберите Веб > Стандартный дескриптор развертывания (web.xml). Нажмите кнопку "Далее", а затем нажмите кнопку "Готово".
-5. Теперь можно реализовать поддержку Wicket в приложении. Щелкните правой кнопкой узел проекта и выберите команду "Свойства". В диалоговом окне 'Свойства проекта' выберите 'Платформы' и 'Wicket'. Используя информацию из предыдущих сценариев, заполните поля в разделе 'Конфигурация Wicket' диалогового окна. Нажмите OK.
+
+[start=5]
+. Теперь можно реализовать поддержку Wicket в приложении. Щелкните правой кнопкой узел проекта и выберите команду "Свойства". В диалоговом окне 'Свойства проекта' выберите 'Платформы' и 'Wicket'. Используя информацию из предыдущих сценариев, заполните поля в разделе 'Конфигурация Wicket' диалогового окна. Нажмите OK.
Среда IDE все файлы Wicket, необходимые для начала работы:
@@ -156,7 +166,9 @@
Нажмите 'Далее'.
-2. В поле 'Поиск' введите 'wicket', затем выберите архетип, который вы хотите использовать.
+
+[start=2]
+. В поле 'Поиск' введите 'wicket', затем выберите архетип, который вы хотите использовать.
image::images/maven-8.png[]
@@ -187,8 +199,12 @@
image::images/maven-9.png[]
-2. В диалоговом окне, показанном на рисунке, нажмите 'Создать библиотеку' и создайте новую библиотеку, имя которой должно иметь префикс 'Wicket'. Добавьте файлы JAR в созданную библиотеку (другими словами, зарегистрируйте файлы JAR предпочтительной версии Wicket в этой библиотеке).
-3.
+
+[start=2]
+. В диалоговом окне, показанном на рисунке, нажмите 'Создать библиотеку' и создайте новую библиотеку, имя которой должно иметь префикс 'Wicket'. Добавьте файлы JAR в созданную библиотеку (другими словами, зарегистрируйте файлы JAR предпочтительной версии Wicket в этой библиотеке).
+
+[start=3]
+.
Впоследствии при создании очередного веб-приложения или добавлении поддержки Wicket в существующее приложение на панели 'Платформы' будет отображаться библиотека, которую вы только что зарегистрировали (если имя библиотеки имеет префикс 'Wicket'):
image::images/maven-91.png[]
@@ -428,7 +444,9 @@
Таким образом можно быстро переключаться между двумя представлениями компонентов Wicket.
* *Панель нижнего колонтитула.* Панель нижнего колонтитула имеет такую же структуру, как и панель верхнего колонтитула, которая была описана ранее в этом разделе.
-2.
+
+[start=2]
+.
Щелкните проект правой кнопкой мыши и запустите его выполнение. Среда IDE выполняет сборку приложения, создает файл WAR, отправляет его на сервер развертывания, открывает стандартный браузер IDE и отображает приложение:
image::images/deploy-1.png[]
@@ -456,7 +474,9 @@
image::images/widget-2.png[]
-2. После добавления строки под элементом H1 в файле HTML перетащите элемент Label из палитры в область под элементом H1. Откроется следующее диалоговое окно:
+
+[start=2]
+. После добавления строки под элементом H1 в файле HTML перетащите элемент Label из палитры в область под элементом H1. Откроется следующее диалоговое окно:
image::images/widget-3.png[]
@@ -513,7 +533,9 @@
}
----
-3.
+
+[start=3]
+.
Сохраните файлы. Обновите страницу в браузере. В результате отобразится виджет Wicket Label, представленный в файле ``HomePage.html`` :
image::images/deploy-2.png[]
@@ -539,7 +561,9 @@
Выберите 'Панель Wicket' и нажмите 'Далее'.
-2. В поле 'Имя файла' введите ``BannerPanel`` . На экране должны быть представлены следующие параметры:
+
+[start=2]
+. В поле 'Имя файла' введите ``BannerPanel`` . На экране должны быть представлены следующие параметры:
image::images/panel-2.png[]
@@ -547,7 +571,9 @@
В результате в пакете будет создано два новых файла: ``BannerPanel.html`` и ``BannerPanel.java`` .
-3. Откройте файл ``BannerPanel.html`` и обратите внимание на содержимое этого файла:
+
+[start=3]
+. Откройте файл ``BannerPanel.html`` и обратите внимание на содержимое этого файла:
[source,xml]
@@ -607,7 +633,9 @@
}
}
----
-4. Простая панель почти готова. Добавим ее на главную страницу. Откройте файл ``HomePage.java`` и создайте новый экземпляр элемента BannerPanel, добавив следующую строку в конечный сегмент конструктора:
+
+[start=4]
+. Простая панель почти готова. Добавим ее на главную страницу. Откройте файл ``HomePage.java`` и создайте новый экземпляр элемента BannerPanel, добавив следующую строку в конечный сегмент конструктора:
[source,java]
@@ -615,7 +643,9 @@
add(new BannerPanel("bannerPanel"));
----
-5. Теперь нужно отобразить панель. Откройте файл ``HomePage.html`` и добавьте тег-заполнитель сразу над закрывающим тегом BODY. Обязательно используйте такой же идентификатор Wicket, как и в файле Java:
+
+[start=5]
+. Теперь нужно отобразить панель. Откройте файл ``HomePage.html`` и добавьте тег-заполнитель сразу над закрывающим тегом BODY. Обязательно используйте такой же идентификатор Wicket, как и в файле Java:
[source,java]
@@ -623,7 +653,9 @@
<span wicket:id='bannerPanel'/>
----
-6.
+
+[start=6]
+.
Выполните проект еще раз. Панель отображается на странице точно в том месте, которое указано в файле HTML:
image::images/result-3.png[]
@@ -668,7 +700,9 @@
</html>
----
-2. В соответствующем представлении Java будут автоматически добавлены следующие элементы:
+
+[start=2]
+. В соответствующем представлении Java будут автоматически добавлены следующие элементы:
[source,java]
@@ -696,7 +730,9 @@
}
};
----
-3. Нажмите Ctrl-Shift-I и выберите корректные операторы импорта:
+
+[start=3]
+. Нажмите Ctrl-Shift-I и выберите корректные операторы импорта:
image::images/imports-1.png[]
@@ -717,7 +753,9 @@
import org.apache.wicket.model.Model;
import org.apache.wicket.util.string.Strings;
----
-4.
+
+[start=4]
+.
Обновите страницу в браузере еще раз. На странице появится автоматически заполняемое поле AJAX. При вводе символов в поле будет подставляться название страны, соответствующее введенному тексту.
image::images/result-4.png[]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_zh_CN.asciidoc
index d2acca0..395ac8a 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps-wicket_zh_CN.asciidoc
@@ -104,7 +104,9 @@
* *Wicket Home Page*（Wicket 主页）。指定将包含称为 ``xxx.java`` 和 ``xxx.html`` 的文件的主页名称。
* *Main Package*（主包）。IDE 将生成的所有工件放入的 Java 包。
* *Version*（版本）。Wicket 版本。以上 "Version"（版本）下拉列表中将列出库管理器中名称以 "Wicket" 开头的所有库。默认情况下，唯一列出的版本是 1.6.0，因为这是插件所提供的版本。
-5. 单击 "Finish"（完成）。
+
+[start=5]
+. 单击 "Finish"（完成）。
IDE 将创建 ``MyFirstWicketApp `` 项目。此项目包含所有源代码和项目元数据，例如项目的 Ant 构建脚本。此项目在 IDE 中打开。可以在 "Projects"（项目）窗口（Ctrl-1 组合键）中查看其逻辑结构：
@@ -121,13 +123,17 @@
单击 "Next"（下一步）。
-2. 在 "Name and Location"（名称和位置）面板的 "Project Name"（项目名称）中，键入 ``MyFirstWicketApp`` 。根据您的需求更改 "Project Location"（项目位置）和默认 Maven 设置。
+
+[start=2]
+. 在 "Name and Location"（名称和位置）面板的 "Project Name"（项目名称）中，键入 ``MyFirstWicketApp`` 。根据您的需求更改 "Project Location"（项目位置）和默认 Maven 设置。
image::images/maven-3.png[]
单击 "Next"（下一步）。
-3. 根据您的需求选择适当的服务器，并选择 "Java EE 6 Web" 作为 "Java EE Version"（Java EE 版本）设置。
+
+[start=3]
+. 根据您的需求选择适当的服务器，并选择 "Java EE 6 Web" 作为 "Java EE Version"（Java EE 版本）设置。
image::images/maven-4.png[]
@@ -135,11 +141,15 @@
image::images/maven-5.png[]
-4. 因为我们已添加对 Java EE 6 的支持，所以上一步中未创建 ``web.xml`` 文件。但是，Wicket 要求在 ``web.xml`` 文件中注册 Wicket 应用程序过滤器。因此，我们将在应用程序中添加新的 ``web.xml`` 文件，然后继续。
+
+[start=4]
+. 因为我们已添加对 Java EE 6 的支持，所以上一步中未创建 ``web.xml`` 文件。但是，Wicket 要求在 ``web.xml`` 文件中注册 Wicket 应用程序过滤器。因此，我们将在应用程序中添加新的 ``web.xml`` 文件，然后继续。
右键单击应用程序，选择 "New"（新建）> "Other"（其他），然后选择 "Web" > "Standard Deployment Descriptor"（标准部署描述符）(web.xml)。单击 "Next"（下一步），然后单击 "Finish"（完成）。
-5. 此时我们即可将 Wicket 支持添加到应用程序中。右键单击项目节点，然后选择 "Properties"（属性）。在 "Project Properties"（项目属性）对话框中，选择 "Frameworks"（框架），然后单击 "Wicket"。使用前几部分中的描述在此对话框的 "Wicket Configuration"（Wicket 配置）部分中填写详细信息。单击 "OK"（确定）。
+
+[start=5]
+. 此时我们即可将 Wicket 支持添加到应用程序中。右键单击项目节点，然后选择 "Properties"（属性）。在 "Project Properties"（项目属性）对话框中，选择 "Frameworks"（框架），然后单击 "Wicket"。使用前几部分中的描述在此对话框的 "Wicket Configuration"（Wicket 配置）部分中填写详细信息。单击 "OK"（确定）。
IDE 将创建入门所需的所有 Wicket 文件：
@@ -156,7 +166,9 @@
单击 "Next"（下一步）。
-2. 在 "Search"（搜索）字段中，键入 "wicket"，然后选择要使用的原型。
+
+[start=2]
+. 在 "Search"（搜索）字段中，键入 "wicket"，然后选择要使用的原型。
image::images/maven-8.png[]
@@ -187,8 +199,12 @@
image::images/maven-9.png[]
-2. 在上面显示的对话框中，单击 "New Library"（新建库），使用以 "Wicket" 开头的名称创建一个新库。将 JAR 添加到该库中，即，将 Wicket 的首选版本的 JAR 注册到您已创建的库中。
-3.
+
+[start=2]
+. 在上面显示的对话框中，单击 "New Library"（新建库），使用以 "Wicket" 开头的名称创建一个新库。将 JAR 添加到该库中，即，将 Wicket 的首选版本的 JAR 注册到您已创建的库中。
+
+[start=3]
+.
当您接下来创建新的 Web 应用程序时，或将 Wicket 支持添加到现有应用程序中时，"Frameworks"（框架）面板将显示新注册的库（如果其名称以 "Wicket" 一词开头）：
image::images/maven-91.png[]
@@ -428,7 +444,9 @@
通过这种方式，可以在 Wicket 组件的两端之间快速有效地导航。
* *Footer Panel*（页脚面板）。页脚面板的结构与页眉面板相同，如上所示。
-2.
+
+[start=2]
+.
右键单击项目并运行该项目。IDE 将编译应用程序，创建 WAR 文件，将该文件发送到部署服务器，打开 IDE 的默认浏览器，并显示应用程序：
image::images/deploy-1.png[]
@@ -456,7 +474,9 @@
image::images/widget-2.png[]
-2. 在 HTML 文件中的 H1 元素下方添加一行之后，将 "Label"（标签）项从 "Palette"（组件面板）拖放到 H1 元素下方。您会看到下面的对话框：
+
+[start=2]
+. 在 HTML 文件中的 H1 元素下方添加一行之后，将 "Label"（标签）项从 "Palette"（组件面板）拖放到 H1 元素下方。您会看到下面的对话框：
image::images/widget-3.png[]
@@ -513,7 +533,9 @@
}
----
-3.
+
+[start=3]
+.
保存文件。刷新浏览器后，您将会看到在 ``HomePage.html`` 文件中呈现的 Wicket 标签：
image::images/deploy-2.png[]
@@ -539,7 +561,9 @@
选择 "Wicket Panel"（Wicket 面板）并单击 "Next"（下一步）。
-2. 在 "File Name"（文件名）中键入 ``BannerPanel`` 。您现在应该看到下面的屏幕：
+
+[start=2]
+. 在 "File Name"（文件名）中键入 ``BannerPanel`` 。您现在应该看到下面的屏幕：
image::images/panel-2.png[]
@@ -547,7 +571,9 @@
请注意，我们的包中现在包含 ``BannerPanel.html`` 和 ``BannerPanel.java`` 这两个新文件。
-3. 打开 ``BannerPanel.html`` ，注意此文件的内容如下：
+
+[start=3]
+. 打开 ``BannerPanel.html`` ，注意此文件的内容如下：
[source,xml]
@@ -607,7 +633,9 @@
}
}
----
-4. 我们的面板虽然简单，但实际上已经完整。将该面板添加到主页中。打开 ``HomePage.java`` ，然后通过在构造函数结尾添加以下行来创建 BannerPanel 的新实例：
+
+[start=4]
+. 我们的面板虽然简单，但实际上已经完整。将该面板添加到主页中。打开 ``HomePage.java`` ，然后通过在构造函数结尾添加以下行来创建 BannerPanel 的新实例：
[source,java]
@@ -615,7 +643,9 @@
add(new BannerPanel("bannerPanel"));
----
-5. 接下来，我们需要呈现面板。打开 ``HomePage.html`` ，然后在结束的 BODY 标记上方添加占位符标记，并确保使用 Java 文件中使用的相同 Wicket 标识符：
+
+[start=5]
+. 接下来，我们需要呈现面板。打开 ``HomePage.html`` ，然后在结束的 BODY 标记上方添加占位符标记，并确保使用 Java 文件中使用的相同 Wicket 标识符：
[source,java]
@@ -623,7 +653,9 @@
<span wicket:id='bannerPanel'/>
----
-6.
+
+[start=6]
+.
重新运行项目。请注意，面板的显示位置完全如 HTML 文件指定的：
image::images/result-3.png[]
@@ -668,7 +700,9 @@
</html>
----
-2. 在匹配的 Java 端，注意已自动添加了以下内容：
+
+[start=2]
+. 在匹配的 Java 端，注意已自动添加了以下内容：
[source,java]
@@ -696,7 +730,9 @@
}
};
----
-3. 按 Ctrl-Shift-I 组合键，然后确保选择正确的 import 语句：
+
+[start=3]
+. 按 Ctrl-Shift-I 组合键，然后确保选择正确的 import 语句：
image::images/imports-1.png[]
@@ -717,7 +753,9 @@
import org.apache.wicket.model.Model;
import org.apache.wicket.util.string.Strings;
----
-4.
+
+[start=4]
+.
再次刷新浏览器后，您将具有一个 AJAX 自动完成字段。当您键入时，该字段中将填充与输入的文本匹配的国家/地区。
image::images/result-4.png[]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps.asciidoc
index 7cfacd5..8ddd80c 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps.asciidoc
@@ -50,7 +50,9 @@
_or_
Oracle Web Logic server |4.x
_ _
-7.x or 8.x
+
+[start=7]
+.x or 8.x
11gR1 (10.3.3) or later
|===
@@ -96,14 +98,18 @@
String name;
----
-4. Add the following constructor to the class:
+
+[start=4]
+. Add the following constructor to the class:
[source,java]
----
public NameHandler() { }
----
-5. Add the following line in the ``NameHandler()`` constructor:
+
+[start=5]
+. Add the following line in the ``NameHandler()`` constructor:
[source,java]
----
@@ -119,7 +125,9 @@
The Encapsulate Fields dialog opens, listing the ``name`` field. Notice that Fields' Visibility is by default set to private, and Accessors' Visibility to public, indicating that the access modifier for class variable declaration will be specified as private, whereas getter and setter methods will be generated with ``public`` and ``private`` modifiers, respectively.
image::images/encapsulatefields-dialog.png[]
-2. Click Refactor.
+
+[start=2]
+. Click Refactor.
Getter and setter methods are generated for the ``name`` field. The modifier for the class variable is set to ``private`` while getter and setter methods are generated with public modifiers. The Java class should now look similar to the following.
@@ -163,7 +171,9 @@
The Insert Form dialog box displays.
-3. Specify the following values:
+
+[start=3]
+. Specify the following values:
* *Action: *response.jsp
* *Method: *GET
* *Name: *Name Input Form
@@ -171,16 +181,24 @@
Click OK. An HTML form is added to the ``index.jsp`` file.
image::images/input-form.png[]
-4. Drag a Text Input item to a point just before the ``</form>`` tag, then specify the following values:
+
+[start=4]
+. Drag a Text Input item to a point just before the ``</form>`` tag, then specify the following values:
* *Name: *name
* *Type: *text
Click OK. An HTML ``<input>`` tag is added between the ``<form>`` tags. Delete the ``value`` attribute from this tag.
-5. Drag a Button item to a point just before the ``</form>`` tag. Specify the following values:
+
+[start=5]
+. Drag a Button item to a point just before the ``</form>`` tag. Specify the following values:
* *Label: *OK
* *Type: *submit
Click OK. An HTML button is added between the ``<form>`` tags.
-6. Type ``Enter your name:`` just before the first ``<input>`` tag, then change the default ``Hello World!`` text between the ``<h1>`` tags to ``Entry Form`` .
-7. Right-click within the Source Editor and choose Format (Alt-Shift-F) to tidy the format of your code. Your ``index.jsp`` file should now appear similar to the following:
+
+[start=6]
+. Type ``Enter your name:`` just before the first ``<input>`` tag, then change the default ``Hello World!`` text between the ``<h1>`` tags to ``Entry Form`` .
+
+[start=7]
+. Right-click within the Source Editor and choose Format (Alt-Shift-F) to tidy the format of your code. Your ``index.jsp`` file should now appear similar to the following:
[source,xml]
----
@@ -210,11 +228,14 @@
In the Palette to the right of the Source Editor, expand JSP and drag a Use Bean item to a point just below the ``<body>`` tag in the Source Editor. The Insert Use Bean dialog opens. Specify the values shown in the following figure.
image::images/usebean-dialog.png[]
+
* *ID: *mybean
* *Class: *org.mypackage.hello.NameHandler
* *Scope: *session
Click OK. Notice that the ``<jsp:useBean>`` tag is added beneath the ``<body>`` tag.
-3. Drag a Set Bean Property item from the Palette to a point just before the ``<h1>`` tag and click OK. In the ``<jsp:setProperty>`` tag that appears, delete the empty ``value`` attribute and edit as follows. Delete the ``value = ""`` attribute if the IDE created it! Otherwise, it overwrites the value for ``name`` that you pass in ``index.jsp`` .
+
+[start=3]
+. Drag a Set Bean Property item from the Palette to a point just before the ``<h1>`` tag and click OK. In the ``<jsp:setProperty>`` tag that appears, delete the empty ``value`` attribute and edit as follows. Delete the ``value = ""`` attribute if the IDE created it! Otherwise, it overwrites the value for ``name`` that you pass in ``index.jsp`` .
[source,java]
----
@@ -226,14 +247,18 @@
``<jsp:setProperty>`` documentation, you can set a property value in various ways. In this case, the user input coming from ``index.jsp`` becomes a name/value pair that is passed to the ``request`` object. When you set a property using the ``<jsp:setProperty>`` tag, you can specify the value according to the name of a property contained in the ``request`` object. Therefore, by setting ``property`` to ``name`` , you can retrieve the value specified by user input.
-4. Change the text between the <h1> tags so that it looks like this:
+
+[start=4]
+. Change the text between the <h1> tags so that it looks like this:
[source,xml]
----
<h1>Hello, !</h1>
----
-5. Drag a Get Bean Property item from the Palette and drop it after the comma between the ``<h1>`` tags. Specify the following values in the Insert Get Bean Property dialog:
+
+[start=5]
+. Drag a Get Bean Property item from the Palette and drop it after the comma between the ``<h1>`` tags. Specify the following values in the Insert Get Bean Property dialog:
* *Bean Name: *mybean
* *Property Name: *name
@@ -241,7 +266,9 @@
*Caution:* Property names are case-sensitive. The "name" property must be in the same case in ``response.jsp`` and in the input form in ``index.jsp`` .
-6. Right-click within the Source Editor and choose Format (Alt-Shift-F) to tidy the format of your code. The ``<body>`` tags of your ``response.jsp`` file should now appear similar to the following:
+
+[start=6]
+. Right-click within the Source Editor and choose Format (Alt-Shift-F) to tidy the format of your code. The ``<body>`` tags of your ``response.jsp`` file should now appear similar to the following:
[source,xml]
----
@@ -267,21 +294,29 @@
*Note:* By default, the project has been created with the Compile on Save feature enabled, so you do not need to compile your code first in order to run the application in the IDE.
-2. The IDE opens an output window that shows the progress of running the application. Look at the HelloWeb tab in the Output window. In this tab, you can follow all the steps that the IDE performs. If there is a problem, the IDE displays error information in this window.
+
+[start=2]
+. The IDE opens an output window that shows the progress of running the application. Look at the HelloWeb tab in the Output window. In this tab, you can follow all the steps that the IDE performs. If there is a problem, the IDE displays error information in this window.
image::images/app-output-tab.png[]
-3. The IDE opens an output window showing the server status. Look at the tab in the Output window with the name of your server.
+
+[start=3]
+. The IDE opens an output window showing the server status. Look at the tab in the Output window with the name of your server.
*Important:* If the GlassFish server fails to start, start it manually and run the project again. You can start the server manually from the Services window, by right-clicking the server node and selecting Start.
The server output window is very informative about problems running Web applications. The server's logs can also be helpful. They are located in the server's relevant domain directory. You can also view the IDE log, visible by selecting View > IDE log.
image::images/gf-output-tab.png[]
-4.
+
+[start=4]
+.
The ``index.jsp`` page opens in your default browser. Note that the browser window may open before the IDE displays the server output.
image::images/result1.png[]
-5.
+
+[start=5]
+.
Enter your name in the text box, then click OK. The ``response.jsp`` page displays, providing you with a simple greeting.
image::images/result2.png[]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_ja.asciidoc
index 40c8b84..0f5f2d3 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_ja.asciidoc
@@ -50,7 +50,9 @@
_または_
Oracle WebLogic Server |4.x
_ _
-7.xまたは8.x
+
+[start=7]
+.xまたは8.x
11gR1 (10.3.3)以降
|===
@@ -96,14 +98,18 @@
String name;
----
-4. 次のコンストラクタをクラスに追加します。
+
+[start=4]
+. 次のコンストラクタをクラスに追加します。
[source,java]
----
public NameHandler() { }
----
-5. ``nameHandler() `` コンストラクタに次の行を追加します。
+
+[start=5]
+. ``nameHandler() `` コンストラクタに次の行を追加します。
[source,java]
----
@@ -119,7 +125,9 @@
「フィールドをカプセル化」ダイアログが開き、 ``name`` フィールドが表示されます。フィールドの可視性はデフォルトでprivateに、アクセッサ・メソッドの可視性はpublicに設定されています。これは、クラス変数宣言のアクセス修飾子はprivateと指定され、取得メソッドと設定メソッドはそれぞれ ``public`` と ``private`` の修飾子を指定して生成されることを示します。
image::images/encapsulatefields-dialog.png[]
-2. 「リファクタリング」をクリックします。
+
+[start=2]
+. 「リファクタリング」をクリックします。
``name`` フィールドの取得メソッドと設定メソッドが生成されます。クラス変数の修飾子は ``private`` に設定され、取得メソッドと設定メソッドはpublicの修飾子を指定して生成されます。Javaクラスは次のようになります。
@@ -163,7 +171,9 @@
「挿入フォーム」ダイアログ・ボックスが表示されます。
-3. 次の値を指定します。
+
+[start=3]
+. 次の値を指定します。
* *アクション:* response.jsp
* *メソッド:* GET
* *名前:* Name Input Form
@@ -171,16 +181,24 @@
「OK」をクリックします。 ``index.jsp`` ファイルにHTMLフォームが追加されます。
image::images/input-form.png[]
-4. 「テキスト入力」項目を ``</form>`` タグの直前にドラッグし、次の値を指定します。
+
+[start=4]
+. 「テキスト入力」項目を ``</form>`` タグの直前にドラッグし、次の値を指定します。
* *名前:* name
* *型:* text
「OK」をクリックします。 ``<form>`` タグの間にHTML ``<input>`` タグが追加されます。このタグから ``value`` 属性を削除します。
-5. ``</form>`` タグの直前に「ボタン」項目をドラッグします。次の値を指定します。
+
+[start=5]
+. ``</form>`` タグの直前に「ボタン」項目をドラッグします。次の値を指定します。
* *ラベル:* OK
* *型:* submit
「OK」をクリックします。 ``<form>`` タグの間にHTMLのボタンが追加されます。
-6. ``<input>`` タグの直前に「 ``Enter your name:`` 」と入力し、 ``<h1>`` タグで囲まれたデフォルトの「 ``Hello World!`` 」というテキストを「 ``Entry Form`` 」に変更します。
-7. ソース・エディタ内を右クリックし、「フォーマット」([Alt]-[Shift]-[F])を選択してコードの体裁を整えます。 ``index.jsp`` ファイルは次のようになります。
+
+[start=6]
+. ``<input>`` タグの直前に「 ``Enter your name:`` 」と入力し、 ``<h1>`` タグで囲まれたデフォルトの「 ``Hello World!`` 」というテキストを「 ``Entry Form`` 」に変更します。
+
+[start=7]
+. ソース・エディタ内を右クリックし、「フォーマット」([Alt]-[Shift]-[F])を選択してコードの体裁を整えます。 ``index.jsp`` ファイルは次のようになります。
[source,xml]
----
@@ -210,11 +228,14 @@
ソース・エディタの右側の「パレット」で、「JSP」を展開し、「Beanを使用」項目をソース・エディタ内の ``<body>`` タグのすぐ下にドラッグします。「挿入Beanを使用」ダイアログが開きます。次の図に示すように、値を指定します。
image::images/usebean-dialog.png[]
+
* *ID:* mybean
* *クラス: *org.mypackage.hello.NameHandler
* *スコープ:* session
「OK」をクリックします。 ``<jsp:useBean>`` タグが ``<body>`` タグの下に追加されていることがわかります。
-3. パレットから、「Beanプロパティを設定」項目を ``<h1>`` タグの直前にドラッグし、「OK」をクリックします。表示される ``<jsp:setProperty>`` タグ内で、空の ``value`` 属性を削除し、次のように編集します。 ``value=""`` 属性が作成されている場合は削除します。そうでない場合は、 ``index.jsp`` で渡す ``name`` の値が上書きされます。
+
+[start=3]
+. パレットから、「Beanプロパティを設定」項目を ``<h1>`` タグの直前にドラッグし、「OK」をクリックします。表示される ``<jsp:setProperty>`` タグ内で、空の ``value`` 属性を削除し、次のように編集します。 ``value=""`` 属性が作成されている場合は削除します。そうでない場合は、 ``index.jsp`` で渡す ``name`` の値が上書きされます。
[source,java]
----
@@ -226,14 +247,18 @@
``<jsp:setProperty>`` のドキュメントに示すように、様々な方法で設定できます。この例では、 ``index.jsp`` からのユーザー入力が、 ``request`` オブジェクトに渡される名前と値のペアになります。 ``<jsp:setProperty>`` タグを使用してプロパティを設定するとき、 ``request`` オブジェクトに含まれるプロパティの名前に従って値を指定できます。したがって、 ``property`` を ``name`` に設定することで、ユーザー入力で指定された値を取得できます。
-4. <h1> タグの間のテキストを次のように変更します。
+
+[start=4]
+. <h1> タグの間のテキストを次のように変更します。
[source,xml]
----
<h1>Hello, !</h1>
----
-5. パレットから「Beanプロパティを取得」項目をドラッグし、 ``<h1>`` タグ間のカンマの後にドロップします。「挿入Beanプロパティを取得」ダイアログで次の値を指定します。
+
+[start=5]
+. パレットから「Beanプロパティを取得」項目をドラッグし、 ``<h1>`` タグ間のカンマの後にドロップします。「挿入Beanプロパティを取得」ダイアログで次の値を指定します。
* *Bean名: *mybean
* *プロパティ名: *name
@@ -241,7 +266,9 @@
*注意:* プロパティ名では大文字と小文字が区別されます。 ``response.jsp`` と ``index.jsp`` の入力フォームの"name" プロパティは、同じ大文字と小文字で指定する必要があります。
-6. ソース・エディタ内を右クリックし、「フォーマット」([Alt]-[Shift]-[F])を選択してコードの体裁を整えます。 ``response.jsp`` ファイルの ``<body>`` タグは次のようになります。
+
+[start=6]
+. ソース・エディタ内を右クリックし、「フォーマット」([Alt]-[Shift]-[F])を選択してコードの体裁を整えます。 ``response.jsp`` ファイルの ``<body>`` タグは次のようになります。
[source,xml]
----
@@ -267,21 +294,29 @@
*注意:* プロジェクトはデフォルトで「保存時にコンパイル」機能が有効になっている状態で作成されているので、アプリケーションをIDEで実行するときに先にコードをコンパイルする必要はありません。
-2. アプリケーションの実行の進行状況を示す出力ウィンドウが開きます。出力ウィンドウの「HelloWeb」タブを見てください。このタブでは、IDEで実行されるすべての手順を追跡できます。問題がある場合は、このウィンドウにエラー情報が表示されます。
+
+[start=2]
+. アプリケーションの実行の進行状況を示す出力ウィンドウが開きます。出力ウィンドウの「HelloWeb」タブを見てください。このタブでは、IDEで実行されるすべての手順を追跡できます。問題がある場合は、このウィンドウにエラー情報が表示されます。
image::images/app-output-tab.png[]
-3. サーバーのステータスを示す出力ウィンドウが開きます。出力ウィンドウで、使用しているサーバーの名前が付いているタブを見てください。
+
+[start=3]
+. サーバーのステータスを示す出力ウィンドウが開きます。出力ウィンドウで、使用しているサーバーの名前が付いているタブを見てください。
*重要:* GlassFishサーバーの起動に失敗した場合は、手動で起動し、プロジェクトを再度実行してください。サーバーは、「サービス」ウィンドウでサーバー・ノードを右クリックし、「起動」を選択することで手動で起動できます。
サーバーの出力ウィンドウは、Webアプリケーションの実行の問題に関する詳細な情報を提供します。サーバーのログも役立つ場合があります。これらは、サーバーのドメイン・ディレクトリにあります。「表示」>「IDEのログ」を選択して、IDEのログを表示することもできます。
image::images/gf-output-tab.png[]
-4.
+
+[start=4]
+.
デフォルトのブラウザで ``index.jsp`` ページが開きます。IDEがサーバーの出力を表示する前に、ブラウザ・ウィンドウが開くこともあります。
image::images/result1.png[]
-5.
+
+[start=5]
+.
テキスト・ボックスに名前を入力し、「OK」をクリックします。 ``response.jsp`` ページが表示され、単純な挨拶のメッセージが表示されます。
image::images/result2.png[]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_pt_BR.asciidoc
index 7cb0a32..8cea6a4 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_pt_BR.asciidoc
@@ -50,7 +50,9 @@
_ou_
Servidor Oracle WebLogic |4.x
_ _
-7.x ou 8.x
+
+[start=7]
+.x ou 8.x
11gR1 (10.3.3) ou mais recente
|===
@@ -96,14 +98,18 @@
String name;
----
-4. Adicione o construtor a seguir à classe:
+
+[start=4]
+. Adicione o construtor a seguir à classe:
[source,java]
----
public NameHandler() { }
----
-5. Adicione a linha a seguir no construtor ``NameHandler()`` :
+
+[start=5]
+. Adicione a linha a seguir no construtor ``NameHandler()`` :
[source,java]
----
@@ -119,7 +125,9 @@
A caixa de diálogo Encapsular Campos será aberta, listando o campo ``name`` . Observe que a Visibilidade do Campo é definida por default como privada, e a Visibilidade dos Acessadores como pública, indicando que o modificador de acesso da declaração da variável da classe será especificado como privado, enquanto os métodos getter e setter serão gerados com os modificadores ``public`` e ``private`` , respectivamente.
image::images/encapsulatefields-dialog.png[]
-2. Clique em Refatorar.
+
+[start=2]
+. Clique em Refatorar.
Os métodos getter e setter são gerados para o campo ``name`` . O modificador da variável de classe é definido como ``private`` enquanto os métodos getter e setter são gerados com modificadores públicos. A classe Java deverá ser semelhante a:
@@ -163,7 +171,9 @@
A caixa de diálogo Inserir Form será exibida.
-3. Especifique os valores a seguir:
+
+[start=3]
+. Especifique os valores a seguir:
* *Ação:* response.jsp
* *Método:* GET
* *Nome:* Form de Entrada de Nome
@@ -171,16 +181,24 @@
Clique em OK. Um form HTML será adicionado ao arquivo ``index.jsp`` .
image::images/input-form.png[]
-4. Arraste um item Entrada de Texto para um ponto antes da tag ``</form>`` , em seguida, especifique os seguintes valores:
+
+[start=4]
+. Arraste um item Entrada de Texto para um ponto antes da tag ``</form>`` , em seguida, especifique os seguintes valores:
* *Nome:* nome
* *Tipo:* texto
Clique em OK. Uma tag HTML ``<input>`` será adicionada entre as tags ``<form>`` . Delete o atributo ``value`` dessa tag.
-5. Arraste um item Botão para antes da tag ``</form>`` . Especifique os valores a seguir:
+
+[start=5]
+. Arraste um item Botão para antes da tag ``</form>`` . Especifique os valores a seguir:
* *Label:* OK
* *Tipo:* envio
Clique em OK. Um botão HTML será adicionado entre as tags ``<form>`` .
-6. Digite ``Indique seu nome:`` antes da primeira tag ``<input>`` , em seguida, altere o texto default ``Hello World!`` entre as tags ``<h1>`` para ``Entry Form`` .
-7. Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar (Alt-Shift-F) para aprimorar o formato do seu código. Seu arquivo ``index.jsp`` agora deverá ser semelhante ao seguinte:
+
+[start=6]
+. Digite ``Indique seu nome:`` antes da primeira tag ``<input>`` , em seguida, altere o texto default ``Hello World!`` entre as tags ``<h1>`` para ``Entry Form`` .
+
+[start=7]
+. Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar (Alt-Shift-F) para aprimorar o formato do seu código. Seu arquivo ``index.jsp`` agora deverá ser semelhante ao seguinte:
[source,xml]
----
@@ -210,11 +228,14 @@
Na Paleta à direita do Editor de Código-Fonte, expanda JSP e arraste um item do Bean de Uso para baixo da tag ``<body>`` no Editor de Código-Fonte. A caixa de diálogo Inserir Bean de Uso será aberta. Especifique os valores mostrados na figura a seguir.
image::images/usebean-dialog.png[]
+
* *ID:* mybean
* *Classe: *org.mypackage.hello.NameHandler
* *Escopo:* sessão
Clique em OK. Observe que a tag ``<jsp:useBean>`` é adicionada abaixo da tag ``<body>`` .
-3. Arraste um item Definir Propriedade do Bean da Paleta para um ponto antes da tag ``<h1>`` e clique em OK. Na tag ``<jsp:setProperty>`` que aparece, delete o atributo ``value`` vazio e edite da seguinte forma: Delete o atributo ``value = ""`` se o IDE o tiver criado! Do contrário, ele substitui o valor de ``name`` indicado em ``index.jsp`` .
+
+[start=3]
+. Arraste um item Definir Propriedade do Bean da Paleta para um ponto antes da tag ``<h1>`` e clique em OK. Na tag ``<jsp:setProperty>`` que aparece, delete o atributo ``value`` vazio e edite da seguinte forma: Delete o atributo ``value = ""`` se o IDE o tiver criado! Do contrário, ele substitui o valor de ``name`` indicado em ``index.jsp`` .
[source,java]
----
@@ -226,14 +247,18 @@
documentação de ``<jsp:setProperty>`` , você pode definir um valor de propriedade de várias formas. Nesse caso, a entrada do usuário que vem de ``index.jsp`` se torna um par nome/valor que é passado para o objeto ``request`` . Quando você define uma propriedade usando a tag ``<jsp:setProperty>`` , pode especificar o valor de acordo com o nome de uma propriedade contida no objeto ``request`` . Portanto, definindo ``property`` como ``name`` , você pode recuperar o valor especificado pela entrada do usuário.
-4. Altere o texto entre as tags <h1> de forma que ele tenha a seguinte aparência:
+
+[start=4]
+. Altere o texto entre as tags <h1> de forma que ele tenha a seguinte aparência:
[source,xml]
----
<h1>Hello, !</h1>
----
-5. Arraste um item Propriedade Get Bean da Paleta e solte-o depois da vírgula entre as tags ``<h1>`` . Especifique os seguintes valores na caixa de diálogo Inserir Propriedade Get Bean:
+
+[start=5]
+. Arraste um item Propriedade Get Bean da Paleta e solte-o depois da vírgula entre as tags ``<h1>`` . Especifique os seguintes valores na caixa de diálogo Inserir Propriedade Get Bean:
* *Nome do Bean: *mybean
* *Nome da Propriedade: *nome
@@ -241,7 +266,9 @@
*Cuidado:* os nomes de propriedade fazem distinção entre maiúsculas e minúsculas. A propriedade "name" deve estar com a mesma colocação de maiúsculas e minúsculas que em ``response.jsp`` e na forma de entrada em ``index.jsp`` .
-6. Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar (Alt-Shift-F) para aprimorar o formato do seu código. As tags ``<body>`` do seu arquivo ``response.jsp`` agora devem ser semelhantes ao seguinte:
+
+[start=6]
+. Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar (Alt-Shift-F) para aprimorar o formato do seu código. As tags ``<body>`` do seu arquivo ``response.jsp`` agora devem ser semelhantes ao seguinte:
[source,xml]
----
@@ -267,21 +294,29 @@
*Observação:* Por default, o projeto foi criado com a funcionalidade Compilar ao Salvar ativado, então, não é necessário compilar o código primeiro para executar a aplicação no IDE.
-2. O IDE abre uma janela de saída que mostra o andamento da execução da aplicação. Veja a guia HellWeb na janela de Saída. Nessa guia, é possível acompanhar todas as etapas executadas pelo IDE. Se houver um problema, o IDE mostrará as informações do erro nessa janela.
+
+[start=2]
+. O IDE abre uma janela de saída que mostra o andamento da execução da aplicação. Veja a guia HellWeb na janela de Saída. Nessa guia, é possível acompanhar todas as etapas executadas pelo IDE. Se houver um problema, o IDE mostrará as informações do erro nessa janela.
image::images/app-output-tab.png[]
-3. O IDE abre uma janela de saída mostrando a situação do servidor. Observe a guia na janela de Saída com o nome do servidor.
+
+[start=3]
+. O IDE abre uma janela de saída mostrando a situação do servidor. Observe a guia na janela de Saída com o nome do servidor.
*Importante:* se a inicialização do GlassFish Server falhar, inicie-o manualmente e execute novamente o projeto. É possível iniciar o servidor manualmente a partir da janela Serviços clicando com o botão direito no nó do servidor e selecionando Iniciar.
A janela de saída do servidor oferece diversas informações sobre os problemas que ocorre ao executar aplicações Web. Os logs do servidor também podem ser úteis. Eles estão localizados no diretório de domínio relevante do servidor. Também é possível exibir o log do IDE, selecionando Exibir > Log do IDE.
image::images/gf-output-tab.png[]
-4.
+
+[start=4]
+.
A página ``index.jsp`` será aberta no browser default. Observe que a janela do browser poderá abrir antes que o IDE exiba a saída do servidor.
image::images/result1.png[]
-5.
+
+[start=5]
+.
Indique seu nome na caixa de texto e clique em OK. A página ``response.jsp`` é exibida com uma simples saudação.
image::images/result2.png[]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_ru.asciidoc
index 4b36fce..e1bd3a0 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_ru.asciidoc
@@ -50,7 +50,9 @@
_или_
Сервер Oracle Web Logic |4.x
_ _
-7.x или 8.x
+
+[start=7]
+.x или 8.x
11gR1 (10.3.3) или более поздние версии
|===
@@ -96,14 +98,18 @@
String name;
----
-4. Добавьте следующий конструктор к классу:
+
+[start=4]
+. Добавьте следующий конструктор к классу:
[source,java]
----
public NameHandler() { }
----
-5. Добавьте следующую строку в конструктор ``NameHandler()`` :
+
+[start=5]
+. Добавьте следующую строку в конструктор ``NameHandler()`` :
[source,java]
----
@@ -119,7 +125,9 @@
Откроется диалоговое окно "Encapsulate Fields", в котором имеется поле ``name`` . Обратите внимание, что для параметра "Visibility" (Видимость) полей по умолчанию установлено значение "private" (закрытый), а для средств доступа – значение "public" (общедоступный); в результате модификатор доступа для объявления переменной класса будет определен как "private", в то время как методы получения и установки будут созданы с модификаторами ``public`` и ``private`` , соответственно.
image::images/encapsulatefields-dialog.png[]
-2. Нажмите кнопку "Refactor" (Реорганизация).
+
+[start=2]
+. Нажмите кнопку "Refactor" (Реорганизация).
Для поля ``name`` создаются методы получения и установки. Модификатор для переменной класса определяется как ``private`` , в то время как методы получения и установки создаются с модификаторами "public". Класс Java должен теперь выглядеть следующим образом.
@@ -163,7 +171,9 @@
Появится диалоговое окно "Insert Form".
-3. Установите следующие значения:
+
+[start=3]
+. Установите следующие значения:
* *Action:* response.jsp;
* *Method:* GET;
* *Name:* Name Input Form.
@@ -171,16 +181,24 @@
Нажмите кнопку "ОК". К файлу ``index.jsp`` добавляется форма HTML.
image::images/input-form.png[]
-4. Перетащите элемент "Text Input" в позицию непосредственно перед тегом ``</form>`` , затем установите следующие значения:
+
+[start=4]
+. Перетащите элемент "Text Input" в позицию непосредственно перед тегом ``</form>`` , затем установите следующие значения:
* *Name:* name;
* *Type:* text.
Нажмите кнопку "ОК". Между тегами ``<form>`` будет добавлен тег HTML ``<input>`` . Удалите атрибут ``value`` из данного тега.
-5. Перетащите элемент "Button" в позицию непосредственно перед тегом ``</form>`` . Установите следующие значения:
+
+[start=5]
+. Перетащите элемент "Button" в позицию непосредственно перед тегом ``</form>`` . Установите следующие значения:
* *Label:* OK;
* *Type:* submit.
Нажмите кнопку "ОК". Между тегами ``<form>`` будет добавлена кнопка HTML.
-6. Введите ``Enter your name:`` непосредственно перед первым тегом ``<input>`` , затем измените текст по умолчанию ``Hello World!`` , расположенный между тегами ``<h1>`` , на ``Entry Form`` .
-7. Щелкните правой кнопкой мыши область редактора исходного кода и выберите "Format" (Alt+Shift+F) для переформатирования кода. Файл ``index.jsp`` должен теперь выглядеть следующим образом:
+
+[start=6]
+. Введите ``Enter your name:`` непосредственно перед первым тегом ``<input>`` , затем измените текст по умолчанию ``Hello World!`` , расположенный между тегами ``<h1>`` , на ``Entry Form`` .
+
+[start=7]
+. Щелкните правой кнопкой мыши область редактора исходного кода и выберите "Format" (Alt+Shift+F) для переформатирования кода. Файл ``index.jsp`` должен теперь выглядеть следующим образом:
[source,xml]
----
@@ -210,11 +228,14 @@
На палитре справа от редактора исходного кода разверните узел "JSP" и поместите элемент "Use Bean" непосредственно под тегом ``<body>`` в редакторе исходного кода. Откроется диалоговое окно "Insert Use Bean". Укажите значения, как показано на следующем рисунке.
image::images/usebean-dialog.png[]
+
* *ID:* mybean;
* *Class: *org.mypackage.hello.NameHandler;
* *Scope:* session.
Нажмите кнопку "ОК". Обратите внимание на то, что под тегом ``<body>`` добавляется тег ``<jsp:useBean>`` .
-3. Перетащите элемент "Set Bean Property" из палитры и поместите его непосредственно перед тегом ``<h1>`` . Нажмите кнопку "OК". В появившемся теге ``<jsp:setProperty>`` удалите пустой атрибут ``value`` и измените его следующим образом: Eсли средой IDE был создан атрибут ``value = ""`` , удалите его. В противном случае значение ``name`` , введенное в форме ``index.jsp`` , будет перезаписано.
+
+[start=3]
+. Перетащите элемент "Set Bean Property" из палитры и поместите его непосредственно перед тегом ``<h1>`` . Нажмите кнопку "OК". В появившемся теге ``<jsp:setProperty>`` удалите пустой атрибут ``value`` и измените его следующим образом: Eсли средой IDE был создан атрибут ``value = ""`` , удалите его. В противном случае значение ``name`` , введенное в форме ``index.jsp`` , будет перезаписано.
[source,java]
----
@@ -226,14 +247,18 @@
документации ``<jsp:setProperty>`` , значение свойства можно задать различными способами. В этом случае вводимые пользователем данные из ``index.jsp`` становятся парой имя/значение, передаваемой в объект ``request`` . При установке свойства с помощью тега ``<jsp:setProperty>`` можно указать значение в соответствии с именем свойства, содержащегося в объекте ``request`` . Поэтому при определении ``property`` в качестве ``name`` можно получить значение, указанное пользователем при вводе.
-4. Измените текст между тегами <h1> следующим образом:
+
+[start=4]
+. Измените текст между тегами <h1> следующим образом:
[source,xml]
----
<h1>Hello, !</h1>
----
-5. Перетащите элемент "Get Bean Property" из палитры в позицию непосредственно после запятой между тегами ``<h1>`` . Укажите следующие значения в диалоговом окне "Insert Get Bean Property":
+
+[start=5]
+. Перетащите элемент "Get Bean Property" из палитры в позицию непосредственно после запятой между тегами ``<h1>`` . Укажите следующие значения в диалоговом окне "Insert Get Bean Property":
* *Bean Name: *mybean;
* *Property Name: *name.
@@ -241,7 +266,9 @@
*Обратите внимание:* имена Property нужно вводить с учетом регистра. Свойство "name" должно быть в одном регистре как в ``response.jsp`` , так и в форме ввода ``index.jsp`` .
-6. Щелкните правой кнопкой мыши область редактора исходного кода и выберите "Format" (Alt+Shift+F) для переформатирования кода. Теперь теги ``<body>`` файла ``response.jsp`` должны выглядеть следующим образом:
+
+[start=6]
+. Щелкните правой кнопкой мыши область редактора исходного кода и выберите "Format" (Alt+Shift+F) для переформатирования кода. Теперь теги ``<body>`` файла ``response.jsp`` должны выглядеть следующим образом:
[source,xml]
----
@@ -267,21 +294,29 @@
*Примечание.* По умолчанию, проект создается с включенной функцией 'Компилировать при сохранении', так что не нужно сначала компилировать код.
-2. Среда IDE откроет окно 'Результаты', в котором отображается ход выполнения приложения. Взгляните на вкладку HelloWeb в окне вывода. В этой вкладке можно проследить все действия, выполняемые средой IDE. При наличии проблемы IDE отображает информацию об ошибке в этом окне.
+
+[start=2]
+. Среда IDE откроет окно 'Результаты', в котором отображается ход выполнения приложения. Взгляните на вкладку HelloWeb в окне вывода. В этой вкладке можно проследить все действия, выполняемые средой IDE. При наличии проблемы IDE отображает информацию об ошибке в этом окне.
image::images/app-output-tab.png[]
-3. Среда IDE открывает окно 'Результаты', которое показывает состояние сервера. Взгляните на вкладку в окне вывода с именем сервера.
+
+[start=3]
+. Среда IDE открывает окно 'Результаты', которое показывает состояние сервера. Взгляните на вкладку в окне вывода с именем сервера.
*Обратите внимание.* Если сервер GlassFish не запускается, запустите его вручную и после этого выполните проект снова. Сервер можно запустить вручную из окна 'Службы', щелкнув правой кнопкой мыши узел сервера и выбрав 'Пуск'.
Окно 'Результаты' для сервера отображает полезную информацию о проблемах при выполнении веб-приложений. Также могут быть полезны журналы сервера. Они расположены в каталоге соответствующего домена сервера. Также можно сделать видимым журнал среды IDЕ, выбрав View ("Представление") > IDE log ("Журнал IDE") и просмотреть его.
image::images/gf-output-tab.png[]
-4.
+
+[start=4]
+.
Страница ``index.jsp`` откроется в браузере по умолчанию. Обратите внимание, что окно браузера может открыться до отображения выходных данных сервера средой IDE.
image::images/result1.png[]
-5.
+
+[start=5]
+.
Введите имя в текстовом поле и нажмите кнопку "OК". На экране появится страница ``response.jsp`` с простым приветствием.
image::images/result2.png[]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_zh_CN.asciidoc
index 667ac8d..4b376be 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/quickstart-webapps_zh_CN.asciidoc
@@ -50,7 +50,9 @@
_或_
Oracle Web Logic 服务器 |4.x
_和_
-7.x 或 8.x
+
+[start=7]
+.x 或 8.x
11gR1 (10.3.3) 或更高版本
|===
@@ -96,14 +98,18 @@
String name;
----
-4. 将以下构造函数添加到类中：
+
+[start=4]
+. 将以下构造函数添加到类中：
[source,java]
----
public NameHandler() { }
----
-5. 在 ``NameHandler()`` 构造函数中添加以下代码行：
+
+[start=5]
+. 在 ``NameHandler()`` 构造函数中添加以下代码行：
[source,java]
----
@@ -119,7 +125,9 @@
将打开 "Encapsulate Fields"（封装字段）对话框，其中列出 ``name`` 字段。请注意，默认情况下将 "Fields' Visibility"（字段的可视性）设置为 "private"，将 "Accessors' Visibility"（存取方法的可视性）设置为 "public"，这表示类变量声明的访问修饰符将被指定为 private，而 getter 和 setter 方法将分别以 ``public`` 和 ``private`` 修饰符生成。
image::images/encapsulatefields-dialog.png[]
-2. 单击 "Refactor"（重构）。
+
+[start=2]
+. 单击 "Refactor"（重构）。
将为 ``name`` 字段生成 getter 和 setter 方法。类变量的修饰符将被设置为 ``private`` ，而 getter 和 setter 方法将以 public 修饰符生成。Java 类现在应该与以下代码类似。
@@ -163,7 +171,9 @@
此时将显示 "Insert Form"（插入窗体）对话框。
-3. 请指定以下值：
+
+[start=3]
+. 请指定以下值：
* *Action（操作）：*response.jsp
* *Method（方法）：*GET
* *Name（名称）：*Name Input Form
@@ -171,16 +181,24 @@
单击 "OK"（确定）。将在 ``index.jsp`` 文件中添加一个 HTML 窗体。
image::images/input-form.png[]
-4. 将一个 "Text Input"（文本输入）项拖至紧靠 ``</form>`` 标记前面的位置，然后指定以下值：
+
+[start=4]
+. 将一个 "Text Input"（文本输入）项拖至紧靠 ``</form>`` 标记前面的位置，然后指定以下值：
* *Name（名称）：*name
* *Type（类型）：*text
单击 "OK"（确定）。将在 ``<form>`` 标记之间添加一个 HTML ``<input>`` 标记。从此标记中删除 ``value`` 属性。
-5. 将一个按钮项拖至紧靠 ``</form>`` 标记前面的位置。请指定以下值：
+
+[start=5]
+. 将一个按钮项拖至紧靠 ``</form>`` 标记前面的位置。请指定以下值：
* *Label（标签）：*OK
* *Type（类型）：*submit
单击 "OK"（确定）。将在 ``<form>`` 标记之间添加一个 HTML 按钮。
-6. 在紧靠第一个 ``<input>`` 标记前面的位置键入 ``Enter your name:`` ，然后将 ``<h1>`` 标记之间的默认 ``Hello World!`` 文本更改为 ``Entry Form`` 。
-7. 在源代码编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）（Alt-Shift-F 组合键）以整理代码的格式。 ``index.jsp`` 文件现在应该与以下代码类似：
+
+[start=6]
+. 在紧靠第一个 ``<input>`` 标记前面的位置键入 ``Enter your name:`` ，然后将 ``<h1>`` 标记之间的默认 ``Hello World!`` 文本更改为 ``Entry Form`` 。
+
+[start=7]
+. 在源代码编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）（Alt-Shift-F 组合键）以整理代码的格式。 ``index.jsp`` 文件现在应该与以下代码类似：
[source,xml]
----
@@ -210,11 +228,14 @@
在位于源代码编辑器右侧的 "Palette"（组件面板）中，展开 "JSP"，然后将一个使用 Bean 项拖至源代码编辑器中紧靠 ``<body>`` 标记下方的位置。将打开 "Insert Use Bean"（插入使用 Bean）对话框。指定下图中显示的值。
image::images/usebean-dialog.png[]
+
* *ID：*mybean
* *Class（类）：*org.mypackage.hello.NameHandler
* *Scope（范围）：*Session（会话）
单击 "OK"（确定）。请注意，将在 ``<body>`` 标记的下方添加 ``<jsp:useBean>`` 标记。
-3. 将一个设置 Bean 属性项从 "Palette"（组件面板）拖至紧靠 ``<h1>`` 标记前面的位置，然后单击 "OK"（确定）。在出现的 ``<jsp:setProperty>`` 标记中，删除空的 ``value`` 属性，然后将其编辑为以下代码。如果 IDE 创建了 ``value = ""`` 属性，请将其删除！否则，它会覆盖传递到 ``index.jsp`` 中的 ``name`` 的值。
+
+[start=3]
+. 将一个设置 Bean 属性项从 "Palette"（组件面板）拖至紧靠 ``<h1>`` 标记前面的位置，然后单击 "OK"（确定）。在出现的 ``<jsp:setProperty>`` 标记中，删除空的 ``value`` 属性，然后将其编辑为以下代码。如果 IDE 创建了 ``value = ""`` 属性，请将其删除！否则，它会覆盖传递到 ``index.jsp`` 中的 ``name`` 的值。
[source,java]
----
@@ -226,14 +247,18 @@
``<jsp:setProperty>`` 文档中所述，可以通过各种方法来设置属性值。在本例中， ``index.jsp`` 页上的用户输入将成为传递至 ``request`` 对象的名称/值对。当使用 ``<jsp:setProperty>`` 标记设置属性时，可以根据 ``request`` 对象中包含的属性名称来指定值。因此，通过将 ``property`` 设置为 ``name`` ，可以检索由用户输入所指定的值。
-4. 更改 <h1> 标记之间的文本，以使其如下所示：
+
+[start=4]
+. 更改 <h1> 标记之间的文本，以使其如下所示：
[source,xml]
----
<h1>Hello, !</h1>
----
-5. 将一个获取 Bean 属性项从 "Palette"（组件面板）拖放至 ``<h1>`` 标记之间的逗号后面。在 "Insert Get Bean Property"（插入获取 Bean 属性）对话框中指定以下值：
+
+[start=5]
+. 将一个获取 Bean 属性项从 "Palette"（组件面板）拖放至 ``<h1>`` 标记之间的逗号后面。在 "Insert Get Bean Property"（插入获取 Bean 属性）对话框中指定以下值：
* *Bean Name（Bean 名称）：*mybean
* *Property Name（属性名称）：*name
@@ -241,7 +266,9 @@
*注：*属性名称区分大小写。"name" 属性在 ``response.jsp`` 和 ``index.jsp`` 的输入窗体中必须具有相同的大小写形式。
-6. 在源代码编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）（Alt-Shift-F 组合键）以整理代码的格式。 ``response.jsp`` 文件的 ``<body>`` 标记现在应该与以下代码类似：
+
+[start=6]
+. 在源代码编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）（Alt-Shift-F 组合键）以整理代码的格式。 ``response.jsp`` 文件的 ``<body>`` 标记现在应该与以下代码类似：
[source,xml]
----
@@ -267,21 +294,29 @@
*注：*默认情况下，将在启用“在保存时编译”功能的情况下创建项目，因此无需先编译代码即可在 IDE 中运行应用程序。
-2. IDE 将打开一个输出窗口，其中显示运行应用程序的进度。查看 "Output"（输出）窗口中的 "HelloWeb" 标签。在此标签中，您可以遵循 IDE 执行的所有步骤。如果出现问题，IDE 将在此窗口中显示错误信息。
+
+[start=2]
+. IDE 将打开一个输出窗口，其中显示运行应用程序的进度。查看 "Output"（输出）窗口中的 "HelloWeb" 标签。在此标签中，您可以遵循 IDE 执行的所有步骤。如果出现问题，IDE 将在此窗口中显示错误信息。
image::images/app-output-tab.png[]
-3. IDE 会打开一个显示服务器状态的输出窗口。在 "Output"（输出）窗口中查看具有服务器名称的标签。
+
+[start=3]
+. IDE 会打开一个显示服务器状态的输出窗口。在 "Output"（输出）窗口中查看具有服务器名称的标签。
*重要信息：*如果 GlassFish Server 无法启动，请将其手动启动并再次运行该项目。可以手动启动该服务器，方法是：在 "Services"（服务）窗口中右键单击该服务器节点，然后选择 "Start"（启动）。
服务器输出窗口会提供有关运行 Web 应用程序时所遇到问题的大量信息。服务器的日志也会很有帮助。它们位于服务器的相关域目录中。通过选择 "View"（视图）> "IDE log"（IDE 日志）还可以查看可见的 IDE 日志。
image::images/gf-output-tab.png[]
-4.
+
+[start=4]
+.
将在默认浏览器中打开 ``index.jsp`` 页。请注意，在 IDE 显示服务器输出之前，浏览器窗口可能会打开。
image::images/result1.png[]
-5.
+
+[start=5]
+.
在文本框中输入您的姓名，然后单击 "OK"（确定）。将出现 ``response.jsp`` 页，并向您显示一条简单的问候语。
image::images/result2.png[]
diff --git a/netbeans.apache.org/src/content/kb/docs/web/security-webapps.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/security-webapps.asciidoc
index b7c53fd..0a61706 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/security-webapps.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/security-webapps.asciidoc
@@ -83,21 +83,39 @@
*Note:* This tutorial shows how to configure security in the deployment descriptor, but EE 6 and EE 7 applications use annotations instead of a deployment descriptor, by default.
-8. If you are using the GlassFish or WebLogic server and NetBeans IDE 7.0.1 or later, you need to generate a server-specific descriptor. Right-click the project's node and select New > Other > GlassFish > GlassFish Descriptor, or New > Other > WebLogic > WebLogic Descriptor. The Create Server-Specific Descriptor dialog opens. Accept all the defaults and click Finish. The server-specific descriptor, named either ``glassfish-web.xml`` or ``weblogic.xml`` , appears in the project in the Configuration Files folder.
-9. In the Projects window of the IDE, right-click Web Pages and choose New > Other.
-10. In the New File wizard, select Other as Category and Folder as File Type. Click Next.
-11.
+
+[start=8]
+. If you are using the GlassFish or WebLogic server and NetBeans IDE 7.0.1 or later, you need to generate a server-specific descriptor. Right-click the project's node and select New > Other > GlassFish > GlassFish Descriptor, or New > Other > WebLogic > WebLogic Descriptor. The Create Server-Specific Descriptor dialog opens. Accept all the defaults and click Finish. The server-specific descriptor, named either ``glassfish-web.xml`` or ``weblogic.xml`` , appears in the project in the Configuration Files folder.
+
+[start=9]
+. In the Projects window of the IDE, right-click Web Pages and choose New > Other.
+
+[start=10]
+. In the New File wizard, select Other as Category and Folder as File Type. Click Next.
+
+[start=11]
+.
In the New Folder wizard, name the folder secureAdmin and click Finish.
The secureAdmin folder appears in the Projects window in the Web Pages folder.
-12. Repeat the previous 3 steps to create another folder named secureUser.
-13. Create a new ``html`` file in the secureUser folder by right-clicking the folder secureUser in the Projects window and choosing New > Other.
-14. Select the HTML file type in the Other category. Click Next.
-15. Name the new file pageU and click Finish.
+
+[start=12]
+. Repeat the previous 3 steps to create another folder named secureUser.
+
+[start=13]
+. Create a new ``html`` file in the secureUser folder by right-clicking the folder secureUser in the Projects window and choosing New > Other.
+
+[start=14]
+. Select the HTML file type in the Other category. Click Next.
+
+[start=15]
+. Name the new file pageU and click Finish.
When you click Finish, the file ``pageU.html`` opens in the Source Editor.
-16. In the Source Editor, replace the existing code in ``pageU.html`` with the following code.[html-tag]#<html>
+
+[start=16]
+. In the Source Editor, replace the existing code in ``pageU.html`` with the following code.[html-tag]#<html>
<head>
<title>#
@@ -111,8 +129,12 @@
</body>
</html>#
----
-17. Right-click the secureAdmin folder and create a new ``html`` file named pageA.
-18. In the Source Editor, replace the existing code in ``pageA.html`` with the following code.[html-tag]#<html>
+
+[start=17]
+. Right-click the secureAdmin folder and create a new ``html`` file named pageA.
+
+[start=18]
+. In the Source Editor, replace the existing code in ``pageA.html`` with the following code.[html-tag]#<html>
<head>
<title>#
@@ -140,7 +162,9 @@
Request a secure Admin page [jsp-html-tag]#<a# [jsp-html-argument]#href=#[jsp-xml-value]#"secureAdmin/pageA.html"#[jsp-html-tag]#>#here![jsp-html-tag]#</a></p>
<p>#Request a secure User page [jsp-html-tag]#<a# [jsp-html-argument]#href=#[jsp-xml-value]#"secureUser/pageU.html"# [jsp-html-tag]#>#here![jsp-html-tag]#</a></p>#
----
-2. Save your changes.
+
+[start=2]
+. Save your changes.
=== Creating a Login Form (required for Tomcat, optional for the GlassFish or WebLogic server)
@@ -162,8 +186,12 @@
<input# [jsp-html-argument]#type=#[jsp-xml-value]#"submit"# [jsp-html-argument]#value=#[jsp-xml-value]#"Login"#[jsp-html-tag]#>
</form>#
----
-4. Create a new ``html`` file named ``loginError.html`` in the Web Pages folder. This is a simple error page.
-5. In the Source Editor, replace the existing code in ``loginError.html`` with the following code.[html-tag]#<html>
+
+[start=4]
+. Create a new ``html`` file named ``loginError.html`` in the Web Pages folder. This is a simple error page.
+
+[start=5]
+. In the Source Editor, replace the existing code in ``loginError.html`` with the following code.[html-tag]#<html>
<head>
<title>#
@@ -195,12 +223,22 @@
*Note: *The Application Server must be running before you can access the Admin Console. To start the server, right-click the GlassFish server node and choose Start.
-2. In the Admin Console, navigate to Configurations > server-config > Security > Realms > File. The Edit Realm panel opens.
+
+[start=2]
+. In the Admin Console, navigate to Configurations > server-config > Security > Realms > File. The Edit Realm panel opens.
+
image::images/edit-realm.png[]
-3. Click the Manage Users button at the top of the Edit Realm panel. The File Users panel opens.
+
+[start=3]
+. Click the Manage Users button at the top of the Edit Realm panel. The File Users panel opens.
+
image::images/file-users.png[]
-4. Click New. The New File Realm User panel opens. Type ``user`` as the user ID and ``userpw01`` as the password. Click OK.
-5. Follow the previous steps to create a user named ``admin`` with password ``adminpw1`` in the ``file`` realm.
+
+[start=4]
+. Click New. The New File Realm User panel opens. Type ``user`` as the user ID and ``userpw01`` as the password. Click OK.
+
+[start=5]
+. Follow the previous steps to create a user named ``admin`` with password ``adminpw1`` in the ``file`` realm.
=== Defining Roles and Users on the Tomcat Web Server
@@ -225,21 +263,27 @@
<role rolename="AdminRole"/>
----
-3. Add a role named ``UserRole`` .
+
+[start=3]
+. Add a role named ``UserRole`` .
[source,java]
----
<role rolename="UserRole"/>
----
-4. Add a user named ``admin`` with the password ``adminpw1`` and the role ``AdminRole`` .
+
+[start=4]
+. Add a user named ``admin`` with the password ``adminpw1`` and the role ``AdminRole`` .
[source,java]
----
<user username="admin" password="adminpw1" roles="AdminRole"/>
----
-5. Add a user named ``user`` with the password ``userpw01`` and the role ``UserRole`` .
+
+[start=5]
+. Add a user named ``user`` with the password ``userpw01`` and the role ``UserRole`` .
[source,java]
----
@@ -284,19 +328,44 @@
*Note: *The Application Server must be running before you can access the Admin Console. To start the server, right-click the WebLogic server node and select Start.
-2. In the left pane select Security Realms. The Summary of Security Realms page opens.
-3. On the Summary of Security Realms page select the name of the realm (default realm is "myrealm"). The Settings for Realm Name page opens.
-4. On the Settings for Realm Name page select Users and Groups > Users. The Users table appears.
-5. In the Users table, click New. The Create New User page opens.
-6. Type in the name "user" and the password "userpw01". Optionally type in a description. Accept default Authentication Provider.
+
+[start=2]
+. In the left pane select Security Realms. The Summary of Security Realms page opens.
+
+[start=3]
+. On the Summary of Security Realms page select the name of the realm (default realm is "myrealm"). The Settings for Realm Name page opens.
+
+[start=4]
+. On the Settings for Realm Name page select Users and Groups > Users. The Users table appears.
+
+[start=5]
+. In the Users table, click New. The Create New User page opens.
+
+[start=6]
+. Type in the name "user" and the password "userpw01". Optionally type in a description. Accept default Authentication Provider.
+
image::images/wl-admin-newuser.png[]
-7. Click OK. You return to the Users table.
-8. Click New and add a user with the name "admin" and the password "admin1".
-9. Open the Groups tab. The Groups table appears.
-10. Click New. The Create a New Group window opens.
-11. Name the group userGroup. Accept the default provider and click OK. You return to the Groups table.
-12. Click New and create the group adminGroup.
-13. Open the Users tab for the next procedure.
+
+[start=7]
+. Click OK. You return to the Users table.
+
+[start=8]
+. Click New and add a user with the name "admin" and the password "admin1".
+
+[start=9]
+. Open the Groups tab. The Groups table appears.
+
+[start=10]
+. Click New. The Create a New Group window opens.
+
+[start=11]
+. Name the group userGroup. Accept the default provider and click OK. You return to the Groups table.
+
+[start=12]
+. Click New and create the group adminGroup.
+
+[start=13]
+. Open the Users tab for the next procedure.
Now add the ``admin`` user to ``adminGroup`` and the ``user`` user to ``userGroup`` .
@@ -306,10 +375,17 @@
2. In the Settings page, open the Groups tab.
3. In the Parent Groups: Available: table, select ``adminGroup`` .
4. Click the right arrow, >. The ``adminGroup`` appears in the Parent Groups: Chosen: table.
+
image::images/wl-admin-usersettings.png[]
-5. Click Save.
-6. Return to the Users tab.
-7. Click the ``user`` user and add it to the ``userGroup`` .
+
+[start=5]
+. Click Save.
+
+[start=6]
+. Return to the Users tab.
+
+[start=7]
+. Click the ``user`` user and add it to the ``userGroup`` .
== Configuring the Login Method
@@ -337,36 +413,56 @@
*Note: *If you want to use a form , select Form instead of basic and specify the login and login error pages.
-4. Enter a realm name, depending on your server.
+
+[start=4]
+. Enter a realm name, depending on your server.
* *GlassFish:* Enter ``file`` as the Realm Name. This is the default realm name where you created the users on the GlassFish server.
* *Tomcat:* Do not enter a realm name.
* *WebLogic:* Enter your realm name. The default realm is ``myrealm`` .
+
image::images/security-roles.png[]
-5. Expand the Security Roles node and click Add to add a role name.
-6. Add the following Security Roles:
+
+[start=5]
+. Expand the Security Roles node and click Add to add a role name.
+
+[start=6]
+. Add the following Security Roles:
* ``AdminRole`` . Users added to this role will have access to the ``secureAdmin`` directory of the server.
* ``UserRole`` . Users added to this role will have access to the ``secureUser`` directory of the server.
*Caution:* GlassFish role names must begin with an upper-case letter.
-7. Create and configure a security constraint named ``AdminConstraint`` by doing the following:
+
+[start=7]
+. Create and configure a security constraint named ``AdminConstraint`` by doing the following:
1. Click Add Security Constraint. A section for a new security constraint appears.
2. Enter ``AdminConstraint`` for the Display Name of the new security constraint.
+
image::images/admin-constraint.png[]
-3. Click Add. The Add Web Resource dialog opens.
-4.
+
+[start=3]
+. Click Add. The Add Web Resource dialog opens.
+
+[start=4]
+.
In the Add Web Resource dialog, set the Resource Name to ``Admin`` and the URL Pattern to ``/secureAdmin/*`` and click OK. The dialog closes.
*Note: * When you use an asterisk (*), you are giving the user access to all files in that folder.
image::images/addwebresource.png[]
-5. Select Enable Authentication Constraint and click Edit. The Edit Role Names dialog opens.
-6. In the Edit Role Names dialog box, select AdminRole in the left pane, click Add and then click OK.
+
+[start=5]
+. Select Enable Authentication Constraint and click Edit. The Edit Role Names dialog opens.
+
+[start=6]
+. In the Edit Role Names dialog box, select AdminRole in the left pane, click Add and then click OK.
After completing the above steps, the result should resemble the following figure:
image::images/constraints.png[]
-8. Create and configure a security constraint named ``UserConstraint`` by doing the following:
+
+[start=8]
+. Create and configure a security constraint named ``UserConstraint`` by doing the following:
1. Click Add Security Constraint to create a new security constraint.
2. Enter ``UserConstraint`` for the Display Name of the new security constraint.
3. Click Add to add a Web Resource Collection.
@@ -391,12 +487,18 @@
Set the Form Error Page by clicking Browse and locating ``loginError.html`` .
image::images/login-forms.png[]
-6. Enter a realm name, depending on your server.
+
+[start=6]
+. Enter a realm name, depending on your server.
* *GlassFish:* Enter ``file`` as the Realm Name. This is the default realm name where you created the users on the GlassFish server.
* *Tomcat:* Do not enter a realm name.
* *WebLogic:* Enter your realm name. The default realm is ``myrealm`` .
-7. Expand the Security Roles node and click Add to add a role name.
-8. Add the following Security Roles:
+
+[start=7]
+. Expand the Security Roles node and click Add to add a role name.
+
+[start=8]
+. Add the following Security Roles:
|===
|Server role |Description
@@ -405,7 +507,9 @@
|UserRole |Users added to this role have access to the ``secureUser`` directory of the server.
|===
-9. Create and configure a security constraint named ``AdminConstraint`` by doing the following:
+
+[start=9]
+. Create and configure a security constraint named ``AdminConstraint`` by doing the following:
1. Click Add Security Constraint to create a new security constraint.
2. Enter ``AdminConstraint`` for the Display Name of the new security constraint.
3. Click Add to add a Web Resource Collection.
@@ -415,13 +519,19 @@
*Note: * When you use an asterisk (*), you are giving the user access to all files in that folder.
image::images/addwebresource.png[]
-5. Select Enable Authentication Constraint and click Edit. The Edit Role Names dialog opens.
-6. In the Edit Role Names dialog box, select AdminRole in the left pane, click Add and then click OK.
+
+[start=5]
+. Select Enable Authentication Constraint and click Edit. The Edit Role Names dialog opens.
+
+[start=6]
+. In the Edit Role Names dialog box, select AdminRole in the left pane, click Add and then click OK.
After completing the above steps, the result should resemble the following figure:
image::images/constraints.png[]
-10. Create and configure a security constraint named ``UserConstraint`` by doing the following:
+
+[start=10]
+. Create and configure a security constraint named ``UserConstraint`` by doing the following:
1. Click Add Security Constraint to create a new security constraint.
2. Enter ``UserConstraint`` for the Display Name of the new security constraint.
3. Click Add to add a Web Resource Collection.
@@ -448,15 +558,27 @@
*Note:* For GlassFish server versions older than 3.1, this file is called ``sun-web.xml`` .
-2. Select the Security tab to reveal the security roles.
-3. Select the AdminRole security role node to open the Security Role Mapping pane.
-4.
+
+[start=2]
+. Select the Security tab to reveal the security roles.
+
+[start=3]
+. Select the AdminRole security role node to open the Security Role Mapping pane.
+
+[start=4]
+.
Click Add Principal and enter ``admin`` for the principal name. Click OK.
image::images/add-principal.png[]
-5. Select the UserRole security role node to open the Security Role Mapping pane.
-6. Click Add Principal and enter ``user`` for the principal name. Click OK
-7. Save your changes to ``glassfish-web.xml`` .
+
+[start=5]
+. Select the UserRole security role node to open the Security Role Mapping pane.
+
+[start=6]
+. Click Add Principal and enter ``user`` for the principal name. Click OK
+
+[start=7]
+. Save your changes to ``glassfish-web.xml`` .
You can also view and edit ``glassfish-web.xml`` in the XML editor by clicking the XML tab. If you open ``glassfish-web.xml`` in the XML editor, you can see that ``glassfish-web.xml`` has the following security role mapping information:
@@ -501,7 +623,9 @@
<principal-name>#userGroup[xml-tag]#</principal-name>
</security-role-assignment>#
----
-3. Save your changes to ``weblogic.xml`` .
+
+[start=3]
+. Save your changes to ``weblogic.xml`` .
== Deploying and Running the Application
@@ -519,10 +643,12 @@
* Password for this user is correct and user has privileges for secured content -> secure content page is displayed
image::images/deploy2.png[]
+
*
Password for this user is incorrect -> Error page is displayed
image::images/deploy3.png[]
+
*
Password for this user is correct, but user does not have right to access the secured content -> browser displays Error 403 Access to the requested resource has been denied
diff --git a/netbeans.apache.org/src/content/kb/docs/web/security-webapps_ja.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/security-webapps_ja.asciidoc
index ca41e89..19bf02c 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/security-webapps_ja.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/security-webapps_ja.asciidoc
@@ -83,21 +83,39 @@
*注意:* このチュートリアルではデプロイメント・ディスクリプタでセキュリティを構成する方法を示しますが、EE 6およびEE 7アプリケーションはデフォルトでデプロイメント・ディスクリプタのかわりに注釈を使用します。
-8. GlassFishまたはWebLogicサーバーとNetBeans IDE 7.0.1以降を使用している場合は、サーバー固有のディスクリプタを生成する必要があります。プロジェクトのノードを右クリックし、「新規」>「その他」>「GlassFish」>「GlassFishディスクリプタ」または「新規」>「その他」>「WebLogic」>「WebLogicディスクリプタ」を選択します。「サーバー固有のディスクリプタを作成」ダイアログが開きます。デフォルトをすべて受け入れ、「終了」をクリックします。 ``glassfish-web.xml`` または ``weblogic.xml`` という名前の、サーバー固有のディスクリプタが、プロジェクトの「構成ファイル」フォルダに表示されます。
-9. IDEの「プロジェクト」ウィンドウで「Webページ」を右クリックし、「新規」>「その他」を選択します。
-10. 新規ファイル・ウィザードで、「カテゴリ」に「その他」を選択し、「ファイル・タイプ」に「フォルダ」を選択します。「次」をクリックします。
-11.
+
+[start=8]
+. GlassFishまたはWebLogicサーバーとNetBeans IDE 7.0.1以降を使用している場合は、サーバー固有のディスクリプタを生成する必要があります。プロジェクトのノードを右クリックし、「新規」>「その他」>「GlassFish」>「GlassFishディスクリプタ」または「新規」>「その他」>「WebLogic」>「WebLogicディスクリプタ」を選択します。「サーバー固有のディスクリプタを作成」ダイアログが開きます。デフォルトをすべて受け入れ、「終了」をクリックします。 ``glassfish-web.xml`` または ``weblogic.xml`` という名前の、サーバー固有のディスクリプタが、プロジェクトの「構成ファイル」フォルダに表示されます。
+
+[start=9]
+. IDEの「プロジェクト」ウィンドウで「Webページ」を右クリックし、「新規」>「その他」を選択します。
+
+[start=10]
+. 新規ファイル・ウィザードで、「カテゴリ」に「その他」を選択し、「ファイル・タイプ」に「フォルダ」を選択します。「次」をクリックします。
+
+[start=11]
+.
新規フォルダ・ウィザードでフォルダに「secureAdmin」という名前を付け、「終了」をクリックします。
「プロジェクト」ウィンドウの「Webページ」フォルダに、secureAdminフォルダが表示されます。
-12. 前の3つの手順を繰り返して、secureUserという名前の別のフォルダを作成します。
-13. 「プロジェクト」ウィンドウで、secureUserフォルダを右クリックして「新規」>「その他」を選択し、secureUserフォルダ内に新しい ``html`` ファイルを作成します。
-14. 「その他」カテゴリで「HTML」ファイル・タイプを選択します。「次」をクリックします。
-15. 新しいファイルにpageUという名前を付け、「終了」をクリックします。
+
+[start=12]
+. 前の3つの手順を繰り返して、secureUserという名前の別のフォルダを作成します。
+
+[start=13]
+. 「プロジェクト」ウィンドウで、secureUserフォルダを右クリックして「新規」>「その他」を選択し、secureUserフォルダ内に新しい ``html`` ファイルを作成します。
+
+[start=14]
+. 「その他」カテゴリで「HTML」ファイル・タイプを選択します。「次」をクリックします。
+
+[start=15]
+. 新しいファイルにpageUという名前を付け、「終了」をクリックします。
「終了」をクリックすると、ソース・エディタでファイル ``pageU.html`` が開きます。
-16. ソース・エディタで、 ``pageU.html`` 内の既存コードを次のコードに置き換えます。[html-tag]#<html>
+
+[start=16]
+. ソース・エディタで、 ``pageU.html`` 内の既存コードを次のコードに置き換えます。[html-tag]#<html>
<head>
<title>#
@@ -111,8 +129,12 @@
</body>
</html>#
----
-17. secureAdminフォルダを右クリックし、pageAという名前の新しい ``html`` ファイルを作成します。
-18. ソース・エディタで、 ``pageA.html`` 内の既存コードを次のコードに置き換えます。[html-tag]#<html>
+
+[start=17]
+. secureAdminフォルダを右クリックし、pageAという名前の新しい ``html`` ファイルを作成します。
+
+[start=18]
+. ソース・エディタで、 ``pageA.html`` 内の既存コードを次のコードに置き換えます。[html-tag]#<html>
<head>
<title>#
@@ -140,7 +162,9 @@
Request a secure Admin page [jsp-html-tag]#<a# [jsp-html-argument]#href=#[jsp-xml-value]#"secureAdmin/pageA.html"#[jsp-html-tag]#>#here![jsp-html-tag]#</a></p>
<p>#Request a secure User page [jsp-html-tag]#<a# [jsp-html-argument]#href=#[jsp-xml-value]#"secureUser/pageU.html"# [jsp-html-tag]#>#here![jsp-html-tag]#</a></p>#
----
-2. 変更を保存します。
+
+[start=2]
+. 変更を保存します。
=== ログイン・フォームの作成(Tomcatでは必須、GlassFishまたはWebLogicサーバーではオプション)
@@ -162,8 +186,12 @@
<input# [jsp-html-argument]#type=#[jsp-xml-value]#"submit"# [jsp-html-argument]#value=#[jsp-xml-value]#"Login"#[jsp-html-tag]#>
</form>#
----
-4. ``loginError.html`` という名前の新しい ``html`` ファイルを「Webページ」フォルダに作成します。これは、単純なエラー・ページです。
-5. ソース・エディタで、 ``loginError.html`` 内の既存コードを次のコードに置き換えます。[html-tag]#<html>
+
+[start=4]
+. ``loginError.html`` という名前の新しい ``html`` ファイルを「Webページ」フォルダに作成します。これは、単純なエラー・ページです。
+
+[start=5]
+. ソース・エディタで、 ``loginError.html`` 内の既存コードを次のコードに置き換えます。[html-tag]#<html>
<head>
<title>#
@@ -195,12 +223,22 @@
*注意:* 管理コンソールにアクセスする前に、Application Serverを起動している必要があります。サーバーを起動するには、GlassFishサーバーのノードを右クリックし、「起動」を選択します。
-2. 管理コンソールで、「構成」>「server-config」>「セキュリティ」>「レルム」>「file」の順に展開します。「レルムを編集」パネルが開きます。
+
+[start=2]
+. 管理コンソールで、「構成」>「server-config」>「セキュリティ」>「レルム」>「file」の順に展開します。「レルムを編集」パネルが開きます。
+
image::images/edit-realm.png[]
-3. 「レルムを編集」パネルの上部にある「ユーザーを管理」ボタンをクリックします。「ファイル・ユーザー」パネルが開きます。
+
+[start=3]
+. 「レルムを編集」パネルの上部にある「ユーザーを管理」ボタンをクリックします。「ファイル・ユーザー」パネルが開きます。
+
image::images/file-users.png[]
-4. 「新規」をクリックします。新規ファイル・レルム・ユーザー・パネルが開きます。「ユーザーID」に「 ``user`` 」、パスワードに「 ``userpw01`` 」と入力します。「OK」をクリックします。
-5. 前の手順に従って、名前が ``admin`` 、パスワードが ``adminpw1`` のユーザーを ``file`` レルムに作成します。
+
+[start=4]
+. 「新規」をクリックします。新規ファイル・レルム・ユーザー・パネルが開きます。「ユーザーID」に「 ``user`` 」、パスワードに「 ``userpw01`` 」と入力します。「OK」をクリックします。
+
+[start=5]
+. 前の手順に従って、名前が ``admin`` 、パスワードが ``adminpw1`` のユーザーを ``file`` レルムに作成します。
=== Tomcat Webサーバーでのロールとユーザーの定義
@@ -225,21 +263,27 @@
<role rolename="AdminRole"/>
----
-3. ``UserRole`` という名前のロールを追加します。
+
+[start=3]
+. ``UserRole`` という名前のロールを追加します。
[source,java]
----
<role rolename="UserRole"/>
----
-4. 名前が ``admin`` 、パスワードが ``adminpw1`` 、ロールが ``AdminRole`` のユーザーを追加します。
+
+[start=4]
+. 名前が ``admin`` 、パスワードが ``adminpw1`` 、ロールが ``AdminRole`` のユーザーを追加します。
[source,java]
----
<user username="admin" password="adminpw1" roles="AdminRole"/>
----
-5. 名前が ``user`` 、パスワードが ``userpw01`` 、ロールが ``UserRole`` のユーザーを追加します。
+
+[start=5]
+. 名前が ``user`` 、パスワードが ``userpw01`` 、ロールが ``UserRole`` のユーザーを追加します。
[source,java]
----
@@ -284,19 +328,44 @@
*注意:* 管理コンソールにアクセスする前に、Application Serverを起動している必要があります。サーバーを起動するには、WebLogicサーバーのノードを右クリックし、「起動」を選択します。
-2. 左ペインで、「セキュリティ・レルム」を選択します。セキュリティ・レルムのサマリー・ページが開きます。
-3. セキュリティ・レルムのサマリー・ページで、レルムの名前を選択します(デフォルト・レルムは「myrealm」)。レルム名の設定ページが開きます。
-4. レルム名の設定ページで、「ユーザー」を選択し、「グループ」>「ユーザー」を選択します。「ユーザー」表が表示されます。
-5. 「ユーザー」表で「新規」をクリックします。新規ユーザーを作成ページが開きます。
-6. 名前に「user」、パスワードに「userpw01」と入力します。必要に応じて、説明を入力します。デフォルトの認証プロバイダを受け入れます。
+
+[start=2]
+. 左ペインで、「セキュリティ・レルム」を選択します。セキュリティ・レルムのサマリー・ページが開きます。
+
+[start=3]
+. セキュリティ・レルムのサマリー・ページで、レルムの名前を選択します(デフォルト・レルムは「myrealm」)。レルム名の設定ページが開きます。
+
+[start=4]
+. レルム名の設定ページで、「ユーザー」を選択し、「グループ」>「ユーザー」を選択します。「ユーザー」表が表示されます。
+
+[start=5]
+. 「ユーザー」表で「新規」をクリックします。新規ユーザーを作成ページが開きます。
+
+[start=6]
+. 名前に「user」、パスワードに「userpw01」と入力します。必要に応じて、説明を入力します。デフォルトの認証プロバイダを受け入れます。
+
image::images/wl-admin-newuser.png[]
-7. 「OK」をクリックします。「ユーザー」表に戻ります。
-8. 「新規」をクリックし、名前が「admin」、パスワードが「admin1」のユーザーを追加します。
-9. 「グループ」タブを開きます。「グループ」表が表示されます。
-10. 「新規」をクリックします。「新規グループを作成」ウィンドウが開きます。
-11. グループにuserGroupという名前を付けます。デフォルトのプロバイダを受け入れ、「OK」をクリックします。「グループ」表に戻ります。
-12. 「新規」をクリックし、adminGroupというグループを作成します。
-13. 次の手順のために「ユーザー」タブを開きます。
+
+[start=7]
+. 「OK」をクリックします。「ユーザー」表に戻ります。
+
+[start=8]
+. 「新規」をクリックし、名前が「admin」、パスワードが「admin1」のユーザーを追加します。
+
+[start=9]
+. 「グループ」タブを開きます。「グループ」表が表示されます。
+
+[start=10]
+. 「新規」をクリックします。「新規グループを作成」ウィンドウが開きます。
+
+[start=11]
+. グループにuserGroupという名前を付けます。デフォルトのプロバイダを受け入れ、「OK」をクリックします。「グループ」表に戻ります。
+
+[start=12]
+. 「新規」をクリックし、adminGroupというグループを作成します。
+
+[start=13]
+. 次の手順のために「ユーザー」タブを開きます。
次に、 ``admin`` ユーザーを ``adminGroup`` 、 ``user`` ユーザーを ``userGroup`` に追加します。
@@ -306,10 +375,17 @@
2. 設定ページで「グループ」タブを開きます。
3. 「親グループ:」「使用可能:」表で、 ``adminGroup`` を選択します。
4. 右矢印(>)をクリックします。「親グループ: 選択:」表に ``adminGroup`` が表示されます。
+
image::images/wl-admin-usersettings.png[]
-5. 「保存」をクリックします。
-6. 「ユーザー」タブに戻ります。
-7. ``user`` ユーザーをクリックし、 ``userGroup`` に追加します。
+
+[start=5]
+. 「保存」をクリックします。
+
+[start=6]
+. 「ユーザー」タブに戻ります。
+
+[start=7]
+. ``user`` ユーザーをクリックし、 ``userGroup`` に追加します。
== ログイン方法の構成
@@ -337,36 +413,56 @@
*注意:* フォームを使用する場合は、「基本」のかわりに「フォーム」を選択し、ログイン・ページおよびログイン・エラー・ページを指定します。
-4. サーバーに応じたレルム名を入力します。
+
+[start=4]
+. サーバーに応じたレルム名を入力します。
* *GlassFish:* 「レルム名」に「 ``file`` 」と入力します。これは、GlassFishサーバーでユーザーを作成した場所のデフォルト・レルム名です。
* *Tomcat:* レルム名は入力しないでください。
* *WebLogic:* 自分のレルム名を入力します。デフォルト・レルムは ``myrealm`` です。
+
image::images/security-roles.png[]
-5. 「セキュリティ・ロール」ノードを展開し、「追加」をクリックしてロール名を追加します。
-6. 次のセキュリティ・ロールを追加します。
+
+[start=5]
+. 「セキュリティ・ロール」ノードを展開し、「追加」をクリックしてロール名を追加します。
+
+[start=6]
+. 次のセキュリティ・ロールを追加します。
* ``AdminRole`` 。このロールに追加したユーザーは、サーバーの ``secureAdmin`` ディレクトリへのアクセス権を持ちます。
* ``UserRole`` 。このロールに追加したユーザーは、サーバーの ``secureUser`` ディレクトリへのアクセス権を持ちます。
*注意:* GlassFishのロール名は先頭が大文字である必要があります。
-7. 次の手順に従って、 ``AdminConstraint`` という名前のセキュリティ制約を作成および構成します。
+
+[start=7]
+. 次の手順に従って、 ``AdminConstraint`` という名前のセキュリティ制約を作成および構成します。
1. 「セキュリティ制約を追加」をクリックします。新しいセキュリティ制約のセクションが表示されます。
2. 新しいセキュリティ制約の「表示名」に「 ``AdminConstraint`` 」と入力します。
+
image::images/admin-constraint.png[]
-3. 「追加」をクリックします。「Webリソースを追加」ダイアログが開きます。
-4.
+
+[start=3]
+. 「追加」をクリックします。「Webリソースを追加」ダイアログが開きます。
+
+[start=4]
+.
「Webリソースを追加」ダイアログで「リソース名」に「 ``Admin`` 」、「URLパターン」に「 ``/secureAdmin/*`` 」を設定し、「OK」をクリックします。ダイアログが閉じます。
*注意:* アスタリスク(*)を使用すると、そのフォルダにあるすべてのファイルに対するユーザー・アクセス権を与えることになります。
image::images/addwebresource.png[]
-5. 「認証制約を有効にする」を選択し、「編集」をクリックします。「ロール名を編集」ダイアログが開きます。
-6. 「ロール名を編集」ダイアログ・ボックスで左ペインの「AdminRole」を選択して「追加」をクリックし、「OK」をクリックします。
+
+[start=5]
+. 「認証制約を有効にする」を選択し、「編集」をクリックします。「ロール名を編集」ダイアログが開きます。
+
+[start=6]
+. 「ロール名を編集」ダイアログ・ボックスで左ペインの「AdminRole」を選択して「追加」をクリックし、「OK」をクリックします。
前述の手順を完了すると、次の図に示すような結果になるはずです。
image::images/constraints.png[]
-8. 次の手順に従って、 ``UserConstraint`` という名前のセキュリティ制約を作成および構成します。
+
+[start=8]
+. 次の手順に従って、 ``UserConstraint`` という名前のセキュリティ制約を作成および構成します。
1. 「セキュリティ制約を追加」をクリックして新しいセキュリティ制約を作成します。
2. 新しいセキュリティ制約の「表示名」に「 ``UserConstraint`` 」と入力します。
3. 「追加」をクリックしてWebリソース・コレクションを追加します。
@@ -391,12 +487,18 @@
「参照」をクリックして ``loginError.html`` を検索し、フォームのエラー・ページを設定します。
image::images/login-forms.png[]
-6. サーバーに応じたレルム名を入力します。
+
+[start=6]
+. サーバーに応じたレルム名を入力します。
* *GlassFish:* 「レルム名」に「 ``file`` 」と入力します。これは、GlassFishサーバーでユーザーを作成した場所のデフォルト・レルム名です。
* *Tomcat:* レルム名は入力しないでください。
* *WebLogic:* 自分のレルム名を入力します。デフォルト・レルムは ``myrealm`` です。
-7. 「セキュリティ・ロール」ノードを展開し、「追加」をクリックしてロール名を追加します。
-8. 次のセキュリティ・ロールを追加します。
+
+[start=7]
+. 「セキュリティ・ロール」ノードを展開し、「追加」をクリックしてロール名を追加します。
+
+[start=8]
+. 次のセキュリティ・ロールを追加します。
|===
|サーバー・ロール |説明
@@ -405,7 +507,9 @@
|UserRole |このロールに追加したユーザーは、サーバーの ``secureUser`` ディレクトリへのアクセス権を持ちます。
|===
-9. 次の手順に従って、 ``AdminConstraint`` という名前のセキュリティ制約を作成および構成します。
+
+[start=9]
+. 次の手順に従って、 ``AdminConstraint`` という名前のセキュリティ制約を作成および構成します。
1. 「セキュリティ制約を追加」をクリックして新しいセキュリティ制約を作成します。
2. 新しいセキュリティ制約の「表示名」に「 ``AdminConstraint`` 」と入力します。
3. 「追加」をクリックしてWebリソース・コレクションを追加します。
@@ -415,13 +519,19 @@
*注意:* アスタリスク(*)を使用すると、そのフォルダにあるすべてのファイルに対するユーザー・アクセス権を与えることになります。
image::images/addwebresource.png[]
-5. 「認証制約を有効にする」を選択し、「編集」をクリックします。「ロール名を編集」ダイアログが開きます。
-6. 「ロール名を編集」ダイアログ・ボックスで左ペインの「AdminRole」を選択して「追加」をクリックし、「OK」をクリックします。
+
+[start=5]
+. 「認証制約を有効にする」を選択し、「編集」をクリックします。「ロール名を編集」ダイアログが開きます。
+
+[start=6]
+. 「ロール名を編集」ダイアログ・ボックスで左ペインの「AdminRole」を選択して「追加」をクリックし、「OK」をクリックします。
前述の手順を完了すると、次の図に示すような結果になるはずです。
image::images/constraints.png[]
-10. 次の手順に従って、 ``UserConstraint`` という名前のセキュリティ制約を作成および構成します。
+
+[start=10]
+. 次の手順に従って、 ``UserConstraint`` という名前のセキュリティ制約を作成および構成します。
1. 「セキュリティ制約を追加」をクリックして新しいセキュリティ制約を作成します。
2. 新しいセキュリティ制約の「表示名」に「 ``UserConstraint`` 」と入力します。
3. 「追加」をクリックしてWebリソース・コレクションを追加します。
@@ -448,15 +558,27 @@
*注意:* 3.1よりも古いバージョンのGlassFishサーバーでは、このファイルの名前は ``sun-web.xml`` です。
-2. 「セキュリティ」タブを選択し、セキュリティ・ロールを表示します。
-3. AdminRoleのセキュリティ・ロール・ノードを選択し、「セキュリティ・ロールのマッピング」ペインを開きます。
-4.
+
+[start=2]
+. 「セキュリティ」タブを選択し、セキュリティ・ロールを表示します。
+
+[start=3]
+. AdminRoleのセキュリティ・ロール・ノードを選択し、「セキュリティ・ロールのマッピング」ペインを開きます。
+
+[start=4]
+.
「プリンシパルの追加」をクリックし、「プリンシパル名」に「 ``admin`` 」と入力します。「OK」をクリックします。
image::images/add-principal.png[]
-5. UserRoleのセキュリティ・ロール・ノードを選択し、「セキュリティ・ロールのマッピング」ペインを開きます。
-6. 「プリンシパルの追加」をクリックし、「プリンシパル名」に「 ``user`` 」と入力します。「OK」をクリックします。
-7. ``glassfish-web.xml`` に変更を保存します。
+
+[start=5]
+. UserRoleのセキュリティ・ロール・ノードを選択し、「セキュリティ・ロールのマッピング」ペインを開きます。
+
+[start=6]
+. 「プリンシパルの追加」をクリックし、「プリンシパル名」に「 ``user`` 」と入力します。「OK」をクリックします。
+
+[start=7]
+. ``glassfish-web.xml`` に変更を保存します。
「XML」タブをクリックして、XMLエディタで ``glassfish-web.xml`` を表示および編集することもできます。XMLエディタで ``glassfish-web.xml`` を開くと、 ``glassfish-web.xml`` に次のセキュリティ・ロールのマッピング情報があることがわかります。
@@ -501,7 +623,9 @@
<principal-name>#userGroup[xml-tag]#</principal-name>
</security-role-assignment>#
----
-3. ``weblogic.xml`` に変更を保存します。
+
+[start=3]
+. ``weblogic.xml`` に変更を保存します。
== アプリケーションのデプロイと実行
@@ -519,10 +643,12 @@
* このユーザーのパスワードが正しく、ユーザーがセキュリティ保護されたコンテンツに対する権限を持っている場合、セキュリティ保護されたコンテンツ・ページが表示されます。
image::images/deploy2.png[]
+
*
このユーザーのパスワードが間違っている場合、エラー・ページが表示されます。
image::images/deploy3.png[]
+
*
このユーザーのパスワードは正しいが、ユーザーがセキュリティ保護されたコンテンツへのアクセス権を持っていない場合、ブラウザには、リクエストされたリソースへのアクセスが拒否されたことを示すエラー403が表示されます。
diff --git a/netbeans.apache.org/src/content/kb/docs/web/security-webapps_pt_BR.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/security-webapps_pt_BR.asciidoc
index 4364211..813dac1 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/security-webapps_pt_BR.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/security-webapps_pt_BR.asciidoc
@@ -83,21 +83,39 @@
*Observação:* este tutorial mostra como configurar a segurança no descritor de implantação, mas as aplicações EE 6 e EE 7 usam anotações em vez de um descritor de implantação, por padrão.
-8. Se estiver usando um GlassFish ou WebLogic Server e o NetBeans IDE 7.0.1 ou posterior, você precisará gerar um descritor específico para o servidor. Clique com o botão direito do mouse no nó do projeto e selecione Novo > Outro > GlassFish > Descritor do GlassFish ou Novo > Outro > WebLogic > Descritor do WebLogic. A caixa de diálogo Criar Descritor Específico do Servidor será aberta. Aceite todos os defaults e clique em Finalizar. O descritor específico do servidor, chamado ``glassfish-web.xml`` ou ``weblogic.xml`` , aparecerá no projeto na pasta Arquivos de Configuração.
-9. Na janela Projetos do IDE, clique com o botão direito do mouse em Páginas Web e selecione Novo > Outro.
-10. No assistente de Novo Arquivo, selecione Outro como Categoria e Pasta como o Tipo de Arquivo. Clique em Próximo.
-11.
+
+[start=8]
+. Se estiver usando um GlassFish ou WebLogic Server e o NetBeans IDE 7.0.1 ou posterior, você precisará gerar um descritor específico para o servidor. Clique com o botão direito do mouse no nó do projeto e selecione Novo > Outro > GlassFish > Descritor do GlassFish ou Novo > Outro > WebLogic > Descritor do WebLogic. A caixa de diálogo Criar Descritor Específico do Servidor será aberta. Aceite todos os defaults e clique em Finalizar. O descritor específico do servidor, chamado ``glassfish-web.xml`` ou ``weblogic.xml`` , aparecerá no projeto na pasta Arquivos de Configuração.
+
+[start=9]
+. Na janela Projetos do IDE, clique com o botão direito do mouse em Páginas Web e selecione Novo > Outro.
+
+[start=10]
+. No assistente de Novo Arquivo, selecione Outro como Categoria e Pasta como o Tipo de Arquivo. Clique em Próximo.
+
+[start=11]
+.
No assistente de Nova Pasta, chame a pasta de secureAdmin e clique em Finalizar.
A pasta secureAdmin será exibida na janela Projetos da pasta Páginas Web.
-12. Repita as três últimas etapas para criar outra pasta chamada secureUser.
-13. Crie um novo arquivo ``html`` na pasta secureUser, clicando com o botão direito do mouse na janela Projetos e selecionando Novo > Outros.
-14. Selecione o tipo de arquivo HTML na categoria Outro. Clique em Próximo.
-15. Chame o novo arquivo de pageU e clique em Finalizar.
+
+[start=12]
+. Repita as três últimas etapas para criar outra pasta chamada secureUser.
+
+[start=13]
+. Crie um novo arquivo ``html`` na pasta secureUser, clicando com o botão direito do mouse na janela Projetos e selecionando Novo > Outros.
+
+[start=14]
+. Selecione o tipo de arquivo HTML na categoria Outro. Clique em Próximo.
+
+[start=15]
+. Chame o novo arquivo de pageU e clique em Finalizar.
Quando você clica em Finalizar, o arquivo ``pageU.html`` é aberto no Editor de Código-Fonte.
-16. No Editor de Código-Fonte, substitua o código existente em ``pageU.html`` pelo código a seguir:[html-tag]#<html>
+
+[start=16]
+. No Editor de Código-Fonte, substitua o código existente em ``pageU.html`` pelo código a seguir:[html-tag]#<html>
<head>
<title>#
@@ -111,8 +129,12 @@
</body>
</html>#
----
-17. Clique com o botão direito do mouse na pasta secureAdmin e crie um novo arquivo ``html`` chamado pageA.
-18. No Editor de Código-Fonte, substitua o código existente em ``pageA.html`` pelo código a seguir:[html-tag]#<html>
+
+[start=17]
+. Clique com o botão direito do mouse na pasta secureAdmin e crie um novo arquivo ``html`` chamado pageA.
+
+[start=18]
+. No Editor de Código-Fonte, substitua o código existente em ``pageA.html`` pelo código a seguir:[html-tag]#<html>
<head>
<title>#
@@ -140,7 +162,9 @@
Request a secure Admin page [jsp-html-tag]#<a# [jsp-html-argument]#href=#[jsp-xml-value]#"secureAdmin/pageA.html"#[jsp-html-tag]#>#here![jsp-html-tag]#</a></p>
<p>#Request a secure User page [jsp-html-tag]#<a# [jsp-html-argument]#href=#[jsp-xml-value]#"secureUser/pageU.html"# [jsp-html-tag]#>#here![jsp-html-tag]#</a></p>#
----
-2. Salve as alterações.
+
+[start=2]
+. Salve as alterações.
=== Criando um Form de Log-in (obrigatório para Tomcat e opcional para GlassFish ou WebLogic Server)
@@ -162,8 +186,12 @@
<input# [jsp-html-argument]#type=#[jsp-xml-value]#"submit"# [jsp-html-argument]#value=#[jsp-xml-value]#"Login"#[jsp-html-tag]#>
</form>#
----
-4. Crie um novo arquivo ``html`` chamado ``loginError.html`` na pasta Páginas Web. Trata-se de uma página de erro simples.
-5. No Editor de Código-Fonte, substitua o código existente em ``loginError.html`` pelo código a seguir:[html-tag]#<html>
+
+[start=4]
+. Crie um novo arquivo ``html`` chamado ``loginError.html`` na pasta Páginas Web. Trata-se de uma página de erro simples.
+
+[start=5]
+. No Editor de Código-Fonte, substitua o código existente em ``loginError.html`` pelo código a seguir:[html-tag]#<html>
<head>
<title>#
@@ -195,12 +223,22 @@
*Observação: *O Servidor de Aplicações deve estar em execução antes de você acessar a Console de Administração. Para iniciar o servidor, clique com o botão direito do mouse no nó do GlassFish Server e selecione Iniciar.
-2. Na Console de Administração, vá até Configurações > server-config > Segurança > Realms > Arquivo. O painel Editar Realm será aberto.
+
+[start=2]
+. Na Console de Administração, vá até Configurações > server-config > Segurança > Realms > Arquivo. O painel Editar Realm será aberto.
+
image::images/edit-realm.png[]
-3. Clique no botão Gerenciar Usuários na parte superior do painel Editar Realm. O painel Usuários do Arquivo será aberto.
+
+[start=3]
+. Clique no botão Gerenciar Usuários na parte superior do painel Editar Realm. O painel Usuários do Arquivo será aberto.
+
image::images/file-users.png[]
-4. Clique em Novo. O painel Novo Usuário do Realm do Arquivo será aberto. Digite ``user`` como o ID de usuário e ``userpw01`` como a senha. Clique em OK.
-5. Siga as etapas anteriores para criar um usuário chamado ``admin`` com a senha ``adminpw1`` no realm ``file`` .
+
+[start=4]
+. Clique em Novo. O painel Novo Usuário do Realm do Arquivo será aberto. Digite ``user`` como o ID de usuário e ``userpw01`` como a senha. Clique em OK.
+
+[start=5]
+. Siga as etapas anteriores para criar um usuário chamado ``admin`` com a senha ``adminpw1`` no realm ``file`` .
=== Definindo Atribuições e Usuários no Servidor Web Tomcat
@@ -225,21 +263,27 @@
<role rolename="AdminRole"/>
----
-3. Adicione uma atribuição chamada ``UserRole`` .
+
+[start=3]
+. Adicione uma atribuição chamada ``UserRole`` .
[source,java]
----
<role rolename="UserRole"/>
----
-4. Adicione um usuário chamado ``admin`` com a senha ``adminpw1`` e a atribuição ``AdminRole`` .
+
+[start=4]
+. Adicione um usuário chamado ``admin`` com a senha ``adminpw1`` e a atribuição ``AdminRole`` .
[source,java]
----
<user username="admin" password="adminpw1" roles="AdminRole"/>
----
-5. Adicione um usuário chamado ``user`` com a senha ``userpw01`` e a atribuição ``UserRole`` .
+
+[start=5]
+. Adicione um usuário chamado ``user`` com a senha ``userpw01`` e a atribuição ``UserRole`` .
[source,java]
----
@@ -284,19 +328,44 @@
*Observação: *O Servidor de Aplicações deve estar em execução antes de você acessar a Console de Administração. Para iniciar o servidor, clique com o botão direito do mouse no nó do WebLogic Server e selecione Iniciar.
-2. No painel esquerdo, selecione Realms de Segurança. A página Resumo de Realms de Segurança será aberta.
-3. Na página Resumo de Realms de Segurança, selecione o nome do realm (o realm default é “myrealm”). A página Definições de Nome do Realm será aberta.
-4. Na página Definições de Nome do Realm, selecione Usuários e Grupos > Usuários. A tabela Usuários será exibida.
-5. Na tabela Usuários, clique em Novo. A página Criar Novo Usuário será aberta.
-6. Digite no nome “user” e na senha “userpw01”. Opcionalmente, digite uma descrição. Aceite o Provedor de Autenticação default.
+
+[start=2]
+. No painel esquerdo, selecione Realms de Segurança. A página Resumo de Realms de Segurança será aberta.
+
+[start=3]
+. Na página Resumo de Realms de Segurança, selecione o nome do realm (o realm default é “myrealm”). A página Definições de Nome do Realm será aberta.
+
+[start=4]
+. Na página Definições de Nome do Realm, selecione Usuários e Grupos > Usuários. A tabela Usuários será exibida.
+
+[start=5]
+. Na tabela Usuários, clique em Novo. A página Criar Novo Usuário será aberta.
+
+[start=6]
+. Digite no nome “user” e na senha “userpw01”. Opcionalmente, digite uma descrição. Aceite o Provedor de Autenticação default.
+
image::images/wl-admin-newuser.png[]
-7. Clique em OK. Retorne para a tabela Usuários.
-8. Clique em Novo e adicione um usuário chamado “admin” e a senha “admin1”.
-9. Abra a guia Grupos. A tabela Grupos será exibida.
-10. Clique em Novo. A janela Criar um Novo Grupo será aberta.
-11. Defina o nome do grupo como userGroup. Aceite o provedor default e clique em OK. Você retornará para a tabela Grupos.
-12. Clique em Novo e crie o grupo adminGroup.
-13. Abra a guia Usuários para o próximo procedimento.
+
+[start=7]
+. Clique em OK. Retorne para a tabela Usuários.
+
+[start=8]
+. Clique em Novo e adicione um usuário chamado “admin” e a senha “admin1”.
+
+[start=9]
+. Abra a guia Grupos. A tabela Grupos será exibida.
+
+[start=10]
+. Clique em Novo. A janela Criar um Novo Grupo será aberta.
+
+[start=11]
+. Defina o nome do grupo como userGroup. Aceite o provedor default e clique em OK. Você retornará para a tabela Grupos.
+
+[start=12]
+. Clique em Novo e crie o grupo adminGroup.
+
+[start=13]
+. Abra a guia Usuários para o próximo procedimento.
Agora, adicione o usuário ``admin`` ao ``adminGroup`` e o usuário ``user`` ao ``userGroup`` .
@@ -306,10 +375,17 @@
2. Na página Definições, abra a guia Grupos.
3. Nos Grupos Pai: Disponível: tabela, selecione ``adminGroup`` .
4. Clique na seta para a direita, >. O ``adminGroup`` será exibido nos Grupos Pais: Selecionado: tabela.
+
image::images/wl-admin-usersettings.png[]
-5. Clique em Salvar.
-6. Retorne à guia Usuários.
-7. Clique no usuário ``user`` e adicione-o ao ``userGroup`` .
+
+[start=5]
+. Clique em Salvar.
+
+[start=6]
+. Retorne à guia Usuários.
+
+[start=7]
+. Clique no usuário ``user`` e adicione-o ao ``userGroup`` .
== Configurando o Método de Log-in
@@ -337,36 +413,56 @@
*Observação: *Se você quiser usar um form, selecione Form em vez de Básico e especifique o log-in e as páginas de erro de log-in.
-4. Insira um nome de realm, dependendo do seu servidor.
+
+[start=4]
+. Insira um nome de realm, dependendo do seu servidor.
* *GlassFish:* Especifique ``file`` como o Nome do Realm. Este é o nome default do realm onde você criou os usuários no GlassFish Server.
* *Tomcat:* Não especifique um nome de realm.
* *WebLogic:* Especifique o nome do realm. O realm default é ``myrealm`` .
+
image::images/security-roles.png[]
-5. Expanda o nó Atribuições de Segurança e clique em Adicionar para adicionar um nome de atribuição.
-6. Adicione as Seguintes Atribuições de Segurança:
+
+[start=5]
+. Expanda o nó Atribuições de Segurança e clique em Adicionar para adicionar um nome de atribuição.
+
+[start=6]
+. Adicione as Seguintes Atribuições de Segurança:
* ``AdminRole`` . Os usuários adicionados a esta atribuição terão acesso ao diretório ``secureAdmin`` do servidor.
* ``UserRole`` . Os usuários adicionados a esta atribuição terão acesso ao diretório ``secureUser`` do servidor.
*Cuidado:* os nomes de atribuição no GlassFish devem começar com letra maiúscula.
-7. Crie e configure um restrição de segurança chamada ``AdminConstraint`` , fazendo o seguinte:
+
+[start=7]
+. Crie e configure um restrição de segurança chamada ``AdminConstraint`` , fazendo o seguinte:
1. Clique em Adicionar Restrição de Segurança. Será exibida uma seção para a nova restrição de segurança.
2. Indique ``AdminConstraint`` para o Nome de View da nova restrição de segurança.
+
image::images/admin-constraint.png[]
-3. Clique em Add. A caixa de diálogo Adicionar Recurso da Web é aberta.
-4.
+
+[start=3]
+. Clique em Add. A caixa de diálogo Adicionar Recurso da Web é aberta.
+
+[start=4]
+.
Na caixa de diálogo Adicionar Recurso da Web, defina o Nome do Recurso como ``Admin`` e o Padrão de URL como ``/secureAdmin/*`` e clique em OK. A caixa de diálogo é fechada.
*Observação: * Ao utilizar um asterisco (*), você permite que o usuário tenha acesso a todos os arquivos dessa pasta.
image::images/addwebresource.png[]
-5. Selecione Ativar Restrição de Autenticação e clique em Editar. A caixa de diálogo Editar Nomes de Atribuições será aberta.
-6. Na caixa de diálogo Editar Nomes de Atribuições, selecione AdminRole no painel esquerdo, clique em Adicionar e em OK.
+
+[start=5]
+. Selecione Ativar Restrição de Autenticação e clique em Editar. A caixa de diálogo Editar Nomes de Atribuições será aberta.
+
+[start=6]
+. Na caixa de diálogo Editar Nomes de Atribuições, selecione AdminRole no painel esquerdo, clique em Adicionar e em OK.
Depois de concluídas as etapas acima, o resultado deverá ser semelhante à figura a seguir:
image::images/constraints.png[]
-8. Crie e configure uma restrição de segurança chamada ``UserConstraint`` , fazendo o seguinte:
+
+[start=8]
+. Crie e configure uma restrição de segurança chamada ``UserConstraint`` , fazendo o seguinte:
1. Clique em Adicionar restrição de segurança para criar uma nova restrição de segurança.
2. Indique ``UserConstraint`` para o Nome de View da nova restrição de segurança.
3. Clique em Adicionar para adicionar uma Coleção de Recursos da Web.
@@ -391,12 +487,18 @@
Defina a Página de Erro de Form, clicando em Procurar e localizando ``loginError.html`` .
image::images/login-forms.png[]
-6. Insira um nome de realm, dependendo do seu servidor.
+
+[start=6]
+. Insira um nome de realm, dependendo do seu servidor.
* *GlassFish:* Especifique ``file`` como o Nome do Realm. Este é o nome default do realm onde você criou os usuários no GlassFish Server.
* *Tomcat:* Não especifique um nome de realm.
* *WebLogic:* Especifique o nome do realm. O realm default é ``myrealm`` .
-7. Expanda o nó Atribuições de Segurança e clique em Adicionar para adicionar um nome de atribuição.
-8. Adicione as Seguintes Atribuições de Segurança:
+
+[start=7]
+. Expanda o nó Atribuições de Segurança e clique em Adicionar para adicionar um nome de atribuição.
+
+[start=8]
+. Adicione as Seguintes Atribuições de Segurança:
|===
|Atribuição Servidor |Descrição
@@ -405,7 +507,9 @@
|UserRole |Os usuários adicionados a esta atribuição terão acesso ao diretório ``secureUser`` do servidor.
|===
-9. Crie e configure um restrição de segurança chamada ``AdminConstraint`` , fazendo o seguinte:
+
+[start=9]
+. Crie e configure um restrição de segurança chamada ``AdminConstraint`` , fazendo o seguinte:
1. Clique em Adicionar restrição de segurança para criar uma nova restrição de segurança.
2. Especifique ``AdminConstraint`` para o Nome de View da nova restrição de segurança.
3. Clique em Adicionar para adicionar uma Coleção de Recursos da Web.
@@ -415,13 +519,19 @@
*Observação: * Ao utilizar um asterisco (*), você permite que o usuário tenha acesso a todos os arquivos dessa pasta.
image::images/addwebresource.png[]
-5. Selecione Ativar Restrição de Autenticação e clique em Editar. A caixa de diálogo Editar Nomes de Atribuições será aberta.
-6. Na caixa de diálogo Editar Nomes de Atribuições, selecione AdminRole no painel esquerdo, clique em Adicionar e em OK.
+
+[start=5]
+. Selecione Ativar Restrição de Autenticação e clique em Editar. A caixa de diálogo Editar Nomes de Atribuições será aberta.
+
+[start=6]
+. Na caixa de diálogo Editar Nomes de Atribuições, selecione AdminRole no painel esquerdo, clique em Adicionar e em OK.
Depois de concluídas as etapas acima, o resultado deverá ser semelhante à figura a seguir:
image::images/constraints.png[]
-10. Crie e configure uma restrição de segurança chamada ``UserConstraint`` , fazendo o seguinte:
+
+[start=10]
+. Crie e configure uma restrição de segurança chamada ``UserConstraint`` , fazendo o seguinte:
1. Clique em Adicionar restrição de segurança para criar uma nova restrição de segurança.
2. Indique ``UserConstraint`` para o Nome de View da nova restrição de segurança.
3. Clique em Adicionar para adicionar uma Coleção de Recursos da Web.
@@ -448,15 +558,27 @@
*Observação:* Em versões do GlassFish Server anteriores à 3.1, esse arquivo é chamado ``sun-web.xml`` .
-2. Selecione a guia Segurança para revelar as atribuições de segurança.
-3. Selecione o nó da atribuição de segurança AdminRole para abrir o painel Mapeamento de Atribuição de Segurança.
-4.
+
+[start=2]
+. Selecione a guia Segurança para revelar as atribuições de segurança.
+
+[start=3]
+. Selecione o nó da atribuição de segurança AdminRole para abrir o painel Mapeamento de Atribuição de Segurança.
+
+[start=4]
+.
Clique em Adicionar principal e especifique ``admin`` como o nome principal. Clique em OK.
image::images/add-principal.png[]
-5. Selecione o nó da atribuição de segurança UserRole para abrir o painel Mapeamento de Atribuição de Segurança.
-6. Clique em Adicionar Principal e especifique ``user`` como o nome principal. Clique em OK
-7. Salve as alterações em ``glassfish-web.xml`` .
+
+[start=5]
+. Selecione o nó da atribuição de segurança UserRole para abrir o painel Mapeamento de Atribuição de Segurança.
+
+[start=6]
+. Clique em Adicionar Principal e especifique ``user`` como o nome principal. Clique em OK
+
+[start=7]
+. Salve as alterações em ``glassfish-web.xml`` .
Também é possível exibir e editar o ``glassfish-web.xml`` no editor de XML clicando na guia XML. Se você abrir o ``glassfish-web.xml`` no editor XML, você verá que o ``glassfish-web.xml`` possui as seguintes informações de mapeamento de atribuição de segurança:
@@ -501,7 +623,9 @@
<principal-name>#userGroup[xml-tag]#</principal-name>
</security-role-assignment>#
----
-3. Salve as alterações em ``weblogic.xml`` .
+
+[start=3]
+. Salve as alterações em ``weblogic.xml`` .
== Implantando e Executando a Aplicação
@@ -519,10 +643,12 @@
* A senha deste usuário está correta e o usuário tem privilégios para o conteúdo protegido -> a página de conteúdo protegido será exibida
image::images/deploy2.png[]
+
*
A senha deste usuário está incorreta -> A página de erro será exibida
image::images/deploy3.png[]
+
*
A senha deste usuário está correta, mas o usuário não tem direito a acessar o conteúdo protegido -> o browser exibe Erro 403 O acesso ao recurso solicitado foi negado
diff --git a/netbeans.apache.org/src/content/kb/docs/web/security-webapps_ru.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/security-webapps_ru.asciidoc
index 67010b6..81bba6d 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/security-webapps_ru.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/security-webapps_ru.asciidoc
@@ -83,21 +83,39 @@
*Примечание.* В этом учебном курсе показано, как настроить параметры безопасности в дескрипторе развертывания, но приложения EE 6 и EE 7 по умолчанию используют аннотации вместо дескриптора развертывания.
-8. При использовании сервера GlassFish или WebLogic и IDE NetBeans 7.0.1 или более поздней версии необходимо создать дескриптор для этого сервера. Щелкните правой кнопкой мыши узел проекта и выберите New ("Создать") > Other ("Другое") > GlassFish > GlassFish Descriptor ("Дескриптор GlassFish"), либо New ("Создать") > Other ("Другое") > WebLogic > WebLogic Descriptor ("Дескриптор WebLogic"). Откроется диалоговое окно создание дескриптора для конкретного сервера. Примите параметры по умолчанию и нажмите кнопку "Готово". Дескриптор для конкретного сервера, именуемый ``glassfish-web.xml`` либо ``weblogic.xml`` , появится в папке Configuration Files ("Файлы настройки") проекта.
-9. В окне 'Проекты' в IDE щелкните правой кнопкой мыши 'Веб-страницы' и выберите 'Создать' > 'Другое'.
-10. В мастере создания новых файлов выберите Other ("Другое") в качестве категории и Folder ("Папка") в качестве типа файла. Нажмите кнопку "Далее".
-11.
+
+[start=8]
+. При использовании сервера GlassFish или WebLogic и IDE NetBeans 7.0.1 или более поздней версии необходимо создать дескриптор для этого сервера. Щелкните правой кнопкой мыши узел проекта и выберите New ("Создать") > Other ("Другое") > GlassFish > GlassFish Descriptor ("Дескриптор GlassFish"), либо New ("Создать") > Other ("Другое") > WebLogic > WebLogic Descriptor ("Дескриптор WebLogic"). Откроется диалоговое окно создание дескриптора для конкретного сервера. Примите параметры по умолчанию и нажмите кнопку "Готово". Дескриптор для конкретного сервера, именуемый ``glassfish-web.xml`` либо ``weblogic.xml`` , появится в папке Configuration Files ("Файлы настройки") проекта.
+
+[start=9]
+. В окне 'Проекты' в IDE щелкните правой кнопкой мыши 'Веб-страницы' и выберите 'Создать' > 'Другое'.
+
+[start=10]
+. В мастере создания новых файлов выберите Other ("Другое") в качестве категории и Folder ("Папка") в качестве типа файла. Нажмите кнопку "Далее".
+
+[start=11]
+.
В мастере создания новых папок назовите папку secureAdmin и нажмите кнопку Finish ("Готово").
Папка secureAdmin появится в окне Projects ("Проекты"), в папке Web Pages ("Веб-страницы").
-12. Повторите 3 предыдущих действия для создания еще одной папки, именуемой secureUser.
-13. Создайте новый файл ``html`` в папке secureUser. Для этого щелкните правой кнопкой мыши папку secureUser в окне 'Проекты' и выберите Создать > Другие.
-14. В категории 'Другие' выберите тип файла HTML. Нажмите кнопку "Далее".
-15. Назовите новый файл pageU и нажмите кнопку Finish ("Готово").
+
+[start=12]
+. Повторите 3 предыдущих действия для создания еще одной папки, именуемой secureUser.
+
+[start=13]
+. Создайте новый файл ``html`` в папке secureUser. Для этого щелкните правой кнопкой мыши папку secureUser в окне 'Проекты' и выберите Создать > Другие.
+
+[start=14]
+. В категории 'Другие' выберите тип файла HTML. Нажмите кнопку "Далее".
+
+[start=15]
+. Назовите новый файл pageU и нажмите кнопку Finish ("Готово").
При нажатии этой кнопки файл ``pageU.html`` откроется в редакторе файлов исходного кода.
-16. В редакторе файлов исходного кода замените существующий код в файле ``pageU.html`` следующим кодом.[html-tag]#<html>
+
+[start=16]
+. В редакторе файлов исходного кода замените существующий код в файле ``pageU.html`` следующим кодом.[html-tag]#<html>
<head>
<title>#
@@ -111,8 +129,12 @@
</body>
</html>#
----
-17. Щелкните правой кнопкой мыши папку secureAdmin и создайте новый файл ``html`` под названием pageA.
-18. В редакторе файлов исходного кода замените существующий код в ``pageA.html`` следующим кодом.[html-tag]#<html>
+
+[start=17]
+. Щелкните правой кнопкой мыши папку secureAdmin и создайте новый файл ``html`` под названием pageA.
+
+[start=18]
+. В редакторе файлов исходного кода замените существующий код в ``pageA.html`` следующим кодом.[html-tag]#<html>
<head>
<title>#
@@ -140,7 +162,9 @@
Request a secure Admin page [jsp-html-tag]#<a# [jsp-html-argument]#href=#[jsp-xml-value]#"secureAdmin/pageA.html"#[jsp-html-tag]#>#here![jsp-html-tag]#</a></p>
<p>#Request a secure User page [jsp-html-tag]#<a# [jsp-html-argument]#href=#[jsp-xml-value]#"secureUser/pageU.html"# [jsp-html-tag]#>#here![jsp-html-tag]#</a></p>#
----
-2. Сохраните изменения.
+
+[start=2]
+. Сохраните изменения.
=== Создание формы входа (обязательно для сервера Tomcat, не обязательно для сервера GlassFish или WebLogic)
@@ -162,8 +186,12 @@
<input# [jsp-html-argument]#type=#[jsp-xml-value]#"submit"# [jsp-html-argument]#value=#[jsp-xml-value]#"Login"#[jsp-html-tag]#>
</form>#
----
-4. Создайте новый файл ``html`` под названием ``loginError.html`` в папке Web Pages ("Веб-страницы"). Это простая страница ошибки.
-5. В редакторе файлов исходного кода замените существующий код в ``loginError.html`` следующим кодом.[html-tag]#<html>
+
+[start=4]
+. Создайте новый файл ``html`` под названием ``loginError.html`` в папке Web Pages ("Веб-страницы"). Это простая страница ошибки.
+
+[start=5]
+. В редакторе файлов исходного кода замените существующий код в ``loginError.html`` следующим кодом.[html-tag]#<html>
<head>
<title>#
@@ -195,12 +223,22 @@
*Примечание. * До получения доступа к консоли администрирования необходимо запустить сервер приложений. Чтобы запустить сервер, щелкните правой кнопкой мыши узел сервера GlassFish и выберите 'Пуск'.
-2. В консоли администрирования перейдите к Configurations ("Настройки") > server-config > Security ("Безопасность") > Realms ("Области") > File ("Файл"). Откроется панель редактирования области.
+
+[start=2]
+. В консоли администрирования перейдите к Configurations ("Настройки") > server-config > Security ("Безопасность") > Realms ("Области") > File ("Файл"). Откроется панель редактирования области.
+
image::images/edit-realm.png[]
-3. Нажмите кнопку Manage Users ("Управлять пользователями") наверху панели редактирования области. Откроется панель File Users ("Пользователи файла").
+
+[start=3]
+. Нажмите кнопку Manage Users ("Управлять пользователями") наверху панели редактирования области. Откроется панель File Users ("Пользователи файла").
+
image::images/file-users.png[]
-4. Нажмите кнопку New ("Создать"). Откроется панель New File Realm User ("Новый пользователь области файла"). Введите ``user`` в качестве идентификатора пользователя и ``userpw01`` в качестве пароля. Нажмите кнопку "ОК".
-5. Выполните приведенные выше действия, чтобы создать пользователя ``admin`` с паролем ``adminpw1`` в области ``file`` .
+
+[start=4]
+. Нажмите кнопку New ("Создать"). Откроется панель New File Realm User ("Новый пользователь области файла"). Введите ``user`` в качестве идентификатора пользователя и ``userpw01`` в качестве пароля. Нажмите кнопку "ОК".
+
+[start=5]
+. Выполните приведенные выше действия, чтобы создать пользователя ``admin`` с паролем ``adminpw1`` в области ``file`` .
=== Определение ролей и пользователей на сервере Tomcat
@@ -225,21 +263,27 @@
<role rolename="AdminRole"/>
----
-3. Добавьте роль под названием ``UserRole`` .
+
+[start=3]
+. Добавьте роль под названием ``UserRole`` .
[source,java]
----
<role rolename="UserRole"/>
----
-4. Добавьте пользователя с именем ``admin`` , паролем ``adminpw1`` и ролью ``AdminRole`` .
+
+[start=4]
+. Добавьте пользователя с именем ``admin`` , паролем ``adminpw1`` и ролью ``AdminRole`` .
[source,java]
----
<user username="admin" password="adminpw1" roles="AdminRole"/>
----
-5. Добавьте пользователя с именем ``user`` , паролем ``userpw01`` и ролью ``UserRole`` .
+
+[start=5]
+. Добавьте пользователя с именем ``user`` , паролем ``userpw01`` и ролью ``UserRole`` .
[source,java]
----
@@ -284,19 +328,44 @@
*Примечание. * До получения доступа к консоли администрирования необходимо запустить сервер приложений. Чтобы запустить сервер, щелкните правой кнопкой мыши узел сервера WebLogic и выберите 'Пуск'.
-2. В левой панели выберите Security Realms ("Области безопасности"). Откроется страница сводки областей безопасности.
-3. На этой странице выберите имя области безопасности (имя по умолчанию – "myrealm"). Откроется страница Settings for Realm Name ("Настройки имени области").
-4. На этой странице выберите Users and Groups ("Пользователи и группы") > Users ("Пользователи"). Появится таблица пользователей.
-5. В таблице пользователей щелкните New ("Создать"). Откроется страница создания нового пользователя.
-6. Введите там имя "user" и пароль "userpw01". Если хочется, введите описание пользователя. Примите поставщика проверки подлинности по умолчанию.
+
+[start=2]
+. В левой панели выберите Security Realms ("Области безопасности"). Откроется страница сводки областей безопасности.
+
+[start=3]
+. На этой странице выберите имя области безопасности (имя по умолчанию – "myrealm"). Откроется страница Settings for Realm Name ("Настройки имени области").
+
+[start=4]
+. На этой странице выберите Users and Groups ("Пользователи и группы") > Users ("Пользователи"). Появится таблица пользователей.
+
+[start=5]
+. В таблице пользователей щелкните New ("Создать"). Откроется страница создания нового пользователя.
+
+[start=6]
+. Введите там имя "user" и пароль "userpw01". Если хочется, введите описание пользователя. Примите поставщика проверки подлинности по умолчанию.
+
image::images/wl-admin-newuser.png[]
-7. Нажмите кнопку "ОК". Мы вернемся к таблице пользователей.
-8. Щелкните New ("Создать") и добавьте пользователя с именем"admin" и паролем "admin1".
-9. Откройте вкладку Groups ("Группы"). Появится таблица групп.
-10. Нажмите кнопку New ("Создать"). Откроется окно создания новой группы.
-11. Назовите группу userGroup. Примите поставщика по умолчанию и нажмите кнопку "OK". Это вернет нас к таблице групп.
-12. Щелкните New ("Создать") и создайте группу adminGroup.
-13. Откройте вкладку Users ("Пользователи") для следующей процедуры.
+
+[start=7]
+. Нажмите кнопку "ОК". Мы вернемся к таблице пользователей.
+
+[start=8]
+. Щелкните New ("Создать") и добавьте пользователя с именем"admin" и паролем "admin1".
+
+[start=9]
+. Откройте вкладку Groups ("Группы"). Появится таблица групп.
+
+[start=10]
+. Нажмите кнопку New ("Создать"). Откроется окно создания новой группы.
+
+[start=11]
+. Назовите группу userGroup. Примите поставщика по умолчанию и нажмите кнопку "OK". Это вернет нас к таблице групп.
+
+[start=12]
+. Щелкните New ("Создать") и создайте группу adminGroup.
+
+[start=13]
+. Откройте вкладку Users ("Пользователи") для следующей процедуры.
Теперь добавьте пользователя ``admin`` к ``adminGroup`` и пользователя ``user`` к ``userGroup`` .
@@ -306,10 +375,17 @@
2. На этой странице откройте вкладку Groups ("Группы").
3. В таблице Parent Groups: Available: ("Родительские группы: Доступные") выберите ``adminGroup`` .
4. Щелкните стрелку вправо >. ``adminGroup`` появится в таблице Parent Groups: Chosen: ("Родительские группы: Выбранные:").
+
image::images/wl-admin-usersettings.png[]
-5. Нажмите кнопку "Сохранить".
-6. Вернитесь на вкладку Users ("Пользователи").
-7. Щелкните пользователя ``user`` и добавьте его к ``userGroup`` .
+
+[start=5]
+. Нажмите кнопку "Сохранить".
+
+[start=6]
+. Вернитесь на вкладку Users ("Пользователи").
+
+[start=7]
+. Щелкните пользователя ``user`` и добавьте его к ``userGroup`` .
== Настройка метода входа
@@ -337,36 +413,56 @@
*Примечание. * Если необходимо использовать формы, выберите 'Форма', а не 'Основные' и укажите имя входа и страницы входа с ошибками.
-4. Введите имя области, в зависимости от используемого сервера.
+
+[start=4]
+. Введите имя области, в зависимости от используемого сервера.
* *GlassFish:* введите ``file`` в поле Realm Name ("Имя области"). Это имя области по умолчанию при создании пользователей на сервере GlassFish.
* *Tomcat:* не вводите имя области.
* *WebLogic:* введите имя своей области. Областью по умолчанию является ``myrealm`` .
+
image::images/security-roles.png[]
-5. Разверните узел Security Roles ("Роли безопасности") и нажмите кнопку Add ("Добавить") для добавления имени роли.
-6. Добавьте следующие роли безопасности:
+
+[start=5]
+. Разверните узел Security Roles ("Роли безопасности") и нажмите кнопку Add ("Добавить") для добавления имени роли.
+
+[start=6]
+. Добавьте следующие роли безопасности:
* ``AdminRole`` . Пользователи, добавленные к этой роли, получат доступ к каталогу ``secureAdmin`` на сервере.
* ``UserRole`` . Пользователи, добавленные к этой роли, получат доступ к каталогу ``secureUser`` на сервере.
*Внимание!* Имена ролей GlassFish должны начинаться с прописной буквы.
-7. Создайте и настройте ограничение безопасности под названием ``AdminConstraint`` , выполнив следующее:
+
+[start=7]
+. Создайте и настройте ограничение безопасности под названием ``AdminConstraint`` , выполнив следующее:
1. Щелкните Add Security Constraint ("Добавить ограничение безопасности"). Появится раздел для нового ограничения безопасности.
2. Введите ``AdminConstraint`` в качестве Display Name ("Отображаемое имя") нового ограничения безопасности.
+
image::images/admin-constraint.png[]
-3. Нажмите кнопку "Add". Откроется диалоговое окно Add Web Resource ("Добавление веб-ресурса").
-4.
+
+[start=3]
+. Нажмите кнопку "Add". Откроется диалоговое окно Add Web Resource ("Добавление веб-ресурса").
+
+[start=4]
+.
В этом диалоговом окне установите Resource Name ("Имя ресурса") на ``Admin`` и шаблон URL на ``/secureAdmin/*`` , после чего нажмите кнопку "OK". Диалоговое окно закроется.
*Примечание. * При использовании звездочки (*), пользователю предоставляется доступ ко всем файлам в этой папке.
image::images/addwebresource.png[]
-5. Выберите Enable Authentication Constraint ("Включить ограничение проверки подлинности") и нажмите кнопку Edit ("Изменить"). Откроется диалоговое окно изменения имен роли.
-6. В этом окне выберите AdminRole на левой панели, нажмите кнопку Add ("Добавить"), затем нажмите кнопку OK.
+
+[start=5]
+. Выберите Enable Authentication Constraint ("Включить ограничение проверки подлинности") и нажмите кнопку Edit ("Изменить"). Откроется диалоговое окно изменения имен роли.
+
+[start=6]
+. В этом окне выберите AdminRole на левой панели, нажмите кнопку Add ("Добавить"), затем нажмите кнопку OK.
После завершения этих действий результат должен быть подобен этому рисунку:
image::images/constraints.png[]
-8. Создайте и настройте ограничение безопасности под названием ``UserConstraint`` , выполнив следующее:
+
+[start=8]
+. Создайте и настройте ограничение безопасности под названием ``UserConstraint`` , выполнив следующее:
1. Щелкните Add Security Constraint ("Добавить ограничение безопасности"), чтобы добавить новое ограничение безопасности.
2. Введите ``UserConstraint`` в качестве Display Name ("Отображаемое имя") нового ограничения безопасности.
3. Нажмите кнопку Add ("Добавить") для добавления Web Resource Collection ("Коллекция веб-ресурсов").
@@ -391,12 +487,18 @@
Установите Form Login Page ("Страница ошибки входа с помощью формы"), щелкнув Browse ("Просмотр") и найдя ``loginError.html`` .
image::images/login-forms.png[]
-6. Введите имя области, в зависимости от используемого сервера.
+
+[start=6]
+. Введите имя области, в зависимости от используемого сервера.
* *GlassFish:* введите ``file`` в поле Realm Name ("Имя области"). Это имя области по умолчанию при создании пользователей на сервере GlassFish.
* *Tomcat:* не вводите имя области.
* *WebLogic:* введите имя своей области. Областью по умолчанию является ``myrealm`` .
-7. Разверните узел Security Roles ("Роли безопасности") и нажмите кнопку Add ("Добавить") для добавления имени роли.
-8. Добавьте следующие роли безопасности:
+
+[start=7]
+. Разверните узел Security Roles ("Роли безопасности") и нажмите кнопку Add ("Добавить") для добавления имени роли.
+
+[start=8]
+. Добавьте следующие роли безопасности:
|===
|Роль сервера |Описание
@@ -405,7 +507,9 @@
|UserRole |Пользователи, добавленные к этой роли, получат доступ к каталогу ``secureUser`` на сервере.
|===
-9. Создайте и настройте ограничение безопасности под названием ``AdminConstraint`` , выполнив следующее:
+
+[start=9]
+. Создайте и настройте ограничение безопасности под названием ``AdminConstraint`` , выполнив следующее:
1. Щелкните Add Security Constraint ("Добавить ограничение безопасности"), чтобы добавить новое ограничение безопасности.
2. Введите ``AdminConstraint`` в качестве Display Name ("Отображаемое имя") нового ограничения безопасности.
3. Нажмите кнопку Add ("Добавить") для добавления Web Resource Collection ("Коллекция веб-ресурсов").
@@ -415,13 +519,19 @@
*Примечание. * При использовании звездочки (*), пользователю предоставляется доступ ко всем файлам в этой папке.
image::images/addwebresource.png[]
-5. Выберите Enable Authentication Constraint ("Включить ограничение проверки подлинности") и нажмите кнопку Edit ("Изменить"). Откроется диалоговое окно изменения имен роли.
-6. В этом окне выберите AdminRole на левой панели, нажмите кнопку Add ("Добавить"), затем нажмите кнопку OK.
+
+[start=5]
+. Выберите Enable Authentication Constraint ("Включить ограничение проверки подлинности") и нажмите кнопку Edit ("Изменить"). Откроется диалоговое окно изменения имен роли.
+
+[start=6]
+. В этом окне выберите AdminRole на левой панели, нажмите кнопку Add ("Добавить"), затем нажмите кнопку OK.
После завершения этих действий результат должен быть подобен этому рисунку:
image::images/constraints.png[]
-10. Создайте и настройте ограничение безопасности под названием ``UserConstraint`` , выполнив следующее:
+
+[start=10]
+. Создайте и настройте ограничение безопасности под названием ``UserConstraint`` , выполнив следующее:
1. Щелкните Add Security Constraint ("Добавить ограничение безопасности"), чтобы добавить новое ограничение безопасности.
2. Введите ``UserConstraint`` в качестве Display Name ("Отображаемое имя") нового ограничения безопасности.
3. Нажмите кнопку Add ("Добавить") для добавления Web Resource Collection ("Коллекция веб-ресурсов").
@@ -448,15 +558,27 @@
*Примечание.* Для сервера GlassFish с более поздними версиями, чем 3.1, для этого файла задается имя ``sun-web.xml`` .
-2. Выберите вкладку Security ("Безопасность") для раскрытия ролей безопасности.
-3. Выберите узел роли безопасности AdminRole, чтобы открыть страницу Security Role Mapping ("Сопоставление ролей безопасности").
-4.
+
+[start=2]
+. Выберите вкладку Security ("Безопасность") для раскрытия ролей безопасности.
+
+[start=3]
+. Выберите узел роли безопасности AdminRole, чтобы открыть страницу Security Role Mapping ("Сопоставление ролей безопасности").
+
+[start=4]
+.
Щелкните Add Principal ("Добавить участника") и введите ``admin`` в качестве имени участника. Нажмите кнопку "ОК".
image::images/add-principal.png[]
-5. Выберите узел роли безопасности UserRole, чтобы открыть страницу Security Role Mapping ("Сопоставление ролей безопасности").
-6. Щелкните Add Principal ("Добавить участника") и введите ``user`` в качестве имени участника. Нажмите кнопку "OK".
-7. Сохраните изменения в ``glassfish-web.xml`` .
+
+[start=5]
+. Выберите узел роли безопасности UserRole, чтобы открыть страницу Security Role Mapping ("Сопоставление ролей безопасности").
+
+[start=6]
+. Щелкните Add Principal ("Добавить участника") и введите ``user`` в качестве имени участника. Нажмите кнопку "OK".
+
+[start=7]
+. Сохраните изменения в ``glassfish-web.xml`` .
``glassfish-web.xml`` также можно просматривать и редактировать в редакторе XML, щелкнув вкладку XML. Если открыть ``glassfish-web.xml`` в редакторе XML, то можно будет увидеть, что ``glassfish-web.xml`` содержит следующую информацию о сопоставлении ролей безопасности:
@@ -501,7 +623,9 @@
<principal-name>#userGroup[xml-tag]#</principal-name>
</security-role-assignment>#
----
-3. Сохраните изменения в ``weblogic.xml`` .
+
+[start=3]
+. Сохраните изменения в ``weblogic.xml`` .
== Развертывание и выполнение приложения
@@ -519,10 +643,12 @@
* Пароль пользователя верен и у пользователя есть права на доступ к защищенному содержимому -> отобразится страница защищенного содержимого.
image::images/deploy2.png[]
+
*
Пароль пользователя неверен -> отобразится страница ошибки.
image::images/deploy3.png[]
+
*
Пароль пользователя верен, но у пользователя нет прав на доступ к защищенному содержимому -> браузер выведет ошибку 403, "В доступе к запрошенному ресурсу отказано".
diff --git a/netbeans.apache.org/src/content/kb/docs/web/security-webapps_zh_CN.asciidoc b/netbeans.apache.org/src/content/kb/docs/web/security-webapps_zh_CN.asciidoc
index d0489d6..2cd2b99 100644
--- a/netbeans.apache.org/src/content/kb/docs/web/security-webapps_zh_CN.asciidoc
+++ b/netbeans.apache.org/src/content/kb/docs/web/security-webapps_zh_CN.asciidoc
@@ -83,21 +83,39 @@
*注：*本教程介绍了如何在部署描述符中配置安全功能，但 EE 6 和 EE 7 应用程序默认使用标注，而不是部署描述符。
-8. 如果使用 GlassFish 或 WebLogic Server 以及 NetBeans IDE 7.0.1 或更高版本，则需生成特定于服务器的描述符。右键单击项目的节点并选择 "New"（新建）> "Other"（其他）> "GlassFish" > "GlassFish Descriptor"（GlassFish 描述符），或选择 "New"（新建）> "Other"（其他）> "WebLogic" > "WebLogic Descriptor"（WebLogic 描述符）。"Create Server-Specific Descriptor"（创建特定于服务器的描述符）对话框将会打开。接受所有默认值，然后单击 "Finish"（完成）。特定于服务器的描述符（名为 ``glassfish-web.xml`` 或 ``weblogic.xml`` ）将出现在项目中的 "Configuration Files"（配置文件）文件夹中。
-9. 在 IDE 的 "Projects"（项目）窗口中，右键单击 "Web Pages"（Web 页），然后选择 "New"（新建）> "Other"（其他）。
-10. 在新建文件向导中，选择 "Other"（其他）作为类别，选择 "Folder"（文件夹）作为文件类型。单击 "Next"（下一步）。
-11.
+
+[start=8]
+. 如果使用 GlassFish 或 WebLogic Server 以及 NetBeans IDE 7.0.1 或更高版本，则需生成特定于服务器的描述符。右键单击项目的节点并选择 "New"（新建）> "Other"（其他）> "GlassFish" > "GlassFish Descriptor"（GlassFish 描述符），或选择 "New"（新建）> "Other"（其他）> "WebLogic" > "WebLogic Descriptor"（WebLogic 描述符）。"Create Server-Specific Descriptor"（创建特定于服务器的描述符）对话框将会打开。接受所有默认值，然后单击 "Finish"（完成）。特定于服务器的描述符（名为 ``glassfish-web.xml`` 或 ``weblogic.xml`` ）将出现在项目中的 "Configuration Files"（配置文件）文件夹中。
+
+[start=9]
+. 在 IDE 的 "Projects"（项目）窗口中，右键单击 "Web Pages"（Web 页），然后选择 "New"（新建）> "Other"（其他）。
+
+[start=10]
+. 在新建文件向导中，选择 "Other"（其他）作为类别，选择 "Folder"（文件夹）作为文件类型。单击 "Next"（下一步）。
+
+[start=11]
+.
在新建文件夹向导中，将文件夹命名为 "secureAdmin"，然后单击 "Finish"（完成）。
secureAdmin 文件夹将显示在 "Projects"（项目）窗口的 "Web Pages"（Web 页）文件夹中。
-12. 重复前面的 3 个步骤，以创建另一个名为 secureUser 的文件夹。
-13. 在 secureUser 文件夹中创建一个新的 ``html`` 文件，方法是在 "Projects"（项目）窗口中右键单击 secureUser 文件夹，然后选择 "New"（新建）> "Other"（其他）。
-14. 在 "Other"（其他）类别中选择 "HTML" 文件类型。单击 "Next"（下一步）。
-15. 将新文件命名为 "pageU"，然后单击 "Finish"（完成）。
+
+[start=12]
+. 重复前面的 3 个步骤，以创建另一个名为 secureUser 的文件夹。
+
+[start=13]
+. 在 secureUser 文件夹中创建一个新的 ``html`` 文件，方法是在 "Projects"（项目）窗口中右键单击 secureUser 文件夹，然后选择 "New"（新建）> "Other"（其他）。
+
+[start=14]
+. 在 "Other"（其他）类别中选择 "HTML" 文件类型。单击 "Next"（下一步）。
+
+[start=15]
+. 将新文件命名为 "pageU"，然后单击 "Finish"（完成）。
单击 "Finish"（完成），此时将在源代码编辑器中打开 ``pageU.html`` 文件。
-16. 在源代码编辑器中，将 ``pageU.html`` 中的现有代码替换为以下代码。[html-tag]#<html>
+
+[start=16]
+. 在源代码编辑器中，将 ``pageU.html`` 中的现有代码替换为以下代码。[html-tag]#<html>
<head>
<title>#
@@ -111,8 +129,12 @@
</body>
</html>#
----
-17. 右键单击 secureAdmin 文件夹并创建一个新的名为 pageA 的 ``html`` 文件。
-18. 在源代码编辑器中，将 ``pageA.html`` 中的现有代码替换为以下代码。[html-tag]#<html>
+
+[start=17]
+. 右键单击 secureAdmin 文件夹并创建一个新的名为 pageA 的 ``html`` 文件。
+
+[start=18]
+. 在源代码编辑器中，将 ``pageA.html`` 中的现有代码替换为以下代码。[html-tag]#<html>
<head>
<title>#
@@ -140,7 +162,9 @@
Request a secure Admin page [jsp-html-tag]#<a# [jsp-html-argument]#href=#[jsp-xml-value]#"secureAdmin/pageA.html"#[jsp-html-tag]#>#here![jsp-html-tag]#</a></p>
<p>#Request a secure User page [jsp-html-tag]#<a# [jsp-html-argument]#href=#[jsp-xml-value]#"secureUser/pageU.html"# [jsp-html-tag]#>#here![jsp-html-tag]#</a></p>#
----
-2. 保存所做的更改。
+
+[start=2]
+. 保存所做的更改。
=== 创建“登录窗体”（对 Tomcat 为必选，对 GlassFish 或 WebLogic Server 为可选）
@@ -162,8 +186,12 @@
<input# [jsp-html-argument]#type=#[jsp-xml-value]#"submit"# [jsp-html-argument]#value=#[jsp-xml-value]#"Login"#[jsp-html-tag]#>
</form>#
----
-4. 在 "Web Pages"（Web 页）文件夹中创建一个新的名为 ``loginError.html`` 的 ``html`` 文件。这是一个简单的错误页。
-5. 在源代码编辑器中，将 ``loginError.html`` 中的现有代码替换为以下代码。[html-tag]#<html>
+
+[start=4]
+. 在 "Web Pages"（Web 页）文件夹中创建一个新的名为 ``loginError.html`` 的 ``html`` 文件。这是一个简单的错误页。
+
+[start=5]
+. 在源代码编辑器中，将 ``loginError.html`` 中的现有代码替换为以下代码。[html-tag]#<html>
<head>
<title>#
@@ -195,12 +223,22 @@
*注：*必须运行应用服务器才能访问管理控制台。要启动服务器，请右键单击 GlassFish Server 节点并选择 "Start"（启动）。
-2. 在 "Admin Console"（管理控制台）中，导航至 "Configurations"（配置）> "server-config" > "Security"（安全性）> "Realms"（领域）> "File"（文件）。"Edit Realm"（编辑领域）面板将会打开。
+
+[start=2]
+. 在 "Admin Console"（管理控制台）中，导航至 "Configurations"（配置）> "server-config" > "Security"（安全性）> "Realms"（领域）> "File"（文件）。"Edit Realm"（编辑领域）面板将会打开。
+
image::images/edit-realm.png[]
-3. 单击 "Edit Realm"（编辑领域）面板顶部的 "Manage Users"（管理用户）按钮。将打开 "File Users"（文件用户）面板。
+
+[start=3]
+. 单击 "Edit Realm"（编辑领域）面板顶部的 "Manage Users"（管理用户）按钮。将打开 "File Users"（文件用户）面板。
+
image::images/file-users.png[]
-4. 单击 "New"（新建）。将打开 "New File Realm User"（新建文件领域用户）面板。键入 ``user`` 作为用户 ID，键入 ``userpw01`` 作为口令。单击 "OK"（确定）。
-5. 按照前面的步骤在 ``file`` 领域中创建名为 ``admin`` 、口令为 ``adminpw1`` 的用户。
+
+[start=4]
+. 单击 "New"（新建）。将打开 "New File Realm User"（新建文件领域用户）面板。键入 ``user`` 作为用户 ID，键入 ``userpw01`` 作为口令。单击 "OK"（确定）。
+
+[start=5]
+. 按照前面的步骤在 ``file`` 领域中创建名为 ``admin`` 、口令为 ``adminpw1`` 的用户。
=== 在 Tomcat Web 服务器上定义角色和用户
@@ -225,21 +263,27 @@
<role rolename="AdminRole"/>
----
-3. 添加一个名为 ``UserRole`` 的角色。
+
+[start=3]
+. 添加一个名为 ``UserRole`` 的角色。
[source,java]
----
<role rolename="UserRole"/>
----
-4. 添加一个名为 ``admin`` 并具有 ``adminpw1`` 口令和 ``AdminRole`` 角色的用户。
+
+[start=4]
+. 添加一个名为 ``admin`` 并具有 ``adminpw1`` 口令和 ``AdminRole`` 角色的用户。
[source,java]
----
<user username="admin" password="adminpw1" roles="AdminRole"/>
----
-5. 添加一个名为 ``user`` 并具有 ``userpw01`` 口令和 ``UserRole`` 角色的用户。
+
+[start=5]
+. 添加一个名为 ``user`` 并具有 ``userpw01`` 口令和 ``UserRole`` 角色的用户。
[source,java]
----
@@ -284,19 +328,44 @@
*注：*必须运行应用服务器才能访问管理控制台。要启动服务器，请右键单击 WebLogic Server 节点并选择 "Start"（启动）。
-2. 在左面板中，选择 "Security Realms"（安全领域）。"Summary of Security Realms"（安全领域概要）页将会打开。
-3. 在 "Summary of Security Realms"（安全领域概要）页中，选择领域的名称（默认领域为 "myrealm"）。"Settings for Realm Name"（领域名称设置）页将会打开。
-4. 在 "Settings for Realm Name"（领域名称设置）页中，选择 "Users and Groups"（用户和组）> "Users"（用户）。将显示 "Users"（用户）表。
-5. 在 "Users"（用户）表中，单击 "New"（新建）。"Create New User"（创建新用户）页将会打开。
-6. 键入名称 "user" 和口令 "userpw01"。还可以键入说明。接受默认的 "Authentication Provider"（验证提供器）。
+
+[start=2]
+. 在左面板中，选择 "Security Realms"（安全领域）。"Summary of Security Realms"（安全领域概要）页将会打开。
+
+[start=3]
+. 在 "Summary of Security Realms"（安全领域概要）页中，选择领域的名称（默认领域为 "myrealm"）。"Settings for Realm Name"（领域名称设置）页将会打开。
+
+[start=4]
+. 在 "Settings for Realm Name"（领域名称设置）页中，选择 "Users and Groups"（用户和组）> "Users"（用户）。将显示 "Users"（用户）表。
+
+[start=5]
+. 在 "Users"（用户）表中，单击 "New"（新建）。"Create New User"（创建新用户）页将会打开。
+
+[start=6]
+. 键入名称 "user" 和口令 "userpw01"。还可以键入说明。接受默认的 "Authentication Provider"（验证提供器）。
+
image::images/wl-admin-newuser.png[]
-7. 单击 "OK"（确定）。您将返回到 "Users"（用户）表。
-8. 单击 "New"（新建）并添加一个具有名称 "admin" 和口令 "admin1" 的用户。
-9. 打开 "Groups"（组）标签。将显示 "Groups"（组）表。
-10. 单击 "New"（新建）。"Create a New Group"（创建新组）窗口将会打开。
-11. 将组命名为 userGroup。接受默认提供器并单击 "OK"（确定）。您将返回到 "Groups"（组）表。
-12. 单击 "New"（新建）并创建组 adminGroup。
-13. 为下一过程打开 "Users"（用户）标签。
+
+[start=7]
+. 单击 "OK"（确定）。您将返回到 "Users"（用户）表。
+
+[start=8]
+. 单击 "New"（新建）并添加一个具有名称 "admin" 和口令 "admin1" 的用户。
+
+[start=9]
+. 打开 "Groups"（组）标签。将显示 "Groups"（组）表。
+
+[start=10]
+. 单击 "New"（新建）。"Create a New Group"（创建新组）窗口将会打开。
+
+[start=11]
+. 将组命名为 userGroup。接受默认提供器并单击 "OK"（确定）。您将返回到 "Groups"（组）表。
+
+[start=12]
+. 单击 "New"（新建）并创建组 adminGroup。
+
+[start=13]
+. 为下一过程打开 "Users"（用户）标签。
现在，将 ``admin`` 用户添加至 ``adminGroup`` ，并将 ``user`` 用户添加至 ``userGroup`` 。
@@ -306,10 +375,17 @@
2. 在 "Settings"（设置）页中，打开 "Groups"（组）标签。
3. 在 "Parent Groups: Available:"（父组：可用：）表中，选择 ``adminGroup`` 。
4. 单击向右箭头 >。 ``adminGroup`` 将出现在 "Parent Groups: Chosen:"（父组: 选定:）表中。
+
image::images/wl-admin-usersettings.png[]
-5. 单击 "Save"（保存）。
-6. 返回到 "Users"（用户）标签。
-7. 单击 ``user`` 用户并将其添加至 ``userGroup`` 。
+
+[start=5]
+. 单击 "Save"（保存）。
+
+[start=6]
+. 返回到 "Users"（用户）标签。
+
+[start=7]
+. 单击 ``user`` 用户并将其添加至 ``userGroup`` 。
== 配置登录方法
@@ -337,36 +413,56 @@
*注：*如果希望使用窗体，请选择 "Form"（窗体）而不是 "basic"（基本），并指定登录页和登录错误页。
-4. 根据服务器输入领域名称。
+
+[start=4]
+. 根据服务器输入领域名称。
* *GlassFish：*输入 ``file`` 作为领域名称。这是在 GlassFish Server 上创建用户所在的默认领域名称。
* *Tomcat：*请勿输入领域名称。
* *WebLogic：*输入您的领域名称。默认领域是 ``myrealm`` 。
+
image::images/security-roles.png[]
-5. 展开 "Security Roles "（安全角色）节点，然后单击 "Add"（添加）可添加角色名称。
-6. 添加以下安全角色：
+
+[start=5]
+. 展开 "Security Roles "（安全角色）节点，然后单击 "Add"（添加）可添加角色名称。
+
+[start=6]
+. 添加以下安全角色：
* ``AdminRole`` 。添加到此角色的用户将有权访问服务器的 ``secureAdmin`` 目录。
* ``UserRole`` 。添加到此角色的用户将有权访问服务器的 ``secureUser`` 目录。
*注：*GlassFish 角色名称必须以大写字母开头。
-7. 通过执行以下操作，创建和配置名为 ``AdminConstraint`` 的安全约束：
+
+[start=7]
+. 通过执行以下操作，创建和配置名为 ``AdminConstraint`` 的安全约束：
1. 单击 "Add Security Constraint"（添加安全约束）。将显示新安全约束部分。
2. 输入 ``AdminConstraint`` 作为新安全约束的显示名称。
+
image::images/admin-constraint.png[]
-3. 单击 "ADD"（添加）。将打开 "Add Web Resource"（增加 Web 资源）对话框。
-4.
+
+[start=3]
+. 单击 "ADD"（添加）。将打开 "Add Web Resource"（增加 Web 资源）对话框。
+
+[start=4]
+.
在 "Add Web Resource"（增加 Web 资源）对话框中，将 "Resource Name"（资源名称）设置为 ``Admin`` ，将 "URL Pattern"（URL 模式）设置为 ``/secureAdmin/*`` ，然后单击 "OK"（确定）。对话框将关闭。
*注：*如果使用星号 (*)，则会授予用户访问该文件夹中所有文件的权限。
image::images/addwebresource.png[]
-5. 选中 "Enable Authentication Constraint"（启用验证约束），然后单击 "Edit"（编辑）。"Edit Role Names"（编辑角色名称）对话框将会打开。
-6. 在 "Edit Role Names"（编辑角色名称）对话框中，在左窗格中选择 AdminRole，单击 "Add"（添加），然后单击 "OK"（确定）。
+
+[start=5]
+. 选中 "Enable Authentication Constraint"（启用验证约束），然后单击 "Edit"（编辑）。"Edit Role Names"（编辑角色名称）对话框将会打开。
+
+[start=6]
+. 在 "Edit Role Names"（编辑角色名称）对话框中，在左窗格中选择 AdminRole，单击 "Add"（添加），然后单击 "OK"（确定）。
在完成上述步骤之后，结果应如下图所示：
image::images/constraints.png[]
-8. 通过执行以下操作，创建和配置名为 ``UserConstraint`` 的安全约束：
+
+[start=8]
+. 通过执行以下操作，创建和配置名为 ``UserConstraint`` 的安全约束：
1. 单击 "Add Security Constraint"（添加安全约束），创建新的安全约束。
2. 输入 ``UserConstraint`` 作为新安全约束的显示名称。
3. 单击 "Add"（添加），添加 "Web Resource Collection"（Web 资源集合）。
@@ -391,12 +487,18 @@
通过单击 "Browse"（浏览）并找到 ``loginError.html`` 设置“窗体错误页”。
image::images/login-forms.png[]
-6. 根据服务器输入领域名称。
+
+[start=6]
+. 根据服务器输入领域名称。
* *GlassFish：*输入 ``file`` 作为领域名称。这是在 GlassFish Server 上创建用户所在的默认领域名称。
* *Tomcat：*请勿输入领域名称。
* *WebLogic：*输入您的领域名称。默认领域是 ``myrealm`` 。
-7. 展开 "Security Roles "（安全角色）节点，然后单击 "Add"（添加）可添加角色名称。
-8. 添加以下安全角色：
+
+[start=7]
+. 展开 "Security Roles "（安全角色）节点，然后单击 "Add"（添加）可添加角色名称。
+
+[start=8]
+. 添加以下安全角色：
|===
|服务器角色 |描述
@@ -405,7 +507,9 @@
|UserRole |添加到此角色的用户将有权访问服务器的 ``secureUser`` 目录。
|===
-9. 通过执行以下操作，创建和配置名为 ``AdminConstraint`` 的安全约束：
+
+[start=9]
+. 通过执行以下操作，创建和配置名为 ``AdminConstraint`` 的安全约束：
1. 单击 "Add Security Constraint"（添加安全约束），创建新的安全约束。
2. 输入 ``AdminConstraint`` 作为新安全约束的显示名称。
3. 单击 "Add"（添加），添加 "Web Resource Collection"（Web 资源集合）。
@@ -415,13 +519,19 @@
*注：*如果使用星号 (*)，则会授予用户访问该文件夹中所有文件的权限。
image::images/addwebresource.png[]
-5. 选中 "Enable Authentication Constraint"（启用验证约束），然后单击 "Edit"（编辑）。"Edit Role Names"（编辑角色名称）对话框将会打开。
-6. 在 "Edit Role Names"（编辑角色名称）对话框中，在左窗格中选择 AdminRole，单击 "Add"（添加），然后单击 "OK"（确定）。
+
+[start=5]
+. 选中 "Enable Authentication Constraint"（启用验证约束），然后单击 "Edit"（编辑）。"Edit Role Names"（编辑角色名称）对话框将会打开。
+
+[start=6]
+. 在 "Edit Role Names"（编辑角色名称）对话框中，在左窗格中选择 AdminRole，单击 "Add"（添加），然后单击 "OK"（确定）。
在完成上述步骤之后，结果应如下图所示：
image::images/constraints.png[]
-10. 通过执行以下操作，创建和配置名为 ``UserConstraint`` 的安全约束：
+
+[start=10]
+. 通过执行以下操作，创建和配置名为 ``UserConstraint`` 的安全约束：
1. 单击 "Add Security Constraint"（添加安全约束），创建新的安全约束。
2. 输入 ``UserConstraint`` 作为新安全约束的显示名称。
3. 单击 "Add"（添加），添加 "Web Resource Collection"（Web 资源集合）。
@@ -448,15 +558,27 @@
*注：*对于早于 3.1 的 GlassFish Server 版本，此文件名为 ``sun-web.xml`` 。
-2. 选择 "Security"（安全）标签以显示安全角色。
-3. 选择 AdminRole 安全角色节点以打开 "Security Role Mapping"（安全角色映射）窗格。
-4.
+
+[start=2]
+. 选择 "Security"（安全）标签以显示安全角色。
+
+[start=3]
+. 选择 AdminRole 安全角色节点以打开 "Security Role Mapping"（安全角色映射）窗格。
+
+[start=4]
+.
单击 "Add Principal"（添加主用户），并为主用户名称输入 ``admin`` 。单击 "OK"（确定）。
image::images/add-principal.png[]
-5. 选择 UserRole 安全角色节点以打开 "Security Role Mapping"（安全角色映射）窗格。
-6. 单击 "Add Principal"（添加主用户），并为主用户名称输入 ``user`` 。单击 "OK"（确定）。
-7. 将更改保存到 ``glassfish-web.xml`` 。
+
+[start=5]
+. 选择 UserRole 安全角色节点以打开 "Security Role Mapping"（安全角色映射）窗格。
+
+[start=6]
+. 单击 "Add Principal"（添加主用户），并为主用户名称输入 ``user`` 。单击 "OK"（确定）。
+
+[start=7]
+. 将更改保存到 ``glassfish-web.xml`` 。
此外，也可以通过单击 "XML" 标签，在 XML 编辑器中查看和编辑 ``glassfish-web.xml`` 。如果在 XML 编辑器中打开 ``glassfish-web.xml`` ，则可以看到 ``glassfish-web.xml`` 具有以下安全角色映射信息：
@@ -501,7 +623,9 @@
<principal-name>#userGroup[xml-tag]#</principal-name>
</security-role-assignment>#
----
-3. 将更改保存到 ``weblogic.xml`` 。
+
+[start=3]
+. 将更改保存到 ``weblogic.xml`` 。
== 部署并运行应用程序
@@ -519,10 +643,12 @@
* 此用户的口令正确并且用户具有访问安全内容的权限 -> 显示安全内容页
image::images/deploy2.png[]
+
*
此用户的口令不正确 -> 显示错误页
image::images/deploy3.png[]
+
*
此用户的口令正确，但用户没有访问安全内容的权限 -> 浏览器显示 "Error 403 Access to the requested resource has been denied"
