-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #421 from webforj/archetypes
feat: add archetype documentation
- Loading branch information
Showing
12 changed files
with
386 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "label": "Archetypes", | ||
| "position": 0, | ||
| "link": { | ||
| "type": "doc", | ||
| "id": "overview" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| --- | ||
| title: Blank | ||
| sidebar_position: 1 | ||
| --- | ||
|
|
||
| # Blank archetype | ||
|
|
||
| The `blank` archetype is a foundational starter project for webforJ applications. This template provides a clean slate for you to build your app from scratch. It's ideal for developers who want complete control over the structure and components of their app without any predefined constraints. | ||
|
|
||
| ## Using the `blank` archetype | ||
|
|
||
| To create and scaffold a new `blank` project, follow these steps: | ||
|
|
||
| 1) **Navigate to the proper directory**: | ||
| Open a terminal and move to the folder where you want to create your new project. | ||
|
|
||
| 2) **Run the `archetype:generate` command**: | ||
| Use the Maven command below, and customize the `groupId`, `artifactId`, and `version` as needed for your project. | ||
|
|
||
| <!-- vale off --> | ||
| <Tabs> | ||
| <TabItem value="bash" label="Bash/Zsh" default> | ||
| ```bash | ||
| mvn -B archetype:generate \ | ||
| -DarchetypeGroupId=com.webforj \ | ||
| -DarchetypeArtifactId=webforj-archetype-blank \ | ||
| -DgroupId=org.example \ | ||
| -DarchetypeVersion=LATEST \ | ||
| -DartifactId=my-app \ | ||
| -Dversion=1.0-SNAPSHOT | ||
| ``` | ||
| </TabItem> | ||
| <TabItem value="powershell" label="PowerShell"> | ||
| ```powershell | ||
| mvn -B archetype:generate ` | ||
| -DarchetypeGroupId="com.webforj" ` | ||
| -DarchetypeArtifactId="webforj-archetype-blank" ` | ||
| -DarchetypeVersion="LATEST" ` | ||
| -DgroupId="org.example" ` | ||
| -DartifactId="my-app" ` | ||
| -Dversion="1.0-SNAPSHOT" | ||
| ``` | ||
| </TabItem> | ||
| <TabItem value="cmd" label="Command Prompt"> | ||
| ``` | ||
| mvn -B archetype:generate ^ | ||
| -DarchetypeGroupId=com.webforj ^ | ||
| -DarchetypeArtifactId=webforj-archetype-blank ^ | ||
| -DgroupId=org.example ^ | ||
| -DarchetypeVersion=LATEST ^ | ||
| -DartifactId=my-app ^ | ||
| -Dversion=1.0-SNAPSHOT | ||
| ``` | ||
| </TabItem> | ||
| </Tabs> | ||
| <!-- vale on --> | ||
|
|
||
| | Argument | Explanation | | ||
| |----------------------|-----------------------------------------------------------------------------| | ||
| | `archetypeGroupId` | The group ID of the archetype is `com.webforj` for webforJ archetypes.| | ||
| | `archetypeArtifactId` | Specifies the name of the archetype to use. | | ||
| | `archetypeVersion` | Specifies the version of the archetype to use. This ensures that the generated project is compatible with a specific archetype version. Using LATEST selects the most recent version available.| | ||
| | `groupId` | Represents the namespace for the generated project. Typically structured like a Java package, such as `org.example` and is used to uniquely identify your organization or project domain.| | ||
| | `artifactId` | Specifies the name of the generated project. This will be the name of the resulting artifact and the project folder.| | ||
| | `version` | Defines the version of the generated project. A common convention is MAJOR.MINOR-SNAPSHOT, like `1.0-SNAPSHOT`, where SNAPSHOT denotes that the project is still in development.| | ||
|
|
||
|
|
||
| After running the command, Maven will generate the project files necessary to run the project. | ||
|
|
||
| ### Run the app | ||
|
|
||
| Navigate into the newly created directory, and run the following command from the project’s root directory: | ||
|
|
||
| ```bash | ||
| mvn jetty:run | ||
| ``` | ||
|
|
||
| This command uses the Jetty maven plugin to start a Jetty server. Once the server is running, open your browser and go to [http://localhost:8080](http://localhost:8080) to view the app. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| --- | ||
| title: HelloWorld | ||
| sidebar_position: 4 | ||
| --- | ||
|
|
||
| <!-- vale off --> | ||
| # HelloWorld archetype | ||
| <!-- vale on --> | ||
|
|
||
| This archetype creates a simple hello world app to demonstrate the basics of building a UI with webforJ. This template is great for beginners to get started quickly. It provides a straightforward example of how to set up and run a basic webforJ app, making it an excellent starting point for new developers. | ||
|
|
||
| :::tip Starting from scratch | ||
| This archetype creates a minimalistic app with a few components and some styling. For developers wishing to create a project with minimal scaffolding, see the [`blank` archetype](./blank). | ||
| ::: | ||
|
|
||
| ## Using the `hello-world` archetype | ||
|
|
||
| To create and scaffold a new `hello-world` project, follow these steps: | ||
|
|
||
| 1) **Navigate to the proper directory**: | ||
| Open a terminal and move to the folder where you want to create your new project. | ||
|
|
||
| 2) **Run the `archetype:generate` command**: | ||
| Use the Maven command below, and customize the `groupId`, `artifactId`, and `version` as needed for your project. | ||
|
|
||
| <!-- vale off --> | ||
| <Tabs> | ||
| <TabItem value="bash" label="Bash/Zsh" default> | ||
| ```bash | ||
| mvn -B archetype:generate \ | ||
| -DarchetypeGroupId=com.webforj \ | ||
| -DarchetypeArtifactId=webforj-archetype-hello-world \ | ||
| -DgroupId=org.example \ | ||
| -DarchetypeVersion=LATEST \ | ||
| -DartifactId=my-app \ | ||
| -Dversion=1.0-SNAPSHOT | ||
| ``` | ||
| </TabItem> | ||
| <TabItem value="powershell" label="PowerShell"> | ||
| ```powershell | ||
| mvn -B archetype:generate ` | ||
| -DarchetypeGroupId="com.webforj" ` | ||
| -DarchetypeArtifactId="webforj-archetype-hello-world" ` | ||
| -DarchetypeVersion="LATEST" ` | ||
| -DgroupId="org.example" ` | ||
| -DartifactId="my-app" ` | ||
| -Dversion="1.0-SNAPSHOT" | ||
| ``` | ||
| </TabItem> | ||
| <TabItem value="cmd" label="Command Prompt"> | ||
| ``` | ||
| mvn -B archetype:generate ^ | ||
| -DarchetypeGroupId=com.webforj ^ | ||
| -DarchetypeArtifactId=webforj-archetype-hello-world ^ | ||
| -DgroupId=org.example ^ | ||
| -DarchetypeVersion=LATEST ^ | ||
| -DartifactId=my-app ^ | ||
| -Dversion=1.0-SNAPSHOT | ||
| ``` | ||
| </TabItem> | ||
| </Tabs> | ||
| <!-- vale on --> | ||
|
|
||
| | Argument | Explanation | | ||
| |----------------------|-----------------------------------------------------------------------------| | ||
| | `archetypeGroupId` | The group ID of the archetype is `com.webforj` for webforJ archetypes.| | ||
| | `archetypeArtifactId` | Specifies the name of the archetype to use. | | ||
| | `archetypeVersion` | Specifies the version of the archetype to use. This ensures that the generated project is compatible with a specific archetype version. Using LATEST selects the most recent version available.| | ||
| | `groupId` | Represents the namespace for the generated project. Typically structured like a Java package, such as `org.example` and is used to uniquely identify your organization or project domain.| | ||
| | `artifactId` | Specifies the name of the generated project. This will be the name of the resulting artifact and the project folder.| | ||
| | `version` | Defines the version of the generated project. A common convention is MAJOR.MINOR-SNAPSHOT, like `1.0-SNAPSHOT`, where SNAPSHOT denotes that the project is still in development.| | ||
|
|
||
| After running the command, Maven will generate the project files necessary to run the project. | ||
|
|
||
| ### Run the app | ||
|
|
||
| Navigate into the newly created directory, and run the following command from the project’s root directory: | ||
|
|
||
| ```bash | ||
| mvn jetty:run | ||
| ``` | ||
|
|
||
| This command uses the Jetty maven plugin to start a Jetty server. Once the server is running, open your browser and go to [http://localhost:8080](http://localhost:8080) to view the app. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| --- | ||
| sidebar_position: 0 | ||
| title: Archetypes | ||
| hide_table_of_contents: true | ||
| --- | ||
|
|
||
| <Head> | ||
| <style>{` | ||
| .container { | ||
| max-width: 65em !important; | ||
| } | ||
| `}</style> | ||
| </Head> | ||
|
|
||
| <!-- vale off --> | ||
|
|
||
| import GalleryCard from '@site/src/components/GalleryCard/GalleryCard'; | ||
| import GalleryGrid from '@site/src/components/GalleryGrid/GalleryGrid'; | ||
|
|
||
| <!-- vale on --> | ||
|
|
||
| To kickstart your webforJ app development, webforJ provides several predefined templates, or **archetypes**, to help you start your app quickly. These archetypes are designed to give you a solid foundation, allowing you to focus on building your app's features without worrying about the initial setup. | ||
|
|
||
| Choose a template that best fits your project's needs, copy the command, and paste it into your terminal to scaffold your project. Each archetype comes with its own set of features and configurations to help you get started efficiently. | ||
|
|
||
| <GalleryGrid> | ||
| <GalleryCard header="Blank" href="blank" image="/img/archetypes/blank.png" effect="none"> | ||
| <p>A blank starter project for webforJ applications. This template provides a clean slate for you to build your app from scratch.</p> | ||
| </GalleryCard> | ||
|
|
||
| <GalleryCard header="Tabs" href="tabs" image="/img/archetypes/tabs.png" effect="none"> | ||
| <p>A project with a simple tabbed interface. Ideal for applications that require multiple views or sections accessible via tabs.</p> | ||
| </GalleryCard> | ||
|
|
||
| <GalleryCard header="SideMenu" href="sidemenu" image="/img/archetypes/sidemenu.png" effect="none"> | ||
| <p>A simple app with a side menu and navigation in the content area. Perfect for applications that need a structured navigation system.</p> | ||
| </GalleryCard> | ||
|
|
||
| <GalleryCard header="HelloWorld" href="hello-world" image="/img/archetypes/hello-world.png" effect="none"> | ||
| <p>The hello world project demonstrates the basics of building a UI with webforJ. This template is great for beginners to get started quickly.</p> | ||
| <div hidden> | ||
| <p>Dialog content for HelloWorld project.</p> | ||
| </div> | ||
| </GalleryCard> | ||
| </GalleryGrid> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| --- | ||
| title: SideMenu | ||
| sidebar_position: 3 | ||
| --- | ||
| <!-- vale off --> | ||
| # SideMenu archetype | ||
| <!-- vale on --> | ||
|
|
||
| For projects that need a structured navigation system, the `sidemenu` archetype is a great starting place. This archetype contains a side menu and a content area, and is designed to help you create apps with a clear and intuitive navigation structure, making it easier for users to find and access different parts of your app. | ||
|
|
||
| ## Using the `sidemenu` archetype | ||
|
|
||
| To create and scaffold a new `sidemenu` project, follow these steps: | ||
|
|
||
| 1) **Navigate to the proper directory**: | ||
| Open a terminal and move to the folder where you want to create your new project. | ||
|
|
||
| 2) **Run the `archetype:generate` command**: | ||
| Use the Maven command below, and customize the `groupId`, `artifactId`, and `version` as needed for your project. | ||
|
|
||
| <!-- vale off --> | ||
| <Tabs> | ||
| <TabItem value="bash" label="Bash/Zsh" default> | ||
| ```bash | ||
| mvn -B archetype:generate \ | ||
| -DarchetypeGroupId=com.webforj \ | ||
| -DarchetypeArtifactId=webforj-archetype-sidemenu \ | ||
| -DgroupId=org.example \ | ||
| -DarchetypeVersion=LATEST \ | ||
| -DartifactId=my-app \ | ||
| -Dversion=1.0-SNAPSHOT | ||
| ``` | ||
| </TabItem> | ||
| <TabItem value="powershell" label="PowerShell"> | ||
| ```powershell | ||
| mvn -B archetype:generate ` | ||
| -DarchetypeGroupId="com.webforj" ` | ||
| -DarchetypeArtifactId="webforj-archetype-sidemenu" ` | ||
| -DarchetypeVersion="LATEST" ` | ||
| -DgroupId="org.example" ` | ||
| -DartifactId="my-app" ` | ||
| -Dversion="1.0-SNAPSHOT" | ||
| ``` | ||
| </TabItem> | ||
| <TabItem value="cmd" label="Command Prompt"> | ||
| ``` | ||
| mvn -B archetype:generate ^ | ||
| -DarchetypeGroupId=com.webforj ^ | ||
| -DarchetypeArtifactId=webforj-archetype-sidemenu ^ | ||
| -DgroupId=org.example ^ | ||
| -DarchetypeVersion=LATEST ^ | ||
| -DartifactId=my-app ^ | ||
| -Dversion=1.0-SNAPSHOT | ||
| ``` | ||
| </TabItem> | ||
| </Tabs> | ||
| <!-- vale on --> | ||
|
|
||
| | Argument | Explanation | | ||
| |----------------------|-----------------------------------------------------------------------------| | ||
| | `archetypeGroupId` | The group ID of the archetype is `com.webforj` for webforJ archetypes.| | ||
| | `archetypeArtifactId` | Specifies the name of the archetype to use. | | ||
| | `archetypeVersion` | Specifies the version of the archetype to use. This ensures that the generated project is compatible with a specific archetype version. Using LATEST selects the most recent version available.| | ||
| | `groupId` | Represents the namespace for the generated project. Typically structured like a Java package, such as `org.example` and is used to uniquely identify your organization or project domain.| | ||
| | `artifactId` | Specifies the name of the generated project. This will be the name of the resulting artifact and the project folder.| | ||
| | `version` | Defines the version of the generated project. A common convention is MAJOR.MINOR-SNAPSHOT, like `1.0-SNAPSHOT`, where SNAPSHOT denotes that the project is still in development.| | ||
|
|
||
| After running the command, Maven will generate the project files necessary to run the project. | ||
|
|
||
| ### Run the app | ||
|
|
||
| Navigate into the newly created directory, and run the following command from the project’s root directory: | ||
|
|
||
| ```bash | ||
| mvn jetty:run | ||
| ``` | ||
|
|
||
| This command uses the Jetty maven plugin to start a Jetty server. Once the server is running, open your browser and go to [http://localhost:8080](http://localhost:8080) to view the app. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| --- | ||
| title: Tabs | ||
| sidebar_position: 2 | ||
| --- | ||
|
|
||
| # Tabs archetype | ||
|
|
||
| The `tabs` starting project generates an app with a simple tabbed interface. Ideal for projects that require multiple views or sections accessible via tabs, this archetype provides a clean and organized way to manage different parts of your app, making it easy to navigate between various sections without cluttering the user interface. | ||
|
|
||
| ## Using the `tabs` archetype | ||
|
|
||
| To create and scaffold a new `tabs` project, follow these steps: | ||
|
|
||
| 1) **Navigate to the proper directory**: | ||
| Open a terminal and move to the folder where you want to create your new project. | ||
|
|
||
| 2) **Run the `archetype:generate` command**: | ||
| Use the Maven command below, and customize the `groupId`, `artifactId`, and `version` as needed for your project. | ||
|
|
||
| <!-- vale off --> | ||
| <Tabs> | ||
| <TabItem value="bash" label="Bash/Zsh" default> | ||
| ```bash | ||
| mvn -B archetype:generate \ | ||
| -DarchetypeGroupId=com.webforj \ | ||
| -DarchetypeArtifactId=webforj-archetype-tabs \ | ||
| -DgroupId=org.example \ | ||
| -DarchetypeVersion=LATEST \ | ||
| -DartifactId=my-app \ | ||
| -Dversion=1.0-SNAPSHOT | ||
| ``` | ||
| </TabItem> | ||
| <TabItem value="powershell" label="PowerShell"> | ||
| ```powershell | ||
| mvn -B archetype:generate ` | ||
| -DarchetypeGroupId="com.webforj" ` | ||
| -DarchetypeArtifactId="webforj-archetype-tabs" ` | ||
| -DarchetypeVersion="LATEST" ` | ||
| -DgroupId="org.example" ` | ||
| -DartifactId="my-app" ` | ||
| -Dversion="1.0-SNAPSHOT" | ||
| ``` | ||
| </TabItem> | ||
| <TabItem value="cmd" label="Command Prompt"> | ||
| ``` | ||
| mvn -B archetype:generate ^ | ||
| -DarchetypeGroupId=com.webforj ^ | ||
| -DarchetypeArtifactId=webforj-archetype-tabs ^ | ||
| -DgroupId=org.example ^ | ||
| -DarchetypeVersion=LATEST ^ | ||
| -DartifactId=my-app ^ | ||
| -Dversion=1.0-SNAPSHOT | ||
| ``` | ||
| </TabItem> | ||
| </Tabs> | ||
| <!-- vale on --> | ||
|
|
||
| | Argument | Explanation | | ||
| |----------------------|-----------------------------------------------------------------------------| | ||
| | `archetypeGroupId` | The group ID of the archetype is `com.webforj` for webforJ archetypes.| | ||
| | `archetypeArtifactId` | Specifies the name of the archetype to use. | | ||
| | `archetypeVersion` | Specifies the version of the archetype to use. This ensures that the generated project is compatible with a specific archetype version. Using LATEST selects the most recent version available.| | ||
| | `groupId` | Represents the namespace for the generated project. Typically structured like a Java package, such as `org.example` and is used to uniquely identify your organization or project domain.| | ||
| | `artifactId` | Specifies the name of the generated project. This will be the name of the resulting artifact and the project folder.| | ||
| | `version` | Defines the version of the generated project. A common convention is MAJOR.MINOR-SNAPSHOT, like `1.0-SNAPSHOT`, where SNAPSHOT denotes that the project is still in development.| | ||
|
|
||
| After running the command, Maven will generate the project files necessary to run the project. | ||
|
|
||
| ### Run the app | ||
|
|
||
| Navigate into the newly created directory, and run the following command from the project’s root directory: | ||
|
|
||
| ```bash | ||
| mvn jetty:run | ||
| ``` | ||
|
|
||
| This command uses the Jetty maven plugin to start a Jetty server. Once the server is running, open your browser and go to [http://localhost:8080](http://localhost:8080) to view the app. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.