Ukuzaji wa kizuizi cha mafunzo juu ya nidhamu "database na mifumo ya usimamizi wa hifadhidata". Onyesha ujumbe na maandishi ya maelezo. Ph.D., mwalimu: E.A. Mashintsov

Maendeleo ya GUI

Njia kuu za mwingiliano wa watumiaji na programu ni Kiolesura cha Mchoro cha Mtumiaji (GUI). GUI ya bidhaa yoyote ya programu ni mojawapo ya mambo muhimu katika umaarufu wake.

Kuunda mtu anayejua kusoma na kuandika kiolesura cha mtumiaji- mchakato huo ni wa nguvu kazi na unahitaji umakini wa hali ya juu kwa undani. Kiolesura kilichoundwa inapaswa kuongeza uwezo wa programu, lakini wakati huo huo usipakie mtumiaji kwa wingi wa menyu, vifungo, picha na maandishi.

Katika mazoezi, programu maombi Windows inahusisha matumizi makubwa ya mbalimbali zana na mabwana. Kwa hivyo, kwa kuzingatia viwango vya mfumo wa uendeshaji uliochaguliwa, programu itakuwa na interface ya dirisha. Hii ni kwa sababu, kwanza kabisa, kwa ukweli kwamba windows ndio vitu kuu vya kiolesura cha picha katika mifumo ya uendeshaji (OS) ya familia ya Windows. Ni maeneo ya mstatili ambayo yana mipangilio yao wenyewe, mali na aina.

Sehemu ya picha ya kizuizi cha mafunzo ni pamoja na madirisha ya aina nne:

Dirisha kuu ina vipengele vyote vya urambazaji ndani ya programu, pamoja na maelezo ya ziada muhimu kwa urahisi wa kufanya kazi na programu;

Kudhibiti madirisha msingi wa habari-- ni pamoja na vidhibiti vyote vya sehemu ya habari chombo cha programu. Wanatoa nyongeza ya majaribio, habari, watumiaji wapya na wasimamizi, na kuruhusu upotoshaji wa data mpya iliyoundwa au iliyopo;

Windows ya kufanya kazi nayo uwezo wa programu-- kutoa kazi na kazi za msingi za kizuizi cha mafunzo, kama vile kufaulu majaribio na kusoma mihadhara;

Habari na takwimu huonyesha madirisha -- yanayotumika kuonyesha habari aina mbalimbali, pamoja na takwimu na grafu.

Dirisha kuu la programu litakuwa na vidhibiti vifuatavyo na pato la habari:

Kichwa cha dirisha, ambacho kina jina la programu na madhumuni ya dirisha;

Vifungo menyu ya mfumo, ambayo ni wajibu wa kurekebisha ukubwa, kupunguza na kufunga programu;

Eneo la kichwa cha dirisha, ambalo lina kazi ya mapambo tu na ni muhimu kuzingatia ufumbuzi wa jumla wa kubuni;

Eneo la kukaribisha;

Siku ya wiki eneo la maonyesho, tarehe ya sasa na wakati;

Upau wa zana maalum ulio na vifungo vya kufikia kazi kuu za programu;

Jopo la utawala linajumuisha kifungo cha kufikia udhibiti wa utawala wa PS;

Upau wa hali unaoonyesha habari kuhusu njia zote za uendeshaji za programu.

Mpango wa dirisha kuu la kiolesura cha picha (mwonekano wa dirisha kwa msimamizi akaunti) imewasilishwa kwenye Mchoro 3.2

Mchoro 3.2 -- Mchoro wa dirisha kuu la kiolesura cha picha: 1 -- kichwa cha dirisha; 2 -- vitufe vya menyu ya mfumo; 3 -- eneo la kichwa cha dirisha; 4 -- upau wa hali; 5 - eneo la kukaribisha; 6 -- eneo la kuonyesha siku ya juma, tarehe na saa; 7 -- jopo la utawala; 8 -- paneli maalum; 9 -- kitufe cha kufikia hatua ya kujifunza; 10 -- kitufe cha kufikia hatua ya majaribio; 11 -- kitufe cha kuonyesha takwimu na grafu; 12 -- toka; 13 -- kitufe cha kufikia sehemu ya usimamizi ya programu

Kwa kuzingatia lengo la programu inayotengenezwa, ufumbuzi kadhaa usio wa kawaida wa mchoro ulitengenezwa ili kuvutia tahadhari na maslahi makubwa katika maombi. Kwa kuongezea, hii hukuruhusu kupata aina fulani ya umoja kati ya safu zingine za programu za mada na umakini sawa.

Moja ya ufumbuzi huu inaweza kuitwa rangi na kujenga muundo wa kipekee, vipengele vya kiolesura ambavyo havina analogi katika eneo hili. Ni kuhusu kuhusu viingilio vilivyohuishwa kulingana na uhuishaji wa flash. Zinatumika kutengeneza majina ya madirisha yote ya kazi kuu, vipengele vya urambazaji, na kiolesura cha fomu ya usajili na idhini. Faida kuu za maendeleo haya ni: utekelezaji wa interface ya kupendeza na ya kirafiki; kurahisisha kwa kiasi kikubwa kutumia programu, katika viwango vya mtumiaji na vya utawala.

