Како користити мени у Нетбеанс-у да дизајнирате Свинг ГУИ

Да ли желите да научите како да користите меније у NetBeans- у за дизајнирање Swing GUI-ја? Можете додати меније својим Java обрасцима, као што су File (Датотека), Edit (Уреди), View (Приказ) итд. Сваки мени има ставке менија, а оне могу, заузврат, имати подменије. Овде ћемо вам показати како да конфигуришете меније у NetBeans-у. Останите са нама.

Подешавања менија у Нетбеанс-у

За почетак, показаћемо вам како да конфигуришете мени у Нетбеанс-у.

Можда ће вас занимати и читање о: Грешка откривена у бази података Windows Update

• корак КСНУМКС: Враћа се на приказ дизајна. У палети НетБеанс пронађите ставку на траци менија:

• корак КСНУМКС: Превуците једну на врх обрасца. Када отпустите дугме миша, имаћете подразумевану траку менија Филе и Едит:

Међутим, нема подразумевано додатих ставки менија. Да бисте додали своје, морате да урадите следеће:

• корак КСНУМКС- Кликните на ставку менија Архивада бисте га изабрали. Са изабраном ставком менија Датотека, кликните десним тастером миша. Појавиће се нови мени. Изаберите Додај из палете > Ставка менија:

• корак КСНУМКС: Ставка менија ће бити додата у ваш мени Датотека:

Оно што ћете урадити је додати ставке менија да бисте отворили и сачували датотеку.

• корак КСНУМКС: Двапут кликните на подразумевани текст јМенуИтем1. Затим ће бити истакнуто, тако да можете писати на њему:

• корак КСНУМКС: Пише Отворити, а затим притисните тастер ЕНТЕР на тастатури:

• корак КСНУМКС: Успут додајте још једну ставку менија. Овај пут, напиши Сачувај као ставка менија:

НАПОМЕНА : Као што видите горе, можете додати пречице ставкама менија.

• корак КСНУМКС: Кликните на отворену ставку менија, а затим на пречицу за њу:

НАПОМЕНА : Када је пречица изабрана, погледајте прозор са својствима:

• корак КСНУМКС: Потражите елемент Гуша и кликните на мало дугме десно од реда. Појављује се оквир за дијалог:

У овом дијалошком оквиру можете подесити које пречице желите за ставку менија. Отворена пречица је обично CTRL + O. Унесите O у поље и појавиће се Shift + O.

• корак КСНУМКС: Опозовите избор ставке смена и бренд Цтрл уместо тога:

• корак КСНУМКС: Кликните прихватити а пречица ће бити додата вашој ставци Јава менија:

Интеграција

Да бисте видели да ли све ово функционише, поново кликните на ставку менија Отвори да бисте је истакли.

• корак КСНУМКС: Сада кликните десним кликом. У менију који се појави изаберите Догађаји > Радња > Радња предузета. Ово ће створити стуб за ставку менија. Унесите следеће за код:

јавак.свинг.ЈОптионПане.сховМессагеДиалог(ФормОбјецтс.тхис, "Отвори");

Ово је само оквир за поруке.

• корак КСНУМКС: Покрените свој програм и тестирајте га. Кликните Датотека> Отвории требало би да видите да се појављује оквир за поруку.
• корак КСНУМКС: Кликните прихватити да се ослободим тога. Сада испробајте своју пречицу.
• корак КСНУМКС: Држите притиснут тастер Цтрл на тастатури. Држите га и притисните слово О. Поново би требало да се појави мени.

Зауставите свој програм и вратите се на свој стуб. Коментирајте оквир за поруку. Оно што ћете урадити је написати код да бисте приказали оквир за дијалог. Корисник затим може изабрати датотеку за отварање. Урадићемо то у наредном делу.

Дизајн Свинг ГУИ са менијем у Нетбеанс-у

Овај одељак пружа водич кроз процес креирања графичког корисничког интерфејса (GUI) за апликацију под називом ContactEditor коришћењем NetBeans IDE GUI Builder-а.

У том процесу ћете дизајнирати графички кориснички интерфејс који ће вам омогућити да видите и уредите контакт информације људи укључених у базу података запослених. Такође ћете научити како да:

