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.

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

Tutorial revisions #321

Open
wants to merge 21 commits into
base: website
Choose a base branch
from
Open

Tutorial revisions #321

wants to merge 21 commits into from

Conversation

EHandtkeBasis
Copy link
Contributor

No description provided.


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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [vale] reported by reviewdog 🐶
[Google.Contractions] Use 'they're' instead of 'they are'.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix this vale warning

docs/getting-started/tutorial/overview.md Show resolved Hide resolved
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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'we'.

webforj.entry = com.webforj.demos.DemoApplication
```

#### Debug Mode `(webforj.debug)`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [vale] reported by reviewdog 🐶
[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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [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:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [vale] reported by reviewdog 🐶
[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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [vale] reported by reviewdog 🐶
[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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [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" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [vale] reported by reviewdog 🐶
[Google.Parens] Use parentheses judiciously.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use markdown for images


<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" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [vale] reported by reviewdog 🐶
[Google.Parens] Use parentheses judiciously.

@hyyan
Copy link
Member

hyyan commented Nov 29, 2024

/rebase

Copy link
Member

@hyyan hyyan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MatthewHawkins, please take care of the requested changes yourself.

docs/getting-started/tutorial/overview.md Show resolved Hide resolved

- 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.
- Routing and navigation
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Link "Routing and navigation"

- 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.
- Routing and navigation
- [Data Bindings](../../data-binding/overview) and validation
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Link "validation"

- A Java IDE
- A web browser
<!-- vale off -->
- Git (recommended but not required)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove space before Git

- Routing and navigation
- [Data Bindings](../../data-binding/overview) and validation

## Prerequisites
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Link to webforJ (maybe as a tip) Prerequisites

`BindingContext.of(this, Customer.class, true)` initializes the binding context for the `Customer` class. The third parameter, `true`, enables [jakarta validation](https://beanvalidation.org/).

:::info
This implementation uses autobinding as described in the [Data Binding Article](../../data-binding/automatic-binding). This works if the fields in the data model `Customer` are named the same as the corresponding fields in the `FormView`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change "autobinding" to "auto-binding"

:::info
This implementation uses autobinding as described in the [Data Binding Article](../../data-binding/automatic-binding). This works if the fields in the data model `Customer` are named the same as the corresponding fields in the `FormView`.

Should the fields not be named the same you can add the `UseProperty` annotation in the form over the field you want to bind so they know which datafields to refer to.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"datafields" -> "data fields"


Validation ensures that the data entered into the form adheres to specified rules, improving data quality and preventing invalid submissions. With data binding, validation no longer needs to be manually implemented but instead simply configured, allowing real-time feedback on user inputs.

### Defining valdiation rules
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix typo in "valdiation"

Comment on lines +88 to +96
private void submitCustomer() {
ValidationResult results = context.write(customer);
if (results.isValid()) {
if (customerId.isEmpty()) {
Service.getCurrent().addCustomer(customer);
}
Router.getCurrent().navigate(DemoView.class);
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

format code with two spaces

@@ -0,0 +1,69 @@
---
title: Integrating the AppLayout
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

convert it into a draft

@hyyan
Copy link
Member

hyyan commented Dec 10, 2024

@MatthewHawkins please make sure this PR is rebased

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants