Reactive Dialogs

[thomasnield]

One of the pain points I've had with Rx and JavaFX is putting a dialog somewhere in the middle of an Observable chain, usually to prevent emissions from going forward on some condition. It's messy and maybe I'm just not competent enough with maintaining modality, and I struggle to get it right.

But I found an interesting pattern that seems to work consistently: Make the dialog return an Observable of the result. Note I am using TornadoFX in this example.

class YesNoConfirmDialog(val message: String) : Fragment() {
    override val root = BorderPane()
    var result: Observable<Response> by singleAssign()
    init {
        with(root) {
            top {
                label(message)
            }
            center {
                hbox {
                    alignment = Pos.BASELINE_CENTER
                    result = Observable.concat(
                            button("YES").actionEvents().map { Response.YES },
                            button("NO").actionEvents().map { Response.NO }
                    ).take(1).doOnCompleted { this@YesNoConfirmDialog.closeModal() }
                }
            }
        }
        openModal()
    }
    enum class Response { YES, NO }
}

Then all I have to do is flatMap() to this dialog's result property which will emit as an Observable<Response>.

sourceObservable
    .flatMap { YesNoConfirmDialog("Are you sure you want item $it to be committed?").result }
    .subscribe { println("You selected $it") }

I would hate to build dialogs from scratch like I did above. It would be ideal to put extension functions on existing JavaFX dialogs that return the Observable. This may be worth exploring.

It might be even better to create simple functions that take care of creating and returning the result of dialogs.

sourceObservable
    .flatMap { yesNoConfirmDialog("Are you sure you want item $it to be committed?") }
    .subscribe { println("You selected $it") }

[thomasnield]

I think the existing JavaFX 8 Dialogs give plenty of hooks to work with. The question is does this belong first in RxJavaFX, or RxKotlinFX. It may only look good as Kotlin extension functions.

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Dialog.html

[thomasnield]

On top of all the extension functions on existing dialogs driving it, this is how I want dialogs to be called in RxKotlinFX

confirmationDialog(“Are you sure you want to do this?”)
     .flatMap { if (it = = Response.YES) someProcessObservable() else Observable.empty() } 

[thomasnield]

RxJavaFX actually was a good place to put the factory. As soon as I release it will be implemented here.

However, I realized that my proposed dialog functions above might be slightly redundant to @edvin's alert() function in TornadoFX.

@edvin do you foresee any issues if I implement the following functions for quick Observable composition? Mostly they will be used to stop emissions from flowing through based on user input.

fun confirmationDialog(contentText: String): Observable<ButtonType>
fun errorDialog(contentText: String): Observable<ButtonType>
fun informationDialog(contentText: String): Observable<ButtonType>
fun warningDialog(contentText: String): Observable<ButtonType>
fun textInputDialog(contentText: String): Observable<String>
fun <T> choiceDialog(contentText: String, vararg items: T): Observable<T>

Use Case

source.flatMap { item ->
    confirmationDialog(“Are you sure you want to process $item?”)
         .filter { if (it == ButtonType.YES) true  else  false }
         .map { item }
 }.flatMap { executeProcess(it) }
.subscribe { println("Processed $it") }

[thomasnield]

You know it might actually be helpful to create a booleanDialog function that simply returns a Boolean rather than an Observable<Boolean>. Might be TornadoFX territory though, and could be helpful in Sequences and other non-Rx functional stuff.

It would simplify the above example quite a bit though, and avoid the "FlatMap Filtering" pattern.

fun booleanDialog(context: String, yesButtonText: String = "YES", noButtonText: String = "NO"): Boolean

source.filter { booleanDialog(“Are you sure you want to process $item?”) }
.flatMap { executeProcess(it) }
.subscribe { println("Processed $it") }

[thomasnield]

Okay I think I'm letting the scope run away from me. I'm just going to implement the following extensions and keep it simple. Maybe I'll include an Optional<T>.toObservable() as well.

Sometimes I forget Kotlin allows you to create your own DSL's. If you want to create a confirmDialog() function then the language is small enough to make that trivial. No need to centralize those in an API.

fun <T> Dialog<T>.toObservable() = JavaFxObservable.fromDialogSource(this)

fun <T> Optional<T>.toObservable() = Observable.just(this)
        .filter { it.isPresent }
        .map { it.get() }

[thomasnield]

Awesome, thanks for confirming @edvin!