Project Structure

The enClose framework features a clean, logical structure that separates native Swift code from web content while enabling seamless communication between them. The project is organized into two main sections:

• The native Swift files that handle platform-specific functionality.
• The web directory containing HTML, CSS, and JavaScript files that create the user interface and application logic.

Directory Structure

enClose/
├── enClose.xcodeproj
├── enClose/
│   ├── AppDelegate.swift
│   ├── SceneDelegate.swift
│   ├── MainViewController.swift
│   ├── ExternalDisplayViewController.swift
│   ├── ...
└── www/
    ├── assets/
    │   ├── js/
    │   │   ├── enClose.js
    │   │   └── ...
    │   ├── css/
    │   └── images/
    ├── index.html
    └── display.html

Native Code (Swift)

AppDelegate.swift

This file serves as the application's entry point and central manager. It handles crucial lifecycle events, such as app launch, termination, and transitions between active, inactive, and background states.

SceneDelegate.swift

This file is the conductor of app's user interface. Unlike the all-encompassing AppDelegate, SceneDelegate focuses specifically on managing scenes, which are distinct instances of your app's UI.

In enClose SceneDelegate takes on the additional responsibility of managing external displays. This involves detecting when an external display is connected or disconnected, and presenting the separate web view on the external display.

MainViewController.swift

This file contains the core functionality of the framework. It manages the primary WebView and handles the communication between your web content and native code. This is where developers will implement their custom native methods that can be called from JavaScript. Any native functionality you want to expose to your web application should be added here.

ExternalDisplayViewController.swift

This controller provides support for external displays, creating a full-screen WebView on secondary screens. It enables your application to present different content on an external display, which is particularly useful for presentations, digital signage, or point-of-sale systems where a customer-facing display is needed.

TIP

The utility of a secondary display is application-specific and therefore optional.

Web Application Content

www

The www folder is the heart of your web-based application. It's where you store all the HTML, CSS, and JavaScript files that constitute the user interface and logic of your app. Essentially, this folder houses the "web" portion of your hybrid application.

index.html

This is the main HTML file loaded into the primary WebView of your application. It serves as the entry point for the web portion of your app and is displayed on the device's main screen.

display.html

This HTML file is automatically loaded on the external display WebView when a secondary screen is connected. It can contain completely different content from your main view, optimized for the use case of the external display.

enClose.js

This is the bridge between your web application and native functionality. This JavaScript file must be included in your HTML files to enable communication with the native Swift code. It provides methods to call native functions from JavaScript and handles callbacks and events from native code back to your web application.

Key Relationships

• Web-to-Native Communication: The enClose.js file provides the JavaScript API that your web application uses to trigger native functionality implemented in MainViewController.swift.

• Dual-Screen Support: The combination of MainViewController.swift and ExternalDisplayViewController.swift allows your application to present different content on the device's screen and an external display simultaneously.

• Development Workflow: Developers typically implement UI and basic functionality in HTML/CSS/JS within the www folder, while adding any required native functionality in MainViewController.swift.

This architecture allows you to leverage the strengths of both web and native development, creating applications that combine the flexibility of web technologies with the power and performance of native code.