Updated tutorial docs for spring integration.

docs/docs/introduction/tutorial/creating-a-basic-app.md

@@ -3,185 +3,127 @@ title: Creating a Basic App
 sidebar_position: 2
 ---
 
-This first step lays the foundation for the customer management app by creating a simple, interactive interface. This demonstrates how to set up a basic webforJ app, with a single button that opens a dialog when clicked. It’s a straightforward implementation that introduces key components and gives you a feel for how webforJ works.
 
-This step leverages the base app class provided by webforJ to define the structure and behavior of the app. Following through to later steps will transition to a more advanced setup using routing to manage multiple screens, introduced in [Scaling with Routing and Composites](./scaling-with-routing-and-composites).
+This first step lays the foundation for your customer management app by creating a simple, interactive interface using webforJ with Spring Boot. You’ll set up a minimal Spring Boot project, define your main app class, and build a UI with a button and dialog. This straightforward implementation introduces key components and gives you a feel for how webforJ works.
 
-By the end of this step, you’ll have a functioning app that demonstrates basic interaction with components and event handling in webforJ. To run the app:
+**Note:** this step uses a single `Application` class that directly hosts the UI content. Routing and separate view classes will be introduced in later steps.
 
-- Go to the `1-creating-a-basic-app` directory
-- Run the `mvn jetty:run` command
+By the end of this step, you’ll have a running app that demonstrates basic interaction and is ready for further extension.
 
-<div class="videos-container">
-  <video controls>
-    <source src="https://cdn.webforj.com/webforj-documentation/video/tutorials/creating-a-basic-app.mp4" type="video/mp4"/>
-  </video>
-</div>
+---
 
-## Creating a webforJ app {#creating-a-webforj-app}
+## Prerequisites
 
-In webforJ, an `App` represents the central hub for defining and managing your project. Every webforJ app starts by creating one class that extends the foundational `App` class, which serves as the core framework to:
+- Java 17 or 21
+- Maven
+- A Java IDE (e.g., IntelliJ IDEA, Eclipse, VSCode)
+- Web browser
 
-- Manage the app lifecycle, including initialization and termination.
-- Handle routing and navigation if enabled.
-- Define the app’s theme, locale, and other overall configurations.
-- Provide essential utilities for interacting with the environment and components.
+---
 
-### Extending the `App` class {#extending-the-app-class}
+## 1. Project setup
 
