You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@netbeans.apache.org by gi...@apache.org on 2020/01/27 21:04:11 UTC
[netbeans-website] branch asf-site updated: Automated site
publishing by Jenkins build 1139
This is an automated email from the ASF dual-hosted git repository.
git-site-role pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/netbeans-website.git
The following commit(s) were added to refs/heads/asf-site by this push:
new fb69cb0 Automated site publishing by Jenkins build 1139
fb69cb0 is described below
commit fb69cb05d41e71df67bce430f3353b2fe51a93a3
Author: jenkins <bu...@apache.org>
AuthorDate: Mon Jan 27 21:04:06 2020 +0000
Automated site publishing by Jenkins build 1139
---
content/kb/docs/web/ajax-quickstart.html | 318 +++++++++-----
content/kb/docs/web/ajax-quickstart_ja.html | 246 ++++++++---
content/kb/docs/web/ajax-quickstart_pt_BR.html | 246 ++++++++---
content/kb/docs/web/ajax-quickstart_ru.html | 246 ++++++++---
content/kb/docs/web/ajax-quickstart_zh_CN.html | 246 ++++++++---
content/kb/docs/web/applets.html | 44 +-
content/kb/docs/web/applets_ja.html | 44 +-
content/kb/docs/web/applets_pt_BR.html | 44 +-
content/kb/docs/web/applets_ru.html | 44 +-
content/kb/docs/web/applets_zh_CN.html | 44 +-
content/kb/docs/web/framework-adding-support.html | 64 ++-
.../kb/docs/web/framework-adding-support_ja.html | 64 ++-
.../docs/web/framework-adding-support_pt_BR.html | 64 ++-
.../kb/docs/web/framework-adding-support_ru.html | 64 ++-
.../docs/web/framework-adding-support_zh_CN.html | 64 ++-
content/kb/docs/web/grails-quickstart.html | 96 ++++-
content/kb/docs/web/grails-quickstart_ja.html | 96 ++++-
content/kb/docs/web/grails-quickstart_pt_BR.html | 96 ++++-
content/kb/docs/web/grails-quickstart_ru.html | 96 ++++-
content/kb/docs/web/grails-quickstart_zh_CN.html | 96 ++++-
content/kb/docs/web/hibernate-webapp.html | 207 ++++++---
content/kb/docs/web/hibernate-webapp_ja.html | 207 ++++++---
content/kb/docs/web/hibernate-webapp_pt_BR.html | 207 ++++++---
content/kb/docs/web/hibernate-webapp_ru.html | 207 ++++++---
content/kb/docs/web/hibernate-webapp_zh_CN.html | 207 ++++++---
content/kb/docs/web/js-toolkits-dojo.html | 177 +++++---
content/kb/docs/web/js-toolkits-dojo_ja.html | 178 +++++---
content/kb/docs/web/js-toolkits-dojo_pt_BR.html | 177 +++++---
content/kb/docs/web/js-toolkits-dojo_ru.html | 177 +++++---
content/kb/docs/web/js-toolkits-dojo_zh_CN.html | 177 +++++---
content/kb/docs/web/js-toolkits-jquery.html | 243 ++++++++---
content/kb/docs/web/js-toolkits-jquery_ja.html | 285 +++++++++----
content/kb/docs/web/js-toolkits-jquery_pt_BR.html | 257 +++++++++---
content/kb/docs/web/js-toolkits-jquery_ru.html | 257 +++++++++---
content/kb/docs/web/js-toolkits-jquery_zh_CN.html | 257 +++++++++---
content/kb/docs/web/jsf-jpa-weblogic.html | 132 ++++--
content/kb/docs/web/jsf-jpa-weblogic_ja.html | 134 ++++--
content/kb/docs/web/jsf-jpa-weblogic_pt_BR.html | 132 ++++--
content/kb/docs/web/jsf-jpa-weblogic_ru.html | 132 ++++--
content/kb/docs/web/jsf-jpa-weblogic_zh_CN.html | 132 ++++--
content/kb/docs/web/jsf20-crud.html | 442 ++++++++++++++------
content/kb/docs/web/jsf20-crud_ja.html | 442 ++++++++++++++------
content/kb/docs/web/jsf20-crud_pt_BR.html | 391 +++++++++++++----
content/kb/docs/web/jsf20-crud_ru.html | 391 +++++++++++++----
content/kb/docs/web/jsf20-crud_zh_CN.html | 391 +++++++++++++----
content/kb/docs/web/jsf20-intro.html | 464 ++++++++++++++-------
content/kb/docs/web/jsf20-intro_ja.html | 464 ++++++++++++++-------
content/kb/docs/web/jsf20-intro_pt_BR.html | 416 +++++++++++++-----
content/kb/docs/web/jsf20-intro_ru.html | 410 +++++++++++++-----
content/kb/docs/web/jsf20-intro_zh_CN.html | 410 +++++++++++++-----
content/kb/docs/web/jsf20-support.html | 124 ++----
content/kb/docs/web/jsf20-support_ca.html | 73 +---
content/kb/docs/web/jsf20-support_ja.html | 124 ++----
content/kb/docs/web/jsf20-support_pt_BR.html | 57 +--
content/kb/docs/web/jsf20-support_ru.html | 57 +--
content/kb/docs/web/jsf20-support_zh_CN.html | 57 +--
content/kb/docs/web/mysql-webapp.html | 346 +++++++++++----
content/kb/docs/web/mysql-webapp_ja.html | 352 ++++++++++++----
content/kb/docs/web/mysql-webapp_pt_BR.html | 352 ++++++++++++----
content/kb/docs/web/mysql-webapp_ru.html | 346 +++++++++++----
content/kb/docs/web/mysql-webapp_zh_CN.html | 346 +++++++++++----
content/kb/docs/web/oracle-cloud.html | 218 ++++++++--
content/kb/docs/web/oracle-cloud_ja.html | 218 ++++++++--
content/kb/docs/web/oracle-cloud_pt_BR.html | 218 ++++++++--
content/kb/docs/web/oracle-cloud_ru.html | 218 ++++++++--
content/kb/docs/web/oracle-cloud_zh_CN.html | 218 ++++++++--
content/kb/docs/web/quickstart-webapps-spring.html | 268 +++++++++---
.../kb/docs/web/quickstart-webapps-spring_ja.html | 268 +++++++++---
.../docs/web/quickstart-webapps-spring_pt_BR.html | 268 +++++++++---
.../kb/docs/web/quickstart-webapps-spring_ru.html | 268 +++++++++---
.../docs/web/quickstart-webapps-spring_zh_CN.html | 268 +++++++++---
content/kb/docs/web/quickstart-webapps-struts.html | 169 ++++++--
.../kb/docs/web/quickstart-webapps-struts_ja.html | 169 ++++++--
.../docs/web/quickstart-webapps-struts_pt_BR.html | 169 ++++++--
.../kb/docs/web/quickstart-webapps-struts_ru.html | 169 ++++++--
.../docs/web/quickstart-webapps-struts_zh_CN.html | 169 ++++++--
content/kb/docs/web/quickstart-webapps-wicket.html | 56 +--
.../kb/docs/web/quickstart-webapps-wicket_ja.html | 56 +--
.../docs/web/quickstart-webapps-wicket_pt_BR.html | 56 +--
.../kb/docs/web/quickstart-webapps-wicket_ru.html | 56 +--
.../docs/web/quickstart-webapps-wicket_zh_CN.html | 56 +--
content/kb/docs/web/quickstart-webapps.html | 49 ++-
content/kb/docs/web/quickstart-webapps_ja.html | 49 ++-
content/kb/docs/web/quickstart-webapps_pt_BR.html | 49 ++-
content/kb/docs/web/quickstart-webapps_ru.html | 49 ++-
content/kb/docs/web/quickstart-webapps_zh_CN.html | 49 ++-
content/kb/docs/web/security-webapps.html | 296 ++++++++++---
content/kb/docs/web/security-webapps_ja.html | 296 ++++++++++---
content/kb/docs/web/security-webapps_pt_BR.html | 296 ++++++++++---
content/kb/docs/web/security-webapps_ru.html | 296 ++++++++++---
content/kb/docs/web/security-webapps_zh_CN.html | 296 ++++++++++---
91 files changed, 13359 insertions(+), 4580 deletions(-)
diff --git a/content/kb/docs/web/ajax-quickstart.html b/content/kb/docs/web/ajax-quickstart.html
index 3a1eb3b..6948113 100644
--- a/content/kb/docs/web/ajax-quickstart.html
+++ b/content/kb/docs/web/ajax-quickstart.html
@@ -135,12 +135,6 @@
<div class="paragraph">
<p>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 p [...]
</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/netbeans-stamp-80-74-73.png" alt="netbeans stamp 80 74 73">
-</div>
-<div class="title">Figure 1. Content on this page applies to the NetBeans IDE 7.2, 7.3, 7.4 and 8.0</div>
-</div>
<div class="paragraph">
<p><strong>To complete this tutorial, you need the following software and resources.</strong></p>
</div>
@@ -174,9 +168,13 @@ version 7.x or 8.x</p></td>
</tr>
</tbody>
</table>
-<div class="paragraph">
-<p><strong>Notes:</strong></p>
-</div>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
<div class="ulist">
<ul>
<li>
@@ -190,6 +188,10 @@ version 7.x or 8.x</p></td>
</li>
</ul>
</div>
+</td>
+</tr>
+</table>
+</div>
</div>
</div>
<div class="sect1">
@@ -202,7 +204,7 @@ version 7.x or 8.x</p></td>
<div class="content">
<img src="images/sample-app.png" alt="sample app">
</div>
-<div class="title">Figure 2. Sample application displayed in browser</div>
+<div class="title">Figure 1. Sample application displayed in browser</div>
</div>
<div class="paragraph">
<p>Implementing auto-completion in a search field is something that can be performed using Ajax. Ajax works by employing an <code>XMLHttpRequest</code> object to pass requests and responses asynchronously between the client and server. The following diagram illustrates the process flow of the communication that takes place between the client and server.</p>
@@ -211,7 +213,7 @@ version 7.x or 8.x</p></td>
<div class="content">
<img src="images/ajax-process-flow.png" alt="ajax process flow">
</div>
-<div class="title">Figure 3. Ajax process flow diagram</div>
+<div class="title">Figure 2. Ajax process flow diagram</div>
</div>
<div class="paragraph">
<p>The process flow of the diagram can be described by the following steps:</p>
@@ -249,13 +251,31 @@ version 7.x or 8.x</p></td>
<p>Choose File > New Project. Under Categories, select Java Web. Under Projects, select Web Application then click Next.</p>
</li>
<li>
-<p>In the Name and Location panel, enter <code>MyAjaxApp</code> 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"]</p>
+<p>In the Name and Location panel, enter <code>MyAjaxApp</code> 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.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/java-name-location.png" alt="java name location">
+</div>
+<div class="title">Figure 3. Specify the name and location for your application project</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>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"]</p>
+<p>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.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/java-server-settings.png" alt="java server settings">
+</div>
+<div class="title">Figure 4. Specify the server your application will be deployed to</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Accept other default settings and click Finish. The project is generated in your file system and opens in the IDE.</p>
</li>
@@ -271,7 +291,7 @@ image::images/java-server-settings.png[title="Specify the server your applicatio
<div class="content">
<img src="images/java-proj-win.png" alt="java proj win">
</div>
-<div class="title">Figure 4. Projects window displays MyAjaxApp project</div>
+<div class="title">Figure 5. Projects window displays MyAjaxApp project</div>
</div>
<div class="paragraph">
<p>Before beginning to code, quickly try running the application to ensure that configuration between the IDE, your server, and browser is set up properly.</p>
@@ -292,7 +312,7 @@ image::images/java-server-settings.png[title="Specify the server your applicatio
<div class="content">
<img src="images/palette.png" alt="palette">
</div>
-<div class="title">Figure 5. Palette displaying HTML elements</div>
+<div class="title">Figure 6. Palette displaying HTML elements</div>
</div>
<div class="paragraph">
<p>Now that you are certain your environment is set up correctly, begin by transforming your index page into the auto-completion interface that will be viewed by users.</p>
@@ -315,7 +335,7 @@ image::images/java-server-settings.png[title="Specify the server your applicatio
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><!DOCTYPE html>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><!DOCTYPE html>
<html>
<head>
@@ -329,7 +349,7 @@ image::images/java-server-settings.png[title="Specify the server your applicatio
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>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 <code><h1></code> tags:</p>
</li>
@@ -346,7 +366,7 @@ image::images/java-server-settings.png[title="Specify the server your applicatio
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>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 <code><p></code> tags that you just added. The Insert Form dialog box opens. Specify the following:</p>
<div class="ulist">
@@ -358,19 +378,24 @@ image::images/java-server-settings.png[title="Specify the server your applicatio
<p>Method: GET</p>
</li>
<li>
-<p>Name: autofillform
-image::images/insert-form.png[title="Insert form dialog"]</p>
+<p>Name: autofillform</p>
</li>
</ul>
</div>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-form.png" alt="insert form">
+</div>
+<div class="title">Figure 7. Insert form dialog</div>
+</div>
<div class="paragraph">
<p>Click OK. The HTML <code><form></code> tags are inserted into the page containing the attributes you specified. (GET is applied by default, and so is not explicitly declared.)</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>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 <code><form></code> tags. The Insert Table dialog box opens. Specify the following:</p>
<div class="ulist">
@@ -385,12 +410,21 @@ image::images/insert-form.png[title="Insert form dialog"]</p>
<p>Border Size: 0</p>
</li>
<li>
-<p>Cell Padding: 5
-image::images/insert-table.png[title="Insert table dialog"]</p>
+<p>Cell Padding: 5</p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-table.png" alt="insert table">
+</div>
+<div class="title">Figure 8. Insert table dialog</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Right-click inside the Source Editor and choose Format. This tidies up the code. Your form should now display similar to that below:</p>
</li>
@@ -398,7 +432,7 @@ image::images/insert-table.png[title="Insert table dialog"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><form name="autofillform" action="autocomplete">
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><form name="autofillform" action="autocomplete">
<table border="0" cellpadding="5">
<thead>
<tr>
@@ -421,7 +455,7 @@ image::images/insert-table.png[title="Insert table dialog"]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Within the first row of the table, type the following text into the first column (changes in <strong>bold</strong>):</p>
</li>
@@ -429,11 +463,11 @@ image::images/insert-table.png[title="Insert table dialog"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><td>*<strong>Composer Name:</strong>*</td></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><td>*<strong>Composer Name:</strong>*</td></code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>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 <strong>bold</strong>):</p>
</li>
@@ -441,7 +475,7 @@ image::images/insert-table.png[title="Insert table dialog"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><td>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><td>
*<input type="text"
size="40"
id="complete-field"
@@ -450,8 +484,13 @@ image::images/insert-table.png[title="Insert table dialog"]</p>
</div>
</div>
<div class="paragraph">
-<p>When you type, try using the IDE’s built-in code completion support. For example, type in <code><i</code>, 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"]</p>
+<p>When you type, try using the IDE’s built-in code completion support. For example, type in <code><i</code>, 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.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-completion.png" alt="code completion">
+</div>
+<div class="title">Figure 9. Press Ctrl-Space in the editor to invoke code completion and documentation support</div>
</div>
<div class="paragraph">
<p>The <code>onkeyup</code> attribute that you typed in above points to a JavaScript function named <code>doCompletion()</code>. 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 <a href="#flow-diagram">flow diagram</a> above.</p>
@@ -469,7 +508,7 @@ image::images/code-completion.png[title="Press Ctrl-Space in the editor to invok
<div class="content">
<img src="images/javascript-options.png" alt="javascript options">
</div>
-<div class="title">Figure 6. JavaScript Hint 0ptions in Options window</div>
+<div class="title">Figure 10. JavaScript Hint 0ptions in Options window</div>
</div>
<div class="paragraph">
<p>Add a JavaScript file to the application and begin implementing <code>doCompletion()</code>.</p>
@@ -489,7 +528,7 @@ image::images/code-completion.png[title="Press Ctrl-Space in the editor to invok
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var req;
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">var req;
var isIE;
function init() {
@@ -521,7 +560,7 @@ function initRequest() {
<p>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 <a href="http://www.quirksmode.org/js/detect.html">browser detect script</a> from <a href="http://www.quirksmode.org">http://www.quirksmode.org</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Switch back to the index page and add a reference to the JavaScript file between the <code><head></code> tags.</p>
</li>
@@ -529,14 +568,14 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><script type="text/javascript" src="javascript.js"></script></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><script type="text/javascript" src="javascript.js"></script></code></pre>
</div>
</div>
<div class="paragraph">
<p>You can quickly toggle between pages opened in the Source Editor by pressing Ctrl-Tab.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Insert a call to <code>init()</code> in the opening <code><body></code> tag.</p>
</li>
@@ -544,7 +583,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><body *onload="init()"*></code></pre>
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript"><body *onload="init()"*></code></pre>
</div>
</div>
<div class="paragraph">
@@ -584,7 +623,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var url = "autocomplete?action=complete&amp;id=" + escape(completeField.value);</code></pre>
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">var url = "autocomplete?action=complete&amp;id=" + escape(completeField.value);</code></pre>
</div>
</div>
<div class="ulist">
@@ -599,7 +638,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">req.open("GET", url, true);</code></pre>
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">req.open("GET", url, true);</code></pre>
</div>
</div>
<div class="paragraph">
@@ -607,7 +646,7 @@ function initRequest() {
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">req.onreadystatechange = callback;</code></pre>
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">req.onreadystatechange = callback;</code></pre>
</div>
</div>
<div class="paragraph">
@@ -752,7 +791,7 @@ public class ComposerData {
<p>When you click Finish the IDE creates the class and opens the file in the Source Editor.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>In the Source Editor, paste in the following code:</p>
</li>
@@ -809,23 +848,39 @@ public class Composer {
<p>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.)</p>
</li>
<li>
-<p>Name the servlet <code>AutoCompleteServlet</code>, and choose <code>com.ajax</code> from the drop-down list in the Package field. Click Next.
-image::images/newservlet-name-location.png[]</p>
+<p>Name the servlet <code>AutoCompleteServlet</code>, and choose <code>com.ajax</code> from the drop-down list in the Package field. Click Next.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newservlet-name-location.png" alt="newservlet name location">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>In the Configure Servlet Deployment panel, change the URL pattern to <strong><code>/autocomplete</code></strong> so that it matches the URL that you previously set in the <code>XMLHttpRequest</code> object.
-image::images/newservlet-configure-deployment.png[]</p>
+<p>In the Configure Servlet Deployment panel, change the URL pattern to <strong><code>/autocomplete</code></strong> so that it matches the URL that you previously set in the <code>XMLHttpRequest</code> object.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newservlet-configure-deployment.png" alt="newservlet configure deployment">
+</div>
+</div>
<div class="paragraph">
<p>This panel saves you the step of needing to manually add these details to the deployment descriptor.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>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 <code>@WebServlet</code> annotation instead of in a deployment descriptor. The project will still work if you use the <code>@WebServlet</code> annotation instead of a deployment descriptor.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Click Finish. The servlet is created and opens in the Source Editor.</p>
</li>
@@ -840,16 +895,38 @@ image::images/newservlet-configure-deployment.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Place your cursor beneath the <code>AutoCompleteServlet</code> 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"]</p>
+<p>Place your cursor beneath the <code>AutoCompleteServlet</code> class declaration in the Source Editor. Press Alt-Insert (Ctrl-I on Mac) to open the Generate Code popup menu.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-code.png" alt="insert code">
+</div>
+<div class="title">Figure 11. Insert Code popup menu displayed in Source Editor</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>Choose Override Method. In the dialog that displays, all classes that <code>AutoCompleteServlet</code> inherits from are displayed. Expand the GenericServlet node and select <code>init(Servlet Config config)</code>.
-image::images/new-override.png[title="Override dialog lists inherited classes"]</p>
+<p>Choose Override Method. In the dialog that displays, all classes that <code>AutoCompleteServlet</code> inherits from are displayed. Expand the GenericServlet node and select <code>init(Servlet Config config)</code>.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-override.png" alt="new override">
+</div>
+<div class="title">Figure 12. Override dialog lists inherited classes</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Click OK. The <code>init()</code> method is added in the Source Editor.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Add a variable for a <code>ServletContext</code> object and modify <code>init()</code> (changes in <strong>bold</strong>):</p>
</li>
@@ -866,15 +943,20 @@ public void init(ServletConfig *config*) throws ServletException {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
-<p>Add an import statement for <code>ServletContext</code>. 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"]</p>
+<p>Add an import statement for <code>ServletContext</code>. You can do this by clicking on the lightbulb icon that displays in the left margin of the Source Editor</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/import-hint.png" alt="import hint">
+</div>
+<div class="title">Figure 13. Import hints display in left margin of the Source Editor</div>
+</div>
<div class="paragraph">
-<p>The <code>doGet()</code> 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.</p>
+<p>The <code>doGet()</code> 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 (<span class="image"><img src="images/expand-icon.png" alt="expand icon"></span>) in the left margin.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -890,8 +972,14 @@ private HashMap composers = compData.getComposers();</code></pre>
</div>
</div>
<div class="paragraph">
-<p>This creates a <code>HashMap</code> of all composer data, which is then employed by <code>doGet()</code>.
-2. Scroll down to <code>doGet()</code> and implement the method as follows:</p>
+<p>This creates a <code>HashMap</code> of all composer data, which is then employed by <code>doGet()</code>.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Scroll down to <code>doGet()</code> and implement the method as follows:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -967,7 +1055,7 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><composers>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><composers>
<composer>
<id>12</id>
<firstName>Antonin</firstName>
@@ -1033,7 +1121,7 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">function callback() {
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
parseMessages(req.responseXML);
@@ -1100,7 +1188,7 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><tr>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><tr>
*<td id="auto-row" colspan="2">
<table id="complete-table" />
</td>*
@@ -1108,18 +1196,24 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
</div>
</div>
<div class="paragraph">
-<p>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 <code>javascript.js</code> in the Source Editor and the following three variables to the top of the file.</p>
+<p>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.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Open <code>javascript.js</code> in the Source Editor and the following three variables to the top of the file.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">var completeField;
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">var completeField;
var completeTable;
var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Add the following lines (in <strong>bold</strong>) to the <code>init()</code> function.</p>
</li>
@@ -1127,7 +1221,7 @@ var autoRow;</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">function init() {
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">function init() {
completeField = document.getElementById("complete-field");
*completeTable = document.getElementById("complete-table");
autoRow = document.getElementById("auto-row");
@@ -1136,12 +1230,18 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>One purpose of <code>init()</code> is to make elements inside the index page accessible to other functions that will modify the index page’s DOM.
-4. Add <code>appendComposer()</code> to <code>javascript.js</code>.</p>
+<p>One purpose of <code>init()</code> is to make elements inside the index page accessible to other functions that will modify the index page’s DOM.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Add <code>appendComposer()</code> to <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">function appendComposer(firstName,lastName,composerId) {
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">function appendComposer(firstName,lastName,composerId) {
var row;
var cell;
@@ -1170,12 +1270,18 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>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 <code>complete-table</code> element.
-5. Add <code>getElementY()</code> to <code>javascript.js</code>.</p>
+<p>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 <code>complete-table</code> element.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>Add <code>getElementY()</code> to <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">function getElementY(element){
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">function getElementY(element){
var targetTop = 0;
@@ -1198,7 +1304,7 @@ var autoRow;</code></pre>
<p><strong>Note:</strong> See <a href="http://www.quirksmode.org/js/findpos.html">this explanation</a> of <code>offset</code> on <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Add <code>clearTable()</code> to <code>javascript.js</code>.</p>
</li>
@@ -1206,7 +1312,7 @@ var autoRow;</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">function clearTable() {
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">function clearTable() {
if (completeTable.getElementsByTagName("tr").length > 0) {
completeTable.style.display = 'none';
for (loop = completeTable.childNodes.length -1; loop >= 0 ; loop--) {
@@ -1217,12 +1323,18 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>This function sets the display of the <code>complete-table</code> element to 'none', (i.e., makes it invisible), and it removes any existing composer name entries that were created.
-7. Modify the <code>callback()</code> function to call <code>clearTable()</code> 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.</p>
+<p>This function sets the display of the <code>complete-table</code> element to 'none', (i.e., makes it invisible), and it removes any existing composer name entries that were created.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
+<li>
+<p>Modify the <code>callback()</code> function to call <code>clearTable()</code> 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.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">function callback() {
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">function callback() {
*clearTable();*
@@ -1235,7 +1347,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Add <code>parseMessages()</code> to <code>javascript.js</code>.</p>
</li>
@@ -1243,7 +1355,7 @@ var autoRow;</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">function parseMessages(responseXML) {
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">function parseMessages(responseXML) {
// no matches returned
if (responseXML == null) {
@@ -1275,7 +1387,7 @@ var autoRow;</code></pre>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><tr>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><tr>
<td class="popupCell">
<a class="popupItem" href="autocomplete?action=lookup&amp;id=12">Antonin Dvorak</a>
</td>
@@ -1351,10 +1463,14 @@ var autoRow;</code></pre>
<p><strong>Note.</strong> You will need to change the link to return to the index page if your index page is <code>index.jsp</code> .</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Create another JSP file in the project’s Web Pages folder. Name the file <code>error.jsp</code>.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Replace the placeholder code in <code>error.jsp</code> with the following code:</p>
</li>
@@ -1392,11 +1508,16 @@ var autoRow;</code></pre>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>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"]</p>
+<p>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.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/no-css.png" alt="no css">
+</div>
+<div class="title">Figure 14. Successful deployment without stylesheet</div>
+</div>
<div class="paragraph">
<p>To add a stylesheet to your application, simply create a <code>.css</code> file and link to it from your presentation page(s). When you work in <code>.css</code> files, the IDE provides you with code completion support, as well as the following windows to help you generate and edit stylesheet rules.</p>
</div>
@@ -1430,7 +1551,7 @@ image::images/no-css.png[title="Successful deployment without stylesheet"]</p>
<p>The new file is created and opens in the editor.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Type the following rules in <code>stylesheet.css</code> 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.</p>
</li>
@@ -1438,7 +1559,7 @@ image::images/no-css.png[title="Successful deployment without stylesheet"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">body {
+<pre class="prettyprint highlight"><code class="language-css" data-lang="css">body {
font-family: Verdana, Arial, sans-serif;
font-size: smaller;
padding: 50px;
@@ -1503,18 +1624,23 @@ a:hover {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
-<p>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"]</p>
+<p>Open the CSS Styles window by choosing Window > Web > CSS Styles.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/css-styles-window.png" alt="css styles window">
+</div>
+<div class="title">Figure 15. CSS Styles window displaying h1 rule properties</div>
+</div>
<div class="paragraph">
-<p>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 A [...]
+<p>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 (<span class="image"><img src="images/newcssrule.png" alt="newcssrule" title="New CSS Property icon"></span>) in the toolbar of the upper pane. You can modify rules in the lower pane by editing the pro [...]
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Switch to the index page in the Source Editor, and add a reference to the stylesheet between the <code><head></code> tags.</p>
</li>
@@ -1522,11 +1648,11 @@ image::images/css-styles-window.png[title="CSS Styles window displaying h1 rule
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java"><link rel="stylesheet" type="text/css" href="stylesheet.css"></code></pre>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><link rel="stylesheet" type="text/css" href="stylesheet.css"></code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Add the <code>popupBox</code> class that is defined in the stylesheet to the <code>complete-table</code> element (changes in <strong>bold</strong>).</p>
</li>
@@ -1534,7 +1660,7 @@ image::images/css-styles-window.png[title="CSS Styles window displaying h1 rule
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><tr>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><tr>
<td id="auto-row" colspan="2">
<table id="complete-table" *class="popupBox"* />
</td>
@@ -1548,7 +1674,7 @@ image::images/css-styles-window.png[title="CSS Styles window displaying h1 rule
<div class="content">
<img src="images/css-completion.png" alt="css completion">
</div>
-<div class="title">Figure 7. CSS code completion in the editor</div>
+<div class="title">Figure 16. CSS code completion in the editor</div>
</div>
<div class="paragraph">
<p>As indicated in <code>stylesheet.css</code>, this rule positions the <code>complete-table</code> element so that it displays slightly to the right of its parent element.</p>
@@ -1587,7 +1713,7 @@ image::images/css-styles-window.png[title="CSS Styles window displaying h1 rule
<p><strong>Note:</strong> This option displays under the Common tab for the GlassFish server. For Tomcat, it resides under the Connection tab.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Click Close.</p>
</li>
@@ -1603,7 +1729,7 @@ image::images/css-styles-window.png[title="CSS Styles window displaying h1 rule
<div class="content">
<img src="images/http-monitor.png" alt="http monitor">
</div>
-<div class="title">Figure 8. HTTP Server monitor displays in the IDE</div>
+<div class="title">Figure 17. HTTP Server monitor displays in the IDE</div>
</div>
<div class="paragraph">
<p>You can verify the XML data that is sent from the server as a result of the asynchronous request made when a user enters a character in the auto-complete field.</p>
@@ -1622,7 +1748,7 @@ image::images/css-styles-window.png[title="CSS Styles window displaying h1 rule
<div class="content">
<img src="images/xml-data.png" alt="xml data">
</div>
-<div class="title">Figure 9. HTTP Server monitor displays in the IDE</div>
+<div class="title">Figure 18. HTTP Server monitor displays in the IDE</div>
</div>
</div>
<div class="sect2">
diff --git a/content/kb/docs/web/ajax-quickstart_ja.html b/content/kb/docs/web/ajax-quickstart_ja.html
index caea1b2..d0ab80a 100644
--- a/content/kb/docs/web/ajax-quickstart_ja.html
+++ b/content/kb/docs/web/ajax-quickstart_ja.html
@@ -249,13 +249,31 @@ _ _
<p>「ファイル」>「新規プロジェクト」を選択します。「カテゴリ」から「Java Web」を選択します。「プロジェクト」で「Webアプリケーション」を選択して、「次」をクリックします。</p>
</li>
<li>
-<p>「名前と場所」パネルでプロジェクト名として「<code>MyAjaxApp</code>」と入力します。「プロジェクトの場所」フィールドでコンピュータ上でのプロジェクトの場所を指定できます。他のオプションはデフォルトのままにして、「次」をクリックします。
-image::images/java-name-location.png[title="アプリケーション・プロジェクトでの名前と場所の指定"]</p>
+<p>「名前と場所」パネルでプロジェクト名として「<code>MyAjaxApp</code>」と入力します。「プロジェクトの場所」フィールドでコンピュータ上でのプロジェクトの場所を指定できます。他のオプションはデフォルトのままにして、「次」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/java-name-location.png" alt="java name location">
+</div>
+<div class="title">Figure 4. アプリケーション・プロジェクトでの名前と場所の指定</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>「サーバーと設定」パネルで、アプリケーションをデプロイするサーバーを選択します。IDEに登録されているサーバーのみ表示されます。
-image::images/java-server-settings.png[title="アプリケーションのデプロイ先サーバーの指定"]</p>
+<p>「サーバーと設定」パネルで、アプリケーションをデプロイするサーバーを選択します。IDEに登録されているサーバーのみ表示されます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/java-server-settings.png" alt="java server settings">
+</div>
+<div class="title">Figure 5. アプリケーションのデプロイ先サーバーの指定</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>その他のデフォルト設定を受け入れ、「終了」をクリックします。プロジェクトがファイル・システムに生成され、IDEで開きます。</p>
</li>
@@ -271,7 +289,7 @@ image::images/java-server-settings.png[title="アプリケーションのデプ
<div class="content">
<img src="images/java-proj-win.png" alt="java proj win">
</div>
-<div class="title">Figure 4. MyAjaxAppプロジェクトが表示された「プロジェクト」ウィンドウ</div>
+<div class="title">Figure 6. MyAjaxAppプロジェクトが表示された「プロジェクト」ウィンドウ</div>
</div>
<div class="paragraph">
<p>コーディングを始める前に、アプリケーションを実行してみて、IDE、サーバー、ブラウザの間の構成が正しく設定されていることを確認します。</p>
@@ -292,7 +310,7 @@ image::images/java-server-settings.png[title="アプリケーションのデプ
<div class="content">
<img src="images/palette.png" alt="palette">
</div>
-<div class="title">Figure 5. HTML要素が表示されたパレット</div>
+<div class="title">Figure 7. HTML要素が表示されたパレット</div>
</div>
<div class="paragraph">
<p>環境が正しく設定されていることを確認できたら、まずindexページを、ユーザーに表示する自動補完インタフェースに変更します。</p>
@@ -329,7 +347,7 @@ image::images/java-server-settings.png[title="アプリケーションのデプ
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>テキスト・フィールドの目的を説明するテキストを追加します。次のテキストをコピーして、`<h1>`タグのすぐ下に貼り付けることもできます。</p>
</li>
@@ -346,7 +364,7 @@ image::images/java-server-settings.png[title="アプリケーションのデプ
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>ページにHTMLフォームを追加します。この操作を行うには、IDEのパレットに表示されている要素を使用します。パレットが開いていない場合は、メイン・メニューから「ウィンドウ」>「パレット」を選択します。次に「HTMLフォーム」の下にある「フォーム」要素をクリックし、ページ内に追加した`<p>`タグの下までドラッグします。「挿入フォーム」ダイアログ・ボックスが表示されます。次の値を指定します。</p>
<div class="ulist">
@@ -358,19 +376,24 @@ image::images/java-server-settings.png[title="アプリケーションのデプ
<p>メソッド: GET</p>
</li>
<li>
-<p>名前: autofillform
-image::images/insert-form.png[title="「挿入フォーム」ダイアログ"]</p>
+<p>名前: autofillform</p>
</li>
</ul>
</div>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-form.png" alt="insert form">
+</div>
+<div class="title">Figure 8. 「挿入フォーム」ダイアログ</div>
+</div>
<div class="paragraph">
<p>「OK」をクリックします。指定した属性を含むHTMLの`<form>`タグがページに挿入されます。(GETはデフォルトで適用されるので、明示的に宣言しません。)</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>HTML表をページに追加します。パレットの「HTML」カテゴリの下で「表」要素をクリックし、`<form>`タグの間の位置までドラッグします。「挿入表」ダイアログ・ボックスが開きます。次の値を指定します。</p>
<div class="ulist">
@@ -385,12 +408,21 @@ image::images/insert-form.png[title="「挿入フォーム」ダイアログ"]</
<p>境界線のサイズ: 0</p>
</li>
<li>
-<p>セルのパディング: 5
-image::images/insert-table.png[title="「挿入表」ダイアログ"]</p>
+<p>セルのパディング: 5</p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-table.png" alt="insert table">
+</div>
+<div class="title">Figure 9. 「挿入表」ダイアログ</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>ソース・エディタ内を右クリックし、「フォーマット」を選択します。これでコードの体裁が整います。フォームは次のようになります。</p>
</li>
@@ -421,7 +453,7 @@ image::images/insert-table.png[title="「挿入表」ダイアログ"]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>表の1行目の1列目に次のテキストを入力します(*太字*部分が変更箇所)。</p>
</li>
@@ -433,7 +465,7 @@ image::images/insert-table.png[title="「挿入表」ダイアログ"]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>1行目の2列目では、パレットから「テキスト入力」フィールドをドラッグしないで、次のコードを手動で入力します(*太字*部分が変更箇所)。</p>
</li>
@@ -450,8 +482,13 @@ image::images/insert-table.png[title="「挿入表」ダイアログ"]</p>
</div>
</div>
<div class="paragraph">
-<p>入力するときは、IDEに組み込まれているコード補完サポートを使用してみてください。たとえば、「<code><i</code>」と入力して[Ctrl]-[Space]を押します。カーソルの下に候補のリストが表示され、選択されている要素の説明が上のボックスに表示されます。ソース・エディタでコーディングしているときはいつでも[Ctrl]-[Space]を押して候補を表示できます。候補が1つのみの場合は、[Ctrl]-[Space]を押すと要素名が自動的に補完されます。
-image::images/code-completion.png[title="エディタでの[Ctrl]-[Space]の押下によるコード補完およびドキュメントのサポートの呼出し"]</p>
+<p>入力するときは、IDEに組み込まれているコード補完サポートを使用してみてください。たとえば、「<code><i</code>」と入力して[Ctrl]-[Space]を押します。カーソルの下に候補のリストが表示され、選択されている要素の説明が上のボックスに表示されます。ソース・エディタでコーディングしているときはいつでも[Ctrl]-[Space]を押して候補を表示できます。候補が1つのみの場合は、[Ctrl]-[Space]を押すと要素名が自動的に補完されます。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-completion.png" alt="code completion">
+</div>
+<div class="title">Figure 10. エディタでの[Ctrl]-[Space]の押下によるコード補完およびドキュメントのサポートの呼出し</div>
</div>
<div class="paragraph">
<p>入力した`onkeyup`属性はJavaScript関数`doCompletion()`を指しています。この関数は、フォームのテキスト・フィールド内でキーが押されるたびにコールされ、Ajaxの<a href="#flow-diagram">フロー図</a>に示したJavaScriptコールに対応します。</p>
@@ -469,7 +506,7 @@ image::images/code-completion.png[title="エディタでの[Ctrl]-[Space]の押
<div class="content">
<img src="images/javascript-options.png" alt="javascript options">
</div>
-<div class="title">Figure 6. 「オプション」ウィンドウの「JavaScript」ヒント・オプション</div>
+<div class="title">Figure 11. 「オプション」ウィンドウの「JavaScript」ヒント・オプション</div>
</div>
<div class="paragraph">
<p>アプリケーションにJavaScriptファイルを追加し、`doCompletion()`の実装を始めます。</p>
@@ -521,7 +558,7 @@ function initRequest() {
<p>上のコードは、Firefox 3およびInternet Explorerバージョン6と7の単純なブラウザ互換性チェックを行います。互換性の問題に対してさらに堅牢なコードを取り込むには、<a href="http://www.quirksmode.org">http://www.quirksmode.org</a>の<a href="http://www.quirksmode.org/js/detect.html">ブラウザ検出スクリプト</a>を使用することを検討してください。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>indexページに戻り、JavaScriptファイルへの参照を`<head>`タグの間に追加します。</p>
</li>
@@ -536,7 +573,7 @@ function initRequest() {
<p>[Ctrl]-[Tab]を押すと、ソース・エディタ内で開いているページ間を簡単に切り替えることができます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p><code>init()`へのコールを開始</code><body>`タグ内に挿入します。</p>
</li>
@@ -754,7 +791,7 @@ public class ComposerData {
<p>「終了」をクリックすると、IDEによってクラスが作成され、ファイルがソース・エディタで開きます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>ソース・エディタ内に、次のコードを貼り付けます。</p>
</li>
@@ -813,23 +850,39 @@ public class Composer {
<p>「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「新規」→「サーブレット」を選択して新規サーブレット・ウィザードを開きます。(「サーブレット」がデフォルトでポップアップ・メニューに表示されない場合は、「その他」を選択し、「Web」カテゴリから「サーブレット」を選択します。)</p>
</li>
<li>
-<p>サーブレット名を`AutoCompleteServlet`にし、「パッケージ」フィールドのドロップダウン・リストから「<code>com.ajax</code>」を選択します。「次」をクリックします。
-image::images/newservlet-name-location.png[]</p>
+<p>サーブレット名を`AutoCompleteServlet`にし、「パッケージ」フィールドのドロップダウン・リストから「<code>com.ajax</code>」を選択します。「次」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newservlet-name-location.png" alt="newservlet name location">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>「サーブレット・デプロイメントを構成」パネルで、URLパターンを*<code>/autocomplete</code>*にし、`XMLHttpRequest`オブジェクトで以前に設定したURLと一致するようにします。
-image::images/newservlet-configure-deployment.png[]</p>
+<p>「サーブレット・デプロイメントを構成」パネルで、URLパターンを*<code>/autocomplete</code>*にし、`XMLHttpRequest`オブジェクトで以前に設定したURLと一致するようにします。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newservlet-configure-deployment.png" alt="newservlet configure deployment">
+</div>
+</div>
<div class="paragraph">
<p>このパネルによって、これらの詳細をデプロイメント・ディスクリプタに手動で追加する必要がなくなります。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>オプションで、「サーブレット情報をデプロイメント・ディスクリプタに追加」を選択します。これにより、プロジェクトがダウンロードしたサンプルと同じになります。最近のバージョンのIDEでは、サーブレットはデフォルトで`@WebServlet`注釈によって登録され、デプロイメント・ディスクリプタには登録されません。デプロイメント・ディスクリプタのかわりに`@WebServlet`注釈を使用した場合も、プロジェクトは引続き機能します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>「終了」をクリックします。サーブレットが作成され、ソース・エディタで開きます。</p>
</li>
@@ -844,16 +897,38 @@ image::images/newservlet-configure-deployment.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>ソース・エディタで、`AutoCompleteServlet`クラスの宣言の下にカーソルを置きます。[Alt]-[Insert](Macでは[Ctrl]-[I])を押して「コードを生成」ポップアップ・メニューを開きます。
-image::images/insert-code.png[title="ソース・エディタに表示された「コードを挿入」ポップアップ・メニュー"]</p>
+<p>ソース・エディタで、`AutoCompleteServlet`クラスの宣言の下にカーソルを置きます。[Alt]-[Insert](Macでは[Ctrl]-[I])を押して「コードを生成」ポップアップ・メニューを開きます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-code.png" alt="insert code">
+</div>
+<div class="title">Figure 12. ソース・エディタに表示された「コードを挿入」ポップアップ・メニュー</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>「メソッドをオーバーライド」を選択します。表示されるダイアログで、<code>AutoCompleteServlet`の継承元クラスがすべて表示されます。「GenericServlet」ノードを展開し、「`init(Servlet Config config)</code>」を選択します。
-image::images/new-override.png[title="継承されたクラスが表示されたオーバーライド・ダイアログ"]</p>
+<p>「メソッドをオーバーライド」を選択します。表示されるダイアログで、<code>AutoCompleteServlet`の継承元クラスがすべて表示されます。「GenericServlet」ノードを展開し、「`init(Servlet Config config)</code>」を選択します。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-override.png" alt="new override">
+</div>
+<div class="title">Figure 13. 継承されたクラスが表示されたオーバーライド・ダイアログ</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>「OK」をクリックします。`init()`メソッドがソース・エディタに追加されます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>`ServletContext`オブジェクトの変数を追加し、`init()`を変更します(*太字*部分が変更箇所)。</p>
</li>
@@ -870,15 +945,20 @@ public void init(ServletConfig *config*) throws ServletException {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
-<p>`ServletContext`のインポート文を追加します。そのためには、ソース・エディタの左マージンに表示される電球のアイコンをクリックします。
-image::images/import-hint.png[title="ソース・エディタの左マージンに表示されたインポートのヒント"]</p>
+<p>`ServletContext`のインポート文を追加します。そのためには、ソース・エディタの左マージンに表示される電球のアイコンをクリックします。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/import-hint.png" alt="import hint">
+</div>
+<div class="title">Figure 14. ソース・エディタの左マージンに表示されたインポートのヒント</div>
+</div>
<div class="paragraph">
-<p>`doGet()`メソッドではリクエストのURLを解析し、データ・ストアからデータを取出し、XML形式でレスポンスを作成する必要があります。メソッドの宣言は、クラスの作成時に生成されています。これを表示するには、左マージンにある展開アイコン(image::images/expand-icon.png[])をクリックしてHttpServlet メソッドを展開する必要があります。</p>
+<p>`doGet()`メソッドではリクエストのURLを解析し、データ・ストアからデータを取出し、XML形式でレスポンスを作成する必要があります。メソッドの宣言は、クラスの作成時に生成されています。これを表示するには、左マージンにある展開アイコン(<span class="image"><img src="images/expand-icon.png" alt="expand icon"></span>)をクリックしてHttpServlet メソッドを展開する必要があります。</p>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -894,8 +974,14 @@ private HashMap composers = compData.getComposers();</code></pre>
</div>
</div>
<div class="paragraph">
-<p>これで、すべての作曲家データの`HashMap`が作成されます。これは`doGet()`で使用されます。
-2. `doGet()`までスクロールし、次のようにメソッドを実装します。</p>
+<p>これで、すべての作曲家データの`HashMap`が作成されます。これは`doGet()`で使用されます。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>`doGet()`までスクロールし、次のようにメソッドを実装します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1112,8 +1198,14 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
</div>
</div>
<div class="paragraph">
-<p>表の2番目の行は、別のHTML表を含んでいます。この表は、作曲家の名前を挿入するためのオートコンプリート・ボックスを表します。
-2. `javascript.js`をソース・エディタで開き、次の3つの変数をファイルの先頭に追加します。</p>
+<p>表の2番目の行は、別のHTML表を含んでいます。この表は、作曲家の名前を挿入するためのオートコンプリート・ボックスを表します。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>`javascript.js`をソース・エディタで開き、次の3つの変数をファイルの先頭に追加します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1123,7 +1215,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>次の*太字*の行を`init()`関数に追加します。</p>
</li>
@@ -1140,8 +1232,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>`init()`の目的の1つは、indexページのDOMを変更する他の関数からindexページ内の要素にアクセスできるようにすることです。
-4. `appendComposer()`を`javascript.js`に追加します。</p>
+<p>`init()`の目的の1つは、indexページのDOMを変更する他の関数からindexページ内の要素にアクセスできるようにすることです。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>`appendComposer()`を`javascript.js`に追加します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1174,8 +1272,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>この関数は、表の新しい行を作成し、3つのパラメータによって関数に渡されたデータを使用して作曲家へのリンクを挿入してから、行をindexページの`complete-table`要素に挿入します。
-5. `getElementY()`を`javascript.js`に追加します。</p>
+<p>この関数は、表の新しい行を作成し、3つのパラメータによって関数に渡されたデータを使用して作曲家へのリンクを挿入してから、行をindexページの`complete-table`要素に挿入します。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>`getElementY()`を`javascript.js`に追加します。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1202,7 +1306,7 @@ var autoRow;</code></pre>
<p>*注意: *<a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a>にある`offset`に関する<a href="http://www.quirksmode.org/js/findpos.html">説明</a>を参照してください。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>`clearTable()`を`javascript.js`に追加します。</p>
</li>
@@ -1221,8 +1325,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>この関数は`complete-table`要素の表示を’none’に設定し(非表示にし)、作成された既存の作曲家の名前エントリを除去します。
-7. `callback()`関数を変更して、サーバーから新しいデータを受け取るたびに`clearTable()`をコールするようにします。オートコンプリート・ボックスに作曲家のエントリがある場合は、新しいエントリが入力される前に除去されます。</p>
+<p>この関数は`complete-table`要素の表示を’none’に設定し(非表示にし)、作成された既存の作曲家の名前エントリを除去します。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
+<li>
+<p>`callback()`関数を変更して、サーバーから新しいデータを受け取るたびに`clearTable()`をコールするようにします。オートコンプリート・ボックスに作曲家のエントリがある場合は、新しいエントリが入力される前に除去されます。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1239,7 +1349,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>`parseMessages()`を`javascript.js`に追加します。</p>
</li>
@@ -1355,10 +1465,14 @@ var autoRow;</code></pre>
<p>*注意:*indexページが <code>index.jsp</code> の場合、indexページに戻るためのリンクを変更する必要があります。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>プロジェクトの「Webページ」フォルダに、別のJSPファイルを作成します。ファイルに`error.jsp`という名前を付けます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>`error.jsp`内のプレースホルダ・コードを次のコードで置き換えます。</p>
</li>
@@ -1396,11 +1510,16 @@ var autoRow;</code></pre>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。プロジェクトが再コンパイルされ、ターゲット・サーバーにデプロイされます。ブラウザが開き、indexページが表示されます。
-image::images/no-css.png[title="スタイル・シートなしでの正常なデプロイメント"]</p>
+<p>「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。プロジェクトが再コンパイルされ、ターゲット・サーバーにデプロイされます。ブラウザが開き、indexページが表示されます。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/no-css.png" alt="no css">
+</div>
+<div class="title">Figure 15. スタイル・シートなしでの正常なデプロイメント</div>
+</div>
<div class="paragraph">
<p>アプリケーションにスタイル・シートを追加するには、<code>.css`ファイルを作成し、プレゼンテーション・ページからそのファイルにリンクします。</code>.css`ファイルで作業する場合、IDEには、コード補完機能や、スタイルシート・ルールの生成と編集に役立つ次のウィンドウが提供されています。</p>
</div>
@@ -1434,7 +1553,7 @@ image::images/no-css.png[title="スタイル・シートなしでの正常なデ
<p>新規ファイルが作成され、エディタで開きます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>エディタで`stylesheet.css`に次のルールを入力します。IDEのコード補完サポートを利用するには、候補を呼び出したい場所で[Ctrl]-[Space]を押します。</p>
</li>
@@ -1507,18 +1626,23 @@ a:hover {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
-<p>「ウィンドウ」→「Web」→「CSSスタイル」を選択して、「CSSスタイル」ウィンドウを開きます。
-image::images/css-styles-window.png[title="h1ルールのプロパティを表示している「CSSスタイル」ウィンドウ"]</p>
+<p>「ウィンドウ」→「Web」→「CSSスタイル」を選択して、「CSSスタイル」ウィンドウを開きます。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/css-styles-window.png" alt="css styles window">
+</div>
+<div class="title">Figure 16. h1ルールのプロパティを表示している「CSSスタイル」ウィンドウ</div>
+</div>
<div class="paragraph">
-<p>「CSSスタイル」ウィンドウを使用して、プロパティをすばやく表示し、スタイル・ルールを編集できます。「CSSスタイル」ウィンドウの上部ペインでルールを選択すると、下部ペインにルールのプロパティが表示されます。上部ペインのツールバーで「CSSルールの編集」アイコン(image::images/newcssrule.png[title="新規CSSプロパティ・アイコン"])をクリックして、スタイルシートにCSSルールを追加できます。プロパティ・シートを編集して下部ペインでルールを変更したり、下部ペインのツールバーで「プロパティの追加」アイコン(image::images/newcssproperty.png[title="新規CSSプロパティ・アイコン"])をクリックしてプロパティを追加したりできます。</p>
+<p>「CSSスタイル」ウィンドウを使用して、プロパティをすばやく表示し、スタイル・ルールを編集できます。「CSSスタイル」ウィンドウの上部ペインでルールを選択すると、下部ペインにルールのプロパティが表示されます。上部ペインのツールバーで「CSSルールの編集」アイコン(<span class="image"><img src="images/newcssrule.png" alt="newcssrule" title="新規CSSプロパティ・アイコン"></span>)をクリックして、スタイルシートにCSSルールを追加できます。プロパティ・シートを編集して下部ペインでルールを変更したり、下部ペインのツールバーで「プロパティの追加」アイコン(<span class="image"><img src="images/newcssproperty.png" alt="newcssproperty" title="新規CSSプロパティ・アイコン"></span>)をクリックしてプロパティを追加したりできます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>ソース・エディタでindexページに切り替え、`<head>`タグの間にスタイル・シートへの参照を追加します。</p>
</li>
@@ -1530,7 +1654,7 @@ image::images/css-styles-window.png[title="h1ルールのプロパティを表
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>スタイル・シートで定義されている`popupBox`クラスを`complete-table`要素に追加します(*太字*部分が変更箇所)。</p>
</li>
@@ -1552,7 +1676,7 @@ image::images/css-styles-window.png[title="h1ルールのプロパティを表
<div class="content">
<img src="images/css-completion.png" alt="css completion">
</div>
-<div class="title">Figure 7. エディタでのCSSコード補完</div>
+<div class="title">Figure 17. エディタでのCSSコード補完</div>
</div>
<div class="paragraph">
<p>`stylesheet.css`で指定されているように、このルールでは、`complete-table`要素が親要素の少し右に表示されるように配置されます。</p>
@@ -1591,7 +1715,7 @@ image::images/css-styles-window.png[title="h1ルールのプロパティを表
<p><strong>注意:</strong> このオプションは、GlassFishサーバーでは「共通」タブに表示されます。Tomcatでは「接続」タブに表示されます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>「閉じる」をクリックします。</p>
</li>
@@ -1607,7 +1731,7 @@ image::images/css-styles-window.png[title="h1ルールのプロパティを表
<div class="content">
<img src="images/http-monitor.png" alt="http monitor">
</div>
-<div class="title">Figure 8. IDEに表示されたHTTPサーバー・モニター</div>
+<div class="title">Figure 18. IDEに表示されたHTTPサーバー・モニター</div>
</div>
<div class="paragraph">
<p>ユーザーがオートコンプリート・フィールドに文字を入力したときに送信される非同期リクエストの結果としてサーバーから送信されるXMLデータを確認できます。</p>
@@ -1626,7 +1750,7 @@ image::images/css-styles-window.png[title="h1ルールのプロパティを表
<div class="content">
<img src="images/xml-data.png" alt="xml data">
</div>
-<div class="title">Figure 9. IDEに表示されたHTTPサーバー・モニター</div>
+<div class="title">Figure 19. IDEに表示されたHTTPサーバー・モニター</div>
</div>
</div>
<div class="sect2">
diff --git a/content/kb/docs/web/ajax-quickstart_pt_BR.html b/content/kb/docs/web/ajax-quickstart_pt_BR.html
index 4223273..eb2dd1a 100644
--- a/content/kb/docs/web/ajax-quickstart_pt_BR.html
+++ b/content/kb/docs/web/ajax-quickstart_pt_BR.html
@@ -249,13 +249,31 @@ versão 7.x ou 8.x</p></td>
<p>Escolha Arquivo > Novo Projeto. Em Categorias, selecione Java Web. Em Projetos, selecione Aplicação Web e clique em Próximo.</p>
</li>
<li>
-<p>No painel Nome e Localização, digite <code>MyAjaxApp</code> 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"]</p>
+<p>No painel Nome e Localização, digite <code>MyAjaxApp</code> 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.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/java-name-location.png" alt="java name location">
+</div>
+<div class="title">Figure 4. Especifique o nome e a localização do seu projeto de aplicação</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>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"]</p>
+<p>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.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/java-server-settings.png" alt="java server settings">
+</div>
+<div class="title">Figure 5. Especifique o servidor no qual sua aplicação será implantada</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Aceite as outras definições default e clique em Finalizar. O projeto será gerado no sistema de arquivos e aberto no IDE.</p>
</li>
@@ -271,7 +289,7 @@ image::images/java-server-settings.png[title="Especifique o servidor no qual sua
<div class="content">
<img src="images/java-proj-win.png" alt="java proj win">
</div>
-<div class="title">Figure 4. A janela Projetos exibe o projeto MyAjaxApp</div>
+<div class="title">Figure 6. A janela Projetos exibe o projeto MyAjaxApp</div>
</div>
<div class="paragraph">
<p>Antes de começar a codificar, tente rapidamente executar a aplicação para garantir que a configuração entre o IDE, seu servidor e o browser esteja configurada corretamente.</p>
@@ -292,7 +310,7 @@ image::images/java-server-settings.png[title="Especifique o servidor no qual sua
<div class="content">
<img src="images/palette.png" alt="palette">
</div>
-<div class="title">Figure 5. Paleta que exibe elementos HTML</div>
+<div class="title">Figure 7. Paleta que exibe elementos HTML</div>
</div>
<div class="paragraph">
<p>Agora que você tem certeza de que seu ambiente está configurado corretamente, comece transformando sua página de índice na interface de autocompletar que será vista pelos usuários.</p>
@@ -329,7 +347,7 @@ image::images/java-server-settings.png[title="Especifique o servidor no qual sua
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>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 <code><h1></code>:</p>
</li>
@@ -346,7 +364,7 @@ image::images/java-server-settings.png[title="Especifique o servidor no qual sua
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>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 <code><p></code> que você acabou de adicionar. A caixa de diálogo Inserir Form será aberta. Especifique o seguinte:</p>
<div class="ulist">
@@ -358,19 +376,24 @@ image::images/java-server-settings.png[title="Especifique o servidor no qual sua
<p>Método: GET</p>
</li>
<li>
-<p>Nome: autofillform
-image::images/insert-form.png[title="Caixa de diálogo Inserir form"]</p>
+<p>Nome: autofillform</p>
</li>
</ul>
</div>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-form.png" alt="insert form">
+</div>
+<div class="title">Figure 8. Caixa de diálogo Inserir form</div>
+</div>
<div class="paragraph">
<p>Clique em OK. As tags HTML <code><form></code> serão inseridas na página que contém os atributos especificados. (GET é aplicado por default e, portanto, não é declarado explicitamente.)</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>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 <code><form></code>. A caixa de diálogo Inserir Tabela será aberta. Especifique o seguinte:</p>
<div class="ulist">
@@ -385,12 +408,21 @@ image::images/insert-form.png[title="Caixa de diálogo Inserir form"]</p>
<p>Tamanho da Borda: 0</p>
</li>
<li>
-<p>Preenchimento de Células: 5
-image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]</p>
+<p>Preenchimento de Células: 5</p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-table.png" alt="insert table">
+</div>
+<div class="title">Figure 9. Caixa de diálogo Inserir tabela</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>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:</p>
</li>
@@ -421,7 +453,7 @@ image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Na primeira linha da tabela, digite o seguinte texto na primeira coluna (alterações em <strong>negrito</strong>):</p>
</li>
@@ -433,7 +465,7 @@ image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>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 <strong>negrito</strong>):</p>
</li>
@@ -450,8 +482,13 @@ image::images/insert-table.png[title="Caixa de diálogo Inserir tabela"]</p>
</div>
</div>
<div class="paragraph">
-<p>Enquanto digita, tente utilizar o suporte à funcionalidade autocompletar código incorporado do IDE. Por exemplo, digite <code><i</code> 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 um [...]
-image::images/code-completion.png[title="Pressione Ctrl-Espaço no editor para chamar o suporte a autocompletar código e à documentação"]</p>
+<p>Enquanto digita, tente utilizar o suporte à funcionalidade autocompletar código incorporado do IDE. Por exemplo, digite <code><i</code> 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 um [...]
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-completion.png" alt="code completion">
+</div>
+<div class="title">Figure 10. Pressione Ctrl-Espaço no editor para chamar o suporte a autocompletar código e à documentação</div>
</div>
<div class="paragraph">
<p>O atributo <code>onkeyup</code> que você digitou acima aponta para uma função JavaScript chamada <code>doCompletion()</code>. Essa função é chamada toda vez que uma tecla é pressionada no campo de texto do form, e mapeia para a chamada JavaScript representada no <a href="#flow-diagram">fluxograma</a> do Ajax acima.</p>
@@ -469,7 +506,7 @@ image::images/code-completion.png[title="Pressione Ctrl-Espaço no editor para c
<div class="content">
<img src="images/javascript-options.png" alt="javascript options">
</div>
-<div class="title">Figure 6. Opções de Dicas de JavaScript na janela Opções</div>
+<div class="title">Figure 11. Opções de Dicas de JavaScript na janela Opções</div>
</div>
<div class="paragraph">
<p>Adicione um arquivo JavaScript à aplicação e comece a implementar <code>doCompletion()</code>.</p>
@@ -521,7 +558,7 @@ function initRequest() {
<p>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 <a href="http://www.quirksmode.org/js/detect.html">script de detecção de browser</a> disponível em <a href="http://www.quirksmode.org">http://www.quirksmode.org</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Volte para a página do índice e adicione uma referência ao arquivo JavaScript entre as tags <code><head></code>.</p>
</li>
@@ -536,7 +573,7 @@ function initRequest() {
<p>Você pode alternar rapidamente entre as páginas abertas no Editor de Código-fonte, pressionando Ctrl-Tab.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Insira uma chamada a <code>init()</code> na tag de abertura <code><body></code>.</p>
</li>
@@ -752,7 +789,7 @@ public class ComposerData {
<p>Quando você clica em Finalizar, o IDE cria a classe e abre o arquivo no Editor de Código-fonte.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>No Editor de Código-fonte, cole o seguinte código:</p>
</li>
@@ -809,23 +846,39 @@ public class Composer {
<p>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).</p>
</li>
<li>
-<p>Nomeie o servlet <code>AutoCompleteServlet</code> e selecione <code>com.ajax</code> na lista drop-down no campo Pacote. Clique em Próximo.
-image::images/newservlet-name-location.png[]</p>
+<p>Nomeie o servlet <code>AutoCompleteServlet</code> e selecione <code>com.ajax</code> na lista drop-down no campo Pacote. Clique em Próximo.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newservlet-name-location.png" alt="newservlet name location">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>No painel Configurar a Implantação do Servlet, altere o padrão do URL para <strong><code>/autocomplete</code></strong> para que ele corresponda ao URL que foi definido anteriormente no objeto <code>XMLHttpRequest</code>.
-image::images/newservlet-configure-deployment.png[]</p>
+<p>No painel Configurar a Implantação do Servlet, altere o padrão do URL para <strong><code>/autocomplete</code></strong> para que ele corresponda ao URL que foi definido anteriormente no objeto <code>XMLHttpRequest</code>.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newservlet-configure-deployment.png" alt="newservlet configure deployment">
+</div>
+</div>
<div class="paragraph">
<p>Esse painel elimina a necessidade de adicionar manualmente esses detalhes no descritor de implantação.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>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 <code>@WebServlet</code>, em vez de um descritor da implantação. O projeto ainda funcionará se você usar a anotação <code>@WebServlet</code>, em vez de um descritor de implantação.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Clique em Finalizar. O servlet será criado e aberto no Editor de Código-fonte.</p>
</li>
@@ -840,16 +893,38 @@ image::images/newservlet-configure-deployment.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Coloque o seu cursor embaixo da declaração de classe <code>AutoCompleteServlet</code> 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"]</p>
+<p>Coloque o seu cursor embaixo da declaração de classe <code>AutoCompleteServlet</code> no Editor de Código-fonte. Pressione Alt-Insert (Ctrl-I no Mac) para abrir o menu pop-up Gerar Código.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-code.png" alt="insert code">
+</div>
+<div class="title">Figure 12. Menu pop-up Inserir Código exibido no Editor de Código-fonte</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>Selecione Substituir Método. Na caixa de diálogo que é exibida, todas as classes que <code>AutoCompleteServlet</code> herda são exibidas. Expanda o nó GenericServlet e selecione <code>init(Servlet Config config)</code>.
-image::images/new-override.png[title="A caixa de diálogo Substituir lista classes herdadas"]</p>
+<p>Selecione Substituir Método. Na caixa de diálogo que é exibida, todas as classes que <code>AutoCompleteServlet</code> herda são exibidas. Expanda o nó GenericServlet e selecione <code>init(Servlet Config config)</code>.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-override.png" alt="new override">
+</div>
+<div class="title">Figure 13. A caixa de diálogo Substituir lista classes herdadas</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Clique em OK. O método <code>init()</code> é adicionado no Editor de Código-fonte.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Adicione uma variável para um objeto <code>ServletContext</code> e modifique <code>init()</code> (alterações em <strong>negrito</strong>):</p>
</li>
@@ -866,15 +941,20 @@ public void init(ServletConfig *config*) throws ServletException {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
-<p>Adicione uma instrução de importação para <code>ServletContext</code>. 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"]</p>
+<p>Adicione uma instrução de importação para <code>ServletContext</code>. Você pode fazer isso clicando no ícone da lâmpada exibido na margem esquerda do Editor de Código-fonte</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/import-hint.png" alt="import hint">
+</div>
+<div class="title">Figure 14. Dicas de importação são exibidas na margem esquerda do Editor de Código-fonte</div>
+</div>
<div class="paragraph">
-<p>O método <code>doGet()</code> 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.</p>
+<p>O método <code>doGet()</code> 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 (<span class="image"><img src="images/expand-icon.png" alt="expand icon"></span>) na margem esquerda.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -890,8 +970,14 @@ private HashMap composers = compData.getComposers();</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Isso cria um <code>HashMap</code> de todos os dados do composer, que é, em seguida, utilizado por <code>doGet()</code>.
-2. Role para baixo para <code>doGet()</code> e implemente o método da seguinte forma:</p>
+<p>Isso cria um <code>HashMap</code> de todos os dados do composer, que é, em seguida, utilizado por <code>doGet()</code>.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Role para baixo para <code>doGet()</code> e implemente o método da seguinte forma:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1108,8 +1194,14 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
</div>
</div>
<div class="paragraph">
-<p>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 <code>javascript.js</code> no Editor de Código-fonte e as três variáveis seguintes no início do arquivo.</p>
+<p>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.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Abra <code>javascript.js</code> no Editor de Código-fonte e as três variáveis seguintes no início do arquivo.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1119,7 +1211,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Adicione as seguintes linhas (em <strong>negrito</strong>) na função <code>init()</code>.</p>
</li>
@@ -1136,8 +1228,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Uma finalidade de <code>init()</code> é 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 <code>appendComposer()</code> a <code>javascript.js</code>.</p>
+<p>Uma finalidade de <code>init()</code> é 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.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Adicione <code>appendComposer()</code> a <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1170,8 +1268,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>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 <code>complete-table</code> da página de índice.
-5. Adicione <code>getElementY()</code> a <code>javascript.js</code>.</p>
+<p>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 <code>complete-table</code> da página de índice.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>Adicione <code>getElementY()</code> a <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1198,7 +1302,7 @@ var autoRow;</code></pre>
<p>*Observação: *Consulte <a href="http://www.quirksmode.org/js/findpos.html">esta explicação</a> de <code>offset</code> em <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Adicione <code>clearTable()</code> a <code>javascript.js</code>.</p>
</li>
@@ -1217,8 +1321,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Essa função define a exibição do elemento <code>complete-table</code> 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 <code>callback()</code> para que chame <code>clearTable()</code> 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.</p>
+<p>Essa função define a exibição do elemento <code>complete-table</code> como "none" (ou seja, o torna invisível) e remove quaisquer entradas de nome de criador existentes que tenham sido criadas.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
+<li>
+<p>Modifique a função <code>callback()</code> para que chame <code>clearTable()</code> 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.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1235,7 +1345,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Adicione <code>parseMessages()</code> a <code>javascript.js</code>.</p>
</li>
@@ -1351,10 +1461,14 @@ var autoRow;</code></pre>
<p><strong>Observação.</strong> Você precisará alterar o link para voltar à página de índice, se sua página de índice for <code>index.jsp</code> .</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Crie outro arquivo JSP na pasta Páginas Web do projeto. Nomeie o arquivo de <code>error.jsp</code>.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Substitua o código do placeholder no <code>error.jsp</code> pelo seguinte código:</p>
</li>
@@ -1392,11 +1506,16 @@ var autoRow;</code></pre>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>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"]</p>
+<p>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.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/no-css.png" alt="no css">
+</div>
+<div class="title">Figure 15. Implantação com sucesso sem folha de estilo</div>
+</div>
<div class="paragraph">
<p>Para adicionar uma folha de estilo à sua aplicação, basta criar um arquivo <code>.css</code> e vinculá-lo a partir da(s) página(s) da sua apresentação. Quando você trabalha em arquivos <code>.css</code>, 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:</p>
</div>
@@ -1430,7 +1549,7 @@ image::images/no-css.png[title="Implantação com sucesso sem folha de estilo"]<
<p>O movo arquivo será criado e aberto no editor.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Digite as seguintes regras em <code>stylesheet.css</code>, 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.</p>
</li>
@@ -1503,18 +1622,23 @@ a:hover {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
-<p>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"]</p>
+<p>Abra a janela Estilos de CSS escolhendo Janela > Web > Estilos CSS.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/css-styles-window.png" alt="css styles window">
+</div>
+<div class="title">Figure 16. Janela Estilos de CSS exibindo as propriedades de regra h1</div>
+</div>
<div class="paragraph">
-<p>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 i [...]
+<p>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 (<span class="image"><img src="images/newcssrule.png" alt="newcssrule" title="Ícone Nova Propriedade de CSS"></span>) na barra de ferramentas do painel sup [...]
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Alterne para a página no Editor de Código-fonte, e adicione uma referência à folha de estilo entre as tags <code><head></code>.</p>
</li>
@@ -1526,7 +1650,7 @@ image::images/css-styles-window.png[title="Janela Estilos de CSS exibindo as pro
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Adicione a classe <code>popupBox</code> que está definida na folha de estilo ao elemento <code>complete-table</code> (alterações em <strong>negrito</strong>).</p>
</li>
@@ -1548,7 +1672,7 @@ image::images/css-styles-window.png[title="Janela Estilos de CSS exibindo as pro
<div class="content">
<img src="images/css-completion.png" alt="css completion">
</div>
-<div class="title">Figure 7. Recurso autocompletar código no editor</div>
+<div class="title">Figure 17. Recurso autocompletar código no editor</div>
</div>
<div class="paragraph">
<p>Como indicado em <code>stylesheet.css</code>, esta regra posiciona o elemento <code>complete-table</code> para que seja exibido um pouco à direita de seu elemento pai.</p>
@@ -1587,7 +1711,7 @@ image::images/css-styles-window.png[title="Janela Estilos de CSS exibindo as pro
<p><strong>Observação:</strong> essa opção é exibida na guia Comum do GlassFish Server. Para Tomcat, ela reside na guia Conexão.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Clique em Fechar.</p>
</li>
@@ -1603,7 +1727,7 @@ image::images/css-styles-window.png[title="Janela Estilos de CSS exibindo as pro
<div class="content">
<img src="images/http-monitor.png" alt="http monitor">
</div>
-<div class="title">Figure 8. O monitor do Servidor HTTP é exibido no IDE</div>
+<div class="title">Figure 18. O monitor do Servidor HTTP é exibido no IDE</div>
</div>
<div class="paragraph">
<p>Você pode verificar os dados XML que são enviados do servidor como resultado da solicitação assíncrona feita quando um usuário indica um caractere no campo autocompletar.</p>
@@ -1622,7 +1746,7 @@ image::images/css-styles-window.png[title="Janela Estilos de CSS exibindo as pro
<div class="content">
<img src="images/xml-data.png" alt="xml data">
</div>
-<div class="title">Figure 9. O monitor do Servidor HTTP é exibido no IDE</div>
+<div class="title">Figure 19. O monitor do Servidor HTTP é exibido no IDE</div>
</div>
</div>
<div class="sect2">
diff --git a/content/kb/docs/web/ajax-quickstart_ru.html b/content/kb/docs/web/ajax-quickstart_ru.html
index 9907b88..319382a 100644
--- a/content/kb/docs/web/ajax-quickstart_ru.html
+++ b/content/kb/docs/web/ajax-quickstart_ru.html
@@ -249,13 +249,31 @@ _ _
<p>Выберите команду "Файл" > "Новый проект". В области "Категории" выберите "Java Web". В области "Projects" (Проекты) выберите "Web Application" (Веб-приложение) и нажмите кнопку "Next" (Далее).</p>
</li>
<li>
-<p>На экране "Имя и расположение" введите <code>MyAjaxApp</code> в поле "Имя проекта". Поле "Project Location" позволяет указать местоположение проекта. Для всех остальных параметров примите значения по умолчанию и нажмите кнопку "Далее".
-image::images/java-name-location.png[title="Укажите имя проекта и местоположение проекта приложения"]</p>
+<p>На экране "Имя и расположение" введите <code>MyAjaxApp</code> в поле "Имя проекта". Поле "Project Location" позволяет указать местоположение проекта. Для всех остальных параметров примите значения по умолчанию и нажмите кнопку "Далее".</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/java-name-location.png" alt="java name location">
+</div>
+<div class="title">Figure 4. Укажите имя проекта и местоположение проекта приложения</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>На панели "Сервер и параметры настройки" выберите сервер, на котором требуется выполнить развертывание приложения. В списке представлены только те серверы, которые зарегистрированы в среде IDE.
-image::images/java-server-settings.png[title="Выберите сервер, на котором требуется выполнить развертывание приложения"]</p>
+<p>На панели "Сервер и параметры настройки" выберите сервер, на котором требуется выполнить развертывание приложения. В списке представлены только те серверы, которые зарегистрированы в среде IDE.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/java-server-settings.png" alt="java server settings">
+</div>
+<div class="title">Figure 5. Выберите сервер, на котором требуется выполнить развертывание приложения</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Подтвердите остальные значения по умолчанию и нажмите кнопку "Готово". Проект создается в файловой системе и открывается в среде IDE.</p>
</li>
@@ -271,7 +289,7 @@ image::images/java-server-settings.png[title="Выберите сервер, н
<div class="content">
<img src="images/java-proj-win.png" alt="java proj win">
</div>
-<div class="title">Figure 4. В окне 'Проекты' отображается проект MyAjaxApp</div>
+<div class="title">Figure 6. В окне 'Проекты' отображается проект MyAjaxApp</div>
</div>
<div class="paragraph">
<p>Перед написанием программы попробуйте запустить приложение в целях проверки правильности настройки взаимосвязи между средой IDE, сервером и браузером.</p>
@@ -292,7 +310,7 @@ image::images/java-server-settings.png[title="Выберите сервер, н
<div class="content">
<img src="images/palette.png" alt="palette">
</div>
-<div class="title">Figure 5. На палитре отображаются элементы HTML</div>
+<div class="title">Figure 7. На палитре отображаются элементы HTML</div>
</div>
<div class="paragraph">
<p>Теперь, после выполнения проверки правильности настройки среды, можно приступить к преобразованию страницы-указателя в интерфейс автозавершения, который будет отображаться для пользователей.</p>
@@ -329,7 +347,7 @@ image::images/java-server-settings.png[title="Выберите сервер, н
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Для описания назначения текстового поля следует добавить соответствующий пояснительный текст. Непосредственно под тегами <code><h1></code> можно скопировать и вставить следующий текст:</p>
</li>
@@ -346,7 +364,7 @@ image::images/java-server-settings.png[title="Выберите сервер, н
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Добавьте к странице форму HTML. Для этого можно использовать элементы, содержащиеся в палитре среды IDE. Если палитра не открыта, выберите в главном меню "Окно" > "Палитра". Затем перейдите к узлу "Формы HTML", выберите элемент "Форма" и перетащите его на страницу под только что добавленные теги <code><p></code>. Появится диалоговое окно "Вставить форму". Введите следующее:</p>
<div class="ulist">
@@ -358,19 +376,24 @@ image::images/java-server-settings.png[title="Выберите сервер, н
<p>Method: GET;</p>
</li>
<li>
-<p>Имя: autofillform
-image::images/insert-form.png[title="Диалоговое окно 'Вставить форму'"]</p>
+<p>Имя: autofillform</p>
</li>
</ul>
</div>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-form.png" alt="insert form">
+</div>
+<div class="title">Figure 8. Диалоговое окно 'Вставить форму'</div>
+</div>
<div class="paragraph">
<p>Нажмите кнопку "ОК". Теги HTML <code><form></code> вставляются в страницу, содержащую указанные атрибуты. (Метод GET применяется по умолчанию, и, следовательно, не объявляется явно).</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Добавьте к странице таблицу HTML. В категории палитры "HTML" выберите элемент "Таблица" и перетащите его непосредственно под теги <code><form></code>. Откроется диалоговое окно "Вставить таблицу". Введите следующее:</p>
<div class="ulist">
@@ -385,12 +408,21 @@ image::images/insert-form.png[title="Диалоговое окно 'Встави
<p>Размер границы : 0</p>
</li>
<li>
-<p>Заполнение ячеек: 5
-image::images/insert-table.png[title="Диалоговое окно 'Вставить таблицу'"]</p>
+<p>Заполнение ячеек: 5</p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-table.png" alt="insert table">
+</div>
+<div class="title">Figure 9. Диалоговое окно 'Вставить таблицу'</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Щелкните правой кнопкой мыши редактор исходного кода и выберите команду "Форматировать". Последует выравнивание кода. Теперь форма должна выглядеть следующим образом:</p>
</li>
@@ -421,7 +453,7 @@ image::images/insert-table.png[title="Диалоговое окно 'Встав
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>В первый столбец первой строки таблицы введите следующий текст (изменения выделены <strong>полужирным шрифтом</strong>):</p>
</li>
@@ -433,7 +465,7 @@ image::images/insert-table.png[title="Диалоговое окно 'Встав
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Во второй столбец первой строки вместо перетаскивания поля "Ввод текста" из палитры введите указанный ниже код (изменения выделены <strong>полужирным</strong> шрифтом):</p>
</li>
@@ -450,8 +482,13 @@ image::images/insert-table.png[title="Диалоговое окно 'Встав
</div>
</div>
<div class="paragraph">
-<p>При вводе кода можно использовать встроенную в среду IDE функцию автозавершения кода. Например, введите <code><i</code>, а затем нажмите CTRL+ПРОБЕЛ. Список предлагаемых вариантов выбора отображается под курсором, а в расположенном выше поле появляется описание выбранного элемента. Для получения возможных вариантов выбора при написании кода достаточно в любой момент нажать в редакторе исходного кода сочетание клавиш CTRL+ПРОБЕЛ. Кроме того, при наличии единственного возможного вари [...]
-image::images/code-completion.png[title="Для вызова поддержки автозавершения кода и документации нажмите сочетание клавиш CTRL+ПРОБЕЛ в редакторе."]</p>
+<p>При вводе кода можно использовать встроенную в среду IDE функцию автозавершения кода. Например, введите <code><i</code>, а затем нажмите CTRL+ПРОБЕЛ. Список предлагаемых вариантов выбора отображается под курсором, а в расположенном выше поле появляется описание выбранного элемента. Для получения возможных вариантов выбора при написании кода достаточно в любой момент нажать в редакторе исходного кода сочетание клавиш CTRL+ПРОБЕЛ. Кроме того, при наличии единственного возможного вари [...]
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-completion.png" alt="code completion">
+</div>
+<div class="title">Figure 10. Для вызова поддержки автозавершения кода и документации нажмите сочетание клавиш CTRL+ПРОБЕЛ в редакторе.</div>
</div>
<div class="paragraph">
<p>Атрибут <code>onkeyup</code>, введенный выше, указывает на функцию JavaScript с именем <code>doCompletion()</code>. Эта функция вызывается при каждом нажатии клавиши в текстовом поле формы и соответствует вызову JavaScript на приведенной выше <a href="#flow-diagram">блок-схеме</a> Ajax.</p>
@@ -469,7 +506,7 @@ image::images/code-completion.png[title="Для вызова поддержки
<div class="content">
<img src="images/javascript-options.png" alt="javascript options">
</div>
-<div class="title">Figure 6. Параметры подсказки JavaScript в окне 'Параметры'</div>
+<div class="title">Figure 11. Параметры подсказки JavaScript в окне 'Параметры'</div>
</div>
<div class="paragraph">
<p>Добавьте файл JavaScript к приложению и выполните <code>doCompletion()</code>.</p>
@@ -521,7 +558,7 @@ function initRequest() {
<p>С помощью этого кода выполняется простая проверка совместимости веб-браузеров Firefox 3 и Internet Explorer версий 6 и 7). Если требуется добавить более надежный код, устраняющий ошибки совместимости, используйте <a href="http://www.quirksmode.org/js/detect.html">сценарий для определения браузера</a> с веб-сайта <a href="http://www.quirksmode.org">http://www.quirksmode.org</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Вернитесь к странице индекса и добавьте ссылку на файл JavaScript между тегами <code><head></code>.</p>
</li>
@@ -536,7 +573,7 @@ function initRequest() {
<p>Для быстрого перехода между страницами, открытыми в редакторе исходного кода, можно воспользоваться сочетанием клавиш CTRL+TAB.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Вставьте вызов <code>init()</code> после открывающего тега <code><body></code>.</p>
</li>
@@ -752,7 +789,7 @@ public class ComposerData {
<p>После нажатия кнопки 'Готово' в IDE создается класс, а файл открывается в редакторе исходного кода.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>В редакторе исходного кода вставьте следующий код:</p>
</li>
@@ -809,23 +846,39 @@ public class Composer {
<p>Щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Создать' > 'Сервлет', чтобы открыть мастер создания сервлетов. (Выберите 'Другой' и выберите 'Сервлет' в меню 'Веб-категория', если сервлет не отображается по умолчанию во всплывающем меню).</p>
</li>
<li>
-<p>Дайте сервлету имя <code>AutoCompleteServlet</code> и выберите <code>com.ajax</code> в раскрывающемся списке поля "Package". Нажмите кнопку 'Далее'.
-image::images/newservlet-name-location.png[]</p>
+<p>Дайте сервлету имя <code>AutoCompleteServlet</code> и выберите <code>com.ajax</code> в раскрывающемся списке поля "Package". Нажмите кнопку 'Далее'.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newservlet-name-location.png" alt="newservlet name location">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>На панели 'Настройка развертывания сервлета' измените шаблон адреса URL <strong><code>/autocomplete</code></strong> таким образом, чтобы он соответствовал адресу URL, заданному ранее в объекте <code>XMLHttpRequest</code>.
-image::images/newservlet-configure-deployment.png[]</p>
+<p>На панели 'Настройка развертывания сервлета' измените шаблон адреса URL <strong><code>/autocomplete</code></strong> таким образом, чтобы он соответствовал адресу URL, заданному ранее в объекте <code>XMLHttpRequest</code>.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newservlet-configure-deployment.png" alt="newservlet configure deployment">
+</div>
+</div>
<div class="paragraph">
<p>Использование этой панели позволяет пропустить этап добавления дополнительных сведений вручную к дескриптору развертывания.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>При желании выберите "Добавить информацию о сервлете в дескриптор развертывания". После выполнения этих действий созданный проект получится таким же, как загруженный пример. В последней версии среды IDE сервлет по умолчанию регистрируется аннотацией <code>@WebServlet</code> вместо регистрации в дескрипторе развертывания. Тем не менее, проект будет работать, если использовать аннотацию <code>@WebServlet</code> вместо дескриптора развертывания.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Нажмите кнопку "Завершить". Сервлет будет создан и открыт в редакторе исходного кода.</p>
</li>
@@ -840,16 +893,38 @@ image::images/newservlet-configure-deployment.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Поместите курсор в нижней части объявления класса <code>AutoCompleteServlet</code> в редакторе исходного кода. Нажмите ALT+INS (CTRL+I в Mac ОS) для открытия контекстного меню "Создать код".
-image::images/insert-code.png[title="Всплывающее меню 'Вставить код' отображается в в редакторе исходного кода"]</p>
+<p>Поместите курсор в нижней части объявления класса <code>AutoCompleteServlet</code> в редакторе исходного кода. Нажмите ALT+INS (CTRL+I в Mac ОS) для открытия контекстного меню "Создать код".</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-code.png" alt="insert code">
+</div>
+<div class="title">Figure 12. Всплывающее меню 'Вставить код' отображается в в редакторе исходного кода</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>Выберите команду "Переопределить метод". В появившемся диалоговом окне отображаются все родительские классы сервлета <code>AutoCompleteServlet</code>. Разверните узел GenericServlet и выберите <code>init(Servlet Config config)</code>.
-image::images/new-override.png[title="В диалоговом окне 'Переопределить' указаны унаследованные классы"]</p>
+<p>Выберите команду "Переопределить метод". В появившемся диалоговом окне отображаются все родительские классы сервлета <code>AutoCompleteServlet</code>. Разверните узел GenericServlet и выберите <code>init(Servlet Config config)</code>.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-override.png" alt="new override">
+</div>
+<div class="title">Figure 13. В диалоговом окне 'Переопределить' указаны унаследованные классы</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Нажмите кнопку "ОК". Метод <code>init()</code> добавится в редактор исходного кода.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Добавьте переменную для объекта <code>ServletContext</code> и измените метод <code>init()</code> (изменения выделены <strong>полужирным</strong> шрифтом):</p>
</li>
@@ -866,15 +941,20 @@ public void init(ServletConfig *config*) throws ServletException {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
-<p>Добавьте оператор импорта для объекта <code>ServletContext</code>. Это можно сделать, выбрав значок лампочки, который отображается на экране в левом поле редактора исходного кода.
-image::images/import-hint.png[title="Подсказки импорта отображаются в левом поле редактора исходного кода"]</p>
+<p>Добавьте оператор импорта для объекта <code>ServletContext</code>. Это можно сделать, выбрав значок лампочки, который отображается на экране в левом поле редактора исходного кода.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/import-hint.png" alt="import hint">
+</div>
+<div class="title">Figure 14. Подсказки импорта отображаются в левом поле редактора исходного кода</div>
+</div>
<div class="paragraph">
-<p>Метод <code>doGet()</code> должен преобразовать URL-адрес запроса, извлечь данные из хранилища данных и подготовить ответ в формате XML. Следует отметить, что объявление метода было сгенерировано при создании класса. Для просмотра, возможно, потребуется расширить методы HttpServlet, щелкнув значок развертывания в левом поле (image::images/expand-icon.png[]).</p>
+<p>Метод <code>doGet()</code> должен преобразовать URL-адрес запроса, извлечь данные из хранилища данных и подготовить ответ в формате XML. Следует отметить, что объявление метода было сгенерировано при создании класса. Для просмотра, возможно, потребуется расширить методы HttpServlet, щелкнув значок развертывания в левом поле (<span class="image"><img src="images/expand-icon.png" alt="expand icon"></span>).</p>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -890,8 +970,14 @@ private HashMap composers = compData.getComposers();</code></pre>
</div>
</div>
<div class="paragraph">
-<p>При этом создается хранилище <code>HashMap</code>, включающее все данные о композиторах, которое затем используется методом <code>doGet()</code>.
-2. Выполните прокрутку вниз до метода <code>doGet()</code> и реализуйте его следующим образом:</p>
+<p>При этом создается хранилище <code>HashMap</code>, включающее все данные о композиторах, которое затем используется методом <code>doGet()</code>.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Выполните прокрутку вниз до метода <code>doGet()</code> и реализуйте его следующим образом:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1108,8 +1194,14 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
</div>
</div>
<div class="paragraph">
-<p>Вторая строка таблицы содержит еще одну таблицу HTML. Эта таблица представляет поле автозавершения, используемое для автоматического ввода полных имен композиторов.
-2. Откройте <code>javascript.js</code> в редакторе исходного кода и добавьте к первому фрагменту файла три следующих переменных:</p>
+<p>Вторая строка таблицы содержит еще одну таблицу HTML. Эта таблица представляет поле автозавершения, используемое для автоматического ввода полных имен композиторов.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>Откройте <code>javascript.js</code> в редакторе исходного кода и добавьте к первому фрагменту файла три следующих переменных:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1119,7 +1211,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Добавьте следующие строки (выделенные <strong>полужирным шрифтом</strong>) к функции <code>init()</code>.</p>
</li>
@@ -1136,8 +1228,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Одной из целей <code>init()</code> является предоставление доступа к элементам страницы индекса для других функций, используемых в целях изменения DOM страницы индекса.
-4. Добавьте <code>appendComposer()</code> в <code>javascript.js</code>.</p>
+<p>Одной из целей <code>init()</code> является предоставление доступа к элементам страницы индекса для других функций, используемых в целях изменения DOM страницы индекса.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>Добавьте <code>appendComposer()</code> в <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1170,8 +1268,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Эта функция позволяет создавать новую строку таблицы и вставлять в нее ссылку на композитора с использованием данных, передаваемых в функцию посредством соответствующих трех параметров, а затем вставлять эту строку в элемент <code>complete-table</code> страницы-указателя.
-5. Добавьте <code>getElementY()</code> в <code>javascript.js</code>.</p>
+<p>Эта функция позволяет создавать новую строку таблицы и вставлять в нее ссылку на композитора с использованием данных, передаваемых в функцию посредством соответствующих трех параметров, а затем вставлять эту строку в элемент <code>complete-table</code> страницы-указателя.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>Добавьте <code>getElementY()</code> в <code>javascript.js</code>.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1198,7 +1302,7 @@ var autoRow;</code></pre>
<p><strong>Примечание.</strong> См. <a href="http://www.quirksmode.org/js/findpos.html">это описание</a> <code>смещения</code> в <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Добавьте <code>clearTable()</code> в <code>javascript.js</code>.</p>
</li>
@@ -1217,8 +1321,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Эта функция позволяет скрывать элемент <code>complete-table</code> (т.е. делать его невидимым), но не удаляет какие-либо существующие записи имен композиторов, созданные ранее.
-7. Для вызова <code>clearTable()</code> при каждом получении данных с сервера можно соответствующим образом изменить функцию <code>callback()</code>. Поэтому любые скомбинированные записи, существующие в окне автозавершения, удаляются до того, как выполняется заполнение новыми записями.</p>
+<p>Эта функция позволяет скрывать элемент <code>complete-table</code> (т.е. делать его невидимым), но не удаляет какие-либо существующие записи имен композиторов, созданные ранее.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
+<li>
+<p>Для вызова <code>clearTable()</code> при каждом получении данных с сервера можно соответствующим образом изменить функцию <code>callback()</code>. Поэтому любые скомбинированные записи, существующие в окне автозавершения, удаляются до того, как выполняется заполнение новыми записями.</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1235,7 +1345,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Добавьте <code>parseMessages()</code> в <code>javascript.js</code>.</p>
</li>
@@ -1351,10 +1461,14 @@ var autoRow;</code></pre>
<p><strong>Примечание.</strong> Если страница индекса имеет вид <code>index.jsp</code> , потребуется изменить ссылку для возврата на эту страницу.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Создайте еще один файл JSP в папке с веб-страницами проекта. Назовите файл <code>error.jsp</code>.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Измените код заглушки в файле <code>error.jsp</code> следующим кодом:</p>
</li>
@@ -1392,11 +1506,16 @@ var autoRow;</code></pre>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>В окне "Проекты" щелкните правой кнопкой мыши узел проекта и выберите команду "Выполнить". Будет выполнена перекомпиляция проекта и его развертывание на целевом сервере. Откроется браузер, в котором отображается страница-указатель.
-image::images/no-css.png[title="Успешное развертывание без таблицы стилей"]</p>
+<p>В окне "Проекты" щелкните правой кнопкой мыши узел проекта и выберите команду "Выполнить". Будет выполнена перекомпиляция проекта и его развертывание на целевом сервере. Откроется браузер, в котором отображается страница-указатель.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/no-css.png" alt="no css">
+</div>
+<div class="title">Figure 15. Успешное развертывание без таблицы стилей</div>
+</div>
<div class="paragraph">
<p>Для добавления таблицы стилей к приложению создайте файл <code>.css</code> и создайте ссылку на него на страницах презентации. При работе с файлами <code>.css</code> IDE предоставляет поддержку функции автозавершения кода, а также следующие окна, которые используются для создания и изменения правил стилей.</p>
</div>
@@ -1430,7 +1549,7 @@ image::images/no-css.png[title="Успешное развертывание бе
<p>Новый файл будет создан и открыт в редакторе.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Введите следующие правила <code>stylesheet.css</code> в редакторе. При необходимости просмотра предложений можно использовать поддержку автозавершения кода среды IDE путем нажатия CTRL+ПРОБЕЛ.</p>
</li>
@@ -1503,18 +1622,23 @@ a:hover {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
-<p>Откройте окно стилей CSS, выбрав 'Окно' > 'Web'> 'Стили CSS'.
-image::images/css-styles-window.png[title="Окно 'Стили CSS', в котором отображаются свойства правила h1"]</p>
+<p>Откройте окно стилей CSS, выбрав 'Окно' > 'Web'> 'Стили CSS'.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/css-styles-window.png" alt="css styles window">
+</div>
+<div class="title">Figure 16. Окно 'Стили CSS', в котором отображаются свойства правила h1</div>
+</div>
<div class="paragraph">
-<p>Можно использовать окно 'Стили CSS' для быстрого просмотра свойств и редактирования правил стилей. При выборе правила в верхней панели окна 'Стиль CSS' отображаются свойства правила в нижней панели. Можно добавить CSS правила к таблице стилей, нажав значок 'Изменить правила CSS' (image::images/newcssrule.png[title="Значок 'Новое свойство CSS'"]) на панели инструментов в верхней панели. Можно изменять правила в нижней панели путем редактирования таблицы свойств и добавления свойств, ще [...]
+<p>Можно использовать окно 'Стили CSS' для быстрого просмотра свойств и редактирования правил стилей. При выборе правила в верхней панели окна 'Стиль CSS' отображаются свойства правила в нижней панели. Можно добавить CSS правила к таблице стилей, нажав значок 'Изменить правила CSS' (<span class="image"><img src="images/newcssrule.png" alt="newcssrule" title="Значок 'Новое свойство CSS'"></span>) на панели инструментов в верхней панели. Можно изменять правила в нижней панели путем редакти [...]
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Перейдите на страницу индекса в редакторе исходного кода и добавьте ссылку на страницу стилей между тегами <code><head></code>.</p>
</li>
@@ -1526,7 +1650,7 @@ image::images/css-styles-window.png[title="Окно 'Стили CSS', в кот
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Добавьте класс <code>popupBox</code>, определенный в таблице стилей, к элементу <code>complete-table</code> (начертание изменится на <strong>жирное</strong>).</p>
</li>
@@ -1548,7 +1672,7 @@ image::images/css-styles-window.png[title="Окно 'Стили CSS', в кот
<div class="content">
<img src="images/css-completion.png" alt="css completion">
</div>
-<div class="title">Figure 7. Автозавершение кода CSS в редакторе</div>
+<div class="title">Figure 17. Автозавершение кода CSS в редакторе</div>
</div>
<div class="paragraph">
<p>Как указано в <code>stylesheet.css</code>, согласно этому правилу элемент <code>complete-table</code> располагается таким образом, что отображается справа от родительского элемента.</p>
@@ -1587,7 +1711,7 @@ image::images/css-styles-window.png[title="Окно 'Стили CSS', в кот
<p><strong>Примечание.</strong> Этот параметр отображается на вкладке 'Общие' для сервера GlassFish. На сервере Tomcat он расположен на вкладке "Соединение".</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Выберите "Close" (Закрыть).</p>
</li>
@@ -1603,7 +1727,7 @@ image::images/css-styles-window.png[title="Окно 'Стили CSS', в кот
<div class="content">
<img src="images/http-monitor.png" alt="http monitor">
</div>
-<div class="title">Figure 8. Монитор сервера HTTP отображается в среде IDE</div>
+<div class="title">Figure 18. Монитор сервера HTTP отображается в среде IDE</div>
</div>
<div class="paragraph">
<p>Можно проверить данные XML, полученные от сервера в результате асинхронного запроса, переданного при вводе пользователем символа в поле автозавершения.</p>
@@ -1622,7 +1746,7 @@ image::images/css-styles-window.png[title="Окно 'Стили CSS', в кот
<div class="content">
<img src="images/xml-data.png" alt="xml data">
</div>
-<div class="title">Figure 9. Монитор сервера HTTP отображается в среде IDE</div>
+<div class="title">Figure 19. Монитор сервера HTTP отображается в среде IDE</div>
</div>
</div>
<div class="sect2">
diff --git a/content/kb/docs/web/ajax-quickstart_zh_CN.html b/content/kb/docs/web/ajax-quickstart_zh_CN.html
index f4c4c04..df0a5e3 100644
--- a/content/kb/docs/web/ajax-quickstart_zh_CN.html
+++ b/content/kb/docs/web/ajax-quickstart_zh_CN.html
@@ -249,13 +249,31 @@ _ _
<p>选择 "File"（文件）> "New Project"（新建项目）。在 "Categories"（类别）下，选择 "Java Web"。在 "Projects"（项目）下选择 "Web Application"（Web 应用程序），然后单击 "Next"（下一步）。</p>
</li>
<li>
-<p>在 "Name and Location"（名称和位置）面板中，输入 <code>MyAjaxApp</code> 作为项目名称。使用 "Project Location"（项目位置）字段可以指定您计算机上项目的位置。将其他选项保留为默认设置，然后单击 "Next"（下一步）。
-image::images/java-name-location.png[title="为应用程序项目指定名称和位置"]</p>
+<p>在 "Name and Location"（名称和位置）面板中，输入 <code>MyAjaxApp</code> 作为项目名称。使用 "Project Location"（项目位置）字段可以指定您计算机上项目的位置。将其他选项保留为默认设置，然后单击 "Next"（下一步）。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/java-name-location.png" alt="java name location">
+</div>
+<div class="title">Figure 4. 为应用程序项目指定名称和位置</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>在 "Server and Settings"（服务器和设置）面板中，选择要将您的应用程序部署到的服务器。这里仅列出了已在 IDE 中注册的服务器。
-image::images/java-server-settings.png[title="指定应用程序将部署到的服务器"]</p>
+<p>在 "Server and Settings"（服务器和设置）面板中，选择要将您的应用程序部署到的服务器。这里仅列出了已在 IDE 中注册的服务器。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/java-server-settings.png" alt="java server settings">
+</div>
+<div class="title">Figure 5. 指定应用程序将部署到的服务器</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>接受其他默认设置，然后单击 "Finish"（完成）。项目在文件系统中生成，并在 IDE 中打开。</p>
</li>
@@ -271,7 +289,7 @@ image::images/java-server-settings.png[title="指定应用程序将部署到的
<div class="content">
<img src="images/java-proj-win.png" alt="java proj win">
</div>
-<div class="title">Figure 4. "Projects"（项目）窗口将显示 MyAjaxApp 项目</div>
+<div class="title">Figure 6. "Projects"（项目）窗口将显示 MyAjaxApp 项目</div>
</div>
<div class="paragraph">
<p>在开始编码前，请立即尝试运行该应用程序以确保正确设置了 IDE、您的服务器和浏览器之间的配置。</p>
@@ -292,7 +310,7 @@ image::images/java-server-settings.png[title="指定应用程序将部署到的
<div class="content">
<img src="images/palette.png" alt="palette">
</div>
-<div class="title">Figure 5. 显示 HTML 元素的 "Palette"（组件面板）</div>
+<div class="title">Figure 7. 显示 HTML 元素的 "Palette"（组件面板）</div>
</div>
<div class="paragraph">
<p>既然您确定已正确设置了您的环境，请首先将您的索引页转换成用户将查看的自动完成界面。</p>
@@ -329,7 +347,7 @@ image::images/java-server-settings.png[title="指定应用程序将部署到的
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>添加一些说明性文本以介绍文本字段的用途。您可以复制以下文本并将其粘贴在 <code><h1></code> 标记下方的某一位置：</p>
</li>
@@ -346,7 +364,7 @@ image::images/java-server-settings.png[title="指定应用程序将部署到的
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>向该页面中添加一个 HTML 窗体。可以利用 IDE "Palette"（组件面板）中列出的元素执行此操作。如果组件面板没有打开，请从主菜单中选择 "Window"（窗口）> "Palette"（组件面板）。然后，在 "HTML Forms"（HTML 窗体）下，单击某个窗体元素，并将其拖至该页面中您刚添加的 <code><p></code> 标记下的某一位置。此时将打开 "Insert Form"（插入窗体）对话框。指定以下内容：</p>
<div class="ulist">
@@ -358,19 +376,24 @@ image::images/java-server-settings.png[title="指定应用程序将部署到的
<p>"Method"（方法）：GET</p>
</li>
<li>
-<p>"Name"（名称）：autofillform
-image::images/insert-form.png[title=""Insert form"（插入窗体）对话框"]</p>
+<p>"Name"（名称）：autofillform</p>
</li>
</ul>
</div>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-form.png" alt="insert form">
+</div>
+<div class="title">Figure 8. "Insert form"（插入窗体）对话框</div>
+</div>
<div class="paragraph">
<p>单击 "OK"（确定）。HTML <code><form></code> 标记已插入到包含您所指定的属性的页面中。（GET 在默认情况下应用，因此没有进行显式声明。）</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>向该页面添加一个 HTML 表格。在 "Palette"（组件面板）中的 "HTML" 类别下，单击某个表格元素，并将其拖至 <code><form></code> 标记之间的位置。"Insert Table"（插入表格）对话框即打开。指定以下内容：</p>
<div class="ulist">
@@ -385,12 +408,21 @@ image::images/insert-form.png[title=""Insert form"（插入窗体）
<p>"Border Size"（边框大小）：0</p>
</li>
<li>
-<p>"Cell Padding"（单元格边距）：5
-image::images/insert-table.png[title=""Insert table"（插入表格）对话框"]</p>
+<p>"Cell Padding"（单元格边距）：5</p>
</li>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-table.png" alt="insert table">
+</div>
+<div class="title">Figure 9. "Insert table"（插入表格）对话框</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>在源代码编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）。此操作将对代码进行整理。现在，您的窗体应该如下显示：</p>
</li>
@@ -421,7 +453,7 @@ image::images/insert-table.png[title=""Insert table"（插入表格）
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>将以下文本键入到此表格第一行的第一列中（更改的内容以*粗体*显示）：</p>
</li>
@@ -433,7 +465,7 @@ image::images/insert-table.png[title=""Insert table"（插入表格）
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>在第一行的第二列中，手动键入以下代码，而不是从组件面板中拖动 "Text Input"（文本输入）字段（更改的内容以*粗体*显示）：</p>
</li>
@@ -450,8 +482,13 @@ image::images/insert-table.png[title=""Insert table"（插入表格）
</div>
</div>
<div class="paragraph">
-<p>在键入时，请尝试使用 IDE 内置的代码完成支持。例如，键入 <code><i</code>，然后按 Ctrl-空格组合键。建议的选项列表会显示在光标下方，并且选中元素的说明会显示在上方的框中。事实上，在源代码编辑器中编写代码时，可以随时按 Ctrl-空格键调出可能的选项。而且，如果只有一个可用的选项，按 Ctrl-空格键将自动完成元素名称。
-image::images/code-completion.png[title="在编辑器中按 Ctrl-空格键以调用代码完成和文档支持"]</p>
+<p>在键入时，请尝试使用 IDE 内置的代码完成支持。例如，键入 <code><i</code>，然后按 Ctrl-空格组合键。建议的选项列表会显示在光标下方，并且选中元素的说明会显示在上方的框中。事实上，在源代码编辑器中编写代码时，可以随时按 Ctrl-空格键调出可能的选项。而且，如果只有一个可用的选项，按 Ctrl-空格键将自动完成元素名称。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-completion.png" alt="code completion">
+</div>
+<div class="title">Figure 10. 在编辑器中按 Ctrl-空格键以调用代码完成和文档支持</div>
</div>
<div class="paragraph">
<p>您在上文中键入的 <code>onkeyup</code> 属性指向名为 <code>doCompletion()</code> 的 JavaScript 函数。每次在窗体文本字段中按下一个键时，此函数都会被调用，并映射到以上 Ajax <a href="#flow-diagram">流程图</a>中所描述的 JavaScript 调用。</p>
@@ -469,7 +506,7 @@ image::images/code-completion.png[title="在编辑器中按 Ctrl-空格键以调
<div class="content">
<img src="images/javascript-options.png" alt="javascript options">
</div>
-<div class="title">Figure 6. "Options"（选项）窗口中的 JavaScript 提示选项</div>
+<div class="title">Figure 11. "Options"（选项）窗口中的 JavaScript 提示选项</div>
</div>
<div class="paragraph">
<p>将 JavaScript 文件添加到此应用程序，然后开始实现 <code>doCompletion()</code>。</p>
@@ -521,7 +558,7 @@ function initRequest() {
<p>以上代码将对 Firefox 3 以及 Internet Explorer 版本 6 和 7 执行简单的浏览器兼容性检查。如果希望包含更多强健的代码以处理兼容性问题，建议您使用 <a href="http://www.quirksmode.org">http://www.quirksmode.org</a> 中的<a href="http://www.quirksmode.org/js/detect.html">浏览器检测脚本</a>。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>切换回索引页，然后在 <code><head></code> 标记之间添加对 JavaScript 文件的引用。</p>
</li>
@@ -536,7 +573,7 @@ function initRequest() {
<p>您可以按 Ctrl-Tab 组合键在源代码编辑器中打开的页面之间快速切换。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>在开始标记 <code><body></code> 中，插入对 <code>init()</code> 的调用。</p>
</li>
@@ -752,7 +789,7 @@ public class ComposerData {
<p>单击“完成”，此时 IDE 将创建此类并在源代码编辑器中打开该文件。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>在源代码编辑器中，粘贴以下代码：</p>
</li>
@@ -809,23 +846,39 @@ public class Composer {
<p>在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "New"（新建）> "Servlet" 以打开新建 Servlet 向导。（如果在默认情况下弹出式菜单中未显示 "Servlet"，请选择 "Other"（其他），并从 "Web" 类别中选择 "Servlet"。）</p>
</li>
<li>
-<p>将该 servlet 命名为 <code>AutoCompleteServlet</code>，并从 "Package"（包）字段的下拉列表中选择 <code>com.ajax</code>。单击 "Next"（下一步）。
-image::images/newservlet-name-location.png[]</p>
+<p>将该 servlet 命名为 <code>AutoCompleteServlet</code>，并从 "Package"（包）字段的下拉列表中选择 <code>com.ajax</code>。单击 "Next"（下一步）。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newservlet-name-location.png" alt="newservlet name location">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>在 "Configure Servlet Deployment"（配置 Servlet 部署）面板中，将 URL 模式更改为 <strong><code>/autocomplete</code></strong>，使之与以前在 <code>XMLHttpRequest</code> 对象中设置的 URL 匹配。
-image::images/newservlet-configure-deployment.png[]</p>
+<p>在 "Configure Servlet Deployment"（配置 Servlet 部署）面板中，将 URL 模式更改为 <strong><code>/autocomplete</code></strong>，使之与以前在 <code>XMLHttpRequest</code> 对象中设置的 URL 匹配。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newservlet-configure-deployment.png" alt="newservlet configure deployment">
+</div>
+</div>
<div class="paragraph">
<p>此面板可以省去手动向部署描述符添加这些详细信息所需的步骤。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>也可以选择 "Add servlet information to deployment descriptor"（将 Servlet 信息添加到部署描述符）。这样，您的项目将与下载的样例相同。在使用 IDE 的高级版本时，默认情况下用 <code>@WebServlet</code> 标注而不是部署描述符来注册 Servlet。如果您使用 <code>@WebServlet</code> 标注而不是部署描述符，该项目仍将工作。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>单击 "Finish"（完成）。该 servlet 随即创建，并在源代码编辑器中打开。</p>
</li>
@@ -840,16 +893,38 @@ image::images/newservlet-configure-deployment.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>将光标放在源代码编辑器中的 <code>AutoCompleteServlet</code> 类声明下。按 Alt-Insert 组合键（在 Mac 上按 Ctrl-I 组合键）打开 "Generate Code"（生成代码）弹出式菜单。
-image::images/insert-code.png[title="源代码编辑器中显示的 "Insert Code"（插入代码）弹出式菜单"]</p>
+<p>将光标放在源代码编辑器中的 <code>AutoCompleteServlet</code> 类声明下。按 Alt-Insert 组合键（在 Mac 上按 Ctrl-I 组合键）打开 "Generate Code"（生成代码）弹出式菜单。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/insert-code.png" alt="insert code">
+</div>
+<div class="title">Figure 12. 源代码编辑器中显示的 "Insert Code"（插入代码）弹出式菜单</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>选择 "Override Method"（覆盖方法）。在显示的对话框中，将显示 <code>AutoCompleteServlet</code> 继承的所有类。展开 GenericServlet 节点并选择 <code>init(Servlet Config config)</code>。
-image::images/new-override.png[title=""Override"（覆盖）对话框列出继承的类"]</p>
+<p>选择 "Override Method"（覆盖方法）。在显示的对话框中，将显示 <code>AutoCompleteServlet</code> 继承的所有类。展开 GenericServlet 节点并选择 <code>init(Servlet Config config)</code>。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-override.png" alt="new override">
+</div>
+<div class="title">Figure 13. "Override"（覆盖）对话框列出继承的类</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>单击 "OK"（确定）。<code>init()</code> 方法将添加到源代码编辑器中。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>为 <code>ServletContext</code> 对象添加一个变量并修改 <code>init()</code>（更改的内容以*粗体*显示）：</p>
</li>
@@ -866,15 +941,20 @@ public void init(ServletConfig *config*) throws ServletException {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
-<p>为 <code>ServletContext</code> 添加一个导入语句。通过单击源代码编辑器左旁注中显示的灯泡图标可以执行此操作
-image::images/import-hint.png[title="导入提示显示在源代码编辑器的左旁注中"]</p>
+<p>为 <code>ServletContext</code> 添加一个导入语句。通过单击源代码编辑器左旁注中显示的灯泡图标可以执行此操作</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/import-hint.png" alt="import hint">
+</div>
+<div class="title">Figure 14. 导入提示显示在源代码编辑器的左旁注中</div>
+</div>
<div class="paragraph">
-<p><code>doGet()</code> 方法需要解析请求的 URL，从数据存储中检索数据，并准备 XML 格式的响应。注意，方法声明是在创建类时生成的。要查看它，您可能需要通过单击左旁注中的 "expand"（展开）图标 (image::images/expand-icon.png[]) 来展开 HttpServlet 方法。</p>
+<p><code>doGet()</code> 方法需要解析请求的 URL，从数据存储中检索数据，并准备 XML 格式的响应。注意，方法声明是在创建类时生成的。要查看它，您可能需要通过单击左旁注中的 "expand"（展开）图标 (<span class="image"><img src="images/expand-icon.png" alt="expand icon"></span>) 来展开 HttpServlet 方法。</p>
</div>
<div class="olist arabic">
<ol class="arabic">
@@ -890,8 +970,14 @@ private HashMap composers = compData.getComposers();</code></pre>
</div>
</div>
<div class="paragraph">
-<p>这将创建所有作曲家数据的 <code>HashMap</code>，然后由 <code>doGet()</code> 使用。
-2. 向下滚动到 <code>doGet()</code> 并按如下方式实现该方法：</p>
+<p>这将创建所有作曲家数据的 <code>HashMap</code>，然后由 <code>doGet()</code> 使用。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>向下滚动到 <code>doGet()</code> 并按如下方式实现该方法：</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1108,8 +1194,14 @@ public void doGet(HttpServletRequest request, HttpServletResponse response)
</div>
</div>
<div class="paragraph">
-<p>此表格的第二行包含其他 HTML 表格。此表格表示将用于填写作曲家名字的自动完成框。
-2. 在源代码编辑器中打开 <code>javascript.js</code>，并在文件顶部添加以下三个变量。</p>
+<p>此表格的第二行包含其他 HTML 表格。此表格表示将用于填写作曲家名字的自动完成框。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
+<li>
+<p>在源代码编辑器中打开 <code>javascript.js</code>，并在文件顶部添加以下三个变量。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1119,7 +1211,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>将以下行（以*粗体*显示）添加到 <code>init()</code> 函数中。</p>
</li>
@@ -1136,8 +1228,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p><code>init()</code> 的一个作用是使修改索引页 DOM 的其他函数可以访问索引页内的元素。
-4. 将 <code>appendComposer()</code> 添加到 <code>javascript.js</code>。</p>
+<p><code>init()</code> 的一个作用是使修改索引页 DOM 的其他函数可以访问索引页内的元素。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
+<li>
+<p>将 <code>appendComposer()</code> 添加到 <code>javascript.js</code>。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1170,8 +1268,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>此函数创建了一个新的表行，并用其所含的三个参数传递的数据将指向作曲家的链接插入此表行中，然后将此行插入索引页的 <code>complete-table</code> 元素中。
-5. 将 <code>getElementY()</code> 添加到 <code>javascript.js</code>。</p>
+<p>此函数创建了一个新的表行，并用其所含的三个参数传递的数据将指向作曲家的链接插入此表行中，然后将此行插入索引页的 <code>complete-table</code> 元素中。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
+<li>
+<p>将 <code>getElementY()</code> 添加到 <code>javascript.js</code>。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1198,7 +1302,7 @@ var autoRow;</code></pre>
<p>*注：*请在 <a href="http://www.quirksmode.org/">http://www.quirksmode.org/</a> 上查看 <code>offset</code> 的<a href="http://www.quirksmode.org/js/findpos.html">说明</a>。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>将 <code>clearTable()</code> 添加到 <code>javascript.js</code>。</p>
</li>
@@ -1217,8 +1321,14 @@ var autoRow;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>此函数用于将 <code>complete-table</code> 元素的显示方式设置为“无”（也就是使其不可见），并删除所有已创建的现有作曲家名字条目。
-7. 修改 <code>callback()</code> 函数以便每次从服务器接收到新数据时都调用 <code>clearTable()</code>。因此，在用新条目填充自动完成框之前其中已存在的任何作曲家条目均会删除。</p>
+<p>此函数用于将 <code>complete-table</code> 元素的显示方式设置为“无”（也就是使其不可见），并删除所有已创建的现有作曲家名字条目。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
+<li>
+<p>修改 <code>callback()</code> 函数以便每次从服务器接收到新数据时都调用 <code>clearTable()</code>。因此，在用新条目填充自动完成框之前其中已存在的任何作曲家条目均会删除。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -1235,7 +1345,7 @@ var autoRow;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>将 <code>parseMessages()</code> 添加到 <code>javascript.js</code>。</p>
</li>
@@ -1351,10 +1461,14 @@ var autoRow;</code></pre>
<p>*注：*如果索引页为 <code>index.jsp</code> ，则需要更改链接以返回到该索引页。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>在该项目的“Web 页”文件夹下创建另一个 JSP 文件。将该文件命名为 <code>error.jsp</code>。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>将 <code>error.jsp</code> 中的占位符代码替换为以下代码：</p>
</li>
@@ -1392,11 +1506,16 @@ var autoRow;</code></pre>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>在 "Projects"（项目）窗口中，右键单击该项目节点并选择 "Run"（运行）。此项目会重新编译，并部署到目标服务器。此时您的浏览器会打开，并可以查看索引页。
-image::images/no-css.png[title="不带样式表的成功部署"]</p>
+<p>在 "Projects"（项目）窗口中，右键单击该项目节点并选择 "Run"（运行）。此项目会重新编译，并部署到目标服务器。此时您的浏览器会打开，并可以查看索引页。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/no-css.png" alt="no css">
+</div>
+<div class="title">Figure 15. 不带样式表的成功部署</div>
+</div>
<div class="paragraph">
<p>要向您的应用程序添加一个样式表，只需创建 <code>.css</code> 文件，并从您的演示页面链接到此文件。当您使用 <code>.css</code> 文件时，IDE 会为您提供代码完成支持，以及以下有助于生成和编辑样式表规则的窗口。</p>
</div>
@@ -1430,7 +1549,7 @@ image::images/no-css.png[title="不带样式表的成功部署"]</p>
<p>此时会创建新文件，并在编辑器中打开。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>在编辑器的 <code>stylesheet.css</code> 中键入以下规则。您可以使用 IDE 的代码完成支持，方法是：在希望查看建议时按 Ctrl-空格组合键。</p>
</li>
@@ -1503,18 +1622,23 @@ a:hover {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
-<p>选择 "Window"（窗口）> "Web" > "CSS Styles"（CSS 样式），打开 "CSS Styles"（CSS 样式）窗口。
-image::images/css-styles-window.png[title=""CSS Styles"（CSS 样式）窗口显示 h1 规则属性"]</p>
+<p>选择 "Window"（窗口）> "Web" > "CSS Styles"（CSS 样式），打开 "CSS Styles"（CSS 样式）窗口。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/css-styles-window.png" alt="css styles window">
+</div>
+<div class="title">Figure 16. "CSS Styles"（CSS 样式）窗口显示 h1 规则属性</div>
+</div>
<div class="paragraph">
-<p>使用 "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 属性）图标"]) 可以添加属性。</p>
+<p>使用 "CSS Styles"（CSS 样式）窗口可以快速查看属性和编辑样式规则。当在 "CSS Styles"（CSS 样式）窗口的上方窗格中选择规则时，您可以在下方窗格中查看该规则的属性。单击上方窗格工具栏中的 "Edit CSS Rules"（编辑 CSS 规则）图标 (<span class="image"><img src="images/newcssrule.png" alt="newcssrule" title=""New CSS Property"（新建 CSS 属性）图标"></span>)，可以为样式表添加 CSS 规则。通过编辑属性表单可以在下方窗格中修改规则，通过单击下方窗格工具栏中的 "Add Property"（添加属性）图标 (<span class="image"><img src="images/newcssproperty.png" alt="newcssproperty" title=""New CSS Property"（新建 CSS 属性）图标"></span>) 可以添加属性。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>切换到源代码编辑器中的索引页，并在 <code><head></code> 标记之间添加对样式表的引用。</p>
</li>
@@ -1526,7 +1650,7 @@ image::images/css-styles-window.png[title=""CSS Styles"（CSS 样式
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>将样式表中定义的 <code>popupBox</code> 类添加到 <code>complete-table</code> 元素中（更改的内容以*粗体*显示）。</p>
</li>
@@ -1548,7 +1672,7 @@ image::images/css-styles-window.png[title=""CSS Styles"（CSS 样式
<div class="content">
<img src="images/css-completion.png" alt="css completion">
</div>
-<div class="title">Figure 7. 编辑器中的 CSS 代码完成</div>
+<div class="title">Figure 17. 编辑器中的 CSS 代码完成</div>
</div>
<div class="paragraph">
<p>如 <code>stylesheet.css</code> 中所示，此规则确定 <code>complete-table</code> 元素的位置，以便该元素显示在略靠其父元素右侧的位置。</p>
@@ -1587,7 +1711,7 @@ image::images/css-styles-window.png[title=""CSS Styles"（CSS 样式
<p>*注：*对于 GlassFish Server，此选项显示在 "Common"（通用）标签下。对于 Tomcat，则位于 "Connection"（连接）标签下。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>单击 "Close"（关闭）。</p>
</li>
@@ -1603,7 +1727,7 @@ image::images/css-styles-window.png[title=""CSS Styles"（CSS 样式
<div class="content">
<img src="images/http-monitor.png" alt="http monitor">
</div>
-<div class="title">Figure 8. HTTP 服务器监视器显示在 IDE 中</div>
+<div class="title">Figure 18. HTTP 服务器监视器显示在 IDE 中</div>
</div>
<div class="paragraph">
<p>当用户在自动完成字段中输入字符时，您可以验证作为异步请求的结果从服务器发送的 XML 数据。</p>
@@ -1622,7 +1746,7 @@ image::images/css-styles-window.png[title=""CSS Styles"（CSS 样式
<div class="content">
<img src="images/xml-data.png" alt="xml data">
</div>
-<div class="title">Figure 9. HTTP 服务器监视器显示在 IDE 中</div>
+<div class="title">Figure 19. HTTP 服务器监视器显示在 IDE 中</div>
</div>
</div>
<div class="sect2">
diff --git a/content/kb/docs/web/applets.html b/content/kb/docs/web/applets.html
index 498c906..c40ab1f 100644
--- a/content/kb/docs/web/applets.html
+++ b/content/kb/docs/web/applets.html
@@ -192,9 +192,17 @@ version 7.x or 8.x</p></td>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Under Project Name, type <code>HelloApplet</code> . Change the Project Location to any folder on your computer.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Click Finish. If you imported an applet source file, <a href="#runanddebug">run it</a>.</p>
</li>
@@ -217,10 +225,14 @@ version 7.x or 8.x</p></td>
<p><strong>Note:</strong> 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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Right-click the HelloApplet project node in the Projects window and select New > Other (Ctrl-N).</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Under Categories, select Java. Under File Types, select Applet.</p>
</li>
@@ -233,10 +245,14 @@ version 7.x or 8.x</p></td>
<p>Click Next.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Under Class Name, type <code>MyApplet</code> . Under Package, type <code>org.me.hello</code> .</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Click Finish.</p>
</li>
@@ -246,7 +262,7 @@ version 7.x or 8.x</p></td>
<p>The IDE creates the applet source file in the specified package. The applet source file opens in the Source editor.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Define your applet class by copying and pasting the following code over the existing default code:</p>
</li>
@@ -379,21 +395,21 @@ version 7.x or 8.x</p></td>
<ul>
<li>
<p>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.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Confirm that the JAR that contains the applet source file is listed in the table in the Project Properties window. Click OK.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>By default, the applet JAR file will be copied to the web application’s web page library, which is the <code>build/web </code> folder. The <code>build/web </code> folder is the root directory of the application and is displayed as " <code>/</code> " 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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Click Close to close the Project Properties window.</p>
</li>
@@ -427,6 +443,10 @@ version 7.x or 8.x</p></td>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>Embed the applet in the file by adding the following applet tag anywhere between the file’s <code><body></code> <code></body></code> tags:</p>
<div class="ulist">
@@ -455,16 +475,16 @@ version 7.x or 8.x</p></td>
</li>
<li>
<p><code>HelloApplet.jar</code> is the JAR file that contains the applet.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Right-click the JSP node or HTML node in the Projects window and choose Run File from the contextual menu.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>The server deploys the JSP file or HTML file in the IDE’s default browser.</p>
</div>
diff --git a/content/kb/docs/web/applets_ja.html b/content/kb/docs/web/applets_ja.html
index df3775a..d13e48e 100644
--- a/content/kb/docs/web/applets_ja.html
+++ b/content/kb/docs/web/applets_ja.html
@@ -192,9 +192,17 @@ _ _
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>「プロジェクト名」に「 <code>HelloApplet</code> 」と入力します。「プロジェクトの場所」をローカル・コンピュータ上の任意のフォルダに変更します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>「終了」をクリックします。アプレット・ソース・ファイルをインポートした場合は、<a href="#runanddebug">それを実行</a>します。</p>
</li>
@@ -217,10 +225,14 @@ _ _
<p>*注意: *たとえば、JDK 6を選択した場合、それより古いバージョンのJREまたはJavaブラウザ・プラグインが存在するマシンでは、アプレットが動作しない可能性があります。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>「プロジェクト」ウィンドウの「HelloApplet」プロジェクト・ノードを右クリックし、「新規」>「その他」([Ctrl]-[N])を選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>「カテゴリ」から「Java」を選択します。「ファイル・タイプ」から「アプレット」を選択します。</p>
</li>
@@ -233,10 +245,14 @@ _ _
<p>「次」をクリックします。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>「クラス名」に「 <code>MyApplet</code> 」と入力します。「パッケージ」に「 <code>org.me.hello</code> 」と入力します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>「終了」をクリックします。</p>
</li>
@@ -246,7 +262,7 @@ _ _
<p>IDEで、アプレット・ソース・ファイルが指定したパッケージ内に作成されます。ソース・エディタが開いて、アプレット・ソース・ファイルが表示されます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>既存のデフォルト・コードの上に次のコードを コピーして貼り付け、アプレット・クラスを定義します。</p>
</li>
@@ -379,21 +395,21 @@ _ _
<ul>
<li>
<p>IDEプロジェクト内にないアプレットJARファイルを使用している場合、「ファイル/フォルダの追加」をクリックし、JARファイルを含むフォルダを特定します。「選択」をクリックします。</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>アプレットのソース・ファイルを含むJARが「プロジェクト・プロパティ」ウィンドウの表にリストされていることを確認します。「OK」をクリックします。</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>デフォルトでは、アプレットJARファイルはWebアプリケーションのWebページ・ライブラリ( <code>build/web</code> フォルダ)にコピーされます。 <code>build/web</code> フォルダはアプリケーションのルート・ディレクトリで、表の「WAR内のパス」列に" <code>/</code> "と表示されます。「WAR内のパス」列にアプレットの新しい場所を入力すると、WAR内のアプレットの場所を変更できます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>「閉じる」をクリックして、「プロジェクト・プロパティ」ウィンドウを閉じます。</p>
</li>
@@ -427,6 +443,10 @@ _ _
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>次のように、ファイルの <code><body></code> <code></body></code> の2つのタグの間の任意の場所にアプレット・タグを追加することで、アプレットをファイルに埋め込みます。</p>
<div class="ulist">
@@ -455,16 +475,16 @@ _ _
</li>
<li>
<p><code>HelloApplet.jar</code> はアプレットを格納するJARファイル名です。</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>「プロジェクト」ウィンドウでこのJSPノードまたはHTMLノードを右クリックし、コンテキスト・メニューから「ファイルを実行」を選択します。</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>サーバーによって、JSPファイルまたはHTMLファイルがIDEのデフォルト・ブラウザにデプロイされます。</p>
</div>
diff --git a/content/kb/docs/web/applets_pt_BR.html b/content/kb/docs/web/applets_pt_BR.html
index a5b12b2..39cd20e 100644
--- a/content/kb/docs/web/applets_pt_BR.html
+++ b/content/kb/docs/web/applets_pt_BR.html
@@ -192,9 +192,17 @@ versão 7.x ou 8.x</p></td>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Em Nome do Projeto, Digite <code>HelloApplet</code> . Altere o Local do Projeto para qualquer pasta do computador.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Clique em Finalizar. Se você tiver importado um arquivo de código-fonte do applet, <a href="#runanddebug">execute-o</a>.</p>
</li>
@@ -217,10 +225,14 @@ versão 7.x ou 8.x</p></td>
<p><strong>Observação:</strong> 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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Clique com o botão direito do mouse no nó do projeto HelloApplet na janela Projetos e selecione Novo > Outro (Ctrl-N).</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Em Categorias, selecione Java. Em Tipos de Arquivos, selecione Applet.</p>
</li>
@@ -233,10 +245,14 @@ versão 7.x ou 8.x</p></td>
<p>Clique em Próximo.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Em Nome da Classe, Digite <code>MyApplet</code> . Em Pacote, digite <code>org.me.hello</code> .</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Clique em Finalizar.</p>
</li>
@@ -246,7 +262,7 @@ versão 7.x ou 8.x</p></td>
<p>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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Defina a classe do seu applet, copiando e colando o seguinte código sobre o código default existente:</p>
</li>
@@ -379,21 +395,21 @@ versão 7.x ou 8.x</p></td>
<ul>
<li>
<p>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.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>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.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>Por default, o arquivo JAR do applet será copiado para a biblioteca da página Web da aplicação Web, que é a pasta <code>build/web </code> . A pasta <code>build/web </code> é o diretório-raiz da aplicação e é exibido como " <code>/</code> " 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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Clique em Fechar para fechar a janela Propriedades do Projeto.</p>
</li>
@@ -427,6 +443,10 @@ versão 7.x ou 8.x</p></td>
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>Incorpore o applet no arquivo, adicionando a seguinte tag de applet em qualquer local entre as tags <code><body></code> <code></body></code> do arquivo:</p>
<div class="ulist">
@@ -455,16 +475,16 @@ versão 7.x ou 8.x</p></td>
</li>
<li>
<p><code>HelloApplet.jar</code> é o arquivo JAR que contém o applet.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>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.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>O servidor implanta o arquivo JSP ou o arquivo HTML no browser default do IDE.</p>
</div>
diff --git a/content/kb/docs/web/applets_ru.html b/content/kb/docs/web/applets_ru.html
index 1109b70..31e140b 100644
--- a/content/kb/docs/web/applets_ru.html
+++ b/content/kb/docs/web/applets_ru.html
@@ -192,9 +192,17 @@ _ _
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>В поле "Имя проекта" введите <code>HelloApplet</code> . В области "Расположение проекта" укажите любую папку на своем компьютере.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Нажмите кнопку "Завершить". Если файл исходного кода апплета был импортирован, <a href="#runanddebug">запустите его</a>.</p>
</li>
@@ -217,10 +225,14 @@ _ _
<p><strong>Примечание.</strong> Если выбрана версия JDK 1.6, апплет может не запускаться на компьютерах, на которых установлена предыдущая версия JRE или подключаемого модуля Java для браузера.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Нажмите узел HelloApplet в окне "Проекты" и выберите "Новый" > "Другое" (Ctrl-N).</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>В области "Категории" выберите "Java". В области "Типы файлов" выберите "Апплет".</p>
</li>
@@ -233,10 +245,14 @@ _ _
<p>Нажмите кнопку "Далее".</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>В области "Имя класса" введите <code>MyApplet</code> . В поле "Пакет" введите <code>org.me.hello</code> .</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Нажмите кнопку "Завершить".</p>
</li>
@@ -246,7 +262,7 @@ _ _
<p>Среда IDE создает исходный файл апплет в указанном пакете. Исходный файл апплета открывается в редакторе исходного кода.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Определите класс своего апплета, заменив существующий стандартный код следующим кодом:</p>
</li>
@@ -379,21 +395,21 @@ _ _
<ul>
<li>
<p>Если используемый файл апплета JAR не входит в проект IDE, нажмите 'Добавить файл/папку' и найдите папку с файлом JAR. Нажмите 'Выбрать'.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Убедитесь, что JAR с исходным файлом апплета отображается в таблице в окне 'Свойства проекта'. Нажмите кнопку "ОК".</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>По умолчанию файл JAR апплета будет скопирован в библиотеку страницы веб-приложения (папку <code>build/web </code> ). Папка <code>build/web </code> является корневым каталогом приложения и отображается в таблице как " <code>/</code> " в переменной Path в столбце WAR. Вы можете изменить расположение апплета в WAR. Для этого введите новое расположение апплета в переменной Path в столбце WAR.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Нажмите ОК, чтобы закрыть диалоговое окно 'Свойства проекта'.</p>
</li>
@@ -427,6 +443,10 @@ _ _
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>Встройте апплет в файл, добавив следующий тег апплета в любом месте в рамках тегов <code><body></code> <code></body></code> .</p>
<div class="ulist">
@@ -455,16 +475,16 @@ _ _
</li>
<li>
<p><code>HelloApplet.jar</code> - файл JAR, содержащий апплет.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>В окне "Проекты" щелкните узел JSP или HTML правой кнопкой мыши и в контекстном меню выберите "Выполнить файл".</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>Сервер развертывает файл JSP или HTML в браузере среды IDE, установленном по умолчанию.</p>
</div>
diff --git a/content/kb/docs/web/applets_zh_CN.html b/content/kb/docs/web/applets_zh_CN.html
index 4a4127f..8a48b1b 100644
--- a/content/kb/docs/web/applets_zh_CN.html
+++ b/content/kb/docs/web/applets_zh_CN.html
@@ -192,9 +192,17 @@ _ _
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>在 "Project Name"（项目名称）下，键入 <code>HelloApplet</code> 。将 "Project Location"（项目位置）更改为计算机上的任意文件夹。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>单击 "Finish"（完成）。如果已导入一个小应用程序源文件，则<a href="#runanddebug">运行该文件</a>。</p>
</li>
@@ -217,10 +225,14 @@ _ _
<p>*注：*例如，如果选择 JDK 6，则小应用程序可能不会在具有旧版本 JRE 或 Java 浏览器插件的计算机上运行。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>右键单击 "Projects"（项目）窗口中的 HelloApplet 项目节点，然后选择 "New"（新建）> "Other"（其他）（Ctrl-N 组合键）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>在 "Categories"（类别）下，选择 "Java"。在 "File Types"（文件类型）下，选择 "Applet"（小应用程序）。</p>
</li>
@@ -233,10 +245,14 @@ _ _
<p>单击 "Next"（下一步）。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>在 "Class Name"（类名）下，键入 <code>MyApplet</code> 。在 "Package"（包）下，键入 <code>org.me.hello</code> 。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>单击 "Finish"（完成）。</p>
</li>
@@ -246,7 +262,7 @@ _ _
<p>IDE 会在指定的包中创建小应用程序源文件。小应用程序源文件会在源代码编辑器中打开。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>通过复制以下代码并将其粘贴到现有默认代码上来定义您的小应用程序类：</p>
</li>
@@ -379,21 +395,21 @@ _ _
<ul>
<li>
<p>如果您使用的小应用程序 JAR 文件不在 IDE 项目中，请单击 "Add File/Folder"（添加文件/文件夹），然后查找包含该 JAR 文件的文件夹。单击 "Choose"（选择）。</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>确认在 "Project Properties"（项目属性）窗口的表中列出包含小应用程序源文件的 JAR。单击 "OK"（确定）。</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>默认情况下，会将小应用程序 JAR 文件复制到 Web 应用程序的 Web 页库，即 <code>build/web </code> 文件夹中。 <code>build/web</code> 文件夹是应用程序的根目录，且在表 WAR 列的 "Path"（路径）中显示为 " <code>/</code> "。通过在 WAR 列的 "Path"（路径）中键入小应用程序的新位置，可以修改 WAR 中的小应用程序位置。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>单击 "Close"（关闭）以关闭 "Project Properties"（项目属性）窗口。</p>
</li>
@@ -427,6 +443,10 @@ _ _
</ul>
</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>通过在文件的 <code><body></code> <code></body></code> 标记之间的任意位置添加以下小应用程序标记，将小应用程序嵌入到该文件中：</p>
<div class="ulist">
@@ -455,16 +475,16 @@ _ _
</li>
<li>
<p><code>HelloApplet.jar</code> 是包含此小应用程序的 JAR 文件。</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>右键单击 "Projects"（项目）窗口中的 JSP 节点或 HTML 节点，然后从上下文菜单中选择 "Run File"（运行文件）。</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>服务器将 JSP 文件或 HTML 文件部署在 IDE 的默认浏览器中。</p>
</div>
diff --git a/content/kb/docs/web/framework-adding-support.html b/content/kb/docs/web/framework-adding-support.html
index ca4d7f3..103f406 100644
--- a/content/kb/docs/web/framework-adding-support.html
+++ b/content/kb/docs/web/framework-adding-support.html
@@ -258,24 +258,37 @@
<p>NetBeans plugins can be identified by the <code>.nbm</code> extension.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>From the IDE’s main menu, choose Tools > Plugins to open the Plugin Manager.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Select the Downloaded tab, then click the Add Plugins button.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>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"]</p>
+<p>In the Add Plugins dialog, navigate to the directory that contains the plugins and select the NetBeans plugins. Click Open.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/plugin-archive-contents.png" alt="plugin archive contents">
+</div>
+<div class="title">Figure 2. The zip archive contains the NetBeans plugins</div>
+</div>
<div class="paragraph">
<p>Hold down the Ctrl key to select multiple items.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>In the Plugins manager, select each of the Struts2 plugins.</p>
</li>
@@ -294,7 +307,7 @@ image::images/plugin-archive-contents.png[title="The zip archive contains the Ne
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Click Install to open the NetBeans IDE Installer, then click Next and accept the license agreement.</p>
</li>
@@ -304,7 +317,7 @@ image::images/plugin-archive-contents.png[title="The zip archive contains the Ne
<p><strong>Note.</strong> 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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Restart the IDE to allow changes to take effect.</p>
</li>
@@ -338,7 +351,7 @@ image::images/plugin-archive-contents.png[title="The zip archive contains the Ne
<div class="content">
<img src="images/uc-customizer.png" alt="uc customizer">
</div>
-<div class="title">Figure 2. Update Center Customizer dialog box</div>
+<div class="title">Figure 3. Update Center Customizer dialog box</div>
</div>
</div>
<div class="sect2">
@@ -435,11 +448,16 @@ image::images/plugin-archive-contents.png[title="The zip archive contains the Ne
<p>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).</p>
</li>
<li>
-<p>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"]</p>
+<p>In the Frameworks panel of the New Project wizard, choose the framework that you want to add. Click Finish.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newproject-wizard-frameworks-sm.png" alt="newproject wizard frameworks sm">
+</div>
+<div class="title">Figure 4. Struts 2 Support listed in Frameworks panel of the New Project wizard</div>
+</div>
<div class="paragraph">
<p>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 [...]
</div>
@@ -450,7 +468,7 @@ image::images/newproject-wizard-frameworks-sm.png[title="Struts 2 Support listed
<div class="content">
<img src="images/project-structure-frameworks.png" alt="project structure frameworks">
</div>
-<div class="title">Figure 3. Logical structure of Struts web application displayed in Projects window</div>
+<div class="title">Figure 5. Logical structure of Struts web application displayed in Projects window</div>
</div>
</div>
<div class="sect2">
@@ -472,17 +490,31 @@ image::images/newproject-wizard-frameworks-sm.png[title="Struts 2 Support listed
<p>When you select Frameworks, the right panel displays a Used Frameworks text area, which is empty if the application does not use a framework.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>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"]</p>
+<p>Click the Add button, then select the framework you want to use and click OK.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/properties-add-framework.png" alt="properties add framework">
+</div>
+<div class="title">Figure 6. JavaServer Faces framework selected in the Add Framework dialog opened from the Project Properties window</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>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"]</p>
+<p>Depending on the chosen framework, you can specify further framework-specific configuration settings or components in the Project Properties window.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-icefaces.png" alt="add icefaces">
+</div>
+<div class="title">Figure 7. Adding a library for the ICEfaces component suite to the project</div>
+</div>
<div class="paragraph">
<p>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.</p>
</div>
@@ -490,7 +522,7 @@ image::images/add-icefaces.png[title="Adding a library for the ICEfaces componen
<p><strong>Notes.</strong> 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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>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.
<a href="/about/contact_form.html?to=3&subject=Feedback:%20Adding%20Web%20Framework%20Support">+ Send Feedback on This Tutorial+</a></p>
diff --git a/content/kb/docs/web/framework-adding-support_ja.html b/content/kb/docs/web/framework-adding-support_ja.html
index 03e5e19..933cc00 100644
--- a/content/kb/docs/web/framework-adding-support_ja.html
+++ b/content/kb/docs/web/framework-adding-support_ja.html
@@ -258,24 +258,37 @@
<p>NetBeansプラグインは <code>.nbm</code> 拡張子によって識別できます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>IDEのメイン・メニューから、「ツール」>「プラグイン」を選択し、プラグイン・マネージャを開きます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>「ダウンロード済」タブを選択し、「プラグインの追加」ボタンをクリックします。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>「プラグインの追加」ダイアログで、プラグインが入っているディレクトリに移動し、NetBeansプラグインを選択します。「開く」をクリックします。
-image::images/plugin-archive-contents.png[title="NetBeansプラグインが含まれているzipアーカイブ"]</p>
+<p>「プラグインの追加」ダイアログで、プラグインが入っているディレクトリに移動し、NetBeansプラグインを選択します。「開く」をクリックします。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/plugin-archive-contents.png" alt="plugin archive contents">
+</div>
+<div class="title">Figure 2. NetBeansプラグインが含まれているzipアーカイブ</div>
+</div>
<div class="paragraph">
<p>[Ctrl]キーを押しながら、複数の項目を選択します。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>プラグイン・マネージャで、各Struts2プラグインを選択します。</p>
</li>
@@ -294,7 +307,7 @@ image::images/plugin-archive-contents.png[title="NetBeansプラグインが含
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>「インストール」をクリックしてNetBeans IDEインストーラを開き、「次」をクリックしてライセンス契約書に同意します。</p>
</li>
@@ -304,7 +317,7 @@ image::images/plugin-archive-contents.png[title="NetBeansプラグインが含
<p>*注意:*検証の警告が表示された場合、「続行」をクリックしてプラグインをインストールします。署名のないプラグインをインストールしようとすると、検証の警告が発生します。一般に、プラグインはすべて信頼できますが、署名のないプラグインをインストールする場合は自己責任で実行してください。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>変更を有効にするには、IDEを再起動します。</p>
</li>
@@ -338,7 +351,7 @@ image::images/plugin-archive-contents.png[title="NetBeansプラグインが含
<div class="content">
<img src="images/uc-customizer.png" alt="uc customizer">
</div>
-<div class="title">Figure 2. 「更新センター・カスタマイザ」ダイアログ・ボックス</div>
+<div class="title">Figure 3. 「更新センター・カスタマイザ」ダイアログ・ボックス</div>
</div>
</div>
<div class="sect2">
@@ -431,11 +444,16 @@ image::images/plugin-archive-contents.png[title="NetBeansプラグインが含
<p>ウィザードのステップを実行し、すべてデフォルトの設定を受け付けます。IDEにすでに登録されているサーバーのいずれかを選択することで(GlassFishサーバーまたはTomcat)、アプリケーションをデプロイするサーバーを指定します。</p>
</li>
<li>
-<p>新規プロジェクト・ウィザードの「フレームワーク」パネルで、追加するフレームワークを選択します。「終了」をクリックします。
-image::images/newproject-wizard-frameworks-sm.png[title="新規プロジェクト・ウィザードの「フレームワーク」パネルに表示されたStruts 2サポート"]</p>
+<p>新規プロジェクト・ウィザードの「フレームワーク」パネルで、追加するフレームワークを選択します。「終了」をクリックします。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newproject-wizard-frameworks-sm.png" alt="newproject wizard frameworks sm">
+</div>
+<div class="title">Figure 4. 新規プロジェクト・ウィザードの「フレームワーク」パネルに表示されたStruts 2サポート</div>
+</div>
<div class="paragraph">
<p>この例では、「フレームワーク」パネルでStruts2フレームワークのサポートが選択されています。「フレームワーク」パネルに、Struts 1.3.8 (IDEにバンドルされている)またはStruts2 (プラグインのインストールによって追加された)を選択するオプションが提示されるようになったことがわかります。Struts 2サポート・プラグインにより、新規プロジェクト・ウィザードにStruts2オプションが追加され、「構成」と「ライブラリ」のオプションを含むタブが表示されます。「構成」タブには、プロジェクトにサンプル・ページを作成するオプションがあります。「ライブラリ」タブでは、クラスパスに追加するStruts2ライブラリのバージョンを選択できます。</p>
</div>
@@ -446,7 +464,7 @@ image::images/newproject-wizard-frameworks-sm.png[title="新規プロジェク
<div class="content">
<img src="images/project-structure-frameworks.png" alt="project structure frameworks">
</div>
-<div class="title">Figure 3. 「プロジェクト」ウィンドウに表示されたStruts Webアプリケーションの論理構造</div>
+<div class="title">Figure 5. 「プロジェクト」ウィンドウに表示されたStruts Webアプリケーションの論理構造</div>
</div>
</div>
<div class="sect2">
@@ -468,17 +486,31 @@ image::images/newproject-wizard-frameworks-sm.png[title="新規プロジェク
<p>「フレームワーク」を選択すると、右パネルに「使用しているフレームワーク」テキスト領域が表示されます。アプリケーションがフレームワークを使用していない場合、この領域は空です。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>「追加」ボタンをクリックし、使用するフレームワークを選択して、「OK」をクリックします。
-image::images/properties-add-framework.png[title="「プロジェクト・プロパティ」ウィンドウから開かれた「フレームワークの追加」ダイアログで選択されたJavaServer Facesフレームワーク"]</p>
+<p>「追加」ボタンをクリックし、使用するフレームワークを選択して、「OK」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/properties-add-framework.png" alt="properties add framework">
+</div>
+<div class="title">Figure 6. 「プロジェクト・プロパティ」ウィンドウから開かれた「フレームワークの追加」ダイアログで選択されたJavaServer Facesフレームワーク</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>選択したフレームワークに応じて、「プロジェクト・プロパティ」ウィンドウでフレームワーク固有の構成設定またはコンポーネントをさらに指定できます。
-image::images/add-icefaces.png[title="プロジェクトへのICEfacesコンポーネント・スイートのライブラリの追加"]</p>
+<p>選択したフレームワークに応じて、「プロジェクト・プロパティ」ウィンドウでフレームワーク固有の構成設定またはコンポーネントをさらに指定できます。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-icefaces.png" alt="add icefaces">
+</div>
+<div class="title">Figure 7. プロジェクトへのICEfacesコンポーネント・スイートのライブラリの追加</div>
+</div>
<div class="paragraph">
<p>たとえば、ICEfacesコンポーネント・スイートを指定する場合は、「プロジェクト・プロパティ」ウィンドウの「コンポーネント」タブで「ICEfaces」を選択し、ICEfacesライブラリを指定できます。</p>
</div>
@@ -486,7 +518,7 @@ image::images/add-icefaces.png[title="プロジェクトへのICEfacesコンポ
<p>*注意:*JSFコンポーネントのライブラリは、IDEに含まれていません。コンポーネント・スイートを使用するには、必要なライブラリをダウンロードし、「プロジェクト・プロパティ」ウィンドウでプロジェクト・クラスパスに追加できるNetBeansライブラリを作成する必要があります。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>「OK」をクリックして選択内容を確認し、「プロジェクト・プロパティ」ウィンドウを閉じます。フレームワーク固有のアーティファクトとライブラリがプロジェクトに追加され、「プロジェクト」ウィンドウで確認できます。
<a href="/about/contact_form.html?to=3&subject=Feedback:%20Adding%20Web%20Framework%20Support">+ このチュートリアルに関するご意見をお寄せください+</a></p>
diff --git a/content/kb/docs/web/framework-adding-support_pt_BR.html b/content/kb/docs/web/framework-adding-support_pt_BR.html
index f0ec0ba..696ec43 100644
--- a/content/kb/docs/web/framework-adding-support_pt_BR.html
+++ b/content/kb/docs/web/framework-adding-support_pt_BR.html
@@ -258,24 +258,37 @@
<p>Os plug-ins do NetBeans podem ser identificados pela extensão <code>.nbm</code> .</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>No menu principal do IDE, selecione Ferramentas > Plug-ins para abrir o Gerenciador de Plug-ins.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Selecione a guia Download e clique no botão Adicionar Plug-ins.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>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"]</p>
+<p>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.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/plugin-archive-contents.png" alt="plugin archive contents">
+</div>
+<div class="title">Figure 2. O arquivo compactado zip contém os plug-ins do NetBeans</div>
+</div>
<div class="paragraph">
<p>Mantenha pressionada a tecla Ctrl para selecionar vários itens.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>No gerenciador de Plug-ins, selecione cada um dos plug-ins do Struts 2.</p>
</li>
@@ -294,7 +307,7 @@ image::images/plugin-archive-contents.png[title="O arquivo compactado zip conté
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Clique em Instalar para abrir o Instalador do NetBeans IDE e, em seguida, clique em Próximo e aceite o contrato de licença.</p>
</li>
@@ -304,7 +317,7 @@ image::images/plugin-archive-contents.png[title="O arquivo compactado zip conté
<p><strong>Observação.</strong> 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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Reinicie o IDE para que as alterações tenham efeito.</p>
</li>
@@ -338,7 +351,7 @@ image::images/plugin-archive-contents.png[title="O arquivo compactado zip conté
<div class="content">
<img src="images/uc-customizer.png" alt="uc customizer">
</div>
-<div class="title">Figure 2. Caixa de diálogo Personalizador da Central de Atualização</div>
+<div class="title">Figure 3. Caixa de diálogo Personalizador da Central de Atualização</div>
</div>
</div>
<div class="sect2">
@@ -435,11 +448,16 @@ image::images/plugin-archive-contents.png[title="O arquivo compactado zip conté
<p>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).</p>
</li>
<li>
-<p>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"]</p>
+<p>No painel Frameworks do assistente Novo Projeto, feche o framework que deseja adicionar. Clique em Finalizar.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newproject-wizard-frameworks-sm.png" alt="newproject wizard frameworks sm">
+</div>
+<div class="title">Figure 4. Struts 2 Support listado no painel Frameworks do assistente Novo Projeto</div>
+</div>
<div class="paragraph">
<p>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 [...]
</div>
@@ -450,7 +468,7 @@ image::images/newproject-wizard-frameworks-sm.png[title="Struts 2 Support listad
<div class="content">
<img src="images/project-structure-frameworks.png" alt="project structure frameworks">
</div>
-<div class="title">Figure 3. Estrutura lógica de aplicação Web Struts exibida na janela Projetos</div>
+<div class="title">Figure 5. Estrutura lógica de aplicação Web Struts exibida na janela Projetos</div>
</div>
</div>
<div class="sect2">
@@ -472,17 +490,31 @@ image::images/newproject-wizard-frameworks-sm.png[title="Struts 2 Support listad
<p>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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>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"]</p>
+<p>Clique no botão Adicionar e, em seguida, selecione o framework que deseja usar e clique em OK.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/properties-add-framework.png" alt="properties add framework">
+</div>
+<div class="title">Figure 6. Framework JavaServer Faces selecionado na caixa de diálogo Adicionar Framework aberta na janela Propriedades do Projeto</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>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"]</p>
+<p>Dependendo do framework escolhido, você pode especificar definições ou componentes de configuração específicas do framework na janela Propriedades do Projeto.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-icefaces.png" alt="add icefaces">
+</div>
+<div class="title">Figure 7. Adicionando uma biblioteca do conjunto de componentes ICEfaces ao projeto</div>
+</div>
<div class="paragraph">
<p>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.</p>
</div>
@@ -490,7 +522,7 @@ image::images/add-icefaces.png[title="Adicionando uma biblioteca do conjunto de
<p><strong>Observações.</strong> 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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>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.
<a href="/about/contact_form.html?to=3&subject=Feedback:%20Adding%20Web%20Framework%20Support">+ Enviar Feedback neste Tutorial+</a></p>
diff --git a/content/kb/docs/web/framework-adding-support_ru.html b/content/kb/docs/web/framework-adding-support_ru.html
index dd47a0b..c2a3018 100644
--- a/content/kb/docs/web/framework-adding-support_ru.html
+++ b/content/kb/docs/web/framework-adding-support_ru.html
@@ -258,24 +258,37 @@
<p>Подключаемые модули NetBeans можно опознать по их расширению <code>.nbm</code> .</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Из основного меню среды IDE выберите Tools ("Сервис") > Plugins ("Подключаемые модули") для открытия диспетчера подключаемых модулей.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Выберите вкладку Downloaded ("Загруженные") и нажмите кнопку Add Plugins ("Добавление подключаемых модулей").</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>В диалоговом окне добавления подключаемых модулей перейдите к содержащему их каталогу и выберите модуль NetBeans. Нажмите кнопку Open ("Открыть").
-image::images/plugin-archive-contents.png[title="Архив zip содержит подключаемые модули NetBeans"]</p>
+<p>В диалоговом окне добавления подключаемых модулей перейдите к содержащему их каталогу и выберите модуль NetBeans. Нажмите кнопку Open ("Открыть").</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/plugin-archive-contents.png" alt="plugin archive contents">
+</div>
+<div class="title">Figure 2. Архив zip содержит подключаемые модули NetBeans</div>
+</div>
<div class="paragraph">
<p>Нажмите и удерживайте клавишу Ctrl для выбора нескольких элементов.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>В диспетчере подключаемых модулей выберите каждый из модулей Struts2.</p>
</li>
@@ -294,7 +307,7 @@ image::images/plugin-archive-contents.png[title="Архив zip содержит
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Щелкните 'Установить', чтобы открыть установщик IDE NetBeans, а затем щелкните 'Далее' и примите условия лицензионного соглашения.</p>
</li>
@@ -304,7 +317,7 @@ image::images/plugin-archive-contents.png[title="Архив zip содержит
<p><strong>Примечание.</strong> При получении предупреждения проверки для установки подключаемого модуля щелкните 'Продолжить'. Предупреждение проверки выдается при попытке установить неподписанный подключаемый модуль. Хотя обычно всем подключаемым модулям можно доверять, установка неподписанного модуля осуществляется на ваш страх и риск.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Перезапустите среду IDE, чтобы дать изменениям возможность вступить в силу.</p>
</li>
@@ -338,7 +351,7 @@ image::images/plugin-archive-contents.png[title="Архив zip содержит
<div class="content">
<img src="images/uc-customizer.png" alt="uc customizer">
</div>
-<div class="title">Figure 2. Диалоговое окно 'Средство настройки центра обновлений'</div>
+<div class="title">Figure 3. Диалоговое окно 'Средство настройки центра обновлений'</div>
</div>
</div>
<div class="sect2">
@@ -435,11 +448,16 @@ image::images/plugin-archive-contents.png[title="Архив zip содержит
<p>Пройдите через этапы работы мастера, принимая все параметры по умолчанию. Укажите серверу развернуть приложение, выбрав один из серверов приложений, уже зарегистрированных в IDE (т. е. сервер GlassFish или Tomcat).</p>
</li>
<li>
-<p>На панели Frameworks ("Платформы") мастера создания проектов выберите платформу, которую нужно добавить. Нажмите кнопку "Готово".
-image::images/newproject-wizard-frameworks-sm.png[title="Поддержка Struts 2 указана на панели 'Платформы' мастера создания проектов"]</p>
+<p>На панели Frameworks ("Платформы") мастера создания проектов выберите платформу, которую нужно добавить. Нажмите кнопку "Готово".</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newproject-wizard-frameworks-sm.png" alt="newproject wizard frameworks sm">
+</div>
+<div class="title">Figure 4. Поддержка Struts 2 указана на панели 'Платформы' мастера создания проектов</div>
+</div>
<div class="paragraph">
<p>В данном примере поддержка платформы Struts 2 указана на панели Frameworks ("Платформы"). Можно увидеть, что панель Frameworks ("Платформы") теперь предлагает выбор между Struts 1.3.8 (входящей в среду IDE) или Struts2 (добавленной посредством подключаемого модуля). При установке подключаемого модуля поддержки Struts2 в мастер создания проектов добавляется пункт Struts2, а также вкладки с параметрами для настройки и библиотек. Вкладка Configuration ("Настройка") предоставляет возможно [...]
</div>
@@ -450,7 +468,7 @@ image::images/newproject-wizard-frameworks-sm.png[title="Поддержка Stru
<div class="content">
<img src="images/project-structure-frameworks.png" alt="project structure frameworks">
</div>
-<div class="title">Figure 3. Логическая структура веб-приложения Struts отображается в окне 'Проекты'</div>
+<div class="title">Figure 5. Логическая структура веб-приложения Struts отображается в окне 'Проекты'</div>
</div>
</div>
<div class="sect2">
@@ -472,17 +490,31 @@ image::images/newproject-wizard-frameworks-sm.png[title="Поддержка Stru
<p>После выбора значения 'Платформы' на правой панели отображается текстовая область 'Используемые платформы'. Если приложение не использует никакие платформы, эта область будет пуста.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>Нажмите кнопку 'Добавить', выберите нужную платформу и нажмите OK.
-image::images/properties-add-framework.png[title="Платформа JavaServer Faces выбрана в диалоговом окне 'Добавление платформы', открытом в окне 'Свойства проекта'"]</p>
+<p>Нажмите кнопку 'Добавить', выберите нужную платформу и нажмите OK.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/properties-add-framework.png" alt="properties add framework">
+</div>
+<div class="title">Figure 6. Платформа JavaServer Faces выбрана в диалоговом окне 'Добавление платформы', открытом в окне 'Свойства проекта'</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>В зависимости от выбранной платформы укажите относящиеся к этой платформе параметры конфигурации или компоненты, представленные в окне 'Свойства проекта'.
-image::images/add-icefaces.png[title="Добавление библиотеки для набора компонентов ICEfaces в проект"]</p>
+<p>В зависимости от выбранной платформы укажите относящиеся к этой платформе параметры конфигурации или компоненты, представленные в окне 'Свойства проекта'.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-icefaces.png" alt="add icefaces">
+</div>
+<div class="title">Figure 7. Добавление библиотеки для набора компонентов ICEfaces в проект</div>
+</div>
<div class="paragraph">
<p>Например, если вы хотите указать набор компонентов ICEfaces, можно выбрать ICEfaces на вкладке 'Компоненты' в окне 'Свойства проекта' и указать библиотеку ICEfaces.</p>
</div>
@@ -490,7 +522,7 @@ image::images/add-icefaces.png[title="Добавление библиотеки
<p><strong>Примечания.</strong> Библиотеки для компонентов JSF не входят в комплект IDE. Чтобы использовать наборы компонентов, необходимо загрузить требуемые библиотеки и создать библиотеку NetBeans, которую затем можно добавить в путь классов проекта в окне 'Свойства проекта'.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Нажмите кнопку "OК", чтобы подтвердить свой выбор, и закройте окно Project Properties ("Свойства проекта"). К проекту будут добавлены относящиеся к этой платформе артефакты и библиотеки, которые можно изучить в окне проектов.
<a href="/about/contact_form.html?to=3&subject=Feedback:%20Adding%20Web%20Framework%20Support">+ Отправить отзыв по этому учебному курсу+</a></p>
diff --git a/content/kb/docs/web/framework-adding-support_zh_CN.html b/content/kb/docs/web/framework-adding-support_zh_CN.html
index 44e5cda..91de1c2 100644
--- a/content/kb/docs/web/framework-adding-support_zh_CN.html
+++ b/content/kb/docs/web/framework-adding-support_zh_CN.html
@@ -258,24 +258,37 @@
<p>NetBeans 插件可由 <code>.nbm</code> 扩展名来标识。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>从 IDE 的主菜单中，选择 "Tools"（工具）> "Plugins"（插件）以打开插件管理器。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>选择 "Downloaded"（已下载）标签，然后单击 "Add Plugins"（添加插件）按钮。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>在 "Add Plugins"（添加插件）对话框中，导航至包含插件的目录并选择 NetBeans 插件。单击 "Open"（打开）。
-image::images/plugin-archive-contents.png[title="zip 档案文件包含 NetBeans 插件"]</p>
+<p>在 "Add Plugins"（添加插件）对话框中，导航至包含插件的目录并选择 NetBeans 插件。单击 "Open"（打开）。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/plugin-archive-contents.png" alt="plugin archive contents">
+</div>
+<div class="title">Figure 2. zip 档案文件包含 NetBeans 插件</div>
+</div>
<div class="paragraph">
<p>按住 Ctrl 键可选择多个项目。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>在插件管理器中，选择每个 Struts2 插件。</p>
</li>
@@ -294,7 +307,7 @@ image::images/plugin-archive-contents.png[title="zip 档案文件包含 NetBeans
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>单击 "Install"（安装）以打开 "NetBeans IDE Installer"（NetBeans IDE 安装程序），然后单击 "Next"（下一步）并接受许可证协议。</p>
</li>
@@ -304,7 +317,7 @@ image::images/plugin-archive-contents.png[title="zip 档案文件包含 NetBeans
<p>*注：*如果您接收到验证警告，请单击“继续”以安装该插件。在尝试安装未签名的插件时，将会出现验证警告。通常情况下，您可以信任所有插件，但是如果安装未签名的插件，则会带来一定的风险。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>重新启动 IDE 使更改生效。</p>
</li>
@@ -338,7 +351,7 @@ image::images/plugin-archive-contents.png[title="zip 档案文件包含 NetBeans
<div class="content">
<img src="images/uc-customizer.png" alt="uc customizer" width="Update Center Customizer"（更新中心定制器）对话框"">
</div>
-<div class="title">Figure 2. </div>
+<div class="title">Figure 3. </div>
</div>
</div>
<div class="sect2">
@@ -431,11 +444,16 @@ image::images/plugin-archive-contents.png[title="zip 档案文件包含 NetBeans
<p>逐步执行向导，并接受任何默认设置。通过选择已在 IDE 中注册的服务器（即 GlassFish Server 或 Tomcat），指定用于部署应用程序的服务器。</p>
</li>
<li>
-<p>在新建项目向导的 "Frameworks"（框架）面板中，选择要添加的框架。单击 "Finish"（完成）。
-image::images/newproject-wizard-frameworks-sm.png[title="新建项目向导的 "Frameworks"（框架）面板中列出的 Struts 2 支持"]</p>
+<p>在新建项目向导的 "Frameworks"（框架）面板中，选择要添加的框架。单击 "Finish"（完成）。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/newproject-wizard-frameworks-sm.png" alt="newproject wizard frameworks sm" width="Frameworks"（框架）面板中列出的 Struts 2 支持"">
+</div>
+<div class="title">Figure 4. 新建项目向导的 </div>
+</div>
<div class="paragraph">
<p>在此示例中，在 "Frameworks"（框架）面板中选择了对 Struts2 框架的支持。您会看到，现在 "Frameworks"（框架）面板提供了选择 Struts 1.3.8（与 IDE 捆绑在一起）或 Struts2（通过安装插件来添加）的选项。Struts 2 支持插件将 "Struts2" 选项添加到新建项目向导中，并显示具有 "Configuration"（配置）和 "Libraries"（库）选项的标签。"Configuration"（配置）标签提供用于在项目中创建示例页的选项。通过 "Libraries"（库）标签可以选择要添加到类路径的 Struts2 库的版本。</p>
</div>
@@ -446,7 +464,7 @@ image::images/newproject-wizard-frameworks-sm.png[title="新建项目向导的 "
<div class="content">
<img src="images/project-structure-frameworks.png" alt="project structure frameworks" width="Projects"（项目）窗口中显示的 Struts Web 应用程序的逻辑结构"">
</div>
-<div class="title">Figure 3. </div>
+<div class="title">Figure 5. </div>
</div>
</div>
<div class="sect2">
@@ -468,17 +486,31 @@ image::images/newproject-wizard-frameworks-sm.png[title="新建项目向导的 "
<p>选择 "Frameworks"（框架）时，右面板将显示 "Used Frameworks"（使用的框架）文本区域，如果应用程序未使用框架，则该文本区域为空。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>单击 "Add"（添加）按钮，然后选择要使用的框架并单击 "OK"（确定）。
-image::images/properties-add-framework.png[title="从 "Project Properties"（项目属性）窗口打开的 "Add Framework"（添加框架）对话框中选择的 JavaServer Faces 框架"]</p>
+<p>单击 "Add"（添加）按钮，然后选择要使用的框架并单击 "OK"（确定）。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/properties-add-framework.png" alt="properties add framework">
+</div>
+<div class="title">Figure 6. 从 "Project Properties"（项目属性）窗口打开的 "Add Framework"（添加框架）对话框中选择的 JavaServer Faces 框架</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>根据所选框架，可以在 "Project Properties"（项目属性）窗口中进一步指定特定于框架的配置设置或组件。
-image::images/add-icefaces.png[title="将 ICEfaces 组件套件的库添加到项目中"]</p>
+<p>根据所选框架，可以在 "Project Properties"（项目属性）窗口中进一步指定特定于框架的配置设置或组件。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-icefaces.png" alt="add icefaces">
+</div>
+<div class="title">Figure 7. 将 ICEfaces 组件套件的库添加到项目中</div>
+</div>
<div class="paragraph">
<p>例如，如果要指定 ICEfaces 组件套件，则可以在 "Project Properties"（项目属性）窗口的 "Components"（组件）标签中选择 "ICEfaces"，然后指定 ICEfaces 库。</p>
</div>
@@ -486,7 +518,7 @@ image::images/add-icefaces.png[title="将 ICEfaces 组件套件的库添加到
<p>*注：*IDE 中不包含 JSF 组件的库。要使用组件套件，您需要下载所需的库，然后创建一个 NetBeans 库，您随后可以在 "Project Properties"（项目属性）窗口中将该库添加到项目类路径中。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>单击 "OK"（确定）以确认您的选择，然后关闭 "Project Properties"（项目属性）窗口。项目中将添加特定于框架的工件和库，您可以在 "Projects"（项目）窗口中对其进行检查。
<a href="/about/contact_form.html?to=3&subject=Feedback:%20Adding%20Web%20Framework%20Support">+ 发送有关此教程的反馈意见+</a></p>
diff --git a/content/kb/docs/web/grails-quickstart.html b/content/kb/docs/web/grails-quickstart.html
index 96f7903..1191eaa 100644
--- a/content/kb/docs/web/grails-quickstart.html
+++ b/content/kb/docs/web/grails-quickstart.html
@@ -189,10 +189,14 @@
<p>You can confirm it is working correctly by running Grails from the command line (i.e., type "grails" at the command prompt).</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Choose File > New Project (Ctrl-Shift-N) and then select "Grails Application" from the "Groovy" category. Click Next.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>In Project Name, type "BookDemo"; in Project Location, select the folder where the application will be created. Click Finish.</p>
</li>
@@ -226,9 +230,17 @@
<p>Name the domain class "Book" and click Finish. The "Book.groovy" domain is created in the Domain Classes node.</p>
</li>
<li>
-<p>Open the Book class and then fill in two Strings, "title" and "author". You should now see this:
-image::images/grails-65-8.png[]</p>
+<p>Open the Book class and then fill in two Strings, "title" and "author". You should now see this:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-8.png" alt="grails 65 8">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>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:</p>
</li>
@@ -266,22 +278,30 @@ image::images/grails-65-8.png[]</p>
<p>Right-click the Controllers node and choose New > Grails Controller.</p>
</li>
<li>
-<p>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[]</p>
+<p>Type "Book" in Class Name and notice that you are shown that the generated class will be called "BookController":</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-11.png" alt="grails 65 11">
+</div>
+</div>
<div class="paragraph">
<p>Click Finish. The controller is generated.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>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[]</p>
+<p>Comment out the one line generated within the braces and add "def scaffold = Book". You should now see this:</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-13.png" alt="grails 65 13">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -293,28 +313,66 @@ image::images/grails-65-13.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>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[]</p>
+<p>Right-click the application and choose "Run". The application is deployed to Jetty, as you can see in the Services window:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-19.png" alt="grails 65 19">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>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[]</p>
+<p>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:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-14.png" alt="grails 65 14">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Click New Book and then create a new entry:
-image::images/grails-65-15.png[]</p>
+<p>Click New Book and then create a new entry:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-15.png" alt="grails 65 15">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>When you click Create, note that you can edit or delete the entry:
-image::images/grails-65-17.png[]</p>
+<p>When you click Create, note that you can edit or delete the entry:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-17.png" alt="grails 65 17">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>…​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]</p>
+<p>…​and that the entry is reflected in the list of entries:</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-18.png" alt="grails 65 18">
+</div>
+</div>
+<div class="paragraph">
+<p>link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[Send Feedback on This Tutorial]</p>
+</div>
</div>
</div>
<div class="sect1">
diff --git a/content/kb/docs/web/grails-quickstart_ja.html b/content/kb/docs/web/grails-quickstart_ja.html
index 2b1d1f5..6bf0aa5 100644
--- a/content/kb/docs/web/grails-quickstart_ja.html
+++ b/content/kb/docs/web/grails-quickstart_ja.html
@@ -189,10 +189,14 @@
<p>コマンド・ラインからGrailsを実行することで、正しく機能していることを確認できます(コマンド・プロンプトで"grails"と入力します)。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>「ファイル」>「新規プロジェクト」([Ctrl]-[Shift]-[N])を選択し、「Groovy」カテゴリから「Grailsアプリケーション」を選択します。「次」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>「プロジェクト名」に「BookDemo」と入力し、「プロジェクトの場所」にアプリケーションを作成するフォルダを選択します。「終了」をクリックします。</p>
</li>
@@ -226,9 +230,17 @@
<p>ドメイン・クラスに「Book」と名前を付け、「終了」をクリックします。「ドメイン・クラス」ノードに「Book.groovy」というドメインが作成されます。</p>
</li>
<li>
-<p>Bookクラスを開き、2つの文字列「title」と「author」と入力します。次のような表示になります。
-image::images/grails-65-8.png[]</p>
+<p>Bookクラスを開き、2つの文字列「title」と「author」と入力します。次のような表示になります。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-8.png" alt="grails 65 8">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>「構成」ノード内のBootstrap.groovyクラスの初期値をいくつか作成します。クラスに追加するコードを次に太字で示します。</p>
</li>
@@ -266,22 +278,30 @@ image::images/grails-65-8.png[]</p>
<p>「コントローラ」ノードを右クリックし、「新規」>「Grailsコントローラ」を選択します。</p>
</li>
<li>
-<p>「クラス名」に「Book」と入力します。生成されるクラスの名前「BookController」が表示されます。
-image::images/grails-65-11.png[]</p>
+<p>「クラス名」に「Book」と入力します。生成されるクラスの名前「BookController」が表示されます。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-11.png" alt="grails 65 11">
+</div>
+</div>
<div class="paragraph">
<p>「終了」をクリックします。コントローラが生成されます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>中括弧内に生成された1行をコメントにし、「def scaffold=Book」を追加します。次のような表示になります。
-image::images/grails-65-13.png[]</p>
+<p>中括弧内に生成された1行をコメントにし、「def scaffold=Book」を追加します。次のような表示になります。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-13.png" alt="grails 65 13">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -293,28 +313,66 @@ image::images/grails-65-13.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>アプリケーションを右クリックし、「実行」を選択します。「サービス」ウィンドウに表示されるように、アプリケーションはJettyにデプロイされます。
-image::images/grails-65-19.png[]</p>
+<p>アプリケーションを右クリックし、「実行」を選択します。「サービス」ウィンドウに表示されるように、アプリケーションはJettyにデプロイされます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-19.png" alt="grails 65 19">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>URLが「出力」ウィンドウに出力されます。ブラウザが自動的に開かない場合は、このURLをブラウザに貼り付けると、アプリケーションが表示されます。「BookController」リンクをクリックすると、次のような画面が表示されます。
-image::images/grails-65-14.png[]</p>
+<p>URLが「出力」ウィンドウに出力されます。ブラウザが自動的に開かない場合は、このURLをブラウザに貼り付けると、アプリケーションが表示されます。「BookController」リンクをクリックすると、次のような画面が表示されます。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-14.png" alt="grails 65 14">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>「New Book」をクリックし、新規エントリを作成します。
-image::images/grails-65-15.png[]</p>
+<p>「New Book」をクリックし、新規エントリを作成します。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-15.png" alt="grails 65 15">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>「Create」をクリックすると、エントリを編集または削除できるようになります。
-image::images/grails-65-17.png[]</p>
+<p>「Create」をクリックすると、エントリを編集または削除できるようになります。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-17.png" alt="grails 65 17">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>また、新規エントリがエントリのリストに反映されます。
-image::images/grails-65-18.png[]
-link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[このチュートリアルに関するご意見をお寄せください]</p>
+<p>また、新規エントリがエントリのリストに反映されます。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-18.png" alt="grails 65 18">
+</div>
+</div>
+<div class="paragraph">
+<p>link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[このチュートリアルに関するご意見をお寄せください]</p>
+</div>
</div>
</div>
<div class="sect1">
diff --git a/content/kb/docs/web/grails-quickstart_pt_BR.html b/content/kb/docs/web/grails-quickstart_pt_BR.html
index fb672ec..c9207b2 100644
--- a/content/kb/docs/web/grails-quickstart_pt_BR.html
+++ b/content/kb/docs/web/grails-quickstart_pt_BR.html
@@ -189,10 +189,14 @@
<p>Você pode confirmar se ele está funcionando corretamente executando o Grails na linha de comandos (isto é, digite "grails" no prompt de comandos).</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Selecione Arquivo > Novo Projeto (Ctrl-Shift-N) e selecione "Aplicação do Grails" na categoria "Groovy". Clique em Próximo.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Em Nome do Projeto, digite "BookDemo"; em Localização do Projeto, selecione a pasta em que a aplicação será criada. Clique em Finalizar.</p>
</li>
@@ -226,9 +230,17 @@
<p>Nomeie a classe de domínio como "Book" e clique em Finalizar. O domínio "Book.groovy" é criado no nó Classes de Domínio.</p>
</li>
<li>
-<p>Abra a classe Book e preencha duas Strings, "title" e "author". O seguinte deverá ser exibido:
-image::images/grails-65-8.png[]</p>
+<p>Abra a classe Book e preencha duas Strings, "title" e "author". O seguinte deverá ser exibido:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-8.png" alt="grails 65 8">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Crie alguns valores iniciais na classe Bootstrap.groovy, que está no nó Configuração. O código adicionado à classe é mostrado em negrito a seguir:</p>
</li>
@@ -266,22 +278,30 @@ image::images/grails-65-8.png[]</p>
<p>Clique com o botão direito do mouse no nó Controladores e selecione Novo > Controlador do Grails.</p>
</li>
<li>
-<p>Digite "Book" em Nome da Classe e observe que a classe gerada se chamará "BookController":
-image::images/grails-65-11.png[]</p>
+<p>Digite "Book" em Nome da Classe e observe que a classe gerada se chamará "BookController":</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-11.png" alt="grails 65 11">
+</div>
+</div>
<div class="paragraph">
<p>Clique em Finalizar. O controlador é gerado.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>Comente a linha gerada entre as chaves e adicione "def scaffold = Book". O seguinte deverá ser exibido:
-image::images/grails-65-13.png[]</p>
+<p>Comente a linha gerada entre as chaves e adicione "def scaffold = Book". O seguinte deverá ser exibido:</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-13.png" alt="grails 65 13">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -293,28 +313,66 @@ image::images/grails-65-13.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>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[]</p>
+<p>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:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-19.png" alt="grails 65 19">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>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[]</p>
+<p>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:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-14.png" alt="grails 65 14">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Clique em Novo Livro e crie uma nova entrada:
-image::images/grails-65-15.png[]</p>
+<p>Clique em Novo Livro e crie uma nova entrada:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-15.png" alt="grails 65 15">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>Quando você clicar em Criar, observe que poderá editar ou deletar a entrada:
-image::images/grails-65-17.png[]</p>
+<p>Quando você clicar em Criar, observe que poderá editar ou deletar a entrada:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-17.png" alt="grails 65 17">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>…​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]</p>
+<p>…​e que a entrada é refletida na lista de entradas:</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-18.png" alt="grails 65 18">
+</div>
+</div>
+<div class="paragraph">
+<p>link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[Enviar Feedback neste Tutorial]</p>
+</div>
</div>
</div>
<div class="sect1">
diff --git a/content/kb/docs/web/grails-quickstart_ru.html b/content/kb/docs/web/grails-quickstart_ru.html
index 6fa485c..905ba4e 100644
--- a/content/kb/docs/web/grails-quickstart_ru.html
+++ b/content/kb/docs/web/grails-quickstart_ru.html
@@ -189,10 +189,14 @@
<p>Чтобы проверить, корректно ли работает Grails, запустите его из командной строки с помощью команды "grails".</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Выберите команду "Файл" > "Создать проект" (CTRL+SHIFT+N), а затем – "Приложение Grails" из категории "Groovy". Нажмите кнопку "Далее".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>В поле "Имя проекта" введите "BookDemo". В "Project Location" выберите папку, в которой будет создано приложение. Нажмите кнопку "Завершить".</p>
</li>
@@ -226,9 +230,17 @@
<p>Назовите класс домена "Book" и нажмите кнопку "Готово". В узле "Классы домена" будет создан домен "Book.groovy".</p>
</li>
<li>
-<p>Откройте класс Book и заполните строки "title" и "author". На экране появится следующее окно:
-image::images/grails-65-8.png[]</p>
+<p>Откройте класс Book и заполните строки "title" и "author". На экране появится следующее окно:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-8.png" alt="grails 65 8">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Создайте несколько начальных значений в классе Bootstrap.groovy, находящемся в узле Configuration. Добавленный к классу код выделен жирным шрифтом:</p>
</li>
@@ -266,22 +278,30 @@ image::images/grails-65-8.png[]</p>
<p>Щелкните правой кнопкой мыши узел "Контроллеры" и выберите команду "Создать" > "Контроллер Grails".</p>
</li>
<li>
-<p>В поле "Имя класса" введите "Book" и убедитесь в том, что создаваемый класс называется "BookController":
-image::images/grails-65-11.png[]</p>
+<p>В поле "Имя класса" введите "Book" и убедитесь в том, что создаваемый класс называется "BookController":</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-11.png" alt="grails 65 11">
+</div>
+</div>
<div class="paragraph">
<p>Нажмите кнопку "Завершить". Создание контроллера выполнено.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>Закомментируйте строку, созданную внутри скобок, и добавьте "def scaffold = Book". На экране появится следующее окно:
-image::images/grails-65-13.png[]</p>
+<p>Закомментируйте строку, созданную внутри скобок, и добавьте "def scaffold = Book". На экране появится следующее окно:</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-13.png" alt="grails 65 13">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -293,28 +313,66 @@ image::images/grails-65-13.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Щелкните приложение правой кнопкой мыши и выберите команду "Выполнить". Развертывание приложения выполняется в Jetty, как показано в окне "Службы":
-image::images/grails-65-19.png[]</p>
+<p>Щелкните приложение правой кнопкой мыши и выберите команду "Выполнить". Развертывание приложения выполняется в Jetty, как показано в окне "Службы":</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-19.png" alt="grails 65 19">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>Введите URL-адрес в окно "Вывод". Если страница браузера не открывается автоматически, вставьте URL-адрес в адресную строку браузера, после чего приложение откроется. Перейдите по ссылке "BookController". Появится следующее окно:
-image::images/grails-65-14.png[]</p>
+<p>Введите URL-адрес в окно "Вывод". Если страница браузера не открывается автоматически, вставьте URL-адрес в адресную строку браузера, после чего приложение откроется. Перейдите по ссылке "BookController". Появится следующее окно:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-14.png" alt="grails 65 14">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Щелкните "New Book" и создайте новую запись:
-image::images/grails-65-15.png[]</p>
+<p>Щелкните "New Book" и создайте новую запись:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-15.png" alt="grails 65 15">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>После нажатия кнопки "Создать" убедитесь в том, что запись может быть изменена или удалена:
-image::images/grails-65-17.png[]</p>
+<p>После нажатия кнопки "Создать" убедитесь в том, что запись может быть изменена или удалена:</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-17.png" alt="grails 65 17">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>…​а также в том, что эта запись отображается в списке записей:
-image::images/grails-65-18.png[]
-link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[Отправить отзыв по этому учебному курсу]</p>
+<p>…​а также в том, что эта запись отображается в списке записей:</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-18.png" alt="grails 65 18">
+</div>
+</div>
+<div class="paragraph">
+<p>link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[Отправить отзыв по этому учебному курсу]</p>
+</div>
</div>
</div>
<div class="sect1">
diff --git a/content/kb/docs/web/grails-quickstart_zh_CN.html b/content/kb/docs/web/grails-quickstart_zh_CN.html
index 09a6a6c..fb19059 100644
--- a/content/kb/docs/web/grails-quickstart_zh_CN.html
+++ b/content/kb/docs/web/grails-quickstart_zh_CN.html
@@ -189,10 +189,14 @@
<p>通过从命令行运行 Grails（即，在命令提示处键入 "grails"），可以确认其正常运行。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N）并从 "Groovy" 类别中选择 "Grails Application"（Grails 应用程序）。单击 "Next"（下一步）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>在 "Project Name"（项目名称）中键入 "BookDemo"；在 "Project Location"（项目位置）中，选择要在其中创建应用程序的文件夹位置。单击 "Finish"（完成）。</p>
</li>
@@ -226,9 +230,17 @@
<p>将该域类命名为 "Book" 并单击 "Finish"（完成）。"Book.groovy" 域将创建在该域类节点中。</p>
</li>
<li>
-<p>打开 Book 类并填入两个字符串 "title" 和 "author"。现在，您应看到如下所示的内容：
-image::images/grails-65-8.png[]</p>
+<p>打开 Book 类并填入两个字符串 "title" 和 "author"。现在，您应看到如下所示的内容：</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-8.png" alt="grails 65 8">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>在位于 "Configuration"（配置）节点中的 Bootstrap.groovy 类中创建了一些初始值。添加到该类的代码以黑体显示如下：</p>
</li>
@@ -266,22 +278,30 @@ image::images/grails-65-8.png[]</p>
<p>右键单击 "Controllers"（控制器）节点并选择 "New"（新建）> "Grails Controller"（Grails 控制器）。</p>
</li>
<li>
-<p>在 "Class Name"（类名）中键入 "Book"，注意到生成的类将被命名为 "BookController"：
-image::images/grails-65-11.png[]</p>
+<p>在 "Class Name"（类名）中键入 "Book"，注意到生成的类将被命名为 "BookController"：</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-11.png" alt="grails 65 11">
+</div>
+</div>
<div class="paragraph">
<p>单击 "Finish"（完成）。已生成控制器。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>注释掉在花括号内所生成的一行代码，然后添加 "def scaffold = Book"。现在，您应看到如下所示的内容：
-image::images/grails-65-13.png[]</p>
+<p>注释掉在花括号内所生成的一行代码，然后添加 "def scaffold = Book"。现在，您应看到如下所示的内容：</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-13.png" alt="grails 65 13">
+</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -293,28 +313,66 @@ image::images/grails-65-13.png[]</p>
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>右键单击该应用程序并选择 "Run"（运行）。该应用程序将被部署到 Jetty，如 "Services"（服务）窗口所示：
-image::images/grails-65-19.png[]</p>
+<p>右键单击该应用程序并选择 "Run"（运行）。该应用程序将被部署到 Jetty，如 "Services"（服务）窗口所示：</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-19.png" alt="grails 65 19">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>该 URL 已被输出到 "Output"（输出）窗口。如果浏览器未自动打开，请将该 URL 粘贴到浏览器中，然后会看到该应用程序。单击 "BookController" 链接，您将看到以下内容：
-image::images/grails-65-14.png[]</p>
+<p>该 URL 已被输出到 "Output"（输出）窗口。如果浏览器未自动打开，请将该 URL 粘贴到浏览器中，然后会看到该应用程序。单击 "BookController" 链接，您将看到以下内容：</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-14.png" alt="grails 65 14">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>单击 "New Book"（新建 Book），程序将创建一个新条目：
-image::images/grails-65-15.png[]</p>
+<p>单击 "New Book"（新建 Book），程序将创建一个新条目：</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-15.png" alt="grails 65 15">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>单击 "Create"（创建）之后，请注意可对该条目进行编辑或删除：
-image::images/grails-65-17.png[]</p>
+<p>单击 "Create"（创建）之后，请注意可对该条目进行编辑或删除：</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-17.png" alt="grails 65 17">
+</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>同时，该条目将被反映到条目列表中：
-image::images/grails-65-18.png[]
-link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[发送有关此教程的反馈意见]</p>
+<p>同时，该条目将被反映到条目列表中：</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/grails-65-18.png" alt="grails 65 18">
+</div>
+</div>
+<div class="paragraph">
+<p>link:/about/contact_form.html?to=3&subject=Feedback: NetBeans IDE 6.5 Grails Quick Start Guide[发送有关此教程的反馈意见]</p>
+</div>
</div>
</div>
<div class="sect1">
diff --git a/content/kb/docs/web/hibernate-webapp.html b/content/kb/docs/web/hibernate-webapp.html
index 9ef8b3b..7182787 100644
--- a/content/kb/docs/web/hibernate-webapp.html
+++ b/content/kb/docs/web/hibernate-webapp.html
@@ -227,16 +227,21 @@
<p>Right-click the MySQL Server node and choose Create Database.</p>
</li>
<li>
-<p>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"]</p>
+<p>Select the Sakila database from the New Database Name drop down list in the Create MySQL Database dialog box. Click OK.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/create-sakila-mysql.png" alt="create sakila mysql">
+</div>
+<div class="title">Figure 2. Screenshot of Create MySQL Database dialog</div>
+</div>
<div class="paragraph">
<p>When you click OK a Sakila node appears under the MySQL Server node.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Right-click the Sakila node and choose Connect.</p>
</li>
@@ -270,16 +275,28 @@ image::images/create-sakila-mysql.png[title="Screenshot of Create MySQL Database
<p>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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>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.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Select the JavaServer Faces checkbox and use the default JSF 2.x libraries.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Select the Hibernate checkbox in the list of frameworks.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>Select the sakila database from the Database Connection drop down list. Click Finish.</p>
</li>
@@ -292,7 +309,7 @@ image::images/create-sakila-mysql.png[title="Screenshot of Create MySQL Database
<div class="content">
<img src="images/hib-newwebapp.png" alt="hib newwebapp">
</div>
-<div class="title">Figure 2. Frameworks panel of New Project wizard showing adding Hibernate support to project</div>
+<div class="title">Figure 3. Frameworks panel of New Project wizard showing adding Hibernate support to project</div>
</div>
<div class="paragraph">
<p>When you click Finish, the IDE creates the web application project and opens the <code>hibernate.cfg.xml</code> file and <code>index.xhtml</code> in the editor.</p>
@@ -304,7 +321,7 @@ image::images/create-sakila-mysql.png[title="Screenshot of Create MySQL Database
<div class="content">
<img src="images/hib-libraries.png" alt="hib libraries">
</div>
-<div class="title">Figure 3. Screenshot of Projects window showing Hibernate libraries</div>
+<div class="title">Figure 4. Screenshot of Projects window showing Hibernate libraries</div>
</div>
</div>
</div>
@@ -329,25 +346,56 @@ image::images/create-sakila-mysql.png[title="Screenshot of Create MySQL Database
<p>Click Add to open the Add Hibernate Property dialog box.</p>
</li>
<li>
-<p>In the dialog box, select the <code>hibernate.show_sql</code> property and set the value to <code>true</code> . 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"]</p>
+<p>In the dialog box, select the <code>hibernate.show_sql</code> property and set the value to <code>true</code> . This enables the debug logging of the SQL statements.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-showsql.png" alt="add property showsql">
+</div>
+<div class="title">Figure 5. Add Hibernate Property dialog box showing setting value for the hibernate.show_sql property</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Expand the Miscellaneous Properties node and click Add.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
-<p>In the dialog box, select the <code>properties hibernate.current_session_context_class</code> and set the value to <code>thread</code> 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"]</p>
+<p>In the dialog box, select the <code>properties hibernate.current_session_context_class</code> and set the value to <code>thread</code> to enable Hibernate’s automatic session context management.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-sessioncontext.png" alt="add property sessioncontext">
+</div>
+<div class="title">Figure 6. Add Hibernate Property dialog box showing setting value for the hibernate.current_session_context_class property</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>Click Add again under the Miscellaneous Properties node and select <code>hibernate.query.factory_class</code> in the Property Name dropdown list.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
-<p>Select <strong>org.hibernate.hql.classic.ClassicQueryTranslatorFactory</strong> 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"]</p>
+<p>Select <strong>org.hibernate.hql.classic.ClassicQueryTranslatorFactory</strong> as the Property Value. Click OK.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-factoryclass.png" alt="add property factoryclass">
+</div>
+<div class="title">Figure 7. Add Hibernate Property dialog box showing setting value for the hibernate.query.factory_class property</div>
+</div>
<div class="paragraph">
<p>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):</p>
</div>
@@ -368,7 +416,7 @@ image::images/add-property-factoryclass.png[title="Add Hibernate Property dialog
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>Save your changes to the file.</p>
</li>
@@ -405,7 +453,7 @@ image::images/add-property-factoryclass.png[title="Add Hibernate Property dialog
<div class="content">
<img src="images/hibernate-util-wizard.png" alt="hibernate util wizard">
</div>
-<div class="title">Figure 4. Screenshot of HibernateUtil wizard</div>
+<div class="title">Figure 8. Screenshot of HibernateUtil wizard</div>
</div>
<div class="paragraph">
<p>When you click Finish, <code>HibernateUtil.java</code> opens in the editor. You can close the file because you do not need to edit the file.</p>
@@ -483,7 +531,7 @@ image::images/add-property-factoryclass.png[title="Add Hibernate Property dialog
<div class="content">
<img src="images/hibernate-reveng-wizard.png" alt="hibernate reveng wizard">
</div>
-<div class="title">Figure 5. New Hibernate Reverse Engineering wizard</div>
+<div class="title">Figure 9. New Hibernate Reverse Engineering wizard</div>
</div>
<div class="paragraph">
<p>The wizard generates a <code>hibernate.reveng.xml</code> reverse engineering file and opens the file in the editor. You can close the reverse engineering file because you will not need to edit the file.</p>
@@ -518,11 +566,16 @@ image::images/add-property-factoryclass.png[title="Add Hibernate Property dialog
<p>Ensure that the <strong>Domain Code</strong> and <strong>Hibernate XML Mappings</strong> options are selected.</p>
</li>
<li>
-<p>Select <strong>dvdrental</strong> for the Package name. Click Finish.
-image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files and POJOs wizard"]</p>
+<p>Select <strong>dvdrental</strong> for the Package name. Click Finish.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hibernate-pojo-wizard2.png" alt="hibernate pojo wizard2">
+</div>
+<div class="title">Figure 10. Generate Hibernate Mapping Files and POJOs wizard</div>
+</div>
<div class="paragraph">
<p>When you click Finish the IDE generates POJOs and Hibernate mapping files with the fields mapped to the columns specified in <code>hibernate.reveng.xml</code> . The IDE also adds mapping entries to <code>hibernate.cfg.xml</code> .</p>
</div>
@@ -558,7 +611,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
<div class="content">
<img src="images/hib-projectswindow.png" alt="hib projectswindow">
</div>
-<div class="title">Figure 6. Projects window showing generated POJOs</div>
+<div class="title">Figure 11. Projects window showing generated POJOs</div>
</div>
<div class="paragraph">
<p>You can use the Hibernate Mapping wizard if you want to create a Hibernate mapping file that maps a specific table to a specific class.</p>
@@ -610,7 +663,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Right-click in the editor and choose Fix Imports (Alt-Shift-I; ⌘-Shift-I on Mac) to add any required import statements ( <code>org.hibernate.Session</code> ) and save your changes.</p>
</li>
@@ -640,7 +693,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
<p>Select hibernate.cfg from the drop down list in the toolbar.</p>
</li>
<li>
-<p>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.</p>
+<p>Test the connection by typing the following in the editor and clicking the Run HQL Query button ( <span class="image"><img src="images/run_hql_query_16.png" alt="run hql query 16" title="Run HQL Query button"></span> ) in the toolbar.</p>
</li>
</ol>
</div>
@@ -656,7 +709,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
<div class="content">
<img src="images/hibernate-hqleditor1.png" alt="hibernate hqleditor1">
</div>
-<div class="title">Figure 7. Generate Hibernate Mapping Files and POJOs wizard</div>
+<div class="title">Figure 12. Generate Hibernate Mapping Files and POJOs wizard</div>
</div>
<div class="paragraph">
<p>If you click the SQL button you can see the equivalent SQL query.</p>
@@ -667,7 +720,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Type the following query to retrieve the records in the Film table where the film id is between 100 and 200.</p>
</li>
@@ -682,7 +735,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
<p>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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Add the following method <code>getFilmTitles</code> to <code>FilmHelper.java</code> to retrieve the films where the film id is between a certain range specified by the variables <code>startID</code> and <code>endID</code> .</p>
</li>
@@ -704,7 +757,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Add the following method <code>getActorsByID</code> that retrieves the actors in a particular film. The method constructs the query using <code>filmId</code> as the input variable.</p>
</li>
@@ -728,7 +781,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Fix your imports and save your changes.</p>
</li>
@@ -768,7 +821,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Add the following method to retrieve a single film according to <code>filmId</code> .</p>
</li>
@@ -793,7 +846,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Add the following method to retrieve the film language according to <code>langId</code> .</p>
</li>
@@ -818,7 +871,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Save your changes.</p>
</li>
@@ -853,13 +906,21 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
<p>You will use the Managed Bean name <code>filmController</code> as the value for the <code>inputText</code> and <code>commandButton</code> in the JSF page <code>index.xhtml</code> when calling methods in the bean.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Select <strong>dvdrental</strong> for the Package.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Type <strong>filmController</strong> for the Name that will be used for the managed bean.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Set Scope to Session. Click Finish.</p>
</li>
@@ -869,7 +930,7 @@ image::images/hibernate-pojo-wizard2.png[title="Generate Hibernate Mapping Files
<div class="content">
<img src="images/hib-newmanagedbean.png" alt="hib newmanagedbean">
</div>
-<div class="title">Figure 8. New JSF Managed Bean wizard</div>
+<div class="title">Figure 13. New JSF Managed Bean wizard</div>
</div>
<div class="paragraph">
<p>When you click Finish, the IDE creates the bean class and opens the class in the editor. The IDE added the <code>@ManagedBean</code> and <code>@SessionScoped</code> annotations.</p>
@@ -915,7 +976,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Add the following code (in bold) to create the FilmController instance and retrieve the films.</p>
</li>
@@ -958,7 +1019,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Add the following methods that are used to display the table and navigate the pages.* public boolean isHasNextPage() {
if (endId + pageSize ⇐ recordCount) {
@@ -1023,7 +1084,7 @@ public class FilmController {
<p>The methods that return "index" or "browse" will prompt the JSF navigation handler to try to open a page named <code>index.xhtml</code> or <code>browse.xhtml</code> . 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 <code>faces-config.xml</code> . Instead, the navigation handler will try to locate a suitable page in the application.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Add the following methods that access the helper class to retrieve additional film details.* public String getLanguage() {
int langID = current.getLanguageByLanguageId().getLanguageId().intValue();
@@ -1063,7 +1124,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Fix your imports (Ctrl-Shift-I) and save your changes.</p>
</li>
@@ -1123,7 +1184,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Modify the <code><ui:insert></code> element to change the default generated name to "body".</p>
</li>
@@ -1137,7 +1198,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Save your changes.</p>
</li>
@@ -1176,7 +1237,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Modify the page to use the JSF <code><ui:composition></code> and <code><ui:define></code> elements and add a <code><h:form></code> element.</p>
</li>
@@ -1204,7 +1265,7 @@ public class FilmController {
<p>The <code><ui:composition></code> and <code><ui:define></code> elements are used in combination with the page template that you will create. The <code><ui:composition></code> element references the location of the template that will be used by this page. The <code><ui:define></code> element references the position in the template that the enclosed code will occupy.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Add the following navigation links that call the <code>previous</code> and <code>next</code> methods in the JSF managed bean.</p>
</li>
@@ -1221,7 +1282,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Add the following <code>dataTable</code> element (in bold) to generate the table to display the retrieved items.</p>
</li>
@@ -1257,7 +1318,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Save your changes.</p>
</li>
@@ -1281,19 +1342,45 @@ public class FilmController {
<p>Right-click DVDStore project node in the Projects window and choose New > Other.</p>
</li>
<li>
-<p>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"]</p>
+<p>Select Facelets Template Client in the JavaServer Faces category. Click Next.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hib-faceletsclient.png" alt="hib faceletsclient">
+</div>
+<div class="title">Figure 14. Facelets Template Client file type in New File wizard</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Type <strong>browse</strong> for the File Name.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Locate the Template for the page by clicking Browse to open the Browse Files dialog box.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>Expand the Web Pages folder and select <code>template.xhtml</code> . Click Select File.
-image::images/hib-browsetemplate.png[title="Select the template in the Browse Files dialog"]</p>
+<p>Expand the Web Pages folder and select <code>template.xhtml</code> . Click Select File.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hib-browsetemplate.png" alt="hib browsetemplate">
+</div>
+<div class="title">Figure 15. Select the template in the Browse Files dialog</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Select <strong><ui:composition></strong> for the Generated Root Tag. Click Finish.</p>
</li>
@@ -1322,7 +1409,7 @@ image::images/hib-browsetemplate.png[title="Select the template in the Browse Fi
<p>You can see that the new file specifies the <code>template.xhtml</code> file and that the <code><ui:define></code> tag has the property <code>name="body"</code></p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Add the following code (in bold) between the <code><ui:define></code> tags to create the form and call the methods in the managed bean FilmController to retrieve the data and populate the form.</p>
</li>
@@ -1394,7 +1481,7 @@ image::images/hib-browsetemplate.png[title="Select the template in the Browse Fi
<p>You can see that <code>browse.xhtml</code> and <code>index.xhtml</code> will use the same page template.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Save your changes.</p>
</li>
@@ -1423,10 +1510,10 @@ image::images/hib-browsetemplate.png[title="Select the template in the Browse Fi
<div class="content">
<img src="images/hib-browser1.png" alt="hib browser1">
</div>
-<div class="title">Figure 9. Screenshot of browser displaying film list on index page</div>
+<div class="title">Figure 16. Screenshot of browser displaying film list on index page</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>In your browser, click "View" to load <code>browse.xhtml</code> to view the film details.</p>
</li>
@@ -1454,28 +1541,44 @@ image::images/hib-browsetemplate.png[title="Select the template in the Browse Fi
<code><a href="https://svn.netbeans.org/svn/samples~samples-source-code" class="bare">https://svn.netbeans.org/svn/samples~samples-source-code</a></code>
Click Next.</p>
</li>
+</ol>
+</div>
+</li>
+</ul>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Click Browse to open the Browse Repostiory Folders dialog box.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Expand the root node and select <strong>samples/javaee/DVDStoreEE6</strong>. Click OK.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Specify the Local Folder for the sources.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Click Finish.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>When you click Finish, the IDE initializes the local folder as a Subversion repository and checks out the project sources.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Click Open Project in the dialog that appears when checkout is complete.</p>
</li>
diff --git a/content/kb/docs/web/hibernate-webapp_ja.html b/content/kb/docs/web/hibernate-webapp_ja.html
index c1e2554..e65360e 100644
--- a/content/kb/docs/web/hibernate-webapp_ja.html
+++ b/content/kb/docs/web/hibernate-webapp_ja.html
@@ -227,16 +227,21 @@
<p>「MySQLサーバー」ノードを右クリックし、「データベースを作成」を選択します。</p>
</li>
<li>
-<p>「MySQLデータベースの作成」ダイアログ・ボックスで「新規データベース名」ドロップダウン・リストから「Sakilaデータベース」を選択します。「OK」をクリックします。
-image::images/create-sakila-mysql.png[title="「MySQLデータベースの作成」ダイアログのスクリーンショット"]</p>
+<p>「MySQLデータベースの作成」ダイアログ・ボックスで「新規データベース名」ドロップダウン・リストから「Sakilaデータベース」を選択します。「OK」をクリックします。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/create-sakila-mysql.png" alt="create sakila mysql">
+</div>
+<div class="title">Figure 2. 「MySQLデータベースの作成」ダイアログのスクリーンショット</div>
+</div>
<div class="paragraph">
<p>「OK」をクリックすると、「MySQLサーバー」ノードの下に「Sakila」ノードが表示されます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>「Sakila」ノードを右クリックし、「接続」を選択します。</p>
</li>
@@ -270,16 +275,28 @@ image::images/create-sakila-mysql.png[title="「MySQLデータベースの作成
<p>このチュートリアルでは、ライブラリを他のユーザーと共有する必要がないため、プロジェクト・ライブラリを専用のフォルダにコピーする理由はほとんどありません。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>サーバーを「GlassFish Server」に設定し、「Java EEバージョン」を「Java EE 6 Web」または「Java EE 7 Web」に設定します。「次」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>「JavaServer Faces」チェックボックスを選択し、デフォルトのJSF 2.xライブラリを使用します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>フレームワークの選択リストで「Hibernate」チェックボックスを選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>「データベース接続」ドロップダウン・リストから「Sakilaデータベース」を選択します。「終了」をクリックします。</p>
</li>
@@ -292,7 +309,7 @@ image::images/create-sakila-mysql.png[title="「MySQLデータベースの作成
<div class="content">
<img src="images/hib-newwebapp.png" alt="hib newwebapp">
</div>
-<div class="title">Figure 2. プロジェクトへのHibernateサポートの追加を示す新規プロジェクト・ウィザードの「フレームワーク」パネル</div>
+<div class="title">Figure 3. プロジェクトへのHibernateサポートの追加を示す新規プロジェクト・ウィザードの「フレームワーク」パネル</div>
</div>
<div class="paragraph">
<p>「終了」をクリックすると、Webアプリケーション・プロジェクトが作成され、 <code>hibernate.cfg.xml</code> ファイルと <code>index.xhtml</code> がエディタに表示されます。</p>
@@ -304,7 +321,7 @@ image::images/create-sakila-mysql.png[title="「MySQLデータベースの作成
<div class="content">
<img src="images/hib-libraries.png" alt="hib libraries">
</div>
-<div class="title">Figure 3. Hibernateライブラリが表示された「プロジェクト」ウィンドウのスクリーンショット</div>
+<div class="title">Figure 4. Hibernateライブラリが表示された「プロジェクト」ウィンドウのスクリーンショット</div>
</div>
</div>
</div>
@@ -329,25 +346,56 @@ image::images/create-sakila-mysql.png[title="「MySQLデータベースの作成
<p>「追加」をクリックして「Hibernateのプロパティの追加」ダイアログ・ボックスを開きます。</p>
</li>
<li>
-<p>このダイアログ・ボックスで、「 <code>hibernate.show_sql</code> 」プロパティを選択し、値を「 <code>true</code> 」に設定します。これにより、SQL文のデバッグ・ロギングが有効になります。
-image::images/add-property-showsql.png[title="hibernate.show_sqlプロパティの設定値が表示された「Hibernateのプロパティの追加」ダイアログ・ボックス"]</p>
+<p>このダイアログ・ボックスで、「 <code>hibernate.show_sql</code> 」プロパティを選択し、値を「 <code>true</code> 」に設定します。これにより、SQL文のデバッグ・ロギングが有効になります。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-showsql.png" alt="add property showsql">
+</div>
+<div class="title">Figure 5. hibernate.show_sqlプロパティの設定値が表示された「Hibernateのプロパティの追加」ダイアログ・ボックス</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>「Miscellaneous Properties」ノードを展開し、「追加」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
-<p>このダイアログ・ボックスで「 <code>hibernate.current_session_context_class</code> 」プロパティを選択し、値を「 <code>thread</code> 」に設定すると、Hibernateの自動セッション・コンテキスト管理が有効になります。
-image::images/add-property-sessioncontext.png[title="hibernate.current_session_context_classプロパティの設定値が表示された「Hibernateのプロパティの追加」ダイアログ・ボックス"]</p>
+<p>このダイアログ・ボックスで「 <code>hibernate.current_session_context_class</code> 」プロパティを選択し、値を「 <code>thread</code> 」に設定すると、Hibernateの自動セッション・コンテキスト管理が有効になります。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-sessioncontext.png" alt="add property sessioncontext">
+</div>
+<div class="title">Figure 6. hibernate.current_session_context_classプロパティの設定値が表示された「Hibernateのプロパティの追加」ダイアログ・ボックス</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>「その他のプロパティ」ノードの下の「追加」を再度クリックし、「プロパティ名」ドロップダウン・リストで <code>hibernate.query.factory_class</code> を選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
-<p>「プロパティ値」として「<strong>org.hibernate.hql.classic.ClassicQueryTranslatorFactory</strong>」を選択します。「OK」をクリックします。
-image::images/add-property-factoryclass.png[title="hibernate.query.factory_classプロパティの設定値が表示された「Hibernateのプロパティの追加」ダイアログ・ボックス"]</p>
+<p>「プロパティ値」として「<strong>org.hibernate.hql.classic.ClassicQueryTranslatorFactory</strong>」を選択します。「OK」をクリックします。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-factoryclass.png" alt="add property factoryclass">
+</div>
+<div class="title">Figure 7. hibernate.query.factory_classプロパティの設定値が表示された「Hibernateのプロパティの追加」ダイアログ・ボックス</div>
+</div>
<div class="paragraph">
<p>エディタの「XML」タブをクリックすると、ファイルがXMLビューに表示されます。ファイルの内容は次のようになります(3つの新しいプロパティは太字)。</p>
</div>
@@ -368,7 +416,7 @@ image::images/add-property-factoryclass.png[title="hibernate.query.factory_class
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>変更内容をファイルに保存します。</p>
</li>
@@ -405,7 +453,7 @@ image::images/add-property-factoryclass.png[title="hibernate.query.factory_class
<div class="content">
<img src="images/hibernate-util-wizard.png" alt="hibernate util wizard">
</div>
-<div class="title">Figure 4. HibernateUtilウィザードのスクリーンショット</div>
+<div class="title">Figure 8. HibernateUtilウィザードのスクリーンショット</div>
</div>
<div class="paragraph">
<p>「終了」をクリックすると、 <code>HibernateUtil.java</code> がエディタに表示されます。このファイルは、編集する必要がないため閉じてかまいません。</p>
@@ -483,7 +531,7 @@ image::images/add-property-factoryclass.png[title="hibernate.query.factory_class
<div class="content">
<img src="images/hibernate-reveng-wizard.png" alt="hibernate reveng wizard">
</div>
-<div class="title">Figure 5. 新規Hibernateリバース・エンジニアリング・ウィザード</div>
+<div class="title">Figure 9. 新規Hibernateリバース・エンジニアリング・ウィザード</div>
</div>
<div class="paragraph">
<p>このウィザードでは、 <code>hibernate.reveng.xml</code> リバース・エンジニアリング・ファイルが生成され、ファイルはエディタに表示されます。リバース・エンジニアリング・ファイルは、編集する必要がないため閉じてかまいません。</p>
@@ -520,11 +568,16 @@ image::images/add-property-factoryclass.png[title="hibernate.query.factory_class
<p>「<strong>ドメイン・コード</strong>」および「<strong>Hibernate XMLのマッピング</strong>」オプションが選択されていることを確認します。</p>
</li>
<li>
-<p>パッケージ名に「<strong>dvdrental</strong>」を選択します。「終了」をクリックします。
-image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング・ファイルとPOJOの生成」ウィザード"]</p>
+<p>パッケージ名に「<strong>dvdrental</strong>」を選択します。「終了」をクリックします。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hibernate-pojo-wizard2.png" alt="hibernate pojo wizard2">
+</div>
+<div class="title">Figure 10. 「Hibernateのマッピング・ファイルとPOJOの生成」ウィザード</div>
+</div>
<div class="paragraph">
<p>「終了」をクリックすると、POJOとHibernateのマッピング・ファイルが生成され、 <code>hibernate.reveng.xml</code> で指定した列にフィールドがマップされます。また、 <code>hibernate.cfg.xml</code> にマッピング・エントリが追加されます。</p>
</div>
@@ -562,7 +615,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
<div class="content">
<img src="images/hib-projectswindow.png" alt="hib projectswindow">
</div>
-<div class="title">Figure 6. 生成されたPOJOを示す「プロジェクト」ウィンドウ</div>
+<div class="title">Figure 11. 生成されたPOJOを示す「プロジェクト」ウィンドウ</div>
</div>
<div class="paragraph">
<p>特定の表を特定のクラスにマップするHibernateマッピング・ファイルを作成する場合、Hibernateマッピング・ウィザードを使用できます。</p>
@@ -616,7 +669,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>エディタ上で右クリックし、「インポートを修正」([Alt]-[Shift]-[I]、Macの場合は[⌘]-[Shift]-[I])を選択して必要なインポート文( <code>org.hibernate.Session</code> )を追加し、変更を保存します。</p>
</li>
@@ -646,7 +699,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
<p>ツールバーのドロップダウン・リストから「hibernate.cfg」を選択します。</p>
</li>
<li>
-<p>接続をテストするには、エディタで次のように入力し、ツールバーの「HQL問合せの実行」ボタン(image::images/run_hql_query_16.png[title="「HQL問合せの実行」ボタン"])をクリックします。</p>
+<p>接続をテストするには、エディタで次のように入力し、ツールバーの「HQL問合せの実行」ボタン(<span class="image"><img src="images/run_hql_query_16.png" alt="run hql query 16" title="「HQL問合せの実行」ボタン"></span>)をクリックします。</p>
</li>
</ol>
</div>
@@ -662,7 +715,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
<div class="content">
<img src="images/hibernate-hqleditor1.png" alt="hibernate hqleditor1">
</div>
-<div class="title">Figure 7. 「Hibernateのマッピング・ファイルとPOJOの生成」ウィザード</div>
+<div class="title">Figure 12. 「Hibernateのマッピング・ファイルとPOJOの生成」ウィザード</div>
</div>
<div class="paragraph">
<p>「SQL」ボタンをクリックすると、対応するSQL問合せを確認できます。</p>
@@ -673,7 +726,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>次の問合せを入力して、filmIdが100から200の間に含まれるレコードをFilm表から取り出します。</p>
</li>
@@ -688,7 +741,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
<p>結果ウィンドウにレコードのリストが表示されます。問合せが適切な結果を返すことをテストできたので、この問合せをヘルパー・クラスで使用できます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p><code>FilmHelper.java</code> に次のメソッド <code>getFilmTitles</code> を追加して、filmIdが、変数 <code>startID</code> と <code>endID</code> で指定する範囲内にある映画を取り出します。</p>
</li>
@@ -710,7 +763,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>特定の映画から俳優を取得する次のメソッド <code>getActorsByID</code> を追加します。メソッドは、入力変数として <code>filmId</code> を使用し、問合せを構成します。</p>
</li>
@@ -734,7 +787,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>インポートを修正して変更内容を保存します。</p>
</li>
@@ -774,7 +827,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p><code>filmId</code> に基づいて1つの映画を取り出す次のメソッドを追加します。</p>
</li>
@@ -799,7 +852,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p><code>langId</code> に基づいて映画の言語を取り出す次のメソッドを追加します。</p>
</li>
@@ -824,7 +877,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>変更を保存します。</p>
</li>
@@ -859,13 +912,21 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
<p>Beanでメソッドをコールするときに、管理対象Bean名 <code>filmController</code> を、JSFページ <code>index.xhtml</code> の <code>inputText</code> および <code>commandButton</code> の値として使用します。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>パッケージに「<strong>dvdrental</strong>」を選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>管理対象Beanに使用する名前に「<strong>filmController</strong>」と入力します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>スコープを「セッション」に設定します。「終了」をクリックします。</p>
</li>
@@ -875,7 +936,7 @@ image::images/hibernate-pojo-wizard2.png[title="「Hibernateのマッピング
<div class="content">
<img src="images/hib-newmanagedbean.png" alt="hib newmanagedbean">
</div>
-<div class="title">Figure 8. 新規JSF管理対象Beanウィザード</div>
+<div class="title">Figure 13. 新規JSF管理対象Beanウィザード</div>
</div>
<div class="paragraph">
<p>「終了」をクリックすると、IDEはBeanクラスを作成し、そのクラスがエディタに表示されます。IDEによって、 <code>@ManagedBean</code> 注釈と <code>@SessionScoped</code> 注釈が追加されています。</p>
@@ -921,7 +982,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>次の太字部分のコードを追加してFilmControllerインスタンスを作成し、映画を取り出します。</p>
</li>
@@ -964,7 +1025,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>表の表示とページへのナビゲートに使用される、次のメソッドを追加します。* public boolean isHasNextPage() {
if (endId + pageSize ⇐ recordCount) {
@@ -1029,7 +1090,7 @@ public class FilmController {
<p>「index」または「browse」を返すメソッドによって、JSFナビゲーション・ハンドラは <code>index.xhtml</code> または <code>browse.xhtml</code> という名前のページを開くように求められます。JSF 2.0仕様では、Faceletsテクノロジを使用するアプリケーションで暗黙ナビゲーション・ルールを使用できます。このアプリケーションは、 <code>faces-config.xml</code> にナビゲーション・ルールが構成されていません。かわりに、ナビゲーション・ハンドラが、アプリケーション内で適切なページを検索しようとします。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>追加の映画の詳細を取り出すヘルパー・クラスにアクセスする、次のメソッドを追加します。* public String getLanguage() {
int langID = current.getLanguageByLanguageId().getLanguageId().intValue();
@@ -1069,7 +1130,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>インポートを修正([Ctrl]-[Shift]-[I])して変更内容を保存します。</p>
</li>
@@ -1129,7 +1190,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p><code><ui:insert></code> 要素を変更して、デフォルトで生成される名前を「body」に変えます。</p>
</li>
@@ -1143,7 +1204,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>変更を保存します。</p>
<div class="literalblock">
@@ -1184,7 +1245,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>ページを変更し、JSF <code><ui:composition></code> 要素および <code><ui:define></code> 要素を使用するようにして、 <code><h:form></code> 要素を追加します。</p>
</li>
@@ -1214,7 +1275,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>JSF管理対象Beanで <code>previous</code> メソッドおよび <code>next</code> メソッドをコールする、次のナビゲーション・リンクを追加します。</p>
</li>
@@ -1231,7 +1292,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>取り出された項目を表示する表を生成する次の <code>dataTable</code> 要素(太字部分)を追加します。</p>
</li>
@@ -1267,7 +1328,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>変更を保存します。</p>
</li>
@@ -1291,19 +1352,45 @@ public class FilmController {
<p>「プロジェクト」ウィンドウで「DVDStore」プロジェクト・ノードを右クリックし、「新規」>「その他」を選択します。</p>
</li>
<li>
-<p>「JavaServer Faces」カテゴリで「Faceletsテンプレート・クライアント」を選択します。「次」をクリックします。
-image::images/hib-faceletsclient.png[title="新規ファイル・ウィザードの「Faceletsテンプレート・クライアント」ファイル・タイプ"]</p>
+<p>「JavaServer Faces」カテゴリで「Faceletsテンプレート・クライアント」を選択します。「次」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hib-faceletsclient.png" alt="hib faceletsclient">
+</div>
+<div class="title">Figure 14. 新規ファイル・ウィザードの「Faceletsテンプレート・クライアント」ファイル・タイプ</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>「ファイル名」に「<strong>browse</strong>」と入力します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>「参照」をクリックして「ファイルを参照」ダイアログ・ボックスを開き、ページのテンプレートを特定します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>「Webページ」フォルダを展開し、「 <code>template.xhtml</code> 」を選択します。「ファイルを選択」をクリックします。
-image::images/hib-browsetemplate.png[title="「ファイルを参照」ダイアログでのテンプレートの選択"]</p>
+<p>「Webページ」フォルダを展開し、「 <code>template.xhtml</code> 」を選択します。「ファイルを選択」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hib-browsetemplate.png" alt="hib browsetemplate">
+</div>
+<div class="title">Figure 15. 「ファイルを参照」ダイアログでのテンプレートの選択</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>「生成されたルート・タグ」に*<ui:composition>*を選択します。「終了」をクリックします。</p>
</li>
@@ -1332,7 +1419,7 @@ image::images/hib-browsetemplate.png[title="「ファイルを参照」ダイア
<p>新しいファイルが <code>template.xhtml</code> ファイルを指定し、 <code><ui:define></code> タグに <code>name="body"</code> プロパティがあることを確認できます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p><code><ui:define></code> タグの間に次の太字のコードを追加してフォームを作成し、管理対象BeanのFilmControllerでメソッドをコールして、データを取り出し、フォームを生成します。</p>
</li>
@@ -1406,7 +1493,7 @@ image::images/hib-browsetemplate.png[title="「ファイルを参照」ダイア
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>変更を保存します。</p>
</li>
@@ -1435,10 +1522,10 @@ image::images/hib-browsetemplate.png[title="「ファイルを参照」ダイア
<div class="content">
<img src="images/hib-browser1.png" alt="hib browser1">
</div>
-<div class="title">Figure 9. indexページに映画のリストが表示されたスクリーンショット</div>
+<div class="title">Figure 16. indexページに映画のリストが表示されたスクリーンショット</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>ブラウザで、「View」をクリックして <code>browse.xhtml</code> をロードし、映画の詳細を表示します。</p>
</li>
@@ -1466,28 +1553,44 @@ image::images/hib-browsetemplate.png[title="「ファイルを参照」ダイア
<code><a href="https://svn.netbeans.org/svn/samples~samples-source-code" class="bare">https://svn.netbeans.org/svn/samples~samples-source-code</a></code>
「次」をクリックします。</p>
</li>
+</ol>
+</div>
+</li>
+</ul>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>「参照」をクリックして「リポジトリ・フォルダを参照」ダイアログ・ボックスを開きます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>ルート・ノードを展開し、*samples/javaee/DVDStoreEE6*を選択します。「OK」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>ソースのローカル・フォルダを指定します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>「終了」をクリックします。</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>「終了」をクリックすると、IDEではローカル・フォルダがSubversionリポジトリとして初期化され、プロジェクト・ソースがチェックアウトされます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>チェックアウトが完了するときに表示されるダイアログで、「プロジェクトを開く」をクリックします。</p>
</li>
diff --git a/content/kb/docs/web/hibernate-webapp_pt_BR.html b/content/kb/docs/web/hibernate-webapp_pt_BR.html
index d9cc03f..92bdfe5 100644
--- a/content/kb/docs/web/hibernate-webapp_pt_BR.html
+++ b/content/kb/docs/web/hibernate-webapp_pt_BR.html
@@ -227,16 +227,21 @@
<p>Clique com o botão direito do mouse no nó Servidor MySQL e escolha Criar Banco de Dados.</p>
</li>
<li>
-<p>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"]</p>
+<p>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.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/create-sakila-mysql.png" alt="create sakila mysql">
+</div>
+<div class="title">Figure 2. Tela da caixa de diálogo Criar Banco de Dados MySQL</div>
+</div>
<div class="paragraph">
<p>Quando você clicar em OK, um nó do Salkila será exibido sob o nó Servidor MySQL.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Clique com o botão direito do mouse no nó do Sakila e escolha Conectar.</p>
</li>
@@ -270,16 +275,28 @@ image::images/create-sakila-mysql.png[title="Tela da caixa de diálogo Criar Ban
<p>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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>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.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Marque a caixa de seleção JavaServer Faces e utilize as bibliotecas default do JSF 2.x.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Marque a caixa de seleção Hibernar na lista de frameworks.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>Selecione o banco de dados sakila na lista drop-down Conexão de Banco de Dados. Clique em Finalizar.</p>
</li>
@@ -292,7 +309,7 @@ image::images/create-sakila-mysql.png[title="Tela da caixa de diálogo Criar Ban
<div class="content">
<img src="images/hib-newwebapp.png" alt="hib newwebapp">
</div>
-<div class="title">Figure 2. Painel Frameworks do assistente de Novo Projeto mostrando como adicionar o suporte do Hibernar ao projeto</div>
+<div class="title">Figure 3. Painel Frameworks do assistente de Novo Projeto mostrando como adicionar o suporte do Hibernar ao projeto</div>
</div>
<div class="paragraph">
<p>Quando você clicar em Finalizar, o IDE criará o projeto de aplicação Web e abrirá o arquivo <code>hibernate.cfg.xml</code> e <code>index.xhtml</code> no editor.</p>
@@ -304,7 +321,7 @@ image::images/create-sakila-mysql.png[title="Tela da caixa de diálogo Criar Ban
<div class="content">
<img src="images/hib-libraries.png" alt="hib libraries">
</div>
-<div class="title">Figure 3. Tela da janela Projetos mostrando bibliotecas do Hibernate</div>
+<div class="title">Figure 4. Tela da janela Projetos mostrando bibliotecas do Hibernate</div>
</div>
</div>
</div>
@@ -329,25 +346,56 @@ image::images/create-sakila-mysql.png[title="Tela da caixa de diálogo Criar Ban
<p>Clique em Adicionar para abrir a caixa de diálogo Adicionar Propriedade do Hibernate.</p>
</li>
<li>
-<p>Na caixa de diálogo, selecione a propriedade <code>hibernate.show_sql</code> e defina o valor para <code>true</code> . 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"]</p>
+<p>Na caixa de diálogo, selecione a propriedade <code>hibernate.show_sql</code> e defina o valor para <code>true</code> . Isso ativa o log de depuração das instruções SQL.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-showsql.png" alt="add property showsql">
+</div>
+<div class="title">Figure 5. Caixa de diálogo Adicionar Propriedade Hibernate que mostra o valor de definição de hibernate.show_sql</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Expanda o nó Propriedades Diversas e clique em Adicionar.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
-<p>Na caixa de diálogo, selecione <code>properties hibernate.current_session_context_class</code> e defina o valor para <code>thread</code> 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"]</p>
+<p>Na caixa de diálogo, selecione <code>properties hibernate.current_session_context_class</code> e defina o valor para <code>thread</code> para ativar o gerenciamento de contexto automático da sessão do Hibernate.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-sessioncontext.png" alt="add property sessioncontext">
+</div>
+<div class="title">Figure 6. Adicione a caixa e diálogo Propriedade do Hibernate mostrando como definir o valor da propriedade hibernate.current_session_context_class</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>Clique novamente em Adicionar no nó Propriedades Diversas e selecione <code>hibernate.query.factory_class</code> na lista drop-down Nome da Propriedade.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
-<p>Selecione <strong>org.hibernate.hql.classic.ClassicQueryTranslatorFactory</strong> 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"]</p>
+<p>Selecione <strong>org.hibernate.hql.classic.ClassicQueryTranslatorFactory</strong> como o Valor da Propriedade. Clique em OK.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-factoryclass.png" alt="add property factoryclass">
+</div>
+<div class="title">Figure 7. Caixa de diálogo Adicionar Propriedade Hibernate que mostra o valor de definição de hibernate.query.factory_class</div>
+</div>
<div class="paragraph">
<p>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):</p>
</div>
@@ -368,7 +416,7 @@ image::images/add-property-factoryclass.png[title="Caixa de diálogo Adicionar P
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>Salve as alterações feitas no arquivo.</p>
</li>
@@ -405,7 +453,7 @@ image::images/add-property-factoryclass.png[title="Caixa de diálogo Adicionar P
<div class="content">
<img src="images/hibernate-util-wizard.png" alt="hibernate util wizard">
</div>
-<div class="title">Figure 4. Tela do assistente do HibernateUtil</div>
+<div class="title">Figure 8. Tela do assistente do HibernateUtil</div>
</div>
<div class="paragraph">
<p>Quando você clicar em Finalizar, o <code>HibernateUtil.java</code> será aberto no editor. Você pode fechar o arquivo porque não precisa editá-lo.</p>
@@ -483,7 +531,7 @@ image::images/add-property-factoryclass.png[title="Caixa de diálogo Adicionar P
<div class="content">
<img src="images/hibernate-reveng-wizard.png" alt="hibernate reveng wizard">
</div>
-<div class="title">Figure 5. Novo assistente de Engenharia Reversa do Hibernate</div>
+<div class="title">Figure 9. Novo assistente de Engenharia Reversa do Hibernate</div>
</div>
<div class="paragraph">
<p>O assistente gera um arquivo de engenharia reversa <code>hibernate.reveng.xml</code> e abre o arquivo no editor. Você pode fechar o arquivo de engenharia reversa porque não precisará editar o arquivo.</p>
@@ -518,11 +566,16 @@ image::images/add-property-factoryclass.png[title="Caixa de diálogo Adicionar P
<p>Certifique-se de que as opções <strong>Código do Domínio</strong> e <strong>Mapeamentos XML do Hibernate</strong> estejam selecionadas.</p>
</li>
<li>
-<p>Selecione <strong>dvdrental</strong> para o Nome do pacote. Clique em Finalizar.
-image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Mapeamento Hibernar e POJOs"]</p>
+<p>Selecione <strong>dvdrental</strong> para o Nome do pacote. Clique em Finalizar.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hibernate-pojo-wizard2.png" alt="hibernate pojo wizard2">
+</div>
+<div class="title">Figure 10. Gerar assistente Arquivos de Mapeamento Hibernar e POJOs</div>
+</div>
<div class="paragraph">
<p>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 <code>hibernate.reveng.xml</code> . O IDE também adicionará entradas de mapeamento em <code>hibernate.cfg.xml</code> .</p>
</div>
@@ -558,7 +611,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
<div class="content">
<img src="images/hib-projectswindow.png" alt="hib projectswindow">
</div>
-<div class="title">Figure 6. Janela Projetos mostrando os POJOs gerados</div>
+<div class="title">Figure 11. Janela Projetos mostrando os POJOs gerados</div>
</div>
<div class="paragraph">
<p>Você pode utilizar o assistente para mapeamento do Hibernate se quiser criar um arquivo de mapeamento do Hibernate que mapeie uma tabela específica para uma classe específica.</p>
@@ -610,7 +663,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>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 ( <code>org.hibernate.Session</code> ) e salve suas alterações.</p>
</li>
@@ -640,7 +693,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
<p>Selecione hibernate.cfg na lista drop-down da barra de ferramentas.</p>
</li>
<li>
-<p>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.</p>
+<p>Teste a conexão digitando no editor e clicando no botão Executar a Consulta HQL ( <span class="image"><img src="images/run_hql_query_16.png" alt="run hql query 16" title="Botão Executar Consulta HQL"></span> ) da barra de ferramentas.</p>
</li>
</ol>
</div>
@@ -656,7 +709,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
<div class="content">
<img src="images/hibernate-hqleditor1.png" alt="hibernate hqleditor1">
</div>
-<div class="title">Figure 7. Gerar assistente Arquivos de Mapeamento Hibernar e POJOs</div>
+<div class="title">Figure 12. Gerar assistente Arquivos de Mapeamento Hibernar e POJOs</div>
</div>
<div class="paragraph">
<p>Se você clicar no botão SQL, você verá a consulta SQL equivalente.</p>
@@ -667,7 +720,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Digite a consulta a seguir para recuperar os registros da tabela Film, onde o id do filme está entre 100 e 200.</p>
</li>
@@ -682,7 +735,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
<p>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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Adicione o método a seguir, <code>getFilmTitles</code> a <code>FilmHelper.java</code> , para recuperar os filmes, onde o id do filme está entre uma determinada faixa especificada pelas variáveis <code>startID</code> e <code>endID</code> .</p>
</li>
@@ -704,7 +757,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Adicione o método a seguir, <code>getActorsByID</code> , para recuperar os atores de um filme específico. O método construirá a consulta utilizando <code>filmId</code> como a variável de entrada.</p>
</li>
@@ -728,7 +781,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Corrija as importações e salve as alterações.</p>
</li>
@@ -768,7 +821,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Adicione o método seguinte para recuperar um único filme de acordo com o <code>filmId</code> .</p>
</li>
@@ -793,7 +846,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Adicione o método a seguir para recuperar o idioma do filme de acordo com o <code>filmId</code> .</p>
</li>
@@ -818,7 +871,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Salve as alterações.</p>
</li>
@@ -853,13 +906,21 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
<p>Você usará o nome <code>filmController</code> do Bean Gerenciado como o valor para <code>inputText</code> e <code>commandButton</code> na página JSF <code>index.xhtml</code> ao chamar métodos no Bean.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Selecione <strong>dvdrental</strong> para o Pacote.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Digite <strong>filmController</strong> como o Nome que será utilizado para o bean gerenciado.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Defina o Escopo Como Sessão. Clique em Finalizar.</p>
</li>
@@ -869,7 +930,7 @@ image::images/hibernate-pojo-wizard2.png[title="Gerar assistente Arquivos de Map
<div class="content">
<img src="images/hib-newmanagedbean.png" alt="hib newmanagedbean">
</div>
-<div class="title">Figure 8. Novo assistente de Bean Gerenciado pelo JSF</div>
+<div class="title">Figure 13. Novo assistente de Bean Gerenciado pelo JSF</div>
</div>
<div class="paragraph">
<p>Quando você clicar em Finalizar, o IDE gerará a classe bean e abrirá a classe no editor. O IDE adicionou as anotações <code>@ManagedBean</code> e <code>@SessionScoped</code> .</p>
@@ -915,7 +976,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Adicione o código a seguir (em negrito) para criar a instância do FilmController e recuperar os filmes.</p>
</li>
@@ -958,7 +1019,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Adicione os métodos a seguir usados para exibir a tabela e navegar entre as páginas.* public boolean isHasNextPage() {
if (endId + pageSize ⇐ recordCount) {
@@ -1023,7 +1084,7 @@ public class FilmController {
<p>Os métodos que retornam "index" ou "browse" solicitarão o handler de navegação JSF para tentar abrir uma página denominada <code>index.xhtml</code> ou <code>browse.xhtml</code> . 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 <code>faces-config.xml</code> . Em vez disso, o handler de navegação tentará localizar a página adequada na aplicação.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>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();
@@ -1063,7 +1124,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Corrija as importações (Ctrl-Shift-I) e salve as alterações.</p>
</li>
@@ -1123,7 +1184,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Modifique o elemento <code><ui:insert></code> para alterar o nome gerado default para "corpo".</p>
</li>
@@ -1137,7 +1198,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Salve as alterações.</p>
</li>
@@ -1176,7 +1237,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Modifique a página para utilizar os elementos JSF <code><ui:composition></code> e <code><ui:define></code> e adicione um elemento <code><h:form></code> .</p>
</li>
@@ -1204,7 +1265,7 @@ public class FilmController {
<p>Os elementos <code><ui:composition></code> e <code><ui:define></code> são utilizados em combinação com o modelo de página que você criará. O elemento <code><ui:composition></code> faz referência à localização do modelo que será utilizado por essa página. O elemento <code><ui:define></code> faz referência à posição no modelo que o código incluído ocupará.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Adicione os seguintes links de navegação que chamam os métodos <code>previous</code> e <code>next</code> no Bean gerenciado pelo JSF.</p>
</li>
@@ -1221,7 +1282,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Adicione o seguinte elemento <code>dataTable</code> (em negrito) para gerar a tabela para exibir os itens recuperados.</p>
</li>
@@ -1257,7 +1318,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Salve as alterações.</p>
</li>
@@ -1281,19 +1342,45 @@ public class FilmController {
<p>Clique com o botão direito do mouse no nó do projeto DVDStore na janela Projetos e selecione Novo > Outro.</p>
</li>
<li>
-<p>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"]</p>
+<p>Selecione Cliente de Modelo de Facelets na categoria JavaServer Faces. Clique em Próximo.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hib-faceletsclient.png" alt="hib faceletsclient">
+</div>
+<div class="title">Figure 14. Tipo de arquivo Cliente de Modelo de Facelets no assistente Novo Arquivo</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Digite <strong>browse</strong> para o Nome do Arquivo.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Localize o Modelo da página clicando em Procurar para abrir a caixa de diálogo Procurar Arquivos.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>Expanda a pasta Páginas Web e selecione <code>template.xhtml</code> . Clique em Selecionar Arquivo.
-image::images/hib-browsetemplate.png[title="Selecione o modelo na caixa de diálogo Procurar Arquivos"]</p>
+<p>Expanda a pasta Páginas Web e selecione <code>template.xhtml</code> . Clique em Selecionar Arquivo.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hib-browsetemplate.png" alt="hib browsetemplate">
+</div>
+<div class="title">Figure 15. Selecione o modelo na caixa de diálogo Procurar Arquivos</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Selecione <strong><ui:composition></strong> para a Tag Raiz Gerada. Clique em Finalizar.</p>
</li>
@@ -1322,7 +1409,7 @@ image::images/hib-browsetemplate.png[title="Selecione o modelo na caixa de diál
<p>É possível ver que o novo arquivo especifica o arquivo <code>template.xhtml</code> e que a tag <code><ui:define></code> possui a propriedade <code>name="body"</code></p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Adicione o código a seguir (em negrito) entre as tags <code><ui:define></code> para criar o form e chamar os métodos no FilmController do Bean gerenciado para recuperar os dados e preencher o form.</p>
</li>
@@ -1394,7 +1481,7 @@ image::images/hib-browsetemplate.png[title="Selecione o modelo na caixa de diál
<p>É possível ver que os arquivos <code>browse.xhtml</code> e <code>index.xhtml</code> utilizarão o mesmo modelo de página.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Salve as alterações.</p>
</li>
@@ -1423,10 +1510,10 @@ image::images/hib-browsetemplate.png[title="Selecione o modelo na caixa de diál
<div class="content">
<img src="images/hib-browser1.png" alt="hib browser1">
</div>
-<div class="title">Figure 9. Tela do browser exibindo a lista de filme na página de índice</div>
+<div class="title">Figure 16. Tela do browser exibindo a lista de filme na página de índice</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>No browser, clique em "Exibir" para carregar o <code>browse.xhtml</code> e exibir os detalhes do filme.</p>
</li>
@@ -1454,28 +1541,44 @@ image::images/hib-browsetemplate.png[title="Selecione o modelo na caixa de diál
<code><a href="https://svn.netbeans.org/svn/samples~samples-source-code" class="bare">https://svn.netbeans.org/svn/samples~samples-source-code</a></code>
Clique em Próximo.</p>
</li>
+</ol>
+</div>
+</li>
+</ul>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Clique em Procurar para abrir a caixa de diálogo Procurar nas Pastas do Repositório:</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Expanda o nó raiz e selecione <strong>samples/javaee/DVDStoreEE6</strong>. Clique em OK.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Especifique a Pasta Local dos códigos-fonte.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Clique em Finalizar.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>Quando você clica em Finalizar, o IDE inicializa a pasta local como um repositório Subversion e verifica os códigos-fonte do projeto.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Clique em Abrir Projeto na caixa de diálogo exibida quando o check-out for concluído.</p>
</li>
diff --git a/content/kb/docs/web/hibernate-webapp_ru.html b/content/kb/docs/web/hibernate-webapp_ru.html
index 04e8424..91815a5 100644
--- a/content/kb/docs/web/hibernate-webapp_ru.html
+++ b/content/kb/docs/web/hibernate-webapp_ru.html
@@ -227,16 +227,21 @@
<p>Щелкните правой кнопкой мыши узел "MySQL Server" и выберите "Create Database".</p>
</li>
<li>
-<p>Выберите базу данных "Sakila"из раскрывающегося списка "New Database Name" в диалоговом окне "Create MySQL Database". Нажмите кнопку "ОК".
-image::images/create-sakila-mysql.png[title="Снимок диалогового окна создания базы данных MySQL"]</p>
+<p>Выберите базу данных "Sakila"из раскрывающегося списка "New Database Name" в диалоговом окне "Create MySQL Database". Нажмите кнопку "ОК".</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/create-sakila-mysql.png" alt="create sakila mysql">
+</div>
+<div class="title">Figure 2. Снимок диалогового окна создания базы данных MySQL</div>
+</div>
<div class="paragraph">
<p>При нажатии кнопки "OK" узел "Sakila" появится под узлом "MySQL Server".</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Щелкните правой кнопкой мыши узел "Sakila" и выберите "Connect".</p>
</li>
@@ -270,16 +275,28 @@ image::images/create-sakila-mysql.png[title="Снимок диалогового
<p>В рамках этого руководства копирование библиотек проекта в выделенную папку лишено смысла, поскольку совместное использование библиотек с другими пользователями не потребуется.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>В качестве сервера выберите 'GlassFish Server', а в качестве версии Java EE -'Java EE 6 Web' или 'Java EE 7 Web'. Нажмите кнопку "Далее".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Установите флажок 'JavaServer Faces' и используйте стандартные библиотеки JSF 2.x.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>В списке платформ установите флажок 'Гибернация'.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>Выберите базу данных "sakila" из раскрывающегося списка "Соединение с базой данных". Нажмите кнопку 'Готово'.</p>
</li>
@@ -292,7 +309,7 @@ image::images/create-sakila-mysql.png[title="Снимок диалогового
<div class="content">
<img src="images/hib-newwebapp.png" alt="hib newwebapp">
</div>
-<div class="title">Figure 2. Панель 'Платформы' мастера создания проектов, на которой отображается добавление поддержки Hibernate к проекту</div>
+<div class="title">Figure 3. Панель 'Платформы' мастера создания проектов, на которой отображается добавление поддержки Hibernate к проекту</div>
</div>
<div class="paragraph">
<p>При нажатии кнопки "Готово" в среде IDE создается проект веб-приложения и открывается файл <code>hibernate.cfg.xml</code> и <code>index.xhtml</code> в редакторе.</p>
@@ -304,7 +321,7 @@ image::images/create-sakila-mysql.png[title="Снимок диалогового
<div class="content">
<img src="images/hib-libraries.png" alt="hib libraries">
</div>
-<div class="title">Figure 3. Снимок окна 'Проекты', в котором отображаются библиотеки Hibernate</div>
+<div class="title">Figure 4. Снимок окна 'Проекты', в котором отображаются библиотеки Hibernate</div>
</div>
</div>
</div>
@@ -329,25 +346,56 @@ image::images/create-sakila-mysql.png[title="Снимок диалогового
<p>Нажмите кнопку "Add" для открытия диалогового окна "Add Hibernate Property".</p>
</li>
<li>
-<p>В диалоговом окне выберите свойство <code>hibernate.show_sql</code> и установите значение <code>true</code> . Это приведет ко включению протоколирования отладки операторов SQL.
-image::images/add-property-showsql.png[title="Диалоговое окно 'Добавить свойство Hibernate', в котором отображаются значения настроек для свойства hibernate.show_sql"]</p>
+<p>В диалоговом окне выберите свойство <code>hibernate.show_sql</code> и установите значение <code>true</code> . Это приведет ко включению протоколирования отладки операторов SQL.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-showsql.png" alt="add property showsql">
+</div>
+<div class="title">Figure 5. Диалоговое окно 'Добавить свойство Hibernate', в котором отображаются значения настроек для свойства hibernate.show_sql</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Разверните узел "Прочие свойства" и нажмите кнопку "Добавить".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
-<p>В диалоговом окне выберите <code>properties hibernate.current_session_context_class</code> и установите значение <code>thread</code> для включения автоматического управления контекстами сеанса платформы Hibernate.
-image::images/add-property-sessioncontext.png[title="Диалоговое окно 'Добавить свойство Hibernate', в котором отображаются значения настроек для свойства hibernate.current_session_context_class"]</p>
+<p>В диалоговом окне выберите <code>properties hibernate.current_session_context_class</code> и установите значение <code>thread</code> для включения автоматического управления контекстами сеанса платформы Hibernate.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-sessioncontext.png" alt="add property sessioncontext">
+</div>
+<div class="title">Figure 6. Диалоговое окно 'Добавить свойство Hibernate', в котором отображаются значения настроек для свойства hibernate.current_session_context_class</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>Нажмите кнопку "Добавить" еще раз в узле "Разные свойства" и выберите <code>hibernate.query.factory_class</code> в раскрывающемся списке "Имя свойства".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
-<p>Выберите <strong>org.hibernate.hql.classic.ClassicQueryTranslatorFactory</strong> как "Значение свойства". Нажмите кнопку "ОК".
-image::images/add-property-factoryclass.png[title="Диалоговое окно 'Добавить свойство Hibernate', в котором отображаются значения настроек для свойства hibernate.query.factory_class property"]</p>
+<p>Выберите <strong>org.hibernate.hql.classic.ClassicQueryTranslatorFactory</strong> как "Значение свойства". Нажмите кнопку "ОК".</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-factoryclass.png" alt="add property factoryclass">
+</div>
+<div class="title">Figure 7. Диалоговое окно 'Добавить свойство Hibernate', в котором отображаются значения настроек для свойства hibernate.query.factory_class property</div>
+</div>
<div class="paragraph">
<p>При выборе вкладки "XML" в редакторе можно просмотреть файл в режиме XML. Ваш файл должен выглядеть следующим образом (три новые свойства выделены жирным шрифтом):</p>
</div>
@@ -368,7 +416,7 @@ image::images/add-property-factoryclass.png[title="Диалоговое окно
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>Сохраните измененный файл.</p>
</li>
@@ -405,7 +453,7 @@ image::images/add-property-factoryclass.png[title="Диалоговое окно
<div class="content">
<img src="images/hibernate-util-wizard.png" alt="hibernate util wizard">
</div>
-<div class="title">Figure 4. моментальный снимок мастера создания HibernateUtil</div>
+<div class="title">Figure 8. моментальный снимок мастера создания HibernateUtil</div>
</div>
<div class="paragraph">
<p>После нажатия кнопки "Finish" в редакторе откроется класс <code>HibernateUtil.java</code> . Файл можно закрыть, т.к. необходимость в его изменении отсутствует.</p>
@@ -483,7 +531,7 @@ image::images/add-property-factoryclass.png[title="Диалоговое окно
<div class="content">
<img src="images/hibernate-reveng-wizard.png" alt="hibernate reveng wizard">
</div>
-<div class="title">Figure 5. Мастер создания файла обратного проектирования платформы Hibernate</div>
+<div class="title">Figure 9. Мастер создания файла обратного проектирования платформы Hibernate</div>
</div>
<div class="paragraph">
<p>Мастер создает файл обратного проектирования <code>hibernate.reveng.xml</code> и открывает файл в редакторе. Файл обратного проектирования можно закрыть, поскольку его изменение не требуется.</p>
@@ -518,11 +566,16 @@ image::images/add-property-factoryclass.png[title="Диалоговое окно
<p>Убедитесь в том, что выбраны пункты <strong>Domain Code</strong> и <strong>Hibernate XML Mappings</strong>.</p>
</li>
<li>
-<p>Выберите <strong>dvdrental</strong> в качестве имени пакета. Нажмите кнопку 'Готово'.
-image::images/hibernate-pojo-wizard2.png[title="Мастер создания файлов сопоставления Hibernate и POJO"]</p>
+<p>Выберите <strong>dvdrental</strong> в качестве имени пакета. Нажмите кнопку 'Готово'.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hibernate-pojo-wizard2.png" alt="hibernate pojo wizard2">
+</div>
+<div class="title">Figure 10. Мастер создания файлов сопоставления Hibernate и POJO</div>
+</div>
<div class="paragraph">
<p>При нажатии кнопки "Готово" в среде IDE создаются объекты POJO и файлы отображения платформы Hibernate где поля отображаются на столбцы, указанные в <code>hibernate.reveng.xml</code> . Среда IDE добавляет записи отображения в файл <code>hibernate.cfg.xml</code> .</p>
</div>
@@ -558,7 +611,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
<div class="content">
<img src="images/hib-projectswindow.png" alt="hib projectswindow">
</div>
-<div class="title">Figure 6. В окне 'Проекты' отображаются созданные POJO</div>
+<div class="title">Figure 11. В окне 'Проекты' отображаются созданные POJO</div>
</div>
<div class="paragraph">
<p>Можно использовать мастер "Отображение Hibernate" для создания файла отображения платформы Hibernate, отображающего определенную таблицу на определенный класс.</p>
@@ -610,7 +663,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Щелкните правой кнопкой мыши в редакторе и выберите команду "Исправить операторы импорта" (ALT+SHIFT+I; &#8984+SHIFT+I на компьютере Mac) для добавления любого необходимого оператора импорта ( <code>org.hibernate.Session</code> ) и сохраните изменения.</p>
</li>
@@ -640,7 +693,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
<p>Выберите "hibernate.cfg" из раскрывающегося списка на панели инструментов.</p>
</li>
<li>
-<p>Проверьте соединение, введя следующее в редакторе и нажав кнопку 'Выполнить запрос HQL' ( image::images/run_hql_query_16.png[title="Кнопка 'Выполнить запрос HQL'"] ) на панели инструментов.</p>
+<p>Проверьте соединение, введя следующее в редакторе и нажав кнопку 'Выполнить запрос HQL' ( <span class="image"><img src="images/run_hql_query_16.png" alt="run hql query 16" title="Кнопка 'Выполнить запрос HQL'"></span> ) на панели инструментов.</p>
</li>
</ol>
</div>
@@ -656,7 +709,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
<div class="content">
<img src="images/hibernate-hqleditor1.png" alt="hibernate hqleditor1">
</div>
-<div class="title">Figure 7. Мастер создания файлов сопоставления Hibernate и POJO</div>
+<div class="title">Figure 12. Мастер создания файлов сопоставления Hibernate и POJO</div>
</div>
<div class="paragraph">
<p>При нажатии кнопки "SQL" на экране должен отобразиться эквивалентный запрос SQL.</p>
@@ -667,7 +720,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Введите следующий запрос на извлечение из таблицы "Film" записей, в которых идентификатор фильма находится между 100 и 200.</p>
</li>
@@ -682,7 +735,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
<p>В окне результата отобразится список записей. Теперь, после подтверждения правильности получаемых после выполнения запроса результатов, можно использовать запрос в служебном классе.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Добавьте следующий метод <code>getFilmTitles</code> к <code>FilmHelper.java</code> для извлечения фильмов с идентификатором, находящимся в определенном диапазоне, ограниченном переменными <code>startID</code> и <code>endID</code> .</p>
</li>
@@ -704,7 +757,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Добавьте следующий метод <code>getActorsByID</code> для извлечения актеров, задействованных в определенном фильме. Для создания запроса в этом методе в качестве входной переменной используется <code>filmId</code> .</p>
</li>
@@ -728,7 +781,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Исправьте операторы импорта и сохраните измененные данные.</p>
</li>
@@ -768,7 +821,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Добавьте следующий метод для извлечения отдельного фильма согласно <code>filmId</code> .</p>
</li>
@@ -793,7 +846,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Добавьте следующий метод для извлечения языка фильма согласно <code>langId</code> .</p>
</li>
@@ -818,7 +871,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Сохраните изменения.</p>
</li>
@@ -853,13 +906,21 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
<p>Имя управляемого компонента <code>filmController</code> используется в качестве значения для <code>inputText</code> и <code>commandButton</code> на странице JSF <code>index.xhtml</code> во время вызова методов в компоненте.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Выберите <strong>dvdrental</strong> в качестве пакета.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Введите <strong>filmController</strong> в качестве имени, используемого для управляемого компонента.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Установите для параметра "Контекст" значение "Сеанс". Нажмите кнопку 'Готово'.</p>
</li>
@@ -869,7 +930,7 @@ image::images/hibernate-pojo-wizard2.png[title="Мастер создания ф
<div class="content">
<img src="images/hib-newmanagedbean.png" alt="hib newmanagedbean">
</div>
-<div class="title">Figure 8. Мастер создания новых управляемых компонентов JSF</div>
+<div class="title">Figure 13. Мастер создания новых управляемых компонентов JSF</div>
</div>
<div class="paragraph">
<p>При нажатии кнопки "Готово" в среде IDE создается класс компонента, который затем открывается в редакторе. Среда IDE добавила аннотации <code>@ManagedBean</code> и <code>@SessionScoped</code> .</p>
@@ -915,7 +976,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Добавьте следующий код (выделенный полужирным шрифтом) для создания экземпляра FilmController и извлечения фильмов.</p>
</li>
@@ -958,7 +1019,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Добавьте следующие методы, используемые для отображения таблицы и перехода к страницам.* public boolean isHasNextPage() {
if (endId + pageSize ⇐ recordCount) {
@@ -1023,7 +1084,7 @@ public class FilmController {
<p>Методы, возвращающие "index" или "browse", запрашивают обработчик переходов JSF для попытки открытия страницы под именем <code>index.xhtml</code> или <code>browse.xhtml</code> . Спецификация JSF 2.0 допускает использование правила неявных переходов в приложениях, использующих технологию Facelets. В таком приложении правила переходов не настраиваются в <code>faces-config.xml</code> . Вместо этого обработчик переходов пытается найти подходящую страницу в приложении.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Добавьте следующие методы для обращения к служебному классу в целях извлечения дополнительных данных о фильме.* public String getLanguage() {
int langID = current.getLanguageByLanguageId().getLanguageId().intValue();
@@ -1063,7 +1124,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Исправьте операторы импорта (CTRL+SHIFT+I) и сохраните измененные данные.</p>
</li>
@@ -1123,7 +1184,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Измените элемент <code><ui:insert></code> для изменения созданного по умолчанию имени на "body".</p>
</li>
@@ -1137,7 +1198,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Сохраните изменения.</p>
</li>
@@ -1176,7 +1237,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Измените страницу для использования элементов JSF <code><ui:composition></code> и <code><ui:define></code> и добавьте элемент <code><h:form></code> .</p>
</li>
@@ -1204,7 +1265,7 @@ public class FilmController {
<p>Элементы <code><ui:composition></code> и <code><ui:define></code> используются в сочетании с созданным шаблоном страницы. Элемент <code><ui:composition></code> ссылается на местоположение шаблона, используемого этой страницей. Элемент <code><ui:define></code> ссылается на позицию в шаблоне, занятую вложенным кодом.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Добавьте следующие ссылки перехода, вызывающие методы <code>next</code> и <code>previous</code> в управляемом компоненте JSF.</p>
</li>
@@ -1221,7 +1282,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Добавьте следующий элемент (выделенный полужирным шрифтом) <code>dataTable</code> для создания таблицы, в которой будут отображены извлеченные элементы.</p>
</li>
@@ -1257,7 +1318,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Сохраните изменения.</p>
</li>
@@ -1281,19 +1342,45 @@ public class FilmController {
<p>Щелкните узел проекта DVDStore правой кнопкой мыши в окне "Проекты" и выберите команду "Создать" > "Другое".</p>
</li>
<li>
-<p>Выберите "Клиент шаблона Facelets" в категории "JavaServer Faces". Нажмите кнопку "Далее".
-image::images/hib-faceletsclient.png[title="Тип файла клиента шаблона Facelets в мастере создания файлов"]</p>
+<p>Выберите "Клиент шаблона Facelets" в категории "JavaServer Faces". Нажмите кнопку "Далее".</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hib-faceletsclient.png" alt="hib faceletsclient">
+</div>
+<div class="title">Figure 14. Тип файла клиента шаблона Facelets в мастере создания файлов</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Введите <strong>browse</strong> в качестве имени файла.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Чтобы найти шаблон для страницы, нажмите кнопку 'Обзор'. В результате откроется диалоговое окно 'Обзор файлов'.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>Разверните папку "Веб-страницы" и выберите <code>template.xhtml</code> . Нажмите "Выбрать файл".
-image::images/hib-browsetemplate.png[title="Выберите шаблон в диалоговом окне 'Обзор файлов'"]</p>
+<p>Разверните папку "Веб-страницы" и выберите <code>template.xhtml</code> . Нажмите "Выбрать файл".</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hib-browsetemplate.png" alt="hib browsetemplate">
+</div>
+<div class="title">Figure 15. Выберите шаблон в диалоговом окне 'Обзор файлов'</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Выберите*<ui:composition>* в качестве созданного тега корня. Нажмите кнопку 'Готово'.</p>
</li>
@@ -1322,7 +1409,7 @@ image::images/hib-browsetemplate.png[title="Выберите шаблон в д
<p>В новом файле указан файл <code>template.xhtml</code> , а тег <code><ui:define></code> обладает свойством <code>name="body"</code></p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Добавьте следующий код (выделенный полужирным шрифтом) между тегами <code><ui:define></code> для создания формы и вызовите методы в управляемом компоненте "FilmController" для извлечения данных и заполнения формы.</p>
</li>
@@ -1394,7 +1481,7 @@ image::images/hib-browsetemplate.png[title="Выберите шаблон в д
<p>Файлы <code>browse.xhtml</code> и <code>index.xhtml</code> используют один и тот же шаблон страницы.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Сохраните изменения.</p>
</li>
@@ -1423,10 +1510,10 @@ image::images/hib-browsetemplate.png[title="Выберите шаблон в д
<div class="content">
<img src="images/hib-browser1.png" alt="hib browser1">
</div>
-<div class="title">Figure 9. Снимок браузера, в котором отображается список фильмов на странице индекса</div>
+<div class="title">Figure 16. Снимок браузера, в котором отображается список фильмов на странице индекса</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>В браузере нажмите "Просмотр" для загрузки файла <code>browse.xhtml</code> для просмотра дополнительных сведений о фильме.</p>
</li>
@@ -1454,28 +1541,44 @@ image::images/hib-browsetemplate.png[title="Выберите шаблон в д
<code><a href="https://svn.netbeans.org/svn/samples~samples-source-code" class="bare">https://svn.netbeans.org/svn/samples~samples-source-code</a></code>
Нажмите кнопку "Далее".</p>
</li>
+</ol>
+</div>
+</li>
+</ul>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Нажмите кнопку "Обзор" для открытия диалогового окна "Обзор папок репозитория".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Разверните корневой узел и выберите <strong>samples/javaee/DVDStoreEE6</strong>. Нажмите кнопку "ОК".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Укажите локальную папку для исходных файлов.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>Нажмите кнопку 'Готово'.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>После нажатия кнопки "Готово" среда IDE инициализирует локальную папку в качестве репозитория Subversion и выполняет проверку исходных файлов проекта на выходе.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Щелкните команду "Открыть проект" в диалоговом окне, которое появится после завершения проверки.</p>
</li>
diff --git a/content/kb/docs/web/hibernate-webapp_zh_CN.html b/content/kb/docs/web/hibernate-webapp_zh_CN.html
index 1b1c168..e229db0 100644
--- a/content/kb/docs/web/hibernate-webapp_zh_CN.html
+++ b/content/kb/docs/web/hibernate-webapp_zh_CN.html
@@ -227,16 +227,21 @@
<p>右键单击 MySQL 服务器节点并选择 "Create Database"（创建数据库）。</p>
</li>
<li>
-<p>在 "Create MySQL Database"（创建 MySQL 数据库）对话框的 "New Database Name"（新数据库名称）下拉列表中选择 "Sakila" 数据库。单击 "OK"（确定）。
-image::images/create-sakila-mysql.png[title=""Create MySQL Database"（创建 MySQL 数据库）对话框的屏幕快照"]</p>
+<p>在 "Create MySQL Database"（创建 MySQL 数据库）对话框的 "New Database Name"（新数据库名称）下拉列表中选择 "Sakila" 数据库。单击 "OK"（确定）。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/create-sakila-mysql.png" alt="create sakila mysql" width="Create MySQL Database"（创建 MySQL 数据库）对话框的屏幕快照"">
+</div>
+<div class="title">Figure 2. </div>
+</div>
<div class="paragraph">
<p>单击 "OK"（确定），MySQL 服务器节点下随即出现一个 Sakila 节点。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>右键单击 "Sakila" 节点，然后选择 "Connect"（连接）。</p>
</li>
@@ -270,16 +275,28 @@ image::images/create-sakila-mysql.png[title=""Create MySQL Database"（创建 My
<p>（对于本教程，没有理由将项目库复制到指定文件夹，因为您将需要与其他用户共享库）。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>将服务器设置为 "GlassFish Server"，并将 Java EE 版本设置为 "Java EE 6 Web" 或 "Java EE 7 Web"。单击 "Next"（下一步）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>选中 "JavaServer Faces" 复选框并使用默认 JSF 2.x 库。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>在框架列表中选中 "Hibernate" 复选框。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>从 "Database Connection"（数据库连接）下拉列表中选择 sakila 数据库。单击 "Finish"（完成）。</p>
</li>
@@ -292,7 +309,7 @@ image::images/create-sakila-mysql.png[title=""Create MySQL Database"（创建 My
<div class="content">
<img src="images/hib-newwebapp.png" alt="hib newwebapp" width="Frameworks"（框架）面板，其中显示向项目中添加 Hibernate 支持"">
</div>
-<div class="title">Figure 2. 新建项目向导的 </div>
+<div class="title">Figure 3. 新建项目向导的 </div>
</div>
<div class="paragraph">
<p>单击 "Finish"（完成），此时 IDE 将创建 Web 应用程序项目，并在编辑器中打开 <code>hibernate.cfg.xml</code> 文件和 <code>index.xhtml</code> 。</p>
@@ -304,7 +321,7 @@ image::images/create-sakila-mysql.png[title=""Create MySQL Database"（创建 My
<div class="content">
<img src="images/hib-libraries.png" alt="hib libraries" width="Projects"（项目）窗口的屏幕快照"">
</div>
-<div class="title">Figure 3. 显示 Hibernate 库的 </div>
+<div class="title">Figure 4. 显示 Hibernate 库的 </div>
</div>
</div>
</div>
@@ -329,25 +346,56 @@ image::images/create-sakila-mysql.png[title=""Create MySQL Database"（创建 My
<p>单击 "Add"（添加）以打开 "Add Hibernate Property"（添加 Hibernate 属性）对话框。</p>
</li>
<li>
-<p>在此对话框中，选择 <code>hibernate.show_sql</code> 属性并将值设置为 <code>true</code> 。这将启用 SQL 语句的调试日志记录。
-image::images/add-property-showsql.png[title="显示 hibernate.show_sql 属性的设置值的 "Add Hibernate Property"（添加 Hibernate 属性）对话框"]</p>
+<p>在此对话框中，选择 <code>hibernate.show_sql</code> 属性并将值设置为 <code>true</code> 。这将启用 SQL 语句的调试日志记录。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-showsql.png" alt="add property showsql" width="Add Hibernate Property"（添加 Hibernate 属性）对话框"">
+</div>
+<div class="title">Figure 5. 显示 hibernate.show_sql 属性的设置值的 </div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>展开 "Miscellaneous Properties"（其他属性）节点并单击 "Add"（添加）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
-<p>在此对话框中，选择 <code>properties hibernate.current_session_context_class</code> 并将值设置为 <code>thread</code> 以启用 Hibernate 的自动会话上下文管理。
-image::images/add-property-sessioncontext.png[title="显示为 hibernate.current_session_context_class 属性设置值的 "Add Hibernate Property"（添加 Hibernate 属性）对话框"]</p>
+<p>在此对话框中，选择 <code>properties hibernate.current_session_context_class</code> 并将值设置为 <code>thread</code> 以启用 Hibernate 的自动会话上下文管理。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-sessioncontext.png" alt="add property sessioncontext" width="Add Hibernate Property"（添加 Hibernate 属性）对话框"">
+</div>
+<div class="title">Figure 6. 显示为 hibernate.current_session_context_class 属性设置值的 </div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="7">
<li>
<p>在 "Miscellaneous Properties"（其他属性）节点下再次单击 "Add"（添加），然后在 "Property Name"（属性名称）下拉列表中选择 <code>hibernate.query.factory_class</code> 。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
-<p>选择 <strong>org.hibernate.hql.classic.ClassicQueryTranslatorFactory</strong> 作为属性值。单击 "OK"（确定）。
-image::images/add-property-factoryclass.png[title="显示 hibernate.query.factory_class 属性的设置值的 "Add Hibernate Property"（添加 Hibernate 属性）对话框"]</p>
+<p>选择 <strong>org.hibernate.hql.classic.ClassicQueryTranslatorFactory</strong> 作为属性值。单击 "OK"（确定）。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/add-property-factoryclass.png" alt="add property factoryclass" width="Add Hibernate Property"（添加 Hibernate 属性）对话框"">
+</div>
+<div class="title">Figure 7. 显示 hibernate.query.factory_class 属性的设置值的 </div>
+</div>
<div class="paragraph">
<p>如果单击编辑器中的 XML 标签，则可以在 XML 视图中看到此文件。文件应如下所示（三个新属性以粗体显示）：</p>
</div>
@@ -368,7 +416,7 @@ image::images/add-property-factoryclass.png[title="显示 hibernate.query.factor
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>保存对该文件所做的更改。</p>
</li>
@@ -405,7 +453,7 @@ image::images/add-property-factoryclass.png[title="显示 hibernate.query.factor
<div class="content">
<img src="images/hibernate-util-wizard.png" alt="hibernate util wizard" width="HibernateUtil" 向导的屏幕快照"">
</div>
-<div class="title">Figure 4. </div>
+<div class="title">Figure 8. </div>
</div>
<div class="paragraph">
<p>单击 "Finish"（完成），此时 <code>HibernateUtil.java</code> 将在编辑器中打开。由于不需要编辑该文件，因此可以关闭该文件。</p>
@@ -483,7 +531,7 @@ image::images/add-property-factoryclass.png[title="显示 hibernate.query.factor
<div class="content">
<img src="images/hibernate-reveng-wizard.png" alt="hibernate reveng wizard">
</div>
-<div class="title">Figure 5. 新建 Hibernate 逆向工程向导</div>
+<div class="title">Figure 9. 新建 Hibernate 逆向工程向导</div>
</div>
<div class="paragraph">
<p>该向导生成一个 <code>hibernate.reveng.xml</code> 逆向工程文件，并在编辑器中打开该文件。可将该逆向工程文件关闭，因为无需对其进行编辑。</p>
@@ -518,11 +566,16 @@ image::images/add-property-factoryclass.png[title="显示 hibernate.query.factor
<p>确保选中了 <strong>Domain Code</strong>（域代码）和 <strong>Hibernate XML Mappings</strong>（Hibernate XML 映射）选项。</p>
</li>
<li>
-<p>选择 <strong>dvdrental</strong> 作为包名。单击 "Finish"（完成）。
-image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping Files and POJOs"（生成 Hibernate 映射文件和 POJO）向导"]</p>
+<p>选择 <strong>dvdrental</strong> 作为包名。单击 "Finish"（完成）。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hibernate-pojo-wizard2.png" alt="hibernate pojo wizard2" width="Generate Hibernate Mapping Files and POJOs"（生成 Hibernate 映射文件和 POJO）向导"">
+</div>
+<div class="title">Figure 10. </div>
+</div>
<div class="paragraph">
<p>单击 "Finish"（完成）后，IDE 生成 POJO 和 Hibernate 映射文件，并将字段映射到在 <code>hibernate.reveng.xml</code> 中指定的列。IDE 也添加映射条目到 <code>hibernate.cfg.xml</code> 中。</p>
</div>
@@ -558,7 +611,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
<div class="content">
<img src="images/hib-projectswindow.png" alt="hib projectswindow" width="Projects"（项目）窗口"">
</div>
-<div class="title">Figure 6. 显示生成的 POJO 的 </div>
+<div class="title">Figure 11. 显示生成的 POJO 的 </div>
</div>
<div class="paragraph">
<p>如果要创建 Hibernate 映射文件以将特定表映射到特定类，您可以使用 Hibernate 映射向导。</p>
@@ -610,7 +663,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>在编辑器中右键单击并选择 "Fix Imports"（修复导入）（Alt-Shift-I 组合键；在 Mac 上为 ⌘-Shift-I 组合键）以添加任何需要的 import 语句 ( <code>org.hibernate.Session</code> )，并保存更改。</p>
</li>
@@ -640,7 +693,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
<p>从工具栏的下拉列表中选择 hibernate.cfg。</p>
</li>
<li>
-<p>通过在编辑器中键入以下内容并单击工具栏中的 "Run HQL Query"（运行 HQL 查询）按钮 (image::images/run_hql_query_16.png[title=""Run HQL Query"（运行 HQL 查询）按钮"])，测试连接。</p>
+<p>通过在编辑器中键入以下内容并单击工具栏中的 "Run HQL Query"（运行 HQL 查询）按钮 (<span class="image"><img src="images/run_hql_query_16.png" alt="run hql query 16" width="Run HQL Query"（运行 HQL 查询）按钮"" title=""></span>)，测试连接。</p>
</li>
</ol>
</div>
@@ -656,7 +709,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
<div class="content">
<img src="images/hibernate-hqleditor1.png" alt="hibernate hqleditor1" width="Generate Hibernate Mapping Files and POJOs"（生成 Hibernate 映射文件和 POJO）向导"">
</div>
-<div class="title">Figure 7. </div>
+<div class="title">Figure 12. </div>
</div>
<div class="paragraph">
<p>如果单击 SQL 按钮，可以看到起相同作用的 SQL 查询。</p>
@@ -667,7 +720,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>键入以下查询在 film id 为 100 到 200 的 Film 表中检索记录。</p>
</li>
@@ -682,7 +735,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
<p>结果窗口中显示了一个记录列表。测试过该查询可返回期待的结果后，可在 helper 类中使用该查询。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>将下面的 <code>getFilmTitles</code> 方法添加到 <code>FilmHelper.java</code> 以检索影片，其中 film id 介于变量 <code>startID</code> 和 <code>endID</code> 所指定的特定范围之间。</p>
</li>
@@ -704,7 +757,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>添加下面的 <code>getActorsByID</code> 方法以检索特定影片中的演员。该方法将 <code>filmId</code> 作为输入变量以构造查询。</p>
</li>
@@ -728,7 +781,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>修复导入并保存更改。</p>
</li>
@@ -768,7 +821,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>添加以下方法以根据 <code>filmId</code> 检索单个影片。</p>
</li>
@@ -793,7 +846,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>添加以下方法以根据 <code>langId</code> 检索影片语言。</p>
</li>
@@ -818,7 +871,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>保存所做的更改。</p>
</li>
@@ -853,13 +906,21 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
<p>在调用受管 Bean 中的方法时，将使用 Bean 名称 <code>filmController</code> 作为 JSF 页面 <code>index.xhtml</code> 中的 <code>inputText</code> 和 <code>commandButton</code> 的值。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>选择 <strong>dvdrental</strong> 作为包。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>键入 <strong>filmController</strong> 作为将用于受管 Bean 的名称。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>将 "Scope"（范围）设置为 "Session"（会话）。单击 "Finish"（完成）。</p>
</li>
@@ -869,7 +930,7 @@ image::images/hibernate-pojo-wizard2.png[title=""Generate Hibernate Mapping File
<div class="content">
<img src="images/hib-newmanagedbean.png" alt="hib newmanagedbean">
</div>
-<div class="title">Figure 8. 新建 JSF 受管 Bean 向导</div>
+<div class="title">Figure 13. 新建 JSF 受管 Bean 向导</div>
</div>
<div class="paragraph">
<p>单击 "Finish"（完成），此时 IDE 创建 Bean 类并在编辑器中打开该类。IDE 添加了 <code>@ManagedBean</code> 和 <code>@SessionScoped</code> 标注。</p>
@@ -915,7 +976,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>添加以下代码（以粗体显示），创建 FilmController 实例并检索影片。</p>
</li>
@@ -958,7 +1019,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>添加用于显示表和导航页面的以下方法。* public boolean isHasNextPage() {
if (endId + pageSize ⇐ recordCount) {
@@ -1023,7 +1084,7 @@ public class FilmController {
<p>返回 "index" 或 "browse" 的方法将提示 JSF 导航处理程序尝试打开名为 <code>index.xhtml</code> 或 <code>browse.xhtml</code> 的页面。JSF 2.0 规范允许在使用 Facelets 技术的应用程序中使用隐式导航规则。此应用程序中，没有在 <code>faces-config.xml</code> 中配置任何导航规则。导航处理程序将尝试在应用程序中查找合适的页面。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>添加以下方法以访问 helper 类，以便检索其他影片详细信息。* public String getLanguage() {
int langID = current.getLanguageByLanguageId().getLanguageId().intValue();
@@ -1063,7 +1124,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>修复导入（Ctrl-Shift-I 组合键）并保存更改。</p>
</li>
@@ -1123,7 +1184,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>修改 <code><ui:insert></code> 元素，以将生成的默认名称更改为 "body"。</p>
</li>
@@ -1137,7 +1198,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>保存所做的更改。</p>
<div class="literalblock">
@@ -1178,7 +1239,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>修改该页面以使用 JSF <code><ui:composition></code> 和 <code><ui:define></code> 元素，并添加 <code><h:form></code> 元素。</p>
</li>
@@ -1208,7 +1269,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>添加以下导航链接以调用 JSF 受管 Bean 中的 <code>previous</code> 和 <code>next</code> 方法。</p>
</li>
@@ -1225,7 +1286,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>添加以下 <code>dataTable</code> 元素（以粗体显示）来生成表，以便显示检索到的条目。</p>
</li>
@@ -1261,7 +1322,7 @@ public class FilmController {
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>保存所做的更改。</p>
</li>
@@ -1285,19 +1346,45 @@ public class FilmController {
<p>在 "Projects"（项目）窗口中右键单击 DVDStore 项目节点，然后选择 "New"（新建）> "Other"（其他）。</p>
</li>
<li>
-<p>在 "JavaServer Faces" 类别中选择 "Facelets Template Client"（Facelets 模板客户端）。单击 "Next"（下一步）。
-image::images/hib-faceletsclient.png[title="新建文件向导中的 "Facelets Template Client"（Facelets 模板客户端）文件类型"]</p>
+<p>在 "JavaServer Faces" 类别中选择 "Facelets Template Client"（Facelets 模板客户端）。单击 "Next"（下一步）。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hib-faceletsclient.png" alt="hib faceletsclient" width="Facelets Template Client"（Facelets 模板客户端）文件类型"">
+</div>
+<div class="title">Figure 14. 新建文件向导中的 </div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>键入 <strong>browse</strong> 作为文件名。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>通过单击 "Browse"（浏览）打开 "Browse Files"（浏览文件）对话框，以查找页面模板。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
-<p>展开 "Web Pages"（Web 页）文件夹并选择 <code>template.xhtml</code> 。单击 "Select File"（选择文件）。
-image::images/hib-browsetemplate.png[title="在 "Browse Files"（浏览文件）对话框中选择模板"]</p>
+<p>展开 "Web Pages"（Web 页）文件夹并选择 <code>template.xhtml</code> 。单击 "Select File"（选择文件）。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hib-browsetemplate.png" alt="hib browsetemplate" width="Browse Files"（浏览文件）对话框中选择模板"">
+</div>
+<div class="title">Figure 15. 在 </div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>选择 <strong><ui:composition></strong> 作为生成的根标记。单击 "Finish"（完成）。</p>
</li>
@@ -1326,7 +1413,7 @@ image::images/hib-browsetemplate.png[title="在 "Browse Files"（浏览文件）
<p>您可以看到新文件指定了 <code>template.xhtml</code> 文件，并且 <code><ui:define></code> 标记具有属性 <code>name="body"</code></p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>在 <code><ui:define></code> 标记之间添加以下代码（以粗体显示）以创建窗体，并调用受管 Bean FilmController 中的方法以检索数据和填充窗体。</p>
</li>
@@ -1398,7 +1485,7 @@ image::images/hib-browsetemplate.png[title="在 "Browse Files"（浏览文件）
<p>您可以看到 <code>browse.xhtml</code> 和 <code>index.xhtml</code> 使用相同的页面模板。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>保存所做的更改。</p>
</li>
@@ -1427,10 +1514,10 @@ image::images/hib-browsetemplate.png[title="在 "Browse Files"（浏览文件）
<div class="content">
<img src="images/hib-browser1.png" alt="hib browser1">
</div>
-<div class="title">Figure 9. 在索引页上显示影片列表的浏览器的屏幕快照</div>
+<div class="title">Figure 16. 在索引页上显示影片列表的浏览器的屏幕快照</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>在浏览器中，单击 "View" 加载 <code>browse.xhtml</code> 以查看影片详细信息。</p>
</li>
@@ -1458,28 +1545,44 @@ image::images/hib-browsetemplate.png[title="在 "Browse Files"（浏览文件）
<code><a href="https://svn.netbeans.org/svn/samples~samples-source-code" class="bare">https://svn.netbeans.org/svn/samples~samples-source-code</a></code>
单击 "Next"（下一步）。</p>
</li>
+</ol>
+</div>
+</li>
+</ul>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>单击 "Browse"（浏览）以打开 "Browse Repostiory Folders"（浏览资源库文件夹）对话框。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>展开根目录节点，然后选择 <strong>samples/javaee/DVDStoreEE6</strong>。单击 "OK"（确定）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>指定用于存储源代码的 "Local Folder"（本地文件夹）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="6">
<li>
<p>单击 "Finish"（完成）。</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="paragraph">
<p>单击 "Finish"（完成），此时 IDE 会将本地文件夹初始化为 Subversion 资源库，并检出项目源代码。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>在完成检出操作后将会显示一个对话框，在该对话框中单击 "Open Project"（打开项目）。</p>
</li>
diff --git a/content/kb/docs/web/js-toolkits-dojo.html b/content/kb/docs/web/js-toolkits-dojo.html
index 1839751..b80b966 100644
--- a/content/kb/docs/web/js-toolkits-dojo.html
+++ b/content/kb/docs/web/js-toolkits-dojo.html
@@ -151,8 +151,9 @@
<em>or</em>
Tomcat servlet container</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Open Source Edition 3.1.x or 4.x
-<em> </em>
-7.x or 8.x</p></td>
+<em> </em></p>
+<p class="tableblock">[start=7]
+.x or 8.x</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://www.dojotoolkit.org/download">Dojo Toolkit</a></p></td>
@@ -176,11 +177,16 @@ Tomcat servlet container</p></td>
<p>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.</p>
</li>
<li>
-<p>The completed project looks as follows:
-image::images/dojo-tree-complete.png[title="Completed exercise viewed in a browser"]</p>
+<p>The completed project looks as follows:</p>
</li>
</ul>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/dojo-tree-complete.png" alt="dojo tree complete">
+</div>
+<div class="title">Figure 2. Completed exercise viewed in a browser</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -195,7 +201,7 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<p>Download the tutorial’s <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip">Dojo sample project</a> to a location on your computer.</p>
</li>
<li>
-<p>Click the Open Project button ( image::images/open-project-btn.png[] ) in the IDE toolbar to open the Open Project dialog box.</p>
+<p>Click the Open Project button ( <span class="image"><img src="images/open-project-btn.png" alt="open project btn"></span> ) in the IDE toolbar to open the Open Project dialog box.</p>
</li>
<li>
<p>In the Open Project dialog, locate the Dojo sample project on your computer and click Open Project.</p>
@@ -209,7 +215,7 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<div class="content">
<img src="images/proj-win-ref-problems.png" alt="proj win ref problems">
</div>
-<div class="title">Figure 2. Project reference problems are indicated by red text and error badge</div>
+<div class="title">Figure 3. Project reference problems are indicated by red text and error badge</div>
</div>
<div class="paragraph">
<p>The reference problem exists because the Java classes used in the project (<code>Tribe</code>, and <code>TribeDataManager</code>) reference classes found in the JSON JAR file, which you will later add in the section <a href="#addJSON">Adding the JSON JAR Files to the Project</a>.</p>
@@ -218,7 +224,7 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<p>*Note: *The Projects window (Ctrl-1; ⌘-1 on Mac) provides a <em>logical view</em> of important project contents, and is the main entry point to your project sources. The Files window (Ctrl-2; ⌘-2 on Mac) shows a <em>directory-based view</em> of your projects, and includes any files and folders that are not displayed in the Projects Window.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Expand the <code>Web Pages</code> node in the Projects window.</p>
</li>
@@ -241,7 +247,7 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<p><strong>Note.</strong> The <code>DojoX</code> library is not required for this project.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Expand the <code>Libraries</code> node in the Projects window and confirm that all the required libraries are on the classpath.</p>
</li>
@@ -254,7 +260,7 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<div class="content">
<img src="images/proj-win-dojo-resources.png" alt="proj win dojo resources">
</div>
-<div class="title">Figure 3. Dojo and Dijit libraries are added to the Project’s 'resources' folder</div>
+<div class="title">Figure 4. Dojo and Dijit libraries are added to the Project’s 'resources' folder</div>
</div>
<div class="paragraph">
<p>Select the GlassFish Server in the Resolve References dialog box. Click OK.</p>
@@ -263,7 +269,7 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<div class="content">
<img src="images/dojo-add-server.png" alt="dojo add server">
</div>
-<div class="title">Figure 4. Dojo and Dijit libraries are added to the Project’s 'resources' folder</div>
+<div class="title">Figure 5. Dojo and Dijit libraries are added to the Project’s 'resources' folder</div>
</div>
<div class="paragraph">
<p>At this stage, you have successfully opened the <code>DojoTreeSample</code> project in the IDE and confirmed that the Dojo libraries are included in the application. In the next step, you will begin working in the HTML file that will display the Tree widget to the end user.</p>
@@ -309,16 +315,16 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
</li>
<li>
<p><code>parseOnLoad</code> set to <code>true</code> ensures that widgets and page mark-up are parsed as the page is loaded.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Add a link to the <code>nihilo</code> <a href="http://docs.dojocampus.org/dijit/themes">sample theme</a> contained in the toolkit by adding the following <code>@import</code> statement (in bold) between the <code><head></code> tags and beneath the <code><script></code> tags that you added.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><script type="text/javascript">
@@ -339,7 +345,7 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<p>The <code>nihilo</code> theme is included by default in the toolkit. You can expand the <code>dijit/themes</code> folder in the Projects window to see other sample themes that are provided by default.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Add the following class selector to the <code><body></code> 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.</p>
</li>
@@ -386,16 +392,16 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
</li>
<li>
<p><code><a href="http://docs.dojocampus.org/dijit/Tree">dijit.Tree</a></code>: The Tree widget that provides a view of the JSON data retrieved from <code>ItemFileReadStore</code>.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Add the following code (in bold) to add an <code>ItemFileReadStore</code> and <code>Tree</code> widget.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><!-- TODO: specify AJAX retrieval -->
@@ -451,13 +457,21 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<p>At this point, you want to compile these sources and create a Java archive (JAR file) which you will add to the <code>DojoTreeSample</code> project.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>Click the New Project button ( image::images/new-project-btn.png[] ) in the toolbar to open the New Project wizard.</p>
+<p>Click the New Project button ( <span class="image"><img src="images/new-project-btn.png" alt="new project btn"></span> ) in the toolbar to open the New Project wizard.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>In the New Project wizard, select the Java Class Library project template in the Java category. Click Next.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>In the Name and Location panel of the Java Class Library wizard, type <strong><code>json</code></strong> as the Project Name. Click Finish.</p>
</li>
@@ -470,7 +484,7 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<p>You now need to copy the JSON sources that you download to the <code>json</code> project in the same way that you copied the Dojo toolkit resources to the <code>DojoTreeSample</code> project.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Extract the <code>JSON-java-master.zip</code> archive and copy (Ctrl-C; ⌘-C on Mac) the Java source files that are in the root folder.</p>
</li>
@@ -480,13 +494,21 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<p><strong>Note.</strong> You do not need to copy the <code>zip</code> folder and its contents that is also located in the root folder of the extracted archive.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>In the IDE’s Projects window, right-click the Source Packages node and choose New > Java Package in the popup menu.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
<p>Type <strong>json</strong> as the Package Name. Click Finish.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="9">
<li>
<p>Right-click the <code>json</code> source package and choose Paste in the popup menu.</p>
</li>
@@ -499,10 +521,10 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<div class="content">
<img src="images/proj-win-json-sources.png" alt="proj win json sources">
</div>
-<div class="title">Figure 5. Sources are now contained in the new 'json' project</div>
+<div class="title">Figure 6. Sources are now contained in the new 'json' project</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="10">
<li>
<p>Right-click the <code>json</code> project node in the Projects window and choose Clean and Build to build the project.</p>
</li>
@@ -518,13 +540,13 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<div class="content">
<img src="images/files-win-compiled-classes.png" alt="files win compiled classes">
</div>
-<div class="title">Figure 6. Compiled sources can be viewed in a project’s 'build' folder</div>
+<div class="title">Figure 7. Compiled sources can be viewed in a project’s 'build' folder</div>
</div>
<div class="paragraph">
<p>Now that you have the <code>json.jar</code> file, you can resolve the reference problems that the <code>DojoTreeSample</code> project has been exhibiting since you opened it.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="11">
<li>
<p>In the Projects window, right-click the <code>DojoTreeSample’s Libraries node and choose Add JAR/Folder. Then, in the dialog, navigate to the location of the `json</code> project’s <code>dist</code> folder and select the <code>json.jar</code> file.</p>
</li>
@@ -540,16 +562,20 @@ image::images/dojo-tree-complete.png[title="Completed exercise viewed in a brows
<div class="content">
<img src="images/libraries-json-jar.png" alt="libraries json jar">
</div>
-<div class="title">Figure 7. JAR file is referenced by the project</div>
+<div class="title">Figure 8. JAR file is referenced by the project</div>
</div>
<div class="paragraph">
<p>*Note: *Although the <code>json.jar</code> file is listed under the project’s <code>Libraries</code> 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 <code>DojoTreeSample</code> project in the Files window). Therefore, if you change the location of the JAR file, the reference will be broken.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="12">
<li>
<p>Expand the <code>Source Packages</code> > <code>dojo.indians</code> package and double-click the <code>Tribe</code> and <code>TribeDataManager</code> classes to open them in the editor.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="13">
<li>
<p>Add necessary import statements to both classes. In each class, right-click in the editor and choose Fix Imports.</p>
</li>
@@ -578,7 +604,7 @@ import dojo.org.json.JSONObject;</code></pre>
<p>Note that the APIs for JSON classes are also provided at <a href="http://json.org/java">http://json.org/java</a> - you may want to keep this page open as you later examine code in <code>Tribe</code> and <code>TribeDataManager</code>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="14">
<li>
<p>Examine the ArrayList in <code>TribeDataManager</code>. The ArrayList is a collection of <code>Tribe</code> objects. Looking at the first element of the ArrayList, you can see a new <code>Tribe</code> object created and added to the list:</p>
</li>
@@ -590,8 +616,14 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Each <code>Tribe</code> object captures three points of information: <em>tribe</em>, <em>category</em>, and <em>region</em>. The data for this exercise has been taken from Wikipedia’s entry on <a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native Americans in the United States</a>. As you can determine, multiple <em>tribes</em> are classified within a <em>category</em>, and numerous categories may be contained within [...]
-15. Open the <code>Tribe</code> class in the editor, and note that it is basically a <a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>, with the exception of the <code>toJSONObject()</code> method:</p>
+<p>Each <code>Tribe</code> object captures three points of information: <em>tribe</em>, <em>category</em>, and <em>region</em>. The data for this exercise has been taken from Wikipedia’s entry on <a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native Americans in the United States</a>. As you can determine, multiple <em>tribes</em> are classified within a <em>category</em>, and numerous categories may be contained within [...]
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="15">
+<li>
+<p>Open the <code>Tribe</code> class in the editor, and note that it is basically a <a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>, with the exception of the <code>toJSONObject()</code> method:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -605,14 +637,21 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="16">
<li>
-<p>Switch back to <code>TribeDataManager</code> (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 <code>getIndiansAsJSONObject()</code>. This method scans the ArrayList, processes the data, and returns it in the form of a <code>JSONObject</code>. The <code>String</code> form of the JSONObject is what is required by Dojo’s <code>ItemFileReadStore</code>.</p>
+<p>Switch back to <code>TribeDataManager</code> (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.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/dojo-navigator.png" alt="dojo navigator">
+</div>
+<div class="title">Figure 9. Use the Navigator to view class fields and properties</div>
+</div>
+<div class="paragraph">
+<p>The most significant method contained therein is <code>getIndiansAsJSONObject()</code>. This method scans the ArrayList, processes the data, and returns it in the form of a <code>JSONObject</code>. The <code>String</code> form of the JSONObject is what is required by Dojo’s <code>ItemFileReadStore</code>.</p>
+</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-java" data-lang="java">public static JSONObject getIndiansAsJSONObject() throws JSONException {
@@ -638,11 +677,19 @@ The most significant method contained therein is <code>getIndiansAsJSONObject()<
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="17">
<li>
-<p>Open the Javadoc on the <code>getIndiansAsJSONObject()</code> 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"]</p>
+<p>Open the Javadoc on the <code>getIndiansAsJSONObject()</code> 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.</p>
+<div class="literalblock">
+<div class="content">
+<pre>image::images/javadoc-window.png[title="The Javadoc for TribeDataManager provides an example of JSON data"]</pre>
+</div>
+</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="18">
<li>
<p>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 <a href="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</a>.</p>
</li>
@@ -656,18 +703,39 @@ image::images/javadoc-window.png[title="The Javadoc for TribeDataManager provide
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>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"]</p>
+<p>Set a breakpoint on the method (click the line number (i.e., line 99) in the left margin of the editor).</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/debugger-breakpoint.png" alt="debugger breakpoint">
+</div>
+<div class="title">Figure 10. Use the Java Debugger to step through code</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>Select the <code>DojoTreeSample</code> project in the Projects window.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Run the debugger (click the Debug Project button ( image::images/debug-btn.png[] ) in the toolbar).</p>
+<p>Run the debugger (click the Debug Project button ( <span class="image"><img src="images/debug-btn.png" alt="debug btn"></span> ) in the toolbar).</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>Use the Step Into ( image::images/step-into-btn.png[] ) and Step Over ( image::images/step-over-btn.png[] ) buttons in the toolbar.</p>
+<p>Use the Step Into ( <span class="image"><img src="images/step-into-btn.png" alt="step into btn"></span> ) and Step Over ( <span class="image"><img src="images/step-over-btn.png" alt="step over btn"></span> ) buttons in the toolbar.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Examine variable and expression values in the Local Variables window (Window > Debugging > Variables).</p>
</li>
@@ -710,9 +778,18 @@ image::images/debugger-breakpoint.png[title="Use the Java Debugger to step throu
<p>In the Projects window, right-click the <code>dojo.indians</code> source package and choose New > Servlet.</p>
</li>
<li>
-<p>In the New Servlet wizard, type <strong><code>TribeServlet</code></strong> for the class name. Confirm that <code>dojo.indians</code> is specified as the package. Click Next.
-image::images/new-servlet-wizard.png[title="Use the New Servlet wizard to create servlets"]</p>
+<p>In the New Servlet wizard, type <strong><code>TribeServlet</code></strong> for the class name. Confirm that <code>dojo.indians</code> is specified as the package. Click Next.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-servlet-wizard.png" alt="new servlet wizard">
+</div>
+<div class="title">Figure 11. Use the New Servlet wizard to create servlets</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Confirm that the default Servlet Name and URL Patterns values are correct. Click Finish to generate the skeleton class for the servlet.</p>
</li>
@@ -725,7 +802,7 @@ image::images/new-servlet-wizard.png[title="Use the New Servlet wizard to create
<p><strong>Note.</strong> The wizard will automatically add the servlet name and URL pattern to <code>web.xml</code>. Consequently, any requests to the host domain (i.e., <code><a href="http://localhost:8080/DojoTreeSample/" class="bare">http://localhost:8080/DojoTreeSample/</a></code>) for <code>TribeServlet</code> will be handled by the <code>dojo.indians.TribeServlet</code> class. If you open <code>web.xml</code> in the editor you can see that the file now contains the <code><servl [...]
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Modify the <code>processRequest()</code> method by making the following changes (in bold).</p>
</li>
@@ -740,7 +817,7 @@ image::images/new-servlet-wizard.png[title="Use the New Servlet wizard to create
<p>This change sets the <code>Content-Type</code> header of the HTTP Response to indicate that any returned content is in JSON format.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Replace the commented code within the <code>processRequest()</code> method’s <code>try</code> block with the following (changes in <strong>bold</strong>):</p>
</li>
@@ -768,7 +845,7 @@ image::images/new-servlet-wizard.png[title="Use the New Servlet wizard to create
<p>To reformat your code, right-click within the editor and choose Format.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Use the IDE’s hints to add the following import statements.</p>
</li>
@@ -781,9 +858,9 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
-<p>To run the project, select the <code>DojoTreeSample</code> project node in the Projects window, then click the Run Project ( image::images/run-project-btn.png[] ) button in the IDE’s toolbar.</p>
+<p>To run the project, select the <code>DojoTreeSample</code> project node in the Projects window, then click the Run Project ( <span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span> ) button in the IDE’s toolbar.</p>
</li>
</ol>
</div>
diff --git a/content/kb/docs/web/js-toolkits-dojo_ja.html b/content/kb/docs/web/js-toolkits-dojo_ja.html
index 25daf68..f6718bc 100644
--- a/content/kb/docs/web/js-toolkits-dojo_ja.html
+++ b/content/kb/docs/web/js-toolkits-dojo_ja.html
@@ -151,8 +151,9 @@
<em>または</em>
Tomcatサーブレット・コンテナ</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Open Source Edition 3.1.xまたは4.x
-_ _
-7.xまたは8.x</p></td>
+_ _</p>
+<p class="tableblock">[start=7]
+.xまたは8.x</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://www.dojotoolkit.org/download">Dojoツールキット</a></p></td>
@@ -176,11 +177,16 @@ _ _
<p>NetBeans IDE Java EEのJavaダウンロード・バンドルでは、IDEとともにGlassFish Server Open Source Editionをインストールして登録することもできます。このチュートリアルでは、クライアント・サーバー通信のシミュレーションを行うために、サーバーが必要です。</p>
</li>
<li>
-<p>完成したプロジェクトは次のようになります。
-image::images/dojo-tree-complete.png[title="ブラウザに表示された完成した課題"]</p>
+<p>完成したプロジェクトは次のようになります。</p>
</li>
</ul>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/dojo-tree-complete.png" alt="dojo tree complete">
+</div>
+<div class="title">Figure 2. ブラウザに表示された完成した課題</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -195,7 +201,7 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<p>チュートリアルの<a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip">Dojoサンプル・プロジェクト</a>をコンピュータ上の場所にダウンロードします。</p>
</li>
<li>
-<p>IDEツールバーの「プロジェクトを開く」ボタン(image::images/open-project-btn.png[])をクリックして、「プロジェクトを開く」ダイアログ・ボックスを開きます。</p>
+<p>IDEツールバーの「プロジェクトを開く」ボタン(<span class="image"><img src="images/open-project-btn.png" alt="open project btn"></span>)をクリックして、「プロジェクトを開く」ダイアログ・ボックスを開きます。</p>
</li>
<li>
<p>「プロジェクトを開く」ダイアログで、コンピュータ上のDojoサンプル・プロジェクトを特定し、「プロジェクトを開く」をクリックします。</p>
@@ -209,7 +215,7 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<div class="content">
<img src="images/proj-win-ref-problems.png" alt="proj win ref problems">
</div>
-<div class="title">Figure 2. プロジェクトの参照の問題を示す赤いテキストとエラー・バッジ</div>
+<div class="title">Figure 3. プロジェクトの参照の問題を示す赤いテキストとエラー・バッジ</div>
</div>
<div class="paragraph">
<p>プロジェクトで使用されているJavaクラス(<code>Tribe`および`TribeDataManager</code>)はJSON JARファイルに見つかったクラスを参照していますが、これは後で<a href="#addJSON">「サードパーティJSON変換ソースをJARファイルとしてプロジェクトに追加」</a>の項で追加するため、参照の問題が存在します。</p>
@@ -218,7 +224,7 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<p>*注意: *「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])は、プロジェクト内の重要な項目の_論理ビュー_を示す、プロジェクト・ソースへのメイン・エントリ・ポイントです。「ファイル」ウィンドウ([Ctrl]-[2]、Macの場合は[⌘]-[2])には、プロジェクトの_ディレクトリ・ベースのビュー_が表示され、「プロジェクト」ウィンドウでは表示されないすべてのファイルやフォルダが含まれます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>「プロジェクト」ウィンドウで`Web Pages`ノードを展開します。</p>
</li>
@@ -241,7 +247,7 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<p>*注意:*このプロジェクトでは、`DojoX`ライブラリは不要です。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>「プロジェクト」ウィンドウで`Libraries`ノードを展開し、必要なすべてのライブラリがクラスパスにあることを確認します。</p>
</li>
@@ -254,7 +260,7 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<div class="content">
<img src="images/proj-win-dojo-resources.png" alt="proj win dojo resources">
</div>
-<div class="title">Figure 3. プロジェクトの「resources」フォルダに追加されたDojoライブラリとDijitライブラリ</div>
+<div class="title">Figure 4. プロジェクトの「resources」フォルダに追加されたDojoライブラリとDijitライブラリ</div>
</div>
<div class="paragraph">
<p>「参照の解決」ダイアログ・ボックスで「GlassFish Server」を選択します。「OK」をクリックします。</p>
@@ -263,7 +269,7 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<div class="content">
<img src="images/dojo-add-server.png" alt="dojo add server">
</div>
-<div class="title">Figure 4. プロジェクトの「resources」フォルダに追加されたDojoライブラリとDijitライブラリ</div>
+<div class="title">Figure 5. プロジェクトの「resources」フォルダに追加されたDojoライブラリとDijitライブラリ</div>
</div>
<div class="paragraph">
<p>このステージで、IDEで`DojoTreeSample`プロジェクトが正常に開かれ、Dojoライブラリがアプリケーションに含められたことが確認されました。次のステップでは、Treeウィジェットをエンド・ユーザーに表示するHTMLファイルの作業を始めます。</p>
@@ -309,16 +315,16 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
</li>
<li>
<p>`parseOnLoad`を`true`に設定すると、ページがロードされるときに必ずウィジェットとページ・マークアップが解析されます。</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>次の`@import`文(太字)を`<head>`タグの間と追加する`<script>`タグの下に追加して、ツールキットに含まれる`nihilo`<a href="http://docs.dojocampus.org/dijit/themes">サンプル・テーマ</a>へのリンクを追加します。</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><script type="text/javascript">
@@ -339,7 +345,7 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<p>`nihilo`テーマはツールキットにデフォルトで含まれています。「プロジェクト」ウィンドウで`dijit/themes`フォルダを展開して、デフォルトで提供されている他のサンプル・テーマを表示できます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>次のクラス・セレクタをページの`<body>`タグに追加して、使用しているテーマの名前を指定します。これを実行すると、ページにロードされているすべてのDojoウィジェットが、テーマに関連付けられたスタイルを使用してレンダリングされます。</p>
</li>
@@ -386,16 +392,16 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
</li>
<li>
<p><code><a href="http://docs.dojocampus.org/dijit/Tree">dijit.Tree</a></code>: `ItemFileReadStore`から取得されたJSONデータを表示するツリー・ウィジェットです。</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>次のコード(太字)を追加して、`ItemFileReadStore`および`Tree`ウィジェットを追加します。</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><!-- TODO: specify AJAX retrieval -->
@@ -451,13 +457,21 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<p>この時点で、これらのソースをコンパイルして、`DojoTreeSample`プロジェクトに追加するJava Archive (JARファイル)を作成します。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>ツールバーの「新規プロジェクト」ボタン(image::images/new-project-btn.png[])をクリックして新規プロジェクト・ウィザードを開きます。</p>
+<p>ツールバーの「新規プロジェクト」ボタン(<span class="image"><img src="images/new-project-btn.png" alt="new project btn"></span>)をクリックして新規プロジェクト・ウィザードを開きます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>新規プロジェクト・ウィザードで、「Java」カテゴリの「Javaクラス・ライブラリ」プロジェクト・テンプレートを選択します。「次」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Javaクラス・ライブラリ・ウィザードの「名前と場所」パネルで、「プロジェクト名」として「<strong><code>json</code></strong>」を入力します。「終了」をクリックします。</p>
</li>
@@ -470,7 +484,7 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<p>Dojoツールキット・リソースを <code>DojoTreeSample</code> プロジェクトにコピーしたのと同じ方法で、 <code>json</code> プロジェクトにダウンロードするJSONソースをコピーする必要があります。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>`JSON-java-master.zip`アーカイブを抽出し、ルート・フォルダにあるJavaソース・ファイルをコピーします([Ctrl]-[C]、Macの場合は⌘-C)。</p>
</li>
@@ -480,13 +494,21 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<p>*注意:*抽出したアーカイブのルート・フォルダにある`zip`フォルダとその内容をコピーする必要はありません。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>IDEの「プロジェクト」ウィンドウで「ソース・パッケージ」ノードを右クリックし、ポップアップ・メニューで「新規」>「Javaパッケージ」を選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
<p>パッケージ名として*json*と入力します。「終了」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="9">
<li>
<p>`json`ソース・パッケージを右クリックし、ポップアップ・メニューで「貼付け」を選択します。</p>
</li>
@@ -499,10 +521,10 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<div class="content">
<img src="images/proj-win-json-sources.png" alt="proj win json sources">
</div>
-<div class="title">Figure 5. 新しい「json」プロジェクトに含まれるようになったソース</div>
+<div class="title">Figure 6. 新しい「json」プロジェクトに含まれるようになったソース</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="10">
<li>
<p>「プロジェクト」ウィンドウで「<code>json</code>」プロジェクト・ノードを右クリックし、「消去してビルド」を選択してプロジェクトをビルドします。</p>
</li>
@@ -518,13 +540,13 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<div class="content">
<img src="images/files-win-compiled-classes.png" alt="files win compiled classes">
</div>
-<div class="title">Figure 6. プロジェクトの「build」フォルダに表示されたコンパイル済ソース</div>
+<div class="title">Figure 7. プロジェクトの「build」フォルダに表示されたコンパイル済ソース</div>
</div>
<div class="paragraph">
<p>`json.jar`ファイルができたので、`DojoTreeSample`プロジェクトを開いたときから発生している参照の問題を解決できます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="11">
<li>
<p>「プロジェクト」ウィンドウで`DojoTreeSample`の「ライブラリ」ノードを右クリックし、「JAR/フォルダの追加」を選択します。次に、ダイアログで`json`プロジェクトの`dist`フォルダの場所に移動し、`json.jar`ファイルを選択します。</p>
</li>
@@ -540,16 +562,20 @@ image::images/dojo-tree-complete.png[title="ブラウザに表示された完成
<div class="content">
<img src="images/libraries-json-jar.png" alt="libraries json jar">
</div>
-<div class="title">Figure 7. プロジェクトにより参照されるJARファイル</div>
+<div class="title">Figure 8. プロジェクトにより参照されるJARファイル</div>
</div>
<div class="paragraph">
<p>*注意: *<code>json.jar`ファイルはプロジェクトの「`ライブラリ</code>」ノードの下に表示されますが、元の場所から参照されます。コピーされてプロジェクトに追加されるのではありません(たとえば、「ファイル」ウィンドウで`DojoTreeSample`プロジェクトの下には見つかりません)。したがって、JARファイルの場所を変更すると、参照が壊れます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="12">
<li>
<p>「<code>ソース・パッケージ</code>」> `dojo.indians`パッケージを展開し、`Tribe`クラスと`TribeDataManager`クラスをダブルクリックしてエディタで開きます。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="13">
<li>
<p>必要なインポート文を両方のクラスに追加します。各クラスで、エディタ上で右クリックし、「インポートを修正」を選択します。</p>
</li>
@@ -578,7 +604,7 @@ import dojo.org.json.JSONObject;</code></pre>
<p>JSONクラスのAPIも<a href="http://json.org/java">http://json.org/java</a>で提供されています。後で`Tribe`と`TribeDataManager`のコードを調べるので、このページを開いておいてください。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="14">
<li>
<p>`TribeDataManager`のArrayListを調べます。ArrayListは`Tribe`オブジェクトのコレクションです。ArrayListの最初の要素を調べると、新しい`Tribe`オブジェクトが作成されてリストに追加されていることがわかります。</p>
</li>
@@ -590,8 +616,14 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>各`Tribe`オブジェクトは、「<em>部族</em>」、「<em>カテゴリ</em>」および「<em>地域</em>」という3つの情報を収集します。この課題用のデータは、Wikipediaの「<a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native Americans in the United States</a>」のエントリから取得されています。ご存知のとおり、複数の「<em>部族</em>」が1つの「<em>カテゴリ</em>」に分類され、多数のカテゴリがより大きな1つの「<em>地域</em>」に含まれる場合があります。
-15. `Tribe`クラスをエディタで開くと、これは基本的に<a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>であり、`toJSONObject()`メソッドのみが異なることがわかります。</p>
+<p>各`Tribe`オブジェクトは、「<em>部族</em>」、「<em>カテゴリ</em>」および「<em>地域</em>」という3つの情報を収集します。この課題用のデータは、Wikipediaの「<a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native Americans in the United States</a>」のエントリから取得されています。ご存知のとおり、複数の「<em>部族</em>」が1つの「<em>カテゴリ</em>」に分類され、多数のカテゴリがより大きな1つの「<em>地域</em>」に含まれる場合があります。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="15">
+<li>
+<p>`Tribe`クラスをエディタで開くと、これは基本的に<a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>であり、`toJSONObject()`メソッドのみが異なることがわかります。</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -605,14 +637,21 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="16">
<li>
-<p>再度`TribeDataManager`に切り替え([Ctrl]-[Tab])、クラスに含まれているメソッドを調べます。ナビゲータを開いて([Ctrl]-[7]、Macの場合は[⌘]-[7])、クラスに含まれているフィールドとプロパティのリストを表示します。
-image::images/dojo-navigator.png[title="ナビゲータを使用した、クラスのフィールドおよびプロパティの表示"]
-その中で最も重要なメソッドは`getIndiansAsJSONObject()`です。このメソッドはArrayListをスキャンし、データを処理して`JSONObject`の形式で返します。Dojoの`ItemFileReadStore`に必要なのは、`文字列`形式のJSONObjectです。</p>
+<p>再度`TribeDataManager`に切り替え([Ctrl]-[Tab])、クラスに含まれているメソッドを調べます。ナビゲータを開いて([Ctrl]-[7]、Macの場合は[⌘]-[7])、クラスに含まれているフィールドとプロパティのリストを表示します。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/dojo-navigator.png" alt="dojo navigator">
+</div>
+<div class="title">Figure 9. ナビゲータを使用した、クラスのフィールドおよびプロパティの表示</div>
+</div>
+<div class="paragraph">
+<p>その中で最も重要なメソッドは`getIndiansAsJSONObject()`です。このメソッドはArrayListをスキャンし、データを処理して`JSONObject`の形式で返します。Dojoの`ItemFileReadStore`に必要なのは、`文字列`形式のJSONObjectです。</p>
+</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-java" data-lang="java">public static JSONObject getIndiansAsJSONObject() throws JSONException {
@@ -638,11 +677,20 @@ image::images/dojo-navigator.png[title="ナビゲータを使用した、クラ
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="17">
<li>
-<p>`getIndiansAsJSONObject()`メソッドに関するJavadocを開きます。これは、ナビゲータに戻り([Ctrl]-[7]、Macの場合は[⌘]-[7])、メソッドの上にカーソルを置くことで行うことができます。または、メイン・メニューから「ウィンドウ」>「その他」>「Javadoc」を選択し、エディタでメソッド署名をクリックします。
-image::images/javadoc-window.png[title="JSONデータの例を示すTribeDataManagerのJavadoc"]</p>
+<p>`getIndiansAsJSONObject()`メソッドに関するJavadocを開きます。これは、ナビゲータに戻り([Ctrl]-[7]、Macの場合は[⌘]-[7])、メソッドの上にカーソルを置くことで行うことができます。または、メイン・メニューから「ウィンドウ」>「その他」>「Javadoc」を選択し、エディタでメソッド署名をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/javadoc-window.png" alt="javadoc window">
+</div>
+<div class="title">Figure 10. JSONデータの例を示すTribeDataManagerのJavadoc</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="18">
<li>
<p>Javadocに示されているJSONデータの例を調べます。データの形式は、<a href="http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item">Dojoのドキュメント</a>に示されている例に準拠しています。</p>
</li>
@@ -656,18 +704,39 @@ image::images/javadoc-window.png[title="JSONデータの例を示すTribeDataMan
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>メソッドにブレークポイントを設定します(エディタの左マージンで行番号(行99)をクリックします)。
-image::images/debugger-breakpoint.png[title="Javaデバッガを使用したコードのステップ実行"]</p>
+<p>メソッドにブレークポイントを設定します(エディタの左マージンで行番号(行99)をクリックします)。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/debugger-breakpoint.png" alt="debugger breakpoint">
+</div>
+<div class="title">Figure 11. Javaデバッガを使用したコードのステップ実行</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>「プロジェクト」ウィンドウで「 <code>DojoTreeSample</code> 」プロジェクトを選択します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>デバッガを実行します(ツールバーで「プロジェクトをデバッグ」(image::images/debug-btn.png[])ボタンをクリックします)。</p>
+<p>デバッガを実行します(ツールバーで「プロジェクトをデバッグ」(<span class="image"><img src="images/debug-btn.png" alt="debug btn"></span>)ボタンをクリックします)。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>ツールバーの「ステップ・イン」(image::images/step-into-btn.png[])ボタンと「ステップ・オーバー」(image::images/step-over-btn.png[])ボタンを使用します。</p>
+<p>ツールバーの「ステップ・イン」(<span class="image"><img src="images/step-into-btn.png" alt="step into btn"></span>)ボタンと「ステップ・オーバー」(<span class="image"><img src="images/step-over-btn.png" alt="step over btn"></span>)ボタンを使用します。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>変数と式の値を「ローカル変数」ウィンドウ(「ウィンドウ」→「デバッグ」→「変数」)で調べます。</p>
</li>
@@ -710,9 +779,18 @@ image::images/debugger-breakpoint.png[title="Javaデバッガを使用したコ
<p>「プロジェクト」ウィンドウで`dojo.indians`ソース・パッケージを右クリックし、「新規」>「サーブレット」を選択します。</p>
</li>
<li>
-<p>新規サーブレット・ウィザードで、クラス名に「<strong><code>TribeServlet</code></strong>」と入力します。`dojo.indians`がパッケージとして指定されていることを確認します。「次」をクリックします。
-image::images/new-servlet-wizard.png[title="新規サーブレット・ウィザードを使用したサーブレットの作成"]</p>
+<p>新規サーブレット・ウィザードで、クラス名に「<strong><code>TribeServlet</code></strong>」と入力します。`dojo.indians`がパッケージとして指定されていることを確認します。「次」をクリックします。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-servlet-wizard.png" alt="new servlet wizard">
+</div>
+<div class="title">Figure 12. 新規サーブレット・ウィザードを使用したサーブレットの作成</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>デフォルトのサーブレット名とURLパターン値が正しいことを確認します。「終了」をクリックすると、サーブレットのスケルトン・クラスが生成されます。</p>
</li>
@@ -725,7 +803,7 @@ image::images/new-servlet-wizard.png[title="新規サーブレット・ウィザ
<p>*注意:*ウィザードにより、サーブレット名とURLパターンが自動的に`web.xml`に追加されます。その結果、<code>TribeServlet`のホスト・ドメイン(`http://localhost:8080/DojoTreeSample/</code>)に対するすべてのリクエストが、<code>dojo.indians.TribeServlet`クラスによって処理されます。エディタで`web.xml`を開くと、ファイルに</code><servlet>`および`<servlet-mapping>`要素が含まれているのがわかります。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>次の変更(太字)を行って、`processRequest()`メソッドを変更します。</p>
</li>
@@ -740,7 +818,7 @@ image::images/new-servlet-wizard.png[title="新規サーブレット・ウィザ
<p>この変更により、HTTPレスポンスの`Content-Type`ヘッダーが、返される内容がすべてJSON形式であることを示すように設定されます。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>`processRequest()`メソッドの`try`ブロック内のコメントアウトされているコードを、次のように置き換えます(*太字*部分が変更箇所)。</p>
</li>
@@ -768,7 +846,7 @@ image::images/new-servlet-wizard.png[title="新規サーブレット・ウィザ
<p>コードを再フォーマットするには、エディタ内で右クリックし、「フォーマット」を選択します。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>IDEのヒントを使用して、次のインポート文を追加します。</p>
</li>
@@ -781,9 +859,9 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
-<p>プロジェクトを実行するには、「プロジェクト」ウィンドウで`DojoTreeSample`プロジェクト・ノードを選択し、IDEのツールバーの「プロジェクトの実行」(image::images/run-project-btn.png[])ボタンをクリックします。</p>
+<p>プロジェクトを実行するには、「プロジェクト」ウィンドウで`DojoTreeSample`プロジェクト・ノードを選択し、IDEのツールバーの「プロジェクトの実行」(<span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span>)ボタンをクリックします。</p>
</li>
</ol>
</div>
diff --git a/content/kb/docs/web/js-toolkits-dojo_pt_BR.html b/content/kb/docs/web/js-toolkits-dojo_pt_BR.html
index ebb5388..23c55d2 100644
--- a/content/kb/docs/web/js-toolkits-dojo_pt_BR.html
+++ b/content/kb/docs/web/js-toolkits-dojo_pt_BR.html
@@ -151,8 +151,9 @@
<em>ou</em>
Contêiner do servlet Tomcat</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Open Source Edition 3.1.x ou 4.x
-_ _
-7.x ou 8.x</p></td>
+_ _</p>
+<p class="tableblock">[start=7]
+.x ou 8.x</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://www.dojotoolkit.org/download">Kit de ferramentas do Dojo</a></p></td>
@@ -176,11 +177,16 @@ _ _
<p>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.</p>
</li>
<li>
-<p>O projeto concluído tem a seguinte aparência:
-image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um browser"]</p>
+<p>O projeto concluído tem a seguinte aparência:</p>
</li>
</ul>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/dojo-tree-complete.png" alt="dojo tree complete">
+</div>
+<div class="title">Figure 2. Exercício concluído exibido em um browser</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -195,7 +201,7 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<p>Faça o download da <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip">Amostra do projeto do Dojo</a> em algum local no seu computador.</p>
</li>
<li>
-<p>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.</p>
+<p>Clique no botão Abrir Projeto ( <span class="image"><img src="images/open-project-btn.png" alt="open project btn"></span> ) na barra de ferramentas do IDE para abrir a caixa de diálogo Abrir Projeto.</p>
</li>
<li>
<p>Na caixa de diálogo Abrir Projeto, localize o projeto Dojo de amostra no seu computador e clique em Abrir Projeto.</p>
@@ -209,7 +215,7 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<div class="content">
<img src="images/proj-win-ref-problems.png" alt="proj win ref problems">
</div>
-<div class="title">Figure 2. Os problemas de referência do projeto Project são indicados por um texto vermelho e um badge de erro</div>
+<div class="title">Figure 3. Os problemas de referência do projeto Project são indicados por um texto vermelho e um badge de erro</div>
</div>
<div class="paragraph">
<p>O problema de referência existe porque as classes Java usadas no projeto (<code>Tribe</code> e <code>TribeDataManager</code>) referenciam classes encontradas no arquivo JSON JAR, que você adicionará mais tarde na seção <a href="#addJSON">Adicionando Arquivos JSON JAR ao Projeto</a>.</p>
@@ -218,7 +224,7 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<p>*Observação: *A janela Projetos (Ctrl-1; ⌘-1 no Mac) oferece uma <em>view lógica</em> 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 <em>view com base no diretório</em> dos projetos e inclui os arquivos e as pastas que não são exibidos na Janela de Projetos.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Expanda o nó <code>Páginas Web</code> na janela Projetos.</p>
</li>
@@ -241,7 +247,7 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<p><strong>Observação.</strong> A biblioteca <code>DojoX</code> não é necessária nesse projeto.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Expanda o nó <code>Bibliotecas</code> na janela Projetos e confirme se todas as bibliotecas obrigatórias estão no classpath.</p>
</li>
@@ -254,7 +260,7 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<div class="content">
<img src="images/proj-win-dojo-resources.png" alt="proj win dojo resources">
</div>
-<div class="title">Figure 3. As bibliotecas Dojo e Dijit são adicionadas à pasta 'recursos' do Projeto</div>
+<div class="title">Figure 4. As bibliotecas Dojo e Dijit são adicionadas à pasta 'recursos' do Projeto</div>
</div>
<div class="paragraph">
<p>Selecione o GlassFish Server na caixa de diálogo Resolver Referências. Clique em OK.</p>
@@ -263,7 +269,7 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<div class="content">
<img src="images/dojo-add-server.png" alt="dojo add server">
</div>
-<div class="title">Figure 4. As bibliotecas Dojo e Dijit são adicionadas à pasta 'recursos' do Projeto</div>
+<div class="title">Figure 5. As bibliotecas Dojo e Dijit são adicionadas à pasta 'recursos' do Projeto</div>
</div>
<div class="paragraph">
<p>Nesse estágio, você abriu com sucesso o projeto <code>DojoTreeSample</code> no IDE e confirmou que as bibliotecas do Dojo foram incluídas na aplicação. Na próxima etapa, você começará a trabalhar no arquivo HTML que será exibido no widget Árvore para o usuário final.</p>
@@ -309,16 +315,16 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
</li>
<li>
<p>A propriedade <code>parseOnLoad</code> definida como <code>true</code> garante que o parse das marcações de página e dos widgets seja feito durante o carregamento da página.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Adicione um link ao tema de exemplo`nihilo` contido no kit de ferramentas, adicionando a instrução <code>@import</code> (em negrito) a seguir entre as tags <code><head></code> e sob as tags <code><script></code> adicionadas.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><script type="text/javascript">
@@ -339,7 +345,7 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<p>O tema <code>nihilo</code> é incluído no kit de ferramenta por default. Você pode expandir a pasta <code>dijit/themes</code> na janela Projetos para ver outros temas de exemplo fornecidos por default.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Adicione o seguinte seletor de classe à tag <code><body></code> 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.</p>
</li>
@@ -386,16 +392,16 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
</li>
<li>
<p><code><a href="http://docs.dojocampus.org/dijit/Tree">dijit.Tree</a></code>: o widget Árvore que fornece uma view dos dados JSON recuperados do <code>ItemFileReadStore</code>.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Adicione o código (em negrito) a seguir para adicionar um widget <code>ItemFileReadStore</code> e <code>Árvore</code>.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><!-- TODO: specify AJAX retrieval -->
@@ -451,13 +457,21 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<p>Neste momento, compile esses códigos-fontes e crie um arquivo compactado JAR (arquivo Java) que possa ser adicionado ao projeto <code>DojoTreeSample</code>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>Clique no botão Novo Projeto (image::images/new-project-btn.png[]) na barra de ferramentas para abrir o assistente do Novo Projeto.</p>
+<p>Clique no botão Novo Projeto (<span class="image"><img src="images/new-project-btn.png" alt="new project btn"></span>) na barra de ferramentas para abrir o assistente do Novo Projeto.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>No assistente do Novo Projeto, selecione o tipo de projeto de Bibliotecas de Classes Java na categoria Java. Clique em Próximo.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>No painel Nome e Local do assistente da Biblioteca de Classes Java, digite <strong><code>json</code></strong> como Nome do Projeto. Clique em Finalizar.</p>
</li>
@@ -470,7 +484,7 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<p>Agora, você precisa copiar os códigos-fontes JSON que obteve por download para o projeto <code>json</code> da mesma forma que copiou os recursos do kit de ferramentas Dojo no projeto <code>DojoTreeSample</code> .</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Extraia o archive <code>JSON-java-master.zip</code> e copie (Ctrl-C; ⌘-C no Mac) os arquivos de código-fonte Java que estão na pasta-raiz.</p>
</li>
@@ -480,13 +494,21 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<p><strong>Observação.</strong> Não é necessário copiar a pasta <code>zip</code> e seu conteúdo que também se encontra na pasta-raiz do archive extraído.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>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.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
<p>Digite <strong>json</strong> como Nome do Pacote. Clique em Finalizar.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="9">
<li>
<p>Clique com o botão direito do mouse no pacote de código-fonte <code>json</code> e escolha Colar no menu pop-up.</p>
</li>
@@ -499,10 +521,10 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<div class="content">
<img src="images/proj-win-json-sources.png" alt="proj win json sources">
</div>
-<div class="title">Figure 5. Agora, os códigos-fonte estão contidos no novo projeto 'json'</div>
+<div class="title">Figure 6. Agora, os códigos-fonte estão contidos no novo projeto 'json'</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="10">
<li>
<p>Clique com o botão direito do mouse no nó do projeto <code>json</code> na janela Projetos e escolha Limpar e Compilar para compilar o projeto.</p>
</li>
@@ -518,13 +540,13 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<div class="content">
<img src="images/files-win-compiled-classes.png" alt="files win compiled classes">
</div>
-<div class="title">Figure 6. Os códigos-fonte criados podem ser exibidos em uma pasta 'build' do projeto</div>
+<div class="title">Figure 7. Os códigos-fonte criados podem ser exibidos em uma pasta 'build' do projeto</div>
</div>
<div class="paragraph">
<p>Agora que o arquivo <code>json.jar</code> existe, é possível solucionar os problemas de referência que o projeto <code>DojoTreeSample</code> vem exibindo desde que foi aberto.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="11">
<li>
<p>Na janela Projetos, clique com o botão direito no nó das Bibliotecas do <code>DojoTreeSample</code> e selecione Adicionar JAR/Pasta. Em seguida, na caixa de diálogo, vá até o local da pasta <code>dist</code> do projeto <code>json</code> e selecione o arquivo <code>json.jar</code>.</p>
</li>
@@ -540,16 +562,20 @@ image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um
<div class="content">
<img src="images/libraries-json-jar.png" alt="libraries json jar">
</div>
-<div class="title">Figure 7. O arquivo jar é referenciado pelo Projeto</div>
+<div class="title">Figure 8. O arquivo jar é referenciado pelo Projeto</div>
</div>
<div class="paragraph">
<p>*Observação: *Mesmo que o arquivo <code>json.jar</code> esteja listado no nó <code>Libraries</code> 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 <code>DojoTreeSample</code> da janela Arquivos). Por isso, se você alterar o local do arquivo JAR, a referência será interrompida.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="12">
<li>
<p>Expanda o pacote <code>Source Packages</code> > <code>dojo.indians</code> e clique duas vezes nas classes <code>Tribe</code> e <code>TribeDataManager</code> para abri-las no editor.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="13">
<li>
<p>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.</p>
</li>
@@ -578,7 +604,7 @@ import dojo.org.json.JSONObject;</code></pre>
<p>Observe que as APIs para as classes JSON também são fornecidas em <a href="http://json.org/java">http://json.org/java</a> - você pode manter esta página aberta ao examinar posteriormente o código em <code>Tribe</code> e <code>TribeDataManager</code>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="14">
<li>
<p>Examine a ArrayList em <code>TribeDataManager</code>. A ArrayList é uma coleção de objetos da <code>Tribe</code>. Observando o primeiro elemento da ArrayList, é possível ver um novo objeto criado da <code>Tribe</code> e adicionado à lista:</p>
</li>
@@ -590,8 +616,14 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Cada objeto da <code>Tribe</code> captura três pontos de informação: <em>tribo</em>, <em>categoria</em> e <em>região</em>. Os dados para este exercício foram retirados da entrada da Wikipédia em <a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native Americans in the United States</a>. Como você pode determinar, várias <em>tribos</em> são classificadas em uma <em>categoria</em> e diversas categorias podem estar contidas em um [...]
-15. Abra a classe <code>Tribe</code> no editor e observe que ela é basicamente um <a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>, com exceção do método <code>toJSONObject()</code>:</p>
+<p>Cada objeto da <code>Tribe</code> captura três pontos de informação: <em>tribo</em>, <em>categoria</em> e <em>região</em>. Os dados para este exercício foram retirados da entrada da Wikipédia em <a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native Americans in the United States</a>. Como você pode determinar, várias <em>tribos</em> são classificadas em uma <em>categoria</em> e diversas categorias podem estar contidas em um [...]
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="15">
+<li>
+<p>Abra a classe <code>Tribe</code> no editor e observe que ela é basicamente um <a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>, com exceção do método <code>toJSONObject()</code>:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -605,14 +637,21 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="16">
<li>
-<p>Retorne ao <code>TribeDataManager</code> (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 é <code>getIndiansAsJSONObject()</code>. Esse método analisa a ArrayList, processa os dados e os retorna no formato de um <code>JSONObject</code>. O formato de <code>String</code> do JSONObject é o exigido pelo <code>ItemFileReadStore</code> do Dojo.</p>
+<p>Retorne ao <code>TribeDataManager</code> (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.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/dojo-navigator.png" alt="dojo navigator">
+</div>
+<div class="title">Figure 9. Utilizar o Navigator para exibir os campos e propriedades da classe</div>
+</div>
+<div class="paragraph">
+<p>O método mais significativo contido é <code>getIndiansAsJSONObject()</code>. Esse método analisa a ArrayList, processa os dados e os retorna no formato de um <code>JSONObject</code>. O formato de <code>String</code> do JSONObject é o exigido pelo <code>ItemFileReadStore</code> do Dojo.</p>
+</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-java" data-lang="java">public static JSONObject getIndiansAsJSONObject() throws JSONException {
@@ -638,11 +677,19 @@ O método mais significativo contido é <code>getIndiansAsJSONObject()</code>. E
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="17">
<li>
-<p>Abra o Javadoc no método <code>getIndiansAsJSONObject()</code>. É 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"]</p>
+<p>Abra o Javadoc no método <code>getIndiansAsJSONObject()</code>. É 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.</p>
+<div class="literalblock">
+<div class="content">
+<pre>image::images/javadoc-window.png[title="O Javadoc para TribeDataManager fornece um exemplo de dados JSON"]</pre>
+</div>
+</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="18">
<li>
<p>Examine o exemplo de dados JSON fornecidos no Javadoc. Observe que o formato dos dados está de acordo com os exemplos fornecidos na <a href="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</a>.</p>
</li>
@@ -656,18 +703,39 @@ image::images/javadoc-window.png[title="O Javadoc para TribeDataManager fornece
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>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"]</p>
+<p>Defina um ponto de interrupção no método (clique no número da linha, por exemplo, linha 99, na margem esquerda do editor).</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/debugger-breakpoint.png" alt="debugger breakpoint">
+</div>
+<div class="title">Figure 10. Usar o Depurador Java para a etapa por meio de código</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>Selecione o projeto <code>DojoTreeSample</code> na janela Projetos.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Execute o depurador (clique no botão Depurar Projeto (image::images/debug-btn.png[] ) da barra de ferramentas).</p>
+<p>Execute o depurador (clique no botão Depurar Projeto (<span class="image"><img src="images/debug-btn.png" alt="debug btn"></span> ) da barra de ferramentas).</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>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.</p>
+<p>Use os botões Fazer Step Into (<span class="image"><img src="images/step-into-btn.png" alt="step into btn"></span>) e Fazer Step Over (<span class="image"><img src="images/step-over-btn.png" alt="step over btn"></span>) da barra de ferramentas.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Examine os valores da variável e da expressão na janela Variáveis Locais (Janela > Depuração > Variáveis).</p>
</li>
@@ -710,9 +778,18 @@ image::images/debugger-breakpoint.png[title="Usar o Depurador Java para a etapa
<p>Na janela Projetos, clique com o botão direito do mouse no pacote de código-fonte <code>dojo.indians</code> e selecione Novo > Servlet.</p>
</li>
<li>
-<p>Na caixa de diálogo Novo Servlet, digite <strong><code>TribeServlet</code></strong> como o nome da classe. Confirme se <code>dojo.indians</code> 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"]</p>
+<p>Na caixa de diálogo Novo Servlet, digite <strong><code>TribeServlet</code></strong> como o nome da classe. Confirme se <code>dojo.indians</code> foi especificado como o pacote. Clique em Próximo.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-servlet-wizard.png" alt="new servlet wizard">
+</div>
+<div class="title">Figure 11. Utilizar o assistente de Novo Servlet para criar servlets</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>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.</p>
</li>
@@ -725,7 +802,7 @@ image::images/new-servlet-wizard.png[title="Utilizar o assistente de Novo Servle
<p><strong>Observação.</strong> O assistente adicionará automaticamente o nome do servlet e o padrão de URL ao arquivo <code>web.xml</code>. Consequentemente, as solicitações ao domínio host (<code><a href="http://localhost:8080/DojoTreeSample/" class="bare">http://localhost:8080/DojoTreeSample/</a></code>) pelo <code>TribeServlet</code> serão manipuladas pela classe <code>dojo.indians.TribeServlet</code>. Se você abrir <code>web.xml</code> no editor, verá que o arquivo agora contém os e [...]
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Modifique o método <code>processRequest()</code> fazendo as seguintes alterações (em negrito):</p>
</li>
@@ -740,7 +817,7 @@ image::images/new-servlet-wizard.png[title="Utilizar o assistente de Novo Servle
<p>Isso altera o cabeçalho <code>Content-Type</code> da Resposta HTTP para indicar que qualquer conteúdo retornado está em um formato JSON.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Substitua o código comentado no bloco <code>try</code> do método <code>processRequest()</code> pelo seguinte (alterações em <strong>negrito</strong>):</p>
</li>
@@ -768,7 +845,7 @@ image::images/new-servlet-wizard.png[title="Utilizar o assistente de Novo Servle
<p>Para reformatar o código, clique com o botão direito do mouse no editor e selecione Formatar.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Utilize as dicas do IDE para adicionar as instruções de importação a seguir.</p>
</li>
@@ -781,9 +858,9 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
-<p>Para executar o projeto, selecione o nó do projeto <code>DojoTreeSample</code> na janela Projetos e, em seguida, clique no botão Executar Projeto (image::images/run-project-btn.png[]) na barra de ferramentas do IDE.</p>
+<p>Para executar o projeto, selecione o nó do projeto <code>DojoTreeSample</code> na janela Projetos e, em seguida, clique no botão Executar Projeto (<span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span>) na barra de ferramentas do IDE.</p>
</li>
</ol>
</div>
diff --git a/content/kb/docs/web/js-toolkits-dojo_ru.html b/content/kb/docs/web/js-toolkits-dojo_ru.html
index 7b5c661..c97e218 100644
--- a/content/kb/docs/web/js-toolkits-dojo_ru.html
+++ b/content/kb/docs/web/js-toolkits-dojo_ru.html
@@ -151,8 +151,9 @@
<em>или</em>
Контейнер сервлетов Tomcat</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Open Source Edition 3.1.x или 4.x
-_ _
-7.x или 8.x</p></td>
+_ _</p>
+<p class="tableblock">[start=7]
+.x или 8.x</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://www.dojotoolkit.org/download">Набор средств Dojo</a></p></td>
@@ -176,11 +177,16 @@ _ _
<p>Набор загрузки Java EE для среды IDE NetBeans позволяет при желании установить и зарегистрировать в среде IDE сервер приложений GlassFish Server Open Source Edition. Сервер необходим при работе с данным руководством для имитации связи клиент-сервер.</p>
</li>
<li>
-<p>Завершенный проект выглядит следующим образом:
-image::images/dojo-tree-complete.png[title="Выполненное упражнение можно просмотреть в браузере"]</p>
+<p>Завершенный проект выглядит следующим образом:</p>
</li>
</ul>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/dojo-tree-complete.png" alt="dojo tree complete">
+</div>
+<div class="title">Figure 2. Выполненное упражнение можно просмотреть в браузере</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -195,7 +201,7 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<p>Загрузите прилагающийся к этому руководству <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip">образец проекта Dojо</a> в одну из папок на своем компьютере.</p>
</li>
<li>
-<p>Нажмите кнопку 'Открыть проект' ( image::images/open-project-btn.png[] ) на панели инструментов IDE, чтобы открыть диалоговое окно 'Открыть проект'.</p>
+<p>Нажмите кнопку 'Открыть проект' ( <span class="image"><img src="images/open-project-btn.png" alt="open project btn"></span> ) на панели инструментов IDE, чтобы открыть диалоговое окно 'Открыть проект'.</p>
</li>
<li>
<p>В диалоговом окне 'Открыть проект' найдите образец проекта Dojo на своем компьютере и нажмите 'Открыть проект'.</p>
@@ -209,7 +215,7 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<div class="content">
<img src="images/proj-win-ref-problems.png" alt="proj win ref problems">
</div>
-<div class="title">Figure 2. Ошибки ссылок на проект указываются текстом, выделенным красным и меткой ошибки</div>
+<div class="title">Figure 3. Ошибки ссылок на проект указываются текстом, выделенным красным и меткой ошибки</div>
</div>
<div class="paragraph">
<p>Проблема с ссылкой существует, потому что классы Java, используемые в проекте(<code>Tribe</code> и <code>TribeDataManager</code>) ссылаются на классы, находящиеся в файле JAR JSON, которые позже будут добавлены в раздел<a href="#addJSON">Добавление файлов JAR JSON к проекту</a>.</p>
@@ -218,7 +224,7 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<p>*Примечание. *Окно 'Проекты' (Ctrl-1; ⌘-1 в Mac) обеспечивает <em>логическое представление</em> содержимого важных проектов и является основной точкой ввода для исходного кода проекта. Окно "Файлы" (Ctrl-2; ⌘-2 в Mac) отображает <em>представление на основе каталогов</em> проектов, включая файлы и папки, не выведенные в окне "Проекты".</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Разверните узел <code>Веб-страницы</code> в окне "Проекты".</p>
</li>
@@ -241,7 +247,7 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<p><strong>Примечание.</strong> Библиотека <code>DojoX</code> для данного проекта не требуется.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Разверните узел <code>Библиотеки</code> в окне "Проекты" и убедитесь, что все требуемые библиотеки находятся на пути класса.</p>
</li>
@@ -254,7 +260,7 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<div class="content">
<img src="images/proj-win-dojo-resources.png" alt="proj win dojo resources">
</div>
-<div class="title">Figure 3. Библиотеки Dojo и Dijit добавлены в папку 'ресурсов' проекта</div>
+<div class="title">Figure 4. Библиотеки Dojo и Dijit добавлены в папку 'ресурсов' проекта</div>
</div>
<div class="paragraph">
<p>В диалоговом окне "Разрешить проблемы со ссылками" выберите GlassFish Server. Нажмите ОК.</p>
@@ -263,7 +269,7 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<div class="content">
<img src="images/dojo-add-server.png" alt="dojo add server">
</div>
-<div class="title">Figure 4. Библиотеки Dojo и Dijit добавлены в папку 'ресурсов' проекта</div>
+<div class="title">Figure 5. Библиотеки Dojo и Dijit добавлены в папку 'ресурсов' проекта</div>
</div>
<div class="paragraph">
<p>Теперь проект <code>DojoTreeSample</code> открыт в IDE, и все библиотеки Dojo включены в приложение. На следующем шаге вы начнете работать с HTML-файлом, который будет отображать виджет Tree для конечного пользователя.</p>
@@ -309,16 +315,16 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
</li>
<li>
<p>Установка <code>parseOnLoad</code> в <code>true</code> гарантирует, что элементы оформления и разметка страницы подвергаются синтаксическому анализу при загрузке страницы.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Добавьте ссылку на <code>nihilo</code> <a href="http://docs.dojocampus.org/dijit/themes">образец темы</a>, который содержится в наборе инструментальных средств путем добавления следующей инструкции <code>@import</code> (выделена полужирным шрифтом) между тегами <code><заголовков></code> тегами и ниже добавленных вами тегов <code><сценария></code>.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><script type="text/javascript">
@@ -339,7 +345,7 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<p>Тема <code>nihilo</code> включается по умолчанию в набор инструментальных средств. Вы можете развернуть папку <code>dijit/themes</code> в окне 'Проекты', чтобы увидеть другие образцы тем, которые предоставлены по умолчанию.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Добавьте следующее средство выбора класса к тегу <code><body></code> страницы, чтобы указать имя темы, которая теперь используется. Когда мы это делаем, любой элемент оформления Dojo, загруженный на страницу, будет визуализирован с использованием стилей, связанных с заданной темой.</p>
</li>
@@ -386,16 +392,16 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
</li>
<li>
<p><code><a href="http://docs.dojocampus.org/dijit/Tree">dijit.Tree</a></code>: элемент оформления дерева, выводящий представление данных JSON, полученных от <code>ItemFileReadStore</code>.</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Добавьте следующий код (выделен полужирным шрифтом), чтобы добавить <code>ItemFileReadStore</code> и виджет <code>Tree</code>.</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><!-- TODO: specify AJAX retrieval -->
@@ -451,13 +457,21 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<p>На данный момент необходимо скомпилировать эти источники и создать архив Java (файл JAR), который следует добавить к проекту <code>DojoTreeSample</code>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>Нажмите кнопку 'Создать проект' ( image::images/new-project-btn.png[] ) на панели инструментов, чтобы открыть мастер создания проектов.</p>
+<p>Нажмите кнопку 'Создать проект' ( <span class="image"><img src="images/new-project-btn.png" alt="new project btn"></span> ) на панели инструментов, чтобы открыть мастер создания проектов.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>В мастере создания проектов выберите шаблон проекта библиотеки классов Java в категории Java. Нажмите кнопку 'Далее'.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>На панели 'Имя и местоположение' мастера библиотек классов Java введите <strong><code>json</code></strong> в качестве имени проекта. Нажмите кнопку "Завершить".</p>
</li>
@@ -470,7 +484,7 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<p>Теперь необходимо скопировать исходный код JSON, загруженный в проект <code>json</code> , аналогично копированию ресурсов набора инструментальных средств Dojo в проект <code>DojoTreeSample</code> .</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Распакуйте архив <code>JSON-java-master.zip</code> и скопируйте (Ctrl-C; ⌘-C на Mac) исходные файлы Java, находящиеся в корневой папке.</p>
</li>
@@ -480,13 +494,21 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<p><strong>Примечание.</strong> Папку <code>zip</code> и ее содержимое копировать не требуется, так как она уже находится в корневой папке распакованного архива.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>В окне "Проекты" в IDE щелкните правой кнопкой мыши узел "Исходные пакеты" и выберите пункт меню "Создать > Пакет Java".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
<p>В качестве имени пакета укажите <strong>json</strong>. Нажмите кнопку "Завершить".</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="9">
<li>
<p>Щелкните правой кнопкой мыши исходный пакет <code>json</code> и выберите пункт меню "Вставить".</p>
</li>
@@ -499,10 +521,10 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<div class="content">
<img src="images/proj-win-json-sources.png" alt="proj win json sources">
</div>
-<div class="title">Figure 5. Источники теперь хранятся в новом проекте 'json'</div>
+<div class="title">Figure 6. Источники теперь хранятся в новом проекте 'json'</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="10">
<li>
<p>Щелкните правой кнопкой мыши узел проекта <code>json</code> в окне 'Проекты' и выберите 'Очистить' и 'Построить' для сборки проекта.</p>
</li>
@@ -518,13 +540,13 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<div class="content">
<img src="images/files-win-compiled-classes.png" alt="files win compiled classes">
</div>
-<div class="title">Figure 6. Скомпилированные источники можно просмотреть в папке 'сборки' проекта</div>
+<div class="title">Figure 7. Скомпилированные источники можно просмотреть в папке 'сборки' проекта</div>
</div>
<div class="paragraph">
<p>Теперь, когда у нас есть файл <code>json.jar</code>, можно разрешить проблему со ссылками, которая имелась у проекта <code>DojoTreeSample</code> с момента его открытия.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="11">
<li>
<p>В окне 'Проекты' щелкните правой кнопкой мыши узел Libraries <code>DojoTreeSample</code> и выберите 'Добавить файл JAR/папку'. Затем в диалоговом окне перейдите к местоположению папки <code>dist</code> проекта <code>json</code> и выберите файл <code>json.jar</code>.</p>
</li>
@@ -540,16 +562,20 @@ image::images/dojo-tree-complete.png[title="Выполненное упражн
<div class="content">
<img src="images/libraries-json-jar.png" alt="libraries json jar">
</div>
-<div class="title">Figure 7. В проекте содержится ссылка на файл JAR</div>
+<div class="title">Figure 8. В проекте содержится ссылка на файл JAR</div>
</div>
<div class="paragraph">
<p>*Примечание. *Хотя файл <code>json.jar</code> указан в узле проекта <code>Библиотеки</code>, ссылка на него находится в исходном местоположении - она не скопирована и добавлена к проекту (например, она отсутствует в проекте <code>DojoTreeSample</code> в окне 'Файлы'). Поэтому в случае изменения местоположения файла JAR ссылка будет нарушена.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="12">
<li>
<p>Разверните <code>Source Packages</code> ("Пакеты исходного кода") > пакет <code>dojo.indians</code> и дважды щелкните классы <code>Tribe</code> и <code>TribeDataManager</code>, чтобы открыть их в редакторе.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="13">
<li>
<p>Добавьте к обоим классам необходимые операторы импорта. Во всех классах щелкните правой кнопкой мыши в редакторе и выберите 'Исправить выражения импорта'.</p>
</li>
@@ -578,7 +604,7 @@ import dojo.org.json.JSONObject;</code></pre>
<p>Обратите внимание, что интерфейсы API для классов JSON также предоставлены на <a href="http://json.org/java">http://json.org/java</a> – эту страницу может быть желательно оставить открытой, так как ниже мы рассмотрим код в <code>Tribe</code> и <code>TribeDataManager</code>.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="14">
<li>
<p>Рассмотрение ArrayList в <code>TribeDataManager</code>. ArrayList является коллекцией объектов <code>Tribe</code>. Взглянув на первый элемент ArrayList, можно увидеть, что новый объект <code>Tribe</code> создан и добавлен к списку:</p>
</li>
@@ -590,8 +616,14 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>Каждый объект <code>Tribe</code> записывает три точки данных: <em>tribe</em> ("племя"), <em>category</em> ("группа") и <em>region</em> ("регион"). Данные для этого упражнения взяты из статьи Википедии по <a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">коренным народам США</a>. Как можно увидеть, <em>племена</em> разбиваются на <em>группы</em>, и несколько категорий могут быть охвачены более крупным <em>регионом</em>.
-15. Откройте класс <code>Tribe</code> в редакторе и обратите внимание, что он, по сути, является компонентом <a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>, за исключением метода <code>toJSONObject()</code>:</p>
+<p>Каждый объект <code>Tribe</code> записывает три точки данных: <em>tribe</em> ("племя"), <em>category</em> ("группа") и <em>region</em> ("регион"). Данные для этого упражнения взяты из статьи Википедии по <a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">коренным народам США</a>. Как можно увидеть, <em>племена</em> разбиваются на <em>группы</em>, и несколько категорий могут быть охвачены более крупным <em>регионом</em>.</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="15">
+<li>
+<p>Откройте класс <code>Tribe</code> в редакторе и обратите внимание, что он, по сути, является компонентом <a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>, за исключением метода <code>toJSONObject()</code>:</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -605,14 +637,21 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="16">
<li>
-<p>Переключитесь обратно на <code>TribeDataManager</code> (Ctrl-Tab) и изучите методы, входящие в класс. Откройте навигатор (Ctrl-7; ⌘-7 в Mac), чтобы просмотреть список полей и свойств, содержащихся в классе.
-image::images/dojo-navigator.png[title=""Навигатор компонентов" обеспечивает просмотр полей и свойств классов."]
-Наиболее важным методом здесь является`getIndiansAsJSONObject()<code>. Этот метод просматривает ArrayList, обрабатывает данные и возвращает их в форме `JSONObject</code>. Форма <code>String</code> JSONObject и является тем, что нужно модулю <code>ItemFileReadStore</code> Dojo.</p>
+<p>Переключитесь обратно на <code>TribeDataManager</code> (Ctrl-Tab) и изучите методы, входящие в класс. Откройте навигатор (Ctrl-7; ⌘-7 в Mac), чтобы просмотреть список полей и свойств, содержащихся в классе.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/dojo-navigator.png" alt="dojo navigator">
+</div>
+<div class="title">Figure 9. "Навигатор компонентов" обеспечивает просмотр полей и свойств классов.</div>
+</div>
+<div class="paragraph">
+<p>Наиболее важным методом здесь является`getIndiansAsJSONObject()<code>. Этот метод просматривает ArrayList, обрабатывает данные и возвращает их в форме `JSONObject</code>. Форма <code>String</code> JSONObject и является тем, что нужно модулю <code>ItemFileReadStore</code> Dojo.</p>
+</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-java" data-lang="java">public static JSONObject getIndiansAsJSONObject() throws JSONException {
@@ -638,11 +677,19 @@ image::images/dojo-navigator.png[title=""Навигатор компоне
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="17">
<li>
-<p>Откройте документацию Javadoc по методу <code>getIndiansAsJSONObject()</code>. Для этого вернитесь в навигатор (Ctrl-7; ⌘-7 в Mac) и подведите курсор к методу. В ином случае выберите Window ("Окно") > Other ("Прочие") > Javadoc ("Документация Java") из основного меню и щелкните сигнатуру метода в редакторе.
-image::images/javadoc-window.png[title="Javadoc для TribeDataManager обеспечивает пример данных JSON"]</p>
+<p>Откройте документацию Javadoc по методу <code>getIndiansAsJSONObject()</code>. Для этого вернитесь в навигатор (Ctrl-7; ⌘-7 в Mac) и подведите курсор к методу. В ином случае выберите Window ("Окно") > Other ("Прочие") > Javadoc ("Документация Java") из основного меню и щелкните сигнатуру метода в редакторе.</p>
+<div class="literalblock">
+<div class="content">
+<pre>image::images/javadoc-window.png[title="Javadoc для TribeDataManager обеспечивает пример данных JSON"]</pre>
+</div>
+</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="18">
<li>
<p>Изучите образец данных JSON, предоставленный документацией Javadoc. Обратите внимание, что формат данных соответствует примерам, предоставленным в <a href="http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item">документации Dojo</a>.</p>
</li>
@@ -656,18 +703,39 @@ image::images/javadoc-window.png[title="Javadoc для TribeDataManager обес
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Установите точку останова на методе (нажмите номер строки (например, строка 99) в левом поле редактора).
-image::images/debugger-breakpoint.png[title="Используйте отладчик Java для перехода по коду"]</p>
+<p>Установите точку останова на методе (нажмите номер строки (например, строка 99) в левом поле редактора).</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/debugger-breakpoint.png" alt="debugger breakpoint">
+</div>
+<div class="title">Figure 10. Используйте отладчик Java для перехода по коду</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>Выберите проект <code>DojoTreeSample</code> в окне 'Проекты'.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Запустите отладчик (нажмите кнопку 'Отладка проекта' ( image::images/debug-btn.png[] ) на панели инструментов).</p>
+<p>Запустите отладчик (нажмите кнопку 'Отладка проекта' ( <span class="image"><img src="images/debug-btn.png" alt="debug btn"></span> ) на панели инструментов).</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>Используйте кнопки 'С заходом' ( image::images/step-into-btn.png[] ) и 'Без захода' ( image::images/step-over-btn.png[] ) на панели инструментов.</p>
+<p>Используйте кнопки 'С заходом' ( <span class="image"><img src="images/step-into-btn.png" alt="step into btn"></span> ) и 'Без захода' ( <span class="image"><img src="images/step-over-btn.png" alt="step over btn"></span> ) на панели инструментов.</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Изучите значения переменных и выражений в окне 'Локальные переменные' ('Окно' > 'Отладка' > 'Переменные').</p>
</li>
@@ -710,9 +778,18 @@ image::images/debugger-breakpoint.png[title="Используйте отладч
<p>В окне 'Проекты' щелкните правой кнопкой мыши исходный пакет <code>dojo.indians</code> и выберите 'Создать' > 'Сервлет'.</p>
</li>
<li>
-<p>В мастере создания сервлетов введите <strong><code>TribeServlet</code></strong> в качестве имени класса. Убедитесь, что <code>dojo.indians</code> указан как пакет. Нажмите кнопку 'Далее'.
-image::images/new-servlet-wizard.png[title="Используйте мастер создания сервлетов для создания сервлетов"]</p>
+<p>В мастере создания сервлетов введите <strong><code>TribeServlet</code></strong> в качестве имени класса. Убедитесь, что <code>dojo.indians</code> указан как пакет. Нажмите кнопку 'Далее'.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-servlet-wizard.png" alt="new servlet wizard">
+</div>
+<div class="title">Figure 11. Используйте мастер создания сервлетов для создания сервлетов</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Проверьте значения по умолчанию в полях "Имя сервлета" и "Шаблоны URL". Нажмите "Готово", чтобы создать класс skeleton для сервлета.</p>
</li>
@@ -725,7 +802,7 @@ image::images/new-servlet-wizard.png[title="Используйте мастер
<p><strong>Примечание.</strong> Мастер автоматически добавит имя сервлета и шаблон URL в файл <code>web.xml</code>. Как следствие, все запросы к домену размещения (т. е., <code><a href="http://localhost:8080/DojoTreeSample/" class="bare">http://localhost:8080/DojoTreeSample/</a></code>) для <code>TribeServlet</code> будут обрабатываться классом <code>dojo.indians.TribeServlet</code>. Если открыть файл <code>web.xml</code> в редакторе, можно увидеть, что в этом файле появились элементы <c [...]
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Измените метод <code>processRequest()</code>, внеся следующие изменения (выделены полужирным шрифтом).</p>
</li>
@@ -740,7 +817,7 @@ image::images/new-servlet-wizard.png[title="Используйте мастер
<p>Это изменение устанавливает заголовок <code>Content-Type</code> для отклика HTTP, чтобы указать, что все возвращаемое содержимое имеет формат JSON.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Замените закомментированный код внутри блока <code>try</code> метода <code>processRequest()</code> на следующий код (изменения выделены <strong>жирным шрифтом</strong>):</p>
</li>
@@ -768,7 +845,7 @@ image::images/new-servlet-wizard.png[title="Используйте мастер
<p>Чтобы изменить формат кода, щелкните правой кнопкой мыши в редакторе и выберите 'Формат'.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Используйте подсказки IDE, чтобы добавить следующие операторы импорта.</p>
</li>
@@ -781,9 +858,9 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
-<p>Для запуска проекта выберите узел проекта <code>DojoTreeSample</code> в окне 'Проекты', затем нажмите кнопку 'Запустить проект' ( image::images/run-project-btn.png[] ) на панели инструментов IDE.</p>
+<p>Для запуска проекта выберите узел проекта <code>DojoTreeSample</code> в окне 'Проекты', затем нажмите кнопку 'Запустить проект' ( <span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span> ) на панели инструментов IDE.</p>
</li>
</ol>
</div>
diff --git a/content/kb/docs/web/js-toolkits-dojo_zh_CN.html b/content/kb/docs/web/js-toolkits-dojo_zh_CN.html
index 7a19df0..66a2188 100644
--- a/content/kb/docs/web/js-toolkits-dojo_zh_CN.html
+++ b/content/kb/docs/web/js-toolkits-dojo_zh_CN.html
@@ -151,8 +151,9 @@
<em>或</em>
Tomcat Servlet 容器</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Open Source Edition 3.1.x 或 4.x
-_ _
-7.x 或 8.x</p></td>
+_ _</p>
+<p class="tableblock">[start=7]
+.x 或 8.x</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://www.dojotoolkit.org/download">Dojo 工具包</a></p></td>
@@ -176,11 +177,16 @@ _ _
<p>NetBeans IDE Java EE 下载包安装允许您选择性地安装 GlassFish Server Open Source Edition 并在 IDE 中注册。在此教程中，您需要服务器来模拟客户端-服务器通信。</p>
</li>
<li>
-<p>完成的项目如下所示：
-image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练习"]</p>
+<p>完成的项目如下所示：</p>
</li>
</ul>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/dojo-tree-complete.png" alt="dojo tree complete">
+</div>
+<div class="title">Figure 2. 在浏览器中查看的已完成练习</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -195,7 +201,7 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<p>将教程的 <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip">Dojo 样例项目</a>下载到计算机上的某个位置。</p>
</li>
<li>
-<p>单击 IDE 工具栏中的 "Open Project"（打开项目）按钮 (image::images/open-project-btn.png[]) 按钮以打开 "Open Project"（打开项目）对话框。</p>
+<p>单击 IDE 工具栏中的 "Open Project"（打开项目）按钮 (<span class="image"><img src="images/open-project-btn.png" alt="open project btn"></span>) 按钮以打开 "Open Project"（打开项目）对话框。</p>
</li>
<li>
<p>在 "Open Project"（打开项目）对话框中，定位至计算机上的 Dojo 样例项目并单击 "Open Project"（打开项目）。</p>
@@ -209,7 +215,7 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<div class="content">
<img src="images/proj-win-ref-problems.png" alt="proj win ref problems">
</div>
-<div class="title">Figure 2. 项目引用问题由红色文本和错误标记指示</div>
+<div class="title">Figure 3. 项目引用问题由红色文本和错误标记指示</div>
</div>
<div class="paragraph">
<p>存在此引用问题的原因在于：项目（<code>Tribe</code> 和 <code>TribeDataManager</code>）中使用的 Java 类引用 JSON JAR 文件中的类，稍后您将在<a href="#addJSON">为项目添加 JSON JAR 文件</a>部分中添加该文件。</p>
@@ -218,7 +224,7 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<p><strong>注：</strong>"Projects"（项目）窗口（Ctrl-1 组合键；在 Mac 上为 ⌘-1 组合键）提供了重要项目内容的_逻辑视图_，也是项目源的主入口点。"Files"（文件）窗口（Ctrl-2 组合键；在 Mac 上为 ⌘-2 组合键）显示_基于目录的项目视图_，其中包括 "Projects"（项目）窗口中未显示的任何文件和文件夹。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>在 "Projects"（项目）窗口中展开 <code>Web Pages</code>（Web 页）节点。</p>
</li>
@@ -241,7 +247,7 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<p>*注：*此项目不需要 <code>DojoX</code> 库。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>在 "Projects"（项目）窗口中展开 <code>Libraries</code>（库）节点，并确认所有必需库均在类路径上。</p>
</li>
@@ -254,7 +260,7 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<div class="content">
<img src="images/proj-win-dojo-resources.png" alt="proj win dojo resources">
</div>
-<div class="title">Figure 3. Dojo 和 Dijit 库已添加到项目的 "resources" 文件夹中</div>
+<div class="title">Figure 4. Dojo 和 Dijit 库已添加到项目的 "resources" 文件夹中</div>
</div>
<div class="paragraph">
<p>在 "Resolve References"（解决引用）对话框中选择 "GlassFish Server"。单击 "OK"（确定）。</p>
@@ -263,7 +269,7 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<div class="content">
<img src="images/dojo-add-server.png" alt="dojo add server">
</div>
-<div class="title">Figure 4. Dojo 和 Dijit 库已添加到项目的 "resources" 文件夹中</div>
+<div class="title">Figure 5. Dojo 和 Dijit 库已添加到项目的 "resources" 文件夹中</div>
</div>
<div class="paragraph">
<p>在此阶段，您已成功在 IDE 中打开 <code>DojoTreeSample</code> 项目并且已确认 Dojo 库包括在应用程序中。在下一步中，您将开始在 HTML 文件中工作，该文件将向最终用户显示树窗口部件。</p>
@@ -309,16 +315,16 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
</li>
<li>
<p><code>parseOnLoad</code> 设置为 <code>true</code> 可确保在加载页面时解析窗口部件和页面标记。</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>通过在 <code><head></code> 标记之间和添加的 <code><script></code> 标记下方添加以下 <code>@import</code> 语句（以粗体显示），可以为工具包中包含的 <code>nihilo</code> <a href="http://docs.dojocampus.org/dijit/themes">样例主题</a>添加一个链接。</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><script type="text/javascript">
@@ -339,7 +345,7 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<p>默认情况下，<code>nihilo</code> 主题包含在工具包中。通过在“项目”窗口中展开 <code>dijit/themes</code> 文件夹可以查看默认提供的其他样例主题。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>在页 <code><body></code> 标记中添加以下类选择器可以指定使用的主题的名称。当您执行此操作时，加载到页面中的任何 Dojo 窗口部件都将使用与主题关联的样式来呈现。</p>
</li>
@@ -386,16 +392,16 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
</li>
<li>
<p><code><a href="http://docs.dojocampus.org/dijit/Tree">dijit.Tree</a></code>：树窗口部件，它提供了从 <code>ItemFileReadStore</code> 中检索的 JSON 数据的视图。</p>
+</li>
+</ul>
+</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>添加以下代码（以粗体显示）以便添加 <code>ItemFileReadStore</code> 和 <code>Tree</code> 窗口部件。</p>
</li>
</ol>
</div>
-</li>
-</ul>
-</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><!-- TODO: specify AJAX retrieval -->
@@ -451,13 +457,21 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<p>现在，我们要编译这些源代码并创建将添加到 <code>DojoTreeSample</code> 项目中的 Java 档案（JAR 文件）。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
-<p>单击工具栏中的 "New Project"（新建项目）按钮 (image::images/new-project-btn.png[]) 以便打开 "New Project"（新建项目）向导。</p>
+<p>单击工具栏中的 "New Project"（新建项目）按钮 (<span class="image"><img src="images/new-project-btn.png" alt="new project btn"></span>) 以便打开 "New Project"（新建项目）向导。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>在 "New Project"（新建项目）向导中，选择 "Java" 类别的 "Java Class Library"（Java 类库）项目模板。单击 "Next"（下一步）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>在 "Java Class Library"（Java 类库）向导的 "Name and Location"（名称和位置）面板中，键入 <strong><code>json</code></strong> 作为项目名称。单击 "Finish"（完成）。</p>
</li>
@@ -470,7 +484,7 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<p>现在，您需要按照将 Dojo 工具包资源复制到 <code>DojoTreeSample</code> 项目的相同方式，将下载的 JSON 资源复制到 <code>json</code> 项目。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>提取 <code>JSON-java-master.zip</code> 档案并复制（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）根文件夹中的 Java 源文件。</p>
</li>
@@ -480,13 +494,21 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<p>*注：*您无需复制同样也位于所提取档案的根文件夹中的 <code>zip</code> 文件夹及其内容。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>在 IDE 的 "Projects"（项目）窗口中，右键单击 "Source Packages"（源包）节点，然后在弹出菜单中选择 "New"（新建）> "Java Package"（Java 包）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
<p>键入 <strong>json</strong> 作为包名称。单击 "Finish"（完成）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="9">
<li>
<p>右键单击 <code>json</code> 源包，然后在弹出菜单中选择 "Paste"（粘贴）。</p>
</li>
@@ -499,10 +521,10 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<div class="content">
<img src="images/proj-win-json-sources.png" alt="proj win json sources">
</div>
-<div class="title">Figure 5. 源文件现已包含在新的 "json" 项目中</div>
+<div class="title">Figure 6. 源文件现已包含在新的 "json" 项目中</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="10">
<li>
<p>在 "Projects"（项目）窗口中右键单击 <code>json</code> 项目节点，然后选择 "Clean and Build"（清理并构建）构建项目。</p>
</li>
@@ -518,13 +540,13 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<div class="content">
<img src="images/files-win-compiled-classes.png" alt="files win compiled classes">
</div>
-<div class="title">Figure 6. 可在项目的 "build" 文件夹中查看已编译源代码</div>
+<div class="title">Figure 7. 可在项目的 "build" 文件夹中查看已编译源代码</div>
</div>
<div class="paragraph">
<p>现在，您已具有 <code>json.jar</code> 文件，因此可以解决 <code>DojoTreeSample</code> 项目自打开以来显现的引用问题。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="11">
<li>
<p>在 "Projects"（项目）窗口中，右键单击 <code>DojoTreeSample</code> 的 "Libraries"（库）节点并选择 "Add JAR/Folder"（添加 JAR/文件夹）。然后，在对话框中，导航至 <code>json</code> 项目的 <code>dist</code> 文件夹的位置并选择 <code>json.jar</code> 文件。</p>
</li>
@@ -540,16 +562,20 @@ image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练
<div class="content">
<img src="images/libraries-json-jar.png" alt="libraries json jar">
</div>
-<div class="title">Figure 7. JAR 文件由项目引用</div>
+<div class="title">Figure 8. JAR 文件由项目引用</div>
</div>
<div class="paragraph">
<p>*注：*尽管 <code>json.jar</code> 文件列在项目的 <code>Libraries</code> 节点下，但该文件却是从原始位置引用的，而不是复制并添加到项目中的（例如，您将无法在 "Files"（文件）窗口中的 <code>DojoTreeSample</code> 项目下找到它）。因此，如果更改 JAR 文件的位置，引用将中断。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="12">
<li>
<p>展开 <code>Source Packages</code>（源包）> <code>dojo.indians</code> 包并双击 <code>Tribe</code> 和 <code>TribeDataManager</code> 类，以便在编辑器中将其打开。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="13">
<li>
<p>向两个类中添加必要的 import 语句。在每个类中，右键单击编辑器并选择 "Fix Imports"（修复导入）。</p>
</li>
@@ -578,7 +604,7 @@ import dojo.org.json.JSONObject;</code></pre>
<p>请注意，<a href="http://json.org/java">http://json.org/java</a> 中还提供用于 JSON 的 API - 以后检查 <code>Tribe</code> 和 <code>TribeDataManager</code> 中的代码时，可能要使此页保持打开状态。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="14">
<li>
<p>检查 <code>TribeDataManager</code> 中的 ArrayList。ArrayList 是 <code>Tribe</code> 对象的集合。查看 ArrayList 的第一个元素，您可以看到创建了一个新 <code>Tribe</code> 对象并将其添加到了列表中：</p>
</li>
@@ -590,8 +616,14 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="paragraph">
-<p>每个 <code>Tribe</code> 对象捕获三个信息点：<em>tribe</em>、<em>category</em> 和 <em>region</em>。此练习中的数据摘自维基百科中有关 <a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native Americans in the United States</a> 的条目。您可以确定，在一个 category 中可以对多个 <em>tribe __分类</em>，一个大的 <em>region</em> 中可以包含许多 category。
-15. 在编辑器中打开 <code>Tribe</code> 类，并请注意，它基本上是 <a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>，<code>toJSONObject()</code> 方法除外：</p>
+<p>每个 <code>Tribe</code> 对象捕获三个信息点：<em>tribe</em>、<em>category</em> 和 <em>region</em>。此练习中的数据摘自维基百科中有关 <a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native Americans in the United States</a> 的条目。您可以确定，在一个 category 中可以对多个 <em>tribe __分类</em>，一个大的 <em>region</em> 中可以包含许多 category。</p>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="15">
+<li>
+<p>在编辑器中打开 <code>Tribe</code> 类，并请注意，它基本上是 <a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>，<code>toJSONObject()</code> 方法除外：</p>
+</li>
+</ol>
</div>
<div class="listingblock">
<div class="content">
@@ -605,14 +637,21 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="16">
<li>
-<p>切换回 <code>TribeDataManager</code>（Ctrl-Tab 组合键）并检查该类中包括的方法。打开导航器（Ctrl-7 组合键；在 Mac 上为 ⌘-7 组合键），以查看该类中包含的字段和属性的列表。
-image::images/dojo-navigator.png[title="使用导航器查看类字段和属性"]
-其中包含的最重要方法是 <code>getIndiansAsJSONObject()</code>。此方法会扫描 ArrayList，处理数据，并以 <code>JSONObject</code> 的形式返回它。JSONObject 的 <code>String</code> 形式是 Dojo 的 <code>ItemFileReadStore</code> 所需要的。</p>
+<p>切换回 <code>TribeDataManager</code>（Ctrl-Tab 组合键）并检查该类中包括的方法。打开导航器（Ctrl-7 组合键；在 Mac 上为 ⌘-7 组合键），以查看该类中包含的字段和属性的列表。</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/dojo-navigator.png" alt="dojo navigator">
+</div>
+<div class="title">Figure 9. 使用导航器查看类字段和属性</div>
+</div>
+<div class="paragraph">
+<p>其中包含的最重要方法是 <code>getIndiansAsJSONObject()</code>。此方法会扫描 ArrayList，处理数据，并以 <code>JSONObject</code> 的形式返回它。JSONObject 的 <code>String</code> 形式是 Dojo 的 <code>ItemFileReadStore</code> 所需要的。</p>
+</div>
<div class="listingblock">
<div class="content">
<pre class="prettyprint highlight"><code class="language-java" data-lang="java">public static JSONObject getIndiansAsJSONObject() throws JSONException {
@@ -638,11 +677,19 @@ image::images/dojo-navigator.png[title="使用导航器查看类字段和属性"
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="17">
<li>
-<p>在 <code>getIndiansAsJSONObject()</code> 方法中打开 Javadoc。通过返回到导航器（Ctrl-7 组合键；在 Mac 上为 ⌘-7 组合键）并将光标悬停于方法上方可以执行此操作。否则，请从主菜单中选择 "Window"（窗口）> "Other"（其他）> "Javadoc"，然后在编辑器中单击方法签名。
-image::images/javadoc-window.png[title="TribeDataManager 的 Javadoc 提供 JSON 数据的示例"]</p>
+<p>在 <code>getIndiansAsJSONObject()</code> 方法中打开 Javadoc。通过返回到导航器（Ctrl-7 组合键；在 Mac 上为 ⌘-7 组合键）并将光标悬停于方法上方可以执行此操作。否则，请从主菜单中选择 "Window"（窗口）> "Other"（其他）> "Javadoc"，然后在编辑器中单击方法签名。</p>
+<div class="literalblock">
+<div class="content">
+<pre>image::images/javadoc-window.png[title="TribeDataManager 的 Javadoc 提供 JSON 数据的示例"]</pre>
+</div>
+</div>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="18">
<li>
<p>检查在 Javadoc 中提供的 JSON 数据的示例。请注意，数据格式符合 <a href="http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item">Dojo 文档</a>中提供的示例。</p>
</li>
@@ -656,18 +703,39 @@ image::images/javadoc-window.png[title="TribeDataManager 的 Javadoc 提供 JSON
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>在方法中设置断点（在编辑器的左旁注中单击行号（即第 99 行））。
-image::images/debugger-breakpoint.png[title="使用 Java 调试器逐步执行代码"]</p>
+<p>在方法中设置断点（在编辑器的左旁注中单击行号（即第 99 行））。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/debugger-breakpoint.png" alt="debugger breakpoint">
+</div>
+<div class="title">Figure 10. 使用 Java 调试器逐步执行代码</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>在 "Projects"（项目）窗口中选择 <code>DojoTreeSample</code> 项目。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>运行调试器（在工具栏中单击 "Debug Project"（调试项目）按钮 (image::images/debug-btn.png[])）。</p>
+<p>运行调试器（在工具栏中单击 "Debug Project"（调试项目）按钮 (<span class="image"><img src="images/debug-btn.png" alt="debug btn"></span>)）。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>使用工具栏中的 "Step Into"（步入）(image::images/step-into-btn.png[]) 和 "Step Over"（步过）(image::images/step-over-btn.png[]) 按钮。</p>
+<p>使用工具栏中的 "Step Into"（步入）(<span class="image"><img src="images/step-into-btn.png" alt="step into btn"></span>) 和 "Step Over"（步过）(<span class="image"><img src="images/step-over-btn.png" alt="step over btn"></span>) 按钮。</p>
</li>
+</ol>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>在 "Local Variables"（局部变量）窗口中检查变量和表达式值（"Window"（窗口）> "Debugging"（调试）> "Variables"（变量））。</p>
</li>
@@ -710,9 +778,18 @@ image::images/debugger-breakpoint.png[title="使用 Java 调试器逐步执行
<p>在 "Projects"（项目）窗口中，右键单击 <code>dojo.indians</code> 源包并选择 "New"（新建）> "Servlet"。</p>
</li>
<li>
-<p>在 "New Servlet"（新建 Servlet）向导中，键入 <strong><code>TribeServlet</code></strong> 作为类名。确认已将 <code>dojo.indians</code> 指定为包。单击 "Next"（下一步）。
-image::images/new-servlet-wizard.png[title="使用新建 Servlet 向导创建 Servlet"]</p>
+<p>在 "New Servlet"（新建 Servlet）向导中，键入 <strong><code>TribeServlet</code></strong> 作为类名。确认已将 <code>dojo.indians</code> 指定为包。单击 "Next"（下一步）。</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/new-servlet-wizard.png" alt="new servlet wizard">
+</div>
+<div class="title">Figure 11. 使用新建 Servlet 向导创建 Servlet</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>确认默认的 "Servlet Name"（Servlet 名称）和 "URL Patterns"（URL 模式）值正确。单击 "Finish"（完成）将为 Servlet 生成框架类。</p>
</li>
@@ -725,7 +802,7 @@ image::images/new-servlet-wizard.png[title="使用新建 Servlet 向导创建 Se
<p>*注：*此向导会自动将 Servlet 名称和 URL 模式添加到 <code>web.xml</code> 中。因此，对用于 <code>TribeServlet</code> 的主机域的任何请求（即 <code><a href="http://localhost:8080/DojoTreeSample/" class="bare">http://localhost:8080/DojoTreeSample/</a></code>）都将由 <code>dojo.indians.TribeServlet</code> 类来处理。如果在编辑器中打开 <code>web.xml</code>，您可以看到此文件现在包含 <code><servlet></code> 和 <code><servlet-mapping></code> 元素。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>通过执行以下更改（以粗体显示）来修改 <code>processRequest()</code> 方法。</p>
</li>
@@ -740,7 +817,7 @@ image::images/new-servlet-wizard.png[title="使用新建 Servlet 向导创建 Se
<p>此更改将设置 HTTP 响应的 <code>Content-Type</code> 头，以指示任何返回的内容均为 JSON 格式。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>将 <code>processRequest()</code> 方法的 <code>try</code> 块内的注释代码替换为以下代码（更改以*粗体*显示）：</p>
</li>
@@ -768,7 +845,7 @@ image::images/new-servlet-wizard.png[title="使用新建 Servlet 向导创建 Se
<p>要重新格式化代码，请在编辑器中单击右键并选择 "Format"（格式化代码）。</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>使用 IDE 的提示添加以下 import 语句。</p>
</li>
@@ -781,9 +858,9 @@ import dojo.org.json.JSONObject;</code></pre>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
-<p>要运行项目，请在 "Projects"（项目）窗口中选择 <code>DojoTreeSample</code> 项目节点，然后单击 IDE 工具栏中的 "Run Project"（运行项目）(image::images/run-project-btn.png[]) 按钮。</p>
+<p>要运行项目，请在 "Projects"（项目）窗口中选择 <code>DojoTreeSample</code> 项目节点，然后单击 IDE 工具栏中的 "Run Project"（运行项目）(<span class="image"><img src="images/run-project-btn.png" alt="run project btn"></span>) 按钮。</p>
</li>
</ol>
</div>
diff --git a/content/kb/docs/web/js-toolkits-jquery.html b/content/kb/docs/web/js-toolkits-jquery.html
index 0514781..5b9006b 100644
--- a/content/kb/docs/web/js-toolkits-jquery.html
+++ b/content/kb/docs/web/js-toolkits-jquery.html
@@ -213,18 +213,34 @@ If you plan to work in a PHP project, you’ll need to download PHP and conf
</ol>
</div>
<div class="paragraph">
... 27389 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@netbeans.apache.org
For additional commands, e-mail: commits-help@netbeans.apache.org
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists