hello getting my feet wet with compose for desktop how do yo

Question

hello getting my feet wet with compose for desktop how do you subscribe to changes in `MutableState` i ve close to zero experience in android

kenkyee · Answer

You don t really subscribe to them They just get used

nfrankel · Answer

ok but how do i handle the use case where i want a variable updated when other variables are changed

kenkyee · Answer

I m looking at your example and don t think it s a normal thing to do You d probably move that stuff into a viewmodel and do the normal coroutine thing with sharedflows

kenkyee · Answer

The auto change handling magic is for UI

nfrankel · Answer

`viewmodel` seems to be an android thing sweat smile

kenkyee · Answer

MVI Redux then

kenkyee · Answer

You could have UI events change the remember mutable state but unless it s a self contained widget it s mixing business logic with UI

nfrankel · Answer

funny the observer pattern is in the stdlib via `delegate by observable` i just want binding between two variables but because compose seems to frown on classes i m stuck thinking face

Adam Powell · Answer

`derivedStateOf` might be what you re looking for if you want snapshot state that depends on other snapshot state

Adam Powell · Answer

compose doesn t frown on classes you can write classes that back their fields with snapshot state

nfrankel · Answer

< Adam Powell> thanks for the hint about `derivedStateOf` the class thing is what i m deducing after a couple of hours perhaps i m completely mistaken

Adam Powell · Answer

definitely open to feedback on how to better position some of the docs most of them are trying to showcase the compose specific concepts

Adam Powell · Answer

for example you can write classes like this ```class MyState initialFoo Foo var foo by mutableStateOf initialFoo val bar by derivedStateOf foo computeBar ```

nfrankel · Answer

i come from a swing background from what i see the idea is to let android developers move to the desktop

nfrankel · Answer

wrong persona for me wink

Adam Powell · Answer

yes much of the docs are indeed from the perspective of Android developers so far slightly smiling face

Adam Powell · Answer

independent of platform though the intention is for ` Composable` functions to act as transformations of app state to UI The input state is generally hoisted out of the ` Composable` functions themselves as code scales

Adam Powell · Answer

and that state often ends up looking like the snapshot state backed example class above

Adam Powell · Answer

if you would like to observe snapshot state changes from outside of compose APIs there is `snapshotFlow `

nfrankel · Answer

the hoisting stuff is completely different from what i m used to i believe it will take some time to wrap my head around it

Adam Powell · Answer

yes it s a very different way of thinking about UI than Swing

Adam Powell · Answer

or Android Views for that matter

Adam Powell · Answer

it solves a lot of long standing challenges though especially around async responses and validation

Adam Powell · Answer

often lends itself to easier testability

nfrankel · Answer

i need to read more about ` Composable` i think it s the main building block

nfrankel · Answer

the fact that most of compose documentation uses android doesn t help for sure

Adam Powell · Answer

You might find some of Leland s blog posts helpful he writes mostly from a platform agnostic perspective about the compose runtime itself which all applies to compose desktop <https medium com androiddevelopers understanding jetpack compose part 1 of 2 ca316fe39050>

nfrankel · Answer

thanks for your help

Adam Powell · Answer

you re welcome Happy to slightly smiling face

nfrankel · Answer

gt Let s look at this more practically in the context of Android development today and take the example of a view model and an XML layout joy

Adam Powell · Answer

it s a short section on that part I promise slightly smiling face

nfrankel · Answer

so the framework will actually call a ` Composable` function if any of its ` Composable` parameters has been changed correct

Colton Idle · Answer

Reading some docs on react like lifting state up has helped me conceptually get prepared for compose if you wish to take a look at those docs They are really good

kenkyee · Answer

<https kotlinlang slack com archives C01D6HTPATV p1609730449296100 thread ts=1609726620 287000 amp cid=C01D6HTPATV|https kotlinlang slack com archives C01D6HTPATV p1609730449296100 thread ts=1609726620 287000 amp cid=C01D6HTPATV> Yes Think of it as rerendering children as needed and every param remember is state It very much is like React and Flutter

nfrankel · Answer

gt Yes Thanks slightly smiling face gt It very much is like React and Flutter well those references are lost on me as i know none of them sweat smile

kenkyee · Answer

React and Flutter are much more mature though so the same concepts usually apply E g they work best with MVI Redux architectures to manage state

Colton Idle · Answer

< nfrankel> I don t know react either Just saying their docs are mature and super simple So it s worth taking a peek there

Colton Idle · Answer

nfrankel · Answer

