民那是否准备好了我们的第一节课了呢？
这节课的内容并不难 对大多数有基础的童鞋来说完全可以跳过，但是既然是从零开始，也照顾一下新来的童鞋哈。 在大家熟练掌握代码前，我想先从代码的基本构造开始说起，所以需要大家就稍微花点时间看一下(＾Ｕ＾)ノ~
本节课就由新版主RangerCD为大家讲解最基础、最简单的挂件。
我们还会邀请到我们上次参加活动的优秀桌面作者来参与我们的后续教程(*￣︶￣)y 敬请期待哟
魂淡淡们记得交作业
准备工作
工具：Rainmeter（建议使用2.5 Final或3.0 Beta，部分代码老版本写法可能不同）
主程序下载地址：http://rainmeter.cn/cms/
本期用到的实例在最后附有下载地址。
请大家在阅读下面内容之前，事先双击实例包安装至Rainmeter。
本节主要内容有：
1、简单挂件
2、组合挂件
3、带事件的挂件
4、综合应用
下面开始进入今天的正题
一、简单挂件
请大家在Rainmeter双击加载【教程_1/实例_1/挂件.ini】，并右键打开【教程_1/实例_1】皮肤目录。
在文件夹内你将看到一张图片【img.png】以及一个配置文件【挂件.ini】。
很明显你会发现这张【img.png】与你得到的挂件皮肤是同一张图片。
打开【挂件.ini】进入编辑，你会看到一段简短的代码。
没错，这就能组成一个最基本的挂件了。
下面来进入代码分析：
[mw_shl_code=cpp,true][Rainmeter]
Author=RangerCD
[Img]
Meter=IMAGE
ImageName=img.png[/mw_shl_code]
Tip：Rainmeter的代码是按照 [] 来分节（Section）的，每遇到一个新的 [] ，Rainmeter会认为上一节代码已经结束。
第一行的[Rainmeter]表示本节代码记录了应用于整个皮肤的设置，即当前皮肤的基本信息，如刷新率、作者信息等。
第二行表示此皮肤的作者【Author】是【RangerCD】（这个就是楼主我啦_(┐「ε _这个是可以自定义），在你们做好了皮肤之后，将【Author】信息添加上是相当必要的。尊重作者(*￣︶￣)y
第四行的[Img]表示开始了一节标记是【Img】（可以自定义）的代码
第五行的【Meter】表示本节是为了给皮肤添加视觉信息，即构造外观，比如框架、边框、背景、图像、文本、符号、按钮等。[2]。【IMAGE】表示当前构造的是一个图像。
第六行的【ImageName】表示图像名称/路径，右侧【img.png】（可自定义）即为图片的路径（也大部分情况下图片名称就好啦），如果图片与ini文件放在同一文件夹，可以以文件名代替。
现在大家读懂了这段代码了么？
如果还是不懂的话我们可以用自然语言来概括这段代码（这项工作以后可能需要你自己完成）。
[mw_shl_code=cpp,true][Rainmeter] 以下是皮肤信息
Author=RangerCD 作者是RangerCD
[Img] 以下是组件Img信息
Meter=IMAGE 这个组件是图像
ImageName=img.png 图像的路径是当前目录下img.png[/mw_shl_code]
这样看起来是不是就更容易读懂了？
二、组合挂件
通常而言我们不可能仅仅需要一个【IMAGE】就写出一个成熟的挂件，在后面一节你在对组件进行事件编写的时候会发现一个组件不能胜任。这样我们就需要多个图片来完成我们的设计，比如大家都知道的蜂窝
在我们使用一些绘图软件如PS时我们会接触到图层这个概念，组合挂件就是利用了这个概念，将不同组件写入同一个ini文件充当不同图层。使用一个ini文件来对多个图层上面的过个图片进行控制。
请大家在Rainmeter双击加载【教程_1/实例_2/组合挂件.ini】，并右键打开【教程_1/实例_2】皮肤目录。
在文件夹内你将看到两张图片【img.png】、【back.png】以及一个配置文件【组合挂件.ini】。
打开【组合挂件.ini】进入编辑
在对代码逐行讲解前，我们需要知道几个在Rainmeter中的规则。
1、每一节具有可视化效果的代码，都可以为它添加【X】、【Y】两个属性，即每一个图层可以为其设置一个相对位置。就像数学题上面平面点需要的X.Y坐标来确定一个点的位置一样
需要区分的是，此处的【X】、【Y】不同于Rainmeter界面下的【X】、【Y】。
Rainmeter界面下的【X】、【Y】指皮肤的原点相对于屏幕左上角的位置。
代码中的【X】、【Y】指代码指定的部件相对于皮肤原点的位置。
简单的例子
左上角蓝点为屏幕左上角，红点为皮肤原点，绿点为组件图片的左上角。红框为Rainmeter界面【X】、【Y】，绿框为组件的【X】、【Y】。
这样的表示方法在图层的处理上相当重要。
另外，这两项留空表示【X】、【Y】均为0。
2、除此之外，还可以通过添加【W】、【H】属性来直接对图片组件进行按比例缩放。
这里的【W】、【H】即为显示在屏幕上的实际宽度、高度，留空表示为原尺寸。
对于【STRING】类的组件，我们可以通过添加【FontSize】来调整尺寸，这个在后面会介绍到。
3、Rainmeter处理图层叠加次序的时候是采取的“后来居上”的规则，处于后面的组件将会在屏幕上叠在上方，当然，不参与构造外形的代码不会有叠加作用。
下面是代码分析，前面讲解过的代码不再重复介绍。
[mw_shl_code=cpp,true][Rainmeter]
Author=RangerCD
[Back]
Meter=IMAGE
ImageName=back.png
W=212
H=90
[Img]
Meter=IMAGE
ImageName=img.png
[Label]
Meter=STRING
X=20
Y=5
FontColor=255,0,0,127
FontSize=20
FontFace=宋体
Text="www.gn00.com#CRLF#技术宅"[/mw_shl_code]
第七行、第八行为对【Back】（可自定义）组件尺寸的重定义，新尺寸为212×90。
第十行表示在前面的组件上叠加新的组件【Img】，因此最后显示在屏幕上的是【img.png】叠加在【back.png】上方。
第十五行表示【Label】这一节代码描述的是一个【STRING】类型的组件，即字符串组件。
第十六行、第十七行为对【Text】组件的定位，即该组件位于皮肤原点右侧20px、下侧5px处。
第十八行是对字体颜色【FontColor】的定义，包括四个值R、G、B、α。
RGB为红绿蓝的值，这个可以在很多绘图软件中得到，α为不透明度值，最大为255对应100%完全不透明，最小为0对应0%完全透明。
如果大家不能知道这个明确的东西，打开PS或者画图取色一下，直接复制就好
其实上述四个值用过PS的童鞋应该不会陌生，可以认为是R、G、B、α四个通道。
第十九行是对字体大小【FontSize】的定义，需要注意的是这里的大小并非是像素，而是相对大小，不同的字体同样的【FontSize】可能最后的大小并不相同。
第二十行是对字体样式【FontFace】的定义，后方直接赋值的是字体的名称【宋体】（可自定义），当然可以直接指向某个字体文件，输入字体文件路径即可。
第二十一行是对需要输出的文本【Text】的定义。需要说明的是虽然RM的语言类似C语言，但是字符串并不能使用C语言中的转义字符，因此需要用#CRLF#代替回车，这一点上与VB的处理类似。
三、带事件的挂件
仅仅依靠简单的图片、文字展示，没有与用户的交互是不能算上一个优秀的插件的，因此我们就需要引入事件。
即，告诉Rainmeter在什么时候做什么事。
请大家在Rainmeter双击加载【教程_1/实例_3/带事件的挂件.ini】，并右键打开【教程_1/实例_3】皮肤目录。
在文件夹内你将看到一张图片【img.png】以及一个配置文件【带事件的挂件.ini】。
打开【带事件的挂件.ini】进入编辑
同样我们先讲一下事件的概念。
Rainmeter需要知道我们对插件做了什么动作（例如单击、双击），所以会监控我们的鼠标、键盘的行为，并执行对应的动作。
于是我们就需要像导演一样安排好脚本，告诉这个组件你被单击的时候要打开什么、更改什么。
所以我们就需要对它指定单击事件的动作。
代码时间：
[mw_shl_code=cpp,true][Rainmeter]
Author=RangerCD
[Img]
Meter=IMAGE
ImageName=img.png
LeftMouseUpAction=["www.gn00.com"][/mw_shl_code]
其实这段代码与【实例_1】基本相同，只是最后添加了一行事件。
第七行的【LeftMouseUpAction】就是鼠标左键释放事件，右侧的【["www.gn00.com"]】表示的是需要执行的是打开这个网址。
注：回帖中有人问到 [ " " ] 间能写什么内容，在此说明一下：凡是能在“Windows运行”（win+R）中执行的均能放在此处的引号内。
例如：
["X:\xx\xx.xxx"]表示打开某个文件。
["X:\xx\xx"]表示打开某个文件夹。
["xx.xxx.xxx/xxx"]表示打开某网页。
["notepad"]、["cmd"]表示打开记事本、命令提示符。
需要特殊说明的是如果要同时打开多个网站或打开多个文件可以按照如下格式书写：
[mw_shl_code=cpp,true]LeftMouseUpAction=!execute ["www.gn00.com"]["www.baidu.com"]["D:\"]["notepad"][/mw_shl_code]
运行结果如下
需要添加一个【!execute】表示是多个动作，后面直接用【[ ]】将动作连接。
还要补充的是事件不止左键单击，具体如下：
[mw_shl_code=cpp,true]LeftMouseDownAction 左键按下
RightMouseDownAction 右键按下
MiddleMouseDownAction 中键按下
LeftMouseUpAction 左键释放
RightMouseUpAction 右键释放
MiddleMouseUpAction 中键释放
LeftMouseDoubleClickAction 左键双击
RightMouseDoubleClickAction 右键双击
MiddleMouseDoubleClickAction 中键双击
MouseOverAction 鼠标悬浮
MouseLeaveAction 鼠标离开[/mw_shl_code]
学到这，大家已经可以做出一些基本的Launcher了。
四、综合应用
将上面所学到的组合挂件以及事件结合起来，只要有合适的图片就能制作出一个适合的Launcher了。
这一节没有提供实例，因为实例相信大家都已经接触到了很多了。
请大家随意在你们搜集的皮肤中寻找一下带有Launcher字样的插件，都是基于以上原理构造出来的。
因此，本节没有什么具体的内容需要介绍的。
作业的话。。。
请大家按照自己的接受能力在我们三个部分不同层次里面挑选力所能及的程度
- 可以做单一的图片，
- 可以做单一触发链接或者行为的，
- 当然也可以做出制作一个带背景、多链接、多图层、一目了然的Dock。
魂淡淡们一定要自己写哦，抄作业是不好的行为，要打PP的
TIP：多个图片组件分别编写鼠标事件，注意叠放次序，背景与前景尽量主题一致。
最后是上述实例下载：
链接:http://pan.baidu.com/share/link?shareid=392109224&uk=3271651283
密码:vksg
如果大家有什么不懂的话请大家在这个帖子直接回复（不要使用点评，我们无法给你回复），回复时最好@一下你要询问的人（比如@胃痛君，@RangerCD或者@Liteone ）以免回复被忽视，版主会定时查看问题进行解答，我们的任务就是教会大家，所以不要害羞，只要不会的都可以问[摸摸头](～￣▽￣)ノ
魂淡淡们记得交作业
还有以下是我们专门的作业帖子
该贴已经同步到 RangerCD的微博 | 
发新帖
发表于 2013-8-3 14:06:07
提升卡
置顶卡
变色卡
发表于 2013-8-3 19:09:52
这个需要时间慢慢研究
必须的好么，快来看我们的第一期的教程吧
看完代码...我整个人都不好了...
本帅比努力研究一下应该还行!
