Tutorial revisions #321
Tutorial revisions #321
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}
|
|
||
| To get started, you can download the entire project or clone it from GitHub: | ||
|
|
||
| - Download ZIP: [webforj-demo-application.zip](../../../static/files/webforj-demo-application.zip) |
There was a problem hiding this comment.
[Google.WordList] Use 'app' instead of 'application'.
|
|
||
| 3) Open your browser and navigate 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 are added. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Contractions] Use 'they're' instead of 'they are'.
|
|
||
| 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. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Acronyms] Spell out 'WAR', if it's unfamiliar to the audience.
| context.onValidate(e -> submit.setEnabled(e.isValid())); | ||
| ``` | ||
|
|
||
| `e.isValid()` returns true if all fields are valid, and false if not. This means that the `Submit` button is enabled as long as all fields are valid; otherwise, it remains turned off, preventing submission until corrections are made. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Semicolons] Use semicolons judiciously.
|
|
||
| Calling `context.write(customer)` will return an instance of a `ValidationResult`. This class indicates whether or not the validation was successful, and stores any messages associated with this result. | ||
|
|
||
| In this code we check to see if this result was valid before adding a customer. This ensures that all changes are validated and automatically applied to the model before being processed. |
There was a problem hiding this comment.
[Google.We] Try to avoid using first-person plural like 'we'.
| webforj.entry = com.webforj.demos.DemoApplication | ||
| ``` | ||
|
|
||
| #### Debug Mode `(webforj.debug)` |
There was a problem hiding this comment.
[Google.Headings] 'Debug Mode ***************' should use sentence-style capitalization.
|
|
||
| ### Server and client side components | ||
|
|
||
| Each of these [server-side component](../../components/overview) created in webforJ has a corresponding [client-side web component](../../client-components/overview). These client-side components are web components, implemented by webforJ's design system called DWC. When viewing information about the various components available in the webforJ documentation, each page will like the relevant information needed to style the client components. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Acronyms] Spell out 'DWC', if it's unfamiliar to the audience.
| Specify the directory from which static files should be served. Use the `<webApp>` in the `pom.xml` configuration to point to your static directory. | ||
| ::: | ||
|
|
||
| The following code would import a stylesheet found in the following directory structure: |
There was a problem hiding this comment.
[Google.WordList] Use 'style sheet' instead of 'stylesheet'.
| ``` | ||
|
|
||
| ### `@StyleSheet` | ||
| Use the `@StyleSheet` annotation to include CSS files hosted at external URLs. This is useful for integrating third-party stylesheets. When referencing external URLs, the framework fetches and applies the stylesheet directly from the specified URL. Make sure the resource is accessible and uses the correct protocol (http or https). |
There was a problem hiding this comment.
[Google.WordList] Use 'style sheet' instead of 'stylesheet'.
| ``` | ||
|
|
||
| ### `@StyleSheet` | ||
| Use the `@StyleSheet` annotation to include CSS files hosted at external URLs. This is useful for integrating third-party stylesheets. When referencing external URLs, the framework fetches and applies the stylesheet directly from the specified URL. Make sure the resource is accessible and uses the correct protocol (http or https). |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Parens] Use parentheses judiciously.
|
|
||
| The app created in the [previous step](./working-with-data) will have a robust routing setup that supports multiple views, enabling users to manage customer data more effectively while maintaining a clean and scalable codebase. | ||
|
|
||
| <img src={require('@site/static/img/tutorial_images/step3-1.png').default} alt="Screenshot of first app" className="tutorial-image" /> |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Parens] Use parentheses judiciously.
|
|
||
| <img src={require('@site/static/img/tutorial_images/step3-1.png').default} alt="Screenshot of first app" className="tutorial-image" /> | ||
|
|
||
| <img src={require('@site/static/img/tutorial_images/step3-2.png').default} alt="Screenshot of first app" className="tutorial-image" /> |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Parens] Use parentheses judiciously.
| ``` | ||
|
|
||
| ### `@StyleSheet` | ||
| Use the `@StyleSheet` annotation to include CSS files hosted at external URLs. This is useful for integrating third-party stylesheets. When referencing external URLs, the framework fetches and applies the style sheet directly from the specified URL. Make sure the resource is accessible and uses the correct protocol (http or https). |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Parens] Use parentheses judiciously.
|
/rebase |
No description provided.