• Користите ГУИ буилдер интерфејс
• Направите ГУИ контејнер, додајте
• Промените величину и поравнајте компоненте
• Подесите сидрење компоненти
• Подесите аутоматско мењање величине компоненти
• Уредите својства компоненте

Све ово можете да урадите преко менија у Нетбеанс-у

Почетак рада са дизајном менија у Нетбеанс-у

ИДЕ-ов ГУИ Буилдер вам омогућава да креирате ГУИ-ове професионалног изгледа, вођене менијима у Нетбеанс-у без дубинског знања администратора дизајна. Можете дизајнирати своје форме једноставним постављањем компоненти где год желите.

Креирање пројекта кроз мени у Нетбеанс-у

Пошто се сав развој Јаве у IDE-у одвија унутар пројеката, прво морамо креирати нови ContactEditor пројекат унутар којег ћемо чувати изворни код и остале датотеке пројекта.

IDE пројекат је група Java изворних датотека плус повезани метаподаци, укључујући датотеке својстава специфичне за пројекат, Ant скрипту за изградњу која контролише подешавања за изградњу и покретање и projectxml датотеку која мапира Ant циљеве на IDE команде .

Док се Јава апликације често састоје од више ИДЕ пројеката, за потребе овог водича, креираћемо једноставну апликацију која се у потпуности чува у једном пројекту преко менија у Нетбеанс-у.

Да бисте креирали нови пројекат апликације ЦонтацтЕдитор:

• корак КСНУМКС: Изаберите Датотека > Нови пројекат. Алтернативно, можете кликнути на икону Нови пројекат на ИДЕ траци са алаткама.
• корак КСНУМКС: На панелу Категорије, изаберите Јава чвор и на панелу Пројекти изаберите Јава апликацију. Кликните следећи.
• корак КСНУМКС: Ентер ЦонтацтЕдитор у пољу Назив пројекта и наведите локацију пројекта.
• корак КСНУМКС: Оставите поље за потврду неозначено Користите наменску фасциклу за чување библиотека.
• корак КСНУМКС: Потврдите избор у пољу за потврду Поставите као главни пројекат је изабран и деактивира поље Креирајте главну класу.
• корак КСНУМКС: Кликните завршити.

IDE креира фасциклу ContactEditor на вашем систему на одређеној локацији. Ова фасцикла садржи све датотеке повезане са пројектом, укључујући ваш Ant скрипт, фасцикле за чување изворних и тест датотека и фасциклу за метаподатке специфичне за пројекат. Да бисте видели структуру пројекта, користите прозор Датотеке у IDE-у.

Креирајте ЈФраме контејнер преко менија у Нетбеанс-у

Након креирања нове апликације, можда сте приметили да фасцикла Изворни пакети у прозору Пројекти садржи празан чвор под називом <подразумевани пакет>.

Да бисмо наставили са изградњом нашег интерфејса, морамо да креирамо Јава контејнер у који ћемо поставити остале потребне компоненте ГУИ.

У овом кораку ћемо креирати контејнер користећи ЈФраме компоненту и ставити контејнер у нови пакет.

Да бисте додали контејнер ЈФраме преко менија у Нетбеанс-у, морате да урадите следеће:

• корак КСНУМКС: У прозору Пројекти, кликните десним тастером миша на ЦонтацтЕдитор чвор и изаберите Ново > ЈФраме образац. Алтернативно, можете пронаћи образац ЈФраме избор Ново > Друго > Свинг ГУИ обрасци > ЈФраме образац.
• корак КСНУМКС: Ентер ЦонтацтЕдиторУИкао назив класе.
• корак КСНУМКС: Ентер мој . цонтацтедиторкао пакет.
• корак КСНУМКС: Кликните завршити.

IDE креира образац ContactEditorUI и класу ContactEditorUI унутар апликације ContactEditorUI.java и отвара образац ContactEditorUI у GUI Builder-у . Имајте на уму да пакет my.contacteditor замењује подразумевани пакет.

Упознајте се са ГУИ Буилдер-ом и менијем у Нетбеанс-у

