Windows Media Player界面的实现

Windows Media Player界面的实现

--SYGUI界面库应用介绍

作者：

摘要
本文介绍了如何使用SYGUI界面库来为程序添加类似Windows Media Player的界面定制功能，使程序具有各种不同风格的界面。

关键词
Windows Media Play界面 界面定制功能 SYGUI界面库


一、简介
    SYGUI是一个基于功能扩展的MFC界面库，我在以前的文章中介绍了如何使用该界面库来实现VC界面，在本文中将向大家介绍利用SYGUI4.0所提供的新功能来实现类似Windows Media Player的界面定制功能。这里所指的界面定制功能是指在不修改程序代码的情况下允许为程序设计各种具有不同外观风格的程序界面。例如本文所附的例子程序包含了如下图所示的三种不同的界面，三种界面可通过界面上的外观选择按钮进行动态切换：


图一 例子程序运行时的三种界面

当然，通过界面定制还可以为例子程序设计更多的界面。

SYGUI4.0是通过将界面设计和程序功能实现分离的方式来实现界面定制，因此在开发具有界面定制功能的程序时包含以下两个过程：
1.软件开发人员为程序添加界面定制功能
2.界面设计人员为程序设计各种界面，其中界面设计人员既可以是程序开发人员也可以是最终用户。

二、为程序添加界面定制功能
由于SYGUI4.0隐藏了程序实现界面定制功能的几乎全部细节，因此开发人员为程序添加界面定制功能非常简单：只需要确定程序输出的界面对象并创建一个不规则窗体模板文件。
SYGUI4.0中允许输出的界面对象包括：
1.窗口 可以为任意类型的窗口，如组合框、列表框等
2.SYItem对象 SYGUI库提供的非窗口类控件，如SYGUI的进度条、滚动条等
3.命令 程序中实现的命令，一般与定制界面窗口中的按钮相对应
4.菜单资源 可被用于菜单条或按钮下拉菜单
5.文本对象 可被用于在界面上显示文本
6.状态对象 可被作为界面设计时可选的控制变量

下面结合例子的实际代码来介绍在程序中怎样输出各种界面对象：

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
    if (CFrameWnd::OnCreate(lpCreateStruct) == -1)
        return -1;

    //MFC生成的其它代码
    ......
    ......

    //创建各种界面对象
    m_seek.SetID(ID_SLIDER_SEEK);
    ......
    ......                 
    m_wndPlayList.Create(WS_CHILD|WS_VISIBLE|LBS_NOINTEGRALHEIGHT,CRect(0,0,0,0),this,0);
    m_wndPlayList.SetFont(g_pFontMgr->GetFont(FONT_MENU));
    m_wndPlayList.SetBkColor(RGB(0,0,0));
    m_wndPlayList.AddString("测试.wam");
	
    //输出窗口对象
    g_pNRWMgr->ExportWnd(1,&m_wndPlayList,_T("WND_PLAYLIST"));
    g_pNRWMgr->ExportWnd(2,&m_cbPlayList,_T("COMBOBOX_PLAYLIST"));

    //输出SYITEM对象
    g_pNRWMgr->ExportItem(0,&m_seek,_T("SLIDER_SEEK"));
    ......
    ......
    g_pNRWMgr->ExportItem(23,&m_playIcon,_T("PLAY_ICON"));

    //输出命令
    g_pNRWMgr->ExportCommand(ID_PLAY,_T("ID_PLAY"));
    ......
    ......
    g_pNRWMgr->ExportCommand(ID_THEME,_T("ID_THEME"));

    //输出文本
    g_pNRWMgr->ExportText(PLAY_TIME_TEXT,_T("PLAY_TIME_TEXT"));
    g_pNRWMgr->ExportText(PLAY_INFO_TEXT,_T("PLAY_INFO_TEXT"));
    g_pNRWMgr->ExportText(MEDIA_INFO_TEXT,_T("MEDIA_INFO_TEXT"));
    g_pNRWMgr->ExportText(SPEAKER_NAME,_T("SPEAKER_NAME"));
    g_pNRWMgr->ExportText(EQPRESET_NAME,_T("EQPRESET_NAME"));

    //输出菜单资源
    g_pNRWMgr->ExportMenu(IDR_MAINFRAME,_T("IDR_MAINFRMAE"));

    //输出状态
    g_pNRWMgr->ExportState(PLAY_STATE,_T("PLAY_STATE"),0,255);

    //创建不规则窗体模版，在模板文件创建后应删除或注释掉下面的语句
    //g_pNRWMgr->CreateTemplate(_T("d:\\test.tpl"));

    //设置文本和状态初始值
    g_pNRWMgr->SetText(EQPRESET_NAME,_eq_preset_name[m_nEQPreset]);
    g_pNRWMgr->SetText(SPEAKER_NAME,_speaker_name[m_nSpeaker]);
    g_pNRWMgr->SetText(MEDIA_INFO_TEXT,_T("歌曲:测试 艺术家:未知 唱片集:测试 "));

    if (m_wndPlayList.GetCount() > 0)
       g_pNRWMgr->SetText(PLAY_INFO_TEXT,_T("准备就绪"));
    else
       g_pNRWMgr->SetText(PLAY_INFO_TEXT,_T(""));

    g_pNRWMgr->SetState(PLAY_STATE,0);

    //恢复程序布局
    CString strLayout = g_strPath + _T("\\Layout\\WMPlayer.lyt");
    g_pThemeMgr->LoadLayout(strLayout);

    //加载外观风格文件
    CString strTheme;
    g_pThemeMgr->GetLastThemeFile(strTheme);
    if (!strTheme.IsEmpty())
       g_pThemeMgr->LoadTheme(strTheme);

    return 0;
}

上面代码中
g_pNRWMgr是SYGUI库初始化时自动创建的全局变量，用于管理不规则窗体
g_pThemeMgr是SYGUI库初始化时自动创建的全局变量，用于管理外观风格文件

从上面的代码中我们可以看到输出界面对象是非常简单的，只需要调用相应的界面对象输出函数就可以了。所有输出函数的最后一个参数为输出对象的别名，由开发人员决定，界面设计人员在设计界面时是通过该别名来选取对应的界面对象。
ExportWnd函数输出窗口对象，其中第一个参数是输出对象序号，由开发人员分配，但必须保持唯一。第二个参数指向窗口对象。
ExportItem函数输出窗口对象，其中第一个参数是输出对象序号，由开发人员分配，但必须保持唯一。第二个参数指向SYItem对象。
ExportCommand函数输出一个命令，其中第一个参数为命令ID。
ExportMenu函数输出菜单资源，其中第一个参数为菜单资源ID。
ExportText函数输出文本对象，其中第一个参数为文本对象ID，由开发人员分配，但必须保持唯一。该函数在输出文本对象同时也将创建该文本对象，在程序中必须调用函数SetText来设置/修改文本对象所表示的字符串值。
ExportState函数输出状态对象，其中第一个参数为状态对象ID，由开发人员分配，但必须保持唯一。该函数在输出状态对象同时也将创建该状态对象，在程序中必须调用函数SetState来设置/修改状态对象状态值，状态值范围为：0 - 255。

在所有界面输出对象确定后，开发人员就可以通过调用CreateTemplate函数来创建不规则窗体模板，例如在程序最后的界面对象输出语句后加入
g_pNRWMgr->CreateTemplate(_T("d:\\MyTemplate.tpl"));
然后编译运行程序将生成名为 MyTemplate.tpl 的不规则窗体模板文件，模板文件创建后应当在程序中注释或删除上面的模板创建语句。

当开发人员在确定了程序所有输出界面对象并创建不规则窗体模板文件后就可以专注于程序功能的实现而不必关心程序最终界面的实现了，程序最终的界面是由界面设计人员来确定的。开发人员只需要在程序中调用LoadTheme函数加载界面设计人员提供的各种外观风格文件就可以使程序具有不同的界面。例如下面的代码就加载了例子中所带的Gold界面：
g_pThemeMgr->LoadTheme(_T("Theme\\MediaPlayer_Glod.ss"));

