Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce image sizes in NB Platform Quickstart tutorial #649

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Reduce image sizes in NB Platform Quickstart tutorial #649

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6cfef0
Reduce image sizes
Mar 11, 2023
ba8492c
no message
Mar 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 48 additions & 48 deletions netbeans.apache.org/src/content/tutorials/nbm-quick-start.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/quickstart_platform_new-project-1.png[]
image::images/quickstart_platform_new-project-1.png[width=600]

The difference between the 4 templates above is as follows:

Expand All @@ -90,12 +90,12 @@ Click btn:[Next].
1. Name your new application `WordProcessor` and specify a folder on disk for storing it:


image::images/quickstart_platform_new-project-2.png[]
image::images/quickstart_platform_new-project-2.png[width=600]

Click btn:[Finish]. The new project appears as follows in the Projects window:


image::images/quickstart_platform_new-project-3.png[]
image::images/quickstart_platform_new-project-3.png[width=250]


=== Create the Module
Expand All @@ -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/quickstart_platform_new-module-1.png[]
image::images/quickstart_platform_new-module-1.png[width=250]

The New Module Project dialog will appear.
Name the new module `WordEditorCore`:


image::images/quickstart_platform_new-module-2.png[]
image::images/quickstart_platform_new-module-2.png[width=600]

Click btn:[Next].

Expand All @@ -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/quickstart_platform_new-module-3.png[]
image::images/quickstart_platform_new-module-3.png[width=600]

Click btn:[Finish]. The new module is created and its structure is shown in the Projects window:


image::images/quickstart_platform_new-module-4.png[]
image::images/quickstart_platform_new-module-4.png[width=250]


=== Create the Window
Expand All @@ -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/quickstart_platform_new-window-1.png[]
image::images/quickstart_platform_new-window-1.png[width=250]

The New File dialog appears. In the Module Development category, select "Window":

image::images/quickstart_platform_new-window-2.png[]
image::images/quickstart_platform_new-window-2.png[width=600]

Click btn:[Next].

Expand All @@ -152,34 +152,34 @@ Click btn:[Next].

Set the Window Position to be `editor`, which is the default central position within the application frame, and select "Open on Application Start".

image::images/quickstart_platform_new-window-3.png[]
image::images/quickstart_platform_new-window-3.png[width=600]

Then click btn:[Next].

[start=3]
1. Set the class name prefix to `Word` and the package to `org.word.editor.core`:

image::images/quickstart_platform_new-window-4.png[]
image::images/quickstart_platform_new-window-4.png[width=600]

Click btn:[Finish]. The new window ("WordTopComponent.java") is added to the source structure of your module:

image::images/quickstart_platform_new-window-5.png[]
image::images/quickstart_platform_new-window-5.png[width=250]

