Difference between revisions of "Netbeans/C2/Integrating-an-Applet-in-a-Web-Application/English-timed"
From Script | Spoken-Tutorial
Sandhya.np14 (Talk | contribs) |
PoojaMoolya (Talk | contribs) |
||
(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:08 | |00:08 | ||
− | |The '''application''' that you '''build''' in this tutorial shows you how to build and deploy | + | |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 | + | |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''' |
|- | |- | ||
|00:59 | |00:59 | ||
− | | | + | | '''Run''' the Applet and |
|- | |- | ||
|01:02 | |01:02 | ||
− | | | + | |'''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 | + | |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 | + | |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 | + | |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 | + | |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 | + | | 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 | + | |with the message displayed across the screen. |
|- | |- | ||
Line 220: | Line 217: | ||
|- | |- | ||
| 04:29 | | 04:29 | ||
− | |And let us next embed | + | |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 | + | |See if the correct server is selected and click '''Finish''' to create your project. |
|- | |- | ||
Line 256: | Line 253: | ||
|- | |- | ||
| 05:20 | | 05:20 | ||
− | |we enable | + | |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''' | + | |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''' | + | |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''' | + | |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''' | + | |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. |
|- | |- | ||
| 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 ''' | + | |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 | + | |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 | + | |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. |
|- | |- | ||
| 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. |