Borland C++ Builder Tutorial 2

Tutorial 2 - Odtwarzacz animacji AviPlayer wersja 2.0

Po napisaniu drugiej wersji AviPlayera doszed│em do wniosku, ┐e najlepiej bΩdzie zacz▒µ j▒ pisaµ od nowa.

PracΩ nad nasz▒ aplikacj▒ zaczynamy od utworzenia na dysku katalogu AviPlayer2, uruchomienia Borland C++ Buildera i wybrania polecenia z menu File->New Application. Poleceniem File->SaveAll zapisujemy plik formularza (Unit) jako FormMain.cpp, a plik projektu (Project) jako AviPlayer2.bpr. Ustawiamy w│a╢ciwo╢ci formularza:

  • BorderIcons->biMaximize = false
  • BorderStyle = bsSingle
  • Caption = AviPlayer 2.0
  • ClientHeight = 264
  • ClientWidth = 283
  • Name = MainForm
  • Position = poScreenCenter

Ustawiamy ikonΩ aviplayer2.ico jako ikonΩ programu (Ctrl+Shift+F11, zak│adka Application, przycisk Load Icon...)

Teraz umie╢cimy na formularzu kilka komponent≤w. Pierwszym z nich jest ToolBar (pasek narzΩdzi) z zak│adki Win32. Aby utworzyµ na nim przyciski klikamy prawym klawiszem myszy w jego obszarze i wybieramy New Button, mo┐emy utworzyµ tak┐e odstΩpy miΩdzy przyciskami wybieraj▒c New Separator. Tworzymy na nim: , Separator, Button, Separator, Button, Button, Button, Separator i Button. Nazywamy kolejne utworzone przyciski ExitToolButton, OpenToolButton, PlayToolButton, PauseToolButton, StopToolButton, InfoToolButton. Zmieniamy w│a╢ciwo╢ci ToolBar:

  • EdgeBorders->ebBottom = true
  • Flat = true
  • Height = 26
  • Name = ToolBar

Znaczenie w│a╢ciwo╢ci:

  • EdgeBorders ustawia wy╢wietlanie krawΩdzi paska narzΩdzi (ebBottom - dolna krawΩd╝)
  • Flat ustawia wygl▒d przycisk≤w (nie maj▒ obramowania, pokazuje siΩ ono po najechaniu mysz▒ na przycisk)

NastΩpnie z zak│adki Win32 umieszczamy na formularzu dwa komponenty ImageList, s│u┐▒ one do przechowywania obrazk≤w. Pierwszy ImageList (zmieniamy jego w│a╢ciwo╢µ Name = ToolBarImages) bΩdzie zawiera│ obrazki wy╢wietlane na pasku, a drugi (Name = ToolBarHotImages) obrazki wy╢wietlane na pasku po najechaniu na niego mysz▒.

Klikamy dwukrotnie na ToolBarImages i otwiera siΩ nam okno wyboru obrazk≤w. Za pomoc▒ przycisku Add... dodajemy po kolei ikony (ikony dostΩpne s▒ po ╢ci▒gniΩciu Plik≤w do projektu w prawym g≤rnym rogu strony):

  • exit.bmp
  • open.bmp
  • play.bmp
  • pause.bmp
  • stop.bmp
  • info.bmp

Klikamy dwukrotnie na ToolBarHotImages i dodajemy po kolei ikony:

  • exithot.bmp
  • openhot.bmp
  • playhot.bmp
  • pausehot.bmp
  • stophot.bmp
  • infohot.bmp

Zmieniamy w│a╢ciwo╢ci ToolBar, aby wy╢wietla│ obrazki:

  • Images = ToolBarImages
  • HotImages = ToolBarHotImages

Znaczenie w│a╢ciwo╢ci:

  • Images zawiera nazwΩ komponentu ImageList zawieraj▒cym obrazki, kt≤re bΩd▒ wy╢wietlone na przyciskach paska narzΩdzi
  • HotImages zawiera nazwΩ komponentu ImageList zawieraj▒cym obrazki, kt≤re bΩd▒ wy╢wietlone na przyciskach paska narzΩdzi po najechaniu na nie mysz▒