[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.

image::images/quickstart_platform_new-window-6.png[]
image::images/quickstart_platform_new-window-6.png[width=600]

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/quickstart_platform_new-window-7.png[]
image::images/quickstart_platform_new-window-7.png[width=600]

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/quickstart_platform_new-window-7.png[]
image::images/quickstart_platform_new-window-7.png[width=600]

[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:
Expand All @@ -206,22 +206,22 @@ In this section, you deploy the application.
[start=1]
1. Right-click the WordProcessor application (not the WordEditorCore module) and choose Run.

image::images/quickstart_platform_new-app-1.png[]
image::images/quickstart_platform_new-app-1.png[width=250]

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/quickstart_platform_new-app-2.png[]
image::images/quickstart_platform_new-app-2.png[width=600]


[start=2]
1. Enter a text in lowercase in the text area, and click "Filter!".

image::images/quickstart_platform_new-app-3.png[]
image::images/quickstart_platform_new-app-3.png[width=600]

You should see that the text is now shown in uppercase:

image::images/quickstart_platform_new-app-4.png[]
image::images/quickstart_platform_new-app-4.png[width=600]

You have learned how to create a new Apache NetBeans Platform application and how to add new modules to it. In the next section, you will be introduced to the Apache NetBeans Platform's pluggable service infrastructure.

Expand Down Expand Up @@ -251,38 +251,38 @@ 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/quickstart_platform_new-api-1.png[]
image::images/quickstart_platform_new-api-1.png[width=250]

The New Module Project dialog appears. Set the Project Name for the new module to be "WordEditorAPI":


image::images/quickstart_platform_new-api-2.png[]
image::images/quickstart_platform_new-api-2.png[width=600]

Click btn:[Next]. Set the Code Name Base to be `org.word.editor.api`, as shown below:


image::images/quickstart_platform_new-api-3.png[]
image::images/quickstart_platform_new-api-3.png[width=600]

Click btn:[Finish] to complete the wizard, which adds the module to your previously created application, just as in the previous section:


image::images/quickstart_platform_new-api-4.png[]
image::images/quickstart_platform_new-api-4.png[width=250]


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/quickstart_platform_new-api-5.png[]
image::images/quickstart_platform_new-api-5.png[width=250]

Name the Java interface `WordFilter`, in the package `org.word.editor.api`:

image::images/quickstart_platform_new-api-6.png[]

Click btn:[Finish] to complete the wizard, which adds the interface to your module.

image::images/quickstart_platform_new-api-7.png[]
image::images/quickstart_platform_new-api-7.png[width=250]

[start=3]
1. The WordFilter.java interface should be open. Use the editor to define it as follows:
Expand All @@ -304,18 +304,18 @@ public interface WordFilter {
[start=4]
1. Right-click the "WordEditorAPI" module, choose Properties to open the Project Properties window.

image::images/quickstart_platform_new-api-8.png[]
image::images/quickstart_platform_new-api-8.png[width=250]

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/quickstart_platform_new-api-9.png[]
image::images/quickstart_platform_new-api-9.png[width=600]


Click btn:[OK].

As another way to see this, in the Projects window, expand "Important Files" in the "WordEditorAPI" project and then double-click "Project Metadata".

image::images/quickstart_platform_new-api-10.png[]
image::images/quickstart_platform_new-api-10.png[width=250]

The "project.xml" file opens and you should see that the package has now been declared public:

Expand Down Expand Up @@ -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/quickstart_platform_new-impl-1.png[]
image::images/quickstart_platform_new-impl-1.png[width=250]

Name the new module "UppercaseFilter":

image::images/quickstart_platform_new-impl-2.png[]
image::images/quickstart_platform_new-impl-2.png[width=600]

Click btn:[Next]. Set the Code Name Base to `org.word.editor.uppercase`, as shown below:

image::images/quickstart_platform_new-impl-3.png[]
image::images/quickstart_platform_new-impl-3.png[width=600]

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/quickstart_platform_new-impl-4.png[]
image::images/quickstart_platform_new-impl-4.png[width=250]


[start=2]
1. Right-click the Libraries node of the "UppercaseFilter" module, and choose Add Module Dependency, as shown below:

image::images/quickstart_platform_new-impl-5.png[]
image::images/quickstart_platform_new-impl-5.png[width=250]

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/quickstart_platform_new-impl-6.png[]
image::images/quickstart_platform_new-impl-6.png[width=600]

Click btn:[OK].

A confirmation dialog will appear:

image::images/quickstart_platform_new-impl-7.png[]
image::images/quickstart_platform_new-impl-7.png[width=600]

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/quickstart_platform_new-impl-8.png[]
image::images/quickstart_platform_new-impl-8.png[width=250]

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:

Expand Down Expand Up @@ -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/quickstart_platform_new-impl-9.png[]
image::images/quickstart_platform_new-impl-9.png[width=250]

Name the new class `UppercaseFilter`:

image::images/quickstart_platform_new-impl-10.png[]
image::images/quickstart_platform_new-impl-10.png[width=600]

Click btn:[Finish] to exit the wizard and create the file. It should open automatically for editing.

Expand Down Expand Up @@ -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/quickstart_platform_new-impl-11.png[]
image::images/quickstart_platform_new-impl-11.png[width=250]

Add the WordEditorAPI dependency:

image::images/quickstart_platform_new-impl-12.png[]
image::images/quickstart_platform_new-impl-12.png[width=600]

Expand the Libraries entries to verify the dependency as been added:

image::images/quickstart_platform_new-impl-13.png[]
image::images/quickstart_platform_new-impl-13.png[width=250]

[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:
Expand Down Expand Up @@ -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/quickstart_platform_new-impl-14.png[]
image::images/quickstart_platform_new-impl-14.png[width=250]

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/quickstart_platform_new-impl-15.png[]
image::images/quickstart_platform_new-impl-15.png[width=250]


[start=2]
Expand Down Expand Up @@ -587,19 +587,19 @@ 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/quickstart_platform_new-history-1.png[]
image::images/quickstart_platform_new-history-1.png[width=600]

Click btn:[Next]. Use prefix `WordHistory` and specify that the new window will be stored in the `org.word.editor.history` package.

image::images/quickstart_platform_new-history-2.png[]
image::images/quickstart_platform_new-history-2.png[width=600]

Click btn:[Finish] to complete the wizard and create the Window.

[start=3]
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/quickstart_platform_new-history-3.png[]
image::images/quickstart_platform_new-history-3.png[width=600]

Change the variable name of the text area to "historyText".

Expand Down Expand Up @@ -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/quickstart_platform_new-result-1.png[]
image::images/quickstart_platform_new-result-1.png[width=600]

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/quickstart_platform_new-result-2.png[]
image::images/quickstart_platform_new-result-2.png[width=250]

Two important concepts have been covered in this tutorial.

Expand Down