views-dsl-ide-preview

Views DSL IDE preview

Preview UIs made with Splitties Views DSL.

This split provides a class named UiPreView that you can use in xml layout files to preview your Ui subclasses made using Views DSL.

To avoid embedding unused code in your production app, add the dependency only for the debug buildType (using debugImplementation in your gradle file) and put the preview xml layout files in the src/debug/res/layout/ directory (not in src/main/res/layout/).

Example

Below is a preview xml layout example that the IDE can display. It assumes there's a class implementing Ui named MainUi in the main subpackage (relative to the app/library package name).

<splitties.views.dsl.idepreview.UiPreView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:splitties_class_package_name_relative="main.MainUi"/>

Here's a screenshot of how it looks like with DemoUi from the sample after the compileDebugKotlin gradle task has been run:

Important info

Interfaces parameters

In order for preview to work, your Ui subclass need to have its first parameter of type Context. For the subsequent parameters (if applicable), any interface is supported, but its methods need to not be called when this view is created and drawn, or an exception will be thrown.

A special support has been added for CoroutineContext and CoroutineScope, so there's no exception thrown if you use an actor or other code relying on coroutines at init or drawing time.

Known issues and their workaround

• If preview doesn't work or doesn't reflect latest changes, it's likely because you didn't execute the compileDebugKotlin gradle task on your project (module actually). IDE preview currently only works with compiled classes and xml layouts. Running the compileDebugKotlin gradle task will save you time as it doesn't involve all the subsequent tasks that package a full apk.

Finding a suitable constructor to instantiate your UI

UiPreView is compatible with Ui implementations with two kind of constructors:

• Constructors with a single Context parameter.
• Constructors whose first parameter is a Context and other parameters are interfaces. Note that the interface methods need to not be called during preview, or an UnsupportedOperationException will be raised because UiPreView can only create stub implementations. You can use View.isInEditMode to skip code for preview if really needed.

Finding the class

When using the splitties_class_package_name_relative attribute, the UiPreView class will take the packageName returned from the Context and append a dot plus the value of the attribute to get the class name of your Ui implementation.

However, you may have configured your build so your debug buildType has an applicationId suffix that is usually .debug like show in the example below:

buildTypes {
    debug {
        applicationIdSuffix ".debug" // This changes the packageName returned from a Context
        versionNameSuffix "-DEBUG"
    }
    release {
        // Config of your release build
    }
}

That's why by default, the UiPreView class will drop any .debug suffix found in the package name before trying to instantiate the class. If you use another suffix, or have other suffixes for other debuggable buildTypes, or use productFlavors, you're in luck! The package name suffix to drop is configurable from your resources.

Just copy paste the string resource below in your project in a value resource file named something like config.xml or do_not_translate.xml, and edit it to the suffix you use:

<string name="splitties_views_dsl_ide_preview_package_name_suffix" translatable="false">.debug</string>

This will override the default value from the library.

Alternatively, you can use the splitties_class_fully_qualified_name attribute instead and specify the full class name with its package.

Download

debugImplementation("com.louiscad.splitties:splitties-views-dsl-ide-preview:$splitties_version")