Difference between revisions of "Netbeans/C2/Integrating-an-Applet-in-a-Web-Application/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(11 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{| Border=1
 
{| Border=1
  
|| Time
+
|| '''Time'''
 
+
||'''Narration'''
|| Narration
+
 
+
  
 
|-
 
|-
| 00.01
+
| 00:01
|Hii everyone.  
+
|Hi everyone. Welcome to the tutorial on '''Integrating an Applet in a Web Application'''.
  
 
|-
 
|-
| 00.02
+
|00:08
| Welcome to the tutorial on Integrating an Applet in a Web Application
+
|The '''application''' that you '''build''' in this tutorial shows you how to '''build''' and '''deploy''' '''applet'''s in the '''Netbeans IDE.'''
  
 
|-
 
|-
|00.08
+
|00:16
|The application that you build in this tutorial shows you how to build and deploy applets in the '''Netbeans IDE.'''  
+
|If this is the first time you are using '''Netbeans''', please view the tutorial -
  
 
|-
 
|-
|00.16
+
| 00:21
|If this is the first time you are using '''Netbeans''', please view the tutorials,
+
| '''Introduction to Netbeans''' to get started with the '''IDE. '''
  
 
|-
 
|-
| 00.21
+
|00:25
| Introduction to Netbeans, to get started with the '''IDE. '''
+
|Also, view the tutorials '''Developing Web Applications''' and '''Designing GUIs on Netbeans'''  
  
 
|-
 
|-
|00.25
+
| 00:32
|Also  view the tutorials Developing Web Applications and Designing GUIs on Netbeans
+
|to get familiarized with the '''IDE. '''
  
 
|-
 
|-
| 00.32
+
| 00:36
|to get familiarised with the '''IDE. '''
+
|All the above tutorials can be viewed on the '''Spoken Tutorial''' website.
  
 
|-
 
|-
| 00.36
+
|00:41
|All the above tutorials can be viewed on the spoken tutorial website
+
|For this demonstration, I am using the '''Linux Operating System Ubuntu''' version '''11.04''' and '''Netbeans IDE''' version '''7.1.1'''.
  
 
|-
 
|-
|00.41
+
| 00:55
|For this demonstration, I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1
+
|In this tutorial, we will:
  
 
|-
 
|-
| 00.55
+
| 00:57
|In this tutorial, we will
+
| '''Create''' an '''Applet'''
  
 
|-
 
|-
| 00.57
+
|00:59
| Create an Applet  
+
| '''Run''' the Applet and
  
 
|-
 
|-
|00.59
+
|01:02
|Run the Applet; and
+
|'''Embed''' the applet in a '''web application'''.
 
+
  
 
|-
 
|-
|01.02
+
|01:05
|Embed the applet in a web application
+
 
+
|-
+
 
+
|01.05
+
 
+
 
|Let us now launch the '''IDE''' to create our project.  
 
|Let us now launch the '''IDE''' to create our project.  
 
 
  
 
|-
 
|-
 
+
|01:10
|01.10
+
|Go to  '''File > New Project''' and create a '''Java Class Library '''.
|Go to  '''File>New Project''' and create a '''Java Class Library '''
+
 
+
  
 
|-
 
|-
 
+
| 01:17
| 01.17
+
|Click '''Next'''.
 
+
|Click ''Next'''
+
 
+
  
 
|-
 
|-
 
+
|01:19
|01.19
+
|Give your '''Project''' a name.
 
+
|Give your Project a name
+
  
 
|-
 
|-
 +
|01:21
 +
|I will name my project as  '''"SampleApplet"'''.
  
|01.21
 
 
|I will name my Project as  '''SampleApplet. '''
 
 
|-
 
|-
 
+
|01:26
|01.26
+
|Set the  '''Location''' to any directory on your system.
 
+
|Set the  Location to any directory on your system
+
 
+
  
 
|-
 
|-
|01.30
+
|01:30
|And Click '''Finish''' to create your project
+
|And, click '''Finish''' to create your project.
  
 
|-
 
|-
 
+
|01:34
|01.34
+
|Let us next create the  '''Applet Source File'''.
 
+
|Let us '''Next''' create the  '''Applet Source File'''
+
  
 
|-
 
|-
 
+
|01:39
|01.39
+
|Right-Click on the "SampleApplet" '''project node'''
 
+
|Right-Click on the '''SampleApplet''' project node
+
  
 
|-
 
|-
 
+
|01:42
|01.42
+
| and choose '''Properties''' to open the '''Properties''' window.  
 
+
| and choose '''Properties''' to open the Properties window.  
+
 
+
  
 
|-
 
|-
 
+
| 01:47
| 01.47
+
|Select the desired '''Source or Binary Format''' for the project.  
 
+
|Select the desired '''Source and Binary Format''' for the project.  
+
 
+
  
 
|-
 
|-
 
+
| 01:53
| 01.53
+
|This is to make sure if the correct version of the '''JDK''' has been chosen.  
 
+
|This is to make sure if the correct version of the JDK has been chosen.  
+
  
 
|-
 
|-
| 01.59
+
| 01:59
|For example, if you choose the latest version of JDK,  
+
|For example- if you choose the latest version of JDK,  
  
 
|-
 
|-
| 02.04
+
| 02:04
|then the applet might not run on machines that have an older version of the Java browser plugin.
+
|then the applet might not '''run''' on machines that have an older version of the '''Java browser plugin'''.
 
+
 
+
  
 
|-
 
|-
| 02.10
+
| 02:10
|I will select the latest version of '''JDK''' since my browser supports the latest version of the java browser pluggin
+
|I will select the latest version of '''JDK''' since my browser supports the latest version of the java browser plugin.
  
 
|-
 
|-
| 02.19
+
| 02:19
|Click on '''OK'''
+
|Click on '''OK'''.
  
 
|-
 
|-
| 02.21
+
| 02:21
 
|Right-Click again on the '''SampleApplet''' project node
 
|Right-Click again on the '''SampleApplet''' project node
  
 
|-
 
|-
|02.25
+
|02:25
| and select '''New''' >'''Applet'''
+
| and select '''New > Applet'''.
  
 
|-
 
|-
|02.29
+
|02:29
| If you do not find the applet option in this contextual menu, Click on '''Other'''
+
| If you do not find the '''Applet''' option in this contextual menu, click on '''Other'''.
  
 
|-
 
|-
|02.35
+
|02:35
| Under '''Categories''', select '''Java. '''
+
| Under '''Categories''', select '''Java.'''
  
 
|-
 
|-
|02.38
+
|02:38
|And Under '''File Types''', select '''Applet''' to create an Applet
+
|And under '''File Types''', select '''Applet''' to create an Applet.
  
 
|-
 
|-
| 02.43
+
| 02:43
|Give the '''Class name''' as '''Sample''' and the '''Package''' as '''org.me.hello'''
+
|Give the '''Class name''' as "Sample" and the '''Package''' as "org.me.hello".
  
 
|-
 
|-
| 02.55
+
| 02:55
|Click '''Finish'''
+
|Click '''Finish'''.
 
+
 
+
  
 
|-
 
|-
 
+
| 02:57
| 02.57
+
|The IDE creates the applet '''source file''' in the specified '''package'''.  
 
+
|The IDE creates the applet source file in the specified package.  
+
 
+
  
 
|-
 
|-
 
+
|03:02
|03.02
+
|You can expand the '''Source Packages''' node in the '''Projects''' window to see this.  
 
+
|You can expand the '''Source Package''' node in the Projects window to see this.  
+
 
+
 
+
  
 
|-
 
|-
 
+
|03:08
|03.08
+
|The Applet source file opens in the '''Source editor'''.  
 
+
|The Applet source file opens in the source editor.  
+
 
+
 
+
  
 
|-
 
|-
 
+
| 03:12
| 03.12
+
|Let us now define our '''applet class'''.  
 
+
|Let us now define our applet class.  
+
 
+
  
 
|-
 
|-
 
+
| 03:17
| 03.17
+
|I have the code for a simple applet  
 
+
|I have the code for a simple applet,
+
 
+
  
 
|-
 
|-
 
+
| 03:21
| 03.21
+
|that sets the '''background''' color to cyan,  
 
+
|that sets the background color to cyan,  
+
 
+
  
 
|-
 
|-
 
+
| 03:24
| 03.24
+
|the '''foreground''' color to red  
 
+
|the foreground color to red,
+
 
+
  
 
|-
 
|-
 
+
| 03:27
| 03.27
+
|and displays a message that illustrates the order in which the '''methods''' in the applet
 
+
|and displays a message that illustrates the order in which the methods in the applet,
+
 
+
  
 
|-
 
|-
 
+
| 03:34
| 03.34
+
|i.e. the '''init()''' method, the '''start()''' method, and the '''paint() '''methods are called when the applet starts up.  
|i.e. the '''init()''' method, the '''start()''' method, and the '''paint() '''methods are called, when the applet starts up.  
+
 
+
 
+
 
+
  
 
|-
 
|-
| 03.43
+
| 03:43
| I will copy the entire code on my clipboard and paste it over the existing code in the IDE.  
+
| I will now copy the entire code on my clipboard and '''paste''' it over the existing code in the IDE.  
 
+
  
 
|-
 
|-
 
+
| 03:54
| 03.54
+
|Right-Click on the '''Sample.java''' file in the '''Projects''' window
|Right-Click on the '''Sample.java''' file in the Projects window,
+
 
+
 
+
 
+
 
+
 
|-
 
|-
 
+
| 04:00
| 04.00
+
 
+
 
|and choose '''Run File''' from the contextual menu.  
 
|and choose '''Run File''' from the contextual menu.  
 
  
 
|-
 
|-
 
+
| 04:04
| 04.04
+
|  The '''Sample.html''' launcher file, with the applet embedded, is created in the '''build''' folder  
 
+
|  The '''Sample.html''' launcher file, with the applet embedded, is created in the build folder,
+
 
+
 
+
 
+
  
 
|-
 
|-
 
+
| 04:13
| 04.13
+
+
 
|which you can see in the '''Files''' window.  
 
|which you can see in the '''Files''' window.  
  
 
|-
 
|-
| 04.15
+
| 04:15
|'''Sample dot html file'''
+
|'''Sample dot html file'''.
 +
 
 
|-
 
|-
 
+
| 04:18
| 04.18
+
  |The Applet is also  launched in the '''Applet viewer '''
   
+
|The Applet is also  launched in the '''Applet viewer. '''
+
  
 
|-
 
|-
| 04.23
+
| 04:23
|With the message display on the screen
+
|with the message displayed across the screen.
  
 
|-
 
|-
| 04.27
+
| 04:27
|Let me close the '''appletviewer'''
+
|Let me close the '''applet viewer'''.
  
 
|-
 
|-
 +
| 04:29
 +
|And, let us next embed the Applet in a web-application
  
| 04.29
 
 
|And let us next embed  the Applet in a Web Application
 
 
|-
 
|-
 
+
| 04:33
| 04.33
+
|so that we can make the applet available to the user.
 
+
|So that we can make the applet available to the user
+
 
+
  
 
|-
 
|-
 
+
| 04:37
| 04.37
+
|To do so, we create a web-application.
 
+
|To do so, we create a '''Web Application''',
+
  
 
|-
 
|-
 
+
| 04:42
| 04.42
+
| Under '''Categories''', select '''java web''' and under '''Projects''', select '''Web Application'''
 
+
| Under '''Categories'''  select '''java web''' and under '''Projects''' select '''Web application'''
+
  
 
|-
 
|-
 
+
| 04:48
| 04.48
+
|and click '''Next'''.
 
+
|and Click '''Next'''
+
 
+
  
 
|-
 
|-
 
+
| 04:50
| 04.50
+
|We will name our '''Project''' as "HelloSampleApplet" and  
 
+
|We wll name our Project as '''HelloSampleApplet''' and click '''Finish'''
+
  
 
|-
 
|-
 
+
| 05:01
| 05.01
+
|click '''Next'''.
 
+
|Click '''Next'''
+
  
 
|-
 
|-
| 05.03
+
| 05:03
|See if the correct server is selected and click '''Finish''' to create your Project
+
|See if the correct server is selected and click '''Finish''' to create your project.
 
+
 
+
  
 
|-
 
|-
 
+
| 05:12
| 05.12
+
|Note that when we add the Java project '''SampleApplet''' to the web project '''HelloSampleApplet''',
 
+
|Note that, when we add the Java project '''SampleApplet''' to the web project '''HelloSampleApplet'''
+
  
 
|-
 
|-
 
+
| 05:20
| 05.20
+
|we enable the IDE to '''build''' the applet whenever we '''build''' this web application.  
 
+
|we enable to IDE to build the applet whenever we build this web application.  
+
  
 
|-
 
|-
 
+
| 05:26
| 05.26
+
|Therefore, when we modify the '''Sample dot java applet ''',
 
+
|Therefore, when we modify the '''Sample dot java applet '''
+
 
+
  
 
|-
 
|-
 
+
| 05:34
| 05.34
+
 
+
 
|the IDE builds a new version of the applet whenever this  is built.  
 
|the IDE builds a new version of the applet whenever this  is built.  
 
  
 
|-
 
|-
 
+
| 05:40
| 05.40
+
|Now, in the '''Projects''' window, right-click on the '''HelloSampleApplet''' project node  
 
+
|Now In the Projects window, right-click the '''HelloSampleApplet''' project node,
+
  
 
|-
 
|-
 
+
| 05:45
| 05.45
+
|and click on '''Properties'''.
 
+
|and Click on '''Properties'''
+
  
 
|-
 
|-
 
+
| 05:49
| 05.49
+
|Our applet is in a Java project.
 
+
|Our applet is in a Java project,
+
  
 
|-
 
|-
| 05.52
+
| 05:52
|To add the Jar file select the '''Packaging''' option from the menu on the left side of the window
+
|To add the '''Jar file''', select the '''Packaging''' option from the menu on the left side of the window.
  
 
|-
 
|-
 
+
| 05:59
| 05.59
+
| Click on '''Add Project''' and select the java project that contains the '''Applet class'''.
 
+
| click on '''Add Project''' and select the java project that contains the Applet class
+
  
 
|-
 
|-
| 06.05
+
| 06:05
|In this case it is '''SampleApplet'''
+
|In this case, it is '''SampleApplet'''.
 
+
  
 
|-
 
|-
 
+
| 06:09
| 06.09
+
|Click on '''Add Project Jar Files'''.
 
+
|Click on '''Add Project Jar Files'''
+
  
 
|-
 
|-
 
+
| 06:14
| 06.14
+
|The JAR file containing the '''applet source file''' is now listed in the table.
 
+
|The JAR file containing the applet source file is now listed in the table  
+
  
 
|-
 
|-
 
+
| 06:20
| 06.20
+
|Click on '''OK'''.
 
+
|Click on '''OK'''
+
 
+
 
+
  
 
|-
 
|-
 
+
| 06:24
| 06.24
+
|And, let us build the '''HelloSampleApplet''' project now by right-clicking on it in the '''Projects''' window
 
+
|And let us build the '''HelloSampleApplet''' project now by right clicking on it in the '''Projects''' Window
+
 
+
  
 
|-
 
|-
 
+
| 06:31
| 06.31
+
|and selecting '''Clean and Build''' option.
 
+
|and selecting '''Clean and Build''' options
+
  
 
|-
 
|-
 
+
| 06:36
| 06.36
+
|Now, when this project is built, the applets Jar file is generated in the original '''SampleApplet''' project.
 
+
|Now when this project is built the applets Jar file is generated in the original '''SampleApplet''' Project
+
  
 
|-
 
|-
 
+
| 06:45
| 06.45
+
|Go to the '''Files''' window, expand the '''HelloSampleApplet''' project node.
 
+
|Go to the Files Window expand the '''HelloSampleApplet''' Project node
+
 
+
 
+
  
 
|-
 
|-
 
+
| 06:51
| 06.51
+
|Under '''build''' and '''web''' folder,
 
+
|Under '''build''' and '''web''' folder  
+
  
 
|-
 
|-
 
+
| 06:54
| 06.54
+
|you can see that the '''jar file''' has been added.
 
+
|You can see that the jar file has been added
+
  
 
|-
 
|-
 
+
| 06:58
| 06.58
+
|Now, let us next '''embed''' the applet in a HTML file.
 
+
|Now Let us next embed the applet in a HTML file,
+
 
+
 
+
  
 
|-
 
|-
 
+
| 07:02
| 07.02
+
|Go back to the '''Projects''' window, right-click on the '''HelloSampleApplet''' project node,  
 
+
|Go back to the '''Project''' Window, right-click on the '''HelloSampleApplet''' project node,  
+
  
 
|-
 
|-
 
+
| 07:09
| 07.09
+
|choose '''New''' and select the '''HTML''' file option.
 
+
|choose '''New''' and select the '''HTML''' file option
+
  
 
|-
 
|-
 
+
| 07:13
| 07.13
+
|If you cannot find the '''HTML''' option in this contextual menu,
 
+
|If you cannot find the '''HTML''' option in this contextual menu
+
 
   
 
   
 
|-
 
|-
 +
| 07:18
 +
|click on '''Other'''.
  
| 07.18
+
|-
 
+
| 07:21
|Click on '''Other'''
+
|Select '''Web''' under '''Categories''' and select '''HTML''' under  '''File Types''' and click '''Next'''.
  
 
|-
 
|-
 
+
| 07:29
| 07.21
+
|Give your Html file a name.
 
+
|Select '''Web'''  under '''Categories''' and select '''HTML''' under  '''File Types''' and click '''Next'''
+
  
 
|-
 
|-
 +
| 07:32
 +
|I will name the file as "MyApplet" and click on '''Finish.'''
  
| 07.29
 
 
|Give your Html file a name
 
 
|-
 
|-
 
+
| 07:40
| 07.32
+
|The next step is to enter the applet tag in between the ''''body'''' tags in '''MyApplet dot html''' file.
 
+
|I will name the file as '''MyApplet''' and Click on '''Finish.'''
+
 
+
 
+
  
 
|-
 
|-
 
+
| 07:48
| 07.40
+
|I have the applet code here.
 
+
|The next step is to enter the applet tag in between the body tags in '''MyApplet dot html''' file
+
 
+
 
+
  
 
|-
 
|-
 
+
| 07:51
| 07.48
+
|Let me copy it onto my clipboard and '''paste''' it in between the '''body''' tags, in the html file.
 
+
|I have the applet code here
+
 
+
  
 
|-
 
|-
 +
| 08:03
 +
|The next step is to '''run''' the html file.
  
| 07.51
 
 
|Let me copy it onto my clipboard and paste it in between the body tags in the html file
 
 
|-
 
|-
 
+
| 08:07
| 08.03
+
|Right-click on '''MyApplet dot html''' in the '''Projects''' window and select '''Run File'''.
+
|The Next step is to run the html file
+
  
 
|-
 
|-
| 08.07
+
| 08:14
|Right click on '''MyApplet dot html''' in the project windows and select '''Run File'''
+
|The server deploys the html file in the IDE's default browser.
  
 
|-
 
|-
| 08.14
+
| 08:25
|The server deploys the html file in the IDE default browser
+
|Now, the server has deployed the html file in the IDE's default browser.
  
 
|-
 
|-
| 08.25
+
| 08:30
|Now the server as deploy the html file in the IDE's default browser
+
|You can see the message displayed across the screen.
  
 
|-
 
|-
| 08.30
+
| 08:36
|You can see the message displayed across the screen
+
|Now to the assignment-
|-
+
 
+
| 08.36
+
 
+
|Now to the assignment  
+
  
 
|-
 
|-
 
+
| 08:38
| 08.38
+
|As your assignment, create another simple '''banner applet''' in the IDE  
 
+
|As your assignment create another simple banner applet in the IDE,
+
 
+
  
 
|-
 
|-
 
+
| 08:43
| 08.43
+
 
+
 
|where the applet scrolls a message across the applet's window.  
 
|where the applet scrolls a message across the applet's window.  
 
  
 
|-
 
|-
 
+
| 08:49
| 08.49
+
|Embed your applet in a web-application
 
+
|Embed your applet in a web application,
+
  
 
|-
 
|-
 
+
| 08:52
| 08.52
+
|and add JAR files to the web project and
 
+
|and add JAR files to the web project and,
+
  
 
|-
 
|-
 +
| 08:56
 +
|finally create and '''run''' the HTML file.
  
| 08.56
 
 
|finally create and run the HTML file.
 
 
|-
 
|-
 
+
| 09:00
| 09.00
+
|I have created my own moving banner applet.
 
+
|I have created my own moving banner applet  
+
  
 
|-
 
|-
 
+
| 09:04
| 09.04
+
|Let me open the project and '''run''' it.
 
+
|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.18
 
 
|You can see that the applet has opened with the message scrolling across the Window
 
 
|-
 
|-
 
+
| 09:28
| 09.28
+
|Watch the video available at the '''link''' shown on the screen.  
 
+
|Watch the video available at the link shown on the screen.  
+
  
 
|-
 
|-
 
+
| 09:32
| 09.32
+
 
+
 
|It summarizes the Spoken Tutorial project.  
 
|It summarizes the Spoken Tutorial project.  
 
   
 
   
 
|-
 
|-
 
+
| 09:36
| 09.36
+
|If you do not have good bandwidth, you can download and watch the video.  
 
+
|If you do not have good bandwidth, you can download and watch the videos.  
+
  
 
|-
 
|-
 
+
| 09:41
| 09.41
+
|The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.  
 
+
|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.  
+
 
+
  
 
|-
 
|-
 
+
| 09:46
| 09.46
+
 
+
 
|Gives certificates to those who pass an online test.  
 
|Gives certificates to those who pass an online test.  
 
  
 
|-
 
|-
 
+
| 09:51
| 09.51
+
|For more details, please write to:'''contact@spoken-tutorial.org'''
 
+
|For more details please write to contact@spoken-tutorial.org
+
 
+
  
 
|-
 
|-
 
+
| 09:58
| 09.58
+
|'''Spoken Tutorial''' project is a part of the '''Talk to a Teacher''' project,
 
+
|Spoken Tutorial Project is a part of the Talk to a Teacher Project
+
  
 
|-
 
|-
 
+
| 10:04
| 10.04
+
| supported by the National Mission on education through ICT, MHRD, Government  of India.
 
+
| Supported by the National Mission on education through ICT, MHRD, Government  of India
+
  
 
|-
 
|-
 
+
| 10:11
| 10.00
+
|More information on this mission is available at:spoken-tutorial.org/NMEICT-Intro.
 
+
|More information on this mission is available at spoken-tutorial.org/NMEICT-Intro
+
  
 
|-
 
|-
 
+
| 10:22
| 10.22
+
|This tutorial has been  contributed by '''IT for Change'''.
 
+
|This tutorial has been  contributed by IT for Change  
+
 
+
  
 
|-
 
|-
 
+
| 10:27
| 10.27
+
 
+
 
|Thank you for joining us.
 
|Thank you for joining us.

Latest revision as of 12:56, 10 March 2017

Time Narration
00:01 Hi everyone. 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 tutorial -
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 familiarized 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 version 11.04 and Netbeans IDE version 7.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 or 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 plugin.
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 Packages 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 now 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 displayed across the screen.
04:27 Let me close the applet viewer.
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 will name our Project as "HelloSampleApplet" and
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 the 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 on 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 option.
06:36 Now, when this project 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 Projects 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 Projects window and select Run File.
08:14 The server deploys the html file in the IDE's default browser.
08:25 Now, the server has deployed 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 video.
09:41 The Spoken Tutorial project team: * conducts 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:11 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.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14