Online Digital Talking Book Technology with Web and Mobile Clients

A Project Report Presented to
The Faculty of the College of Engineering San Jose State University
In Partial Fulfillment Of the Requirements for the Degree
Master of Science in Software Engineering

By Tanakom Talawat
December 2007

TOC

Chapter 5. Project Implementation

As describe in the chapter 2 about the technologies used in the project. This chapter will provide the solution to blend all of the technologies together. All of the project implementation provides in the beginning of this chapter will be related with the implementation in the client side. After that, in the Web-Server implementation section, the project implementation in the server side including the Middle-Tier and Data-Tier will be described.

The project implementation in the client side was starting since I have finished designing the entire system and selecting the tools for using in the project. There are five components in the client side. This project takes advantage of each component and combines them together by using software engineering methodology to manage the integration. Each component has a set of environments which need a different skill to develop and integrate to other components. The five components used in the client side of this project include:

· C# Managed Class Implementation

· Rich Internet Application Implementation

· AJAX Implementation

· JavaScript Implementation

· CSS Implementation

· Web Server Implementation

C# Managed Class Implementation

Since I already have the class diagram from designing phrase, the C# managed class implementation is to develop the classes follow the diagram using C# programming language. There are 17 classes used in the client side. Each class is dedicated to work in the different functionality. As I already described in the chapter 2, the project architecture; some classes provide XML reader function; some classes are data classes which provide storage area for the information that is parsed from the XML files to be easily used in the client side.

This class implementation was started by creating a reading class to read the package file of a Digital Talking Book which has OPF extension (The Open eBook Forum Package File). In this file contains administrative information about the Digital Talking Book. By reading this file, the application will know the list of all files used in the particular Digital Talk Book. Then, I have developed a reading classes for reading the NCX file (The Navigation Control file for XML applications) so that the application will know the detail of all chapters organized in the particular Digital Taking Book. This reading class was named “ReadFileNcx”. During the reading time, the four data classes are used to store the NCX information including ClsNcxLabelElement, ClsNcxNavPoint, ClsNcxPageList, and ClsNcxNavList. As show in the next figure, The ClsNcxLabelElement is the super class and the others are its sub classes. That is because of identical of the data. All common information can be stored in the same super class.

After the application has received the detail of how are chapters organized in the Digital Talking Book, it will access to the first chapter in order to start playing.

Figure 10: The three classes for reading the NCX file

The information in each chapter can be accessed by another reading class named “ReadFileSmil”. SMIL stands for “The Synchronized Multimedia Integrated Language”. It is a W3C recommendation to synchronize all media used in the application which is including Audio and Text. The two important classes of the SMIL file are the ReaderFileSmil and ClsSmilParInfo classes which have shown in the next figure.

Figure 11: The two classes for reading SMIL file type

Rich Internet Application Implementation

Rich Internet Application implementation is the most important part of this project because this RIA has to handle the methodology to send the request and waiting to get a respond back from the server. As I described in the Chapter 3, the RIA that is used in this project is called Silverlight version 2.0. There are two types of programming language in the Silverlight. For the interface programming, the Silverlight uses XAML, Extensible Application Markup Language, which is the XML format. The other programming language is C# which is used for developing the code-behind section. Moreover, C# programming language has been used for programming in all managed classes that internally integrated with RIA. The next table shows an example of the XAML language.

Table 4: An example of the XAML programming in the project

<Canvas

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:ScreencastControls="SilverlightControls.dll"

x:Name="parentCanvas"

Loaded="Page_Loaded"

x:Class="keypadControl.Page;assembly=ClientBin/keypadControl.dll"

Width="303"

Height="200"

Background="White"

KeyUp ="Page_KeyUp"

KeyDown ="Page_KeyDown">

<Canvas.Resources>

</DoubleAnimationUsingKeyFrames>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

The Rich Internet Application in this project is the major part that has to be connected to other components. Therefore, in the code-behind, it needs to have a lot of handlers to get and send commands mostly with the JavaScript language. Moreover, it also needs class implementation for accessing the Digital Talking Book on the server.

JavaScript Implementation

JavaScript is implemented as the glue in this project for joining all client components together. During the opening period, JavaScript is used to detect and start the Silverlight plug-in. Then, most tasks are the messaging delivery from the Silverlight RIA to the ASPX page at the web server.

Table 5: An example of the JavaScript programming in the project

function OnLoaded(sender, args)

{

sender.Content.SilverlightApp.ButtonAClicked = IFrameFlick

sender.Content.SilverlightApp.ButtonBClicked = AddBookmark;

sender.Content.SilverlightApp.ButtonCClicked = FocusCurrentHeading;

sender.Content.SilverlightApp.ButtonDClicked = DelBookmark;

sender.Content.SilverlightApp.ButtonEClicked = AddShortnote;

sender.Content.SilverlightApp.ButtonFClicked = RefreshThisBrowser;

}

