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!

[list] [item]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ś)[/item][item] jeśli brakuje jakiegoś okienka z menu WYŚWIETL należy je pokazać [/item][item] wpis dedykowany jest początkującym osobom [/item]

III. VB.Net czy C#

Od strony technicznej jest to bez znaczenia, gdyż tak czy owak dostaniemy kod 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) [/list]

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"

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 PC Symulator - 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