Se recomienda la conexión asíncrona para que el código se ejecute en el navegador de su cliente.

El widget de conexión asíncrona no bloqueará la carga del contenido principal.

Si resulta completamente inaccesible, no causará ningún error ni romperá la funcionalidad principal del sitio web.

Para integrar el widget, inserte el siguiente código al final del cuerpo del documento:

<script>
	(function (w, d, s, o)  { 
		var f = d.getElementsByTagName(s)[0];
		var j = d.createElement(s);
		w.TTLStreamReady = new Promise((resolve) =>  { 
			j.async = true;
			j.src = '//content.24ttl.stream/widget.js';
			f.parentNode.insertBefore(j, f);
			j.onload = function ()  { 
				w.ttlStream = new TTLStream(o);
				resolve(w.ttlStream);
			};
		});
	})(window, document, 'script',  { });
</script>
								

¡Ahora el widget está listo para su funcionamiento!

Este tipo de contenido es una landing pafe con imágenes, texto y vídeo.

Para facilitar su uso, el widget proporciona dos métodos de operación:

- findAndInsert: este método permite encontrar contenido enriquecido e insertarlo automáticamente en el bloque;

- find: un método es similar a findAndInsert, que además proporciona la capacidad de manejar el contenido.

Ejemplo de contenido de transmisión

Flutter plugin para crear widgets 24STREAM Rich Page.

Instalación

Para llevar a cabo la instalación, agregue stream24 a las dependencias dentro del archivo pubspec.yaml de su proyecto.

dependencies:
  ...
  stream24: ^0.1.2
...

Uso

Stream24RichPage

El widget Webview con contenido enriquecido y ajuste automático de altura.

getHtml

Devuelve el código HTML de la página como una cadena.

Ejemplos de uso

Usando Stream24RichPage

import 'package:flutter/material.dart';
import 'package:stream24/stream24.dart';
import 'package:stream24/rich_page.dart';
import 'package:webview_flutter/webview_flutter.dart';



class WebViewPage extends StatefulWidget  { 
  WebViewPage( { super.key});
  @override
  State<WebViewPage> createState() => _WebViewPageState();
}
class _WebViewPageState extends State<WebViewPage>  { 
  @override
  Widget build(BuildContext context)  { 
    return  Stream24RichPage(
            brand: 'Samsung',
            productId: '16651081549',
            retailerDomain: 'irshad.az',
            templateType: 'master_template',
            contentType: Stream24ContentType.shopInShops,
            onError: (errorMsg) {  print(errorMsg); }
        );
    }
}

O

Usando getHtml

import 'package:flutter/material.dart';
import 'package:stream24/stream24.dart';
import 'package:webview_flutter/webview_flutter.dart';



class WebViewPage extends StatefulWidget  { 
  WebViewPage( { super.key});
  @override
  State<WebViewPage> createState() => _WebViewPageState();
}



class _WebViewPageState extends State<WebViewPage>  { 
  late WebViewController controller;
    double height = 120;



  @override
  void initState()  { 
    super.initState();
       controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)



       // para ajustar automáticamente la altura, agregue el siguiente bloque
      ..addJavaScriptChannel("FlutterWebviewHeight",
          onMessageReceived: (JavaScriptMessage msg)  { 
        setState(()  { 
          height = double.tryParse(msg.message) ?? 0;
        });
      })
      //////////////////////////////////////////////////////////////////



      // si desea mostrar errores en contenido 404, agregue el siguiente bloque
      ..addJavaScriptChannel("FlutterError",
          onMessageReceived: (JavaScriptMessage msg)  { 
            
        throw Exception(msg.message);
      })
      //////////////////////////////////////////////////////////////////



      ..loadHtmlString(Stream24.getHtml(
          brand: 'Samsung',
          productId: '16651081549',
          retailerDomain: 'irshad.az',
          templateType: 'master_template',
          contentType: Stream24ContentType.shopInShops));
  }



  @override
  Widget build(BuildContext context)  { 
    return SizedBox(
        height: height,
        child: WebViewWidget(
          controller: controller,
        ),
    );
  }
}

Plugin de Android para utilizar widgets Rich Page de 24STREAM.

Instalación

Para llevar a cabo la instalación, necesitará agregar JitPack a la lista de repositorios (si aún no lo ha hecho). En proyectos antiguos, en el archivo build.gradle principal, agregue maven { url 'https://jitpack.io' } dentro del bloque allprojects->repositories:

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

En proyectos nuevos, se agrega en settings.gradle. Debe especificarse en dependencyResolutionManagement->repositories:

dependencyResolutionManagement  { 
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories  { 
        ...
        maven  {  url 'https://jitpack.io' }
    }
}

Luego, debe agregar el propio plugin a las dependencias (en el build.gradle del módulo de la aplicación):

dependencies  { 
    ...
    implementation 'stream.24ttl.git.pub:24stream_android:0.5.3'
}

Uso

RichPage

Widget de WebView con contenido enriquecido y ajuste automático de altura.

GetHTML

Devuelve el código HTML de la página como una cadena.

Ejemplos de uso

Usando RichContent

import stream.ttl24.stream24.Stream24

class MainActivity : ComponentActivity()  { 
    override fun onCreate(savedInstanceState: Bundle?)  { 
        super.onCreate(savedInstanceState)
        val rich = Stream24.RichContent(LocalContext.current, LocalDensity.current, "irshad.az", "Samsung", "16651081549",  "master_template", ::onError, "ru_ru",  Stream24.Stream24ContentType.shopInShops)
        setContentView(rich)
    }
}


fun onError(errorMessage:String) { 
    print(errorMessage)
}

Usando GetHtml

import stream.ttl24.stream24.Stream24

class MainActivity : ComponentActivity()  { 
    override fun onCreate(savedInstanceState: Bundle?)  { 
        super.onCreate(savedInstanceState)
        val webview = WebView(this)
        val html = Stream24.GetHTML("Samsung", "16651081549", "irshad.az", "master_template", Stream24.Stream24ResultType.html, Stream24.Stream24ContentType.shopInShops)
        webview.getSettings().javaScriptEnabled = true
        webview.loadData(html,
            "text/html", "UTF-8")
        setContentView(webview)
    }
}

Plugin de iOS para crear widgets Rich Page de 24STREAM.

Instalación

24STREAM está disponible en CocoaPods y Swift Package Manager. Para instalar a través de Cocoapods, agregue la siguiente línea al Podfile:

pod '24stream'

Para instalar a través del Administrador de paquetes Swift:

File -> Add packages... -> Escríbelo en la búsqueda 'https://git.24ttl.stream/pub/24stream_swift' -> Add package

Uso

Primero, importe el plugin: import _24stream. Luego podrá utilizar las funciones del plugin:

WebView

Ejemplo

import SwiftUI
import _24stream

struct ExamplePage: View  { 

    // necesario para el cálculo automático de la altura
    @State var richHeight: CGFloat = 0
    func setHeight(height:Float )  { 
        richHeight = CGFloat(height)
    }

    // para manejar cualquier error
    func onError(error: String)  { 
        print(error)
    }
    
    var body: some View   { 
        ScrollView { 
            RichPage(  brand: "TestBrand",
                       retailerDomain: "24ttl.ru",
                       productId: "920-969696",
                       templateType: "master_template",
                       language: "ru",
                       page: "index.html",
                       contentType: _24StreamContentType.minisite,
                       onHeightSet: setHeight,
                       onError: onError).frame(height:richHeight)
        }
        
    }
}

struct ExamplePage_Previews: PreviewProvider  { 
    static var previews: some View  { 
        ExamplePage()
    }
}