આઇફોન પર વિકાસશીલ (4): અમારી પ્રથમ એપ્લિકેશન (II)

અમારી અગાઉની પોસ્ટમાં અમે સૂચવ્યું કે અમારી હેલ્લો વર્લ્ડ એપ્લિકેશન કેવી હશે અને અમે અમારી એપ્લિકેશન બનાવવા માટે કયા પગલાં લઈ રહ્યા છીએ, તેમ જ જરૂરી દસ્તાવેજોની લિંક્સ આપી. આ લેખમાં આપણે એક્સકોડ ખોલીને પ્રારંભ કરીએ છીએ અને અમે વિકાસ કરવાનું શરૂ કરીએ છીએ.

પગલું 1. પ્રોજેક્ટ બનાવો.

તેથી જ અમે એક્સકોડ ખોલીએ છીએ અને બંધ (જો તે બહાર આવે છે), એપ્લિકેશન સ્વાગત વિંડો. અમારો પ્રોજેક્ટ બનાવતા પહેલા, અમે XCode પસંદગીઓ દાખલ કરી શકીએ છીએ. સામાન્ય રીતે -> લેઆઉટ 'ઓલ-ઇન-વન' પસંદ કરો, ઓછામાં ઓછું જો તમે તમારી સ્ક્રીન પર જે જોશો તેની તુલના તમે જે છબીઓથી કરો છો તેની સાથે કરી શકશો.

આ ક્ષણે અમે પ્રોજેક્ટ બનાવીએ છીએ: ફાઇલ -> નવો પ્રોજેક્ટ, અને અમે વ્યૂ-બેઝ્ડ પસંદ કરીએ છીએ:

આપણે પહેલાના લેખમાં સૂચવ્યા મુજબ, વ્યૂ-આધારિત એક્સકોડ પ્રોજેક્ટ માટે તે કંટ્રોલર વર્ગ સાથે જોડાયેલ દૃષ્ટિકોણ બનાવે છે (યાદ રાખો કે અમે એમવીસી પેટર્ન વિશે વાત કરી રહ્યા છીએ). પ્રોજેક્ટને હેલો વર્લ્ડ ક Callલ કરો અને તેને તમે ઇચ્છો તે ફોલ્ડરમાં સાચવો. તમે આના જેવું કંઈક જોશો:

આપણે જોઈએ છીએ કે અમારી પાસે ઘણી ફાઇલો છે:

• હેલો વર્લ્ડવિડકોન્ટ્રોલલેઅરએચ અને હેલો વર્લ્ડવિડકોન્ટ્રોલલેઅરએમ. બંને અમારી સ્ક્રીનના નિયંત્રકને અનુરૂપ છે. અહીં અમારા દૃષ્ટિકોણથી સંબંધિત તર્ક હશે; અમારા કિસ્સામાં, અહીં તે કોડ હોવો આવશ્યક છે જે ટેક્સ્ટ બ inક્સમાં દાખલ કરેલો છે તે સાથે લેબલના મૂલ્યમાં ફેરફાર કરે છે. આપણે જોઈએ છીએ કે ત્યાં .h ફાઇલ છે અને બીજું .m. પ્રથમ હેડર છે, જાવામાં તે ઇન્ટરફેસ હશે. અહીં ચલો, પદ્ધતિઓ, વગેરેની ઘોષણાઓ છે. .M ફાઇલ એ એક છે જે પહેલાથી અમલીકરણને સમાવે છે.
• હેલોવર્લ્ડવિડકોન્ટ્રોલલેઅરસિબ. આઇબી = ઇન્ટરફેસ બિલ્ડર. આ ફાઇલ આપણી દૃષ્ટિ, સ્ક્રીન છે. તે મેઇનવિન્ડો.એક્સિબ દ્વારા કરવામાં આવ્યું છે, જેનો મુખ્ય રવેશ જે આપણે સ્પર્શ કરીશું નહીં.
• હેલો વર્લ્ડએપ્લેઇગેટ (. એચ અને .એમ). અમે તેમને સંશોધિત કરીશું નહીં, તેમાં અમારા વ્યૂકontન્ટ્રોલરનો નિર્દેશક છે.
• માહિતી.પલિસ્ટ. તે અમારી એપ્લિકેશન વિશેની માહિતી સાથેનો એક XML છે. અહીં આપણે ઉદાહરણ તરીકે કહી શકીએ કે આપણી એપ્લિકેશનનું આયકન કયું છે.

પગલું 2. ઇન્ટરફેસ ડિઝાઇન.