Mo┐emy teraz uruchomiµ program (F9) i sprawdzamy jak wygl▒da nasze menu. Je╢li kto╢ chce mo┐e zaprojektowaµ swoje w│asne ikony do przycisk≤w. Dodajemy do programu komponent Bevel z palety Additional. Komponent ten nic nie robi, s│u┐y tylko jako "ozdoba" w programie. U nas bΩdzie stanowi│ ramkΩ dla panelu, na kt≤rym bΩdzie wy╢wietlana animacja:

  • Height = 201
  • Left = 0
  • Name = EkranBevel
  • Shape = bsFrame
  • Top = 32
  • Width = 204

Teraz umieszczamy komponent Panel (zak│adka Standard), zmieniamy w│a╢ciwo╢ci:

  • BorderStyle = bsSingle
  • Caption = kasujemy zawarto╢µ
  • Color = clNavy
  • Height = 197
  • Name = EkranPanel
  • Width = 200

Aby wy╢rodkowaµ EkranPanel wzglΩdem EkranBevel, zaznaczamy klikniΩciem EkranBevel, nastΩpnie trzymaj▒c wci╢niΩty klawisz Ctrl zaznaczamy EkranPanel. Oba komponenty teraz s▒ zaznaczone. Klikamy na kt≤rym╢ z nich prawym przyciskiem myszy i wybieramy Align, nastΩpnie w lewej i prawej kolumnie wybieramy Centers i zatwierdzamy OK. Spowoduje to wy╢rodkowanie EkranPanel wzglΩdem EkranBevel.

Z zak│adki Additional dodajemy komponent BitBtn, jest to przycisk, kt≤ry ma wiΩcej w│a╢ciwo╢ci ni┐ zwyk│y przycisk Button, m.in. mo┐liwo╢µ umieszczenia na nim obrazka. Zmieniamy w│a╢ciwo╢ci:

  • Height = 41
  • Layout = blGlyphTop
  • Left = 208

Znaczenie w│a╢ciwo╢ci:

  • Layout okre╢la jak obrazek bΩdzie wyr≤wnany wzglΩdem tekstu na przycisku (blGlyphTop - obrazek nad tekstem)

Klikamy raz na przycisk, aby go zaznaczyµ, kopiujemy go do schowka (Ctrl+C) i tworzymy jeszcze cztery jego kopie (Ctrl+V). Teraz ustawiamy w│a╢ciwo╢ci pierwszego przycisku:

  • Caption = &Open
  • Glyph = openhot.bmp
  • Name = OpenButton
  • Top = 32

Znaczenie w│a╢ciwo╢ci:

  • Glyph zawiera ╢cie┐kΩ dostΩpu do pliku obrazka, kt≤ry bΩdzie wy╢wietlany na przycisku

Zmieniamy w│a╢ciwo╢ci drugiego przycisku:

  • Caption = &Play
  • Enabled = false
  • Glyph = playbtn.bmp
  • Name = PlayButton
  • Top = 72

Znaczenie w│a╢ciwo╢ci:

  • Enabled okre╢la, czy przycisk jest aktywny (false - przycisk nieaktywny, u┐ytkownik nie mo┐e go klikn▒µ)

Zmieniamy w│a╢ciwo╢ci trzeciego przycisku:

  • Caption = P&ause
  • Enabled = false
  • Glyph = pausebtn.bmp
  • Name = PauseButton
  • Top = 112

Zmieniamy w│a╢ciwo╢ci czwartego przycisku:

  • Caption = &Stop
  • Enabled = false
  • Glyph = stopbtn.bmp
  • Name = StopButton
  • Top = 152

Zmieniamy w│a╢ciwo╢ci pi▒tego przycisku:

  • Caption = &Exit
    Enabled = false
    Glyph = exithot.bmp
    Name = ExitButton
    Top = 192

Aby przyciski teraz by│y │adnie u│o┐one klikamy na pierwszy od g≤ry prawym przyciskiem myszy, wybieramy Bring To Front i postΩpujemy tak z ka┐dym od g≤ry do do│u.

