[Three20] Three20 模組架構簡介(下)

延續上一篇文章的介紹,在這次的文章中我們將繼續探索Three20的UI部份,這也是Three20中最令開發人員喜愛的部份。
評論
評論

延續上一篇文章的介紹,在這次的文章中我們將繼續探索 Three20 的 UI 部份,這也是 Three20 中最令開發人員喜愛的部份。

整體架構圖

在開始之前,我們先複習一下 Three20 的階層架構,我們在先前的文章中介紹了 Three20Core、Three20UICommon 和 Three20Network 這三個底層 framework,而這一次我們將轉到上面三個比較高階、與 UI 相關的 framework,也是 Three20 讓人感到最驚奇、最強大的部份。

------------------------------------------ |                    UI                  | ------------------------------------------ | UINavigator  |            |   Style    | |--------------|            |------------| |   UICommon   |            |  Network   | ------------------------------------------ |                   Core                 | ------------------------------------------

Three20UINavigator

在 Three20 中一個很重要的創新突破便是 URL-based navigation,透過這個機制我們可以將程式中原本切換畫面(Push、ModalView、TabBar)的繁瑣程式碼,簡化為開啟 URL 的動作。 這個概念對 Web 開發者而言應該相當熟悉,誠如我們在 Three20 介紹文章中提到過,Three20 的誕生起源於 Facebook 的 iPhone 版應用程式,所以我們很容易在 Three20 這個 framework 中看到許多關於 Web framework 的概念。 在 Three20UINavigator 中我們可以看到以下類別:

  • TTBaseNavigator -- 負責開啟 URL 的工作,只有部份功能、完整的 TTNavigator 則包含在 Three20UI 中
  • TTURLAction -- 除了要開啟的 URL 位置外,也有一些其他的 Property 可以設定、作為開啟 URL 的選項
  • TTURLMap -- 負責 URL 與 View Controllers 之間的轉換、Mapping

除此之外,Three20UINavigator 也有提供一些取得 Frame、Bounds 以及狀態列高度的方法,有興趣的讀者可以參考 TTGlobalNavigatorMetrics.h 這隻檔案中的內容。 URL-Based Navigation 的內容較多,筆者會在未來另外撰文解釋、說明。

Three20Style

除了上述提到的 URL-based Navigation 外,Three20 也引入了一個在 Web 開發上相當常見的 Stylesheet 概念。一般而言,我們若是在 iPhone 上面設計使用者介面時,必須針對每一個 UI 元件手動設定樣式,像是文字的字體、大小,或者是工具列的顏色等等。然而透過 TTStyle 和 TTStyleSheet 的設定,就可以免除我們每次重複設定 UI 元件樣式的麻煩。 此外,也有 TTStyleLayout、TTStyleText 等相關的類別,和一些 UIKit 的新增方法,像是:

  • UIImage
    • -- (UIImage*)transformWidth:(CGFloat)width height:(CGFloat)height rotate:(BOOL)rotate; -- 轉換圖片大小、旋轉圖片
    • -- (void)drawInRect:(CGRect)rect radius:(CGFloat)radius; -- 畫出有圓角的圖案
  • UIColor
    • -- (UIColor*)highlight; -- 回傳一個比現有顏色在更亮的顏色
    • -- (UIColor*)shadow; -- 同上,不過相反地回傳一個較暗的顏色
    • -- (UIColor*)copyWithAlpha:(CGFloat)newAlpha; -- 回傳一個同樣的顏色,但 alpha 不同

關於 Style 的部份的內容筆者也同樣會另外撰文介紹,敬請期待。

Three20UI

在先前 framework 的層層堆疊後,總算是到了最上層、也是最重要的 Three20UI 了。Three20UI 這個 framework 中包含了相當多的類別,大概可以分成三類:

  • UIKit 內建類別的新增方法
  • Three20 新增的 View Controllers
  • Three20 新增的 UI 元件

以 UIKit 的新方法而言, 以下幾個是比較有趣、值得注意的:

  • UINavigationController
    • -- (void)pushViewController:(UIViewController*)controller animatedWithTransition:(UIViewAnimationTransition)transition; -- 加入新的 Controller、但是使用非預設的動畫效果
    • -- (UIViewController*)popViewControllerAnimatedWithTransition:(UIViewAnimationTransition)transition; -- 同上、但是是移除 Controller
  • UITabBarController
    • -- (void)setTabURLs:(NSArray*)URLs; -- 傳入一組 URL 作為 tabs
  • UITableView
    • -- (void)scrollToTop:(BOOL)animated; -- 將 Table 捲動到最上方
    • -- (void)scrollFirstResponderIntoView; -- 捲動到目前開啟虛擬鍵盤的元件
  • UIView
    • -- (void)removeAllSubviews; -- 移除全部 subviews
  • UIWebView
    • -- (CGRect)frameOfElement:(NSString*)query; -- 回傳某 DOM 物件的 frame,傳入值為一 JavaScript expression

