Програмування на графічний інтерфейс. Створення графічного інтерфейсу засобами Qt

Доброго вам дня! У цьому уроці ми створимо Ваш перший додаток з графічним інтерфейсом в MS Visual Studio. Це буде свого роду Hello World для графічних додатків. Скажу одразу, що використання Windows Forms — не єдиний спосіб створення графічних програм (додатки з графічним інтерфейсом користувача) для C# програмістів, але почати вивчення краще саме з цього. Отже, запускаємо Visual Studio.

Запустили? Тоді до діла! Йдемо в головне меню і вибираємо пункт "Файл - Створити - Проект", як показано на малюнку нижче.

У вікні:

  • у лівій частині вибираємо "Шаблони - Visual C # - Windows";
  • в основній області вибираємо елемент "Додаток Windows Forms";
  • у нижній частині вікна вводимо ім'я проекту та вказуємо його розташування на диску.

Загалом, як показано на малюнку нижче.

Вказали, що потрібно? Тоді натискайте кнопку «OK». Тепер ви повинні побачити приблизно наступне (основні області виділені прямокутниками):

На малюнку вище, я позначив основні області: область дизайнера (ліворуч вгорі), область оглядача рішень (праворуч вгорі) та область властивостей (праворуч внизу). З цими областями, ми працюватимемо найчастіше.

В області дизайнера зараз розташовується порожня «форма», це так зване вікно, в даному випадку, головне вікно нашої програми. В області властивостей, відображаються властивості виділеного в дизайнері елемента, в даному випадку, нашої форми, а область оглядача рішень, містить файли проекту, у тому числі, що відносяться і до форм (вікнів) програми. А тепер, давайте трохи змінимо нашу форму, і запустимо цей перший додаток.

Для цього виділимо в дизайнері форму (для цього можна просто клікнути лівою кнопкою миші за формою) і перейдемо в блок властивостей, в якому знайдемо рядок «Text» (слово текст, шукаємо в лівому стовпці), як показано на малюнку нижче.

Властивість «Text» основної форми програми

Зверніть увагу, у лівому стовпці вказано ім'я (назва властивості), а правому — його значення.

В даному випадку, ми маємо справу з текстовою властивістю, і його значення, що відображається в заголовку вікна, так що, давайте тепер вкажемо там щось своє, наприклад, щось на зразок: «Головне вікно», як показано на малюнку нижче:

Тепер можна зібрати проект і запустити. Для цього йдемо в головне меню та вибираємо пункт «Складання — Зібрати рішення». А потім запускаємо програму, для цього вибираємо пункт «Налагодження - Запуск без налагодження» у головному меню. В результаті Ви повинні побачити наступне вікно.

У наступному уроці ми розглянемо просту роботуз дизайнером форм, і налаштування елементів графічного інтерфейсу, а на цей урок добіг кінця, ми створили перший графічний додаток, зібрали та запустили його.

Всім доброго дня. У своїх минулих уроках я розповідав про створення консольних програм у середовищі Borland C++ Builder. Починаючи з цього уроку, ми вивчатимемо C++ на прикладі графічних додатків. Хтось хоче навчитися створювати консолки. Може прочитати книгу "Мистецтво створення консольних програм на C++". Перший наш додаток буде програма, яка виводить випадкове число. Відкриваємо борландію, тільки не створюємо консольну програму. Після запуску на екрані висвітиться форма:

Зверху буде панель інструментів:

Праворуч Інспектор Об'єктів та Список Форм:

Компоненти (на відміну від бейсика) вже поділені на вкладки. За назвою не важко здогадатися, компоненти якого типу розміщені на вкладці. Відкрийте вкладку standart та розмістіть компоненти на формі як у мене:

На кнопці буде напис Button1. Її треба змінити. У нижньому лівому вікні борляндії наведено властивості компомнентів їх треба змінити на наші:

У кнопки Caption (Напис) міняємо на Сгенерувати

У мітки Label1 властивість Caption змінюємо на Число

В Edit1 властивість Text (текст у самому їсте) просто зітремо.

