Getting Started
This guide provides a quick start to integrating Televo View into your iOS or Android application. Televo View is a powerful tool that allows you to build dynamic user interfaces from data fetched from a server or local cache. Follow the steps below to get started.
- android
- iOS
1. Android Studio Integration
Add the Televo.aar and License File
-
Create a libs folder inside the /app directory.
-
Add the televo.aar file into the libs folder.
-
Open the application-level
build.gradle
file and add the following dependency:implementation files('libs/televo.aar')
-
Place the provided license file inside /app/src/main/assets.
2. Initialize the Televo Dependency Globally
Initialize Televo globally by passing the applicationContext
:
package com.example.televoExample
import android.app.Application
import com.televo.Televo
class TelevoApplication: Application() {
override fun onCreate() {
super.onCreate()
Televo.init(applicationContext, "YOUR_LICENSE_FILE.lic")
}
}
3. UI Integration with Televo
For XML-Based Projects
After initializing Televo globally in the application, incorporate TelevoView
into your XML layouts to leverage Televo's dynamic UI features. Add TelevoView
to your XML layout as follows:
<com.televo.view.TelevoView
android:layout_margin="10dp"
android:id="@+id/televoView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/txt_view" />
XML Attributes Description
android:layout_margin
: Sets the margin aroundTelevoView
.android:id
: Assigns a unique identifier toTelevoView
.android:layout_width
andandroid:layout_height
: Define the dimensions ofTelevoView
.app:layout_constraintTop_toBottomOf
: PositionsTelevoView
relative to another component in your layout.
Initialization in Java/Kotlin
Initialize TelevoView
in your activity or fragment as follows:
TelevoView televoView = findViewById(R.id.televoView);
JSONObject jObject = new JSONObject(data); // 'data' should be your JSON string
televoView.initialize(customErrorView, jObject, (route, componentString) -> {
Intent intent = new Intent(getActivity(), SecondActivity.class);
intent.putExtra("data", componentString);
startActivity(intent);
return null;
});
For Jetpack Compose Projects
If your project utilizes Jetpack Compose, you can integrate TelevoView
using the following approach:
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.*
import com.televo.view.TelevoLayout
import org.json.JSONObject
class YourComposeActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val data = "YOUR_SERVER_RESPONSE_STRING" // Replace with your actual data
val jObject = JSONObject(data)
setContent {
TelevoLayoutComposable().setUpTelevoContent(
jsonData = jObject,
onNavigate = null, // Navigation handler
modifier = Modifier.fillMaxSize()
)
}
}
}
Important Configuration Notes
Ensure your project's Kotlin version and Compose settings are aligned with Televo's requirements for a smooth integration:
composeOptions {
kotlinCompilerExtensionVersion = "1.5.3"
}
plugins {
id("org.jetbrains.kotlin.android") version "1.9.10" apply false
}
4. Troubleshooting
1. Exclude Transitive Dependencies
In case you encounter errors due to duplicate dependencies, you can exclude transitive dependencies from your app to avoid conflicts. Add the following configuration in your build.gradle
file:
dependencies {
implementation("some-library") {
exclude(group = "com.example.imgtools", module = "native")
}
}
2. Include Dependencies
Below mentioned are the dependencies that are included within the Televo package:
-
Network Image Loading
io.coil-kt:coil-compose:2.4.0
-
JSON Parsing
com.google.code.gson:gson:2.10.1
-
Lottie Animations
com.airbnb.android:lottie-compose:6.0.1
-
ExoPlayer
com.google.android.exoplayer:exoplayer:2.19.1
-
Image Carousel
com.google.accompanist:accompanist-pager:0.22.0-rc
-
Security Provider
org.bouncycastle:bcprov-jdk18on:1.71
In case you encounter errors related to missing dependencies of Jetpack Compose, add the following dependencies to the application build.gradle
:
-
Jetpack Compose
platform("androidx.compose:compose-bom:2024.05.00")
androidx.compose.ui:ui
androidx.compose.runtime:runtime
androidx.compose.ui:ui-tooling
androidx.compose.material:material
androidx.compose.foundation:foundation
androidx.compose.foundation:foundation-layout
androidx.navigation:navigation-compose:2.7.7
androidx.navigation:navigation-runtime-ktx:2.7.7 -
Constraint Layout
androidx.constraintlayout:constraintlayout-compose:1.0.1
-
Material Design
androidx.compose.material3:material3:1.2.1
androidx.compose.material:material-icons-extended
1. Xcode Project Integration
Add License File
Ensure your Televo license file (e.g., televo_demo_license.lic
) is included in your application bundle.
Add Televo.xcframework
- In Xcode, navigate to:
- Targets -> General -> Frameworks, Libraries, and Embedded Content
- Drag and drop the
Televo.xcframework
under this section or add it by clicking on the "+" icon -> Add Other -> Add Files. Browse for the.xcframework
and select OPEN. - Ensure "Embed & Sign" is enabled for
Televo.xcframework
.
2. Global Televo Initialization
Initialize Televo globally when your app launches to make it accessible throughout your app:
import SwiftUI
import Televo
@main
struct YourAppNameApp: App {
let televo = Televo(Bundle.main, fileName: "televo_demo_license", fileExtension: "lic", retries: 3) // Replace with your actual file name
var body: some Scene {
WindowGroup {
ContentView()
.environment(\.televoFramework, televo) // Inject Televo instance into the environment
}
}
}
// Custom EnvironmentKey for Televo access
private struct TelevoFrameworkKey: EnvironmentKey {
static let defaultValue: Televo? = nil
}
extension EnvironmentValues {
var televoFramework: Televo? {
get { self[TelevoFrameworkKey.self] }
set { self[TelevoFrameworkKey.self] = newValue }
}
}
3. UI Rendering with Televo
SwiftUI Integration
Use UIViewRepresentable
to seamlessly integrate Televo's UI views into your SwiftUI projects.
struct TelevoRepresentable: UIViewRepresentable {
let televo: Televo
let component: [String: Any]
let errorView: UIView // Error view (SwiftUI or UIKit)
func makeUIView(context: Context) -> UIView {
return televo.makeView(component, errorView: errorView)
}
func updateUIView(_ uiView: UIView, context: Context) {}
}
component
defines the structure of the UI you want to render.errorView
is shown if there are licensing issues.
Example Usage (SwiftUI)
import SwiftUI
import Televo
struct ContentView: View {
@StateObject var vm = DemoViewModel()
@Environment(\.televoFramework) var televo // Access Televo from the environment
var body: some View {
NavigationStack {
if vm.isLoading {
ProgressView()
} else {
if let televo = televo { // Unwrap the optional Televo instance
VStack {
TelevoRepresentable(televo: televo, component: vm.sduiComponent, errorView: UIHostingController(rootView: ErrorView()).view)
}
.padding()
} else { // Display an error if Televo couldn't be accessed
Text("Error using Televo")
}
}
}
}
}
4. Key Improvements
- Global Access: Televo is initialized in your app's main struct and injected into the environment, making it easily accessible in any view.
5. Important Considerations
- License File: Replace
"televo_demo_license.lic"
with your actual license file name and extension. - Component Dictionary: The structure of
vm.sduiComponent
is defined by Televo's UI design tools. Refer to their documentation for guidance.
By following these steps, you will have successfully integrated the Televo framework into your Xcode project, enabling you to render dynamic UI components defined by Televo within your SwiftUI application.