-For this step, a class called `DemoApplication.java` is created, and extends the `App` class.
+You can create your project using [startforJ](https://docs.webforj.com/startforj) (choose the “webforJ + Spring Boot” flavor) or with the Maven archetype:
 
-```java title="DemoApplication.java"
-public class DemoApplication extends App {
-  @Override
-  public void run() {
-    // Core app logic will go here
-  }
-}
+```bash
+mvn -B archetype:generate \
+  -DarchetypeGroupId=com.webforj \
+  -DarchetypeArtifactId=webforj-archetype-hello-world \
+  -DarchetypeVersion=LATEST \
+  -DgroupId=org.example \
+  -DartifactId=my-app \
+  -Dversion=1.0-SNAPSHOT \
+  -Dflavor=webforj-spring
 ```
 
-:::tip Key Configuration Properties
+---
 
-In this demo app, the `webforj.conf` file is configured with the following two essential properties:
+## 2. Main app class
 
-- **`webforj.entry`**: Specifies the fully qualified name of the class extending `App` that acts as the main entry point for your project. For this tutorial, set it to `com.webforj.demos.DemoApplication` to avoid ambiguity during initialization.
-  ```hocon
-  webforj.entry = com.webforj.demos.DemoApplication
-  ```
-- **`webforj.debug`**: Enables debug mode for detailed logs and error visibility during development. Make sure this is set to `true` while working on this tutorial:
-  ```hocon
-  webforj.debug = true
-  ```
+Create a class called `Application.java` that extends `App` and is annotated for Spring Boot and webforJ:
 
-For more details on additional configuration options, see the [Configuration Guide](../../configuration/overview).
-:::
+The `@SpringBootApplication` annotation marks this class as the main entry point for a Spring Boot app. It enables auto-configuration, component scanning, and allows Spring Boot to start your app with an embedded server. This means you don't need extra configuration to get your app running. Spring Boot handles it for you.
 
-### Overriding the `run()` method {#overriding-the-run-method}
+The `@StyleSheet` annotation loads the style sheet, in this case provided by the [webserver-protocol](../../managing-resources/assets-protocols#the-webserver-protocol).
 
-After ensuring correct configuration for the project, the `run()` method in your `App` class is overridden.
+```java title="Application.java"
+package com.webforj.demos;
 
-The `run()` method is the core of your app in webforJ. It defines what happens after the app is initialized and is the main entry point for your app's features. By overriding the `run()` method, you can implement the logic that creates and manages your app's user interface and behavior.
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+import com.webforj.App;
+import com.webforj.annotation.StyleSheet;
+import com.webforj.annotation.AppTheme;
+import com.webforj.annotation.AppProfile;
 
-:::tip Using routing
-When implementing routing within an app, overriding the `run()` method is unnecessary, as the framework automatically handles the initialization of routes and the creation of the initial `Frame`. The `run()` method is invoked after the base route is resolved, ensuring that the app's navigation system is fully initialized before any logic is executed. This tutorial will go further into depth on implementing routing in [step 3](scaling-with-routing-and-composites). More information is also available in the [Routing Article](../../routing/overview).
-:::
-
-```java title="DemoApplication.java"
-public class DemoApplication extends App {
-  @Override
-  public void run() throws WebforjException {
-    // App logic
+@SpringBootApplication
+@StyleSheet("ws://app.css")
+@AppTheme("system")
+@AppProfile(name = "DemoApplication", shortName = "DemoApplication")
+public class Application extends App {
+  public static void main(String[] args) {
+    SpringApplication.run(Application.class, args);
   }
-}
-```
-
-## Adding components {#adding-components}
-
-In webforJ, components are the building blocks of your app’s user interface. These components represent discrete pieces of your app's UI, such as buttons, text fields, dialogs, or tables.
-
-You can think of a UI as a tree of components, with a `Frame` serving as the root. Each component added to the `Frame` becomes a branch or leaf in this tree, contributing to the overall structure and behavior of your app.
 
-:::tip Component catalog
-See [this page](../../components/overview) for a list of the various components available in webforJ.
-:::
-
-### App `Frame` {#app-frame}
-
-The `Frame` class in webforJ represents a non-nestable, top-level window in your app. A `Frame` typically acts as the main containers for UI components, making it an essential building block for constructing the user interface. Every app starts with at least one `Frame`, and you can add components such as buttons, dialogs, or forms to these frames.
-
-A `Frame` within the `run()` method is created in this step - later on, components will be added here.
-
-```java title="DemoApplication.java"
-public class DemoApplication extends App {
   @Override
-  public void run() throws WebforjException {
-    Frame mainFrame = new Frame();
+  public void run() {
+    // UI setup goes here
   }
 }
 ```
 
-### Server and client side components {#server-and-client-side-components}
 
-Each server-side component in webforJ has a matching client-side web component. Server-side components handle logic and backend interactions, while client-side components like `dwc-button` and `dwc-dialog` manage frontend rendering and styling.
 
-:::tip Composite components
+---
 
-Alongside the core components provided by webforJ, you can design custom composite components by grouping multiple elements into a single reusable unit. This concept will be covered in this step of the tutorial. More information is available in the [Composite Article](../../building-ui/composite-components)
-:::
+## 3. Adding components
 
-Components need to be added to a container class that implements the <JavadocLink type="foundation" location="com/webforj/concern/HasComponents" code='true' >HasComponents</JavadocLink> interface. The `Frame` is one such class - for this step, add a `Paragraph` and a `Button` to the `Frame`, which will render in the UI in the browser:
+Inside the `run()` method, set up your main UI. For example, add a `Frame`, a `Paragraph`, and a `Button`:
 
-```java title="DemoApplication.java"
-public class DemoApplication extends App {
+```java
+@Override
+public void run() {
+  Frame mainFrame = new Frame();
   Paragraph demo = new Paragraph("Demo Application!");
   Button btn = new Button("Info");
+  mainFrame.addClassName("mainFrame");
 
-  @Override
-  public void run() throws WebforjException {
-    Frame mainFrame = new Frame();
-    btn.setTheme(ButtonTheme.PRIMARY)
-        .addClickListener(e -> showMessageDialog("This is a demo!", "Info"));
-    mainFrame.add(demo, btn);
-  }
+  btn.setTheme(ButtonTheme.PRIMARY)
+     .addClickListener(e -> OptionDialog.showMessageDialog("This is a demo!", "Info"));
+  mainFrame.add(demo, btn);
 }
 ```
 
-Running this should give you a simple styled button enabling a message popping up saying "This is a demo!"
-
-## Styling with CSS {#styling-with-css}
-
-Styling in webforJ gives you complete flexibility to design your app’s appearance. While the framework supports a cohesive design and style out of the box, it doesn't enforce a specific styling approach, allowing you to apply custom styles that align with your app’s requirements.
+---
 
-With webforJ, you can dynamically apply class names to components for conditional or interactive styling, use CSS for a consistent and scalable design system, and inject entire inline or external stylesheets.
+## 4. Configuration
 
-### Adding CSS classes to components {#adding-css-classes-to-components}
+- `src/main/resources/application.properties`:
+  ```
+  spring.application.name=DemoApplication
+  server.port=8080
+  webforj.entry = com.webforj.demos.Application
+  webforj.debug=true
+  ```
 
-You can dynamically add or remove class names to components using the `addClassName()` and `removeClassName()` methods. These methods allow you to control the component’s styles based on your app's logic. Add the `mainFrame` class name to the `Frame` created in the previous steps by including the following code in the `run()` method:
+- Make sure the spring [dependencies](../../integrations/spring/spring-boot#step-2-add-spring-dependencies) are correctly configured in your POM, if not, add them.
 
-```java
-mainFrame.addClassName("mainFrame");
-```
+- Place your CSS in `src/main/resources/static/app.css` and reference it with `@StyleSheet("ws://app.css")`.
 
-### Attaching CSS files {#attaching-css-files}
+---
 
-To style your app, you can include CSS files in your project either by using asset annotations or by utilizing the webforJ <JavadocLink type="foundation" location="com/webforj/Page" >asset API</JavadocLink> at runtime. [See this article](../../managing-resources/importing-assets) for more information. 
+## 5. Running the app
 
-For instance, The @StyleSheet annotation is used to include styles from the resources/static directory. It automatically generates a URL for the specified file and injects it into the DOM, ensuring the styles are applied to your app. Note that files outside the static directory aren't accessible.
+From your project directory, run:
 
-```java title="DemoApplication.java"
-@StyleSheet("ws://styles/library.css")
-public class DemoApplication extends App {
-  @Override
-  public void run() {
-    // App logic here
-  }
-}
-```
-:::tip Web server URLs
-To ensure static files are accessible, they should be placed in the resources/static folder. To include a static file, you can construct its URL using the web server protocol.
-:::
-
-### Sample CSS code {#sample-css-code}
-
-A CSS file is used in your project at `resources > static > css > demoApplication.css`, and the following CSS is used to apply some basic styling to the app.
-
-```css
-.mainFrame {
-  display: inline-grid;
-  gap: 20px;
-  margin: 20px;
-  padding: 20px;
-  border: 1px dashed;
-  border-radius: 10px;
-}
+```bash
+mvn spring-boot:run
 ```
 
-Once this is done, the following annotation should be added to your `App` class:
+Then open [http://localhost:8080](http://localhost:8080) in your browser.
 
-```java title="DemoApplication.java"
-@StyleSheet("ws://css/demoApplication.css")
-@AppTitle("Demo Step 1")
-public class DemoApplication extends App {
-```
+---
+
+## Next steps
 
-The CSS styles are applied to the main `Frame` and provide structure by arranging components with a [grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout), and adding margin, padding, and border styles to make the UI visually organized.
+You now have a working Spring Boot + webforJ app with a simple UI. The next steps will introduce routing, data binding, and more advanced features.

docs/docs/introduction/tutorial/overview.md

@@ -3,32 +3,34 @@ title: Overview
 hide_giscus_comments: true
 ---
 
-This tutorial is designed to guide you step by step through the process of creating the app. This app, designed to manage customer information, demonstrates how to use webforJ to build a functional and user-friendly interface with features for viewing, adding, and editing customer data. Each section will build upon the last, but feel free to skip ahead as needed.
 
-Each step in the tutorial will result in a program that compiles into a WAR file, which can be deployed to any Java web app server. For this tutorial, the Maven Jetty plugin will be used to deploy the app locally. This lightweight setup ensures the app can quickly run, and that changes will be seen in real time during development.
+This tutorial guides you step by step through building a customer management app using webforJ with Spring Boot. The app demonstrates how to use webforJ to create a modern, user-friendly interface for viewing, adding, and editing customer data. Each section builds on the previous, but you can skip ahead as needed.
+
+Each step in the tutorial results in a runnable Spring Boot app (JAR), which you can launch locally using Maven. With this setup, you get a fast development cycle and a production-ready deployment model, using Spring Boot’s embedded server.
 
 ## Tutorial app features {#tutorial-app-features}
 
  - Working with data in a table.
- - Using the [`ObjectTable`](https://javadoc.io/doc/com.webforj/webforj-foundation/latest/com/webforj/environment/ObjectTable.html) and asset management.
+ - [Respository](../../advanced/repository/overview) and asset management.
  - [Routing](../../routing/overview) and [navigation](../../routing/route-navigation)
- - [Data Bindings](../../data-binding/overview) and [validation](../../data-binding/validation/overview)
+ - [Data binding](../../data-binding/overview) and [validation](../../data-binding/validation/overview)
 
 ## Prerequisites {#prerequisites}
 
-To get the most out of this tutorial, it’s assumed that you have a basic understanding of Java programming and are familiar with tools like Maven. If you’re new to webforJ, don’t worry - the framework’s fundamentals will be covered along the way.
 
-The following tools/resources should be present on your development machine
+To get the most out of this tutorial, you should have a basic understanding of Java and Maven. No prior Spring Boot experience is required—key concepts will be introduced as needed. Should you be interested in additional spring resources you can find them [here](https://spring.io/learn);
+
+The following tools/resources should be present on your development machine:
 
 <!-- vale off -->
-- Java 17 or higher
+- Java 17 or 21
 - Maven
 - A Java IDE
 - A web browser
 - Git (recommended but not required)
 <!-- vale on -->
 
-:::tip webforJ Prerequisites
+:::tip webforJ prerequisites
 See [this article](../prerequisites) for a more detailed overview of the required tools.
 :::
 
@@ -37,7 +39,7 @@ See [this article](../prerequisites) for a more detailed overview of the require
 The tutorial is broken into the following sections. Proceed sequentially for a comprehensive walkthrough, or skip ahead for specific information.
 
 :::tip Project setup
-For those looking to skip ahead to specific topics, it's recommended to first read the Project Setup section before moving ahead. 
+Before you continue, complete the Project setup section to prepare your Spring Boot + webforJ environment for the tutorial steps.
 :::
 
 <DocCardList className="topics-section" />

docs/docs/introduction/tutorial/project-setup.md

@@ -1,5 +1,5 @@
 ---
-title: Project Setup
+title: Project setup
 sidebar_position: 1
 ---
 
@@ -45,14 +45,16 @@ webforj-demo-application
 
 To see the app in action at any stage:
 
-1) Navigate to the directory for the desired step. This should be the top level directory for that step, containing the `pom.xml`
+1. Navigate to the directory for the desired step. This should be the top level directory for that step, containing the `pom.xml`
 
-2) Use the Maven Jetty plugin to deploy the app locally by running:
+
+2. Use Maven to run the Spring Boot app locally by running:
 
 ```bash
-mvn jetty:run
+mvn spring-boot:run
 ```
 
-3) Open your browser and navigate to http://localhost:8080 to view the app.
+
+3. Open your browser and go to http://localhost:8080 to view the app.
 
 Repeat this process for each step as you follow along with the tutorial, allowing you to explore the app’s features as they're added.