Після цих маніпуляцій форма буде схожа на мою:

З візуальним стилем закінчили, до речі, більшість властивостей у борлядії схожа на бейсик або дельфі. Поекспериментуйте з ними.

Тепер поговоримо про події. У кожного компонента є події, в них розміщується код, який буде виконаний при досягненні певних умов. Наприклад, у кнопки код у події Click буде виконаний коли ми на неї натиснемо і т.д.

Сьогодні будемо користуватися лише подією Click. Тиснемо двічі на кнопку і подаємо у вікно коду:

Автоматично утворилася подія Click для кнопки. Код як і консольний додаток розміщується між фігурними дужками. Пишемо код:

Void __fastcall TForm1::Button1Click(TObject *Sender) ( double aaa; //Сюди помістимо число сегенероване процесором String count; //Запишемо це ж число, але приведене до рядкового вигляду randomize; //Це потрібно щоб числа не повторювалися aaa=random (34)*43646; //Генеруємо будь-яке число count=FloatToStr (aaa); //Перекладаємо число в рядок за допомогою функції FloatToString Edit1->Text=count; //Виводимо в текстове вікно рядкову змінну )

Алгоритм простий, ми оголошуємо змінну зберігання в ній дробового числа, і змінну числа в рядковому вигляді. Справа в тому, що відразу згенероване чилсо не можна вивести в текстбокс (буде помилка Очікувався текст, а отримано число), тому за допомогою функції FloatToStr ми переводимо число в рядок і виводимо її в текстове вікно. Для виводу звертаємось (за допомогою знака -> (аналогічно точці в vb)) до властивості тексту Edit1 і виводимо туди текст. Ось поки що все.

До речі, питання на засипку: хто розмножується швидше комп'ютерні віруси, китайці, чи кролики?


Коментарі ()

Vitay

артемка

"randomize; //Це потрібно, щоб числа не повторювалися." У мене все одно повторюються. що робити?

Андрій

Є 2 варіанти 1-використовувати "randomize();" або у рядку 6 ускладнити функцію напр. додавати ще й число секунд

Андрій

"секунд" або результат складання двох псевдовипадкових чисел ділене на секунди - чим більше факторів тим більше непередбачуване виходить число

артемка Олексій(alex13sh)

randomize
це щоб числа не повторювалися при включенні програми
ну тобто. включив прогу тиснеш кнопку кілька разів
1)5
2)47
3)86
це я цілими числами
ну і якщо вимкнеш прогу і по-новому включиш при серійному натисканні кнопки буде теж самі числа з тією ж послідовністю
це без randomize, а знім такого не буде

А те, що повторюються таким чином
1)3
2)69
3)1
4)3
5)8
6)1
ЦЕ НЕ ВІДНОСИТЬСЯ До randomize
щоб такого уникнути Андрій уже відповів))

Begzod

у мене на комп'ютері visual c++.net. Не можу знайти підручники, вихідники по ньому. Допоможіть ПЖС.

Ali05

Бачив у книгарні підручник з Visual C++.Net "Микита Культин Основи програмування в Microsoft Visual C++ 2010", там показано, як створювати графічні програмипід Windows (WinForms).

Кулхацкер Нінтендо

цікаво, в чому ж полягає його "поганість"?

Кулхацкер

Без вміння нормально викладати матеріал і привчанні вас, панів, до поганого стилю програмування, а-ля імена змінних/функцій транслітом.

Edward Кулхацкер

Міністерство освіти і науки Російської Федерації

Федеральна державна бюджетна освітня установа

вищої професійної освіти

«УФІМСЬКИЙ ДЕРЖАВНИЙ НАФТОВИЙ

ТЕХНІЧНИЙ УНІВЕРСИТЕТ"

Кафедра обчислювальної техніки та інженерної кібернетики

Створення програми з графічним інтерфейсом користувача серед microsoft visual studio 2010

Навчально-методичний посібник

для проведення лабораторних та практичних занять

зі студентами напряму

230100 (09.03.01) «Інформатика та обчислювальна техніка»