Сада када смо поставили нови пројекат преко менија у Нетбеанс-у за нашу апликацију, одвојимо минут да се упознамо са интерфејсом ГУИ Буилдер-а.

Када смо додали JFrame контејнер , IDE је отворио новокреирани ContactEditorUI образац у картици Editor са траком са алаткама која садржи неколико дугмади, као што је приказано на горњој илустрацији.

Образац ContactEditor се отворио у приказу Design програма GUI Builder , а три додатна прозора су се аутоматски појавила дуж ивица IDE-а, омогућавајући вам навигацију, организовање и уређивање GUI образаца док их креирате.

Различити прозори ГУИ Буилдер-а у оквиру менија у Нетбеанс-у укључују:

Хајде да погледамо различите прозоре ГУИ Буилдер-а у оквиру менија у Нетбеанс-у укључују:

Област дизајна:

Главни прозор алатке GUI Builder за креирање и уређивање Java GUI образаца. Дугме Извор на траци са алаткама вам омогућава да видите изворни код класе, дугме Распоред вам омогућава да видите графички приказ GUI компоненти, а дугме Историја вам омогућава да приступите локалној историји промена у датотеци.

Додатна дугмад на траци са алаткама пружају лак приступ уобичајеним командама, као што су избор између режима селекције и повезивања , поравнавање компоненти , конфигурисање аутоматске промене величине компоненти и преглед образаца.

Прегледач

Пружа приказ свих компоненти, и визуелних и не-визуелних, у вашој апликацији као хијерархија стабла. Прегледач такође пружа визуелне информације о томе која компонента стабла се тренутно уређује у ГУИ Буилдер-у и омогућава вам да организујете компоненте у доступним панелима.

Палетте.

Прилагодљива листа доступних компоненти која садржи картице за ЈФЦ/Свинг, АВТ и ЈаваБеанс компоненте, као и менаџере распореда. Поред тога, можете креирати, брисати и преуређивати категорије приказане на палети помоћу алатке за прилагођавање.

Прозор са својствима

Приказује својства тренутно изабране компоненте у ГУИ Буилдер-у, прозору Навигатора, прозору Пројекти или прозору Датотеке.

Ако кликнете на дугме Извор , IDE приказује изворни код апликације у Јави у Уређивачу са деловима кода које аутоматски генерише GUI Builder , означеним сивим областима (које постају плаве када су изабране), названим Заштићени блокови.

Заштићени блокови су заштићене области које се не могу уређивати у приказу изворног кода . Можете уређивати само код који се појављује у белим областима уређивача када сте у приказу изворног кода.

Ако је потребно да направите измене у коду унутар заштићеног блока, кликом на дугме Дизајн враћате IDE Editor у GUI Builder, где можете да извршите потребна прилагођавања обрасца. Када сачувате измене, IDE ажурира изворни код датотеке.

За напредне програмере, доступан је Менаџер палете који вам омогућава да додате прилагођене компоненте из JAR датотека, библиотека или других пројеката у палету. Да бисте додали прилагођене компоненте путем Менаџера палете , изаберите Алати > Палета > Swing/AWT компоненте.

Прво на менију у Нетбеанс-у

Сада када сте упознати са интерфејсом алатке за креирање графичког корисничког интерфејса, време је да почнете са развојем корисничког интерфејса за нашу апликацију ContactEditor.

У овом одељку ћемо погледати како да користимо палету ИДЕ-а за додавање различитих компоненти ГУИ-ја које су нам потребне у наш образац.

Захваљујући бесплатној парадигми ИДЕ-а, више нећете морати да се борите са администраторима распореда да контролишете величину и положај компоненти унутар њихових контејнера.

Све што треба да урадите је да превучете и отпустите компоненте које су вам потребне на ГУИ образац као што је приказано на илустрацијама испод.

Додавање компоненти: основе

Иако ИДЕ-ов ГУИ Буилдер поједностављује процес креирања Јава ГУИ-а, често је корисно скицирати како желите да изгледа ваш интерфејс пре него што почнете да га дизајнирате.

Хајде сада да погледамо илустрације и приметимо „повуци и испусти“ понашање ИДЕ-а када ово постигнемо.