Umieszczamy jeszcze jeden Bevel:

  • Height = 24
  • Left = 0
  • Name = ProgressBevel
  • Shape = bsFrame
  • Top = 240
  • Width = 283

Na formularzu umieszczamy CGauge z palety Samples (taki procentowy wska╝nik postΩpu, chyba ka┐dy go widzia│). Po zmienieniu w│a╢ciwo╢ci ╢rodkujemy go wzglΩdem ProgressBevel.

  • BackColor = clBlack
  • ForeColor = clBlue
  • Height = 20
  • Name = AnimacjaProgress
  • Width = 279

Znaczenie w│a╢ciwo╢ci:

  • BackColor okre╢la kolor t│a komponentu
  • ForeColor okre╢la kolor pierwszoplanowy komponentu

Oczywi╢cie nale┐y te┐ umie╢ciµ komponent MediaPlayer z zak│adki System, dziΩki kt≤remu bΩdziemy odtwarzaµ animacje:

  • DeviceType = dtAVIVideo
  • Display = EkranPanel
  • Name = MediaPlayer
  • Visible = false

No to mamy ju┐ prawie wszystkie komponenty. Prawie bo musimy jeszcze dodaµ OpenDialog z zak│adki Dialogs i Timer z zak│adki System jest to taki licznik w programie.

Na pocz▒tku zajmijmy siΩ komponentem Timer. S│u┐y on jako wewnΩtrzny licznik w programie, je╢li go uruchomimy to "tyka" co jaki╢ okre╢lony czas i wywo│uje zdarzenie OnTimer. W naszej aplikacji to zdarzenie przyda siΩ podczas odgrywania animacji, bΩdzie ono wywo│ywane co 0,1 sekundy i bΩdziemy w nim sprawdzaµ jaki procent animacji zosta│ odtworzony i zmienimy odpowiednio w│a╢ciwo╢ci komponentu AnimacjaProgress.

  • Enabled = false
  • Interval = 100
  • Name = Timer

Znaczenie w│a╢ciwo╢ci:

  • Enabled okre╢la, czy Timer jest uruchomiony (false - wy│▒czony)
  • Interval okre╢la co jaki czas Timer "tyka", czas podaje siΩ w milisekundach (1 sekunda = 1000 milisekund)

W│a╢ciwo╢ci OpenDialog nale┐y ustawiµ jak w pierwszym tutorialu (pamiΩtaj▒c o ustawieniu Name = OpenDialog).

Ufff!!! Wreszcie mamy ju┐ utworzone wszystkie komponenty. Mo┐emy uruchomiµ nasz program (F9) i obejrzeµ stworzony przez nas interfejs. Ca│kiem nie╝le, teraz pora wpisaµ parΩ linijek kodu.

Na pocz▒tek tworzymy zdarzenie OnClick dla OpenButton. klikaj▒c dwukrotnie na przycisk OpenButton umieszczony na formularzu, zdarzenie to sprawdza, czy otwarcie okna OpenDialog zako±czy│o siΩ wci╢niΩciem OK, je╢li tak to do MediaPlayer wczytywana jest ╢cie┐ka dostΩpu do animacji wybrana w OpenDialog, MediaPlayer otwiera animacjΩ (nie odtwarza), obszarem wy╢wietlania animacji bΩdzie prostok▒t (0, 0, 200, 200) takie rozmiary ma EkranPanel, nastΩpnie udostΩpniamy przyciski PlayButton, PauseButton i StopButton, a tak┐e przyciski na pasku narzΩdzi PlayToolButton, PauseToolButton i StopToolButton. Ca│e zdarzenie wygl▒da tak:

void __fastcall TMainForm::OpenButtonClick(TObject *Sender)
{
   if (OpenDialog->Execute())
   {
      MediaPlayer->FileName = OpenDialog->FileName;
      MediaPlayer->Open();
      MediaPlayer->DisplayRect = Rect(0, 0, 200, 200);
      PlayButton->Enabled = true;
      PauseButton->Enabled = true;
      StopButton->Enabled = true;
      PlayToolButton->Enabled = true;
      PauseToolButton->Enabled = true;
      StopToolButton->Enabled = true;
   }
}