而 Three20UI 中所提供的額外 View Controllers 也是相當的豐富,像是:

  • TTViewController -- Three20 所使用的 View Controller 基礎類別
  • TTWebViewController -- 一個功能完整的網頁瀏覽 Controller
  • TTActionSheetController -- 將 UIActionSheet 包裝成 Controller 的形式,傳入 URL 作為按鈕
  • TTAlertController -- 同上,將 UIAlertView 包裝成 Controller 方便使用

另外還有許多 View Controller,有興趣的讀者可以參考先前介紹文章中的螢幕截圖、還有 TTCatlog 這個範例程式。

結論

在這兩篇文章中我們針對了 Three20 的各個模組做了一個概要性的簡介,在下一篇文章中我們將談談 Three20 中的額外擴充 framework,也就是 JSON/XML framework,還請各位讀者多多指教。


台達電子 5G 智慧工廠應用落地,升級智能產線助產值提升 75%

台達電子看見智造新力量,在遠傳 5G 專長助力下,打造全國首座 5G 智慧工廠,導入 5G 專網、人工智慧與物聯網應用於實際廠房。以下且看遠傳與台達如何達成 5G 智慧化產線,建構產能進化加速器。
評論
photo credit:遠傳
評論

5G 商用啟動為智慧製造注入強大動能,高網速、低延遲、廣連結的特點成為製造業轉型的關鍵引擎。台達電子看見智造新力量,在遠傳 5G 專長助力下,打造全國首座 5G 智慧工廠,導入 5G 專網、人工智慧與物聯網應用於實際廠房。

台達產線自動化再升級,結盟遠傳 5G 實力締佳績  

台達深耕工業自動化領域 20 多年,積極實現智慧製造系統。5G 技術作為實現工業 4.0 的關鍵能達成更即時、精準的製程,提升產能效率,與台達推動智慧製造目標相契合,因此早在 5G 開台前台達即與遠傳一拍即合,成為國內投入 5G 智慧工廠的領先群。

台達在遠傳 5G 網路技術的支持下,率先於台達桃園一廠內生產線實際導入5G專網、AGV無人搬運車、AMR 自主移動機器人、AI 瑕疵檢測數據分析、AI 產線平衡(AI Line Balancing)、智慧監控(Smart Auditor)、MR 混合實境等先進應用,這條 5G 商用生產線的示範廠已於今年正式對外公開展示,以 5G 做為生產線核心,成功打造全國第一座 5G 智慧工廠。

photo Credit:遠傳

5G 商用生產線全運轉,滿足工廠產線快速配置、提升產能效率  

首個 5G 商用生產線即是架構在遠傳高可靠度、高覆蓋率、高客製化的 5G 企業專網,在廠房區域裡,台達 AMR 自主移動機器人透過 5G 與管理平台交換資料,於生產過程中智慧化人機協同作業,大幅縮減生產工時,並依據監測資訊即時下達指令,提高產能。

台達具工控產品的成熟開發能力,廠內產線的工作站有不同對應的機台,且機台設備各不同,為要能達到快速切換、少量多樣的效能,以遠傳 5G 導入 AI 產線平衡是關鍵一環。在切換產線之際,製程監視器須動態且彈性更換,同時落實 Smart Auditor,以智慧監控系統指派工作站,進而透過影像辨識確保操作、流程正確性,提升產能最佳化。

Photo Credit:台達

透過 5G 技術,場域內的生產機器、設備與運輸載具更智慧化,採用 AI 瑕疵檢測數據分析,藉由 5G 即時傳送製程檢測產生的資料,進行大數據分析而能快速遠端調整製程,有助於提高檢測精準度、產品良率與產能。

遠距廠房管理無國界 遠傳 5G 專網成智造進化加速器

實際上,這次 5G 商用生產線也導入 Microsoft HoloLens 混合實境與物聯網數位雙生科技,達成 5G MR 遠距廠房管理、維修與監控,能加速人員培訓與經驗傳承,透過遠端產線巡檢,減少人工作業維護。

台達副總裁暨企業策略業務發展和聯盟總經理柯淑芬博士表示:「台達 5G PLC 智慧產線串聯智能機台結合遠傳 5G 通訊,打造完整自動化系統,以大數據優化流程,提高整體智能產線效益,在單位面積產值提升 75%,而在人均產值提升 69%,實測成果亮眼,相信與遠傳持續合作能創造更強大製造競爭力。」

內圖三-5G專網
Photo Credit:遠傳

遠傳 5G 專網穩定又安全性高的效能、具備資料傳輸與場域空間規劃的高機動性、以及高度彈性的特質,成為解決製造業少量多樣、高頻換線的突破性關鍵,能夠一舉達成 AGV 跨區運送、MR 輔助備料與組裝、AOI 深度學習等產能提升的效益。近年來遠傳發揮 5G 專長持續發展遠傳大人物(大數據、人工智慧、物聯網)技術,結合產業需求發展,提供創新應用的解決方案,成為企業數位轉型的首選夥伴。

Photo Credit:遠傳

本文章內容由「遠傳」提供,經關鍵評論網媒體集團廣編企劃編審。