Added first draft of step one of the tutorial and rough baselines for… #309
Conversation
… step two and three.
EHandtkeBasis
requested review from
hyyan,
MatthewHawkins,
nmlynx and
mschned
as code owners
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit
vale
docs/getting-started/tutorial/demo-application3.md|130 col 1| [Google.Headings] 'Extracting Logic into ' should use sentence-style capitalization.
docs/getting-started/tutorial/demo-application2.md|1 col 3| [Google.Headings] 'Demo Application Documentation' should use sentence-style capitalization.
docs/getting-started/tutorial/demo-application2.md|5 col 186| [Google.We] Try to avoid using first-person plural like 'We'.
docs/getting-started/tutorial/demo-application2.md|5 col 341| [Google.WordList] Use 'app' instead of 'application'.
docs/getting-started/tutorial/demo-application2.md|7 col 4| [Google.Headings] 'Model Class' should use sentence-style capitalization.
docs/getting-started/tutorial/demo-application2.md|9 col 1| [Google.Headings] ' Model' should use sentence-style capitalization.
docs/getting-started/tutorial/demo-application2.md|11 col 96| [Google.WordList] Use 'app' instead of 'application'.
docs/getting-started/tutorial/demo-application2.md|26 col 5| [Google.Headings] 'Purpose of the Model' should use sentence-style capitalization.
docs/getting-started/tutorial/demo-application2.md|28 col 180| [Google.WordList] Use 'app' instead of 'application'.
docs/getting-started/tutorial/demo-application2.md|28 col 215| [Google.We] Try to avoid using first-person plural like 'us'.
docs/getting-started/tutorial/demo-application2.md|30 col 4| [Google.Headings] 'Data Folder' should use sentence-style capitalization.
docs/getting-started/tutorial/demo-application2.md|32 col 118| [Google.WordList] Use 'app' instead of 'application'.
docs/getting-started/tutorial/demo-application2.md|39 col 4| [Google.Headings] 'ObjectTable' should use sentence-style capitalization.
docs/getting-started/tutorial/demo-application2.md|41 col 35| [Google.WordList] Use 'app' instead of 'application'.
docs/getting-started/tutorial/demo-application2.md|41 col 145| [Google.We] Try to avoid using first-person plural like 'we'.
docs/getting-started/tutorial/demo-application2.md|41 col 185| [Google.We] Try to avoid using first-person plural like 'our'.
docs/getting-started/tutorial/demo-application2.md|41 col 194| [Google.Contractions] Use 'isn't' instead of 'is not'.
docs/getting-started/tutorial/demo-application2.md|44 col 85| [Google.WordList] Use 'app' instead of 'application'.
docs/getting-started/tutorial/demo-application2.md|46 col 82| [Google.WordList] Use 'app' instead of 'application'.
docs/getting-started/tutorial/demo-application2.md|46 col 118| [Google.WordList] Use 'capability' or 'feature' instead of 'functionality'.
docs/getting-started/tutorial/demo-application2.md|50 col 100| [Google.WordList] Use 'app' instead of 'application'.
docs/getting-started/tutorial/demo-application2.md|57 col 4| [Google.Headings] 'HasEntityKey and Repository Pattern' should use sentence-style capitalization.
docs/getting-started/tutorial/demo-application2.md|59 col 5| [Google.WordList] Use 'app' instead of 'application'.
docs/getting-started/tutorial/demo-application2.md|71 col 1| [Google.Headings] 'Updated Code - ********************' should use sentence-style capitalization.
docs/getting-started/tutorial/demo-application2.md|123 col 39| [Google.WordList] Use 'app' instead of 'application'.
docs/getting-started/tutorial/demo-application2.md|127 col 5| [Google.Headings] 'Differences from Previous Versions' should use sentence-style capitalization.
docs/getting-started/tutorial/demo-application2.md|134 col 111| [Google.WordList] Use 'app' instead of 'application'.
| @@ -0,0 +1,3 @@ | |||
| ## Overview | |||
|
|
|||
| The `webforJ Demo Application` is a sample project designed to showcase the functionalities of the webforJ framework. This guide provides a breakdown of the project structure, key components, and setup information. The structure includes source code, resources, styling, and configuration files to help developers understand and extend the demo application. | |||
There was a problem hiding this comment.
[Google.WordList] Use 'app' instead of 'application'.
| - **`src/main/java`**: Contains the Java source files, including `DemoApplication.java`, which is the main entry point for this app. | ||
| - **`src/main/resources`**: Contains resource files like CSS and other configuration assets used by the app. | ||
|
|
||
| ## Creating a webforJ app |
There was a problem hiding this comment.
[Google.Headings] 'Creating a webforJ app' should use sentence-style capitalization.
|
|
||
| Next, override the `run()` method. The framework calls this method, which is intended to define the behavior and execution flow of the app, after the app has been fully initialized. For now, add a logging statement, which can be viewed in the browser console, to the method. | ||
|
|
||
| Finally, add an `AppTitle()` annotation above the class declaration. This title will be shown in the browser tab. |
There was a problem hiding this comment.
[Google.WordList] Use 'preceding' instead of 'above'.
| @@ -0,0 +1,132 @@ | |||
| # Demo Application Documentation | |||
There was a problem hiding this comment.
[Google.Headings] 'Demo Application Documentation' should use sentence-style capitalization.
|
|
||
| ## Overview | ||
|
|
||
| This updated version of the `webforJ Demo Application` leverages routing to create a more scalable and organized structure, specifically designed for managing customer entries. Key enhancements include the use of views for editing/creating customer entries, dynamic data handling, and a modular approach with components like `Composite<ColumnsLayout>`. These improvements support a more flexible, maintainable application architecture. |
There was a problem hiding this comment.
[Google.WordList] Use 'app' instead of 'application'.
|
|
||
| ## Editing Existing Entries (EDIT Mode) | ||
|
|
||
| When a user selects a customer from the table in `DemoView`, they are directed to `FormView` with the `id` of the selected customer passed as a parameter. The form then retrieves the customer’s data and populates the fields for editing. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Contractions] Use 'they're' instead of 'they are'.
|
|
||
| When a user selects a customer from the table in `DemoView`, they are directed to `FormView` with the `id` of the selected customer passed as a parameter. The form then retrieves the customer’s data and populates the fields for editing. | ||
|
|
||
| ### Route Logic in `DemoView` |
There was a problem hiding this comment.
[Google.Headings] 'Route Logic in ********' should use sentence-style capitalization.
| } | ||
| ``` | ||
|
|
||
| ### onDidEnter Logic in `FormView` |
There was a problem hiding this comment.
[Google.Headings] 'onDidEnter Logic in ********' should use sentence-style capitalization.
| } | ||
| ``` | ||
|
|
||
| ## Navigation and View Switching |
There was a problem hiding this comment.
[Google.Headings] 'Navigation and View Switching' should use sentence-style capitalization.
|
|
||
| ## Navigation and View Switching | ||
|
|
||
| Navigation is handled through the `Router` component. In both `DemoView` and `FormView`, `Router.getCurrent().navigate()` is used to switch between views, supporting seamless transitions across different parts of the application. |
There was a problem hiding this comment.
[Google.WordList] Use 'app' instead of 'application'.
|
|
||
| - **Usage**: | ||
| - `HasEntityKey` provides a mechanism to assign a unique entity key to each model, simplifying data access. | ||
| - Since the `Customer` model is not based on a database it utilizes the java UUID as an entity key. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Contractions] Use 'isn't' instead of 'is not'.
|
|
||
| - **Usage**: | ||
| - `HasEntityKey` provides a mechanism to assign a unique entity key to each model, simplifying data access. | ||
| - Since the `Customer` model is not based on a database it utilizes the java UUID as an entity key. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Acronyms] Spell out 'UUID', if it's unfamiliar to the audience.
|
|
||
| ### Using the `ObjectTable` | ||
|
|
||
| The above class uses an `ObjectTable` to manage object instances dynamically instead of using static data. Using the `ObjectTable`, ensures that data isn't restricted to a single state or instance, allowing for more dynamic data interactions. It also helps with scalability of the app and makes it easy to include and extend the objects in question. |
There was a problem hiding this comment.
[Google.WordList] Use 'preceding' instead of 'above'.
|
|
||
| ## Routing for scalability | ||
|
|
||
| To start, routing will be implemented to handle multiple views, which is essential for scalability. To do this, you will be putting the functionality of `DemoApplication.java` into one view and add another view to it. |
There was a problem hiding this comment.
[Google.WordList] Use 'capability' or 'feature' instead of 'functionality'.
|
|
||
| ### Assigning a route | ||
|
|
||
| The `FormView` class is assigned the route `customer/:id?` using the `@Route` annotation. This route includes an optional parameter (:id?) that supports two modes: |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Parens] Use parentheses judiciously.
|
|
||
| - **Usage**: | ||
| - `HasEntityKey` provides a mechanism to assign a unique entity key to each model, simplifying data access. | ||
| - Since the `Customer` model isn't based on a database it utilizes the java UUID as an entity key. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Acronyms] Spell out 'UUID', if it's unfamiliar to the audience.
… step two and three.