Defining the core classes

The SlideShow class is largely a container object for a list of Slide objects and uses the mixin LifecycleTracker:

class SlideShow extends Object with LifecycleTracker {
  List<Slide> _slides; 
  List<Slide> get slides => _slides; 
...

The Slide class stores the string for the title and a list of strings for the bullet points. The URL for any image is also stored as a string:

class Slide extends Object with LifecycleTracker { 
  String titleText = ""; 
  List<String> bulletPoints; 
  String imageUrl = ""; 
... 

A simple constructor takes the titleText as a parameter and initializes the bulletPoints list.

Transforming data into HTML

To add the Slide object instance into an HTML document, the strings need to be converted into instances of HTML elements to be added to the DOM (Document Object Model). The getSlideContents() method constructs and returns the entire slide as a single object:

DivElement getSlideContents() {
  DivElement slide = new DivElement();
  DivElement title = new DivElement();
  DivElement bullets = new DivElement();

  title.appendHtml("<h1>$titleText</h1>");
  slide.append(title);

  if (imageUrl.length > 0) {
    slide.appendHtml("<img src=\"$imageUrl\" /><br/>");
  }

  bulletPoints.forEach((bp) {
    if (bp.trim().length > 0) {
      bullets.appendHtml("<li>$bp</li>");
    }
  });

  slide.append(bullets);

  return slide;
}

The Div elements are constructed as objects (instances of DivElement), while the content is added as literal HTML statements. The method appendHtml is used for this particular task as it renders HTML tags in the text. The regular method appendText puts the entire literal text string (including plain unformatted text of the HTML tags) into the element.

So, what exactly is the difference? The method appendHtml evaluates the supplied HTML and adds the resultant object node to the nodes of the parent element, which is rendered in the browser as usual. The method appendText is useful, for example, to prevent user-supplied content affecting the format of the page and preventing malicious code being injected into a web page.

Editing the presentation

When the source is updated, the presentation is updated via the onKeyUp event. This was used in the text editor project to trigger a save to local storage.

This is carried out in the build method of the SlideShow class, and follows the pattern we discussed in parsing the presentation:

build(String src) {
  updateEditTimestamp();
  _slides = new List<Slide>();
  Slide nextSlide;

  src.split("\n").forEach((String line) {
    if (line.trim().length > 0) {

      // Title - also marks start of the next slide.
      if (line.startsWith("#")) {
        nextSlide = new Slide(line.substring(1));
        _slides.add(nextSlide);
      }
      if (nextSlide != null) {
        if (line.startsWith("+")) {
          nextSlide.bulletPoints.add(line.substring(1));
        } else if (line.startsWith("!")) {
          nextSlide.imageUrl = line.substring(1);
        }
      }
    }
  });
}

As an alternative to the startsWith method, the square bracket [] operator could be used for line [0] to retrieve the first character. The startsWith method can also take a regular expression or a string to match, as well as a starting index. Refer to the dart:core documentation for more information. For the purposes of parsing the presentation, the startsWith method is more readable.

Displaying the current slide

The slide is displayed via the showSlide method in slideShowApp.dart. To preview the current slide, the current index, which is stored in the field currentSlideIndex, is used to retrieve the desired slide object and the Div rendering method is called:

