Developing Large Web Applications- P20

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:10

Thêm vào BST

Báo xấu

47
lượt xem 3
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Developing Large Web Applications- P20:This book presents a number of techniques for applying established practices of good software engineering to web development—that is, development primarily using the disparate technologies of HTML, CSS, JavaScript, and server-side scripting languages. Whereas there are many books on how to use languages, how to use libraries, and how to approach software engineering, this is the first book to codify many of the techniques it presents. These techniques will make the components of your own web applications more reusable, maintainable, and reliable....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Developing Large Web Applications- P20

{ // The content for this module consists of a single image, along // with text for the caption and the attribution. $attr = ""; if (!empty($this->picture["attr"])) { $attr =
Example 7-7. PictureSlider JavaScript object for the slideshow PictureSlider = function() { // Set up references to the elements needed for the slider and viewer. this.slider = document.getElementById("picsld"); if (this.slider) { this.tab = this.slider.getElementsByTagName("table"); this.tab = (this.tab && this.tab.length > 0) ? this.tab[0] : null; } if (this.slider) { this.lb = YAHOO.util.Dom.getElementsByClassName ( "btnl", "img", this.slider ); this.lb = (this.lb && this.lb.length > 0) ? this.lb[0] : null; this.rb = YAHOO.util.Dom.getElementsByClassName ( "btnr", "img", this.slider ); this.rb = (this.rb && this.rb.length > 0) ? this.rb[0] : null; } this.viewer = document.getElementById("picvwr"); // You pass values for the following parameters to the module's // constructor in PHP. The module's get_js method in PHP dynamically // generates the JavaScript to set these members from those values. this.stripWidth = 0; this.totalCount = 0; this.totalWidth = 0; // This lock is needed to ensure that one left or right move of the // slider runs to completion; otherwise, misalignment could happen. this.lock = false; }; PictureSlider.prototype = new Object(); PictureSlider.prototype.slideL = function() { // Moving to the left adjusts the slider in a positive direction. this.adjust(+(this.stripWidth)); }; 172 | Chapter 7: Large-Scale PHP
PictureSlider.prototype.slideR = function() { // Moving to the right adjusts the slider in a negative direction. this.adjust(-(this.stripWidth)); }; PictureSlider.prototype.adjust = function(amt) { // If already locked, do nothing; otherwise, get the lock and go. if (this.lock) return; else this.lock = true; var anim; var ease = YAHOO.util.Easing.easeOut; var pos = parseInt(YAHOO.util.Dom.getStyle(this.tab, "left")); // Prevent moving past either end of the slider during an adjustment. if (amt > 0) { if (pos + amt > 0) amt = 0; } if (amt < 0) { if (pos + amt
PictureSlider.prototype.update = function() { var pos; pos = parseInt(YAHOO.util.Dom.getStyle(this.tab, "left")); // Switch images to indicate which buttons are enabled or disabled. if (pos >= 0) this.lb.src = ".../slide_arrow_off_l.gif"; else this.lb.src = ".../slide_arrow_l.gif"; if (pos 0) YAHOO.util.Dom.removeClass(el[0], "selected"); if (targ) YAHOO.util.Dom.addClass(targ, "selected"); // Reload the picture viewer with the current selection in the slider. this.reload(img, text, attr); // Update the text indicating the position of the selected picture. el = YAHOO.util.Dom.getElementsByClassName ( "sldpos", "div", this.slider ); if (el && el.length > 0) { el[0].innerHTML = "Showing picture " + n + " of " + this.totalCount; } }; 174 | Chapter 7: Large-Scale PHP
PictureSlider.prototype.reload = function(img, text, attr) { // Handle the case of no viewer associated with the picture slider. if (!this.viewer) return; var el; // Get the image viewer and change the image currently being shown. el = YAHOO.util.Dom.getElementsByClassName ( "vwrimg", "div", this.viewer ); if (el && el.length > 0) { el = el[0].getElementsByTagName("img"); if (el && el.length > 0) { el[0].src = img; el[0].alt = text; } } // Change the attribution in the picture viewer for the selection. el = this.viewer.getElementsByTagName("cite"); if (el && el.length > 0) el[0].childNodes[0].nodeValue = "courtesy of" + attr; // Change the caption in the picture viewer based on the selection. el = YAHOO.util.Dom.getElementsByClassName ( "vwrcap", "div", this.viewer ); if (el && el.length > 0) el[0].childNodes[0].nodeValue = text; }; PictureSlider.prototype.loaded = function() { // Fire this from your initialization method for the picture slider. var el; el = YAHOO.util.Dom.getElementsByClassName ( "sldtab", "div", this.slider Working with Modules | 175
); YAHOO.util.Dom.setStyle ( el[0], "visibility", "visible" ); }; As you can see, a slideshow contains enough interrelated pieces that defining it using nicely encapsulated modules is critical to making it highly reusable, maintainable, and ultimately reliable in the long life cycle of a large web application. Example 7-8 dem- onstrates how easy this module is to use despite all the interconnected pieces of its implementation. Just as we saw for the simple modules at the start of the chapter, you need only instantiate the modules with the necessary arguments to configure them, call their create methods, and place them within the proper section of the layout for the page. Furthermore, you need only include a single include file, slideshow.inc, to use the slideshow. The necessary HTML, CSS, and JavaScript for its modules travel with the slideshow wherever you use it. Example 7-8. Creating the modules for a slideshow
$viewer = $mod->create(); ... // Place the HTML markup for each module within the page layout. $mod = new DetailsLayout ( $this, array(...), array($slider, $viewer), array(...), array(...), array(...), array(...) ); // Return the content, which the create method for the page uses. return $mod->create(); } ... } ?> Layouts and Containers In Chapter 4, we discussed layouts as highly reusable, generic templates that define the overarching structure of pages. You saw that containers are even finer groupings of modules typically placed within layouts. Together, layouts and containers play a vital role in fostering reusability, maintainability, and reliability in large web applications by defining a number of standard sections in which to place modules on a page. A section is simply a region in which we can insert one or more modules. As we explore implementations for layouts and containers, you’ll see that layouts and containers are just specialized types of modules. That is, they require many of the same things that other modules do. The main distinction is that aside from the additional structural elements that a layout or container defines, the content for a layout or con- tainer is actually just the content of other modules. Because the operations you need to perform to generate the individual sections of a layout or container are generally the same for most layouts and containers, it’s useful to define a base class, Layout, for this purpose. Example 7-9 presents the Layout class, which is derived from Module. This class defines get_section, which places a set of modules within a div and assigns the div a specified class so that styles for positioning and formatting the section can be applied. Layouts and Containers | 177
Example 7-9. Implementation of the Layout class class Layout extends Module { public function __construct($page) { parent::__construct($page); } public function get_section($class, $modules) { if (count($modules) == 0) return ""; foreach ($modules as $content) $section .= empty($content) ? "" : $content; if (empty($section)) return ""; return
public function __construct ( $page, $layreshdr, $layrespri, $layressec, $layrester, $layresftr1, $layresftr2 ) { parent::__construct($page); $this->layreshdr = $layreshdr; $this->layrespri = $layrespri; $this->layressec = $layressec; $this->layrester = $layrester; $this->layresftr1 = $layresftr1; $this->layresftr2 = $layresftr2; } public function get_css_linked() { return array("sidewide.css"); } public function get_content() { $layreshdr = $this->get_section("layreshdr", $this->layreshdr); $layrespri = $this->get_section("layrespri", $this->layrespri); $layressec = $this->get_section("layressec", $this->layressec); $layrester = $this->get_section("layrester", $this->layrester); $layresftr1 = $this->get_section("layresftr1", $this->layresftr1); $layresftr2 = $this->get_section("layresftr2", $this->layresftr2); // The content for the layout is just the content of the modules // passed into the layout and inserted into the layout sections. return
Special Considerations The more you work with any large web application, the more you’ll turn up special considerations that you didn’t originally think about. Fortunately, it’s relatively easy to adapt the techniques with large-scale PHP introduced in this chapter for many dif- ferent situations. Indeed, this is one of the most important tests of a good architecture: can it adapt to new situations without undue contortions? This section presents some examples of special situations in large web applications with solutions using the tech- niques from this chapter. Handling Module Variations In large web applications, modules frequently need to function or appear in a different manner on different pages. For example, suppose you would like a module to support default, compact, and mid-size presentations, as illustrated in Chapter 4. Exam- ple 7-11 demonstrates a solution wherein the class of the module’s containing div be- comes parameterized. To do this, you specify a data member for the module named $class and define setter methods that change its value. The module picks up the proper CSS when the class attribute of its containing div is set to the value stored in the $class data member. For more extensive variations requiring more significant changes to the HTML markup or JavaScript for a module, you can manage those variations in a similar manner using data members to control how the HTML markup or JavaScript is generated. It helps to have a nicely encapsulated class for the module and a well-defined interface for selecting the variations. Example 7-11. Handling variations of the Popular New Cars module class PopularNewCars extends Module { protected $class; ... public function __construct($page, ...) { parent::__construct($page); $this->class = "default"; // Set up the module using other arguments from the constructor. ... } public function set_mode_default() { $this->class = "default"; } 180 | Chapter 7: Large-Scale PHP