View source for Netbeans/C2/Integrating-an-Applet-in-a-Web-Application/English-timed

{| Border=1

|| Time

|| Narration


|-
| 00.01
|Hii everyone. 

|-
| 00.02
| Welcome to the tutorial on Integrating an Applet in a Web Application

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

|-
|00.16
|If this is the first time you are using '''Netbeans''', please view the tutorials, 

|-
| 00.21
| Introduction to Netbeans, to get started with the '''IDE. '''

|-
|00.25
|Also  view the tutorials Developing Web Applications and Designing GUIs on Netbeans 

|-
| 00.32
|to get familiarised with the '''IDE. '''

|-
| 00.36
|All the above tutorials can be viewed on the spoken tutorial website

|-
|00.41
|For this demonstration, I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1 

|-
| 00.55
|In this tutorial, we will 

|-
| 00.57
| Create an Applet 

|-
|00.59
|Run the Applet; and 


|-
|01.02
|Embed the applet in a web application 

|-

|01.05

|Let us now launch the '''IDE''' to create our project. 



|-

|01.10
|Go to  '''File>New Project''' and create a '''Java Class Library '''


|-

| 01.17

|Click ''Next'''


|-

|01.19

|Give your Project a name

|-

|01.21

|I will name my Project as  '''SampleApplet. '''
|-

|01.26

|Set the  Location to any directory on your system


|-
|01.30
|And Click '''Finish''' to create your project

|-

|01.34

|Let us '''Next''' create the  '''Applet Source File'''

|-

|01.39

|Right-Click on the '''SampleApplet''' project node

|-

|01.42

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


|-

| 01.47

|Select the desired '''Source and Binary Format''' for the project. 


|-

| 01.53

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

|-
| 01.59
|For example, if you choose the latest version of JDK, 

|-
| 02.04
|then the applet might not run on machines that have an older version of the Java browser plugin.



|-
| 02.10
|I will select the latest version of '''JDK''' since my browser supports the latest version of the java browser pluggin

|-
| 02.19
|Click on '''OK'''

|-
| 02.21
|Right-Click again on the '''SampleApplet''' project node

|-
|02.25
| and select '''New''' >'''Applet'''

|-
|02.29
| If you do not find the applet option in this contextual menu, Click on '''Other'''

|-
|02.35
| Under '''Categories''', select '''Java. '''

|-
|02.38
|And Under '''File Types''', select '''Applet''' to create an Applet

|-
| 02.43
|Give the '''Class name''' as '''Sample''' and the '''Package''' as '''org.me.hello'''

|-
| 02.55
|Click Finish



|-

| 02.57

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


|-

|03.02

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



|-

|03.08

|The Applet source file opens in the source editor. 



|-

| 03.12

|Let us now define our applet class. 


|-

| 03.17

|I have the code for a simple applet, 


|-

| 03.21

|that sets the background color to cyan, 


|-

| 03.24

|the foreground color to red, 


|-

| 03.27

|and displays a message that illustrates the order in which the methods in the applet,


|-

| 03.34
|i.e. the '''init()''' method, the '''start()''' method, and the '''paint() '''methods are called, when the applet starts up. 




|-
| 03.43
| I will copy the entire code on my clipboard and paste it over the existing  code in the IDE. 


|-

| 03.54
|Right-Click on the '''Sample.java''' file in the Projects window, 




|-

| 04.00

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


|-

| 04.04

|  The '''Sample.html''' launcher file, with the applet embedded, is created in the build folder, 




|-

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

|-
| 04.15
|'''Sample dot html file'''
|-

| 04.18
 
|The Applet is also  launched in the '''Applet viewer. '''

|-
| 04.23
|With the message display on the screen

|-
| 04.27
|Let me close the '''appletviewer'''

|-

| 04.29

|And let us next embed  the Applet in a Web Application
|-

| 04.33

|So that we can make the applet available to the user


|-

| 04.37

|To do so, we create a '''Web Application''', 

|-

| 04.42

| Under '''Categories'''  select '''java web''' and under '''Projects''' select '''Web application'''

|-

| 04.48

|and Click Next


|-

| 04.50

|We wll name our Project as '''HelloSampleApplet''' and click '''Finish'''

|-

| 05.01

|Click '''Next'''

|-
| 05.03
|See if the correct server is selected and click '''Finish''' to create your Project



|-

| 05.12

|Note that, when we add the Java project '''SampleApplet''' to the web project '''HelloSampleApplet'''

|-

| 05.20

|we enable to IDE to build the applet whenever we build this web application. 

|-

| 05.26

|Therefore, when we modify the '''Sample dot java applet '''


|-

| 05.34

|the IDE builds a new version of the applet whenever this  is built. 


|-

| 05.40

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

|-

| 05.45

|and Click on '''Properties'''

|-

| 05.49

|Our applet is in a Java project, 

|-
| 05.52
|To add the Jar file select the '''Packaging''' option from the menu on the left side of the window

|-

| 05.59

| click on '''Add Project''' and select the java project that contains the Applet class

|-
| 06.05
|In this case it is '''SampleApplet'''


|-

| 06.09

|Click on '''Add Project Jar Files'''

|-

| 06.14

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

|-

| 06.20

|Click on Ok



|-

| 06.24

|And let us build the '''HelloSampleApplet''' project now by right clicking on it in the '''Projects''' Window


|-

| 06.31

|and selecting '''Clean and Build''' options

|-

| 06.36

|Now when this projet is built the applets Jar file is generated in the original '''SampleApplet''' Project

|-

| 06.45

|Go to the Files Window expand the '''HelloSampleApplet''' Project node



|-

| 06.51

|Under '''build''' and '''web''' folder 

|-

| 06.54

|You can see that the jar file has been added

|-

| 06.58

|Now Let us next embed the applet in a HTML file, 



|-

| 07.02

|Go back to the '''Project''' Window, right-click on the '''HelloSampleApplet''' project node, 

|-

| 07.09

|choose '''New''' and select the '''HTML''' file option

|-

| 07.13

|If you cannot find the '''HTML''' option in this contextual menu
 
|-

| 07.18

|Click on '''Other'''

|-

| 07.21

|Select '''Web'''  under '''Categories''' and select '''HTML''' under  '''File Types''' and click '''Next'''

|-

| 07.29

|Give your Html file a name
|-

| 07.32

|I will name the file as '''MyApplet''' and Click on '''Finish.'''



|-

| 07.40

|The next step is to enter the applet tag in between the body tags in '''MyApplet dot html''' file



|-

| 07.48

|I have the applet code here


|-

| 07.51
 
|Let me copy it onto my clipboard and paste it in between the body tags in the html file
|-

| 08.03
 
|The Next step is to run the html file

|-
| 08.07
|Right click on '''MyApplet dot html''' in the project windows and select '''Run File'''

|-
| 08.14
|The server deploys the html file in the IDE default browser

|-
| 08.25
|Now the server as deploy the html file in the IDE's default browser

|-
| 08.30
|You can see the message displayed across the screen
|-

| 08.36

|Now to the assignment 

|-

| 08.38

|As your assignment create another simple banner applet in the IDE, 


|-

| 08.43

|where the applet scrolls a message across the applet's window. 


|-

| 08.49

|Embed your applet in a web application, 

|-

| 08.52

|and add JAR files to the web project and, 

|-

| 08.56

|finally create and run the HTML file. 
|-

| 09.00

|I have created my own moving banner applet 

|-

| 09.04

|Let me open the project and run it

|-

| 09.18

|You can see that the applet has opened with the message scrolling across the Window
|-

| 09.28

|Watch the video available at the link shown on the screen. 

|-

| 09.32

|It summarizes the Spoken Tutorial project. 
 
|-

| 09.36

|If you do not have good bandwidth, you can download and watch the videos. 

|-

| 09.41

|The Spoken Tutorial project team conduct workshops using Spoken Tutorials. 


|-

| 09.46

|Gives certificates to those who pass an online test. 


|-

| 09.51

|For more details please write to contact@spoken-tutorial.org


|-

| 09.58

|Spoken Tutorial Project is a part of the Talk to a Teacher Project

|-

| 10.04

| Supported by the National Mission on education through ICT, MHRD, Government  of India

|-

| 10.00

|More information on this mission is available at spoken-tutorial.org/NMEICT-Intro

|-

| 10.22

|This tutorial has been  contributed by  IT for Change 


|-

| 10.27

|Thank you for joining us.