Chandrika: Created page with '[http://spoken-tutorial.org/wiki/images/8/88/Integrating_an_Applet_in_a_Web_Application_-_Resources.zip Resources for "Integrating Applets in a Web Application"] {| style="bord…'

2012-11-27T12:37:12Z

Created page with '[http://spoken-tutorial.org/wiki/images/8/88/Integrating_an_Applet_in_a_Web_Application_-_Resources.zip Resources for "Integrating Applets in a Web Application"] {| style="bord…'

New page

[http://spoken-tutorial.org/wiki/images/8/88/Integrating_an_Applet_in_a_Web_Application_-_Resources.zip Resources for "Integrating Applets in a Web Application"]

{| style="border-spacing:0;"
| style="border-top:0.002cm solid #000000;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| <center>'''Visual Cue'''</center>
| style="border:0.002cm solid #000000;padding:0.097cm;"| <center>'''Narration'''</center>

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 1
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| Hi everyone

Welcome to the tutorial on Integrating an Applet in a Web App

The application that you build in this tutorial shows you how to build and deploy applets in the Netbeans IDE.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 2
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| If this is the first time you are using Netbeans, please view the tutorials,

Introduction to Netbeans, to get started with the IDE.

Also you view the tutorials Developing Web Applications and Designing GUIs on Netbeans

to get familiarised with the IDE.

All the above tutorials can be viewed on [http://www.spoken-tutorials.org/ www.spoken-tutorials.org].

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 3

System Setup
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| For this demonstration, I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.0.1

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 4

Lesson Outline
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| '''In this tutorial''', we will

Create an Applet

Run the Applet; and

Embed the applet in a web application

Let us now launch the IDE.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Switch to Netbeans Window

| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| ''Creating the Java Project''

Choose '''File>New Project'''.

Under '''Categories''', select '''Java'''.

Under '''Projects''', select '''Java Class Library'''.

Click '''Next'''.

Under '''Project Name ''', type '''SampleApplet'''.

Set the Project Location to any folder on your computer.

Click '''Finish'''.

''Creating the Applet Source File''

Right-Click the '''SampleApplet '''project

and choose '''Properties '''to open the Properties window.

Select the desired '''Source/Binary Format '''for the project.

This is to make sure if the correct version of the JDK has been chosen.

For example, if you choose the latest version of JDK,

then the applet might not run on machines

that have an older version of the Java browser plugin.

Right-Click the SampleApplet project node in the Projects window,

and select '''New>Other'''.

Under '''Categories''', select '''Java'''.

Under '''File Types''', select '''Applet'''.

Click '''Next'''.

Under '''Class Name''', type '''Sample'''.

Under '''Package''', type '''org.me.hello'''.

Click '''Finish'''.

The IDE creates the applet source file in the specified package.

You can expand the '''Source Package''' node in the '''Projects''' window to see this.

The applet source file opens in the source editor.

Let us now define our applet class.

I have the code for a simple applet,

that sets the background color to cyan,

the foreground color to red,

and displays a message that illustrates the order

in which the methods in the applet,

i.e. the '''init()''',''' start()''', and '''paint()''' methods are called,

when the applet starts up.

I will copy this code and paste it over the existing default code in the IDE.

''Running an Applet Source File''

Right-Click the Sample.java file node in the '''Projects '''window,

and choose '''Run File '''from the contextual menu.

The Sample.html launcher file, with the applet embedded,

is created in the ''build ''folder,

which you can see if you switch to the '''Files '''window.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| ''Show Applet Window''
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| The Applet is now launched in the Applet viewer.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Switch to Netbeans Window
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| ''Embedding an Applet in a Web Application''

Your applet is now complete.

Now we need to make it available to the user.

To do so, we create a web application,

put the applet JAR on its class-path,

and then add an applet tag to the web application's HTML file.

''Creating the Web Project''

Choose '''File>New Project'''.

Under '''Categories''', select '''Java Web'''.

Under '''Projects''', select '''Web Application'''.

Click '''Next'''.

Under '''Project Name''', type '''HelloSampleApplet'''.

Set the project location to any location on your system.

Click Next, select your server and click Finish.

''Adding the Applet JAR file to the web project''

When you want to include an applet JAR file in a web project,

you can do so by adding the Java Project that contains the JAR file,

or by adding the JAR file itself.

Also note that, when you add the Java project to the web project,

you enable to IDE to build the applet whenever you build the web application.

Therefore, when you modify the applet in the Java project,

the IDE builds a new version of the applet whenever the web project is built.

In the '''Projects '''window, right-click the HelloSampleApplet project node,

and select '''Properties '''from the contextual menu.

Our applet is in a Java project, so we select '''Packaging''',

and click '''Add Project'''.

Browse to, and select the folder that contains the Java project.

The JAR file containing the applet source file is listed in the table

at the bottom of the Project Properties dialog box.

Click Add File.

When you build the HelloSampleApplet project,

the applet's JAR file is generated in the original SampleApplet project

and is packaged in the HelloSampleApplet project's WAR file.

It is also added to the ''build/web ''folder,

which you can see in the '''Files '''window.

''Create and Run the HTML file''

Let us embed the applet in an HTML file,

right-click the HelloSampleApplet project node,

and choose New>Other from the contextual menu.

Under Categories, select Web.

Under File Types, select HTML.

Click Next.

Let us name our HTML file as MyApplet.

Click Finish.

Let us enter the applet tag between the body tags now.

Right click the HTML node in the Projects window,

and choose Run File from the contextual menu.

The Server deploys the HTML file in the IDE's default browser.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| ''Switch to Slide 5, Slide 6''

''Assignment''

| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| '''''Assignment'''''

As your assignment,

create another simple banner applet in the IDE,

where the applet scrolls a message,

from left to right,across the applet's window.

Embed your applet in a web application,

add JAR files to the web project and,

create and run the HTML file.

I have created my moving banner applet which looks like this.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 7, Slide 8 , Slide 9

About the Spoken Tutorial Project
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| The video available at [http://spoken-tutorial.org/What_is_a_Spoken_Tutorial http://spoken-tutorial.org/What_is_a_Spoken_Tutorial] summarizes the spoken tutorial project.

If you do not have a good bandwidth, you can download and watch it.

We conduct workshops using spoken tutorials.

We also give certificates to those who pass an online test.

Please contact us for more details.

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 10, Slide 11

Acknowledgement
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| Spoken Tutorial project is a part of the Talk to a Teacher Project.

Supported by the National Mission on Education through ICT, MHRD, Govt of India.

This project is co-ordinated by [http://spoken-tutorial.org/ http://spoken-tutorial.org].

More information on the same is available at gttp://spoken-tutorial.org/NMEICT-Intro

|-
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:none;padding:0.097cm;"| Slide 12

Thank You
| style="border-top:none;border-bottom:0.035cm solid #000000;border-left:0.035cm solid #000000;border-right:0.035cm solid #000000;padding:0.097cm;"| This is Sindhu Ghanti from IT for Change signing off.

Thank you

|}

Netbeans/C2/Integrating-an-Applet-in-a-Web-Application/English - Revision history

Chandrika: Created page with '[http://spoken-tutorial.org/wiki/images/8/88/Integrating_an_Applet_in_a_Web_Application_-_Resources.zip Resources for "Integrating Applets in a Web Application"] {| style="bord…'