1
Jūn
2010
Sāku testēt sava ietvara UI daļu
Yo!
Uzkodēju sava ietvara UI daļas pamatus. Jā, tagad šis zvērs māk ģenerēt HTML. Ir iespēja katrai klasei iestatīt savu globālo CSS un JS, ka arī darīt to katram konkrētam objektam. Pagaidām no HTML elementiem man ir <HTML>, <HEAD>, <BODY>, <DIV> un <STYLE> tagi. Pārējie vēl taps.
Šeit variet apskatīt nelielu piemēru.
Un te zemāk ir pats kods. No pirmā skatien izskatās garš, bet patiesībā vairāk nekā puse rindu aizņem atsevišķu elementu CSS. Manuprāt, CSS pievienošanas veids ir ērts un viegli saprotams, jo katram objektam ir savs CSS objekts, kurš arī glabā visu, kas saistīts ar izskatu un izvietojumu. Principā, tas pats arī ar JS notikumu apstrādātajiem. CSS un JS atribūti objektos ir to īpašības un pieejamas caur get/set. Tas pats ar pārējiem UI elementiem. Man ir doma JS objektu integrēt kopā ar jQuery. Ko Jūs domājat? Bet tad atkal vajadzēs domāt par automātisko JS ģenerēšanu.
Principā varēju pieturēties pie stingrāka OOP stila un uztaisīt visus elementus, kuri redzami galvenajā lapā, par atsevišķām klasēm (test.php). Tad kods galvenajā lapā būtu daudz īsāks un pārskatamāks. Nu bet tas tā, dažās minūtēs steigā sarakstīts piemērs. Lūgums asi nekritizēt.
test.php <?php //Mana ietvara UI daļas neliela demonstrācija require_once 'framework/init.php'; //Inicializējam ietvaru $page = new Page(); //Page ir klase, kura attēo <HTML>, <HEAD> un <BODY> tagus $body = $page->body(); //Iegūstam <BODY> //Container klase ir <DIV> tags ar iebūvētu overflow:auto stilu. //Tas būs lapas konteineris, kurā atradīsies viss redzamais saturs. $container = new Container(); $containerCss = $container->css(); //Iegūstam konteinera CSS objektu $containerCss->width = '1000px'; //Iestatām CSS $containerCss->margin_left = 'auto'; $containerCss->margin_right = 'auto'; $containerCss->font_family = 'Arial'; $body->container = $container; //Ieveitojam konteineri lapā $header = new Container(); //Izveidojam lapas galveni $headerCss = $header->css(); //Iestatām galvenes CSS $headerCss->text_align = 'center'; $headerCss->vertical_align = 'middle'; $headerCss->width = '100%'; $headerCss->padding_top = '10px'; $headerCss->padding_bottom = '10px'; $headerCss->margin_bottom = '5px'; $headerCss->font_size = '30px'; $headerCss->font_weight = 'bold'; $headerCss->background_color = 'silver'; $headerCss->color = 'white'; $header->text = 'Hello!'; //Ieveietojam tekstu galvenē $container->header = $header; //Ieveitojam galveni konteinerī $menu = new Container(); // Tā būs izvēlne $menu->text = 'The menu'; //Iestatām kadu tekstu $menuCss = $menu->css(); //Iegūstam izvēlnes CSS objektu //un istatām izvēlnes CSS $menuCss->width = '295px'; $menuCss->height = '400px'; $menuCss->float = 'left'; $menuCss->background_color = 'GreenYellow'; $container->menu = $menu; //Ievietojam izvēlni konteinerī $i = 0; //Saģenerējam un ievietojam postus while($i < 5) { $i++; $blogPost = new BlogPost(); $blogPost->title = 'Post '.$i; $container->addObject($blogPost); } PageTitle::setTitle('Neliels tests'); //Iestatām lapas nosaukumu $page->printHTML(); //Izdrukājam HTML ?> Šeit ir iepriekšējā kodā minētā BlogPost klase ar savu CSS un JS
<?php class BlogPost extends Container { public function __construct() { parent::__construct(); } protected function setClassCss() //Iestatu BlogPost klases CSS { parent::setClassCss(); //Neaizmirstam mantojamās klases CSS $this->css->width = '700px'; $this->css->height = '150px'; $this->css->margin_bottom = '5px'; $this->css->float = 'right'; $this->css->background_color = 'Lavender'; } protected function setClassJs() //Iestatu BlogPost klases JS { $this->js->onClick = "alert('Damn! You clicked me!');"; } } ?>