다음을 통해 공유

연습: MFC 자유 곡선 애플리케이션 업데이트(파트 2)

  • 아티클

이 연습의 1 부에서는 클래식 Scribble 애플리케이션에 Office Fluent 리본을 추가하는 방법을 보여 줍니다. 이 부분에서는 메뉴 및 명령 대신 사용자가 사용할 수 있는 리본 패널 및 컨트롤을 추가하는 방법을 보여 줍니다.

필수 조건

Visual C++ 샘플

섹션

이 연습 부분에는 다음 단원이 있습니다.

리본 메뉴에 새 패널 추가

다음 단계에서는 도구 모음과 상태 막대의 표시 유형을 제어하는 두 개의 검사 상자가 포함된 보기 패널과 MDI(다중 문서 인터페이스) 창의 생성 및 배열을 제어하는 세로 방향 분할 단추가 포함된 창 패널을 추가하는 방법을 보여 줍니다.

리본 표시줄에 보기 패널 및 창 패널을 추가하려면

  1. 상태 막대와 도구 모음을 토글하는 두 개의 검사 상자가 있는 패널을 View만듭니다.

    1. 도구 상자에서 패널을 홈 범주로 끕니다. 그런 다음 두 개의 확인란을 패널로 끕니다 .

    2. 패널을 클릭하여 해당 속성을 수정합니다. 캡션을 .로 변경합니다View.

    3. 첫 번째 검사 상자를 클릭하여 속성을 수정합니다. ID를 변경하고 캡션을 ID_VIEW_TOOLBAR >로 변경합니다Toolbar.

    4. 두 번째 검사 상자를 클릭하여 속성을 수정합니다. ID를 변경하고 캡션을 ID_VIEW_STATUS_BAR >로 변경합니다Status Bar.

  2. 분할 단추가 있는 패널을 만듭니다 Window . 사용자가 분할 단추를 클릭하면 바로 가기 메뉴에 Scribble 애플리케이션에 이미 정의된 세 가지 명령이 표시됩니다.

    1. 도구 상자에서 패널을 홈 범주로 끕니다. 그런 다음, 단추를 패널로 끕니다.

    2. 패널을 클릭하여 해당 속성을 수정합니다. 캡션을 .로 변경합니다Window.

    3. 이 단추를 클릭합니다. 캡션을 Windows로 변경하고, 키로w, 큰 이미지 인덱스로 1변경하고, 분할 모드를 />로 변경합니다False. 그런 다음 메뉴 항목 옆에 있는 줄임표(...)를 클릭하여 항목 편집기 대화 상자를 엽니다.

    4. 추가를 세 번 클릭하여 3개의 단추를 추가합니다.

    5. 첫 번째 단추를 클릭한 다음 캡션을 로 New Window변경하고 ID를 로 변경합니다ID_WINDOW_NEW.

    6. 두 번째 단추를 클릭한 다음 캡션을 로 Cascade변경하고 ID를 로 변경합니다ID_WINDOW_CASCADE.

    7. 세 번째 단추를 클릭한 다음 캡션을 로 Tile변경하고 ID를 로 변경합니다ID_WINDOW_TILE_HORZ.

  3. 변경 사항을 저장한 다음 애플리케이션을 빌드하고 실행합니다. 보기 및 창 패널이 표시되어야 합니다. 단추를 클릭하여 제대로 작동하는지 확인합니다.

리본 메뉴에 도움말 패널 추가

이제 Scribble 애플리케이션에 정의된 두 개의 메뉴 항목을 도움말 항목 및 낙서 정보라는 리본 단추에 할당할 수 있습니다. 단추는 도움말이라는 새 패널에 추가됩니다.

도움말 패널을 추가하려면

  1. 도구 상자에서 패널을 홈 범주로 끕니다. 그런 다음 두 개의 단추를 패널로 끕니다 .

  2. 패널을 클릭하여 해당 속성을 수정합니다. 캡션을 .로 변경합니다Help.

  3. 첫 번째 단추를 클릭합니다. 캡션을 로 Help Topics변경하고 ID를 로 변경합니다ID_HELP_FINDER.

  4. 두 번째 단추를 클릭합니다. 캡션을 로 About Scribble...변경하고 ID를 로 변경합니다ID_APP_ABOUT.

  5. 변경 사항을 저장한 다음 애플리케이션을 빌드하고 실행합니다. 두 개의 리본 단추가 포함된 도움말 패널이 표시되어야 합니다.

    Important

    도움말 항목 단추를 클릭하면 Scribble 애플리케이션에서 your_project_name.chm이라는 압축된 HTML(.chm) 도움말 파일을 엽니다. 따라서 프로젝트 이름이 Scribble이 아닌 경우 도움말 파일의 이름을 프로젝트 이름으로 바꿔야 합니다.

