Commencez par le modèle de scènes du Mac

Ce cas d’usage vous aide à transformer une idée d’application en une interface conçue dès le départ pour le Mac. Vous évitez ainsi de transposer sur grand écran une navigation pensée pour le tactile. Demandez d’abord à Codex de choisir le modèle de scènes, puis de concevoir la fenêtre principale avec une barre latérale qui conserve la sélection, un volet de détail et un inspecteur pour les commandes secondaires ou les métadonnées.

Utilisez le plugin Build macOS Apps pour que Codex adopte cette structure de bureau et privilégie la ligne de commande pour compiler et lancer l’application à chaque itération. Son skill consacré aux pratiques SwiftUI sur macOS convient à la conception des scènes, des barres latérales, des inspecteurs, des commandes et des réglages. Il couvre aussi les intégrations ciblées avec AppKit lorsqu’un comportement propre au Mac dépasse les possibilités de SwiftUI.

Créez une barre latérale, un volet de détail et un inspecteur

Privilégiez NavigationSplitView lorsque la fonctionnalité gagne à garder la navigation visible et à conserver la sélection. Utilisez des lignes natives et simples dans la barre latérale, conservez les arrière-plans du système et réservez les cartes personnalisées ou les métadonnées détaillées au volet de détail ou à l’inspecteur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62import SwiftUI

struct Item: Identifiable, Hashable {
  let id: String
  let title: String
  let systemImage: String
}
let items = [Item(id: "notes", title: "Notes", systemImage: "note.text"), Item(id: "photos", title: "Photos", systemImage: "photo")]

struct ItemDetailView: View {
  let selection: String?
  var body: some View { Text(selection ?? "Select an item").frame(maxWidth: .infinity, maxHeight: .infinity) }
}
struct ItemInspectorView: View {
  let selection: String?
  var body: some View { Text("Metadata: \(selection ?? "No selection")").padding().frame(minWidth: 220) }
}
@MainActor final class LibraryStore: ObservableObject {
  @Published var entries = items
  @Published var selection: String?
  @Published var showInspector = true
  func addItem() {
    let item = Item(id: UUID().uuidString, title: "New Item", systemImage: "doc")
    entries.append(item)
    selection = item.id
  }
}

struct LibraryRootView: View {
  @StateObject private var store = LibraryStore()
  @SceneStorage("LibraryRootView.selection") private var savedSelection: Item.ID?
  @SceneStorage("LibraryRootView.showInspector") private var savedShowInspector = true

  var body: some View {
    NavigationSplitView {
      List(selection: $store.selection) {
        ForEach(store.entries) { item in
          Label(item.title, systemImage: item.systemImage)
            .tag(item.id)
        }
      }
      .listStyle(.sidebar)
      .navigationTitle("Library")
    } detail: {
      ItemDetailView(selection: store.selection)
        .inspector(isPresented: $store.showInspector) {
          ItemInspectorView(selection: store.selection)
        }
    }
    .focusedSceneObject(store)
    .onAppear {
      store.selection = savedSelection
      store.showInspector = savedShowInspector
    }
    .onChange(of: store.selection) { _, selection in
      savedSelection = selection
    }
    .onChange(of: store.showInspector) { _, showInspector in
      savedShowInspector = showInspector
    }
  }
}

Si l’application exige un dimensionnement particulier des volets, une coordination de bas niveau entre les fenêtres ou un comportement personnalisé de la chaîne de répondants, demandez à Codex de conserver la structure SwiftUI et de limiter l’intégration d’AppKit au strict nécessaire pour ce besoin précis.

Intégrez les commandes, les barres d’outils et les raccourcis clavier à l’interface Mac

Sur Mac, les utilisateurs doivent pouvoir repérer les actions importantes dans la barre des menus et la barre d’outils, et découvrir les raccourcis clavier associés. Demandez à Codex de relier les commands de la scène, les éléments de menu qui varient selon le contexte et les boutons de la barre d’outils aux mêmes actions de l’application. Les utilisateurs peuvent ainsi accéder à ces actions sans avoir à découvrir le geste qui les déclenche.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28@main
struct LibraryApp: App {
  @FocusedObject private var store: LibraryStore?
  var body: some Scene {
    WindowGroup {
      LibraryRootView()
    }
    .commands {
      CommandMenu("Library") {
        Button("New Item") {
          store?.addItem()
        }
        .keyboardShortcut("n")
        .disabled(store == nil)

        Button("Toggle Inspector") {
          store?.showInspector.toggle()
        }
        .keyboardShortcut("i", modifiers: [.command, .option])
        .disabled(store == nil)
      }
    }

    Settings {
      LibrarySettingsView()
    }
  }
}

Utilisez FocusedValue, l’état de la scène ou un état de sélection explicite lorsqu’une commande doit s’appliquer à l’élément affiché dans le volet de détail. Si un même raccourci risque d’être déclaré à plusieurs endroits, demandez à Codex de centraliser sa gestion pour que l’application achemine la commande par un seul chemin.

Regroupez les préférences dans Settings

Pour les préférences de l’application, utilisez une scène Settings dédiée et enregistrez avec @AppStorage les choix de l’utilisateur à conserver d’une session à l’autre. Cette approche correspond généralement mieux aux usages du Mac que l’ajout d’un écran de réglages dans la navigation de la fenêtre principale.

1
2
3
4
5
6
7
8
9
10
11
12
13
14struct LibrarySettingsView: View {
  @AppStorage("showItemMetadata") private var showItemMetadata = true

  var body: some View {
    TabView {
      Form {
        Toggle("Show Item Metadata", isOn: $showItemMetadata)
      }
      .tabItem { Label("General", systemImage: "gearshape") }
    }
    .frame(width: 460, height: 260)
    .scenePadding()
  }
}

Décrivez l’application dans votre prompt, puis validez sa structure

Pour tirer le meilleur parti de cette démarche, précisez dans votre prompt l’idée de l’application, les principaux objets qu’elle manipule et les actions essentielles. Demandez ensuite à Codex de commencer par construire l’interface de bureau autour de ce workflow. Faites compiler et lancer l’application par l’agent pour une vérification rapide. Demandez-lui de résumer l’organisation des scènes, les liens entre les commandes et les actions, les composants responsables de l’état et les comportements qui ont nécessité une intégration avec AppKit.

Conseils pratiques

Conservez l’aspect natif de la barre latérale

Pour chaque élément de la barre latérale, utilisez une icône, un titre sur une ligne et, au plus, une courte ligne de texte secondaire. Placez les cartes plus détaillées, les compteurs et les métadonnées dans le volet de détail ou l’inspecteur pour que la liste reste facile à parcourir d’un coup d’œil.

Rendez les réglages accessibles en dehors de la navigation principale

Si une préférence s’applique à toute l’application, demandez à Codex de placer le contrôle correspondant dans Settings, d’enregistrer sa valeur avec @AppStorage et de le rendre accessible depuis le menu de l’application. Vous évitez ainsi d’ajouter un écran de réglages à la pile de navigation.

Réservez AppKit aux besoins spécifiques du Mac

Si la fonctionnalité nécessite des panneaux d’ouverture ou d’enregistrement, la gestion du premier répondant ou une vue NSView personnalisée, limitez l’utilisation d’AppKit à ce besoin. SwiftUI conserve ainsi la gestion du modèle d’état, sans que vous ayez à réécrire toute la fenêtre avec AppKit.