i managed to get something working though i m not sure whether it s the way

Adam Powell · Answer

happy to give some feedback on idiomatic patterns if you d like to post a gist or similar

nfrankel · Answer

i appreciate the proposal it s a bit more than a gist but not gigantic either just a simple batch file renamer <https github com ajavageek renamer compose>

nfrankel · Answer

thanks in advance

Adam Powell · Answer

by and large I d say you re getting the hang of it There s the style nit of ` Composable` functions that return `Unit` being `PascalCased` as types entities but that one s minor and the lint hinting for it will probably make its way to an idea plugin config eventually slightly smiling face

Adam Powell · Answer

Structurally I think you re seeing the design pressure that leads to `by mutableStateOf` backed classes

Adam Powell · Answer

composable functions that accept `MutableState lt T gt ` parameters are usually a canary that signals that you want to establish a more specific API with the UI element

Adam Powell · Answer

`applyButton` is a good example this `rename` inner function used as the `onClick` handler would be a great fit as a method on such a class or an extension function with such a class as its receiver <https github com ajavageek renamer compose blob master src main kotlin ApplyButton kt L17>

Adam Powell · Answer

Some of the work with the file chooser using swing directly is a good example of things that can be wrapped into the declarative style and then used that way but there s nothing inherently wrong with doing it the way it s done here It s very similar to using `suspendCancellableCoroutine` to bridge `suspend` functions and callback driven async code

Adam Powell · Answer

the equivalent APIs for bridging such things in compose are the ` Effect` composables `SideEffect` `DisposableEffect` and `LaunchedEffect` depending on what you re up to

Adam Powell · Answer

What is the `changed` state intending to model

Adam Powell · Answer

Some of the `SwingPanel` bits look suspicious but I think that might be on our end rather than yours slightly smiling face

nfrankel · Answer

swing i don t see any table component so i had to use the swing one same for filechooser `changed` is interesting

nfrankel · Answer

i want a refresh feature something that tells the framework to recall everything the table needs to read from the fs again

nfrankel · Answer

i tried to achieve that by using derived mutable state but it seems those functions are not called

nfrankel · Answer

Adam Powell · Answer

It looks like you don t need mutable mutableStateLists in there as they re only being consumed downstream

Adam Powell · Answer

so I don t think the ` toMutableStateList `s are heading in the direction you want

Adam Powell · Answer

You might be looking for something more like ```val candidates = remember derivedStateOf val regex = pattern value toRegex val replace = replacement value files map if pattern value isBlank it else val newName = regex replace it name replace File newName it parent ```

Adam Powell · Answer

so you get one `State lt List lt File gt gt ` instance that will automatically update whenever the things it reads change

Adam Powell · Answer

though I think there might be something structurally problematic with the `SwingPanel` API being used to present the file table and I m having trouble locating the source code for it to verify

Adam Powell · Answer

from the call site it s accepting direct parameters of initialized once Swing components this means if the content lambda of the containing `Row` recomposes new swing components are created instead of updating existing ones which seems suspect

Adam Powell · Answer

for this to work the way you re intending it looks like you would need to observe snapshot changes of your list and notify your AbstractTableModel listeners of the changes

Adam Powell · Answer

a good illustration of the kinds of things compose aims to do transparently slightly smiling face

nfrankel · Answer

i was missing `derivedStateOf` thanks for letting me know +1

nfrankel · Answer

gt though I think there might be something structurally problematic with the `SwingPanel` API being used to present the file table and I m having trouble locating the source code for it to verify grimacing

nfrankel · Answer

gt it looks like you would need to observe snapshot changes of your list and notify your AbstractTableModel listeners of the changes so back to the old manual observer pattern again

nfrankel · Answer

`derivedStateOf` works perfectly now i just need a way to refresh the state when i ve renamed the files

nfrankel · Answer

any hint for that would be greatly appreciated if you still have time of course

Adam Powell · Answer

If you connect a `snapshotFlow theTableState ` collect call to send `AbstractTableModel` data change notifications I think you should be in business

nfrankel · Answer

i ll have a look thanks

nfrankel · Answer

i m afraid i don t manage to get this so far i ve ` path ` = derived state = gt `files` ` path pattern replacement ` = derived state = gt `candidates` ` files candidates ` = Composable = gt `filemodel` the button renames files so the only origin i ve is the filesystem itself which is outside the scope of compose sweat smile with a legacy observer pattern i just send an event from the button that is subscribed to by the model and that calls refresh

