Změna obrázku po kliknutí na tlačítko
- Alyxx
- Člen | 9
Dobrý den, už druhý den se snažím vymyslet jak propojit tlačítka
v latte s presenterem kvůli vykreslování obrázků.
Princip je takový, že v presenteru mám paths k obrázkům v poli, odkud je
posílám na vykreslení do latte a potřebuji po kliknutí na tlačítko
změnit obrázek. Problém je že pracuji na verzi Nette 2.3 a php
7.1. Děkuji za nápad či odpověď.
- nightfish
- Člen | 519
@Alyxx Pokud něco potřebuješ udělat po kliknutí na tlačítko
v PHP, tak tlačítko buď musí být součástí formuláře nebo to musí
být odkaz (např. na signál). Předání správných dat do šablony pak
dosáhneš v onSuccess()
metodě formuláře nebo handle metodě
signálu.
Tohle jsou zrovna věci, které se mezi Nette 2.3 a PHP 7.1 a aktuálním Nette/PHP neliší, snad s výjimkou PHP syntaxe.
- Alyxx
- Člen | 9
nightfish napsal(a):
@Alyxx Pokud něco potřebuješ udělat po kliknutí na tlačítko v PHP, tak tlačítko buď musí být součástí formuláře nebo to musí být odkaz (např. na signál). Předání správných dat do šablony pak dosáhneš v
onSuccess()
metodě formuláře nebo handle metodě signálu.Tohle jsou zrovna věci, které se mezi Nette 2.3 a PHP 7.1 a aktuálním Nette/PHP neliší, snad s výjimkou PHP syntaxe.
Děkuji za odpověď, tohle mi vůbec nedošlo. Je nějaká možnost jak mít image a form ve stejné komponentě, případně z form komponenty měnit promněnné v image komponentě?
- nightfish
- Člen | 519
@Alyxx
Jak v tuto chvíli vypadá kód tvého presenteru (stačí ta část
v presenteru mám paths k obrázkům v poli, odkud je posílám na
vykreslení do latte) a kód šablony (která hádám nějak ty obrázky a
tlačítka vykresluje)?
Kód nemusí fungovat, ani dělat to co potřebuješ, ale bude jednodušší se
bavit o konkrétním kódu než tu řešit rozdělení neznámého kódu do
komponent…
- Alyxx
- Člen | 9
nightfish napsal(a):
@Alyxx
Jak v tuto chvíli vypadá kód tvého presenteru (stačí ta část v presenteru mám paths k obrázkům v poli, odkud je posílám na vykreslení do latte) a kód šablony (která hádám nějak ty obrázky a tlačítka vykresluje)?
Kód nemusí fungovat, ani dělat to co potřebuješ, ale bude jednodušší se bavit o konkrétním kódu než tu řešit rozdělení neznámého kódu do komponent…
Kód presenteru vypadá následovně, omlouvám se za pozdní odpověď ale neměl jsem k tomu přes víkend přístup.
public function createComponentTestPatra(): Form
{
$form = new Form;
$branch_office_id = 1;
$idtest = 8;
$idZamestnanec = $this->template->google = $this->googleMap
->getidZamestnanec($idtest);
$idZakaznik = $this->template->google = $this->googleMap
->getidZakaznik($idZamestnanec);
;
$branch_office_id =$this->template->google = $this->googleMap
->getidPobockaZakaznik($idZakaznik);
$img_paths =
$this->template->patra = $this->googleMap
->getImgPath($branch_office_id[0]);
$imgSelect = $form->addSelect('path', 'Img_paths:', $img_paths);
$form->addButton('previous','Previous')
->setHtmlAttribute('onclick','ahoj()');
$form->addButton('next','Next');
return $form;
}
public function ahoj()
{
echo ("Ahoj");
}
public function renderDefault()
{
/*$form = new Form;
$form->addButton('previous','Previous');
$form->addButton('next','Next');
$branch_office_id = 1;
$img_paths =
$this->template->patra = $this->googleMap
->getImgPath($branch_office_id);
;
$index = 2;
$image = Image::fromFile('C:/Users/venhm/Desktop/chyba.png');
image = "C:/Users/venhm/Desktop/chyba.png";*/
$paths = array("C:/xampp/htdocs/timerservice/www/uploads/localhost/docs/branch_customer/construction_drawings/2021-02-05_10-22-02_E5GYSYPWP.jpg", "C:/xampp/htdocs/timerservice/www/uploads/localhost/docs/branch_customer/construction_drawings/2021-02-09_21-52-53_26LTDHW08.png");
$image = Image::fromFile($img_paths[$index]);
$this->template->patraMap = $image;
//return $form;
//$image->send(Image::JPEG);
}
Editoval Alyxx (18. 9. 2023 7:12)
- nightfish
- Člen | 519
@Alyxx Vidím, že tam máš nějaký formulář, v rámci kterého
máš selectbox s cestami k obrázku.
A pak v presenteru kód, který z jednoho obrázku udělá Image
a pošle jej do šablony.
V nejjednodušším případě bych to udělal následovně (snažil jsem se používat co nejméně moderní syntaxi, protože už si popravdě nepamatuji, co bylo povolené už v PHP 7.1 a co bylo přidáno později; stejně tak u Nette/Latte):
Celá myšlenka je jednoduchá – máš pole s obrázky (nejspíš k nim
nechceš přistupovat přes filesystém, protože bys potom pro vykreslení
v šabloně musel v každém requestu každý obrázek obalit přes
Image::fromFile()
, což by bylo imho zbytečně pomalé; z toho
důvodu jsou v poli jen části URL, které po složení se standardní nette
$basePath
budou validní URL sloužící ke stažení/zobrazení
obrázků), toto pole předáš do presenteru a vykreslíš. Každý obrázek
(kromě aktuálně vybraného) je obalen odkazem, který slouží k vybrání
obrázku po kliknutí. Vybrání obrázku není řešeno ani formulářem, ani
signálem, nýbrž jen odkazem na renderDefault()
s předáním
příslušného indexu obrázku.
Presenter (index vybraného obrázku se do presenteru předává jako argument render metody; žádný obrázek nemusí být vybraný):
public function renderDefault($selectedImageIndex = null)
{
$images = $this->getImages();
$selectedImageUrlPart = null;
if (!empty($selectedImageIndex)) {
$selectedImageUrlPart = $images[$selectedImageIndex];
}
$this->template->images = $images;
$this->template->selectedImageUrlPart = $selectedImageUrlPart;
}
/**
* Vraci pole casti URL, ktere dohromady s $basePath daji funkcni URL
* ke stazeni obrazku.
*/
private function getImages(): array
{
return [
"uploads/localhost/docs/branch_customer/construction_drawings/2021-02-05_10-22-02_E5GYSYPWP.jpg",
"uploads/localhost/docs/branch_customer/construction_drawings/2021-02-09_21-52-53_26LTDHW08.png",
];
}
Šablona (vykreslí jednotlivé obrázky, obalené odkazem; aktuálně zvolený obrázek odkazem obalený není):
{foreach $images as $imageIndex => $imageUrlPart}
<a n:tag-if="$imageUrlPart !== $selectedImageUrlPart" n:href="Presenter:default $imageIndex"><img src="{$basePath}/{$imageUrlPart}" /></a>
{/foreach}
- Alyxx
- Člen | 9
nightfish napsal(a):
@Alyxx Vidím, že tam máš nějaký formulář, v rámci kterého máš selectbox s cestami k obrázku.
A pak v presenteru kód, který z jednoho obrázku uděláImage
a pošle jej do šablony.V nejjednodušším případě bych to udělal následovně (snažil jsem se používat co nejméně moderní syntaxi, protože už si popravdě nepamatuji, co bylo povolené už v PHP 7.1 a co bylo přidáno později; stejně tak u Nette/Latte):
Celá myšlenka je jednoduchá – máš pole s obrázky (nejspíš k nim nechceš přistupovat přes filesystém, protože bys potom pro vykreslení v šabloně musel v každém requestu každý obrázek obalit přes
Image::fromFile()
, což by bylo imho zbytečně pomalé; z toho důvodu jsou v poli jen části URL, které po složení se standardní nette$basePath
budou validní URL sloužící ke stažení/zobrazení obrázků), toto pole předáš do presenteru a vykreslíš. Každý obrázek (kromě aktuálně vybraného) je obalen odkazem, který slouží k vybrání obrázku po kliknutí. Vybrání obrázku není řešeno ani formulářem, ani signálem, nýbrž jen odkazem narenderDefault()
s předáním příslušného indexu obrázku.Presenter (index vybraného obrázku se do presenteru předává jako argument render metody; žádný obrázek nemusí být vybraný):
public function renderDefault($selectedImageIndex = null) { $images = $this->getImages(); $selectedImageUrlPart = null; if (!empty($selectedImageIndex)) { $selectedImageUrlPart = $images[$selectedImageIndex]; } $this->template->images = $images; $this->template->selectedImageUrlPart = $selectedImageUrlPart; } /** * Vraci pole casti URL, ktere dohromady s $basePath daji funkcni URL * ke stazeni obrazku. */ private function getImages(): array { return [ "uploads/localhost/docs/branch_customer/construction_drawings/2021-02-05_10-22-02_E5GYSYPWP.jpg", "uploads/localhost/docs/branch_customer/construction_drawings/2021-02-09_21-52-53_26LTDHW08.png", ]; }
Šablona (vykreslí jednotlivé obrázky, obalené odkazem; aktuálně zvolený obrázek odkazem obalený není):
{foreach $images as $imageIndex => $imageUrlPart} <a n:tag-if="$imageUrlPart !== $selectedImageUrlPart" n:href="Presenter:default $imageIndex"><img src="{$basePath}/{$imageUrlPart}" /></a> {/foreach}
Děkuji mockrát, konečně jsem schopný to dokončit.