拆解PowerApps - 请假申请 -6

上一节我们完成了HomeScreen 页面的解析，本节我们开始解析接下来的一个新的页面 NewRequestScreen。

1. 页面总体结构

这个页面的相当于是创建新申请的初始页面，用来引导用户创建请假申请。
从上图可用看到，这个页面的主体部分在于下部的 GalleryLeaveType。上部除返回按钮外，都是些起提示作用的文本标签。

2. 控件解析
2.1 iconBackNewRequest - 页面最左上角的一个返回图标。
icon  = Icon.ChevronLeft   //设置图标图案
OnSelect = Back()     //返回之前的页面，从哪个页面跳转过来就跳转回哪个页面

2.2 LabelNewRequestHeader   - 页面标题 
Text = "Create New"    //显示固定的文字

2.3 LabelCreateNewRequest - 提示文字标签
Text = "Create a new request."     //显示固定的文字

2.4 LabelNewRequestInfo  - 提示文字标签
Text = ""First, select the type of leave you
plan to take."."     //显示固定的文字
// 这里有一个文字排版的小技巧。查看标签的 Text 属性可以看到，这里有一个手动的回车换行。

//这时，控件会保持这种格式，即使拉大控件的横向尺寸，被手动换行的文字也不会整合到一行里（如下图）。

//而如果没有手动换行，控件里的文本就会根据其横向尺寸的大小自动换行（如下图）。这会涉及到设备屏幕的适配问题，如过强调格式统一，可以通过手工换行来保持队形一致。


2.5 Rectangle5 - 页面上部的蓝色长方形区域，起视觉效果作用。

2.6 GalleryLeaveType  
这个Gallery用来列示所有的假期类型，供用户选择后进行假期申请。
首先来看 GalleryLeaveType 层面，这里主要有两个设置：
 - Items  = LeaveTypeCollection   //对这个集合还有印象不？ 它是第一节里在 App 的 OnStart 做的定义，需要回顾的可以点链接再去看看。
//个人感觉这个Items的设置还是值得稍加关注，它涉及到为Gallery提供数据的实现方法。
//这里采用的方法是将一个预先设定好的Collection赋值给Items, 来当作Gallery的数据源。
//接下来马上就会涉及到如何读取到这些数据。
 - OnSelect = Set(_selectedLeaveType, ThisItem);      // 把当前点选的对象赋值给 _selectedLeaveType 变量。下一节就会用到这个变量。
                      Navigate(SelectDatesScreen, None)     // 跳转到 SelectDatesScreen 页面

接下来，从本文最开始的截图里可以看到，这个GalleryLeaveType 里包括四个子控件：
A. Rectangle7  - 蓝色矩形框和下方的Gallery 之间的一条分割线。
之前见到的这种用于区域分割的Rectangle 控件都只会做一些样式上的设置，不过这个App里给它加了点击动作设置：
OnSelect  = Select(Parent)    //这个设置比较好理解，就是点击我就相当于点击我的上一级，这个上一级也就是刚刚提到的 GalleryLeaveType 的OnSelect设置。
B. icon5 - 右侧的 ">" 图标，设置了图标的样式文件： Icon = Icon.ChevronRight, 另外，也设置了OnSelect = Select(Parent)
C. Label12 - 文本标签，用来显示假期类型名称，设置了：Text = ThisItem.type //引用当前对象的 type值作为标签所显示的文字 。此外，也设置了OnSelect = Select(Parent)
D. Image2 - 左侧的一个图片性质的图标，设置了：Image = ThisItem.icon  //引用当前对象的 icon 值作图标 。此外，也设置了OnSelect = Select(Parent)

对于C、D 两个控件，稍加注意就能发现，抛开一个是图片一个是文字这点区别，其实它俩的性质及作用完全一样。
但这里却涉及到刚才在上面提到的从数据源里取值的问题。具体见下面的小贴士。

--------------------------------------------------------------------------------------------------------------------------------------------------
好了，页面已经解析完成。本节的内容还是比较简单的，最后就再插播一个有关集合（Collection）的小贴士吧：
选择文件菜单后，在Collections 里会看到所有当前 App 里用到的集合（如下图所示）。
结合上面 的Gallery层面设置的Items 以及刚刚提到的 Label12 和 Image2，应该可以领会到几点：
1. Items 其实就是用来设置数据源的。App 的 OnStart 里定义好这个LeaveTypeCollection 集合后，Gallery 就可以通过设置 Items 属性，指向设置好的集合，把集合作为数据源来获取并使用里面的数据。
2. 要使用数据源里的数据时，通过 " . " 这个属性选择器运算符从 Thisitem 对象里获取。比如 上面的 Image2 要获取icon 图标数据，就使用了 ThisItem.icon

想更清楚的理解这里的运作方式，可以在GalleryLeaveType里添加一个Label控件，你会发现系统会自动的把集合里的description 数据读取出来。
同时，在GalleryLeaveType的属性界面上，点击Fields的编辑按钮，也能看到集合里的三个字段全都列出来了（没加这个Lable控件之前，只有icon 和 type两个字段）。

好了，本节到此正式结束，下一节我们将开启下个新页面的解析，待续。。。
----------------------------------------------------------------------------------------------------