Pamācības

Lietotāja saskarne (User Interface), 2. daļa - pogas un checkbox'i

Lietotāja saskarne (User Interface), 2. daļa - pogas un checkbox'i

Elviss Strazdiņš, 28.02.2010

Komentāri: 7

2. Lietotāja saskarne (user interface)  - pogas (buttons), checkbox 

Šoreiz mēs runāsim par vienām no svarīgākajām UI sastāvdaļām - pogām un checkbox (nevarēju atrast šim vārdam latviskojumu). 

Pogas (buttons)

Pogas Windows vidē

Nu tad ķeramies klāt pie programmēšanas. Vispirms mums jāizveido klase CButton:

class CButton
{
    void Draw();
    void OnEvent(int nEvent,int nParam);
 
    char*    m_strCaption;
    bool      m_bPressed;
    bool      m_bMouseOnIt;
 
    bool      m_bVisible;
 
    int         m_nPosX;
    int         m_nPosY;
    int         m_nSizeX;
    int         m_nSizeY;
};

Mazs apraksts par katru elementu: Draw - zīmē mūsu pogu, OnEvent - ja notiek kāda darbība (kā pogas nospiešana vai peles klikšķis), tad tiek izsaukta šī funkcija, m_strCaption - pogas teksts (piemēram, OK vai Cancel), m_bPressed - vai poga ir nospiesta, m_bMouseOnIt - vai peles kursors atrodas virs pogas, m_bVisible - vai poga ir redzama, m_nPoX/Y - pogas koordinātas, m_nSizeX/Y - pogas izmēri.

Tagad apskatīsim funkciju OnEvent:

void CButton::OnEvent(int nEvent,int nParam)
{
    if (!m_bVisible) return; //ja poga nav redzama, tad neko nedarām

    switch(nEvent)
    {
        case CURSORMOVEX:
        case CURSORMOVEY: //ja pele tiek pakustināta
        {
            POINT pos;
            GetCursorPos(&pos);
 
            if (pos.x>=m_nPosX &&
                pos.x<=m_nPosX+m_nSizeX &&
                pos.y>=m_nPosY &&
                pos.y<=m_nPosY+m_nSizeY) //ja pele atrodas pogas reģionā
             {
                m_bMouseOnIt=true;
             }
             else
             {
                 m_bMouseOnIt=false; //ja pele neatrodas pogas reģionā tad m_bMouseOnIti vienāds ar false
             }
        }
        break;
 
        case MOUSEBUTTONDOWN: //ja peles poga tiek nospiesta
            if (nParam=LEFTMOUSEBUTTON) //ja tā ir kreisā poga
            {
                if (m_bMouseOnIt) m_bPressed=true; //ja pele atrodas uz pogas, tad tā ir nospiesta
            }
        break;
 
        case MOUSEBUTTONUP: //ja peles poga tiek palaista vaļā
            if (nParam=LEFTMOUSEBUTTON && m_bPressed) //ja tā ir kreisā poga
            {
                if (m_bMouseOnIt) SendMessage(BUTTON_CLICK,this); //sūtam ziņu ka šī (this) poga tika nospiesta
                m_bPressed=false; //tā vairs nav nospiesta
            }
        break;
    }
}

Šajā kodā mēs apstrādājām peles ievadi (input). Ievērojiet, ka mēs sūtam ziņu ka poga ir noklikšķināta tika pēc tam kad pele tiek palaista vaļā (Windows tas strādā tāpat). Ja poga nav redzama, tad mēs uzreiz pārtraucam funkciju.

Ja nesapratāt vietu: if (pos.x>=m_nPosX &&
                                       pos.x<=m_nPosX+m_nSizeX &&
                                       pos.y>=m_nPosY &&
                                       pos.y<=m_nPosY+m_nSizeY), tad šeit es jums centīšos to paskaidrot.

Ja peles X koordināta ir lielāka vai vienāda ar Pogas X koordinātu un
ir mazāka vai vienāda ar pogas X koordinātu plus tās X izmēru un
peles Y koordināta ir lielāka vai vienāda ar Pogas Y koordinātu un
ir mazāka vai vienāda ar pogas Y koordinātu plus tās Y izmēru,
tad pele atrodas pogas reģionā.

