Како софтверски инженери, често работиме на развој на различни видови на апликации – веб апликации кои работат преку прелистувачи (Microsoft Edge, Mozilla Firefox, Google Chrome, итн), десктоп апликации кои се инсталирани на оперативниот систем, конзолни апликации и слично.

На МЕНДО се објавени повеќе предавања за програмскиот јазик C++ - како за почетници, така и за понапредни корисници (вклучувајќи податочни структури, алгоритми и слично). Во ова предавање, ќе се обидеме да претставиме како ова знаење може да се примени за создавање на десктоп апликации кои можат да се користат на оперативниот систем Windows 10, но и други уреди како Xbox One и слично.

Притоа, ќе се обидеме ова предавање да содржи повеќе практични информации, а помалку теорија, со цел истото да е интересно и корисно. Сепак, пред да започнеме со чекорите кои треба да се направат за создавање на една апликација, да претставиме која технологија ќе ја користиме за создавање на истата. Имено, постојат повеќе начини на кои може да се создадат апликации за разни оперативни системи. Најновата технологија (која, засега, функционира само на оперативниот систем Windows 10, или поново) е наречена UWP (Universal Windows Platform). Почнувајќи со Windows 10, терминот “Windows апликација” се однесува на “UWP апликација”. Притоа, тие може да се купуваат и/или инсталираат преку Microsoft Store.

Во продолжение се дадени чекорите кои треба да ги преземете за да ја создадете вашата прва Windows апликација. Имајте предвид дека, тука, користиме нова технологија, па потребно е да работите на оперативниот систем Windows 10.

Инсталација на IDE#

За наша среќа, постои бесплатна Интегрирана Развојна Околина со која што можеме да развиваме и тестираме UWP апликации. Најпрвин, потребно е истата да ја инсталирате на вашиот компјутер. Тоа можете да го направите преку едноставно пребарување на Google или Bing за терминот “visual studio community” и преземање на софтверот од официјалниот веб-сајт. Притоа, потребно е да знаете дека постојат повеќе верзии од софтверскиот пакет “Visual Studio”, па внимавајте да ја преземете бесплатната верзија наречена “Visual Studio Community”.

Многу е важно, при инсталацијата на софтверот, да одберете дека сакате да развивате UWP апликации и Desktop апликации со програмскиот јазик C++, како што е означено на сликата дадена подолу.

По инсталацијата, проверете дека можете да го стартувате софтверот “Visual Studio”. Доколку забележите некакви проблеми (што не би требало да се случи), внесете ја пораката што ја добивте како грешка во некој од пребарувачите Google и Bing, и следите ги чекорите за справување со проблемот.

Создавање на првата апликација#

Најпрвин, стартувајте ја околината “Visual Studio Community”. Сега, да се обидеме да создадеме нов проект за нашата прва Windows апликација. Истата ќе ја именуваме како “CppDemo1”, и во продолжение ќе го користиме тој термин. Се разбира, вие можете да користите и друго име.

По стартување на Visual Studio, од горното мени одберете File, па New, па Project. Сега, осигурајте се дека од левата страна ви е одбрано “Visual C++” (бидејќи сакаме да го користиме програмскиот јазик C++), па потоа одберете “Blank app (Universal Windows)”. Доколку немате таква опција, ќе ви биде понудено да биде инсталирана поддршка за создавање на вакви апликации. По одбирањето на типот на апликацијата, во долниот дел од прозорецот внесете име: “CppDemo1”. Слично, системот може да ве замоли да дозволите инсталација и извршување на Windows апликации преку овозможување на “Developer mode”.

Во следниот чекор, Visual Studio ќе ве запраша за околините на кои треба да работи вашата програма. Имено, постојат повеќе верзии и надградби на Windows 10, па потребно е системот да знае на кои верзии сакате да работи вашата програма. Ова не е круцијално да го менуваме, така да само притиснете на копчето “OK”. По ова, ќе бидат потребни неколку секунди (до една минута), за Visual Studio да ги создаде и анализира сите потребни датотеки за нашиот проект. (Во долниот дел од екранот, ќе биде напишана пораката “Parsing included files”).

Сега, од горното мени одберете Debug, па Start without debugging. (Доколку бидете прашани дали проектот треба да се компајлира, одберете потврдно). По ова, ќе можете да ја видите тековната верзија на апликацијата, при што истата ќе има само позадина без никаква содржина (текст, слики, менија и слично), бидејќи сеуште не сме додале ништо на истата.

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

Додавање на содржина#

Започнете со отворање на датотеката MainPage.xaml (листата на датотеки се наоѓа од десната страна на екранот). Сега, во горниот дел имате преглед на елементите што се наоѓаат во апликацијата, додека во долниот дел е самиот изворен код.

Од левата страна на екранот одберете Toolbox, по што ќе ви се појави листа со елементи кои можете да ги додадете на апликацијата. Внесете едно копче “Button” и еден текстуален елемент “TextBox” со влечење на елементите во централниот дел на екранот (каде што имаме преглед на апликацијата). Обидете се да ги ставите елементите во центарот, како што е прикажано на следната слика. (Инаку, TextBox е елемент каде што и корисникот може да го менува текстот, односно содржината.)

Забележете дека елементите се премали, па зголемете ја големината на текстот од десната страна на екранот, каде што имаме преглед на подесувањата на селектираниот елемент. Ова е прикажано на едната слика дадена во продолжение, додека на другата слика е прикажано како да ја промените содржината (текстот) кој се наоѓа во копчето и текстуалниот елемент.

Справување со настани#

За крај, да видиме како можеме да се справиме со настани – како, на пример, притискање на копчето. Она што сакаме да го направиме во апликацијата е следното: кога некој ќе притисне на копчето, сакаме да ја промениме содржината во текстуалниот елемент. (Забележете дека ова е само пример. Во посериозни апликации, можете да го искористите истиот процес за справување со многу посериозни настани и активности.)

Првото нешто што треба да го направиме е да му доделиме име на текстуалниот елемент. Во долниот дел од екранот, каде што се наоѓа текстуалниот приказ на елементите, по делот “<TextBox” внесете x:Name="messageBox", како што е прикажано на сликата дадена подолу. Со ова, на текстуалниот елемент му доделивме име под кое можеме да пристапиме до елементот во изворниот код.

Сега, притиснете двапати врз сивото копче (кое што се наоѓа во средина на екранот), по што ќе дојдеме до изворниот код каде што можеме да внесеме што треба да се случи по настанот на притискање на копчето. Автоматски, Visual Studio ќе направи настан “Button_Click”, а ние само треба да го внесеме кодот со кој ќе се справиме со настанот. Во овој случај, бидејќи на текстуалниот елемент му доделивме име “messageBox” погоре, за промена на неговата содржина треба само да напишеме messageBox->Text = "You clicked the button!". Притоа, забележете дека messageBox тука ни е покажувачот до елементот, па затоа го користиме операторот “->”.

За крај, стартувајте ја програмата преку горното мени: Debug -> Start without debugging. Доколку имате направено некаква грешка, истата ќе биде запишана во долниот дел од екранот. Во спротивно, (ако ги направивте сите чекори кои што ги споменавме погоре), ќе имате апликација во која со притискање на копчето ќе се промени текстот прикажан во истата.

Обидете се да внесете и други елементи во апликацијата (истите ви се дадени во делот “Toolbox” од левата страна на екранот), и видете како изгледаат истите. Интересно и лесно, нели?