  showSlide(int slideNumber) {
    if (currentSlideShow.slides.length == 0) return;

    slideScreen.style.visibility = "hidden";
    slideScreen
  ..nodes.clear()
  ..nodes.add(currentSlideShow.slides[slideNumber].getSlideContents());

    rangeSlidePos.value = slideNumber.toString();
    slideScreen.style.visibility = "visible";
  }

The slideScreen is a DivElement that is then updated off screen by setting the visibility style property to hidden. The existing content of the DivElement is emptied out by calling nodes.clear() and the slide content is added with nodes.add. The range slider position is set, and finally, the DivElement is set to visible again.

Navigating the presentation

A button set with the familiar first, previous, next, and last slide allows the user to jump around the preview of the presentation. This is carried out by having an index built into the list of slides and stored in the field slide in the SlideShowApp class.

setButton(String id, Function clickHandler) {
  ButtonInputElement btn = querySelector(id);
  btn.onClick.listen(clickHandler);
}

setButton("#btnFirst", startSlideShow);

void startSlideShow(MouseEvent event) {
  showFirstSlide();
}

void showFirstSlide() {
  showSlide(0);
}

Function qs = querySelector;
var controls = qs("#controls");

void showLastSlide() { 
  currentSlideIndex = max(0, currentSlideShow.slides.length - 1); 
  showSlide(currentSlideIndex); 
} 
void showNextSlide() {
  currentSlideIndex = min(currentSlideShow.slides.length - 1, ++currentSlideIndex);
  showSlide(currentSlideIndex);
}

Using the slider control

The slider control is another new control in the HTML5 standard. This will allow the user to scroll though the slides in the presentation.

This control is a personal favorite of mine as it is so visual and can be used to give very interactive feedback to the user. It seemed to be a huge omission from the original form controls in the early generation of web browsers. Even with clear, widely accepted features, HTML specifications can take a long time to clear committees and make it into everyday browsers!

<input type="range" id="rngSlides" value="0"/>

The control has an onChange event that is given a listener in the SlideShowApp constructor:

rangeSlidepos.onChange.listen(moveToSlide);rangeSlidepos.onChange.listen(moveToSlide);

The control provides its data via a simple string value, which can be converted to an integer via the int.parse method to be used as an index in the presentation's slide list:

  void moveToSlide(Event event) {
    currentSlideIndex = int.parse(rangeSlidePos.value);
    showSlide(currentSlideIndex);
  }

The slider control must be kept in synchronization with any other change in its slide display, use of navigation, or change in number of slides. For example, the user may use the slider to reach the general area of the presentation, and then adjust with the Previous and Next buttons:

void updateRangeControl() {
  rangeSlidepos 
  ..min = "0" 
  ..max = (currentSlideShow.slides.length - 1).toString(); 
}

This method is called when the number of slides is changed, and as with working with most HTML elements, the values to be set need to be converted to strings.

Responding to keyboard events

Using the keyboard, particularly the arrow (cursor) keys, is a natural way to look through the slides in a presentation, even in the preview mode. This is carried out in the SlideShowApp constructor.

The Textarea used to input the presentation source will also respond to the arrow keys, so there will need to be a check to see if it is currently being used. The property activeElement on the document will give a reference to the control with focus. This reference can be compared to the Textarea, which is stored in the presEditor field, so a decision can be made on whether to act on the keypress or not.

Keyboard events, like other events, can be listened to by using a stream event listener. The listener function is an anonymous function (the definition omits a name) that takes the KeyboardEvent as its only parameter:

window.onKeyUp.listen((KeyboardEvent e) {
  if (presEditor != document.activeElement){ 
  if (e.keyCode == 39) 
  showNextSlide(); 
  else if (e.keyCode == 37) 
  showPrevSlide(); 
  else if (e.keyCode == 38) 
  showFirstSlide(); 
  else if (e.keyCode == 40) 
  showLastSlide(); 
  }
});

Showing the key help

Rather than testing the user's memory, there will be a handy reference to the keyboard shortcuts.

This is a simple Div element that is shown and then hidden when the key (remember to press Shift, too!) is pressed again by toggling the visibility style from visible to hidden.

window.onKeyUp.listen((KeyboardEvent e) {
  print(e);

  //Check the editor does not have focus.
  if (presEditor != document.activeElement) {
    DivElement helpBox = qs("#helpKeyboardShortcuts");
    if (e.keyCode == 191) {
      if (helpBox.style.visibility == "visible") {
        helpBox.style.visibility = "hidden";
      } else {
        helpBox.style.visibility = "visible";
      }
    }
  }
});