Tutorial 3: Uploading Java applets

	Tutorial 3: Uploading Java applets

Overview

Level: Intermediate
Duration: 5-7 minutes

In this tutorial we will learn how to build a Java applet, add it to an existing HTML file and upload it to your web-server. If you think you will be only building Flash files - move on to Tutorial 4: Uploading Flash files

You will need to be familiar with uploading HTML files to your web-server, have an FTP application like CuteFTP and have login information such as username and password.

Step 1: Load a project

Launch the 1 Cool Button Tool application and Open an Existing Project called tutorial-navbar.1cb

This project is a navbar with some animation and sounds so you can see a few of the features of 1CBT working in a live environment.

Step 2: Test and Build the project

To test the project in your browser you will need to change tabs to Build Applet.

This is where you can set the Build Folder in which 1CBT puts all the necessary files for you to add the applet to your web page. It defaults to a folder with the same name as your project located inside of your 1 Cool Button Tool folder.

It also shows you the generated HTML code that you will need to paste into your own HTML page and the size that the applet will be.

Simply click the Test Applet in Browser and 1CBT will build your applet, open a browser window and run your applet.

OK, after you have checked that it works fine on your local machine - lets see what files we will need to put on your live server.

Use Windows Explorer to view the Build Folder - it is located inside of the 1 Cool Button Tool folder and will be called tutorial-navbar (you will also notice a backup folder - it is just a backup of all the resource needed to rebuild your project).

Alternatively you can view the contents of the Build Folder by clicking on the Build Folder link displayed just below the build folder location dialog.

The Build Folder contains the following files:

1cbt(88x31).gif	The 1CBT logo used at the top of the menu
BtnPlayer.cab	Compressed 1CBT class file - used for Microsoft browsers
BtnPlayer.class	Uncompressed 1CBT Player - used only in older browsers
BtnPlayer.jar	Compressed 1CBT class file - used for Netscape browsers
madgigl.au	Giggle sound
tutorial-navbar.bak	Backup of the project file - by keeping this on the live server many people have been saved a rebuild when their PC fails.
tutorial-navbar.html	The HTML page used when you Test in Browser - only displays the applet.
tutorial-navbarMap.jpg	Automatically generated imagemap - used when people do not have a Java-enabled browser (extremely rare these days)

At a minimum you need to put all the BtnPlayer files (class, cab and jar) and all of the images and sounds used in your Java project on the live server in order for your project to work.

OK. Lets upload these files to your web-server.

Step 3: Upload the project

Start your FTP application and login to your web-server.

Upload the entire contents of the Build Folder to the area where your HTML files are stored.

That's it!

Now check that it has worked. Open a new browser and go to http://www.yourdomainname.com/tutorial-navbar.html - you should be looking at the same page that you saw when you tested the Applet in your Browser earlier.

Now we will see how to add the navbar to a different HTML page.

Step 4: Adding your buttons to an HTML file

In order to demonstration how this works we have prepared a pretty basic web-page that has a place holder for where your applet will go. There is nothing special about the HTML page we have used so you can use this technique on any HTML page you may have.

First, have a look at the web page that we will insert the applet into. It is located in your 1 Cool Button Tool application folder - it is called tutorial3.html .

Notice we have put a text place holder where we will put the applet. This is a good idea as it makes it a little easier when you are pasting the 1CBT HTML code into the file.

The following step could be done is any HTML editor - we will use Notepad.

Notepad is good for a couple of reasons, we know you have it and if you can do it in Notepad, you will be able to do it in anything else.

Launch Notepad (or WordPad if you can't find Notepad) and open tutorial3.html (you will need to use the All files *.* filter or you will not see the file).

OK - lets get the HTML code from 1CBT and paste it into the tutorial3.html file. Switch back to 1CBT and click the Copy HTML to Clipboard on the Build Applet tab.

Switch back to Notepad and highlight ++-- insert 1CBT applet or flash HTML code here --++ with your mouse and paste the 1CBT HTML over it by either pressing Ctrl-V or using the Edit->Paste menu option.

Now save the HTML file and exit Notepad. You can preview the HTML in a browser now if you like - but all you will see is a grey box where the applet should be. This is because the HTML expects the contents of the Build Folder to be in the same folder.

To see if it has worked you will need to copy the tutorial3.html into the Build Folder and then open it in a browser. Try this now.

OK. Now lets put that on your live server to see it in action.

Step 5: Uploading again

Start your FTP application and login to your web-server.

This time you can just upload the tutorial3.html file to the area where HTML files are stored.

That's it!

Now check that it has worked. Open a new browser and go to http://www.yourdomainname.com/tutorial3.html

Well done! You have completed this tutorial.

You are ready to try your own project - good luck!