Да бисте додали ЈПанел из менија у Нетбеанс-у:

1. У прозору Палета изаберите компоненту Панел из категорије Свинг Цонтаинерс тако што ћете кликнути и отпустити дугме миша.
2. Помера курсор у горњи леви угао обрасца у ГУИ Буилдер-у. Када је компонента постављена близу горње и леве ивице контејнера, појављују се смернице хоризонталног и вертикалног поравнања које указују на жељене маргине. Кликните на образац да бисте поставили ЈПанел на ову локацију.

Компонента JPanel се појављује у форми ContactEditorUI истакнута наранџастом бојом, што указује да је изабрана. Након отпуштања тастера миша, појављују се мали индикатори који приказују односе сидра компоненте, а одговарајући JPanel чвор се приказује у прозору Navigator, као што је приказано на следећој илустрацији.

Затим, морамо да променимо величину ЈПанела да бисмо направили места за компоненте које ћемо ставити у њега мало касније, али хајде да одвојимо минут да прво укажемо на још једну од карактеристика приказа ГУИ Буилдер-а.

Да бисмо то урадили, морамо да поништимо избор ЈПанел-а који смо управо додали. Пошто још нисмо додали ивицу наслова, панел нестаје.

Међутим, приметите да када задржите показивач изнад ЈПанел-а, његове границе се мењају у светло сиве тако да се његов положај може јасно видети. Само треба да кликнете било где унутар компоненте да бисте је поново изабрали и да би се поново појавиле ручке за промену величине и индикатори сидра.

Да бисте променили величину ЈПанел-а у менију у Нетбеанс-у:

• корак КСНУМКС: Изаберите ЈПанел који сте управо додали. Мали драјвери квадратне величине се поново појављују око периметра компоненте.
• корак КСНУМКС: Кликните и држите ручицу за промену величине на десној ивици ЈПанела и превуците док се испрекидана линија поравнања не појави близу ивице обрасца.
• корак КСНУМКС: Отпустите ручицу за промену величине да бисте променили величину компоненте.

Компонента ЈПанел се протеже између леве и десне маргине контејнера у складу са препорученим померањем, као што је приказано на следећој илустрацији.

Понављање процеса

Сада када смо додали панел за чување информација о имену корисничког интерфејса, морамо да поновимо процес да бисмо додали још један директно испод првог за информације о имејлу.

Позивајући се на следеће илустрације, поновите два претходна задатка, обраћајући пажњу на позиционирање које предлаже GUI Builder.

Обратите пажњу да је предложени вертикални размак између два JPanel-а много ужи од размака између ивица. Када додате други JPanel, промените му величину да би попунио преостали вертикални простор форме.

Пошто желимо да визуелно разликујемо функције у горњем и доњем делу нашег ГУИ, морамо да додамо ивицу и наслов сваком ЈПанел-у.

Прво ћемо то постићи помоћу прозора Својства, а затим покушати помоћу искачућег менија.

Да бисте додали ивице наслова у ЈПанелс у менију у Нетбеанс-у:

• корак КСНУМКС: Изаберите горњи ЈПанел у ГУИ Буилдер-у.
• корак КСНУМКС: У прозору својства, кликните на дугме са три тачке (...) поред Гранична имовина.
• корак КСНУМКС: У уреднику ЈПанел Бордерс који се појави, изаберите чвор ТитледБордер на плочи Доступне границе.
• корак КСНУМКС: У панелу Својства испод, унесите име за својство Титле.
• корак КСНУМКС: Кликните на троточку (…) поред својства Фонт, изаберите Негрита за Естило фонт и унесите 12 за величину. Кликните прихватити да изађете из дијалога.
• корак КСНУМКС: Изаберите доњи ЈПанел и поновите кораке од 2 до 5, али овог пута кликните десним тастером миша на ЈПанел и приступите прозору Својства користећи искачући мени. Унесите адресу е-поште за некретнину Наслов.

Ивице са насловом се додају обема компонентама ЈПанел-а.

Додајте појединачне компоненте у образац