Tagad apskatīsim Draw funkciju:

void CButton::Draw()
{
    if (!m_bVisible) return; //ja poga nav redzama, tad neko nedarām

    if (m_bPressed && m_bMouseOnIt)
        //zīmējam nospiestu pogu
    else
        //zīmējam parastu pogu
}

 

Atkal, ja poga nav redzama, tad mēs uzreiz pārtraucam funkciju. Ja pele neatrodas uz pogas, tad mēs to zīmējam kā nenospiestu, kautvai tā ir nospiesta (tieši tāpat kā Windows). 

Checkbox

Checkbox'i Windows vidē 

Atkal mums ir jāizveido jauna klase CCheckBox:

class CCheckBox
{
    void Draw();
    void OnEvent(int nEvent,int nParam);
 
    char*    m_strCaption;
    bool      m_bPressed;
    bool      m_bMouseOnIt;
 
    bool      m_bVisible;
 
    int         m_nPosX;
    int         m_nPosY;
    int         m_nSizeX;
    int         m_nSizeY;
 
    bool      m_bChecked //jaunums
};

 

Šī klase ir gandrīz tāda pati kā CButton, bet tai ir viena atšķirība - m_bChecked, kas norāda vai Checkbox ir atķeksēts.

Tagad apskatīsim OnEvent funkciju:

void CCheckBox::OnEvent(int nEvent,int nParam)
{
    if (!m_bVisible) return;
 
    switch(nEvent)
    {
        case CURSORMOVEX:
        case CURSORMOVEY:
        {
            POINT pos;
            GetCursorPos(&pos);
 
            if (pos.x>=m_nPosX &&
                pos.x<=m_nPosX+m_nSizeX &&
                pos.y>=m_nPosY &&
                pos.y<=m_nPosY+m_nSizeY)

             {
                m_bMouseOnIt=true;
             }
             else
             {
                 m_bMouseOnIt=false;
             }
        }
        break;
 
        case MOUSEBUTTONDOWN:
            if (nParam=LEFTMOUSEBUTTON)
            {
                if (m_bMouseOnIt) m_bPressed=true;
            }
        break;
 
        case MOUSEBUTTONUP:
            if (nParam=LEFTMOUSEBUTTON && m_bPressed)
            {
                if (m_bMouseOnIt) SendMessage(CHECKBOX_CLICK,this);
                m_bPressed=false;
                m_bChecked=!m_bChecked; //jaunums
            }
        break;
    }
}

Šeit mēs ievietojām rindiņu - m_bChecked=!m_bChecked, kas nozīmē, ka ja Checkbox nav atķeksēts, tad tagad tas ir atķeksēts un otrādi.

Un visbeidzot Draw funkcija:

void CCheckBox::Draw()
{
    if (!m_bVisible) return;
 
    if (m_bChecked)
        //zīmējam atķeksētu checkbox
    else
        //zīmējam neatķeksētu checkbox
}

Šeit mēs vienkārši zīmējam atķeksētu checkbox, ja tas ir atķeksēts un neatķeksētu ja tas nav atķeksēts (neatkarīgi vai tas ir nospiests vai nē).

Ja gribat, Jūs varat pievienot parametru m_bEnabled. To var izmantot kā Windows - ja m_bEnabled ir vienāds ar false, tad poga vai checkbox tiks zīmēta, bet nereaģēs uz peles ievadi.

Beigas 

Šie būtu paši pamati, šeit vēl var pievienot daudz, bet to es centīšos izdarīt nākošajā pamācībā. Taču ja jums ir kādi jautājumi, labojumi vai jaunas idejas, tad rakstiet komentāros. 

Nākošā pamācība: 3. Lietotāja saskarne (user interface) - statiskās kontroles (static controls)

Jūs varētu interesēt arī šādi raksti:

Aptauja

Vai Tu apmeklēji gamedev.lv konferenci [0]



Citas aptaujas

Autorizācija

Lietotājs

Parole


Reģistrēties Aizmirsi paroli?