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

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 74: Line 74:
 
|-
 
|-
 
|01:21
 
|01:21
|I will name my project as  "SampleApplet".  
+
|I will name my project as  '''"SampleApplet"'''.  
  
 
|-
 
|-
Line 102: Line 102:
 
|-
 
|-
 
| 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 189: Line 189:
 
|-
 
|-
 
| 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 448: Line 448:
 
|-
 
|-
 
| 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 460:
 
|-
 
|-
 
| 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.
+
  
 
|-
 
|-

Revision as of 12:00, 5 January 2017

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