三、界面设计
在不规则窗体模板生成后，界面设计人员就可以为程序设计各种风格的界面了。为了便于理解，首先介绍两个基本概念：
1.不规则窗体 具有界面定制功能的程序的界面由一个或多个不规则窗体组成。不规则窗体个数由界面设计人员根据实际界面需要来确定。
2.层 每个不规则窗体包含一个或多个层，每个层可以有不同的形状和位置，上面的层将覆盖下面的层（相交区域部分)，不规则窗体中所有层的形状合并在一起构成不规则窗体的实际形状。层具有打开/关闭两种状态，不同状态的层可以有不同的位置但形状保持不变。在层上可以放置各种界面对象，包括程序输出的界面对象和SYGUI内置的界面对象（如层控制按钮、不规则窗体关闭按钮等）。

界面设计人员应按以下步骤来设计界面：
1.确定界面的不规则窗体个数
2.确定每个不规则窗体的层数和层的形状及位置
3.将各种界面对象加入到层的合适位置。
4.将设计完成的界面保存到外观风格文件中。

SYGUI4.0提供了一个可视化（所见即所得）的不规则窗体设计工具来帮助界面设计人员设计界面，该工具被集成在SYGUI外观风格设计器中。下面结合例子所带的Gold界面来介绍如何使用外观风格设计器来定制界面。
首先下载例子源代码，然后解压,运行Designer子目录下的Designer.ex（外观设计工具）并在该工具中打开Theme子目录下的MediaPlayer_Gold.ss文件。
在左侧不规则窗体面板中的树形控制中选择[不规则窗体]节点中的[NRW0]子节点，然后单击鼠标右键，在弹出的菜单中选择[编辑]将出现不规则窗体设计工具界面，如下图：

图二 不规则窗体设计工具界面

从上面的界面中，我们可以看到Gold界面仅包含一个不规则窗体，该窗体包含6个层。

限于篇幅，下面只能简单介绍一下界面设计过程：
1.导入不规则窗体模板
  选择不规则窗体面板-->不规窗体模板节点,然后单击鼠标右键并在弹出的菜单中选择[导入模板]将出现文件选择对话框，在选择合适的模板文件后点击[打开]按钮导入模板。
2.创建不规则窗体
  选择不规则窗体面板-->不规窗体节点，然后单击鼠标右键并在弹出的菜单中选择[插入]将出现创建不规则窗体对话框，在该对话框中填入合适的参数然后选择[确定]按钮。注意：对话框中初始大小的参数也将作为界面设计工作区的大小
3.设计不规则窗体
  在不规则窗体面板中选择需要设计的不规则窗体节点，然后单击鼠标右键并在弹出的菜单中选择[编辑]将进入不规则窗体设计界面
4.创建层
  在工具条中选择[创建层按钮]将出现创建层对话框，在该对话框中填入合适的参数并选择[确定]按钮创建一个新的层。新创建的层将处于编辑状态。
5.添加界面对象
  在工具条中选择[添加界面对象]按钮，然后在按钮下拉菜单中选择需要添加的界面对象类型将出现对象的属性对话框，在对话框中填入合适的参数然后选择[确定]按钮完成界面对象的添加。新添加的界面对象总是被加入到当前处于编辑状态的层中，通过拖动拉伸可将该对象放入到层的合适位置。

四、总结
    SYGUI4.0提供的界面定制功能改变了以往的应用程序界面设计模式，使软件的功能实现过程和界面设计过程彻底分离，从而最大程度的减少了开发人员界面设计的工作量使之能专注于软件功能的实现，以提高开发效率和代码质量，同时界面定制功能也可以使软件开发商非常方便的为不同类型的软件用户设计个性化的界面以提高用户的满意度和吸引更多的软件用户。界面定制功能对于媒体播放器、网络视频应用等这类软件尤为适合。
    本文仅简单介绍了SYGUI4.0的界面定制功能，关于SYGUI界面库的更多功能介绍可访问。
　　

--------------------next---------------------