Nyingine ya faida kuu kati ya programu za analog, katika programu na katika utekelezaji wa graphical, ni shirika la kupitisha vipimo kwa ombi. Ili kuchukua mtihani wa aina hii mtumiaji anahitaji kukusanya maswali ya SQL kutoka kwa vipengele tofauti, vinavyojitegemea. Kulingana na aina ya ombi ambalo linahitaji kufanywa kulingana na masharti ya kazi iliyopendekezwa, polygon maalum ya mkusanyiko huundwa. Poligoni ina sehemu za kubadilisha waendeshaji ambazo huvutwa ndani yao na kipanya kutoka kwa kizuizi tofauti, na sehemu za kuingiza majina ya jedwali, sehemu na masharti.

Takwimu za mtumiaji zinatekelezwa kwa namna ya grafu, ambazo zimejengwa kulingana na matokeo yaliyopatikana naye. Kila mtihani una mienendo yake mwenyewe. Chati zina saini zote muhimu, zinatekelezwa kwa kutumia sehemu ya TChart, na kwa hiyo zina udhibiti mwingi ambao umejengwa ndani ya sehemu hiyo kwa chaguo-msingi na, kwa sababu hiyo, kutekelezwa katika programu.

Pia, kwa taswira inayomfaa mtumiaji zaidi, mitindo ya vichwa vya jedwali imebadilishwa na ile iliyotekelezwa katika mazingira chaguomsingi ya ukuzaji.

Hivyo, kutekelezwa ufumbuzi wa picha ilituruhusu kufikia matokeo yaliyokusudiwa na wazo la muundo wa GUI. Kiolesura kilichoundwa kinaongeza uwezo wa programu, lakini wakati huo huo haipakia mtumiaji kwa wingi wa menyu, vifungo, picha na maandishi.

yadobr Januari 14, 2014 saa 09:10

Ubunifu wa Kiolesura cha Mtumiaji

  • Violesura

Utangulizi

KATIKA ulimwengu wa kisasa mabilioni vifaa vya kompyuta. Zaidi programu zaidi kwa ajili yao. Na kila mmoja ana interface yake mwenyewe, ambayo ni "levers" ya mwingiliano kati ya mtumiaji na kanuni ya mashine. Haishangazi kwamba kiolesura bora, mwingiliano wa ufanisi zaidi.

Walakini, sio watengenezaji wote na hata wabunifu wanafikiria juu ya kuunda kiolesura cha mtumiaji cha picha kinachofaa na kinachoeleweka.

Kwa nafsi yangu, nilianza kwa kuuliza maswali: kanuni za jumla, ambayo vipengele vya interface (EI) kuunda muundo gani wanapaswa kuwa nao, wapi wanapaswa kuwekwa kwa usahihi na jinsi wanapaswa kuishi.
Hapo chini nitajaribu kujibu maswali haya.

Kanuni za jumla


Je, nifanye EI gani?


Muundo wa EI unapaswa kuwa nini?

Kwa kweli, kubuni EI ni mada ya makala tofauti. Hapa unahitaji kuzingatia kila kitu: kutoka kwa rangi, sura, uwiano, kwa saikolojia ya utambuzi. Walakini, kanuni kadhaa bado zinafaa kuzingatiwa:

Jinsi ya kuweka kwa usahihi EI kwenye skrini?


Je, EI zinapaswa kuishi vipi?


Akiwa chini ya ulinzi

Makala hii haidai kuwa zaidi mwongozo kamili kanuni za muundo wa interface. Kiolesura cha mchoro cha mtumiaji ni mada kubwa, inayofungamana kwa karibu na saikolojia, inayochukua mawazo ya wanasayansi na mamia ya kurasa za vitabu na masomo. Katika muundo mdogo kama huu, hakuna njia ya kuelezea utimilifu wa mada iliyoinuliwa. Hata hivyo, kufuata kanuni za msingi, itawawezesha kujenga miingiliano ya kirafiki zaidi ya mtumiaji, na pia kurahisisha mchakato wa kubuni yenyewe.
Asante kwa umakini wako.

Fasihi

Jeff Raskin, "Kiolesura: maelekezo mapya katika muundo wa mifumo ya kompyuta"
Alan Cooper, “Kuhusu kiolesura. Misingi ya muundo wa mwingiliano"
Alan Cooper, "Hospitali ya magonjwa ya akili mikononi mwa wagonjwa"

