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

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 14: Line 14:
 
|-
 
|-
 
|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''' applets in the '''Netbeans IDE.'''  
  
 
|-
 
|-
Line 38: Line 38:
 
|-
 
|-
 
|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 46:
 
|-
 
|-
 
| 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 74: Line 74:
 
|-
 
|-
 
|01:21
 
|01:21
−
|I will name my Project as  "SampleApplet".  
+
|I will name my project as  "SampleApplet".  
  
 
|-
 
|-
Line 82: Line 82:
 
|-
 
|-
 
|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 110: Line 110:
 
|-
 
|-
 
| 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'''.
  
 
|-
 
|-
Line 149: Line 149:
 
|-
 
|-
 
| 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 177:
 
|-
 
|-
 
| 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
Line 196: Line 196:
 
|-
 
|-
 
| 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  
  
 
|-
 
|-
Line 212: Line 212:
 
|-
 
|-
 
| 04:23
 
| 04:23
−
|with the message display on the screen.
+
|with the message displayed across the screen.
  
 
|-
 
|-
Line 220: Line 220:
 
|-
 
|-
 
| 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 248:
 
|-
 
|-
 
| 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 256:
 
|-
 
|-
 
| 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 268:
 
|-
 
|-
 
| 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 296:
 
|-
 
|-
 
| 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 304:
 
|-
 
|-
 
| 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 324:
 
|-
 
|-
 
| 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 368:
 
|-
 
|-
 
| 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 376:
 
|-
 
|-
 
| 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 396:
 
|-
 
|-
 
| 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 424:
 
|-
 
|-
 
| 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 436:
 
|-
 
|-
 
| 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 449: Line 449:
 
| 09:51
 
| 09:51
 
|For more details, please write to:
 
|For more details, please write to:
−
contact@spoken-tutorial.org
+
'''contact@spoken-tutorial.org'''
  
 
|-
 
|-

Revision as of 17:57, 6 June 2016

Time Narration
00:01 Hi 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 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=26945"