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	આ તમને તમારા GUI માટે What You See Is What You Get પ્રકારની રચના કરવાની સુવિધા આપે છે.
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	એકાઉન્ટમાં ક્રેડીટ કરેલી રકમ તેમજ
01.21	એકાઉન્ટમાંથી ડેબીટ કરેલી રકમને ઈનપુટ કરવું
01.24	અને અંતિમ બેલેન્સની ગણતરી
01.26	આપણી એપ્લીકેશનને વધુ આકર્ષક બનાવવા માટે આપણે એક ફોટો પણ ઉમેરીશું.
01.31	ચાલો સરળતાથી અને ઝડપથી નેવિગેટ કરાવાય એ માટે ટોંચે મેનુ બાર પણ ઉમેરીએ.
01.35	ચાલો હવે નેટબીન્સ પર જઈએ અને નવા પ્રોજેક્ટ બનાવવાથી શરૂઆત કરીએ.
01.40	ફાઈલ મેનુમાંથી New Project > પસંદ કરો અને Java Application પસંદ કરો. Next ક્લિક કરો.
01.49	અને તમારા પ્રોજેક્ટને એક નામ આપો
01.51	હું મારા પ્રોજેક્ટને Account balance તરીકે નામ આપીશ.
01.58	main class નહી બનાવો પણ તેને main project તરીકે સુયોજિત કરો.
02.02	Finish પર ક્લિક કરો, તમારા આઈડીઈમાં નવો પ્રોજેક્ટ બનાવો જોઈએ.
02.07	હવે ફાઈલ મેનુમાં File માં પાછા જાવ અને New File પસંદ કરો
02.15	Categories અંતર્ગત Swing GUI forms પસંદ કરો
02.18	અને File Type માં Jframe Form પસંદ કરી
02.21	Next ક્લિક કરો.
02.24	આને હું AccountBalance નામ આપી રહ્યી છું,
02.29	પણ તમે તેને તમારી ઈચ્છા અનુસાર નામ આપી શકો છો.
02.33	જેમ તમે Finish ક્લિક કરો છો, તે તમને મુખ્ય ડીઝાઇન વિસ્તારમાં લઇ જાય છે.
02.39	ચાલો GUI બિલ્ડરથી પરિચિત થઈએ.
02.43	અહીં જમણી બાજુએ પેલેટ છે.
02.45	આ પૂર્વ-સંસ્થાપિત સ્વીંગ અને AWT ઘટકો ધરાવે છે.
02.49	અહીં પેલેટની નીચે પ્રોપર્ટીઝ વિન્ડો છે.
02.53	આ તમને એ ઘટકોની પ્રોપર્ટી દર્શાવે છે જેને તમે પસંદ કરો છો.
02.58	અહીં ડાબી બાજુએ નેવીગેટર અથવા ઇન્સપેક્ટર છે
03.01	જે તમને ફ્રેમમાં ઉમેરાયેલા કમ્પોનેંટો દર્શાવે છે.
03.05	અહીં ડીઝાઇન મોડમાં વર્કસ્પેસ પર
03.08	અહીં ટોંચે સોર્સ બટન છે
03.11	જ્યારે તમે તેના પર ક્લિક કરો છો ત્યારે, તે તમને સોર્સ કોડ પર લઇ જશે.
03.15	જેમ તમે ડીઝાઈનમાં કમ્પોનેંટ ઉમેરો છો તેમ,
03.18	તે તમને અનુરૂપ સોર્સ કોડ પર લઇ જશે અને તેને અહીં સોર્સ કોડમાં ઉમેર કરે છે.
03.23	ચાલો ડીઝાઇન મોડ પર પાછા જઈએ અને જોઈએ કે આજે આપણે કયા કમ્પોનેંટો વાપરીશું.
03.28	આપણી એપ્લીકેશન બનાવવા માટે આપણે પેલેટમાથી કેટલાક કમ્પોનેંટોનો ઉપયોગ કરીશું
03.31	જેમ કે Buttons, Labels, Panels, Tabbed pane વગેરે
03.38	હવે પેલેટમાંથી ચાલો swing Containers અંતર્ગત TabbedPane પસંદ કરીએ
03.45	Tabbed Pane પસંદ કરો અને form પર ક્લિક કરો
03.50	આ તમને Tabbed frame આપવી જોઈએ. તમે તમારા માઉસ વડે તેને માપબદલી કરી શકો છો.
03.58	હવે પેલેટ પર પાછા જાવ અને Panel પસંદ કરો.
04.02	અને ફરીથી તમારી ફ્રેમ પર ક્લિક કરો
04.06	તે તમને ટેબ આપવી જોઈએ.
04.09	પાછા જઈને બીજી એક પેનલ પસંદ કરો. અને ફોર્મ પર ફરીથી ક્લિક કરો
04.14	આ તમને કુલ 2 ટેબો આપે છે
04.17	હવે તમે ટેબને ટેબ પર બમણું ક્લિક કરીને અથવા ટેબ પર જમણું ક્લિક કરી પછી Edit Text વિકલ્પ પસંદ કરીને નામ બદલી કરી શકો છો
04.29	હું પહેલી ટેબને Image અને બીજી ટેબને Balance તરીકે નામબદલી કરીશ
04.37	હવે ચાલો પેલેટ પર પાછા જઈએ અને સ્વીંગ કંટ્રોલ મેનુમાંથી લેબલો ઉમેરીએ
04.43	સ્વીંગ કંટ્રોલમાંથી લેબલ પસંદ કરો અને તેને અહીં તમારા ફોર્મમાં ઉમેરો
04.48	આપણને આપણી એપ્લીકેશન માટે 6 લેબલો જોઈએ છે.
04.54	મેં મારા ફોર્મમાં અત્યારે છ લેબલો ઉમેર્યા છે
04.58	તમે તેના પર ક્લિક કરીને તેની જગ્યા અને રચના બદલી શકો છો
05.02	અને સાથે જ માઉસનાં ઉપયોગ વડે પણ જગ્યા અને રચના બદલી કરી શકાવાય છે.
05.06	હવે લેબલ પર લખાણ બદલી કરવા માટે
05.08	તમે કાં તો તેના પર બમણું ક્લિક કરી શકો છો અથવા કે જમણું ક્લિક
05.12	અને Edit Text વિકલ્પ પસંદ કરી શકો છો
05.14	ચાલો હવે લેબલોનાં નામ બદલી કરીએ
05.16	હું પહેલાને Initial Amount તરીકે નામ આપી રહ્યી છું.
05.22	બીજા લેબલને Credit Amount તરીકે.
05.30	ત્રીજાને Debit amount તરીકે
05.35	અને ચોથાને Balance તરીકે
05.41	શરૂઆતમાં, આપણે શરૂઆતની રકમ રૂ. 5000 પર સુયોજિત કરીશું.
05.48	બેલેન્સ ગણતરી કર્યા પછીથી આપણે તેને આ સ્તરમાં મૂકી શકીએ છીએ
05.53	પણ હમણાં માટે આપણે તેને સ્ટાર તરીકે દર્શાવીશું
06.01	હવે, પેલેટ પર પાછા જઈને TextField પસંદ કરો અને આપણે credit amount અને debit amount આમ દરેક સામે એક એક ટેક્સ્ટ ફીલ્ડો ઉમેરીશું.
06.16	સાથે જ આપણે ટેક્સ્ટફીલ્ડની જગ્યા પણ ખાલી છોડવી જોઈએ.
06.20	ચાલો હું ટેક્સ્ટને એડિટ કરું અને અહીં વર્તમાન ટેક્સ્ટને રદ્દ કરું
06.27	માઉસ વાપરીને ચાલો તેને માપબદલી કરીએ
06.35	આ પૂર્ણ થયા બાદ, હવે તમે પેલેટ પર પાછા જઈને બટન પસંદ કરી શકો છો.
06.42	તમારી ફ્રેમ નીચે બટન ઉમેરો અને
06.48	તમે તેના પર જમણું ક્લિક કરીને લેબલ બદલી કરી શકો છો.
06.53	Edit text વિકલ્પ પસંદ કરો અને તેને Get Balance તરીકે નામ આપો
06.58	હવે આ આપણું GUI છે!
07.01	ચાલો હવે ઈમેજ ટેબ (ટેબ 1) પર જઈએ અને ઈમેજને ઉમેરીએ.
07.05	આ કરવા માટે ચાલો પેલેટ પર પાછા જઈએ
07.08	અને બીજું એક Label પસંદ કરીએ, અને તેને પેનલ પર ડ્રોપ કરીએ.
07.13	હવે પેલેટ નીચે આવેલ Properties (પ્રોપર્ટીઝ) વિન્ડોમાંથી, icon (આઇકોન) પ્રોપર્ટી શોધો અને અહીં જમણી બાજુએ આવેલ 3 બિંદુઓ પર ક્લિક કરો.
07.26	icons (આઇકોન્સ) પ્રોપર્ટી વિન્ડો ખુલે છે
07.28	અહીં External Image (એક્સટર્નલ ઈમેજ) વિકલ્પ પસંદ કરો, અને અહીં ફરીથી જમણી બાજુએ આવેલ 3 બિંદુઓ પર ક્લિક કરો.
07.35	અને તમારી એપ્લીકેશનમાં તમે કઈ ઈમેજ સમાવેશ કરવા માંગો છો તે બદ્દલ જુઓ
07.41	મેં અહીં ઈમેજ પસંદ કરી લીધી છે. OK પર ક્લિક કરો
07.48	માઉસનો ઉપયોગ કરીને ચાલો તેને વ્યવસ્થિત કરીએ.
07.51	તમે અહીં લેબલ પરની આ ટેક્સ્ટને રદ્દ કરી શકો છો તે માટે લેબલ પર બમણું ક્લિક કરો અને ટેક્સ્ટને રદ્દ કરો
07.59	હવે આપણે ઈમેજમાં ઉમેરાયા છીએ
08.02	ચાલો આગળ આપણા GUI માં મેનુ ઉમેરીએ
08.05	palette પેલેટ પર જાવ અને swing menus (સ્વીંગ મેનુસ) માં જઈને Menu bar (મેનુ બાર) વિકલ્પ પસંદ કરો
08.12	Menu bar (મેનુ બાર) પસંદ કરો અને અહીં પેનલની ટોંચે ક્લિક કરો.
08.17	મૂળભૂત રીતે અહીં 2 મેનુ લેબલો છે : File (ફાઈલ) અને Edit (એડિટ).
08.22	Edit ટેક્સ્ટ પર બમણું ક્લિક કરીને તેને Help નામથી બદલો.
08.28	તમે File (ફાઈલ) અંતર્ગત submenu (સબમેનુ) પણ ઉમેરી શકો છો.
08.32	હવે ડાબી બાજુએ આવેલ Inspector (ઇન્સપેક્ટર) અથવા navigator (નેવીગેટર) માં, JMenu1 પર જમણું-ક્લિક કરો,
08.39	Add From Palette વિકલ્પ પસંદ કરીને Menu Item (મેનુ આઇટમ) પસંદ કરો.
08.45	આનાથી MenuItem (મેનુઆઇટમ) ઉમેરાવી જોઈએ.
08.47	તમે તેનું નામ બદલીને ત્યાં Exit (એક્ઝીટ) પણ લખી શકો છો.
08.54	આમ આ પ્રકારે આપણે ફાઈલ મેનુ અંતર્ગત સબમેનુ ઉમેર્યું અને તે મેનુ આઇટમનું નામ પણ બદલી કર્યું.
09.00	હવે, આપણું GUI મોટા ભાગે પૂર્ણ થયું છે.
09.03	ચાલો હવે 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