Managing State Views

The XXXDefaultStateView

Your `XXXDefaultStateView` provides access to your entire `XXXState`

By default, your XXXDefaultStateView will provide accessors for all the root objects you add to your XXXState using a generate command with the form:

generate state YourExampleRoot

AFib achieves this by adding the accessor to the XXXStateModelAccess mixin, which is referenced by both your XXXDefaultStateView and XXXState.

You can add additional third party data to your state view

By default, the file:

lib/state/stateviews/xxx_default_state_view.dart

Will contain a class like:

//--------------------------------------------------------------------------------------
mixin XXXDefaultStateViewModelsMixin<TRouteParam extends AFRouteParam> {

  //--------------------------------------------------------------------------------------
  List<Object?> createStateModels(AFBuildStateViewContext<XXXState, TRouteParam> context) {
    final state = context.stateApp;
    return state.allModels.toList();
  }
}

The objects returned by this function will be included at the root of your state view. By default, this function returns all the root objects from your overall application state (XXXState). However, you can add additional objects. For example, if you were using the AFib Chat Support third party library, you might do:

//--------------------------------------------------------------------------------------
mixin XXXDefaultStateViewModelsMixin<TRouteParam extends AFRouteParam> {

  //--------------------------------------------------------------------------------------
  List<Object?> createStateModels(AFBuildStateViewContext<XXXState, TRouteParam> context) {
    final state = context.stateApp;
    final models = state.allModels.toList();
    final afahState = context.accessComponentState<AFAHState>();
    models.addAll(afahState.allModels);
    return models;
  }
}

You could then access the AFAHState root models in your XXXDefaultStateView using syntax like:

AFAHSupportThreadsRoot get supportThreads => findType<AFAHSupportThreadsRoot>();

Creating Custom State Views

Most applications will find the default state view sufficient. However, you can create an additional state view using the command:

dart bin/xxx_afib.dart generate state OtherStateView

Which will create a file called:

state/state_views/other_state_view.dart

Again, that file will contain an XXXOtherStateViewModelsMixin mixin, and you can use it to determine which objects exist at the root of that particular state view. On the state view itself, you can provide access to those models using the same syntax found in your XXXStateModelAccess mixin, which looks like:

  XXXSettings get settings { return findType<XXXSettings>!; }

Converting an existing UI element to a different state view

Note that in order to make a UI element use a state view, you must change several definitions at the top of the UI element's class. In the example below, its fairly obvious that you would need to change XXXDefaultStateView to XXXOtherStateView in the template parameters.

But also note that the static final config definition, currently called XXXDefaultScreenConfig, would need to be changed to XXXOtherScreenConfig. That screen config class is also defined in the other_state_view.dart file.

class HomePageScreenSPI extends XXXScreenSPI<XXXDefaultStateView, HomePageScreenRouteParam> {
  const HomePageScreenSPI(AFBuildContext<XXXDefaultStateView, HomePageScreenRouteParam> context, AFStandardSPIData standard): super(context, standard);

  factory HomePageScreenSPI.create(AFBuildContext<XXXDefaultStateView, HomePageScreenRouteParam> context, AFStandardSPIData standard) {
    return HomePageScreenSPI(context, standard,
    );
  }
}

class HomePageScreen extends XXXConnectedScreen<HomePageScreenSPI, XXXDefaultStateView, HomePageScreenRouteParam> {
  static final config = XXXDefaultScreenConfig<HomePageScreenSPI, HomePageScreenRouteParam> (
    spiCreator: HomePageScreenSPI.create,
  );
  ....