Mbinu ya kimapokeo ya kiolesura cha mtumiaji inahusishwa na kazi ya Sutherland, Newman et al., ambamo mwingiliano unategemea matumizi. onyesho la picha na kalamu ya kuzaliwa upya na nyepesi. Maendeleo zaidi ya mazungumzo ya picha yanahusishwa na maendeleo katika uwanja wa mifumo ya picha ya kompyuta inayoingiliana, ambayo ilisababisha udhibiti katika mfumo wa viwango vya kimataifa.
GKS ndio kiwango cha kwanza cha kimataifa cha michoro. Ilirekodi kwanza dhana za "vituo vya kazi" na vifaa vya mantiki ingizo (kibodi, uteuzi, locator, valuator, pointer, ratibu ingizo la mfuatano). Kwa bahati mbaya mimba wakati wa ukuu wa dhana kuchora vector. Kwa hivyo udhaifu wa usaidizi wa mazungumzo: kutokuwa na uwezo wa kuingiza vifaa vipya au kurekebisha picha ya kifaa kwenye skrini hata kutoka. programu ya maombi(mtumiaji kifurushi cha michoro), ambayo inaongoza kwa haja ya kutumia hasa uingizaji wa tabia wakati wa kuandaa mazungumzo. Utekelezaji wa mazungumzo katika GKS ni haki ya programu ya maombi; uwezekano wa muundo tofauti haufikiriwi.
Mwelekeo wa pili wa graphics - picha za raster ilikuwa na ushawishi mkubwa sana juu ya maendeleo yote yaliyofuata ya mifumo ya mwingiliano. Vipengele vyote kuu vya interface ya mtumiaji kwenye vituo vya kisasa vya kazi vinatokana na kazi Xerox PARC: usimamizi wa dirisha

  • matumizi alama za picha("ikoni") kuwakilisha vitu
  • mtindo wa mwingiliano unaoitwa ujanja wa moja kwa moja
  • umaarufu wa kipanya kama kifaa cha kuweka skrini
  • mtindo wa programu unaolenga kitu.
Tangu wakati huo, mfumo wa uainishaji wa zana za kuunda na kudhibiti miingiliano ya watumiaji umezingatiwa katika viwango vitatu:
  1. mifumo ya usimamizi wa dirisha (WMS - Mfumo wa Meneja wa Dirisha);
  2. zana maalum;
    • kawaida (MacIntosh, SunView...)
    • yenye mwelekeo wa kitu (Smalltalk-80, Andrew, Mahojiano)
  3. mifumo ya usimamizi wa kiolesura cha mtumiaji.
Sehemu zifuatazo zitatoa sifa fupi, hali na maelezo ya kiutendaji ya kila moja ya viwango hivi.

Mifumo ya Usimamizi wa Dirisha (WMS)

Teknolojia ya madirisha mengi humpa mtumiaji ufikiaji wa habari zaidi kuliko inavyowezekana na skrini moja. Windows hutoa ufikiaji wa vyanzo vingi vya habari. Mtumiaji anaweza kuchanganya habari kutoka kwa vyanzo kadhaa, kuchunguza habari viwango tofauti maelezo. Katika hali ya multiprogram inawezekana kudhibiti kadhaa kazi sambamba. Ingizo na matokeo ya kila kazi huonyeshwa ndani madirisha tofauti, kuruhusu mtumiaji kuzingatia inavyohitajika kwa kila kazi.
WMS, mazingira ya kufanya kazi kwa rasilimali za usimamizi kulingana na dirisha, inasaidia:

  • madirisha yanayoingiliana (maeneo ya mstatili ya skrini);
  • vifaa mbalimbali vya pembejeo (digital na analog);
  • vishale;
  • fonti.
Kiolesura cha sehemu ya opereta na programu ya maombi kina amri za kuunda/kuharibu madirisha, kubadilisha ukubwa wao na nafasi, kuinua juu, kubana dirisha kwa ikoni, na kuzirejesha. Ina maktaba ya michoro pato (primitives za msingi pekee) na kidhibiti tukio. Kwa hivyo, kuna njia kadhaa za kutekeleza kiolesura cha mtumiaji.
Kuna aina mbili za utekelezaji wa WMS zinazowezekana: mfumo wa msingi(Mfumo wa Kernel), unaoendeshwa kwenye mashine moja, na mtandao (Unaoelekezwa kwa Mtandao), unatekelezwa kulingana na muundo wa seva ya mteja.

Zana ya Kuunda Kiolesura cha Mtumiaji

Ufafanuzi: Tunasoma wijeti - vipengele vinavyoonekana vinavyounda kiolesura cha picha cha mtumiaji, mpangilio wao, sera ya ukubwa, miunganisho ya nafasi ya mawimbi, vipengee vya kiolesura cha picha na matumizi yake.

13.1 Wijeti

Wijeti ni vipengele vinavyoonekana vinavyounda kiolesura cha picha cha mtumiaji.

Mifano ya wijeti:

  • Kitufe (darasa QPushButton);
  • Lebo(darasa la QLabel);
  • Sehemu ya kuingiza (darasa QLineEdit);
  • Sehemu ya kukabiliana na nambari (darasa la QSpinBox);
  • Upau wa kusogeza (darasa QScrollBar ).

Qt ina takriban madarasa 50 yaliyotengenezwa tayari vipengele vya picha inapatikana kwa matumizi. Darasa kuu la wijeti zote ni darasa la QWidget. Sifa zote kuu za vitu vya kuona zimerithiwa kutoka kwake, ambazo tutazingatia kwa uangalifu. Hebu tuanze kuchunguza njia za kuendeleza programu na kiolesura cha picha na mfano.