리본 메뉴에 펜 패널 추가

이제 펜의 두께와 색을 제어하는 단추를 표시하는 패널을 추가합니다. 이 패널에는 두꺼운 펜과 얇은 펜 사이를 전환하는 검사 상자가 포함되어 있습니다. 해당 기능은 Scribble 애플리케이션의 두꺼운 선 메뉴 항목과 유사합니다.

원래 Scribble 애플리케이션을 사용하면 사용자가 메뉴에서 펜 너비를 클릭할 때 나타나는 대화 상자에서 펜 너비를 선택할 수 있습니다 . 리본 표시줄에는 새 컨트롤을 위한 충분한 공간이 있으므로 리본에서 두 개의 콤보 상자를 사용하여 대화 상자를 바꿀 수 있습니다. 한 콤보 상자는 얇은 펜의 너비를 조정하고 다른 콤보 상자는 두꺼운 펜의 너비를 조정합니다.

리본 메뉴에 펜 패널 및 콤보 상자를 추가하려면

  1. 도구 상자에서 패널을 홈 범주로 끕니다. 그런 다음 확인란과 두 개의 콤보 상자를 패널로 끕니다.

  2. 패널을 클릭하여 해당 속성을 수정합니다. 캡션을 .로 변경합니다Pen.

  3. 검사 상자를 클릭합니다. 캡션을 로 Use Thick변경하고 ID를 로 변경합니다ID_PEN_THICK_OR_THIN.

  4. 첫 번째 콤보 상자를 클릭합니다. 캡션을 변경합니다. Thin PenID를 />ID_PEN_THIN_WIDTH로 변경하고, 입력하려면 Drop List입력하고, 데이터를 입력할 1;2;3;4;5;6;7;8;9;데이터로, 텍스트는 로 변경합니다2.

  5. 두 번째 콤보 상자를 클릭합니다. 캡션을 변경합니다. Thick PenID를 />ID_PEN_THICK_WIDTH로 변경하고, 입력하려면 Drop List입력하고, 데이터를 입력할 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;데이터로, 텍스트는 로 변경합니다5.

  6. 새 콤보 상자는 기존 메뉴 항목과 일치하지 않으므로 모든 펜 옵션에 대한 메뉴 항목을 만들어야 합니다.

    1. 리소스 뷰 창에서 IDR_SCRIBBTYPE 메뉴 리소스를 엽니다.

    2. 펜을 클릭하여 펜 메뉴를 엽니다. 그런 다음 여기에 입력을 클릭하고 을 입력Thi&n Pen합니다.

    3. 입력한 텍스트를 마우스 오른쪽 단추로 클릭하여 속성 창을 연 다음 ID 속성을 ID_PEN_THIN_WIDTH.로 변경합니다.

    4. 모든 펜 메뉴 항목에 대한 이벤트 처리기를 만듭니다. 만든 Thi&N 펜 메뉴 항목을 마우스 오른쪽 단추로 클릭한 다음 이벤트 처리기 추가를 클릭합니다. 이벤트 처리기 마법사가 표시됩니다.

    5. 마법사의 클래스 목록 상자에서 CScribbleDoc를 선택한 다음 추가 및 편집을 클릭합니다. 이 명령은 .라는 CScribbleDoc::OnPenThinWidth이벤트 처리기를 만듭니다.

    6. 다음 코드를 CScribbleDoc::OnPenThinWidth에 추가합니다.

      // Get a pointer to the ribbon bar
CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

// Get a pointer to the Thin Width combo box
CMFCRibbonComboBox* pThinComboBox = DYNAMIC_DOWNCAST(
CMFCRibbonComboBox, pRibbon->FindByID(ID_PEN_THIN_WIDTH));

