# 使用CodeArts IDE for C/C++ 开发OpenGL示例工程
#### 功能介绍
CodeArts IDE面向开发者提供的智能化可扩展桌面集成开发环境（IDE），结合行业和产业开发套件，实现一站式开发体验。
- 编码新体验，开发更高效：内置自研C/C++语言开发支持，提供全新的工程加载、语法着色、符号解析、编码重构和运行调试等开发体验，提升开发效率。
- 能力可扩展，生态更开放：支持基于插件的能力扩展，开放的插件标准，开源的插件框架，开放的插件市场，形成更加开放的生态系统。
- 界面可裁剪，体验更优质：支持基于组件的界面剪裁，在精简模式下形成专用工具的优质体验，又可以在需要时升级为全模式的全量IDE工具。
CodeArts IDE for C/C++：基于C/C++语言开发CMake工程，并通过CodeArts IDE完成从工程创建、代码编写、运行调试到发布测试的全过程。基于插件扩展可以将个人开发者作业流集成其中，实现从需求到提交的全部过程，更可在业务中集成提供的诸多能力，提升应用交付效率。
本实验将指导开发者通过CodeArts IDE for C/C++平台，在本地桌面快速开发一个基于Qt实现的简单项目。通过本实验您将体验到：
- 如何在CodeArts IDE for C/C++上进行基于CMake项目的本地编译构建；
- 在CodeArts IDE上调试和运行；
- 实现一个简单OpenGL demo。
 
#### 前提条件
- 已下载并安装CodeArts IDE for C/C++。
- 已获取[示例工程代码](https://gitee.com/HuaweiCloudDeveloper/huaweicloud-code-arts-open-glsample-cpp/tree/master-dev)。
 
#### 编译构建与运行调试
通过CodeArts IDE for Cpp客户端以文件夹的形式打开代码包。
1. [登录到CodeArts IDE for C/C++客户端](https://support.huaweicloud.com/usermanual-codeartside/codeartside_01_0016.html)，单击"构建"，选择"CMake构建类型 \> Debug"。
   
   ![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002375294338.png "点击放大")
   
   
2. 导入样例代码，然后在弹窗中选择"all META"，单击右上角构建按钮![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002408813981.png)。
   
   ![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002375134454.png "点击放大")
   
   
3. 当编译构建成功后，日志打印finished，并显示构建成功的图示。 
   ![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002408693861.png)
   
   
4. 构建成功后，在页面的右上角选择"OpenGLSample"，然后单击右侧的运行按钮![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002375294366.png)。
   
   ![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002408814013.png "点击放大")
   
   
 
#### 关键代码片段详解
```
// MyWidget类的构造函数，初始化一些成员变量并设置布局
MyWidget::MyWidget(QWidget *parent) : QWidget(parent)
{
    resize(800, 600);// 设置窗口大小为800*600
   // 创建一个垂直布局，用于放置菜单标题和按钮
   m_menuButtonLayout = new QVBoxLayout;
   m_menuButtonLayout->setAlignment(Qt::AlignTop);  // 设置布局的对齐方式为顶部对齐
   // 创建一个标签，设置文本为"Menu"，并设置其居中对齐
   m_menuTitle = new QLabel(this);
   m_menuTitle->setText("Menu");
   m_menuTitle->setAlignment(Qt::AlignCenter);
   // 创建一个按钮，设置文本为"OpenGL Sample"，并设置其固定大小
   m_openGLDemoButton = new QPushButton("OpenGL Sample", this);
   m_openGLDemoButton->setFixedSize(140, 30);
   // 将标签和按钮添加到垂直布局中
   m_menuButtonLayout->addWidget(m_menuTitle);
   m_menuButtonLayout->addWidget(m_openGLDemoButton);
   // 创建一个新的窗口部件，并设置其布局为上面创建的垂直布局
   m_menuWidget = new QWidget(this);
   m_menuWidget->setLayout(m_menuButtonLayout);
   // 创建一个帧，设置其形状为垂直线并设置阴影效果
   QFrame* line = new QFrame(this);
   line->setFrameShape(QFrame::VLine);
   line->setFrameShadow(QFrame::Sunken);
   // 创建一个水平布局，用于放置菜单窗口部件和帧
   QHBoxLayout *mainLayout = new QHBoxLayout;
   mainLayout->addWidget(m_menuWidget, 1);  // 将菜单窗口部件添加到布局中，并设置其伸缩因子为1
   mainLayout->addWidget(line);  // 将帧添加到布局中
   setLayout(mainLayout);  // 将主布局设置为窗口的布局
   // 连接按钮的单击信号到槽函数ShowOpenGLDemo
   connect(m_openGLDemoButton, &QPushButton::clicked, this, &MyWidget::ShowOpenGLDemo);
}
// 槽函数，用于显示OpenGL演示
void MyWidget::ShowOpenGLDemo()
{
   OpenGLDemoShow();  // 调用OpenGL演示显示函数
   return;
}
```
#### 查看运行结果
![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002305820481.png "点击放大")
单击"OpenGL Sample"，结果如下所示：
![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002271123808.png "点击放大")