અમે અમારી એપ્લિકેશનની સ્ક્રીન "ડ્રોઇંગ" શરૂ કરવા જઈ રહ્યા છીએ. આ કરવા માટે, એક્સકોડમાં આપણે હેલ્લોવર્લ્ડવિઝકોન્ટ્રોલ.અક્સીબ પર ડબલ ક્લિક કરીએ છીએ, અને આપણે જોશું કે ઇન્ટરફેસ બિલ્ડર એપ્લિકેશન ખુલે છે. સૌ પ્રથમ, વ્યવહારુ સલાહ તરીકે હું ભલામણ કરું છું કે તમે હંમેશાં તપાસ કરો કે તમારી પાસે ઇન્સ્પેક્ટર અને લાઇબ્રેરી પેલેટ્સ ખુલી છે. તમે તેમને ઇન્ટરફેસ બિલ્ડરના ટૂલ્સ મેનૂમાં ખોલી શકો છો. લાઇબ્રેરી પેલેટ તમને તમારા દૃષ્ટિકોણમાં વિવિધ નિયંત્રણો ઉમેરવાની મંજૂરી આપશે, અને ઇન્સ્પેક્ટર પેલેટ તમને દરેક ofબ્જેક્ટના ગુણધર્મો જોવા અને તેમને સુધારવા માટે પરવાનગી આપે છે.

અમે એક સુંદર એપ્લિકેશન બનાવવાનો પ્રયાસ કરવા જઈ રહ્યા નથી, પરંતુ તેને કાર્યરત કરવા માટે. સ્ક્રીનને સ્થિત કરીને પ્રારંભ કરો, દૃશ્ય લેબલવાળા. જો તે ખુલ્લું નથી, તો તે નીચેની સ્ક્રીન પર વ્યુ પર ડબલ ક્લિક કરીને ખોલવામાં આવશે:

દૃશ્ય પર, ઉપરના ટેક્સ્ટફિલ્ડની લાઇબ્રેરી પેલેટથી ખેંચો, નીચે એક લેબલ અને અંતે રાઉન્ડ રેક્ટ બટન. અમે જોતા હોઈએ છીએ, જો આપણે ટેક્સ્ટફિલ્ડ જેવા નિયંત્રણને પસંદ કર્યું છે, તો અમે આ નિયંત્રણનું કદ ખસેડી શકીએ છીએ, તેને સ્ક્રીન પર ફરીથી સ્થાનાંતરિત કરી શકીએ છીએ ... અને ઇન્સપેક્ટર પેલેટમાં આપણે તેની ગુણધર્મો મેળવી શકીએ છીએ. બટનને પસંદ કરીને આપણે «ચેન્જ! Value મૂલ્ય સાથે શીર્ષક મૂકી શકીએ છીએ. અંતમાં આપણી પાસે આવું કંઈક હશે:

આ સાથે અમે અમારી એપ્લિકેશનનો ઇંટરફેસ વ્યાખ્યાયિત કર્યો છે. તે અમે જે આયોજન કર્યું હતું તેનું પાલન કરે છે: એક ટેક્સ્ટ બ boxક્સ (ત્યારબાદ, ટેક્સ્ટફિલ્ડ) જ્યાં આપણે માહિતી દાખલ કરીશું. એક લેબલ (નિશ્ચિત લખાણ) અને એક બટન. જ્યારે આપણે બટન દબાવો, ત્યારે લેબલ બતાવશે કે આપણે ટેક્સ્ટફિલ્ડમાં શું લખ્યું છે. આ કરવા માટે, આપણે આપણા ચલચિત્રોમાંના લેબલ અને ટેક્સ્ટફિલ્ડનો સંદર્ભ લેતા ચલો બનાવવાનું રહેશે અને આપણે આ ચલો સાથે લેબલ અને ટેક્સ્ટફિલ્ડ વચ્ચેના સંબંધને ઇન્ટરફેસ બિલ્ડરને સૂચવવા પડશે. આપણે વ્યૂકontન્ટ્રોલરમાં એક પદ્ધતિ પણ બનાવવી પડશે જે આપણે ટેક્સ્ટફિલ્ડમાં જે દાખલ કર્યું છે તેની સાથે લેબલ મૂલ્યને અપડેટ કરવા માટે જવાબદાર છે, અને ઇન્ટરફેસ બિલ્ડરમાં તે પદ્ધતિ સાથેના બટનને સંબંધિત છે. તે બધું અમારી પ્રારંભિક સ્ક્રિપ્ટના 3, 4 અને 5 પગલાં હશે, અને તે પછીની પોસ્ટમાં સમજાવવામાં આવશે.

અલબત્ત, સમાપ્ત કરતા પહેલા હું તમને ભલામણ કરું છું કે જ્યારે તમે પસંદ કરો ત્યારે લાઇબ્રેરી પેલેટમાં શું દેખાય છે તે જોવા, ઉદાહરણ તરીકે, ટેક્સ્ટફિલ્ડ તેને દૃશ્યમાં ઉમેરવા માટે:

તમે જોઈ શકો છો કે તે ટેક્સ્ટફિલ્ડ નિયંત્રણ શું કરે છે તે સમજાવે છે, પરંતુ તે નીચે "યુઆઈટી ટેક્સફિલ્ડ" પણ કહે છે. આ મહત્વપૂર્ણ છે, કારણ કે તે અમને જણાવે છે કે કોકો યુઆઈકિટ ફ્રેમવર્કનો કયો વર્ગ આ નિયંત્રણને અનુરૂપ છે. આ આપણને એક સંકેત આપે છે: વ્યૂકontન્ટ્રોલરમાં આ નિયંત્રણને નિયંત્રિત કરે તેવા ચલ બનાવવા માટે, તે UITextFeld ટાઇપનો રહેશે.