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

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(4 intermediate revisions by 2 users not shown)
Line 6: Line 6:
 
|-
 
|-
 
| 00:01
 
| 00:01
−
|Hi everyone.  
+
|Hi everyone. Welcome to the tutorial on '''Integrating an Applet in a Web Application'''.
−
 
+
−
|-
+
−
| 00:02
+
−
| Welcome to the tutorial on '''Integrating an Applet in a Web Application'''.
+
  
 
|-
 
|-
 
|00:08
 
|00:08
−
|The '''application''' that you '''build''' in this tutorial shows you how to build and deploy applets in the '''Netbeans IDE.'''  
+
|The '''application''' that you '''build''' in this tutorial shows you how to '''build''' and '''deploy''' '''applet'''s in the '''Netbeans IDE.'''  
  
 
|-
 
|-
Line 38: Line 34:
 
|-
 
|-
 
|00:41
 
|00:41
−
|For this demonstration, I am using the '''Linux Operating System Ubuntu v11.04''' and '''Netbeans IDE v7.1.1'''.  
+
|For this demonstration, I am using the '''Linux Operating System Ubuntu''' version '''11.04''' and '''Netbeans IDE''' version '''7.1.1'''.  
  
 
|-
 
|-
Line 46: Line 42:
 
|-
 
|-
 
| 00:57
 
| 00:57
−
|* Create an Applet  
+
| '''Create''' an '''Applet'''
  
 
|-
 
|-
 
|00:59
 
|00:59
−
|* Run the Applet and  
+
| '''Run''' the Applet and  
  
 
|-
 
|-
 
|01:02
 
|01:02
−
|* Embed the applet in a web application.  
+
|'''Embed''' the applet in a '''web application'''.  
  
 
|-
 
|-
Line 66: Line 62:
 
|-
 
|-
 
| 01:17
 
| 01:17
−
|Click ''Next'''.
+
|Click '''Next'''.
  
 
|-
 
|-
Line 74: Line 70:
 
|-
 
|-
 
|01:21
 
|01:21
−
|I will name my Project as  "SampleApplet".  
+
|I will name my project as  '''"SampleApplet"'''.  
  
 
|-
 
|-
Line 82: Line 78:
 
|-
 
|-
 
|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'''
  
 
|-
 
|-
Line 102: Line 98:
 
|-
 
|-
 
| 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.  
  
 
|-
 
|-
Line 110: Line 106:
 
|-
 
|-
 
| 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 plugin.
 
|I will select the latest version of '''JDK''' since my browser supports the latest version of the java browser plugin.
 +
 
|-
 
|-
 
| 02:19
 
| 02:19
Line 149: Line 146:
 
|-
 
|-
 
| 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 Package''' node in the '''Projects''' window to see this.  
+
|You can expand the '''Source Packages''' node in the '''Projects''' window to see this.  
  
 
|-
 
|-
Line 177: Line 174:
 
|-
 
|-
 
| 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.  
  
 
|-
 
|-
Line 212: Line 209:
 
|-
 
|-
 
| 04:23
 
| 04:23
−
|with the message display on the screen.
+
|with the message displayed across the screen.
  
 
|-
 
|-
Line 220: Line 217:
 
|-
 
|-
 
| 04:29
 
| 04:29
−
|And let us next embed the Applet in a web-application
+
|And, let us next embed the Applet in a web-application
  
 
|-
 
|-
Line 248: Line 245:
 
|-
 
|-
 
| 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.
  
 
|-
 
|-
Line 256: Line 253:
 
|-
 
|-
 
| 05:20
 
| 05:20
−
|we enable to IDE to '''build''' the applet whenever we build this web application.  
+
|we enable the 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 ''',
  
 
|-
 
|-
Line 268: Line 265:
 
|-
 
|-
 
| 05:40
 
| 05:40
−
|Now, in the '''Projects''' window, right-click the '''HelloSampleApplet''' project node  
+
|Now, in the '''Projects''' window, right-click on the '''HelloSampleApplet''' project node  
  
 
|-
 
|-
Line 296: Line 293:
 
|-
 
|-
 
| 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.  
  
 
|-
 
|-
Line 304: Line 301:
 
|-
 
|-
 
| 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''' options.
+
|and selecting '''Clean and Build''' option.
  
 
|-
 
|-
 
| 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.
  
 
|-
 
|-
Line 324: Line 321:
 
|-
 
|-
 
| 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 '''Project''' window, right-click on the '''HelloSampleApplet''' project node,  
+
|Go back to the '''Projects''' window, right-click on the '''HelloSampleApplet''' project node,  
  
 
|-
 
|-
Line 368: Line 365:
 
|-
 
|-
 
| 07:51
 
| 07:51
−
|Let me copy it onto my clipboard and '''paste''' it in between the '''body''' tags in the html file.
+
|Let me copy it onto my clipboard and '''paste''' it in between the '''body''' tags, in the html file.
  
 
|-
 
|-
Line 376: Line 373:
 
|-
 
|-
 
| 08:07
 
| 08:07
−
|Right-click on '''MyApplet dot html''' in the project windows and select '''Run File'''.
+
|Right-click on '''MyApplet dot html''' in the '''Projects''' window and select '''Run File'''.
  
 
|-
 
|-
 
| 08:14
 
| 08:14
−
|The server deploys the html file in the IDE default browser.
+
|The server deploys the html file in the IDE's default browser.
  
 
|-
 
|-
Line 396: Line 393:
 
|-
 
|-
 
| 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  
  
 
|-
 
|-
Line 424: Line 421:
 
|-
 
|-
 
| 09:18
 
| 09:18
−
|You can see that the applet has opened with the message scrolling across the window.
+
|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.  
  
 
|-
 
|-
Line 436: Line 433:
 
|-
 
|-
 
| 09:36
 
| 09:36
−
|If you do not have good bandwidth, you can download and watch the videos.  
+
|If you do not have good bandwidth, you can download and watch the video.  
  
 
|-
 
|-
Line 444: Line 441:
 
|-
 
|-
 
| 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:
+
|For more details, please write to:'''contact@spoken-tutorial.org'''
−
contact@spoken-tutorial.org
+
  
 
|-
 
|-
Line 461: Line 457:
 
|-
 
|-
 
| 10:11
 
| 10:11
−
|More information on this mission is available at:
+
|More information on this mission is available at:spoken-tutorial.org/NMEICT-Intro.
−
spoken-tutorial.org/NMEICT-Intro.
+
  
 
|-
 
|-

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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Netbeans/C2/Integrating-an-Applet-in-a-Web-Application/English-timed&oldid=33091"