Netbeans/C2/Designing-GUI-for-Sample-Java-Application/Gujarati

Time	Narration
00.01	નમસ્તે મિત્રો.
00.02	Building GUIs using Netbeans પરનાં ટ્યુટોરીયલમાં સ્વાગત છે.
00.06	આ ટ્યુટોરીયલમાં, આપણે નેટબીન્સનાં સૌથી આકર્ષક ફીચરો જોઈશું, જે કે તેનું GUI બિલ્ડર છે.
00.13	નેટબીન્સ GUI બીલ્ડ કરવા માટે શું પ્રદાન કરે છે?
00.16	It gives you a What You See Is What You Get designer to create your GUI.
00.21	સાથે જ તે તમને તમારું લેઆઉટ બનાવવા માટે કમ્પોનેંટોને ડ્રેગ-અને-ડ્રોપ કરવા માટેનું સરળ ઈન્ટરફેસ પ્રદાન કરે છે.
00.27	તે કમ્પોનેંટ પેલેટ સાથે આવે છે જે પૂર્વસંસ્થાપિત AWT અને સ્વીંગ કમ્પોનેંટો ધરાવે છે.
00.33	આપણે થોડાક સમયમાં જ સંપૂર્ણ GUI એપ્લીકેશન બીલ્ડ કરવા માટે આ શક્તિશાળી વિઝ્યુઅલ એડીટરનો ઉપયોગ કરવાનું કરીશું.
00.39	આ ડેમોનસ્ટ્રેશન માટે હું જે સીસ્ટમ વાપરી રહ્યી છું તે
00.43	લીનક્સ ઓપરેટીંગ સીસ્ટમ ઉબુન્ટુ આવૃત્તિ 11.04
00.46	અને નેટબીન્સ આઈડીઈ આવૃત્તિ 7.1.1 ધરાવે છે
00.50	સંસ્થાપન અને જરૂરિયાતો પર વધુ વિગતો માટે કૃપા કરી પાછલા ટ્યુટોરીયલનો સંદર્ભ લો.
00.56	આ ટ્યુટોરીયલમાં આપણે આપેલ વિશે શીખીશું
00.58	ફોર્મ એડીટરનો ઉપયોગ
01.00	સોર્સ એડીટર
01.02	પેલેટ, ઇન્સપેક્ટર, અને પ્રોપર્ટી ફીચરો
01.05	અને ઇવેન્ટ હેન્ડલરો
01.07	અને સાથે જ આપણી એપ્લીકેશનને કમ્પાઈલ અને રન કરવું
01.10	ચાલો શરુ કરીએ અને આ ટ્યુટોરીયલમાં એક સાદી એકાઉન્ટ બેલેન્સ એપ્લીકેશન બીલ્ડ કરીએ
01.15	આ એપ્લીકેશન માટે આપણે આપેલ માટે સમર્થ થવા ઈચ્છીએ છીએ
01.18	Input the amount credited to the account.
01.21	The amount debited from the account.
01.24	And compute the final balance.
01.26	We will also add a picture to make our application look more attractive.
01.31	Let's also have a menu bar on top for easy and quick navigation.
01.35	Let's now move to netbeans and start by creating a new project.
01.40	Fron the File menu choose New Project > and choose a Java Application. Say Next.
01.49	And give your project a name
01.51	I will name my project as Account balance.
01.58	Don't create a main class but set it as the main project.
02.02	Say Finish,' that should create a new project in your IDE
02.07	Now go back to File in the File menu and select New File
02.15	Choose Swing GUI forms under Categories
02.18	and Jframe Form under File Type
02.21	Say Next.
02.24	I'm going to call this AccountBalance as well,
02.29	But you can give it any other name you wish to.
02.33	Once you say Finish, it takes you to the main design area.
02.39	Lets get familiar with the GUI builder.
02.43	On the right here is the palette
02.45	This contains the pre-installed Swing and AWT components.
02.49	Down here below the palette is the Properties window.
02.53	This shows you the properties of the components as you choose them.
02.58	On the left here is the navigator or the inspector
03.01	which shows you the components that have been added to the frame.
03.05	Here on the workspace in the design mode
03.08	On the top here is the Source button
03.11	When you click on it, it takes you to the source code.
03.15	As you add components to the design,
03.18	'it takes the corresponding source code and adds it to the source here.
03.23	Let's go back to Design mode and see what components we'll use today.
03.28	We will be using some of the components from the palette
03.31	such as Buttons, Labels, Panels, Tabbed pane etc to create our applications
03.38	Now from the Palette let us choose a TabbedPane under swing Containers
03.45	Select Tabbed Pane and click on the form
03.50	This should give you a Tabbed frame. You can re-size it using your mouse.
03.58	Now Go back to the Palette and choose a Panel.
04.02	And Click again on your frame
04.06	That should give you a tab.
04.09	Go back and choose another Panel. And click on the form again
04.14	That gives you 2 tabs totally
04.17	Now you can Rename the tab by either double clicking on the tab or right clicking on the tab and selecting the Edit Text option
04.29	I will call the first tab as Image and rename the second tab to Balance
04.37	Now Let's go back to the Palette and add labels from swing Controls menu
04.43	Choose Label from the Swing Controls and add it to your form here
04.48	We are going to need 6 labels for our application.
04.54	I have now added six labels to my form
04.58	You can position and align them as you click them
05.02	And also use the mouse to re-position or re-align them.
05.06	Now to change the text on a label
05.08	You can either double click on it or right click on it
05.12	and choose the options Edit Text
05.14	Let us rename the labels now
05.16	I'm going to call the first one as Initial Amount.
05.22	The second label as Credit Amount.
05.30	The third one as Debit amount
05.35	And the fourth one as Balance
05.41	Initially, we'll set the initial amount to be Rs 5000.
05.48	Once we compute the balance we can put it into this level
05.53	But for now we will just make it as stars
06.01	Now, go back to the Palette and choose a TextField and we will add to text fields one each next to the credit amount and to the debit amount.
06.16	We should also leave the Textfield places blank.
06.20	Let me edit the text and remove the existing text here
06.27	Let us resize it using the mouse
06.35	Once you have done that, you can now go back to palette and choose a Button.
06.42	Add a button below your frame and
06.48	You can change the label by right clicking on it.
06.53	Choose the Edit text option and name it as Get Balance
06.58	Now this is our GUI!
07.01	Let's now go to the Image tab (tab1) and add an image.
07.05	To do that let's go back to the Palette
07.08	and choose another Label, and drop it on the panel.
07.13	Now from to Properties Window below the palette, search for the icon property and click on the 3 dots here on the right.
07.26	The icons properties windows opens
07.28	Here choose the options External Image, click on the (...) 3 dots again here on the right.
07.35	And look for the image you want to include in your applicaton
07.41	I have selected the image here. Click on OK
07.48	Let us repostion it using the mouse.
07.51	You can remove the text here on the label by double clicking on it and removing the text
07.59	Now we have added in image
08.02	Let us next add a menu to our GUI
08.05	Go to the palette and select the Menu bar option under swing menus
08.12	Choose Menu Bar and click here on top of panel.
08.17	By default it already has 2 Menu labels: File and Edit.
08.22	Double click on the Edit text and rename it to Help.
08.28	You can also add a submenu under File.
08.32	Now in the Inspector or the navigator on the left side , right-click on JMenu1 ,
08.39	Choose Add From Palette option and Select Menu Item.
08.45	That should add a MenuItem.
08.47	You can also rename that to say Exit.
08.54	Now we have added a submenu under the file menu and rename that menu item as well .
09.00	Now, our GUI is more or less complete.
09.03	Let's now look at a preview.
09.05	Click on the 'Preview Design' button on the top
09.09	That shows a preview of what you have done so far.
09.12	Here, the buttons don't work yet .
09.16	But once you add in the code, you can have everything working.
09.20	Let us close the preview
09.22	Now, before adding the code, let's give proper variable names to the input textfields.
09.28	Go to the Balance tab, let us give proper variable name to these text fields here.
09.34	Right click on JTextfield1 in the inspector.
09.40	Select change variable name.
09.43	Let us change the variable name to Credit amount
09.50	Click on Ok
09.53	You can also right click on the textfield here in the design mode
09.56	Select Change Variable Name.
10.00	And change variable name into debitAmount.
10.04	Click on OK
10.08	I'm also going to call this final label i.e the stars textfields label as resultBalance.
10.16	Select the Change variable name option again and change the variable to resultBalance
10.23	Click on OK
10.25	Let's now see the code, to get the application working.
10.30	Now this is my sample code
10.32	What I want is to getText() from the creditAmount;
10.37	getText() from the debitAmount,
10.39	compute the balance and place the amount in the final resultBalance.
10.44	Let us copy the code here and let us go back to the IDE
10.51	Now right click on the Get Balance button.
10.55	Choose the option Events, Action and Action Performed
11.00	This will take you to the section of the code
11.03	where you will have to write or paste the code for the action to be performed on the button press.
11.10	Let me paste the copied code here
11.17	Let's save this code and go back to Design mode
11.22	Now lets adding the code to Exit the application.
11.25	Right click on the MenuItem, Exit and Choose Events, Action and Action Performed.
11.40	It switches to the source mode and now we have to a write the code to Exit successfully from the application
11.46	That is going to be System.exit(1).
11.53	Now Save the code and go back to design mode.
11.57	Let us also add a shortcut to the Exit MenuItem
12.02	Double click on the shortcut option here in the Window thats opens
12.07	Give the key stroke as Q and Ctrl and Click on OK
12.14	So now we have set Ctrl Q as the keyboard shortcut to quit from the application
12.20	That its our application is now complete
12.23	Let's now run the application by pressing F6 on your keyboard.
12.30	It as already selected the main class that as to run
12.33	Click on OK
12.37	And here it is. This is our GUI
12.40	Now let's run a check
12.43	Go to the balance tab, enter the credit amount with Rs.300/-.
12.47	And the debit amount as Rs.200. And Say 'Get Balance'.
12.53	This gives us the correct amount in the balance.
12.56	Let us now exit from the application.
12.58	I'll Go to File menu and I'll click on Exit.
13.02	We could have also quit the application by pressing Ctrl Q on the keyboard
13.08	Now With the application complete, it's time for the assignment.
13.14	The task is to create a Temperature convertor application.
13.18	I should have to tabs like the previous one
13.21	1 to convert from Centigrade to Fahrenheit and another for Fahrenheit to Celsius.
13.27	It should also take an input temperature.
13.30	And Display the converted temperature
13.33	It should also have a menu bar on top that shows File and Help options
13.38	And under the file menu have an Exit item with a keyboard shortcut to Exit from the application
13.46	I have already solved the assignment
13.48	Let us see how it shoud look
13.50	I'm going to run my assignment and this is my GUI
13.56	Now let us Enter the input temperature as -40 Celcius and let me click on get Fahrenheit
14.05	The application should give the correct converted output temperature.
14.10	Now let us try the short-cut key to Exit i.e Ctrl X to exit from the application.
14.18	So we have successfully exited from the application upon the keyboard shortcut
14.25	સ્ક્રીન પર દર્શાવેલ લીંક પર ઉપલબ્ધ વિડીયો નિહાળો.
14.29	તે સ્પોકન ટ્યુટોરીયલ પ્રોજેક્ટનો સારાંશ આપે છે.
14.32	જો તમારી પાસે સારી બેન્ડવિડ્થ ન હોય તો, તમે વિડીયો ડાઉનલોડ કરીને જોઈ શકો છો.
14.37	સ્પોકન ટ્યુટોરીયલ પ્રોજેક્ટ ટીમ સ્પોકન ટ્યુટોરીયલોનાં ઉપયોગથી વર્કશોપોનું આયોજન કરે છે.
14.42	જેઓ ઓનલાઈન પરીક્ષા પાસ કરે છે તેઓને પ્રમાણપત્રો આપે છે.
14.46	વધુ વિગતો માટે contact@spoken-tutorial.org પર લખો
14.52	સ્પોકન ટ્યુટોરીયલ પ્રોજેક્ટ ટોક ટુ અ ટીચર પ્રોજેક્ટનો એક ભાગ છે
14.56	જેને આઈસીટી, એમએચઆરડી, ભારત સરકાર મારફતે શિક્ષણ પર નેશનલ મિશન દ્વારા આધાર અપાયેલ છે
15.03	આ મિશન પરની વધુ માહિતી spoken-tutorial.org/NMEICT-Intro પર ઉપલબ્ધ છે
15.13	આ ટ્યુટોરીયલ માટે યોગદાન IT for Change દ્વારા અપાયું છે
15.17	અમને જોડાવાબદ્દલ આભાર. આઈઆઈટી બોમ્બે તરફથી હું, જ્યોતી સોલંકી વિદાય લઉં છું.

Contributors and Content Editors

Jyotisolanki, Priyacst