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

|| '''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''' '''applet'''s 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

|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: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

|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

| 04:04

|  The '''Sample.html''' launcher file, with the applet embedded, is created in the '''build''' folder  

| 04:13

| 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: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

| 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:21

|Select '''Web''' under '''Categories''' and select '''HTML''' under  '''File Types''' and click '''Next'''.

| 07:29

|Give your Html file a name.

| 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: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

| 08:49

|Embed your applet in a web-application

| 08:52

|and add JAR files to the web project and

| 09:00

|I have created my own moving banner applet.

| 09:04

|Let me open the project and '''run''' it.

| 09:28

|Watch the video available at the '''link''' shown on the screen.  

| 09:32

| 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

| 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