Chapter 1: Development environment
This chapter will focus on how an application is created. This is termed the development process. It is done 'using' or 'in' a development environment. After studying this chapter, you will
· understand the difference between development time and runtime
· understand basic features of a development environment
· acquire experience using a very simple development environment to produce a Web page linking to favorite or useful Web sites. While doing this, you will learn the basic tags of HTML.
· acquire experience using a specific development environment to produce a Flash/ActionScript movie giving directions. You will start learning about Flash frames, buttons and ActionScript variables and commands.
· appreciate features that are found in customized development environments in organizations
Motivating Examples
To demonstrate concepts concerning the development environment and, also, to get you started for the rest of the sample applications in this text, we use two examples. Using HyperText Markup Language (HTML), you will create a Web page with short descriptions and links to other Web sites. Using Flash, you will create a set of directions for folding an origami model.
Example 1: Favorite Web Sites
This application will be a Web page about other Web sites. For each Web site, the page will contain the name, a short description, an image and a working hyperlink. If a visitor clicks on a hyperlink, the browser loads (goes to) the target site.
NOTE: For the Favorite Web Sites application, an appropriate name for user is 'visitor'. It is a good practice to identify the users of your application.
Here is a screen shot of an example.
Figure 1: Listing of sites, with images as links
The three images are working hyperlinks: when a visitor to this site clicks on each one, the browser displays the indicated site.
The critical features required by this example include
· a development environment: namely a way to produce HTML
· a feature to produce a clickable image, also known as an icon, that makes the browser load a new page. Using the metaphor of the Web: this takes the user to a new site. In the technical jargon of the Web, this is a hyperlink.
Example 2: Directions
This next example demonstrates the use of Flash with a modest amount of ActionScript required.
NOTE: The Flash product itself contains excellent built-in lessons and tutorials and it is recommended that you do the lessons and tutorials to familiarize yourself with the panels and the drawing techniques.
The name for what you produce when you develop an application in Flash is movie. Flash movies contain text, images, animation, ways for the user to interact with the application, sound and video. These examples will demonstrate only a small portion of Flash features.
The example shown here is inspired by origami, the art of paper-folding. Figure 2 shows a screen from sometime in the middle of instructions to fold a simple model called the Captain's Shirt. The user of the application will look at the images and read the text and use the buttons to advance to the next step. Because it always is good to identify the user of an application, for this example, let us call the user a folder. For other examples, player will be an appropriate name.
The application will show the folder a sequence of steps for producing the wiggler origami model. It may be that a step will be an animated sequence showing several images in succession.
TECHNICAL NOTE: In Flash terminology, the Flash movie will advance several frames. Frames with distinct content are called keyframes. For the most part, you will be working with keyframes for these examples. Imagine the top triangle moving up and over to simulate a flap being made. The animation will stop at a programmed point in order for the folder to try to replicate the folding and then read the next step.
Figure 2: Step in making the Captain's shirt model
This approach suggested here could be used for displaying any sequence of steps. The screen holds pictures, text and two buttons: one going ahead to the next step, the other going back to the start. Decide on a simple process that you can illustrate with your own drawings. It does not have to be origami! You may want to start with each step being just a single frame.
The critical features required by this example include
· a development environment to produce a Flash movie
· a way to cause the Flash movie to advance to a labeled frame
· a way to produce buttons on the screen
Introduction to concepts
The aim of this book is to introduce you to the general ideas of programming or scripting, most specifically problem-solving, specifying logic, interface design and application development. Programming refers to specifying what you want your computer application to do by writing (coding) in one or more of a number of specific computer languages. The main focus of this text is on the scripting languages JavaScript and ActionScript, but comparisons are given to other languages and more what characterizes a scripting language is given below.
TECHNICAL NOTE: Two of the most common programming languages in use are C++ and Java. A significant number of applications still in active use today were written in COBOL, one of the first programming languages. Actually, a growing phenomenon is for applications to be made up of many parts in different programming languages connected by both standard and ad-hoc methods.
In the examples in this text, we mainly use HTML with JavaScript and browsers such as Internet Explorer or Mozilla and Flash with ActionScript (modeled after JavaScript). The development environment for HTML with JavaScript will be a text editor. NotePad, found on most PC computers, and TextPad, a readily available shareware tool, are examples of text editors. Flash is the development environment for creating Flash applications! You will see small samples of code in other languages.
TECHNICAL NOTE: JavaScript is not Java, but they do have some similarities in syntax. Syntax refers to the use of notation and symbols in a computer language. The developers of Flash at the Macromedia company made the decision to base the language for Flash on the same standard as JavaScript.
The use of the two different development environments along with samples of other languages is to demonstrate the concepts important for any computer application, independent of choice of programming language. These include
· representing a problem,
· logic,
· event-handling and
· attention to the human-computer interface.
The approach used in this text is to describe what we term the motivating example, focus on concepts, use those concepts in practical examples, and then return to the general, abstract mode by reflecting on what has been discussed. Though some computer specialists may disagree, programming languages have more similarities than differences. However, details matter in programming languages, so they require your attention. Please try to 'come up for air' frequently and consider the general comments in this book and reflect on your own experiences.
EXAMPLE: You will use a text editor to create the HTML file for Favorite Sites. You will then test your work using a browser such as Mozilla or Internet Explorer. You will use Flash to develop the Directions application and use Flash to test it. If you want to produce a version of the application to upload to the Web, you will use the Publish command in Flash.
Description: Application development environments
Building a programming application is like writing an essay or cooking a meal or composing a piece of music. In each case, a "product"—the program, essay, meal or song—is first created and then used or presented for use. When you write an essay, there is a stage in which you are writing and then a set of stages when you read the essay yourself, you show it to others to read, and maybe even put it out for publication. The cook prepares a meal and people eat the meal. A composer writes a song and musicians perform it. In programming, we refer to the creation phase as development time and the using phase as runtime. Like most analogies, these are not perfect.
You prepare an application; this is called development time. You are programming. Then, you put the application into operation; this is called runtime. You are running, invoking or executing the program. Of course, when programming (and writing, cooking and composing), there will be iterations: create, test, go back and fix or enhance your code, and then test again.
TECHNICAL NOTE: There also may be a distinction between testing a single program and installing and deploying the new program within a total system. An application may consist of a file holding a single program or several files holding programs and other things, such as images and/or databases. Unit test refers to testing one unit or module and system test refers to testing the whole system. The simple, but fairly powerful, Web page application featured in this chapter involves multiple files.
The file you prepare is called the source file. In some languages, the code is stored more or less as you wrote it and translated statement by statement as needed. The languages are said to be interpreted and the languages called scripting languages. In other languages, the source code is translated all at once into another form, the executable file, which is what is run or executed. The translation process is called compilation.
The HTML/JavaScript documents are stored as you prepare them and JavaScript is a scripting language. Flash and ActionScript is somewhat in-between. You can test your Flash application within the Flash environment. The ActionScript is translated statement by statement. After testing your Flash document, you will perform a compilation operation termed Publish in the jargon of Flash. This will produce files for uploading to a Web site. The files are relatively small because they are executed by the Flash player (also called plug-in).
NOTE: you may have been given an option to download at no charge the latest Flash plug-in when browsing the Web. This refers to a program that executes or plays Flash movies. It does not provide the ability to create a new Flash application or examine an existing one. For that, you need to purchase the Flash product from Macromedia.
You cannot easily examine the code of a compiled program and you cannot examine the code of a Flash movie.
One common situation in these times is that an application consists of multiple files. These files even may be in different languages. Your task may be to work on just one file, but you need to know about other files to know how to proceed and to do a proper test.
The development environment includes some or all of the following
· an editor for the creation and editing of source files. One important attribute of the editor is the ease in which you, the programmer, can go back and forth between multiple source files, for information and for copying.
· a procedure, maybe part of the editor and maybe not, for managing the multiple files
· a compiler, if required
· a program for running the application. This last could be part of the operating system for the computer
· optionally, a debugger, that is, a version of the program for running the application that provides help in finding mistakes
· a facility for referring to the requirements generated by customers and others for the application
· a facility for documenting the application, including managing versions and status with respect to testing and deployment.
The term editor is used for the initial creation and editing and refining the work. The editor may treat the code as plain text or may have features relating specifically to the language. For example, the editor may use colors to display the code and/or may provide options to complete parts of the coding. You will see examples of the former in the use of TextPad and examples of the latter in Flash.
The last two facilities, references to lists of requirements and documentation, are common in development environments in organizations. More generally, large organizations may have quite elaborate development environments that are mixtures of off-the-shelf, customized and home-grown tools.
Reading checks
1. Explain what is meant by development time versus runtime.
2. Preparing a meal is analogous to development time or runtime?
3. Eating a meal is analogous to development time or runtime?
4. Explain what is meant by editor in the production of programs.
Application: Favorite Sites
Plan of attack for Favorite Sites
This application uses the basic and substantial capabilities of HTML itself, without any JavaScript. The steps for implementation are
- Identify the addresses, called URLs for uniform resource locator.
- Find and download images, perhaps the logos of the sites
- Compose the accompanying descriptive text
- Prepare the HTML file. We will demonstrate this using a basic (NotePad) and a specialized (TextPad) editor.
- Test using any browser. This corresponds to executing or running the file.
- Optionally, upload all the files of the application to a Web server using a FTP (file transfer protocol) program such as ws-ftp or filezilla.
In this simple example, you most probably will compose the text as you are preparing the file. The steps are shown this way to emphasize that in this as in other applications, there is effort to be made independent of the technical, language-dependent work. You will need to use the Save Image (Save Picture) feature of browsers to acquire the image files.