127 lines
3.5 KiB
PHP
127 lines
3.5 KiB
PHP
<?php
|
|
|
|
require_once __DIR__ . '/../vendor/autoload.php';
|
|
|
|
use PHPNative\Framework\Application;
|
|
use PHPNative\Ui\Widget\Button;
|
|
use PHPNative\Ui\Widget\Container;
|
|
use PHPNative\Ui\Widget\Label;
|
|
|
|
// Create application
|
|
$app = new Application('Async HTTP Request Example', 900, 700);
|
|
|
|
// Create UI
|
|
$container = new Container('flex flex-col p-6 gap-3 bg-gray-100');
|
|
|
|
$title = new Label(
|
|
text: 'Asynchrone HTTP Requests Demo',
|
|
style: 'text-2xl text-gray-900 mb-4'
|
|
);
|
|
|
|
$statusLabel = new Label(
|
|
text: 'Bereit zum Laden...',
|
|
style: 'text-base text-gray-700 p-2 bg-white rounded'
|
|
);
|
|
|
|
// Button for fetching JSON data
|
|
$fetchButton = new Button(
|
|
text: 'JSON API abrufen',
|
|
style: 'bg-green-500 hover:bg-green-700 text-white p-3 rounded-lg'
|
|
);
|
|
|
|
$resultLabel = new Label(
|
|
text: '',
|
|
style: 'text-sm text-gray-800 p-3 bg-white rounded whitespace-pre-wrap'
|
|
);
|
|
|
|
// Set async handler for JSON fetch
|
|
$fetchButton->setOnClickAsync(
|
|
onClickAsync: function() {
|
|
// Fetch data from API (example: JSON placeholder)
|
|
$url = 'https://jsonplaceholder.typicode.com/todos/1';
|
|
|
|
$context = stream_context_create([
|
|
'http' => [
|
|
'timeout' => 10,
|
|
'method' => 'GET',
|
|
]
|
|
]);
|
|
|
|
$response = @file_get_contents($url, false, $context);
|
|
|
|
if ($response === false) {
|
|
throw new \Exception('Failed to fetch data');
|
|
}
|
|
|
|
return json_decode($response, true);
|
|
},
|
|
|
|
onComplete: function($data) use ($statusLabel, $resultLabel) {
|
|
$statusLabel->setText('✓ Daten erfolgreich geladen!');
|
|
|
|
$formatted = "ID: " . ($data['id'] ?? 'N/A') . "\n";
|
|
$formatted .= "Titel: " . ($data['title'] ?? 'N/A') . "\n";
|
|
$formatted .= "Erledigt: " . (($data['completed'] ?? false) ? 'Ja' : 'Nein');
|
|
|
|
$resultLabel->setText($formatted);
|
|
},
|
|
|
|
onError: function($error) use ($statusLabel, $resultLabel) {
|
|
$statusLabel->setText('✗ Fehler aufgetreten');
|
|
$resultLabel->setText('Error: ' . $error->getMessage());
|
|
}
|
|
);
|
|
|
|
// Button for simulating slow operation
|
|
$slowButton = new Button(
|
|
text: 'Langsame Operation (5s)',
|
|
style: 'bg-orange-500 hover:bg-orange-700 text-white p-3 rounded-lg'
|
|
);
|
|
|
|
$slowButton->setOnClickAsync(
|
|
onClickAsync: function() {
|
|
$startTime = microtime(true);
|
|
|
|
// Simulate heavy computation
|
|
sleep(5);
|
|
|
|
$endTime = microtime(true);
|
|
$duration = round($endTime - $startTime, 2);
|
|
|
|
return [
|
|
'message' => 'Operation abgeschlossen',
|
|
'duration' => $duration . ' Sekunden'
|
|
];
|
|
},
|
|
|
|
onComplete: function($result) use ($statusLabel, $resultLabel) {
|
|
$statusLabel->setText('✓ Operation abgeschlossen!');
|
|
$resultLabel->setText(
|
|
$result['message'] . "\n" .
|
|
'Dauer: ' . $result['duration']
|
|
);
|
|
},
|
|
|
|
onError: function($error) use ($statusLabel, $resultLabel) {
|
|
$statusLabel->setText('✗ Fehler bei Operation');
|
|
$resultLabel->setText('Error: ' . $error->getMessage());
|
|
}
|
|
);
|
|
|
|
// Add all components
|
|
$container->addComponent($title);
|
|
$container->addComponent($statusLabel);
|
|
$container->addComponent($fetchButton);
|
|
$container->addComponent($slowButton);
|
|
$container->addComponent($resultLabel);
|
|
|
|
// Info label
|
|
$infoLabel = new Label(
|
|
text: 'Die UI bleibt während der Requests responsive!',
|
|
style: 'text-xs text-gray-500 mt-4 italic'
|
|
);
|
|
$container->addComponent($infoLabel);
|
|
|
|
// Run application
|
|
$app->setRoot($container)->run();
|