SAP Fiori For iOS - 任务管理应用 - 开发

前言

在上文中我们介绍了这个任务管理应用的设计,在本文中将开始开发工作.开发会使用 swift 语言,所以如果对 iOS 开发不是很熟悉的,可是先看看 swift 语言的相关资料.

需要使用到的控件一览

• 框架: 在本例中,我们会使用到一下框架
  • SAPCommon
  • SAPFiori
• 应用到的组件
  • FUITimelineCell: 应用UIKit 中的 tableViewController, 在 cell 中使用该组件,可以方便的显示 timeline
  • FUIObjectHeader: 在任务详细信息中,显示任务的抬头信息
  • FUISegmentedControlFormCell: 在任务详细信息界面,显示 segemnt 的选择组件
  • FUISimplePropertyFormCell: 在任务详细信息界面中显示一些简单的属性组件

创建项目

在 xcode 中新建一个项目:

创建 model

新建一个 model 的 swift 文件,用来放置我们的测试数据,在真实的应用中,这些数据应该是从其他系统的 service 中读取,在本例中,我们直接使用固定的数据,代码如下:

import Foundation
import UIKit
struct TasksData {
    enum TaskStatus {
        case low
        case medium
        case high
    }
    struct Task {
        let title: String
        let desciption: String
        let dueDate: String
        let favorateImage: UIImage?
        let priorityImage: UIImage?
        let priorityValue: Int
        let timeFrame: String
        let timeFrameValue: Int
        let status: UIImage?
    }
    static let tasks: [Task] = [Task(title: "任务1 - 收集资料", desciption: "收集关于SAP FIORI for iOS的开发资料", dueDate:"4月7日",favorateImage: #imageLiteral(resourceName: "favorate"), priorityImage: #imageLiteral(resourceName: "highPrio"),priorityValue: 2,timeFrame: ">1 H",timeFrameValue: 2, status: #imageLiteral(resourceName: "complete")),
                                Task(title: "任务2 - 整理资料", desciption: "整理关于SAP FIORI for iOS的开发资料", dueDate:"4月8日",favorateImage: #imageLiteral(resourceName: "favorate"), priorityImage: #imageLiteral(resourceName: "mediumPrio"),priorityValue: 1, timeFrame: "<1 H",timeFrameValue: 1, status: #imageLiteral(resourceName: "complete")),
                                Task(title: "任务3 - 研究开发框架", desciption: "SAP Cloud Platform SDK的框架研究", dueDate:"4月9日",favorateImage: #imageLiteral(resourceName: "nonFav"), priorityImage: #imageLiteral(resourceName: "highPrio"),priorityValue: 2, timeFrame: "<0.5 H",timeFrameValue: 0, status: #imageLiteral(resourceName: "open")),
                                Task(title: "任务4 - 撰写初步文章", desciption: "写一篇关于SAP FIORI for iOS的文章草稿部分", dueDate:"4月10日",favorateImage: #imageLiteral(resourceName: "nonFav"), priorityImage: #imageLiteral(resourceName: "lowPrio"),priorityValue: 0, timeFrame: ">1 H",timeFrameValue: 2, status: #imageLiteral(resourceName: "open")),
                                Task(title: "任务5 - 收集文章需要的素材", desciption: "官网，开发手册，SDK 文档，图标", dueDate:"4月11日",favorateImage: #imageLiteral(resourceName: "nonFav"), priorityImage: #imageLiteral(resourceName: "mediumPrio"),priorityValue: 1, timeFrame: "<1 H",timeFrameValue: 1, status: #imageLiteral(resourceName: "open")),
                                Task(title: "任务6 - 完成最终文章", desciption: "草稿和素材结合，完成最终稿文章", dueDate:"4月12日",favorateImage: #imageLiteral(resourceName: "favorate"), priorityImage: #imageLiteral(resourceName: "highPrio"),priorityValue: 2, timeFrame: ">1 H",timeFrameValue: 2, status: #imageLiteral(resourceName: "complete")),
                                Task(title: "任务7 - 发布文章", desciption: "发布文章到微信，微博，简书", dueDate:"4月13日",favorateImage: #imageLiteral(resourceName: "nonFav"), priorityImage: #imageLiteral(resourceName: "lowPrio"),priorityValue: 0, timeFrame: "<0.5 H",timeFrameValue: 0, status: #imageLiteral(resourceName: "open"))]
    
}

屏幕开发

• 打开 storyboard, 创建两个 table view controller, 其中一个作为任务清单,一个作为显示任务详细信息的界面.把任务清单的TableViewController 放到 navigationController 之中,作为应用的启动画面.

  
  

• 将任务清单中的 cell 关联到 SAPFiori 中的FUITimelineCell

  
  

第一个屏幕的 controller

新建一个 controller, 关联到任务清单的 TableView.该 controller 主要用于显示任务的清单,在使用 SAPFiori 的地方主要是 cell 的操作.
let cell = tableView.dequeueReusableCell(withIdentifier: FUITimelineCell.reuseIdentifier,for: indexPath) as! FUITimelineCell,然后把数据赋值到 cell 中,显示出来.
全部代码如下:

import UIKit
import SAPFiori

class TaskListTableViewController: UITableViewController {

    var tasks: [TasksData.Task] = TasksData.tasks
    var selectedTask = TasksData.Task(title: "", desciption: "", dueDate:"",favorateImage: nil, priorityImage: nil,priorityValue: 0, timeFrame: "",timeFrameValue: 0, status: nil)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.estimatedRowHeight = 120
        self.tableView.rowHeight = UITableViewAutomaticDimension

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return tasks.count
    }


    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let task = tasks[indexPath.row]
        let cell = tableView.dequeueReusableCell(withIdentifier: FUITimelineCell.reuseIdentifier,
                                                 for: indexPath) as! FUITimelineCell
        cell.headlineText = task.title
        cell.subheadlineText = task.desciption
        cell.eventText = task.dueDate
        cell.subStatusText = task.timeFrame
        cell.nodeImage = task.status
        cell.eventImage = task.favorateImage
        cell.statusImage = task.priorityImage
        return cell

    }
    
    override func tableView(_ tableView: UITableView, willSelectRowAt indexPath: IndexPath) -> IndexPath? {
        selectedTask = tasks[indexPath.row]
        return indexPath
    }


    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
        if segue.identifier == "showDetail" {
            if let detailVC = segue.destination as? TaskDetailTableViewController {
                detailVC.taskDetail = selectedTask
            }
        }
    }

}

第二个屏幕的conroller

在第二个屏幕中,主要使用到了 objectHeader 以及一些简单的 table cell, 在屏幕加载的过程中,把上一个屏幕选择的 item 中的详细信息显示出来.

let objectHeader = FUIObjectHeader()
        objectHeader.detailImageView.image = #imageLiteral(resourceName: "favorate")
        objectHeader.headlineLabel.text = taskDetail.title
        objectHeader.subheadlineLabel.text = taskDetail.desciption
        objectHeader.footnoteLabel.text = taskDetail.dueDate
        objectHeader.substatusImageView.image = taskDetail.priorityImage

这个详细显示使用的是静态 table, 并且已经放好 section 以及 cell, 只要把我们需要使用的 SAPFiori 的 cell 类型放进去即可.
SegmentControl:
let cell = tableView.dequeueReusableCell(withIdentifier: "prioritySegment", for: indexPath) as! FUISegmentedControlFormCell
SimpleProperty:
let cell = tableView.dequeueReusableCell(withIdentifier: FUISimplePropertyFormCell.reuseIdentifier, for: indexPath) as! FUISimplePropertyFormCell

全部代码如下:

import UIKit
import SAPFiori
import SAPCommon

class TaskDetailTableViewController: UITableViewController {
    let buttonTitles: [[String: String]] = [["LO": "Low"], ["MED": "Medium"], ["HI": "High"]]
    let needTimeTitles: [[String: String]] = [["LO": "< 0.5 H"], ["MED": "< 1 H"], ["HI": "> 1 H"]]
    var taskDetail = TasksData.Task(title: "", desciption: "", dueDate:"",favorateImage: nil, priorityImage: nil,priorityValue: 2, timeFrame: ">1 H",timeFrameValue: 2, status: nil)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let objectHeader = FUIObjectHeader()
        objectHeader.detailImageView.image = #imageLiteral(resourceName: "favorate")
        objectHeader.headlineLabel.text = taskDetail.title
        objectHeader.subheadlineLabel.text = taskDetail.desciption
        objectHeader.footnoteLabel.text = taskDetail.dueDate
        objectHeader.substatusImageView.image = taskDetail.priorityImage
        self.tableView.tableHeaderView = objectHeader
        self.tableView.register(FUISegmentedControlFormCell.self, forCellReuseIdentifier: "prioritySegment")
        self.tableView.register(FUISegmentedControlFormCell.self, forCellReuseIdentifier: "needTime")
        self.tableView.register(FUISimplePropertyFormCell.self, forCellReuseIdentifier: FUISimplePropertyFormCell.reuseIdentifier)
        self.tableView.register(FUISimplePropertyFormCell.self, forCellReuseIdentifier: "executionPeople")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 2
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        if section == 0{
            return 3
        }else{
            return 1
        }
    }
    

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.section == 0{
            if indexPath.row == 0{
                let cell = tableView.dequeueReusableCell(withIdentifier: "prioritySegment", for: indexPath) as! FUISegmentedControlFormCell
                cell.valueOptions = buttonTitles.flatMap { $0.map { $0.value } }
                cell.keyName = "优先级"
                cell.value = taskDetail.priorityValue
                cell.isUserInteractionEnabled = false
                return cell
            }else if indexPath.row == 1{
                let cell = tableView.dequeueReusableCell(withIdentifier: FUISimplePropertyFormCell.reuseIdentifier, for: indexPath) as! FUISimplePropertyFormCell
                cell.keyName = "截止日期"
                cell.value = taskDetail.dueDate
                return cell
            }else{
                let cell = tableView.dequeueReusableCell(withIdentifier: "needTime", for: indexPath) as! FUISegmentedControlFormCell
                cell.valueOptions = needTimeTitles.flatMap { $0.map { $0.value } }
                cell.keyName = "需要时间"
                cell.value = taskDetail.timeFrameValue
                cell.isUserInteractionEnabled = false
                return cell
            }
        }else{
            let cell = tableView.dequeueReusableCell(withIdentifier: "executionPeople", for: indexPath) as! FUISimplePropertyFormCell
            cell.keyName = "执行者"
            cell.value = "张三"
            cell.accessoryType = .disclosureIndicator
            return cell
        }
    }
}

屏幕间流转以及传递参数

在清单到详细信息的屏幕流转中,我们需要把选择的任务传递到详细屏幕,在 segue 的时候,把详细信息 controller 中的变量赋值:

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
        if segue.identifier == "showDetail" {
            if let detailVC = segue.destination as? TaskDetailTableViewController {
                detailVC.taskDetail = selectedTask
            }
        }
    }

真机测试

• 任务清单界面:

  
  

• 任务详细信息界面

  
  

结语

整体来说,该应用十分的简单,因为目前只做到显示固定数据,没有任何添加删除或者修改的功能,在后续的文章中,我会慢慢的把这些功能添加上去.

代码下载
Github 代码下载