Сада морамо да почнемо да додајемо компоненте које ће представљати стварне контакт информације на нашој листи контаката. У овом задатку ћемо додати четири ЈТектФиелдс који ће приказати контакт информације и ЈЛабелс који ће их описати.

Док то постижете, погледајте хоризонталне и вертикалне смернице које приказује ГУИ Буилдер, а које предлажу жељени размак компоненти како је дефинисан изгледом и осећајем вашег оперативног система.

Ово осигурава да се ваш ГУИ аутоматски приказује уважавајући изглед циљног оперативног система током времена извршавања.

Да бисте додали ЈЛабел у образац из менија у Нетбеанс-у:

• корак КСНУМКС: У прозору Палета изаберите компоненту Лабел из категорије Свинг Цонтролс.
• корак КСНУМКС: Померите курсор преко имена ЈПанел које смо раније додали. Када се појаве смернице које показују да је ЈЛабел позициониран у горњем левом углу ЈПанела са малом маргином на горњој и левој ивици, кликните да бисте поставили ознаку.

JLabel се додаје форми, а одговарајући чвор који представља компоненту се додаје прозору Инспектора.

Пре него што наставимо, морамо да уредимо текст приказа ЈЛабел-а који смо управо додали. Иако можете у било ком тренутку да измените приказни текст компоненти, најлакши начин је да то урадите док их додајете.

Да бисте уредили текст приказа ЈЛабел-а:

• корак КСНУМКС: Двапут кликните на ЈЛабел да бисте изабрали њен текст за приказ.
• корак КСНУМКС: Пише Име: и притисните Ентер.

Ново име ЈЛабел је приказано и ширина компоненте је подешена као резултат измене. Сада ћемо додати ЈТектФиелд да бисмо могли да погледамо функцију основног поравнања ГУИ Буилдер-а.

Да бисте додали ЈТектФиелд у образац:

• корак КСНУМКС: У прозору Палета изаберите компоненту Тект Фиелд из категорије Свинг Цонтролс.
• корак КСНУМКС: Помера курсор одмах десно од Фирст Наме:ЈЛабел који смо управо додали. Када се појави хоризонтална вођица која показује да је основна линија ЈТектФиелд-а поравната са линијом ЈЛабел-а и да је простор између две компоненте предложен помоћу вертикалне вођице, кликните да бисте поставили ЈТектФиелд.

ЈТектФиелд шкљоцне на место на обрасцу поравнато са основном линијом ЈЛабел, као што је приказано на следећој илустрацији. Приметите да се ЈЛабел мало померио надоле да би се поравнао са основном линијом највишег текстуалног поља. Као и обично, чвор који представља компоненту се додаје у прозор Навигатора.

Пре него што наставимо, морамо да додамо додатни ЈЛабел и ЈТектФиелд одмах десно од оних које смо управо додали, као што је приказано на следећој илустрацији. Овај пут унесите презиме: као текст за приказ ЈЛабел и оставите текст чувара места ЈТектФиелдс какав је за сада.

Да бисте променили величину ЈТектФиелд-а из менија у Нетбеанс-у:

• корак КСНУМКС: Изаберите ЈТектФиелд које смо управо додали десно од презимена:
• корак КСНУМКС: Превуците ручицу за промену величине са десне ивице ЈТектФиелд-а на десну ивицу приложеног ЈПанела.
• корак КСНУМКС: Када се појаве смернице за вертикално поравнање које сугеришу маргину између текстуалног поља и десне ивице ЈПанела, отпустите дугме миша да бисте променили величину ЈТектФиелд-а.

Десна ивица ЈТектФиелд-а се поставља у поравнање са маргином границе коју препоручује ЈПанел, као што је приказано на следећој илустрацији.

Додајте више компоненти у форму из менија у Нетбеанс-у

Сада ћемо додати ЈЛабелс (Title:) и Надимак (Nadimak:) који описују два ЈТекст поља (JTextFields) која ћемо додати за минут. Превући ћемо и испустити компоненте док држите притиснут тастер Shift да бисмо их брзо додали у образац.

Док ово постигнете, поново приметите да ГУИ Буилдер приказује хоризонталне и вертикалне смернице које предлажу жељени размак компоненти.