Hebu tuunde faili tupu mradi. Zindua mchawi wa mradi na uchague kipengee katika sehemu ya Miradi Mradi mwingine. Ifuatayo, chagua aina ya mradi Mradi wa Qt Tupu. Wacha tuongeze yaliyomo kwenye faili ya mradi:

TEMPLATE = moduli za programu #Qt ambazo tutatumia wijeti za QT += #Ongeza sehemu ya wijeti ili kufanya kazi na wijeti (muhimu kwa Qt5). LENGO = widget#Jina la faili inayoweza kutekelezwa SOURCES += \ main.cpp

Sasa hebu tuunda programu rahisi na dirisha ambalo tutaonyesha uandishi. Hebu tuweke ukubwa wa dirisha na maandishi ya kichwa chake, na pia kuweka font kwa uandishi. Ili kufanya hivyo, unda faili main.cpp na maudhui yafuatayo:

#pamoja na #pamoja na int main ( int lArgc, char * lArgv ) ( // Tengeneza kitu cha QApplication ambacho huanzisha na kusanidi programu ya dirisha, // hudhibiti utekelezaji wake kwa kutumia kitanzi cha tukio la QApplication lApplication (lArgc, lArgv); QLabel lLabel; // Tengeneza QLabel wijeti - weka lebo lLabel.setText ("Mimi ni wijeti!"); //Weka maandishi ya lebo lLabel.setGeometry (200, 200, 300, 150); //Weka vipimo - nafasi (x, y), upana na urefu. Weka maandishi ya upatanishi lLabel.setAlignment (Qt::AlignHCenter | Qt::AlignVCenter); // Darasa la QFont linatumika kuweka vigezo vya fonti. //Chagua familia ya fonti ya Arial Black na saizi 12. QFont lBlackFont (" Arial Black", 12); lLabel. setFont (lBlackFont); //Weka fonti ya lebo ya lLabel.show (); //Piga njia ya show() ili kuonyesha lebo kwenye skrini. rudisha lApplication.exec () ; //Endesha programu ili kutekeleza exec() tekeleza // uchakataji wa tukio la kitanzi. Programu husubiri vitendo vya mtumiaji na kuzichakata.)

Kama tunavyoona, vipengele vinavyounda miingiliano katika Qt vina nafasi na ukubwa wao wenyewe - kinachojulikana kama "jiometri" - na hivyo huchukua eneo la mstatili sambamba kwenye skrini (ona Mchoro 13.1). Pia, kila kipengele kina mipangilio ambayo huamua tabia na kuonekana kwake.


Mchele. 13.1.

Ili kuunda muundo, vilivyoandikwa hupangwa katika uongozi kulingana na kanuni ya "sehemu - nzima". Kila wijeti inaweza kuwa na wijeti zingine. Kipengele hiki cha kuona kinakuwa "mzazi" (wijeti ya mzazi) ya vipengele vilivyomo. Kumbuka kuwa uhusiano kama huo haupaswi kuchanganyikiwa na urithi katika C ++ - uhusiano kati ya madarasa katika programu. Uhusiano kati ya vilivyoandikwa ni uhusiano kati ya vitu. Mahusiano kama haya husababisha matokeo kadhaa:

  • kipengele cha mzazi kitawajibika kwa kuondolewa kipengele cha mtoto: ikiwa wijeti ya mzazi imefutwa, itafuta kiotomati vipengele vyote vya mtoto;
  • wijeti ya mzazi huweka wijeti za watoto ndani yake, sehemu za wijeti za watoto zinazoenea zaidi ya mzazi hazitaonekana;
  • sehemu ya hali ya wijeti ya mzazi hupitishwa kwa watoto wake - hii inatumika kwa baadhi ya sifa (mwonekano, shughuli) na mitindo ambayo inatumika kwa kipengele cha kuona.

Wijeti ambazo hazina mzazi (wijeti ngazi ya juu), inaonekana kama madirisha tofauti kwenye programu. Hebu tuangalie mfano. Hebu piga simu mradi mpya MzaziMfano. Faili ya mradi itakuwa na mipangilio ya kawaida ya mradi wa GUI:

TEMPLATE = app TARGET = ParentExample QT += wijeti

Kwa wijeti ambayo tutatumia kama dirisha kuu, tutaunda darasa jipya. Kwa hili katika kategoria Faili na Madarasa Hebu tuchague sehemu ya C ++ na uchague Hatari ya C ++ (tazama Mchoro 13.2).

Hatua inayofuata ni kuunda vipengele kadhaa kwenye dirisha. Ili kufanya hivyo, fungua faili ya parentwidget.cpp na ubadilishe msimbo wa wajenzi wa darasa. Ili kuonyesha vipengee, viunde tu katika kijenzi cha darasa na uweke ParentWidget kama mzazi wao. Msimbo wa parentwidget.cpp unaonekana kama hii:

#pamoja na " parentwidget.h " #pamoja na #pamoja na #pamoja na ParentWidget::ParentWidget (QWidget * mzazi) : QWidget (mzazi) ( //Unda lebo inayoonyesha wijeti ya mzazi - hii, yaani, mfano wa darasa la ParentWidget. QLabel * lLabel=QLabel mpya (hii); //Position inayohusiana na kona ya juu kushoto ya wijeti kuu. lLabel ->wekaJiometri (50, 0, 100, 30); lLabel ->weka Nakala (" TextLabel "); //Nakala kwenye lebo. //Unda kitufe, weka "mzazi", jiometri na maandishi QPushButton * lPushButton = QPushButton mpya (hii); lPushButton->wekaJiometri (50, 50, 100, 30); lPushButton->setText (" PushButton "); //Unda sehemu ya ingizo, weka "mzazi", jiometri na maandishi QLineEdit * lLineEdit = QLineEdit mpya ( hii); lLineEdit ->wekaJiometri (50, 100, 100, 30); lLineEdit ->setText (" LineEdit "); lLineEdit ->chaguaYote (); // Chagua maandishi katika uga wa ingizo (kwa mfano tu) // Hatimaye badilisha saizi ya seti ya wijeti kuuJiometri (x (), y (), 300, 150); // na uweke maandishi ya kichwa cha dirisha setWindowTitle (" parent widgetExample " );)

Kwa sababu ya kipengele cha mzazi is a ParentWidget , kisha lebo (QLabel), kitufe (QPushButton) na sehemu ya maandishi (QLineEdit) zimo ndani yake. Nafasi ya wijeti za watoto imewekwa kulingana na kona ya juu kushoto ya baba. Unaweza kuthibitisha hili kwa urahisi kwa kubadilisha ukubwa na nafasi ya dirisha la programu yetu. Angalia jinsi tulivyounda vipengele vya UI ndani kumbukumbu yenye nguvu kutumia mwendeshaji mpya. Hii inahakikisha kwamba vipengele haviondolewi baada ya mjenzi wa ParentWidget kukamilisha.

Imechangiwa na Saleem Gul na Tomas Pavek

Katika hili kozi ya mafunzo Tunaangalia kuunda kiolesura rahisi cha kielelezo cha mtumiaji na kuongeza utendaji rahisi wa seva kwake. Hasa, tutaangalia msimbo unaofafanua tabia ya vifungo na mashamba kwenye fomu ya Swing.

Tutaangalia mpangilio na muundo wa GUI, kisha kuongeza vifungo na sehemu za maandishi. Sehemu za maandishi zimeundwa kupokea habari iliyoingizwa na mtumiaji na kuonyesha matokeo ya programu. Kitufe kitaanzisha uendeshaji wa kazi zilizojengwa kwenye sehemu ya mteja ya programu. Programu inaundwa ni kikokotoo rahisi lakini kilichoangaziwa kikamilifu.

Mwongozo wa kina zaidi wa vipengele vya muundo wa GUI Builder, ikiwa ni pamoja na maonyesho ya video kazi mbalimbali maendeleo, angalia sehemu.

Muda uliokadiriwa: Dakika 20

Zoezi la 1: Kuunda Mradi

Hatua ya kwanza ni kuunda mradi wa IDE kwa programu unayotengeneza. Hebu tupe jina la mradi NumberAddition.

  1. Chagua Faili > Mradi Mpya. Unaweza pia kubofya ikoni ya Mradi Mpya kwenye upau wa vidhibiti wa IDE.
  2. Katika eneo la Jamii, chagua nodi ya Java. Katika eneo la "Miradi", chagua "Maombi ya Java". Bonyeza "Ijayo".
  3. Weka Nambari ya Nyongeza katika sehemu ya Jina la Mradi na ubainishe njia, kama vile saraka ya nyumba yako, kama eneo la mradi.
  4. Chagua kisanduku cha kuteua "Tumia folda tofauti ili kuhifadhi maktaba" na ueleze eneo la folda ya maktaba (hiari). Taarifa za ziada Tazama nakala Shiriki maktaba na watumiaji wengine kwenye hati Kutengeneza Programu kwa kutumia NetBeans IDE.
  5. Ondoa kisanduku cha kuteua cha "Unda Daraja Kuu" ikiwa imechaguliwa.
  6. Bofya kitufe cha "Imefanyika".

Zoezi la 2: Kuunda Mwisho wa Mbele

Ili kuendelea na mchakato wa kuunda kiolesura, unahitaji kuunda chombo cha Java ambacho vipengele vingine vinavyohitajika vya GUI vitawekwa. Katika shughuli hii, kontena itaundwa kwa kutumia kipengele cha JFrame. Chombo kitawekwa ndani kifurushi kipya, ambayo itaonekana kwenye nodi ya "Vifurushi vya Chanzo".

Kuunda Chombo cha JFrame

  1. Katika dirisha la Miradi, bofya bonyeza kulia panya juu ya nodi ya Nambari ya Kuongeza na uchague Mpya > Nyingine.
  2. Katika sanduku la mazungumzo la Unda Faili, chagua kitengo cha Fomu za Swing GUI na aina ya faili ya JFrame. Bonyeza "Ijayo".
  3. Weka NumberAdditionUI kama jina la darasa.
  4. Chagua kifurushi cha my.numberadition.
  5. Bofya kitufe cha "Imefanyika".

