续接上一节,下面我们继续拆解请假申请的后续页面。
本节要拆解的是ReviewScreen,先来看页面总体结构。
-
页面结构
如下图,这个页面的作用是用来汇总之前几个页面输入的所有信息,好让申请人做提交前的检查确认。若检查无误就点按钮提交申请。页面主体由一个Gallery控件构成,罗列了前几个页面的信息输入。 -
控件解析
拆解具体每个控件前,还是先看看整个Screen层面,设置了:
OnVisible = Set(_editingRequest, false); Set(_reviewRequest, true)//设置了两个变量的布尔值,根据之前几节的分析,应该能知道这个页面肯定也会有不同的状态,然后会根据这两个变量来控制页面是否可见。
2.1 BtnBackReviewScreen - 返回按钮
还是两个基础属性的设置:-
Icon = Icon.ChevronLeft-
OnSelect = Back()2.2 LblReviewScreenHeader - 页面标题, 设置固定的文字标签, Text = “Review”
2.3 Rectangle9_13 - 分区线条
2.4 BtnSubmitRequest - 页面底部的提交按钮
-
Text = “Submit Request”-
OnSelect =//设置了两个动作,先把变量 _submittingRequest设为 True, 然后跳转到确认页面。
Set(_submittingRequest, true);//下一个确认页面就会用到这个设定
Navigate(ConfirmationScreen, None);2.5 Gallery1_2
-
Items =//这里是Gallery数据源的设置,和之前第六节的GalleryLeaveType一样,这里使用了 Table 来提供数据。
//表格包括六行,每行四个字段: Header,Value,Image 和 Row。前三个字段用来接收用户提交请假申请时的输入,最后一个Row字段马上会提到。
Table(
{Header: “Title”, Value: AboutLeaveTitleInput.Text, Image: Basel_ListWatchlistRemind, Row: 1},
{Header: “Details”, Value: AboutLeaveDetailInput.Text, Image: Basel_detail_list, Row: 2},
{Header: “Total time requested”, Value: _requestedDays & " day(s)", Image: Basel_Clock, Row: -1},
{Header: “Dates”, Value: Text(LeaveStartDatePicker.SelectedDate, ShortDate) & " - " & ext(LeaveEndDatePicker.SelectedDate, ShortDate), Image: Basel_CalendarBlank,Row: 3},
{Header: “Leave type”, Value: _selectedLeaveType.type,Image: _selectedLeaveType.icon, Row: 4},
{Header: “Request sent to”, Value: _defaultApprover.UserPrincipalName, Image: _defaultApproverPhoto,Row: 5})
2.6 icon2_2 - " > " 图标
本节最开始提到,这个页面的作用是让申请人检查输入的信息是否有错误,这个按钮就是当申请人发现输入错误后,好点击跳转到相应条目的编辑界面,进而完成对输入信息的修正。按钮设置了:-
OnSelect = If(
ThisItem.Row = 1 || ThisItem.Row = 2, Navigate(LeaveDetailsScreen,ScreenTransition.None),
ThisItem.Row = 3, Navigate(SelectDatesScreen,ScreenTransition.None),
ThisItem.Row = 4, Navigate(EditLeaveTypeScreen,ScreenTransition.None),
ThisItem.Row = 5, Navigate(SelectApproverScreen,ScreenTransition.None))
//这里就能看到 Row 这个字段的作用了,可以把它理解成是一个标识符,让App 可以通过它识别出用户点击的是哪个条码,进而跳转到相对应的编辑页面进行信息修正。
另外,细心的朋友应该也会注意到,上面 Table里的第三行设置了 Row = -1; 同时,注意到在这个页面的结构图里,第三行是没有显示出这个 " > " 图标的。看一下图标的Visible 属性设置,就能看到原因。
-
OnVisible = ThisItem.Row >=0//所以,Row=-1其实还是可以认为是被当成一个标识符,用来执行一些逻辑判断操作
2.7 Image3_2 - 假期类型图标
-
Image = ThisItem.Image-
OnSelect = Select(Parent)2.8 Label8_2 -
-
Image = ThisItem.Image-
OnSelect = Select(Parent)2.9 Label6_2 -
-
Image = ThisItem.Image-
OnSelect = Select(Parent)2.10 Rectangle9_15 - 页面区域分区线
最后这2.7到2.9三个控件有些似从相识吧,没印象的朋友可以参考一下第6节里第2.6个控件的C、D两个子控件以及最下面的小贴士。
本节就到这里,下一节我们将完成新建申请的流程解析,然后做一个小结,待续。。。