Tworzymy zdarzenie OnClick dla PlayButton, kt≤re rozpoczyna odtwarzanie animacji i uruchamia Timer, kt≤ry zaczyna "tykaµ".

void __fastcall TMainForm::PlayButtonClick(TObject *Sender)
{
   MediaPlayer->Play();
   Timer->Enabled = true;
}

Tworzymy zdarzenie OnClick dla PauseButton, kt≤re zatrzymuje odtwarzanie animacji:

void __fastcall TMainForm::PauseButtonClick(TObject *Sender)
{
   MediaPlayer->Pause();
}

Tworzymy zdarzenie OnClick dla StopButton, kt≤re zatrzymuje odtwarzanie animacji i przewija j▒ do pocz▒tku:

void __fastcall TMainForm::StopButtonClick(TObject *Sender)
{
   MediaPlayer->Stop();
   MediaPlayer->Rewind();
}

Tworzymy zdarzenie OnTimer dla Timer klikaj▒c dwukrotnie na ikonce komponentu Timer, kt≤re sprawdza w jakim "stanie" jest MediaPlayer. Je╢li animacja jest odtwarzana to zmienia siΩ procent wy╢wietlonej animacji na AnimacjaProgress, a gdy animacja jest zatrzymana to wy│▒czany jest Timer, procent wy╢wietlonej animacji ustawiany jest na zero, a animacja jest przewijana do pocz▒tku:

void __fastcall TMainForm::TimerTimer(TObject *Sender)
{
   if (MediaPlayer->Mode == mpPlaying)
   {
      AnimacjaProgress->Progress = MediaPlayer->Position * 100 / MediaPlayer->Length;
   }
   if (MediaPlayer->Mode == mpStopped)
   {
      Timer->Enabled = false;
      AnimacjaProgress->Progress = 0;
      MediaPlayer->Rewind();
   }
}

Tworzymy zdarzenie OnClick dla ExitButton, kt≤re zamyka aplikacjΩ:

void __fastcall TMainForm::ExitButtonClick(TObject *Sender)
{
   Close();
}

Teraz zamiast pisaµ jeszcze raz te zdarzenia dla przycisk≤w z paska narzΩdzi mo┐emy w bardzo prosty spos≤b przypisaµ im ju┐ istniej▒ce zdarzenia:

wybieramy ExitToolButton i w Inspektorze Obiekt≤w klikamy na zak│adkΩ Events (zdarzenia). Jest ich tam trochΩ ale nas interesuje OnClick, w polu warto╢ci tego zdarzenia klikamy przycisk ze strza│k▒ w d≤│ i wybieramy ExitButtonClick, podobnie postΩpujemy dla nastΩpnych przycisk≤w:

  • dla OpenToolButton wybieramy OpenButtonClick
  • dla PlayToolButton wybieramy PlayButtonClick
  • dla PauseToolButton wybieramy PauseButtonClick
  • dla StopToolButton wybieramy StopButtonClick
  • dla InfoToolButton wybieramy InfoButtonClick

Mogliby╢my r≤wnie dobrze najpierw utworzyµ zdarzenia dla przycisk≤w z paska narzΩdzi, a p≤╝niej przypisaµ je przyciskom z formularza.

Wreszcie dobrnΩli╢my do ko±ca drugiego tutoriala. Mam nadziejΩ, ┐e siΩ wam podoba│. Zapraszam do trzeciego tutoriala, gdzie dodamy do programu menu g│≤wne, podpowiedzi w "chmurkach" i tzw. okienko About.

Je╢li nie mo┐esz siΩ doczekaµ nastΩpnych tutoriali to zapraszam na moj▒ stronΩ: "Borland C++ Builder (nie tylko) dla pocz▒tkuj▒cych" pod adresem www.borland.prv.pl. Znajdziesz tam wszystko co jest zwi¹zane z Borland C++ Builderem.

autor: Piotr W≤jtowicz (Hetman)
www: http://www.borland.prv.pl
e-mail: thehetman@poczta.fm