IDE huunda fomu ya NumberAdditionUI na darasa la NumberAdditionUI katika programu ya NumberAddition na kufungua fomu ya NumberAdditionUI katika GUI Builder. Kifurushi cha my.NumberAddition kinachukua nafasi ya kifurushi chaguomsingi.

Kuongeza Vipengee: Kuunda Mwisho wa Mbele

Ifuatayo, kwa kutumia dirisha la "Palette". mwisho wa mbele programu imejazwa na JPanel. Baada ya hayo, vipengele vitatu vya JLabel (lebo za maandishi), vipengele vitatu vya JTextField (mashamba ya maandishi), na vipengele vitatu vya JButton (vifungo) vinaongezwa. Ikiwa haujafanya kazi na mbuni wa GUI hapo awali, angalia Kubuni GUI ya Swing katika NetBeans IDE kwa maelezo kuhusu uwekaji wa sehemu.

Baada ya kuburuta na kuweka vipengele vilivyo hapo juu, kipengele cha JFrame kinapaswa kuonekana kama picha iliyo hapa chini.

Ikiwa katika haki kona ya juu Ikiwa IDE haina dirisha la Palette, chagua Dirisha > Palette.

  1. Ili kuanza, chagua paneli kutoka kwa kategoria ya Vyombo vya Swing kwenye ubao na uiburute hadi kwenye JFrame.
  2. JPanel itaangaziwa. Nenda kwenye dirisha la Sifa na ubofye kitufe cha duaradufu (...) karibu na uwanja wa Mpaka ili kuchagua mtindo wa mpaka.
  3. Katika sanduku la mazungumzo ya Mpaka, chagua TitledBorder kutoka kwenye orodha na uingie Ongezeko la Nambari kwenye uwanja wa Kichwa. Bofya "Sawa" ili kuhifadhi mabadiliko yako na ufunge kisanduku cha mazungumzo.
  4. Skrini inapaswa kuonyesha sasa kipengele tupu"JFrame" yenye kichwa "Ongezeko la Nambari" kama inavyoonyeshwa kwenye picha. Kulingana na picha, ongeza JLabels tatu kwake, tatu nyanja za maandishi JTextField na JButtons tatu.

Kubadilisha vipengele

Hatua hii itabadilisha jina la vipengele ambavyo vimeongezwa kwenye kipengele cha JFrame.

  1. Bofya mara mbili jLabel1 na ubadilishe ntrcn (mali ya "maandishi") kuwa Nambari ya Kwanza.
  2. Bonyeza mara mbili jLabel2 na ubadilishe maandishi kuwa Nambari ya Pili.
  3. Bonyeza mara mbili jLabel3 na ubadilishe maandishi kuwa Matokeo.
  4. Ondoa maandishi chaguo-msingi kutoka kwa jTextField1. Maandishi yanayoonyeshwa yanaweza kubadilishwa kuwa maandishi yanayoweza kuhaririwa. Ili kufanya hivyo, bonyeza-click shamba la maandishi na uchague "Hariri Maandishi" kutoka kwenye orodha ya pop-up. Hii inaweza kukuhitaji kurejesha jTextField1 kwa saizi yake asili. Rudia hatua hii kwa uga za jTextField2 na jTextField3.
  5. Badilisha maandishi ya onyesho ya jButton1 kuwa Futa . (Ili kubadilisha maandishi ya kitufe, bofya-kulia kitufe na uchague Hariri Maandishi. Vinginevyo, unaweza kubofya kitufe, sitisha, na ubofye tena.)
  6. Badilisha maandishi ya onyesho ya jButton2 kuwa Ongeza .
  7. Badilisha maandishi ya onyesho ya jButton3 kuwa Toka .

Sasa GUI iliyokamilishwa inapaswa kuonekana kama picha hapa chini:

Zoezi la 3: Kuongeza utendaji

Zoezi hili litaongeza utendakazi unaohitajika kwenye vitufe vya Ongeza, Futa na Toka. Sehemu jTextField1 na jTextField2 zitatumika kwa ingizo la mtumiaji, na jTextField3 itatumika kuonyesha matokeo ya programu. Imeunda programu inawakilisha calculator rahisi. Basi tuanze!

Inaongeza utendakazi kwenye kitufe cha Toka