Да бисте у образац додали више ЈЛабел-а:

• корак КСНУМКС: У прозору Палета, изаберите компоненту Таг категорије Контроле осцилација кликом и отпуштањем дугмета миша.
• корак КСНУМКС: Помера курсор преко обрасца директно испод Име:ЈЛабел који смо раније додали. Када се појаве смернице да је лева ивица нове ЈЛабел-е поравната са левом ивицом старе ЈЛабел-е и да постоји мала маргина између њих, притисните схифт и кликните да поставите прву ЈЛабел.
• корак КСНУМКС: Док настављате да притискате Тастер Схифт, поставља другу ЈЛабел одмах десно од прве. Обавезно отпустите тастер Схифт пре него што поставите другу ЈЛабел. Ако заборавите да отпустите тастер Схифт пре него што ставите последњи ЈЛабел, једноставно притисните тастер бекство.

ЈЛабелс се додају у образац креирањем другог реда, као што је приказано на следећој илустрацији. Чворови који представљају сваку компоненту додају се у прозор претраживача.

Пре него што наставимо, морамо да изменимо име ЈЛабелс-а како бисмо могли да видимо ефекат поравнања које ћемо поставити касније.

Да бисте уредили ЈЛабелс приказ текста из менија у Нетбеанс-у:

• корак КСНУМКС: Двапут кликните на прву ЈЛабел да бисте изабрали текст за приказ.
• корак КСНУМКС: Пише Наслов: и притисните Ентер.
• корак КСНУМКС: Поновите кораке 1 и 2, улазећи Надимак: за својство другог имена ЈЛабел-а.

Нова ЈЛабел имена су приказана на обрасцу и померају се као резултат њихове уређене ширине, као што је приказано на следећој илустрацији.

Убаците компоненте из менија у Нетбеанс

Често је потребно додати компоненту између компоненти које су већ постављене на образац. Кад год додате компоненту између две постојеће компоненте, ГУИ Буилдер их аутоматски мења да би направио места за нову компоненту.

Да бисмо то демонстрирали, убацићемо ЈТектФиелд између ЈЛабелс које смо раније додали, као што је приказано на следеће две илустрације.

Да бисте уметнули ЈТектФиелд између две ЈЛабеле:

• корак КСНУМКС: У прозору Палета, изаберите компоненту Текстуално поље категорије Контроле осцилација.
• корак КСНУМКС: Померите курсор Наслов:y Надимак: ЈЛабелс у другом реду тако да ЈТектФиелд преклапа оба и да је поравнато са њиховим основним линијама. Ако имате проблема са постављањем новог текстуалног поља, можете да га причврстите на леву линију водича надимак ЈЛабел као што је приказано на првој слици испод.
• корак КСНУМКС: Кликните да поставите ЈТектФиелд између Наслов:y Надимак:

ЈТектФиелд шкљоцне на позицију између две ЈЛабеле. Крајња десна ЈЛабел је померена удесно од ЈТектФиелд-а да би се прилагодила предложеном хоризонталном померању.

Још увек морамо да додамо додатно ЈТектФиелд у образац који ће приказати надимак сваког контакта на десној страни обрасца.

Да бисте додали ЈТектФиелд из менија у Нетбеанс-у:

• корак КСНУМКС: У прозору Палета, изаберите компоненту Текстуално поље из категорије Свинг.
• корак КСНУМКС: Помера курсор удесно од надимакозначите и кликните да бисте поставили поље за текст.

ЈТектФиелд се поставља на позицију поред ЈЛабел-а са његове леве стране.

Да бисте променили величину ЈТектФиелд-а из менија у Нетбеанс-у:

• корак КСНУМКС: Повуците ручке за промену величине Надимак:из ЈТектФиелд ознаке коју сте додали у претходном задатку десно од приложеног ЈПанела.
• корак КСНУМКС: Када се појаве смернице за вертикално поравнање које сугеришу маргину између текстуалног поља и граница ЈПанел-а, отпустите дугме миша да бисте променили величину ЈТектФиелд-а.