Adam Powell · Answer

you should be able to do the same here if you want refresh to be manual

Adam Powell · Answer

I presumed that you wanted the table to refresh automatically as the files change

Adam Powell · Answer

the value of a `derivedStateOf` state object will always be up to date for instantaneous reads like you would do from a button click handler

nfrankel · Answer

gt you should be able to do the same here if you want refresh to be manual do you have a link to the API to explicitly call a refresh gt I presumed that you wanted the table to refresh automatically as the files change that s the case i just don t understand how

Adam Powell · Answer

Since `AbstractTableModel` is outside compose it looks like you ll want to update it outside of composition but with a subscription scope driven by the composition of your inserted swing UI Consider something like

Adam Powell · Answer

```Row padding fillMaxWidth fillMaxHeight 0 85f fileModel now accepts the wrapped types not State lt T gt We use the LaunchedEffect below to scope a subscription that pushes updates to it val model = remember fileModel files value candidates value Monitor candidates and notify the model of updates LaunchedEffect model snapshotFlow runs the block and emits its result whenever any snapshot state read by the block was changed snapshotFlow Pair files value candidates value collect currentFiles currentCandidates gt assume this call internally invokes fireDataTableChanged model updateFilesAndCandidates currentFiles currentCandidates Don t recreate the swing UI elements on every recomposition val pane = remember model JScrollPane FileTable model SwingPanel pane ```

nfrankel · Answer

thanks < Adam Powell> i ll look at it tomorrow i m in europe i really appreciate all the time you give me man bowing

nfrankel · Answer

i ve updated the code according to your snippet good stuff i don t need to move out of the replacement field to refresh the table still it doesn t handle the initial issue when i click on the button it rename files so the source of any change is the filesytem itself which is of course out of the scope of compose from the button is there any way to call the compose refresh behavior

nfrankel · Answer

sorry it seems i don t get it disappointed

Adam Powell · Answer

which data do you want to refresh from the button

nfrankel · Answer

the button rename the files so i want `files` to be refreshed `candidates` is derived data so it will be updated automatically

nfrankel · Answer

and `files` is getting the children of the `path` which doesn t change by itself

nfrankel · Answer

as a brute force option is there a function to tell compose to re compose

nfrankel · Answer

i managed to get it working by using a dummy variable forcing recomposition

nfrankel · Answer

tada

Adam Powell · Answer

there is a function to tell it to recompose a scope but reaching for it usually means there s a better way to structure the data flow ``` Composable fun MyComposable val recomposeMe = invalidate returns an invalidator for this current scope Button onClick = recomposeMe ``` is how you use it

Adam Powell · Answer

This is again where I would define a class with properties backed `by mutableStateOf` this class would be your data model that holds `files` and the other derived properties and you would `remember` an instance of it rather than several disjoint state objects Then you can define a `refresh ` function on that class which performs the refresh sets `files value` and then any necessary recomposition happens as a result of that data change

nfrankel · Answer

now i think i understand slightly smiling face

kenkyee · Answer

It d help to read up on Redux or MVI architectures

nfrankel · Answer

< Adam Powell> i ve pushed what i believe is a final version of the code following your advices feedback is welcome slightly smiling face

Adam Powell · Answer

Took a look a few things 1 All of the custom get set property methods in StateModel can be skipped thanks to property delegation There s an IDE bug that can hinder auto import for `androidx compose runtime getValue` and `androidx compose runtime setValue` but you can import them manually Then you can write ```var path by mutableStateOf initialPath ``` and skip all of the plumbing code 2 I think you can avoid `tracker` entirely now 3 You probably don t want filesystem operations in the `derivedStateOf` expression those are intended to be very quick and that looks like a thread blocking operation Chances are you want something like this in StateModel ```var files by mutableStateOf lt List lt File gt gt emptyList private set suspend fun keepFilesUpdated = withContext <http Dispatchers IO|Dispatchers IO> snapshotFlow path mapNotNull File it listFiles filter it isHidden amp amp it isFile toList sortedBy it name collect files = it ``` and then call that method in a `LaunchedEffect state ` block similar to the other one that s there already It s a little more complicated since now there s other async operations to manage the scope of but `LaunchedEffect` is pretty effective for that

nfrankel · Answer

1 good catch about the import i didn t understand why the samples didn t work sweat smile 2 `tracker` is still necessary to let compose know that it should trigger the read from the FS again if i remove it it doesn t work 3 i understand your point i ll check but for my current needs it s good enough thanks again for your help