function RefreshThisBrowser(sender, args)

{

location.reload(true);

}

function AddShortnote(sender, args)

{

__doPostBack('TabContainer1$TabPanel3','ADDSNT||' + args.PrevText); }

AJAX Implementation

In this project, I have integrated the ASP.NET AJAX in order to place the Tab control on the web client. Later, I found that it really useful to have AJAX in tab control. That is because it does not need to reload the entire page every time that information in the Tab control has changed. The implementation in the ASP.NET Ajax Tab control is baffling because it does not have the WYSIWYG feature for elements inside the Tab control. It needs to actually run for both design and testing to check the result.

Table 6: An example of the ASP.NET AJAX programming in the project

<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="True" EnableScriptLocalization="True" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<cc1:TabContainer ID="TabContainer1" runat="server">

<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Content">

<asp:Panel ID="Panel1" ScrollBars="Auto" runat="server">

<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="4">

</asp:TreeView>

</asp:Panel>

</ContentTemplate>

</cc1:TabPanel>

</asp:UpdatePanel>

CSS Implementation

The CSS implementation makes XML displaying in the HTML format possible. The majority parts of this CSS implementation were done by the DTB authoring tool. However, most DTBs do not have this CSS files. Therefore, to prevent the incorrect presentation, it is important to check this file before uploading to the web-server. The next table is a part of the CSS file used with DTBs. It was written by M. Moodie and M. Hakkinen in 1999.

Table 7: An example of the CSS file

/* DTBbase.CSS Created 10-13-1999 by M. Moodie from M. Hakkinen's template Modified 03-16-2000 by M. Brown

template Modified 09-31-2002 by Tanakom*/

head, title, base, meta, link, style { display: none }

head object { display: none}

head script { display: none}

li { display: block; margin-top: 0.2em}

dt { display: block; font-weight: bold; margin-top: 0.4em}

dd { display: block; margin-left: 2em}

poem { display: block; margin-top: 1.0em}

hd { display: block; font-size: 1.2em; font-weight: bold}

author:before { content: "by "}

author { display: block; margin-top: 0.5em}

drama, scene { display: block; margin-top: 1.0em}

act { display: block}

stage { display: block; margin-top: 0.5em; font-style: italic}

speaker { display: block; font-variant: small-caps; font-weight: bold; margin-top: 0.5em}

speech { display: block; margin-left: 2em}

a { display: inline; text-decoration: underline}

abbr { display: inline}

acronym { display: inline}

bdo { display: inline}

citation.inline { display: inline}

code.inline { display: inline; font-family: Courier; font-size: 0.9em}

dfn { display: inline}

em { display: inline; font-style: italic}

img.inline { display: inline}

kbd.inline { display: inline; font-family: Courier; font-size: 0.9em}

noteref { display: inline; font-size: 0.7em; vertical-align: super}

object { display: inline}

Web Server Implementation

Like RIA, the Web Server implementation can be separated into two parts. The first part is the interface; it was programming in ASP.NET language to render the main HTML page at the client side. All project components and configurations are mixed in this interface before sending to the client. The second part is code behind; this programming language is the general C# language like RIA. The both parts run together at the web-server using the file name extension “ASPX” and “ASPX.CS”. These ASPX file is running in passive mode to wait for resolve the chapter id to the related media file and media information. The sample of this implementation is shown in the next table.

Table 8: An example of the ASP.NET ASPX programming in the project

public partial class _Default : System.Web.UI.Page

{

string dtbPath;

ReaderEngine myRE;

protected void Page_Load(object sender, EventArgs e)

{

string strEventArgument = Request.Form["__EVENTARGUMENT"];

string strEventTarget = Request.Form["__EVENTTARGET"];

try

{

myRE = new ReaderEngine(this.dtbPath);

List<ClsNcxNavPoint> ncxNavPointList = myRE.getNcxNavPointList;

//Add the root node of Bookmark at TreeView2

TreeNode trnRootBookmark = new TreeNode("Your Bookmark");

TreeView2.Nodes.Add(trnRootBookmark);

//Add the root node of Shortnote at TreeView3

TreeNode trnRootShortnote = new TreeNode("Your Shortnote");

TreeView3.Nodes.Add(trnRootShortnote);

//Add book content to TreeView1

TreeView1.Nodes.Clear();

TreeNode rootNode = new TreeNode("Book Content");

TreeView1.Nodes.Add(rootNode);

}

TOC