Ili vifungo vifanye kazi, kila mmoja wao lazima apewe msimamizi wa tukio, ambaye atakuwa na jukumu la kujibu matukio. Kwa upande wetu, tunahitaji kutambua tukio la kubofya kifungo - ama kwa kubofya panya au kutumia kibodi. Kwa hivyo, kiolesura cha "ActionListener" kitatumika kushughulikia matukio ya "ActionEvent".

  1. Bonyeza-click kitufe cha "Toka". Kutoka kwa menyu ibukizi, chagua Matukio > Kitendo > Kitendo Kimetekelezwa. Tafadhali kumbuka kuwa menyu ina matukio mengine mengi ambayo programu inaweza kujibu! Unapochagua tukio lililotekelezwa, IDE itaongeza kiotomatiki ActionListener kwenye kitufe cha Toka na kuunda mbinu ya kidhibiti ili kushughulikia mbinu ya msikilizaji iliyotekelezwa.
  2. IDE inafungua kiotomatiki Dirisha la Msimbo wa Chanzo, kukuonyesha mahali pa kuingiza kitendo unachotaka kifungo kifanye unapobofya (na kipanya chako au kibodi). Dirisha la "Msimbo wa Chanzo" linapaswa kuwa na mistari ifuatayo: utupu wa faragha jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( //TODO ongeza msimbo wako wa kushughulikia hapa: )
  3. Sasa hebu tuongeze msimbo wa kitendo ambacho kitufe cha "Toka" kinapaswa kufanya. Badilisha mstari wa TODO na System.exit(0); . Msimbo ulio tayari Kitufe cha "Toka" kinapaswa kuonekana hivi: utupu wa faragha jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( System.exit(0); )

Kuongeza utendaji kwa kitufe cha "Futa".

  1. Bonyeza kulia kitufe cha "Futa" (jButton1). Kutoka kwa menyu inayoonekana, chagua "Matukio > Kitendo > Kitendo Kimetekelezwa".
  2. Kubofya kitufe cha "Futa" kunapaswa kusababisha maandishi yote kuondolewa kwenye sehemu zote za maandishi za "jTextField". Ili kufanya hivyo, ongeza nambari inayofanana na ile iliyo hapo juu. Msimbo wa chanzo uliokamilika unapaswa kuonekana kama hii: utupu wa faragha jButton1ActionPerformed(java.awt.event.ActionEvent evt)( jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText("");

Msimbo huu huondoa maandishi kutoka kwa JTextFields zote tatu, na kuziacha tupu.

Kuongeza utendaji kwa kitufe cha "Ongeza".

Kitufe cha "Ongeza" kinapaswa kufanya mambo matatu.

  1. Kwanza huchukua ingizo la mtumiaji katika sehemu za jTextField1 na jTextField2 na kuzibadilisha kutoka kwa aina ya "Kamba" hadi aina ya "Float".
  2. Kisha itafanya nyongeza ya nambari mbili.
  3. Mwishowe, inabadilisha jumla kuwa aina ya Kamba na kuiweka katika jTextField3.
Hebu tuanze!
  1. Bofya kichupo cha "Design" hapo juu eneo la kazi ili kurudi kwenye skrini ya Usanifu wa Fomu.
  2. Bofya kulia kitufe cha "Ongeza" (jButton2). Kutoka kwa menyu ibukizi, chagua Matukio > Kitendo > Kitendo Kimetekelezwa.
  3. Ongeza msimbo kwa vitendo ambavyo kitufe cha "Ongeza" kinapaswa kufanya. Nambari ya chanzo iliyokamilishwa inapaswa kuonekana kama hii: utupu wa kibinafsi jButton2ActionPerformed(java.awt.event.ActionEvent evt)( // Kwanza tunafafanua vigeu vya kuelea. float num1, num2, tokeo; // Lazima tuchanganue maandishi kwa aina ya kuelea. num1 = Float.parseFloat(jTextField1.getText()); num2 = Float.parseFloat(jTextField2.getText()); // Sasa tunaweza kuongeza. result = num1+num2; // Sasa tutapitisha thamani ya matokeo kwa jTextField3. // Wakati huo huo, tutaenda // kubadilisha thamani ya matokeo kutoka kwa kuelea hadi kwa kamba. jTextField3.setText(String.valueOf(matokeo)); )

Sasa mpango uko tayari kabisa, na unaweza kuanza kukusanyika na kutekeleza.

Zoezi la 4: Utekelezaji wa Mpango

Ili kuendesha programu katika IDE, endesha vitendo vifuatavyo:

  1. Chagua Endesha > Endesha Mradi Mkuu (vinginevyo, bonyeza F6).

    Kumbuka. Ukifungua kidirisha kinachoonyesha kwamba Project NumberAddition haina darasa kuu lililobainishwa, unapaswa kuchagua my.NumberAddition.NumberAdditionUI kama darasa kuu katika dirisha moja na ubofye SAWA.

Ili kuendesha programu nje ya IDE, fuata hatua hizi:

Baada ya sekunde chache programu itazindua.

Kumbuka. Ikiwa katika bonyeza mara mbili Faili ya JAR haizinduzi programu, kwa maelezo zaidi kuhusu kusanidi uhusiano wa faili za JAR katika programu unayotumia mfumo wa uendeshaji sentimita .

Unaweza pia kuendesha programu kutoka kwa mstari wa amri.

Ili kuendesha programu kutoka kwa mstari wa amri, fuata hatua hizi:

  1. Fungua haraka ya amri au dirisha la terminal.
  2. KATIKA mstari wa amri mabadiliko saraka ya sasa kwenye saraka ya NumberAddition/dist.
  3. Kwa haraka ya amri, ingiza taarifa ifuatayo: java-jar NumberAddition.jar

    Kumbuka. Hakikisha kuwa my.NumberAddition.NumberAdditionUI imewekwa kama darasa kuu kabla ya kuendesha programu. Ili kuangalia hili, bofya kulia nodi ya mradi wa NumberAddition kwenye paneli ya Miradi, chagua Sifa kutoka kwenye menyu ibukizi, na uchague kategoria ya Endesha kwenye kisanduku cha mazungumzo cha Sifa za Mradi. Sehemu ya Daraja Kuu inapaswa kuonyesha my.numberaddition.NumberAdditionUI .

Injini ya Kuchakata Tukio

Mafunzo haya yaliangalia kujibu tukio rahisi la kubofya kitufe. Kuna matukio mengi ambayo programu inaweza kujibu. Katika IDE, unaweza kuona orodha ya matukio yanayopatikana ambayo yanaweza kuchakatwa na vipengele vya GUI kama ifuatavyo:

  1. Rudi kwenye faili ya NumberAdditionUI.java katika kihariri. Bofya kichupo cha "Design" ili kuona muundo wa GUI katika GUI Builder.
  2. Bofya kulia kipengele chochote cha GUI na uchague "Matukio" kutoka kwenye menyu inayoonekana. Sasa unaweza kuchunguza yaliyomo kwenye menyu bila kuchagua vipengee vyovyote.
  3. Vinginevyo, unaweza kuchagua "Mali" kutoka kwenye menyu ya "Dirisha". Katika dirisha la Sifa, bofya kichupo cha Matukio. Kichupo cha "Matukio" hukuruhusu kutazama na kubadilisha vidhibiti vya tukio vinavyohusishwa na sasa kipengele amilifu kiolesura cha picha.
  4. Programu inaweza pia kujibu mibofyo mibofyo, mibofyo moja, mara mbili au tatu, miondoko ya kielekezi cha kipanya, kubadilisha ukubwa wa dirisha na miondoko ya umakini wa ingizo. Menyu ya "Matukio" hukuruhusu kuunda kidhibiti cha matukio kiotomatiki kwa matukio haya yote. Ya kawaida zaidi ya haya ni tukio la "Kitendo". (Kwa kupata Taarifa za ziada tazama Mafunzo ya Matukio ya Sun Java kwa ushauri wa vitendo juu ya kushughulikia tukio.)

Je! matukio huchakatwa vipi? Wakati wowote unapochagua tukio kutoka kwa menyu ya tukio, IDE huunda kiotomatiki kile kinachoitwa msikilizaji wa tukio na kukihusisha na kijenzi cha msanidi. Ili kupata maelezo zaidi kuhusu uchakataji wa tukio, fuata hatua hizi:

  1. Rudi kwenye faili ya NumberAdditionUI.java katika kihariri. Bofya kichupo cha "Chanzo" ili kutazama msimbo wa chanzo kiolesura cha picha.
  2. Sogeza chini ili kuona mbinu zilizotekelezwa za jButton1ActionPerformed() , jButton2ActionPerformed() , na jButton3ActionPerformed(). Njia hizi huitwa washughulikiaji wa hafla.
  3. Sasa nenda kwa initComponents() njia. Ikiwa njia hii haipo, pata mstari wa Msimbo unaozalishwa na ubofye ishara + karibu na mstari huo ili kuonyesha njia iliyofichwa ya initComponents().
  4. Angalia kizuizi cha bluu kinachozunguka njia ya initComponents(). Msimbo huu ulitolewa kiotomatiki IDE na haiwezi kubadilishwa na mtumiaji.
  5. Sasa angalia initComponents() njia yenyewe. Miongoni mwa mambo mengine, ina msimbo unaoanzisha vipengele vya GUI na kuziweka kwenye fomu. Msimbo huu huzalishwa na kusasishwa kiotomatiki unapoweka na kubadilisha vipengele katika hali ya muundo.
  6. Katika njia ya initComponents(), pata kijisehemu kifuatacho: jButton3.setText("Toka"); jButton3.addActionListener(mpya java.awt.event.ActionListener() ( public void actionPerformed(java.awt.event.ActionEvent evt) ( jButton3ActionPerformed(evt); ) ));

    Katika hatua hii kwa kipengele cha GUI, in kwa kesi hii kwa jButton3, kitu cha msikilizaji wa tukio la "ActionListener" kinaongezwa. Kiolesura cha "ActionListener" kina mbinu ya "actionPerformed" ya kitu cha "ActionEvent", ambayo inatekelezwa na simu rahisi Kidhibiti cha tukio cha jButton3ActionPerformed. Kitufe hiki sasa kinajibu matukio ya vitendo. Kila wakati kitufe kinapobofya, "ActionEvent" inatolewa na kupitishwa kwa mbinu ya "actionPerformed" ya kiolesura cha msikilizaji wa tukio, ambayo hutekeleza msimbo ambao msanidi alitoa kwa tukio hilo katika kidhibiti cha tukio.

  7. Kadi ya Kujifunza ya Programu za Java GUI


MAKALA INAYOHUSIANA