Jak na mobilni verzi v Nette

roarbb

Ahojte, precital som si tu vsetky temy o mobilnych verziach stranok v nette. Ale ako zaciatocnikovi v OOP a v Nette mi stale nie je celkom jasne ako na mobilnu verziu stranky.

Ak by si niekto nasiel chvilku casu mohol by mi strucne popisat postup ako na to. Kde detekovat mobinu verziu, mozno by sa hodilo aj ako na to :) a v ktorom kroku poslat uzivatela na mobilny template.

Budem vdacny za kazdu radu ;)
Dakujem.

newPOPE

To znie velmi vseobecne.:-)

Siel by som nejakou takouto cestou, zalezi ako sa tie verzie budu lisit

Detekujem browser (mobilny vs. normal)
A podla browsera len nastavim layout (@mobilLayout.latte vs @layout.latte)

V pripade, ze by si chcel vypinat urcitu funkcnost app v mobilnej verzii tak by si napr. len vypinal urcite bloky v sablonach…

Co sa tyka napr. detekovania browsera skus Guugel, a kde?. Ako zaciatocnikovi by som Ti doporucoval zrejme v BasePresenter

<?php
	protected $isMobile = FALSE;

	protected function startup() {
		parent::startup();

		$this->isMobile = $this->detectMobile(); //metoda ktora detekuje browser a vrati napr. TRUE/FALSE je/nie je mobilny

?>

toka

Např. Google Code / PHP Mobile Detect

roarbb

Dakujem za tip chalani :)

Aktualne mam hotove detekovanie mobile browseru. Teraz by ma ale zaujimalo ako nastavit layout. Mam pouzit funkciu setLayout() ? A volat ju v BasePresenter? Mam uz hotovu aj templatu v jQuery Mobile a neviem sa dockat kedy ju spustim :)

srigi

Existuje aj ine rovnocenne riesenie – presmerovat na subdomenu (niekedy aj na domenu .mobi). Vedu sa debaty, ci pri zdetekovani mobilneho zariadenia prehodit layout alebo presmerovat. Osobne by som presmeroval na mobile.moj_projekt.tld a dal moznost zobrazenia plnej sajty.

Plus taky tip – detekciu by som robil iba ak nie je nastavena nejaka specialna cookie a po zdetekovani zariadenia by som tu cookie nastavil – nech sa zbytocne nedetekuje pri kazdom RQ.

Umoznis tak desktopovym browserom browsovat mobilnu verziu. Dost info o trendoch je aj v tomto clanku.

Michalek

Podívej, zrovna dnes jsem se v tom rýpal, mám to takhle. Jestli je to z pohledu dokonalého programátora dobře, to nevím, ale funguje to 100% :-)

Vytvoření routeru (mobile může být buď www nebo m – tedy jakoby subdoména):

static::$router[] = new Route('//[!<mobile (www|m)>.]' . PROJECT_URL . '/', array(
			    'mobile' => 'www',
			    'module' => $name . ':Frontend',
			    'presenter' => 'Default',
			    'action' => 'default',
			));

V BasePresenter.php pak

protected function beforeRender()
{
	if ($this->getParam('mobile') == 'm') { // if mobile, set mobile templates
		$this->setView($this->getView() . '.mobile');
		$this->setLayout('layout.mobile');
	}
}

A jak to funguje? Jednoduše :-)
Default.default.latte + Default.default.mobile.latte
@layout.latte + @layout.mobile.latte

Editoval Michalek (7. 2. 2011 17:01)

roarbb

Srigi dakujem za velmi zaujimavy clanok. Tvoje riesenie je asi idealne.
Pre tento moj prvy Nette projekt som ale zvolil cestu detekcie mobilneho zariadenia pomocou skriptu od toka a nasledne v BasePresenter prehadzujem layout (dakujem Michalek :) ). Bolo to pre moju prvu a velmi jednoduchu stranku postacujuce.

Tip: Pri jQuery Mobile Templatoch sposobi helper truncate ze pri prvom nacitani stranky je vsetko ok. Ale pri dalsich (ked uz ma Nette vytvorene cache) stranka vobec nefunguje. Pritom jQuery Mobile podla sirky zariadenia upravi text rovnako ako spominany helper.
Mne chvilu trvalo kym som to zistil, tak ak by niekto hladal na fore, nech je to tu aspon spomenute ;)

Dakujem vsetkym za pomoc.

Filip Procházka

osobně si myslím, že by bylo lepší ovlivňovat už formatTemplatePath

class BasePresenter extends Nette\Application\Presenter
{
	/**
	 * Formats layout template file names.
	 * @param  string
	 * @param  string
	 * @return array
	 */
	public function formatLayoutTemplateFiles($presenter, $layout)
	{
		$templateFiles = parent::formatLayoutTemplateFiles($presenter, $layout);

		if ($this->isMobile()) { // nutno funkci definovat
			$templateFiles = array_map(function($path) {
				return str_replace('/template', '/mobileTemplate', $path);
			}, $templateFiles);
		}

		return $templateFiles;
	}


	/**
	 * Formats view template file names.
	 * @param  string
	 * @param  string
	 * @return array
	 */
	public function formatTemplateFiles($presenter, $view)
	{
		$templateFiles = parent::formatTemplateFiles($presenter, $view);

		if ($this->isMobile()) { // nutno funkci definovat
			$templateFiles = array_map(function($path) {
				return str_replace('/template', '/mobileTemplate', $path);
			}, $templateFiles);
		}

		return $templateFiles;
	}

}

Takhle nějak mi to přijde čistší. A můžeš mít pak šablony rozdělené v app/templates a app/mobileTemplates (a v modulech app/FrontModule/templates a app/FrontModule/mobileTemplates, …). Mně by se takto méně pletly :)