У навчально-методичному посібнику наведено теоретичні відомості, завдання для практичних та лабораторних робіт курсу «Програмування».

Посібник адресовано викладачам дисципліни, а також студентам напряму: 230100 «Інформатика та обчислювальна техніка».

Укладачі: Габдулліна А.А., ст. викладач каф. ВПС

Дружинська Є.В., ст. викладач каф. ВПС

Рецензент: Філіппов В.М., к.т.н., доцент каф. ВПС.

1. Теоретичні відомості 4

1.1. Основні поняття 4

1.2. Знайомство із програмою Windows Form у Microsoft Visual Studio 2010 4

1.3. Елемент керування Form 7

1.5. Функція MessageBox 9

1.6. Елемент керування TextBox 10

2. Практичне завдання. Знайомство з програмою Windows Form у Microsoft Visual Studio 2010 12

2.1. Структура оцінювання виконаної роботи 12

2.2. Порядок виконання практичної роботи 12

3. Лабораторна робота. Розробка програм у середовищі Microsoft Visual Studio 2010 16

3.1. Порядок виконання лабораторної роботи 16

3.2. Завдання 1. Табулювання функції та обчислення її значень у зазначеному інтервалі із заданим кроком 16

3.3. Індивідуальні завдання 19

3.4. Завдання 2. Обробка двовимірних масивів 21

3.5. Індивідуальні завдання 27

  1. Теоретичні відомості

  1. 1.1. Основні поняття

Автоматизація інформаційних процесів нині представляється, насамперед, розробкою програмного додатка з графічним інтерфейсом користувача (GUI), управляючого потоками даних.

Графічний інтерфейс користувача (Graphical User Interface, GUI) це система засобів для взаємодії користувача з пристроєм, заснована на представленні всіх доступних користувачеві системних об'єктів та функцій у вигляді графічних компонентів екрана (вікон, кнопок, смуг прокручування тощо).

Найчастіше елементи інтерфейсу в GUI реалізовані на основі метафор та відображають їх призначення та властивості, що полегшує розуміння та освоєння програм непідготовленими користувачами. Таким чином, робота користувача здійснюється з екранними формами, що містять об'єкти управління та панелі інструментів із кнопками дій для обробки.

Стандартний графічний інтерфейс користувача повинен відповідати низці вимог:

Підтримувати інформаційну технологію роботи користувача із програмним продуктом;

Орієнтуватися на кінцевого користувача, який спілкується із програмою на зовнішньому рівні взаємодії;

Задовольняти принципу «шості», як у одну лінійку меню включають трохи більше 6 понять, кожне у тому числі містить трохи більше 6 опцій;

    зберігати стандартизоване призначення графічних об'єктів і, по можливості, їхнє розташування на екрані.

В об'єктно-орієнтованому програмуванні ми маємо справу з класами та об'єктами. Об'єкти – це складові типи даних: вони об'єднують кілька значень у єдиний модуль і дозволяють нам записувати та зберігати ці значення на ім'я. Іншими словами, об'єкт – це невпорядкована колекція властивостей, кожна з яких має ім'я та значення. Іменовані значення, що містяться в об'єкті, можуть бути елементарними типами, наприклад числами або рядками, так і іншими об'єктами.

Під час створення не консольних додатків, основним поняттям є Форма.

Форма – це контейнер розміщувати елементів управління середовища розробки.

Властивості – можливість отримання доступу до інформації, що зберігається у цьому елементі.

Методами називають набір дій, які може здійснювати об'єкт.

Подія – дія, розпізнаване об'єктом (наприклад, клацання мишею, натискання клавіші), якого можна запрограмувати відгук, тобто. реакцію об'єкта на подію.

Останнє оновлення: 26.05.2019

Xamarin.Forms візуальний інтерфейс складається зі сторінок. Сторінка є об'єктом класу Page , вона займає весь простір екрану. Тобто те, що ми бачимо на екрані мобільного пристрою- Це сторінка. Програма може мати одну або кілька сторінок.

Сторінка в якості вмісту приймає один із контейнерів компонування, в який у свою чергу розміщуються стандартні візуальні елементи типу кнопок та текстових полів, а також інші елементи компонування.

Візьмемо створений у колишній темі проект HelloApp (або створимо новий). За замовчуванням весь інтерфейс створюється в класі App, який міститься у файлі App.xaml.cs і який представляє поточну програму:

Його код за замовчуванням:

Using System; using Xamarin.Forms; using Xamarin.Forms.Xaml; namespace HelloApp ( public partial class App: Application ( public App() ( InitializeComponent(); MainPage = new MainPage(); ) protected override void OnStart() ( // Handle when your app starts ) protected override void OnSleep() ( / / Handle when your app sleeps ) protected override void OnResume() ( // Handle when your app resumes ) ) )

Робота класу App починається з конструктора, де спочатку викликається метод InitializeComponent(), який виконує ініціалізацію об'єкта, а потім встановлюється якість MainPage. Через цю властивість клас App встановлює головну сторінкупрограми. У цьому випадку вона визначається класом HelloApp.MainPage, тобто тим класом, який визначено у файлах MainPage.xaml та MainPage.xaml.cs.

Але цей шлях не єдиний. Xamarin.Forms дозволяє створювати візуальний інтерфейс як за допомогою C# коду, так і декларативним шляхом за допомогою мови xaml, аналогічно html, або комбінуючи ці підходи.

Створення інтерфейсу із коду C#

Додамо в проект HelloApp звичайний клас мовою C#, яку назвемо StartPage.

І визначимо у цьому класі такий вміст:

Using Xamarin.Forms; namespace HelloApp ( class StartPage: ContentPage ( public StartPage() ( Label header = new Label() ( Text = "Привіт з Xamarin Forms" ); this.Content = header; ) ) )

Цей клас представляє сторінку, тому успадковується від класу ContentPage. У конструкторі створюється мітка з текстом, яка задається як вміст сторінки (this.Content = header).

Щоб позначити MainPage як стартової сторінки, змінимо клас App:

Using Xamarin.Forms; namespace HelloApp ( public partial class App: Application ( public App() ( InitializeComponent(); MainPage = new StartPage(); ) protected override void OnStart() ( // Handle when your app starts ) protected override void OnSleep() ( / / Handle when your app sleeps ) protected override void OnResume() ( // Handle when your app resumes ) ) )

Тепер властивість MainPage вказує на щойно створену сторінку StartPage.

Також варто відзначити, що Visual Studio є готовий шаблон для додавання нових класів сторінок з найпростішим кодом. Так, щоб додати нову сторінку, потрібно при додаванні нового елемента вибрати шаблон Content Page (C#) :

Цей клас додається до головного проекту рішення (у разі це HelloApp).

Доданий клас сторінки матиме наступний код:

Using System; використовуючи System.Collections.Generic; using System.Linq; використовуючи System.Reflection.Emit; using System.Text; using Xamarin.Forms; namespace HelloApp ( public class Page1: ContentPage ( public Page1() ( Content = New StackLayout ( Children = ( New Label ( Text = " Hello Page " ) ) ) ) ) ) )

Цей клас також успадковуватиметься від базового класу ContentPage і матиме практично ту саму організацію, що й вище створений клас MainPage.

І також у класі програми ми можемо встановити цю сторінку як стартовий:

Using Xamarin.Forms; namespace HelloApp ( public partial class App: Application ( public App() ( InitializeComponent(); MainPage = new Page1(); ) //........... ) )

5

Я зробив багато різних розділів GUI-системи для Nintendo DS, таких як кнопки та текстові поля та прапорці, але мені потрібен спосіб приховати ці класи в одному класі Gui, щоб я міг малювати все на екрані все відразу, і одразу перевірте всі кнопки, щоб перевірити, чи натиснуто будь-які кнопки. Моє питання - як найкраще організувати всі класи (наприклад, кнопки та текстові поля) в один GUI-клас?

Ось один спосіб, яким я думав, але це не здається правильним:

Edit:Я використовую C++.

Class Gui ( public: void update_all(); void draw_all() const; int add_button(Button *button); // Returns button id void remove_button(int button_id); private: Button *buttons; int num_buttons; )

Цей код має кілька проблем, але я просто хотів дати вам уявлення про те, що я хочу.

  • 5 відповідей
  • Сортування:

    Активність

2

Це питання дуже схоже на те, що я збирався публікувати, тільки моє призначене для програмування Sony PSP.

Я якийсь час щось шукав, я консультувався з деякими книгами та VTMs, і досі це є приблизна ідея простих систем ui.

Class uiElement() ( ... virtual void Update() = 0; virtual void Draw() = 0; ... ) class uiButton() public: uiElement ( ... virtual void Update(); virtual void Draw() ; ... ) class uiTextbox() public: uiElement ( ... virtual void Update(); virtual void Draw(); ... ) ... // Other ui Elements class uiWindow() ( ... void Update (); void Draw(); void AddElement(uiElement *Element); void RemoveElement(uiElement *Element); std::list Elements; ... ) void uiWindow::Update() ( ... for (list ::iterator it = Elements.begin(); it! = Elements.end(); it++) it->Update(); ... ) void uiWindow::Draw() ( ... for (list ::iterator it = Elements.begin(); it! = Elements.end(); it++) it->Draw(); ... )

princple є створення вікна і attact елементів інтерфейсу користувачадо нього, і викликати відмальовування та оновлення методи з відповідних основних функцій.

У мене поки що нічого не працює, тому що у мене проблеми з кодом малювання. З різними API-інтерфейсами на ПК та PSP я переглядаю код оболонки для OpenGL та psp gu.

Надіюсь це допоможе.

0

Одна корисна стратегія, яку слід пам'ятати, може бути composite pattern . На низькому рівні він може дозволити вам легше обробляти всі об'єкти GUI (та колекції об'єктів) після їх створення. Але я не знаю, що пов'язано з дизайном графічного інтерфейсу GUI, тому одне місце, щоб знайти спільне натхнення, це вихідний код існуючого проекту. WxWidgets – це крос-платформний графічний інтерфейс з доступним вихідним кодом. Удачі з вашим проектом!

0

3

Для тих, хто зацікавлений, ось мій з відкритим вихідним кодом, BSD-ліцензовані GUI інструментарій для DS:

Відповідь на предмет2k досить хороша, але я б серйозно рекомендував мати код, що містить елементи дочірнього інтерфейсу в базовому класі uiElement. Це зразок, за яким я стежив у Вупсі.

Якщо ви непідтримайте це в базовому класі, ви зіткнетеся з серйозними проблемами при спробі реалізувати щось складніше, ніж текстове поле та кнопку. Наприклад:

  • Табличні панелі можна змоделювати як кілька кнопок, згрупованих в єдиний батьківський елемент інтерфейсу користувача, який забезпечує взаємну винятковість вибору;
  • Групи радіостанцій (з часом);
  • Смуги прокручування можуть бути представлені як елемент слайдера/жолоба та кнопки вгору/вниз;
  • Списки прокручування можуть бути представлені у вигляді контейнера і декількох елементів інтерфейсу користувача.

Крім того, варто пам'ятати, що DS має процесор з частотою 66 МГц і 4 МБ ОЗУ, який використовується як для зберігання вашої програми, так і для її виконання (DS-диски завантажуються в ОЗУ до їх запуску). Ви дійсно повинні розглядати його як вбудовану систему, що означає, що STL немає. Я видалив STL з Woopsi та зумів зберегти 0.5MB. Не так багато за настільними стандартами, але це 1/8 загальної доступної пам'яті DS, споживаної STL-сміттям.

Я докладно весь процес написання інтерфейсу користувача на моєму блозі:

Вона включає в себе опис двох алгоритмів я придумав для перемальовки екрану, який хитра частина створення графічного інтерфейсу (одне просто розбиває прямокутники вгору і запам'ятовує видимі області, а інше використовує дерева BSP, що набагато ефективніше та простіше для розуміння), поради щодо оптимізації тощо д.



Завантаження...
Top