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

Revision as of 10:06, 1 July 2014

Time	Narration
00.01	Hii 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 tutorials,
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 familiarised 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 v11.04 and Netbeans IDE v7.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 and 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 pluggin
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 Package 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 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 display on the screen
04.27	Let me close the appletviewer
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 wll 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 to 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 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 options
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 Project 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 project windows and select Run File
08.14	The server deploys the html file in the IDE default browser
08.25	Now the server as deploy 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 videos.
09.41	The Spoken Tutorial project team conduct 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

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

Revision as of 10:06, 1 July 2014

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools

@@ Line 53: / Line 53: @@
 |00.59
 |Run the Applet; and
 |-
@@ Line 60: / Line 59: @@
 |-
 |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 '''
@@ Line 74: / Line 68: @@
 |-
 | 01.17
 |Click ''Next'''
 |-
 |01.19
 |Give your Project a name
 |-
 |01.21
+|I will name my Project as  '''SampleApplet. '''
-|I will name my Project as  '''SampleApplet. '''
 |-
 |01.26
 |Set the  Location to any directory on your system
@@ Line 103: / Line 90: @@
 |-
 |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 and Binary Format''' for the project.
 |-
 | 01.53
 |This is to make sure if the correct version of the JDK has been chosen.
@@ Line 141: / Line 116: @@
 | 02.04
 |then the applet might not run on machines that have an older version of the Java browser plugin.
 |-
@@ Line 179: / Line 152: @@
 | 02.55
 |Click '''Finish'''
 |-
 | 02.57
 |The IDE creates the applet source file in the specified package.
 |-
 |03.02
 |You can expand the '''Source Package''' 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 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.
@@ Line 286: / Line 213: @@
 | 04.15
 |'''Sample dot html file'''
 |-
 | 04.18
+  |The Applet is also  launched in the '''Applet viewer. '''
-|The Applet is also  launched in the '''Applet viewer. '''
 |-
@@ Line 301: / Line 227: @@
 |-
 | 04.29
+|And let us next embed  the Applet in a Web Application
-|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 wll name our Project as '''HelloSampleApplet''' and
 |-
 | 05.01
 |Click '''Next'''
@@ Line 346: / Line 259: @@
 | 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 to 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 the '''HelloSampleApplet''' project node,
 |-
 | 05.45
 |and Click on '''Properties'''
 |-
 | 05.49
 |Our applet is in a Java project,
@@ Line 398: / Line 293: @@
 |-
 | 05.59
 | click on '''Add Project''' and select the java project that contains the Applet class
@@ Line 406: / Line 299: @@
 | 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''' options
 |-
 | 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 '''Project''' 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
-|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
@@ Line 559: / Line 400: @@
 | 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.
-|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
-|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 videos.
 |-
 | 09.41
 |The Spoken Tutorial project team conduct 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.