Why Server-Side Driven UI?

Server-Side Driven UI (SSDU) is the future of mobile development, allowing for centralized UI management:

• Real-Time Updates: Make UI changes instantly by updating server configurations.
• Reduced App Update Cycles: No need to publish new app versions for design tweaks.
• Personalized Experiences: Dynamically adjust layouts and content for individual users based on server-driven logic.

Table of Contents

• Installation
• Usage
  • Setting Up Configuration
  • Loading a Screen
  • Event Listeners
• Components
• Customization
• License

Installation

1. Add the Jitpack repository to your root build.gradle file:

   allprojects {
       repositories {
           ...
           maven { url 'https://jitpack.io' }
       }
   }
   

2. Add the dependency to your module's build.gradle file:

   dependencies {
       implementation ("com.github.vvsdevs:AndroidDynamicJetpackCompose:1.9.0") 
      //Optional
       implementation("com.google.dagger:hilt-android:2.51.1")
       kapt("com.google.dagger:hilt-compiler:2.51.1")
       implementation("androidx.navigation:navigation-compose:2.8.2")
       implementation("androidx.activity:activity-compose:1.9.2") 
   }
   

Usage

Setting Up Configuration

Create a configuration for your layout using the RemoteComposeConfig class:

val config = RemoteComposeConfig(
    baseUrl = "https://your-server-url.com/",
    uiComponentPath = "compose.json",
    screenPath = "compose_screen1.json"
)

@AndroidEntryPoint
class MainActivity : ComponentActivity(), ComposeCallback {
    @Inject
    lateinit var mainPresenter: MainPresenter

    private val config = RemoteComposeConfig(
        baseUrl = "https://example.com/",
        uiComponentPath = "compose.json",
        screenPath = "compose_screen1.json"
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mainPresenter.initialize(config)
        mainPresenter.attachView(this)
        mainPresenter.loadUiComponents()
        setContent { MyApp() }
    }
}

Loading a Screen

1. Inject the MainPresenter and initialize it:

@Inject
lateinit var mainPresenter: MainPresenter

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    mainPresenter.initialize(config)
    mainPresenter.attachView(this)
    mainPresenter.loadUiComponents()
    setContent { MyApp() }
}

2. Use the DynamicLayout composable to render the screen dynamically:

private var uiComponent by mutableStateOf<UIComponent?>(null)
private var errorMessage by mutableStateOf("")

override fun showError(message: String) {
  this.errorMessage = message
  Log.e("MainActivity", "Error: $message")
  Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
}

override fun showComponents(components: UIComponent) {
  uiComponent = components
  Log.d("MainActivity", "Components loaded:  $components")
}

//customization
@Composable
fun MyApp() {
  DynamicLayout(uiComponent, navController, mainPresenter)
}

@Composable
fun MyApp() {
  val context = LocalContext.current
  val navController = rememberNavController()
  BackHandler(enabled = true) {
    if (!navController.popBackStack()) {
      (context as? ComponentActivity)?.finish()
    }
  }
  Scaffold(
    topBar = {
      TopAppBar(
        title = { Text("Top Bar") },
        actions = {
          // Add any actions if needed
        }
      )
    },
    floatingActionButton = {
      FloatingActionButton(onClick = { mainPresenter.loadUiComponents() }) {
        Text("+")
      }
    }
  ) { paddingValues ->
    Box(modifier = Modifier.padding(paddingValues)) {
      NavHost(navController, startDestination = "mainScreen") {
        composable("mainScreen") {
          uiComponent?.let {
            DynamicLayout(it, navController, mainPresenter)
          }
        }
        composable("navigate/{screenId}") { backStackEntry ->
          val screenId = backStackEntry.arguments?.getString("screenId")
          screenId?.let {
            LaunchedEffect(Unit) {
              mainPresenter.loadScreenById(it) { success ->
                if (!success) {
                  Toast.makeText(
                    context,
                    "Design for $screenId not found",
                    Toast.LENGTH_SHORT
                  ).show()
                }
              }
            }
          }
          uiComponent?.let {
            DynamicLayout(it, navController, mainPresenter)
          }
        }
      }
    }
  }
}

Event Listeners

3. Event listeners are defined in JSON and handled using the handleAction function in your Kotlin code.

fun handleAction(action: String, context: Context, mainPresenter: MainPresenter) {
    when (action) {
        "navigateToScreen" -> { /* Handle screen navigation */ }
        "fetchData" -> { /* Fetch data from the server */ }
        else -> { /* Default action */ }
    }
}

Supported UI Components

• Text: Displays text with customizable color, font size, and alignment.
• Image: Loads images from URLs with scaling options.
• Button: Configurable with actions, background color, and text color.
• TextField: Editable input fields for user data entry.
• Card: Displays content with elevation and rounded corners.
• Column/Row: Organizes child components vertically or horizontally.
• ScrollView: Scrollable layout for vertical content.
• Divider: Adds a horizontal line between components.
• Switch/Checkbox: Toggles for user interactions.
• LazyColumn: Optimized for displaying a vertical list of components efficiently.
• LazyRow: Optimized for displaying a horizontal list of components efficiently.
• Spacer: Adds spacing between components for layout adjustments.
• Box: A container component that holds child components with customizable alignment.
• Slider: Allows users to select a value from a continuous range.
• ProgressBar: Displays a visual representation of progress.
• FloatingActionButton: A button with an icon for prominent actions.
• Container: Groups multiple components and screens together.
• Screen: Holds the content and layout for individual screens.

Android Remote Jetpack Compose Manual

Table of Contents

• Introduction
• Components
  • ContainerComponent
  • ScreenComponent
  • TextComponent
  • ButtonComponent
  • ImageComponent
  • CardComponent
  • ColumnComponent
  • RowComponent
  • LazyColumnComponent
  • LazyRowComponent
  • ScrollViewComponent
  • SpacerComponent
  • BoxComponent
  • TextFieldComponent
  • DividerComponent
  • IconComponent
  • SwitchComponent
  • CheckboxComponent
  • SliderComponent
  • ProgressBarComponent
  • FloatingActionButtonComponent
• ModifierData
• Event Handling
• Applying Modifiers

Introduction

This manual provides detailed information on how to use and configure the components available in the Android Remote Jetpack Compose library. Each component is customizable with various properties and modifiers to fit your needs.

Components

ContainerComponent

A container that holds multiple components.

• screens: List of ScreenComponent objects.
• children: List of UIComponent objects inside the container.
• modifier: Optional ModifierData for styling.

ScreenComponent

Represents a screen that holds multiple components.

• id: Unique identifier for the screen.
• children: List of UIComponent objects inside the screen.
• modifier: Optional ModifierData for styling.

TextComponent

Displays a piece of text with customization options.

• text: The text to display.
• modifier: Optional ModifierData.
• color: Text color in hex.
• fontSize: Font size.
• fontStyle: Style (e.g., italic, normal).
• textAlign: Text alignment (e.g., center,