This is an automated email from the ASF dual-hosted git repository.
skygo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/netbeans-website.git
The following commit(s) were added to refs/heads/master by this push:
new f03ab9809 use prefixed tutorial images
f03ab9809 is described below
commit f03ab9809fab1bf7755ab9b92ef37615ca973793
Author: Eric Barboni <[email protected]>
AuthorDate: Wed Mar 8 11:18:09 2023 +0100
use prefixed tutorial images
---
.../src/content/tutorials/nbm-quick-start.adoc | 86 +++++++++++-----------
1 file changed, 43 insertions(+), 43 deletions(-)
diff --git a/netbeans.apache.org/src/content/tutorials/nbm-quick-start.adoc
b/netbeans.apache.org/src/content/tutorials/nbm-quick-start.adoc
index 0abf83c94..366bbe4e2 100644
--- a/netbeans.apache.org/src/content/tutorials/nbm-quick-start.adoc
+++ b/netbeans.apache.org/src/content/tutorials/nbm-quick-start.adoc
@@ -74,7 +74,7 @@ In this section, you create your first NetBeans Platform
application.
1. Choose File | New Project and then choose NetBeans Modules. Select
"NetBeans Platform Application". You should see this:
-image::images/nbm-quick-start/new-project-1.png[]
+image::images/quickstart-platform_73_new-project-1.png[]
The difference between the 4 templates above is as follows:
@@ -90,7 +90,7 @@ Click btn:[Next].
1. Name your new application `WordProcessor` and specify a folder on disk for
storing it:
-image::images/nbm-quick-start/new-project-2.png[]
+image::images/quickstart-platform_73_new-project-2.png[]
Click btn:[Finish]. The new project appears as follows in the Projects window:
@@ -107,13 +107,13 @@ In this section, you create your first NetBeans Platform
module.
1. Right-click the "Modules" node, shown in the screenshot above, and choose
"Add New":
-image::images/nbm-quick-start/new-module-1.png[]
+image::images/quickstart-platform_73_new-module-1.png[]
The New Module Project dialog will appear.
Name the new module `WordEditorCore`:
-image::images/nbm-quick-start/new-module-2.png[]
+image::images/quickstart-platform_73_new-module-2.png[]
Click btn:[Next].
@@ -122,12 +122,12 @@ Click btn:[Next].
1. Specify "org.word.editor.core" as the Code Name Base, which is a unique
string identifying the module. The Module Display Name is used as a label for
the module in the Projects window.
-image::images/nbm-quick-start/new-module-3.png[]
+image::images/quickstart-platform_73_new-module-3.png[]
Click btn:[Finish]. The new module is created and its structure is shown in
the Projects window:
-image::images/nbm-quick-start/new-module-4.png[]
+image::images/quickstart-platform_73_new-module-4.png[]
=== Create the Window
@@ -138,11 +138,11 @@ Having created a module, you now create your first
NetBeans window.
[start=1]
1. Right-click the "WordEditorCore" module and choose New | Other.
-image::images/nbm-quick-start/new-window-1.png[]
+image::images/quickstart-platform_73_new-window-1.png[]
The New File dialog appears. In the Module Development category, select
"Window":
-image::images/nbm-quick-start/new-window-2.png[]
+image::images/quickstart-platform_73_new-window-2.png[]
Click btn:[Next].
@@ -159,11 +159,11 @@ Then click btn:[Next].
[start=3]
1. Set the class name prefix to `Word` and the package to
`org.word.editor.core`:
-image::images/nbm-quick-start/new-window-4.png[]
+image::images/quickstart-platform_73_new-window-4.png[]
Click btn:[Finish]. The new window ("WordTopComponent.java") is added to the
source structure of your module:
-image::images/nbm-quick-start/new-window-5.png[]
+image::images/quickstart-platform_73_new-window-5.png[]
[start=4]
1. The new window should have opened in the Design view of the "Matisse" GUI
Builder. You can double-click (or select "Open" from the context menu) it if
it didn't open automatically.
@@ -172,14 +172,14 @@ image::images/nbm-quick-start/new-window-6.png[]
The Palette should be open on the right side (you can use menu:Window[IDE
Tools>Palette] or kbd:[Ctrl+Shift+8] if not). Drag and drop a Button and a Text
Area from the Palette onto the window:
-image::images/nbm-quick-start/new-window-7.png[]
+image::images/quickstart-platform_73_new-window-7.png[]
Do the following to make the new GUI components more meaningful:
* Right-click the text area, choose "Change Variable Name", and then name it
`text`.
* Right-click the button, choose "Edit Text", and then set the text of the
button to `Filter!`. Also rename the variable to `filterButton`.
-image::images/nbm-quick-start/new-window-7.png[]
+image::images/quickstart-platform_73_new-window-7.png[]
[start=5]
1. Double click on the button. This will create an event handling method in
the Source editor. The method is called whenever the button is clicked. Change
the body of the method to the following code:
@@ -206,12 +206,12 @@ In this section, you deploy the application.
[start=1]
1. Right-click the WordProcessor application (not the WordEditorCore module)
and choose Run.
-image::images/nbm-quick-start/new-app-1.png[]
+image::images/quickstart-platform_73_new-app-1.png[]
Doing so will start up your new NetBeans Platform application and install your
module. You will have a new window, as well as a new menu item for opening it,
as shown below:
-image::images/nbm-quick-start/new-app-2.png[]
+image::images/quickstart-platform_73_new-app-2.png[]
[start=2]
@@ -251,22 +251,22 @@ In this section, you create an API.
1. Expand the new application in the Projects window, right-click the Modules
node, and choose "Add New":
-image::images/nbm-quick-start/new-api-1.png[]
+image::images/quickstart-platform_73_new-api-1.png[]
The New Module Project dialog appears. Set the Project Name for the new module
to be "WordEditorAPI":
-image::images/nbm-quick-start/new-api-2.png[]
+image::images/quickstart-platform_73_new-api-2.png[]
Click btn:[Next]. Set the Code Name Base to be `org.word.editor.api`, as shown
below:
-image::images/nbm-quick-start/new-api-3.png[]
+image::images/quickstart-platform_73_new-api-3.png[]
Click btn:[Finish] to complete the wizard, which adds the module to your
previously created application, just as in the previous section:
-image::images//nbm-quick-start/new-api-4.png[]
+image::images/quickstart-platform_73_new-api-4.png[]
Having created the module, the next activity is to add an Interface to it.
@@ -274,15 +274,15 @@ Having created the module, the next activity is to add an
Interface to it.
[start=2]
1. Right-click the "WordEditorAPI" module and choose New | Java Interface.
-image::images//nbm-quick-start/new-api-5.png[]
+image::images/quickstart-platform_73_new-api-5.png[]
Name the Java interface `WordFilter`, in the package `org.word.editor.api`:
-image::images/nbm-quick-start/new-api-6.png[]
+image::images/quickstart-platform_73_new-api-6.png[]
Click btn:[Finish] to complete the wizard, which adds the interface to your
module.
-image::images/nbm-quick-start/new-api-7.png[]
+image::images/quickstart-platform_73_new-api-7.png[]
[start=3]
1. The WordFilter.java interface should be open. Use the editor to define it
as follows:
@@ -304,11 +304,11 @@ public interface WordFilter {
[start=4]
1. Right-click the "WordEditorAPI" module, choose Properties to open the
Project Properties window.
-image::images/nbm-quick-start/new-api-8.png[]
+image::images/quickstart-platform_73_new-api-8.png[]
Select the "API Versioning" category, and check the box under "Public
Packages" to specify that the package containing the interface should be
available throughout the application:
-image::images/nbm-quick-start/new-api-9.png[]
+image::images/quickstart-platform_73_new-api-9.png[]
Click btn:[OK].
@@ -348,42 +348,42 @@ In this section you implement the API that you just
defined, again using a separ
[start=1]
1. In the Projects window, right-click the Modules node of the application,
and choose "Add New" again:
-image::images/nbm-quick-start/new-impl-1.png[]
+image::images/quickstart-platform_73_new-impl-1.png[]
Name the new module "UppercaseFilter":
-image::images/nbm-quick-start/new-impl-2.png[]
+image::images/quickstart-platform_73_new-impl-2.png[]
Click btn:[Next]. Set the Code Name Base to `org.word.editor.uppercase`, as
shown below:
-image::images/nbm-quick-start/new-impl-3.png[]
+image::images/quickstart-platform_73_new-impl-3.png[]
Click btn:[Finish] to complete the wizard, which adds the module to your
previously created application, as you did in the previous section:
-image::images/nbm-quick-start/new-impl-4.png[]
+image::images/quickstart-platform_73_new-impl-4.png[]
[start=2]
1. Right-click the Libraries node of the "UppercaseFilter" module, and choose
Add Module Dependency, as shown below:
-image::images/nbm-quick-start/new-impl-5.png[]
+image::images/quickstart-platform_73_new-impl-5.png[]
Start typing the name of the API class (WordEditorAPI) and notice that the
list narrows until the module containing the class is found:
-image::images/nbm-quick-start/new-impl-6.png[]
+image::images/quickstart-platform_73_new-impl-6.png[]
Click btn:[OK].
A confirmation dialog will appear:
-image::images/nbm-quick-start/new-impl-7.png[]
+image::images/quickstart-platform_73_new-impl-7.png[]
Click btn:[Yes] to add the dependency.
In the Projects window, expand "Libraries" in the "UppercaseFilter" project to
see that the "WordEditorAPI" dependency has been added:
-image::images/nbm-quick-start/new-impl-8.png[]
+image::images/quickstart-platform_73_new-impl-8.png[]
As another way to see this, in the Projects window, expand "Important Files"
in the "UppercaseFilter" project, and then double-click "Project Metadata". The
"project.xml" file opens and you should see that a new dependency has been
declared:
@@ -421,11 +421,11 @@ As another way to see this, in the Projects window,
expand "Important Files" in
[start=4]
1. You can now implement the interface defined in the WordEditorAPI module. In
the "UppercaseFilter" module create a new class in the
`org.word.editor.uppercase` package, as shown below.
-image::images/nbm-quick-start/new-impl-9.png[]
+image::images/quickstart-platform_73_new-impl-9.png[]
Name the new class `UppercaseFilter`:
-image::images/nbm-quick-start/new-impl-10.png[]
+image::images/quickstart-platform_73_new-impl-10.png[]
Click btn:[Finish] to exit the wizard and create the file. It should open
automatically for editing.
@@ -456,15 +456,15 @@ Now we need to update the WordEditorCore module so that
all implementations of t
[start=5]
1. In the Projects tree, expand the WordEditorCore module to locate the
Libraries node. Right click and select "Add Modules Dependency...".
-image::images/nbm-quick-start/new-impl-11.png[]
+image::images/quickstart-platform_73_new-impl-11.png[]
Add the WordEditorAPI dependency:
-image::images/nbm-quick-start/new-impl-12.png[]
+image::images/quickstart-platform_73_new-impl-12.png[]
Expand the Libraries entries to verify the dependency as been added:
-image::images/nbm-quick-start/new-impl-13.png[]
+image::images/quickstart-platform_73_ew-impl-13.png[]
[start=6]
6. Now we can modify the `WordTopComponent.java` implementation to load
implementations of the "WordFilter" interface. Replace the previous
implementation (which was hard-coded to just upper-case text) with the
following:
@@ -510,11 +510,11 @@ In this section, you run the application again.
[start=1]
1. Now you can run the application again and check that everything works just
as before.
-image::images/nbm-quick-start/new-impl-14.png[]
+image::images/quickstart-platform_73_new-impl-14.png[]
While the functionality is the same, the new modular design offers a clear
separation between the GUI and the implementation of the filter. The structure
of the application should be as shown below:
-image::images/nbm-quick-start/new-impl-15.png[]
+image::images/quickstart-platform_73_new-impl-15.png[]
[start=2]
@@ -587,11 +587,11 @@ In this section, you create a new module, with a new
window. In the new window,
[start=2]
1. In the WordHistory module, right-click the `org.word.editor.history`
package and choose New | Window. Use the New Window wizard to create a new
window component that will automatically be opened on the left side of the
application frame, which is the `explorer` position:
-image::images/nbm-quick-start/new-history-1.png[]
+image::images/quickstart-platform_73_new-history-1.png[]
Click btn:[Next]. Use prefix `WordHistory` and specify that the new window
will be stored in the `org.word.editor.history` package.
-image::images/nbm-quick-start/new-history-2.png[]
+image::images/quickstart-platform_73_new-history-2.png[]
Click btn:[Finish] to complete the wizard and create the Window.
@@ -599,7 +599,7 @@ Click btn:[Finish] to complete the wizard and create the
Window.
1. Once you have created the window, add a Text Area (`JTextArea`) to it,
resizing it so that it covers the whole area of the window:
-image::images/nbm-quick-start/new-history-3.png[]
+image::images/quickstart-platform_73_new-history-3.png[]
Change the variable name of the text area to "historyText".
@@ -643,14 +643,14 @@ public final class WordHistoryTopComponent extends
TopComponent implements Looku
1. Then you can start the application and experiment with it. The result
should look similar to that shown in the screenshot below:
-image::images/nbm-quick-start/new-result-1.png[]
+image::images/quickstart-platform_73_new-result-1.png[]
As an exercise, redesign the user interface of the "WordTopComponent" in such
a way that a ``JList`` displays the filters.
Congratulations! At this stage, with very little coding, you have created a
small example of a loosely-coupled modular application:
-image::images/nbm-quick-start/new-result-2.png[]
+image::images/quickstart-platform_73_new-result-2.png[]
Two important concepts have been covered in this tutorial.
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists
