首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> .NET 網頁程式設計 >> 關於.NET

使用 Visual Studio LightSwitch 打造現代化行動商務生產力應用程式

     編輯:關於.NET

簡介:輕量級開發的新選擇

在企業級應用程式開發領域,Visual Studio LightSwitch(以下簡稱 LightSwitch)一直致力於簡化並縮短業務應用程式的建構流程。它支援多樣化的資料來源、內建商業邏輯與授權機制,並能自動產生可跨裝置運行的用戶端介面——這一切都不需要撰寫繁瑣的管道程式碼。隨著 Visual Studio 2012 Update 2 的釋出,LightSwitch 更進一步支援快速生成適合觸控操作、在現代行動裝置上流暢運行的 HTML5 用戶端,並與 SharePoint 2013 應用程式模型深度整合,為企業開發者帶來全新的生產力體驗。

LightSwitch HTML 用戶端:觸控優先的單頁應用體驗

LightSwitch 的開發流程始終以資料模型為起點,無論是建模新資料還是連接現有資料源。HTML 用戶端採用符合標準的 HTML5 與 JavaScript 技術棧,能在 Windows RT、Windows Phone 8、iOS 5/6 及 Android 4.x 等平台上提供觸控優先的現代化體驗。這類應用通常被稱為「輔助應用程式」,意指它們在較大的架構中扮演特定角色——例如現場瀏覽會議議程、掃描包裹簽名、記錄土壤採樣地理位置等——協助企業節省時間與成本。

畫面模板與導航設計

LightSwitch 使用預定義的畫面模板來定義使用者介面。開發者只需在「方案總管」中右鍵選擇「新增畫面」,即可從對話框中挑選模板、命名畫面並指定資料來源。設計工具採用 MVVM(Model-View-ViewModel)架構,左側顯示視圖模型,右側呈現對應的視圖表現,學習曲線平緩。

值得關注的是,HTML 用戶端生成的是單頁應用程式(SPA),因此畫面間的導航成為核心互動。設計工具將「編輯項目點擊動作」等觸控事件綁定提升為第一等公民,開發者可直觀設定從列表跳轉至詳細資訊、彈出篩選面板等行為,無需手寫路由程式碼。

設定觸控事件的操作現在是畫面設計器中的頭等大事
圖 1:設定觸控事件的操作現在是畫面設計器中的頭等大事

自適應佈局與虛擬化集合

執行應用程式(F5)後,主畫面顯示虛擬化的議程列表——隨使用者向下滾動動態載入更多項目,避免在行動網路下傳輸過多資料。兩欄式詳細資訊佈局會根據裝置螢幕大小自動切換為單欄,完美適應從手機到平板的各種外形尺寸。這種自適應設計背後的理念,詳見 LightSwitch 團隊部落格文章「針對多種外形尺寸進行設計」。

自適應設計幫助只需編寫一個應用程式即可用於多種外觀尺寸
圖 2:自適應設計幫助只需編寫一個應用程式即可用於多種外觀尺寸

彈出視窗、索引標籤與篩選器實作

畫面設計器鼓勵使用彈出視窗與索引標籤,兩者皆擁有獨立的命令列。以新增議程篩選器為例:先在查詢編輯器中加入可選參數(講者、會議室、時段、音軌),再將這四個視圖模型屬性拖曳至新建的彈出視窗,LightSwitch 自動建議使用 Modal Picker 控制項。最後在命令列加入按鈕並綁定開啟彈出視窗的動作,即可完成功能強大的篩選面板——全程無需撰寫一行程式碼。

添加後起作用的篩選器
圖 3:新增並生效的篩選器介面

深度自訂:品牌、主題與 PostRender 擴展點

雖然無程式碼開發極大提升效率,但 LightSwitch 並未犧牲擴充性。開發者可輕鬆替換 Logo(.png 檔案)、套用 jQuery Mobile 主題(內建淺色/深色兩套,可透過 ThemeRoller 進一步客製),並透過 PostRender 方法在執行時動態修改 HTML 元素樣式。例如,根據議程所屬音軌的顏色變更列表列背景,並自動判斷前景色深淺以確保文字可讀性:

myapp.Home.NextSessionsTemplate_postRender = function (element, contentItem) {
    $(element).parent("li").css("background", contentItem.value.Track.Color);
    $(element).addClass(
        (parseInt(contentItem.value.Track.Color.replace("#", ""), 16) > 0xffffff / 2)
            ? 'darkForeground' : 'lightForeground'
    );
};

更進一步,開發者可將控制項標記為自訂控制項,在 Render 方法中完全掌控呈現邏輯——例如將音軌色碼繪製為圖例方塊,或將即將舉行的議程轉化為動態橫幅輪播。

主畫面的三種不同設計
圖 4:主畫面的三種不同設計風格

控制流與業務規則的程式碼擴展點

LightSwitch 在視圖模型與模型層提供豐富的程式碼擴展點。例如,當使用者在首頁橫幅點擊某音軌時,自動切換至第二個索引標籤並套用對應篩選器:

myapp.Home.BrowseByTrack_ItemTap_execute = function (screen) {
    screen.getTracks().then(function (tracks) {
        screen.FilterByTrack = tracks.selectedItem;
        screen.showTab("AllSessions");
    });
};

收藏功能的實作同樣優雅:透過非同步查詢判斷議程是否已被收藏,利用 CanExecute 擴展點動態顯示/隱藏「收藏」與「取消收藏」按鈕,LightSwitch 執行期會自動追蹤屬性變更並重新計算按鈕狀態,無需手動引發事件。

與 SharePoint 2013 與 Office 365 深度整合

SharePoint 2013 引入雲端應用程式模型,支援分層架構將商業邏輯、資料與 UI 分離。LightSwitch 應用程式可部署至內部部署 SharePoint 或 Office 365,利用其應用程式生命週期管理、身分識別與存取控制功能,並直接存取企業既有的商業資料與流程。

啟用 SharePoint 整合

在專案屬性中點擊「啟用 SharePoint」,指定開發用的 SharePoint 2013 網站,LightSwitch 會自動加入必要參考並透過 OAuth 處理驗證(支援 ACS 與高信任兩種模式)。

在 LightSwitch 應用程式中啟用 SharePoint
圖 5:在 LightSwitch 應用程式中啟用 SharePoint

SharePoint 清單作為 LightSwitch 實體

資料設計器可將 SharePoint 清單直接引入為實體,開發者即可透過 LightSwitch 資料內容操作清單資料,自動處理驗證與 CRUD 作業。例如,在新增議程時同步建立 SharePoint 行事曆項目:

// Visual Basic .NET 範例
Private Sub Sessions_Inserting(entity As Session)
    Me.UpdateCalendar(entity)
End Sub

Private Sub UpdateCalendar(entity As Session)
    If entity.Timeslot IsNot Nothing AndAlso entity.Room IsNot Nothing Then
        If entity.ConferenceSchedule Is Nothing Then
            entity.ConferenceSchedule = New ConferenceSchedule()
        End If
        entity.ConferenceSchedule.Title = entity.Title
        entity.ConferenceSchedule.Description = entity.Description
        entity.ConferenceSchedule.StartTime = entity.Timeslot.StartTime
        entity.ConferenceSchedule.EndTime = entity.Timeslot.EndTime
        entity.ConferenceSchedule.Location = entity.Room.Name
        Me.DataWorkspace.VSliveData.SaveChanges()
    End If
End Sub

SharePoint 用戶端物件模型 (CSOM) 擴充

啟用 SharePoint 後,完整的 CSOM 可供使用,不僅能操作清單,還能存取其他 SharePoint 資產。方案總管的「檔案檢視」中可見 SharePoint 專案,開發者可加入自訂清單、工作流等項目,並在伺服器端程式碼中透過 CSOM 操作——例如記錄議程異動的稽核日誌。

透過方案總管新增自訂清單和其他 SharePoint 項目
圖 9:透過方案總管新增自訂清單與其他 SharePoint 項目

部署模式選擇:自動裝載 vs. 提供者裝載

LightSwitch 支援兩種 SharePoint 部署模式:

  • 自動裝載:安裝時自動在 Azure 佈建網站與 SQL Database,每個安裝實例獨立隔離,卸載時資料同步刪除,適合快速原型。
  • 提供者裝載:開發者自行管理 Web 應用程式與資料庫,所有 SharePoint 實例共用中介層與資料,需自行實作多租戶隔離(LightSwitch 提供查詢管道的資料列層級篩選機制協助),並負責高可用性。

發布精靈會依選擇的模式打包部署,最終將 .app 套件上傳至 SharePoint 應用程式目錄供使用者安裝。

總結

Visual Studio 2012 Update 2 中的 LightSwitch 以 HTML5 用戶端回應 BYOD 趨勢,提供觸控優先的跨平台體驗;SharePoint 整合則釋放企業既有資產價值。兩者結合,讓開發者能以最小成本打造現代化、安全且可擴充的行動商務應用程式。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved