Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

Windows ŁOSiem - Zrób sobie sam(a) ulubioną kafelkę

Wrzuciłeś kolorowe obrazki, odpaliłeś dekompresję archiwum, zaznaczyłeś pliki w folderze... i co z tego?

To będzie mój 3 wpis o W8 - zgadnijcie ile jeszcze napiszę :D - to naprawdę widać ...

Twój ulubiony kafelek ...

... to Twój własny kafelek ;) Zamiast wychwalać i lubić czyjeś kafelki stwórz własny kafelkowy program. Wpis będzie pisany możliwie prosto. Sam nie wiem jaka to kategoria wpisu z cyklu Windows 8, ale chce pokazać, że nie jestem frajerem który potrafi tylko pokazywać kolorowe obrazki :( Ja po prostu inspiruję się analizami taktycznymi Jacka Gmocha ! Ta osoba bardzo wiele wniosła do piłki nożnej i jako pierwszy zaproponował właśnie taka obrazkową analizę

Tak właśnie wygląda mój ulubiony kafelek który sam zrobiłem :)

I. Instalujemy Visual Studio 2012 Express Edition for Windows 8

W tym wypadku skorzystam z darmowego VS 2012 EE który można pobrać z tąd. Po instalacji zalecam pobrać polski pakiet językowy oraz dokonać niezbędnej rejestracji :)

II.Opis Twojego narzędzia pracy

Po zainstalowaniu środowiska możemy je uruchomić.

Przybornik zawiera kontrolki z których będziemy projektować graficzny interface naszego programu (XAML). Teraz ich nie widać, ale spokojnie pojawią się, gdy otworzymy plik opisujący wygląd naszej aplikacji. Należy pamiętać, że jak w przypadku Delphi kod opisujący "wygląd" jest trzymany w osobnym pliku (dla Delphi jest to .dfm, zaś Lazarusa .lfm). tak itutaj sprawa wygląda analogicznie:

to_jest_jakis_plik.xaml.cs - zawiera kod źródłowy C#to_jest_jakis_plik.xaml - zawiera kod XAML opisujący wygląd naszego programu

Oczywiście cały proces zarządzania tymi plikami jest obsługiwany przez środowisko.

Bardzo ważny panel czyli Dane wyjściowe W tym panelu będą prezentowane wyniki działania naszego programu oraz wyświetlane miejsca w których pojawiły się błędy. Po kliknięciu na błąd zostaniemy naprowadzeni na odpowiednią linię kodu w naszym programie. Będziemy również informowani o kolejnych krokach kompilacji itd.

Panel Właściwości który umożliwia nam zmianą wartości poszczególnych właściwości kontrolek użytych w programie oraz zmiany nazw plików i ich ustawień - w zależności co zaznaczymy. Jeśli nic pozostanie on pusty.

Eksplorator rozwiązania prezentuje jeden lub więcej projektów w postaci drzewka. Możemy wygodnie z jego pomocą dodać zasoby do naszej aplikacji co zaprezentuje poniżej.

Ważne!

  • zaloguj się do konta Live i uzyskaj swój tymczasowy klucz deweloperski by móc testować aplikacje (po prosi Cię o to Visual Studio przy próbie uruchomienia czegoś)
  • jeśli brakuje jakiegoś okienka z menu WYŚWIETL należy je pokazać
  • wpis dedykowany jest początkującym osobom
  • III. VB.Net czy C#

    Od strony technicznej jest to bez znaczenia, gdyż tak czy owak dostaniemykod CIL dla CLR Ja wybiorę C# - fajniejszy język :)

    IV. Hello World w 2012 roku

    Zgodnie z programistyczną tradycją pierwszy nasz program winien wyświetlić napis "Witaj świecie" po czym równie uroczo zakończyć swój żywot.

    1. Nowe rozwiązanie

    Rozwiązanie to coś więcej jak projekt ... to zestaw projektów w którym może być jeden projekt.
    Klikamy na PLIK -> Nowy projekt ... i ukazuje się okienko jak poniżej
    Po lewej stronie mamy drzewko z różnymi typami rozwiązań. Wybieramy więc z gałęzi Szablony -> Pusta aplikacja(XAML) oraz wypełniamy pola tekstowe na dole okienka - chyba nie wymagają tłumaczenia ;)

    Klikamy na przycisk OK i powstaje nowe rozwiązanie, a program otwiera główny plik naszego programu. Zapisz projekt wykonując kombinacje CTRL + SHIFT +S lub z menu PLIK-> Zapisz wszystko

    2. Omówienie ogóle

    Program to nie tylko kod, ale i również inne rzeczy takie np zasoby czy pliki konfiguracyjne (choć w sumie to też kod). Przejdźmy do panelu Eksploratora rozwiązania znajdującego się po prawej stronie środowiska.

    Właściwości projektu
    Tak wygląda zawartość pliku AssembyInfo.cs, który możemy napisać ręcznie bądź wygenerować przy pomocy edytora konfiguracji. Chodzi m.in using System.Reflection; using System.Runtime.CompilerServices; using System.Runtime.InteropServices; // Ogólne informacje o zestawie są kontrolowane poprzez następujący // zbiór atrybutów. Zmień wartości tych atrybutów by zmodyfikować informacje // skojarzone z zestawem. [assembly: AssemblyTitle("HelloWorld")] [assembly: AssemblyDescription("")] [assembly: AssemblyConfiguration("")] [assembly: AssemblyCompany("")] [assembly: AssemblyProduct("HelloWorld")] [assembly: AssemblyCopyright("Copyright © 2012")] [assembly: AssemblyTrademark("")] [assembly: AssemblyCulture("")] // Informacje o wersji zestawu zawierają następujące cztery wartości: // // Wersja główna // Wersja pomocnicza // Numer kompilacji // Poprawka // // Można określać wszystkie wartości lub używać domyślnych numerów kompilacji i poprawki // używając symbolu „*”, tak jak pokazano poniżej: // [zestaw: AssemblyVersion("1.0.*")] [assembly: AssemblyVersion("1.0.0.0")] [assembly: AssemblyFileVersion("1.0.0.0")] [assembly: ComVisible(false)]

    Na powyższym zrzucie ekranu widać aktywny edytor właściwości naszej aplikacji. Możemy zmienić wiele rzeczy m.in dokonać podpisania naszej aplikacji lub zmienić platformę dla którego będzie budowany nasz program.
    Możemy przeglądnąć lub zmodyfikować zasoby naszej aplikacji.

    Bynajmniej nie chodzi tutaj o słynny Manifest Agile z 2001 roku, a zestaw pewnych ustawień jakie musimy dać swojemu programowi by mógł jakoś funkcjonować. Chodzi m.in o nazwę, logo, splash screen (obrazek wyświetlany podczas wczytywania programu), zezwolenia, oraz pakiet zawierający unikatową nazwę oraz nasz podpis (certyfikat)

3. Projektowanie GUI

GUI, czyli Graphical User Interface - to interface graficzny naszego programu. Owszem można go stworzyć z poziomu kodu, ale chcę pokazać, że nie bez powodu nazwano to środowisko "Visual Studio"

...kolorowe obrazki ...
Aby wyświetlić obrazek w swoim programie musisz albo go mieć "w programie" jako zasób lub wczytać z jakiejś lokalizacji nawet sieciowej. Ja dodałem obrazek do zasobów w taki sposób:

Przechodzimy do Eksploratora rozwiązania i z jego drzewka klikamy dwukrotnie na MainPage.xaml (tak przedostatni zrzut ekranu powyżej)
Rozpoczynamy wizualne projektowanie naszej aplikacji. Jeśli panel o nazwie Przybornik nie został automatycznie aktywowany naciskamy kombinację klawiszy CTRL+W lub z menu WYŚWIETL -> Przybornik

Aby można było przyzwoicie i intuicyjnie zamknąć nasz pierwszy program wrzucamy na "tablet" zwykły chamski przycisk :)

