diff --git a/examples/README.md b/examples/README.md index d8154c963..131cb9fe4 100644 --- a/examples/README.md +++ b/examples/README.md @@ -1,18 +1,29 @@ ### Contains the examples for mvvmfx -Content: +At the moment we have 3 example applications: +- **books-example**: An app to search for books in a library. + - Shows how to integrate a REST backend (Optional) + - Uses EasyDI as dependency injection library +- **contacts-example**: A contact management application + - Master-Detail + - Dialogs + - CDI as dependency injection library, including CDI-Events + - Validation + - Model-Wrapper + - I18N and ResourceBundle handling + - [DataFX](http://www.javafxdata.org/) +- **todomvc-example**: A Todo-App influenced by the popular [TodoMVC.com](http://todomvc.com/). + - NotificationCenter + - MvvmFX views as items of a ListView + - [EasyBind](https://github.com/TomasMikula/EasyBind) for filtering Lists -- **mvvmfx-books-example**: An app to search for books in a library. Connects to a REST backend. -- **mvvmfx-complex-example**: contains the user interface and logic code for an example application. -To run this example you need either mvvmfx-cdi-starter or mvvmfx-guice-starter. -- **mvvmfx-cdi-starter**: contains the startup code to run the mvvmfx-complex-example with CDI/Weld -as dependency injection framework. -- **mvvmfx-guice-starter**: contains the startup code to run the mvvmfx-complex-example with Guice -as dependency injection framework. -- **mvvmfx-fx-root-example**: contains a small custom control that uses the fx:root element together with mvvmfx. -- **mvvmfx-helloworld-example**: A simple hello world view. This example is used in the [Getting Started/Step-by-Step tutorial](/../../wiki/Getting-Started-HelloWorld-%28deutsch%29). -- **mvvmfx-helloworld-without-fxml**: A hello world example that shows hot to use MvvmFX with a view implemented in pure Java and not with FXML. -- **mvvmfx-contacts**: A contact management application. This example shows a master-detail view, dialogs and the usage of CDI including CDI-Events. -This example also integrates some other JavaFX community libraries. -- **mvvmfx-synchronizefx**: This example uses the library [SynchronizeFX](https://github.com/saxsys/SynchronizeFX) to create a distributed ViewModel. -This way the state of the UI of different instances of the App (on different JVM's, on different computers) is always synchronized between the apps. \ No newline at end of file + +In addition to these apps we have some smaller examples. Each examples shows a specific aspect of the framework but isn't very useful by itself. + +- **fx-root-example**: Shows how to use `fx:root` with mvvmFX. This way you can create your own custom components. +- **helloworld**: A minimal mvvmFX application using *FXML*. +- **helloworld-without-fxml**: A minimal mvvmFX application using pure Java code instead of *FXML*. +- **synchronizefx-example**: Shows how to integrade the library [SynchronizeFX](https://github.com/saxsys/SynchronizeFX) to implement a distributed ViewModel. This way the state of the UI of different instances of the App (on different JVM's, on different computers) is always synchronized between the apps. +- **welcome-example**: A simple app that shows a welcome message for people. + - It demonstrates the usage of [mvvmfx-cdi](https://github.com/sialcasa/mvvmFX/tree/develop/mvvmfx-cdi) and [mvvmfx-guice](https://github.com/sialcasa/mvvmFX/tree/develop/mvvmfx-guice). The complete code base is shared, only a specific starter class for each dependency injection framework is needed. + - Shows the usage of [Commands](https://github.com/sialcasa/mvvmFX/wiki/Commands). diff --git a/examples/contacts-example/README.md b/examples/contacts-example/README.md index 1dd91e014..8d63549c4 100644 --- a/examples/contacts-example/README.md +++ b/examples/contacts-example/README.md @@ -27,7 +27,7 @@ With a dialog you can add new contacts or edit existing ones. - The application uses CDI-Events to decouple the *add*/*edit* dialogs from the places where they are opened. Instead, when a button is clicked to open a dialog, an CDI-Event is fired. The dialog reacts to this event and will open up itself. -[ToolbarViewModel.java:](src/main/java/de/saxsys/mvvmfx/contacts/ui/toolbar/ToolbarViewModel.java) +[ToolbarViewModel.java:](src/main/java/de/saxsys/mvvmfx/examples/contacts/ui/toolbar/ToolbarViewModel.java) ```java @Inject @@ -38,7 +38,7 @@ public void addNewContactAction(){ } ``` -[AddContactDialog.java:](src/main/java/de/saxsys/mvvmfx/contacts/ui/addcontact/AddContactDialog.java) +[AddContactDialog.java:](src/main/java/de/saxsys/mvvmfx/examples/contacts/ui/addcontact/AddContactDialog.java) ```java public class AddContactDialog implements FxmlView { @@ -49,3 +49,52 @@ public class AddContactDialog implements FxmlView { } } ``` + +#### ResourceBundles and I18N + +There are resourceBundles available for german and english language. In [App.java](src/main/java/de/saxsys/mvvmfx/examples/contacts/App.java) +a global resourceBundle is defined for the whole application: + +```java +... + +@Inject +private ResourceBundle resourceBundle; + + +@Override +public void startMvvmfx(Stage stage) throws Exception { + LOG.info("Starting the Application"); + MvvmFX.setGlobalResourceBundle(resourceBundle); + + ... +} +``` + +In addition for the menu a specific resourceBundle is defined in the [MainView.fxml](src/main/resources/de/saxsys/mvvmfx/examples/contacts/ui/main/MainView.fxml) via `fx:include`: + +```xml +... + +... +``` + +This resourceBundle is merged internally with the global resourceBundle so that the menu can access both resources. + + +#### Validation + +In the dialog for adding/editing contacts the mvvmFX validation feature is used. +In [ContactFormViewModel.java](src/main/java/de/saxsys/mvvmfx/examples/contacts/ui/contactform/ContactFormViewModel.java) you can see +how to define validation logic. +In the [ContactFormView.java](src/main/java/de/saxsys/mvvmfx/examples/contacts/ui/contactform/ContactFormView.java) the connection to the UI is done. +This way the aspects of validation logic and validation visualization are separated. + + +#### Model-Wrapper + +In the [ContactFormViewModel.java](src/main/java/de/saxsys/mvvmfx/examples/contacts/ui/contactform/ContactFormViewModel.java) +the mvvmFX ModelWrapper is used to connect the Model and the ViewModel layers with reduced code size and coupling. + + + diff --git a/examples/todomvc-example/README.md b/examples/todomvc-example/README.md new file mode 100644 index 000000000..dfab1bffc --- /dev/null +++ b/examples/todomvc-example/README.md @@ -0,0 +1,11 @@ +# MvvmFX TodoMVC Example + +This example is influenced by the popular [TodoMVC.com]() example. +*TodoMVC* is a project that is used to compare different JavaScript/HTML5 libraries. +All example apps on the website implement the same requirements. +This makes comparing the different libraries and frameworks easier. +While the original TodoMVC is targeted for JavaScript and web frameworks we have +implemented a JavaFX variant using mvvmFX. + + +![screenshot](screenshot.png) diff --git a/examples/todomvc-example/screenshot.png b/examples/todomvc-example/screenshot.png new file mode 100644 index 000000000..f9ddde7c8 Binary files /dev/null and b/examples/todomvc-example/screenshot.png differ diff --git a/mvvmfx-archetype/README.md b/mvvmfx-archetype/README.md index 324a3af50..27d6352c9 100644 --- a/mvvmfx-archetype/README.md +++ b/mvvmfx-archetype/README.md @@ -12,4 +12,4 @@ To use this archetype: -DartifactId=your.artifact.id -This creates an example mvvmfx project similar to the [mvvmfx-helloworld example](/examples/mvvmfx-helloworld). +This creates an example mvvmfx project similar to the [helloworld example](/examples/mini-examples/helloworld). diff --git a/mvvmfx-cdi/README.md b/mvvmfx-cdi/README.md index cccbfec03..05d430b78 100644 --- a/mvvmfx-cdi/README.md +++ b/mvvmfx-cdi/README.md @@ -5,18 +5,21 @@ This module is an extension for the [MvvmFX](https://github.com/sialcasa/mvvmFX) To create an application that is powered by CDI / Weld you have to extend `MvvmfxCdiApplication`: - public class Starter extends MvvmfxCdiApplication{ +```java +public class Starter extends MvvmfxCdiApplication{ - public static void main(String...args){ - launch(args); - } + public static void main(String...args){ + launch(args); + } - @Override - public void startMvvmfx(Stage stage){ - // your code to initialize the view. - } + @Override + public void startMvvmfx(Stage stage){ + // your code to initialize the view. } +} +``` -A simple example for this is available at [mvvmfx-cdi-starter](/examples/mvvmfx-cdi-starter). +An example application using CDI can be found at [contacts-example](/examples/contacts-example) and +at [welcome-example](/examples/mini-examples/welcome-example). If you prefer Guice as dependency injection framework you can use [mvvnfx-guice](/mvvmfx-guice). \ No newline at end of file diff --git a/mvvmfx-guice/README.md b/mvvmfx-guice/README.md index 2ca3eed34..10aa14033 100644 --- a/mvvmfx-guice/README.md +++ b/mvvmfx-guice/README.md @@ -7,19 +7,20 @@ It is based on [fx-guice](https://github.com/cathive/fx-guice). To create an application that is powered by Guice you have to extend `MvvmfxGuiceApplication`: - public class Starter extends MvvmfxGuiceApplication { +```java +public class Starter extends MvvmfxGuiceApplication { - public static void main(final String[] args) { - launch(args); - } - - @Override - public void startMvvmfx(final Stage stage) throws Exception { - // your code to initialize the view - } + public static void main(final String[] args) { + launch(args); } + @Override + public void startMvvmfx(final Stage stage) throws Exception { + // your code to initialize the view + } +} +``` -A simple example for this is available at [mvvmfx-guice-starter](/examples/mvvmfx-guice-starter). +A simple example for this is available at [welcome-example](/examples/mini-examples/welcome-example). If you prefer CDI as dependency injection framework you can use [mvvnfx-cdi](/mvvmfx-cdi). \ No newline at end of file