Десна ивица ЈТектФиелд-а је поравната са маргином ивице коју препоручује ЈПанел и ГУИ Буилдер закључује одговарајуће понашање промене величине.

• корак КСНУМКС: Притисните Цтрл-С да бисте сачували датотеку.

Мени у Нетбеанс-у иде напред

Усклађивање је један од најосновнијих аспеката креирања ГУИ-ја професионалног изгледа. У претходном одељку, добили смо увид у функције поравнања ИДЕ-а додавањем компоненти ЈЛабел и ЈТектФиелд у наш ЦонтацтЕдиторУИ образац.

Затим ћемо дубље погледати карактеристике поравнања ГУИ Буилдер-а док радимо кроз друге компоненте које су нам потребне за нашу апликацију.

Поравнање компоненти

Кад год додате компоненту обрасцу, ГУИ Буилдер их ефикасно поравнава, о чему сведоче смернице за поравнање које се појављују. Међутим, понекад је потребно и специфицирати различите односе између група компоненти.

Претходно смо додали четири ЈЛабел-а који су нам потребни за наш ЦонтацтЕдитор ГУИ, али их нисмо поравнали. Сада ћемо поравнати две колоне ЈЛабел-а тако да се десне ивице поравнају.

Да бисте поравнали компоненте из менија у Нетбеанс-у:

• корак КСНУМКС: Притисните и држите тастер Цтрл и кликните да бисте изабрали Име: y Наслов: ЈЛабелс на левој страни обрасца.
• корак КСНУМКС: Кликните на дугме Да се ​​построје десно на траци са алаткама. Алтернативно, можете да кликнете десним тастером миша на било коју од њих и изаберете Поравнај > Десно у колони у искачућем менију.
• корак КСНУМКС: Поновите ово и за Презиме: И Надимак:

Положај ЈЛабел-а се мења тако да су десне ивице њиховог текста на екрану поравнате. Односи сидра су ажурирани, што указује да су компоненте груписане.

Пре него што завршимо са ЈТектФиелдс-има које смо раније додали, морамо да се уверимо да су два ЈТектФиелдс-а која смо уметнули између ЈЛабел-а подешена на исправну промену величине.

За разлику од два ЈТектФиелдс-а која растегнемо до десне ивице нашег обрасца, понашање уметнутих компоненти које се може променити није подешено аутоматски.

Да бисте подесили понашање компоненти које може да се промени:

• корак КСНУМКС: Држите притиснут тастер контрола и кликните на две уметнуте компоненте ЈТектФиелд да бисте их изабрали у ГУИ Буилдер-у.
• корак КСНУМКС: Са изабраним ЈТектФиелдс, кликните десним тастером миша на било које од њих и изаберите Аутоматска промена величине > Хоризонтално из искачућег менија.

ЈТектФиелдс су конфигурисана да мењају величину хоризонтално током рада. Смернице за поравнање и индикатори сидра су ажурирани, дајући визуелну повратну информацију о односима компоненти.

Да бисте конфигурисали компоненте исте величине:

• корак КСНУМКС: Држите притиснут тастер контрола и кликните на четири ЈТектФиелдс на обрасцу да бисте их изабрали.
• корак КСНУМКС: Са изабраним ЈТектФиелдс, кликните десним тастером миша на било које од њих и изаберите Сет ел мисмо величина > Иста ширина из искачућег менија.

ЈТектФиелдс су сва постављена на исту ширину и индикатори се додају на горњу ивицу сваког, обезбеђујући визуелну повратну информацију о односима компоненти.

Сада морамо да додамо још један ЈЛабел који ће написати ЈЦомбоБок који ће омогућити корисницима да изаберу формат информација које ће наша ЦонтацтЕдитор апликација приказати.

Да бисте поравнали ЈЛабел са групом компоненти из менија у Нетбеанс-у:

• корак КСНУМКС: У прозору Палета, изаберите компоненту Таг категорије
• корак КСНУМКС: Померите курсор испод Имеy наслов ЈЛабелс на левој страни ЈПанела. Када се појави водич који показује да је десна ивица нове ЈЛабеле поравната са десним ивицама групе компоненти изнад (две ЈЛабеле), кликните да бисте поставили компоненту.