Nasza aplikacja Modern UI zawierająca jedną stronice zostanie wyposażona również w obrazek i pole na którym wyświetlimy legendarny tekst. Owszem jak zwykle można to zrobić bardziej profesjonalnie i wymalować napis w locie wykorzystując potężne GDI+, ale po co ...
Na poniższym obrazku prezentuje algorytm działania zapisany prawie tak jak by to zrobił nasz wielki piłkarz, a potem komentator i analizator piłkarski Jacek Gmoch :)

4. Kodowanie

Prawda, że nazwa środowiska nie kłamie ? Nie wpisaliśmy przecież jeszcze ani jednej linijki kodu :) Ale nadszedł czas by wpisać jedną ubogą, ale jakże cenną linijkę kodu. Więc kliknijmy dwukrotnie na nasz przycisk, który nosi etykietę "Zamknij" // musimy ubić nasz program // każda taka zielona linia rozpoczęta // to komentarz, który NIE jest brany pod uwagę przez kompilator // poniższa procedura zamyka program Application.Current.Exit();

A tak to wygląda obrazkowo:

Procedura Exit zamyka nasz kafelkowy program. Normalnie programuje w Delphi, a w językach bazujących na C/C++ procedur nie ma. W C# mamy funkcje która zwraca nic, ale nie nic w programistycznym myśleniu, ale nic dosłownie. Mówi o tym deklaracja funkcji z którą zostało związane kliknięcie na nasz przycisk. Poniżej postaram się omówić w miarę prosto nasz plik MainPage.xaml.cs // poprzez słowo kluczowe "using" wciągamy do pliku inne biblioteki i funkcje // do jak wyciąganie proszku do pieczenia czy mąki do naszego ciasta using System; using System.Collections.Generic; using System.IO; using System.Linq; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; // Szablon elementu Pusta strona jest udokumentowany pod adresem http://go.microsoft.com/fwlink/?LinkId=234238 // przestrzeń nazw "HelloWorld" czyli naszej aplikacji - taka szafka namespace HelloWorld { /// <summary> /// Pusta strona, która może być używana samodzielnie, lub do której można nawigować wewnątrz ramki. /// </summary> // klasa MainPage bazowana na Page to Page jest foremką a MainPage ciastkiem public sealed partial class MainPage : Page { public MainPage() { // pieczenie ciastka, poprzez słówko "this" odwołujemy się do ciasta na poziomie ciasta this.InitializeComponent(); } /// <summary> /// Wywoływane, gdy ta strona ma być wyświetlona w ramce. /// </summary> /// <param name="e">Dane zdarzenia opisujące sposób dotarcia na tę stronę. Właściwość parametru /// zazwyczaj jest używana do konfigurowania strony.</param> protected override void OnNavigatedTo(NavigationEventArgs e) { } // procedura, czyli funkcja która guzik zwaca (mówi o tym słowo "void"), zaś private oznacza, że inne ciasta nie będą mogły korzystać z naszego ciasta // zauważ jednak iż funkcja posiada argumenty private void Button_Click_1(object sender, RoutedEventArgs e) { // musimy ubić nasz program // każda taka zielona linia rozpoczęta // to komentarz, który NIE jest brany pod uwage przez kompilator // poniższa procedura zamyka program Application.Current.Exit(); } } }

Klikając dwukrotnie na element typu przycisk kazaliśmy wygenerować DOMYŚLNE zdarzenie wybranego komponentu. W przypadku Button jest to kliknięcie czyli nasze Button_Click_1 (oczywiście możesz zmienić nazwę jak tylko chcesz)
Na poniższym obrazku prezentuje jak to wygląda tak obrazowo

5. Uruchamianie

Nadeszła dla Ciebie wiekopomna chwila - uruchomisz swój program. Program zostanie sprawdzony pod kątem błędów, następnie połączony z różnych części w całość (linkowanie), skompilowany do CLI i uruchomiony pod kontrolą VS (debugera)
Kliknij na zieloną strzałkę w górnej części programu Visual Studio.

Jeśli nie zmieniłeś(aś) żadnej opcji obok wspominanej strzałki program uruchomi się na Twoim komputerze i zobaczyć coś takiego:

Wybranie Debug - debugujemy program czyli sprawdzamy pod kątem błędów
Wybranie Relanse - kompilujemy program tak już "na wylot" bez specjalnych informacji dla debugera.

Komputer Lokalny - program będzie uruchomiony na naszym PCSymulator - program będzie uruchomiony na naszym PC, ale poprzez wirtualny tablet

Aby zakończyć działanie aplikacji należy powrócić do okna Visual Studio i kliknąć na czerwony kwadracik (ukaże się po uruchomieniu) - tak jak w magnetofonie ;)

To teraz pozmieniamy trochę te opcje i ujrzymy swój program na "tablecie" MS. Oczywiście będzie to wirtualny tablet ;) Zmień opcje w polu zaznaczonym czerwony kolorem tak jak na poniższym obrazku

6. Mój progrsm = Mój kafelek

Pewnie, że można przypiąć zwykłą ikonkę do Start Screen, ale moja kafelka to HelloWorld!
Aby zmienić kolor kafelki oraz jej ikonkę klikamy dwukrotnie na Package.appmanifest dostępnym w Eksploratorze Rozwiązania.

Interesuje nas sekcja Tytuł oraz pola Logo i Kolor Tła. Obrazek stanowiący logo musi mieć 150x150 px i może mieć kanał Alpha który pozwoli na przenikanie koloru tła (w tym przypadku pomarańczowy). Kolor podajemy w zakodowany w systemie szesnastkowym

Jak dodać nowo stworzoną kafelkę do Start Screen ?

Z menu KOMPILACJA -> Wdrąż rozwiązanie i nasza kafelka zostanie dodana do naszego ekranu startowego czy to na PC czy na wirtualnym tablecie.
Aplikacje kafelkowe są dostępne tylko przez sklep firmy Microsoft dlatego nie można po prostu przenieść sobie programu - jak to wyglądało przy tworzeniu klasycznych programów. Aplikacja musi zostać związana z pakietem w którym będzie unikatowa nazwa pakietu (GUID), logo nasz certyfikat wraz z informacjami o wydawcy .

V. Coś poważniejszego ;)

Mam nadzieję, że wpis nie był nudny i zachęcę Was do tworzenia własnych aplikacji dla Modern UI. Myślę, że tego elementu zabrakło w akcji prowadzonej na blogach. Choć może się mylę, bo nie każdy lubi pisać programy. Zauważ, że graficzny interface aplikacji został wygenerowany przez graficznego projektanta do XAML

To co przedstawiłem to płatki śniegu na górze lodowej. Wbrew pozorom (rysowanie programu )Visual Studio to potężne narzędzie z którego korzystają profesionaliści na całym świecie.

Pytanie co warto pokazać bardziej zaawansowanego ? Chętnie pokazał bym odtwarzacz muzyki na silniku Bass od Un4seen, w końcu napisałem już trochę softu opierając się o nią, ale nie wiem czy to nie będzie za trudne - jak chcecie.

Jeśli uraziłem czyjeś uczucia postacią konika to wybaczcie, jednak postać ta została wyrzucona ze względu na przeuroczego zeza który jest błędem animatora :)
(protest rodziców w USA, że poniża się osoby z zezem).

Można zrobić naprawdę coś fajnego. Pamiętam w gimnazjum czyli 5 lat temu zrobiłem dla dziewczyny prosty, ale miły programik. Zaprogramowałem wykorzystując Microsoft Agent zieloną papugę (nie pamiętam nazwy) która żyła swoim życiem na ekranie jej PC. Myślę, że coś zrobionego prezent zrobiony samodzielnie ma dużo większą wartość :)

W tym roku będzie to mały wzmacniacz audio do komputera na LM3886t - genialne scalone końcówki mocy. Chyba jedyny scalak który daje bardzo ładny dźwięk i "domową" moc.

Dziękuje za przeczytanie i oglądniecie i mam nadzieję, że nie załamałem profesionalistów, a przyciągałem osoby początkujące :)

Pozdrawiam, DelphiX

Linki:

1. Przykładowe aplikacje Moden UI:
Z menu POMOC Visual Studio wybierz Przykłady, potem zainstaluj wybrane i prześledź kod
2. Masa materiałów od Microsoft:http://msdn.microsoft.com/pl-pl/windows/apps/3. Świetna zagraniczna baza przykładowych programów / kontrolek / inspiracji :http://www.codeproject.com/KB/cs/4. Pierwsze kroki w języku C#http://4programmers.net/C_sharp 

windows programowanie

Komentarze

0 nowych
DelphiX   6 #1 08.12.2012 17:53

PS. PRZYPOMINAM TO TYLKO HELLO WORLD ! żeby mi nikt nie cisnął że nie umiem programować, bo mam nawet program na dp ;p Pokaże w następnym wpisie coś bardziej ambitnego

Frankfurterium   9 #2 08.12.2012 18:49

W ramach czepiania się - 'kafelek' to rzeczownik rodzaju męskiego. 'Kafelka' to dopełniacz, jakiś regionalizm albo zwyczajny błąd. Ja rozumiem, że ktoś może się pomylić albo po prostu tkwić w błędzie, ale ty stosujesz obie formy (błędną i poprawną) naprzemiennie... :-|

DelphiX   6 #3 08.12.2012 18:50

@Frankfurterium
W mojej wsi nazywają tak człowieka który układa kostkę brukową ;)

Frankfurterium   9 #4 08.12.2012 18:58

Czyli trafiłem - regionalizm.

  #5 10.12.2012 00:20

a u mnie od zawsze wszyscy korzystali z odmiany "ta kafelka", "te kafelki" jako rodzaj żeński, stąd "ten kafelek" obecnie kompletnie mi nie leży, gdy przeprowadziłem się do innego świata.

Axles   16 #6 10.12.2012 10:16

Na pewno wpis inspirujący, lecz kurcze żeby ludzie masowo nie zaczęli takie kafelki tworzyć i umieszczać w sklepie MS bo będzie bajzel :)

Inventer89   5 #7 10.12.2012 12:31

Na ile starcza tymczasowy klucz deweloperski? I jakie są ograniczenia?

kwpolska   5 #8 10.12.2012 20:23

W Store jest jakiś milion appek do robienia własnych Tile’ów.

DelphiX   6 #9 10.12.2012 21:20

@Inventer89
Odnawiany co 30 dni jak niczego nie popsujesz ;)

@kwpolska
Jak wszystkich jest ponad 20 000 to raczej nie milion ;)

Inventer89   5 #10 10.12.2012 22:42

@DelphiX - "jak niczego nie popsujesz" znaczy jak nie wrzucę jakiegoś kafelka/programu ze złośliwym programem, czy chodzi o coś innego? Chyba się skuszę na podstawy nauki tworzenia kafelków, jak będę kupował komputer z Win8. Na razie majsterkuję i przetwarzam gadżety na Vistę/7.

DelphiX   6 #11 10.12.2012 22:55

@Inventer89

Tak. Ale, ale wbrew pozorom da się instalować programy z pominięciem sklepu, ale nie wiem czy wolno mi o tym napisać

tillpl   2 #12 10.12.2012 23:41

@DelphiX

Wolno jak najbardziej, z informacji które posiadam, Microsoft pozwala na instalowanie aplikacji Modern spoza sklepu tak więc to nie jest żadne obejście systemu ;)

Jotgie   5 #13 26.12.2012 22:07

Wytłumaczono "łopatologicznie", ale i tak za trudne dla przeciętnego użytkownika (jak dla mnie) i zbyt pracochłonne. Mam nadzieję, że w przyszłości pokażą się bardziej "przystępne" aplikacje do tego działania. Jak i gotowe kafelki (jak dotychczas ikony).

DelphiX   6 #14 01.01.2013 20:05

@Inventer89

Przepraszam za wprowadzenie w błąd, ale konto dalej konto darmowe jest tylko dla studentów (Dreamspark)
Tutaj więcej informacji : http://msdn.microsoft.com/pl-pl/library/windows/apps/jj657972.aspx