Laying out the application

The application will have two modes, editing and presentation. In the editing mode, the screen will be split into two panes. The top pane will display the slides and the lower will contain the editor and other interface elements.

This chapter will focus on the core creation side of the presentation, and the following chapter will focus on the presentation mode and advancing the interface. The application will be a single Dart project.

Defining the presentation format

The presentations will be written in a tiny subset of the Markdown format, which is a powerful yet simple to read text file-based format (much easier to read, type, and understand than HTML).

A simple titled slide with bullet points would be defined as:

#Dart Language
+Created By Google
+Modern language with a familiar syntax
+Structured Web Applications
+It is Awesomely productive!

I am positive you only had to read that once! This will translate into the following HTML:

<h1>Dart Language</h1>
<li>Created By Google</li>s
<li>Modern language with a familiar syntax</li>
<li>Structured Web Applications</li>
<li>It is Awesomely productive!</li>

Markdown is very easy and fast to parse, which probably explains its growing popularity on the Web. It can be transformed into many other formats.

Parsing the presentation

The content of the TextAreaHtml element is split into a list of individual lines, and processed in a similar manner to some of the features in the text editor application using forEach to iterate over the list. Any lines that are blank once any whitespace has been removed via the trim method are ignored:

#A New Slide Title
+The first bullet point
+The second bullet point

#The Second Slide Title
+More bullet points
!http://localhost/img/logo.png
#Final Slide
+Any questions?

For each line starting with a # symbol, a new slide object is created.

For each line starting with a + symbol, they are added to this slide's bullet point list.

For each line discovered using a ! symbol, the slide's image is set (a limit of one per slide).

This continues until the end of the presentation source is reached.

A sample presentation

To get a new user going quickly, there will be an example presentation that can be used as a demonstration and to test the various areas of the application. I chose the last topic that came up around the family dinner table—the coconut as shown in the following code snippet:

#Coconut
+Member of Arecaceae family.
+A drupe - not a nut.
+Part of daily diets.
#Tree
+Fibrous root system.
+Mostly surface level.
+A few deep roots for stability.
#Yield
+75 fruits on fertile land
+30 typically
+Fibre has traditional uses
#Finally
!coconut.png
#Any Questions?

Presenter project structures

The project is a standard Dart web application with index.html as the entry point. The application is kicked off by main.dart, which is linked to in index.html, and the application functionality is stored in the lib folder.

Launching the application

The main function has a very short implementation:

void main() {
  new SlideShowApp(); 
}

Note that the new class instance does not need to be stored in a variable and that the object does not disappear after that line is executed. As we will see later, the object will attach itself to events and streams, keeping the object alive for the lifetime that the page is loaded.

Building bullet point slides

The presentation is built up using two classes—Slide and SlideShow. The Slide object creates the DivElement used to display the content, and the SlideShow contains a list of Slide objects.

The SlideShow object is updated as the text source is updated. It also keeps track of which slide is currently being displayed in the preview pane.

The slideshow.dart file has the keyword library and a name next to it. In Dart, every file is a library, whether it is explicitly declared or not.

#import("dart:html");

If you are writing an application in a single project, source files can be arranged in a folder structure appropriate for the project, though keeping the relative's paths manageable is advised. Creating too many folders probably means that it is time to create a package!