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

|Hi everyone. Welcome to the tutorial on '''Integrating an Applet in a Web Application'''.

|The '''application''' that you '''build''' in this tutorial shows you how to '''build''' and '''deploy''' '''applet'''s in the '''Netbeans IDE.'''  

|If this is the first time you are using '''Netbeans''', please view the tutorial -

| '''Introduction to Netbeans''' to get started with the '''IDE. '''

|Also, view the tutorials '''Developing Web Applications''' and '''Designing GUIs on Netbeans'''

|to get familiarized with the '''IDE. '''

|All the above tutorials can be viewed on the '''Spoken Tutorial''' website.

|For this demonstration, I am using the '''Linux Operating System Ubuntu''' version '''11.04''' and '''Netbeans IDE''' version '''7.1.1'''.

|In this tutorial, we will:

| '''Create''' an '''Applet'''

| '''Run''' the Applet and  

|'''Embed''' the applet in a '''web application'''.

|Go to  '''File > New Project''' and create a '''Java Class Library '''.

|Click '''Next'''.

|Give your '''Project''' a name.

|I will name my project as  '''"SampleApplet"'''.

|Set the  '''Location''' to any directory on your system.

|And, click '''Finish''' to create your project.

|Let us next create the  '''Applet Source File'''.

|Right-Click on the "SampleApplet" '''project node'''

| and choose '''Properties''' to open the '''Properties''' window.  

|Select the desired '''Source or Binary Format''' for the project.  

|This is to make sure if the correct version of the '''JDK''' has been chosen.  

|For example- if you choose the latest version of JDK,  

|then the applet might not '''run''' on machines that have an older 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.

|Click on '''OK'''.

| and select '''New > Applet'''.

| If you do not find the '''Applet''' option in this contextual menu, click on '''Other'''.

| Under '''Categories''', select '''Java.'''

|And under '''File Types''', select '''Applet''' to create an Applet.

|Give the '''Class name''' as "Sample" and the '''Package''' as "org.me.hello".

|Click '''Finish'''.

|The IDE creates the applet '''source file''' in the specified '''package'''.  

|You can expand the '''Source Packages''' node in the '''Projects''' window to see this.  

|The Applet source file opens in the '''Source editor'''.  

|Let us now define our '''applet class'''.  

|I have the code for a simple applet  

|that sets the '''background''' color to cyan,  

|the '''foreground''' color to red  

|and displays a message that illustrates the order in which the '''methods''' in the applet

|i.e. the '''init()''' method, the '''start()''' method, and the '''paint() '''methods are called when the applet starts up.  

| I will now copy the entire code on my clipboard and '''paste''' it over the existing code in the IDE.  

|Right-Click on the '''Sample.java''' file in the '''Projects''' window

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

|'''Sample dot html file'''.

  |The Applet is also  launched in the '''Applet viewer '''

|with the message displayed across the screen.

|Let me close the '''applet viewer'''.

|And, let us next embed the Applet in a web-application

|so that we can make the applet available to the user.

|To do so, we create a web-application.

| Under '''Categories''', select '''java web''' and under '''Projects''', select '''Web Application'''

|and click '''Next'''.

|We will name our '''Project''' as "HelloSampleApplet" and  

|click '''Next'''.

|See if the correct server is selected and click '''Finish''' to create your project.

|Note that when we add the Java project '''SampleApplet''' to the web project '''HelloSampleApplet''',

|we enable the IDE to '''build''' the applet whenever we '''build''' this web application.  

|Therefore, when we modify the '''Sample dot java applet ''',

|Now, in the '''Projects''' window, right-click on the '''HelloSampleApplet''' project node  

|and click on '''Properties'''.

|Our applet is in a Java project.

|To add the '''Jar file''', select the '''Packaging''' option from the menu on the left side of the window.

| Click on '''Add Project''' and select the java project that contains the '''Applet class'''.

|In this case, it is '''SampleApplet'''.

|Click on '''Add Project Jar Files'''.

|The JAR file containing the '''applet source file''' is now listed in the table.

|Click on '''OK'''.

|And, let us build the '''HelloSampleApplet''' project now by right-clicking on it in the '''Projects''' window

|and selecting '''Clean and Build''' option.

|Now, when this project is built, the applets Jar file is generated in the original '''SampleApplet''' project.

|Go to the '''Files''' window, expand the '''HelloSampleApplet''' project node.

|Under '''build''' and '''web''' folder,

|you can see that the '''jar file''' has been added.

|Now, let us next '''embed''' the applet in a HTML file.

|Go back to the '''Projects''' window, right-click on the '''HelloSampleApplet''' project node,  

|choose '''New''' and select the '''HTML''' file option.

|If you cannot find the '''HTML''' option in this contextual menu,

|click on '''Other'''.

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

|Give your Html file a name.

|I will name the file as "MyApplet" and click on '''Finish.'''

|The next step is to enter the applet tag in between the ''''body'''' tags in '''MyApplet dot html''' file.

|I have the applet code here.

|Let me copy it onto my clipboard and '''paste''' it in between the '''body''' tags, in the html file.

|The next step is to '''run''' the html file.

|Right-click on '''MyApplet dot html''' in the '''Projects''' window and select '''Run File'''.

|The server deploys the html file in the IDE's default browser.

|Now, the server has deployed the html file in the IDE's default browser.

|You can see the message displayed across the screen.

|Now to the assignment-

|As your assignment, create another simple '''banner applet''' in the IDE  

|Embed your applet in a web-application

|and add JAR files to the web project and

|finally create and '''run''' the HTML file.  

|I have created my own moving banner applet.

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

|You can see that the applet has opened with the message scrolling across the '''window'''.

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

|If you do not have good bandwidth, you can download and watch the video.  

|The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.  

|For more details, please write to:'''contact@spoken-tutorial.org'''

|'''Spoken Tutorial''' project is a part of the '''Talk to a Teacher''' project,

| supported by the National Mission on education through ICT, MHRD, Government  of India.

|More information on this mission is available at:spoken-tutorial.org/NMEICT-Intro.

|This tutorial has been  contributed by '''IT for Change'''.