ЈЛабел шкљоцне у десно поравнат положај са колоном ЈЛабелс на врху, као што је приказано на следећој илустрацији. ГУИ Буилдер ажурира статусне линије поравнања које указују на размак компоненте и односе сидра.

Као иу претходним примерима, двапут кликните на ЈЛабел да бисте изабрали његов текст за приказ, а затим Ентер Дисплаи Формат: име за приказ. Приметите да када ЈЛабел шкљоцне на своје место, остале компоненте се померају да би се прилагодиле дужем тексту на екрану.

Поравнање основне линије из менија у Нетбеанс-у

Кад год додате или преместите компоненте које укључују текст (ЈЛабелс, ЈТектФиелдс, итд.), ИДЕ предлаже поравнања која су заснована на основним линијама текста у компонентама. Када смо раније убацили ЈТектФиелд, на пример, његова основна линија се аутоматски поравнала са суседним ЈЛабелс-има.

Сада ћемо додати комбиновани оквир који ће омогућити корисницима да изаберу формат информација које ће наша ЦонтацтЕдитор апликација приказати.

Док додајемо ЈЦомбоБок, поравнаћемо његову основну линију са ЈЛабел текстом. Погледајте поново основне смернице за поравнање које нам изгледа помажу у позиционирању.

Да бисте поравнали основне линије компоненти из менија у Нетбеанс-у:

• корак КСНУМКС: У прозору Палета, изаберите компоненту Пицтуре комбинована категорија Контроле осцилација.
• корак КСНУМКС: Помера курсор одмах десно од ЈЛабел-а који смо управо додали. Када се појави хоризонтална вођица која показује да је основна линија ЈЦомбоБок-а поравната са основном линијом текста у ЈЛабел-у и да је простор између две компоненте предложен вертикалном линијом вођице, кликните да бисте поставили комбиновани оквир.

Компонента шкљоцне у позицију која је поравната са основном линијом текста у ЈЛабел-у са леве стране, као што је приказано на следећој илустрацији. ГУИ Буилдер приказује статусне линије које указују на размак компоненти и односе сидра.

Да бисте променили величину ЈЦомбоБок-а из менија у Нетбеанс-у:

• корак КСНУМКС: Изаберите ЦомбоБок у ГУИ Буилдер.
• корак КСНУМКС: Превуците ручицу за промену величине на десној ивици ЈЦомбоБок-а удесно док се не појаве смернице за поравнање које сугеришу жељени помак између ивица ЈЦомбоБок-а и ЈПанел-а.

Као што је приказано на следећој илустрацији, десна ивица ЈЦомбоБок-а се поставља у поравнање са ЈПанел-овом препорученом маргином границе, а ширина компоненте је аутоматски подешена да мења величину са формом.

• корак КСНУМКС: Притисните Цтрл-С да бисте сачували датотеку.

Уређивање модела компоненти је ван оквира овог упутства, тако да ћемо за сада оставити ЈЦомбоБок листу ставки за чување места каква јесте.

Овде можете прочитати о томе: Како креирати базу података инвентара у програму Access

Преглед онога што смо научили

Добро смо започели изградњу нашег графичког корисничког интерфејса за ContactEditor , али хајде да одвојимо минут да резимирамо шта смо научили док додајемо неке од компоненти које су потребне нашем интерфејсу.

До сада смо се фокусирали на додавање компоненти нашем графичком корисничком интерфејсу ContactEditor- а користећи смернице за поравнање IDE-а које нам помажу у позиционирању.

Међутим, важно је разумети да је још један саставни део постављања компоненти сидрење. Иако још нисмо разговарали о томе, већ сте искористили ову функцију а да тога нисте ни свесни.

Као што је горе поменуто, кад год додате компоненту у образац, ИДЕ предлаже жељено позиционирање циљног изгледа и осећаја са смерницама.

Једном постављене, нове компоненте су такође усидрене за најближу ивицу контејнера или компоненту како би се осигурало да се односи компоненти одржавају током рада. У овом одељку ћемо се фокусирати на обављање ствари на агилнији начин, истовремено указујући на посао који ГУИ буилдер ради иза сцене.