//Get the selected value
int nCurSel = pThinComboBox->GetCurSel();
if (nCurSel>= 0)
{
    m_nThinWidth = atoi(CStringA(pThinComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();

  7. 다음으로 두꺼운 펜에 대한 메뉴 항목 및 이벤트 처리기를 만듭니다.

    1. 리소스 뷰 창에서 IDR_SCRIBBTYPE 메뉴 리소스를 엽니다.

    2. 펜을 클릭하여 펜 메뉴를 엽니다. 그런 다음 여기에 입력을 클릭하고 을 입력Thic&k Pen합니다.

    3. 입력한 텍스트를 마우스 오른쪽 단추로 클릭하여 속성 창을 표시 합니다 . ID 속성을 ID_PEN_THICK_WIDTH.로 변경합니다.

    4. 만든 두꺼운 펜 메뉴 항목을 마우스 오른쪽 단추로 클릭한 다음 이벤트 처리기 추가를 클릭합니다. 이벤트 처리기 마법사가 표시됩니다.

    5. 마법사의 클래스 목록 상자에서 CScribbleDoc를 선택한 다음 추가 및 편집을 클릭합니다. 이 명령은 .라는 CScribbleDoc::OnPenThickWidth이벤트 처리기를 만듭니다.

    6. 다음 코드를 CScribbleDoc::OnPenThickWidth에 추가합니다.

      // Get a pointer to the ribbon bar
CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx *) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

CMFCRibbonComboBox* pThickComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox, pRibbon->FindByID(ID_PEN_THICK_WIDTH));
// Get the selected value
int nCurSel = pThickComboBox->GetCurSel();
if (nCurSel>= 0)
{
    m_nThickWidth = atoi(CStringA(pThickComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();

  8. 변경 사항을 저장한 다음 애플리케이션을 빌드하고 실행합니다. 새 단추와 콤보 상자가 표시되어야 합니다. 다른 펜 너비를 사용하여 낙서해 보세요.

펜 패널에 색 단추 추가

다음으로 사용자가 색으로 낙서할 수 있는 CMFCRibbonColorButton 개체를 추가합니다.

펜 패널에 색 단추를 추가하려면

  1. 색 단추를 추가하기 전에 해당 메뉴 항목을 만듭니다. 리소스 뷰 창에서 IDR_SCRIBBTYPE 메뉴 리소스를 엽니다. 펜 메뉴 항목을 클릭하여 펜 메뉴를 엽니다. 그런 다음 여기에 입력을 클릭하고 을 입력&Color합니다. 입력한 텍스트를 마우스 오른쪽 단추로 클릭하여 속성 창을 표시 합니다 . ID를 ID_PEN_COLOR로 변경합니다.

  2. 이제 색 단추를 추가합니다. 도구 상자에서 색 단추를 펜 패널로 끕니다.

  3. 색 단추를 클릭합니다. 캡션을 , ID로, 단순 보기로True, 큰 이미지 인덱스로 변경하고, 분할 모드를 1/>로 변경합니다.FalseID_PEN_COLOR Color

  4. 변경 사항을 저장한 다음 애플리케이션을 빌드하고 실행합니다. 펜 패널에 새 색 단추가 표시되어야 합니다. 그러나 아직 이벤트 처리기가 없으므로 사용할 수 없습니다. 다음 단계에서는 색 단추에 대한 이벤트 처리기를 추가하는 방법을 보여 줍니다.

문서 클래스에 색 멤버 추가

원래 Scribble 애플리케이션에는 색 펜이 없으므로 해당 애플리케이션에 대한 구현을 작성해야 합니다. 문서의 펜 색을 저장하려면 문서 클래스 CscribbleDoc에 새 멤버를 추가합니다.

문서 클래스에 색 멤버를 추가하려면

  1. scribdoc.h의 CScribbleDoc 클래스에서 섹션을 찾습니다 // Attributes . 데이터 멤버 정의 다음에 다음 코드 줄을 추가합니다 m_nThickWidth .

    // Current pen color
COLORREF m_penColor;

  2. 모든 문서에는 사용자가 이미 그린 스토크스 목록이 포함되어 있습니다. 모든 스트로크는 개체에 CStroke 의해 정의됩니다. 클래스에는 CStroke 펜 색에 대한 정보가 포함되지 않으므로 클래스를 수정해야 합니다. scribdoc.h의 CStroke 클래스에서 데이터 멤버 정의 다음에 m_nPenWidth 다음 코드 줄을 추가합니다.

    // Pen color for the stroke
COLORREF m_penColor;

  3. scribdoc.h에서 매개 변수가 너비와 색을 지정하는 새 CStroke 생성자를 추가합니다. 문 다음에 다음 코드 줄을 추가합니다 CStroke(UINT nPenWidth); .

    CStroke(UINT nPenWidth, COLORREF penColor);

  4. scribdoc.cpp에서 새 CStroke 생성자의 구현을 추가합니다. 생성자 구현 CStroke::CStroke(UINT nPenWidth) 후에 다음 코드를 추가합니다.

    // Constructor that uses the document's current width and color
CStroke::CStroke(UINT nPenWidth, COLORREF penColor)
{
    m_nPenWidth = nPenWidth;
    m_penColor = penColor;
    m_rectBounding.SetRectEmpty();
}

  5. 메서드의 CStroke::DrawStroke 두 번째 줄을 다음과 같이 변경합니다.

    if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))

  6. 문서 클래스의 기본 펜 색을 설정합니다. scribdoc.cpp에서 문 다음에 m_nThickWidth = 5; 다음 줄을 CScribbleDoc::InitDocument추가합니다.

    // default pen color is black
m_penColor = RGB(0, 0, 0);

  7. scribdoc.cpp에서 메서드의 CScribbleDoc::NewStroke 첫 번째 줄을 다음으로 변경합니다.

    CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);

  8. 메서드의 CScribbleDoc::ReplacePen 마지막 줄을 다음으로 변경합니다.

    m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);

  9. 이전 단계에서 멤버를 추가 m_penColor 했습니다. 이제 멤버를 설정하는 색 단추에 대한 이벤트 처리기를 만듭니다.

    1. 리소스 보기 창에서 IDR_SCRIBBTYPE 메뉴 리소스를 엽니다.

    2. 색 메뉴 항목을 마우스 오른쪽 단추로 클릭하고 이벤트 처리기 추가를 클릭합니다. 이벤트 처리기 마법사가 나타납니다.

    3. 마법사의 수업 목록 상자에서 CScribbleDoc를 선택한 다음 추가 및 편집 단추를 클릭합니다. 이 명령은 이벤트 처리기 스텁을 CScribbleDoc::OnPenColor 만듭니다.

  10. 이벤트 처리기의 스텁을 CScribbleDoc::OnPenColor 다음 코드로 바꿉다.

    void CScribbleDoc::OnPenColor()
{
    // Change pen color to reflect color button's current selection
    CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
    ASSERT_VALID(pRibbon);

    CMFCRibbonColorButton* pColorBtn = DYNAMIC_DOWNCAST(
        CMFCRibbonColorButton, pRibbon->FindByID(ID_PEN_COLOR));

    m_penColor = pColorBtn->GetColor();
    // Create new pen using the selected color
    ReplacePen();
}

  11. 변경 사항을 저장한 다음 애플리케이션을 빌드하고 실행합니다. 이제 색 단추를 누르고 펜의 색을 변경할 수 있습니다.

펜 초기화 및 기본 설정 저장

다음으로 펜의 색과 너비를 초기화합니다. 마지막으로 파일에서 색 그리기를 저장하고 로드합니다.

리본 표시줄에서 컨트롤을 초기화하려면

  1. 리본 표시줄에서 펜을 초기화합니다.

    다음 코드를 메서드의 scribdoc.cpp에 CScribbleDoc::InitDocument 문 다음에 m_sizeDoc = CSize(200,200) 추가합니다.

    // Reset the ribbon UI to its initial values
CMFCRibbonBar* pRibbon =
    ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

CMFCRibbonColorButton* pColorBtn = DYNAMIC_DOWNCAST(
    CMFCRibbonColorButton,
    pRibbon->FindByID(ID_PEN_COLOR));

// Set ColorButton to black
pColorBtn->SetColor(RGB(0, 0, 0));

CMFCRibbonComboBox* pThinComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox,
    pRibbon->FindByID(ID_PEN_THIN_WIDTH));

// Set Thin pen combobox to 2
pThinComboBox->SelectItem(1);

CMFCRibbonComboBox* pThickComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox,
    pRibbon->FindByID(ID_PEN_THICK_WIDTH));

// Set Thick pen combobox to 5
pThickComboBox->SelectItem(0);

  2. 색 그리기를 파일에 저장합니다. 다음 문을 메서드의 scribdoc.cpp에 CStroke::Serialize 문 다음에 ar << (WORD)m_nPenWidth; 추가합니다.

    ar << (COLORREF)m_penColor;

  3. 마지막으로 파일에서 색 그리기를 로드합니다. 다음 코드 줄을 메서드에 CStroke::Serialize 문 다음에 추가합니다 m_nPenWidth = w; .

    ar >> m_penColor;

  4. 이제 색으로 낙서하고 드로잉을 파일에 저장합니다.

결론

MFC Scribble 애플리케이션을 업데이트했습니다. 기존 애플리케이션을 수정할 때 이 연습을 가이드로 사용합니다.

참고 항목

연습
연습: MFC 자유 곡선 애플리케이션 업데이트(1부)