Apple-specific UI elements: what changed
Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.
| Old | New | Line | |
|---|---|---|---|
| 1 | - | ||
| 1 | + | [](</File:macOSlogo.png>) | |
| 2 | 2 | ||
| 3 | - | ||
| 3 | + | This article applies to [macOS](</Category:macOS> "Category:macOS") only. | |
| 4 | 4 | ||
| 5 | - | ||
| 5 | + | See also: [[Multiplatform Programming Guide]] | |
| 6 | 6 | ||
| 7 | - | ||
| 7 | + | │ **English (en)** │ | |
| 8 | 8 | ||
| 9 | - | ||
| 10 | - | ||
| 11 | - | ||
| 12 | - | ||
| 13 | - | ||
| 9 | + | ## Contents | |
| 14 | 10 | ||
| 15 | - | ||
| 16 | - | ||
| 17 | - | ||
| 11 | + | * 1 Apple main menu item | |
| 12 | + | * 2 About Box | |
| 13 | + | * 3 Fixing your application name | |
| 14 | + | * 4 How to make Apple main menu multilingual | |
| 15 | + | * 5 Adding an icon to your app bundle | |
| 16 | + | * 6 Removing the app icon from title bars | |
| 17 | + | * 7 Removing the title bar and border from a form | |
| 18 | + | * 8 Add an Apple help book to your app | |
| 19 | + | * 9 Using preferences in your application | |
| 20 | + | * 10 Menu bar | |
| 21 | + | * 11 Mac Buttons | |
| 22 | + | * 12 The Dock | |
| 23 | + | * 12.1 Hiding an application from the Dock | |
| 24 | + | * 12.2 Show Badge on application icon in Dock | |
| 25 | + | * 12.3 Bouncing an application icon in the Dock | |
| 26 | + | * 12.4 Adding menu items to an application Dock Menu | |
| 27 | + | * 13 Dialogs / Windows | |
| 28 | + | * 13.1 How to use a Drawer | |
| 29 | + | * 13.2 How to use a Sheet | |
| 30 | + | * 13.3 How to use Alert Panels | |
| 31 | + | * 13.4 About windows / About Boxes | |
| 32 | + | * 14 How to deliver user notifications | |
| 33 | + | * 15 Detecting Light or Dark mode | |
| 34 | + | * 16 See also | |
| 35 | + | * 17 External links | |
| 18 | 36 | ||
| 19 | - | ||
| 20 | - | ||
| 21 | - | ||
| 37 | + | ## Apple main menu item | |
| 22 | 38 | ||
| 23 | - | ||
| 24 | - | ||
| 25 | - | ||
| 39 | + | In each Mac application there is a main menu item with the name of the application. Lazarus will automatically add the "Services", "Hide" and "Quit" menu items to this menu. In order to add more items to this menu, create a menu item with the apple character as its Caption "" (without quotes, it is Unicode 0xF8FF). You can use ifdefs {$IFDEF DARWIN} to hide it in non-macOS. | |
| 26 | 40 | ||
| 27 | - | ||
| 28 | - | ||
| 29 | - | ||
| 30 | - | ||
| 41 | + | For example: | |
| 31 | 42 | ``` | |
| 43 | + | {$IFDEF DARWIN} | |
| 44 | + | AppMenu := TMenuItem.Create(Self); {Application menu} | |
| 45 | + | AppMenu.Caption := #$EF#$A3#$BF; {Unicode Apple logo char} | |
| 46 | + | MainMenu.Items.Insert(0, AppMenu); | |
| 47 | + | ||
| 48 | + | AppAboutCmd := TMenuItem.Create(Self); | |
| 49 | + | AppAboutCmd.Action:= ActionList1.Actions[1]; | |
| 50 | + | AppMenu.Add(AppAboutCmd); {Add About as item in application menu} | |
| 51 | + | ||
| 52 | + | AppSep1Cmd := TMenuItem.Create(Self); | |
| 53 | + | AppSep1Cmd.Caption := '-'; | |
| 54 | + | AppMenu.Add(AppSep1Cmd); | |
| 55 | + | ||
| 56 | + | AppCheckCmd := TMenuItem.Create(Self); | |
| 57 | + | AppCheckCmd.Action:= ActionList1.Actions[2]; | |
| 58 | + | AppMenu.Add(AppCheckCmd); {Add Check as item in application menu} | |
| 59 | + | ||
| 60 | + | AppSep2Cmd := TMenuItem.Create(Self); | |
| 61 | + | AppSep2Cmd.Caption := '-'; | |
| 62 | + | AppMenu.Add(AppSep2Cmd); | |
| 63 | + | {$ENDIF} | |
| 64 | + | ``` | |
| 32 | 65 | ||
| 33 | 66 | ## About Box | |
| 34 | 67 | ||
| 35 | - | ||
| 68 | + | See the [[Mac Show Application Title, Version, and Company|Simple Way]] to have the system automatically create a Cocoa Framework About Box for you that is appropriately decorated with just a single line of code, a single unit added to your Uses clause and an HTML (credits) file. | |
| 36 | 69 | ||
| 37 | 70 | ## Fixing your application name | |
| 38 | 71 | ||
| 39 | - | ||
| 40 | - | ||
| 41 | - | ||
| 42 | - | ||
| 43 | - | ||
| 72 | + | By default your application's name will be the name of your project. You can rename your project, but you cannot add a space to the project name. So, "My App" will show up in the AppName/Apple Menu as "MyApp". Your application dock icon will also display "MyApp". Fear not, this can be fixed by editing the application Info.plist file and changing the Bundle Name key value from "MyApp" to "My App". For example: | |
| 44 | 73 | ``` | |
| 45 | - | ||
| 46 | - | ||
| 74 | + | <key>CFBundleName</key> | |
| 75 | + | <string>My App</string> | |
| 76 | + | ``` | |
| 47 | 77 | ||
| 48 | - | ||
| 49 | - | ||
| 50 | - | ||
| 51 | - | ||
| 52 | - | ||
| 78 | + | The two keys to consider when renaming your application: | |
| 53 | 79 | ||
| 80 | + | Key name | Description | |
| 81 | + | ---|--- | |
| 82 | + | CFBundleName (Bundle name) | The short name for the bundle. The value for this key is usually the name of your application. Xcode sets the value of this key by default when you create a new project. | |
| 83 | + | CFBundleDisplayName (Bundle display name) | The localized version of your application name. You typically include a localized value for this key in an InfoPlist.strings file in each of your language-specific resource directories. | |
| 84 | + | ||
| 54 | 85 | ## How to make Apple main menu multilingual | |
| 55 | 86 | ||
| 56 | - | ||
| 57 | - | ||
| 58 | - | ||
| 59 | - | ||
| 60 | - | ||
| 61 | - | ||
| 62 | - | ||
| 63 | - | ||
| 64 | - | ||
| 65 | - | ||
| 66 | - | ||
| 67 | - | ||
| 68 | - | ||
| 69 | - | ||
| 70 | - | ||
| 71 | - | ||
| 72 | - | ||
| 73 | - | ||
| 74 | - | ||
| 75 | - | ||
| 76 | - | ||
| 77 | - | ||
| 78 | - | ||
| 87 | + | To translate the Apple main menu from the default English to, for example, German, see the procedure below: | |
| 88 | + | ``` | |
| 89 | + | unit... | |
| 90 | + | {$ifdef LCLCocoa} {$modeswitch objectivec2} {$endif} | |
| 91 | + | ||
| 92 | + | uses ... | |
| 93 | + | {$ifdef LCLCocoa} CocoaAll, {$endif} | |
| 94 | + | ||
| 95 | + | procedure TranslateApplicationMenu; | |
| 96 | + | var mnMain: NSMenu; | |
| 97 | + | mnApp : NSMenu; | |
| 98 | + | mnItem: NSMenuItem; | |
| 99 | + | i : integer; | |
| 100 | + | begin | |
| 101 | + | mnMain := NSApplication (NSApp).mainmenu; | |
| 102 | + | mnItem := NSMenuItem (mnMain.itemArray.objectAtIndex(0)); | |
| 103 | + | ||
| 104 | + | if (mnItem.hasSubmenu) then | |
| 79 | 105 | begin | |
| 80 | - | ||
| 81 | - | ||
| 82 | - | ||
| 106 | + | mnApp := mnItem.submenu; | |
| 107 | + | ||
| 108 | + | for i:=0 to mnApp.itemArray.count-1 do | |
| 83 | 109 | begin | |
| 84 | - | ||
| 85 | - | ||
| 86 | - | ||
| 87 | - | ||
| 88 | - | ||
| 89 | - | ||
| 90 | - | ||
| 91 | - | ||
| 92 | - | ||
| 93 | - | ||
| 110 | + | mnItem := NSMenuItem(mnApp.itemArray.objectAtIndex(i)); | |
| 111 | + | ||
| 112 | + | if (NOT mnItem.isSeparatorItem) then | |
| 113 | + | begin | |
| 114 | + | if (mnItem.title.UTF8String = 'Services') then | |
| 115 | + | mnItem.setTitle (NSString.stringWithUTF8string('Dienste')); | |
| 116 | + | if (mnItem.title.UTF8String = 'Hide Others') then | |
| 117 | + | mnItem.setTitle (NSString.stringWithUTF8string('Andere ausblenden')); | |
| 118 | + | if (mnItem.title.UTF8String = 'Show All') then | |
| 119 | + | mnItem.setTitle (NSString.stringWithUTF8string('Alle einblenden')); | |
| 120 | + | if (mnItem.title.UTF8String = 'Hide ' + Application.Title) then | |
| 121 | + | mnItem.setTitle (NSString.stringWithUTF8string(PChar(Application.Title + ' ausblenden'))); | |
| 122 | + | if (mnItem.title.UTF8String = 'Quit ' + Application.Title) then | |
| 123 | + | mnItem.setTitle (NSString.stringWithUTF8string(PChar(Application.Title + ' beenden'))); | |
| 124 | + | end | |
| 94 | 125 | end | |
| 95 | 126 | end | |
| 96 | - | ||
| 97 | - | ||
| 127 | + | end; | |
| 98 | 128 | ``` | |
| 99 | 129 | ||
| 100 | 130 | ## Adding an icon to your app bundle | |
| 101 | 131 | ||
| 102 | - | ||
| 103 | - | ||
| 104 | - | ||
| 132 | + | 1\. Use /usr/bin/iconutil or a similar program to create your app's icon file (.icns extension). | |
| 105 | 133 | ||
| 106 | - | ||
| 134 | + | 2\. Copy the .icns file to your app bundle's Resources folder. For example, from the command line: | |
| 135 | + | ``` | |
| 107 | 136 | cp -p myapp.icns myapp.app/Contents/Resources | |
| 108 | 137 | ``` | |
| 109 | 138 | ||
| 110 | - | ||
| 111 | - | ||
| 112 | - | ||
| 139 | + | 3\. Add the following key to your app bundle's Info.plist file: | |
| 140 | + | ``` | |
| 113 | 141 | <key>CFBundleIconFile</key> | |
| 114 | - | ||
| 142 | + | <string>myapp.icns</string> | |
| 115 | 143 | ``` | |
| 116 | 144 | ||
| 117 | - | ||
| 145 | + | Sometimes Finder doesn't "refresh" an app to use the new icon, continuing instead to show the default icon. You can try these things to force Finder to use the new icon: | |
| 118 | 146 | ||
| 119 | - | ||
| 120 | - | ||
| 121 | - | ||
| 122 | - | ||
| 147 | + | * In a Terminal, use the UNIX command "touch" to touch the app bundle (eg touch MyApp.app) - this should work instantly. | |
| 148 | + | * Log out and back in again. | |
| 149 | + | * Drag (move) your application to a different folder, then back again. | |
| 150 | + | * Restart Finder (Esc-Option-Apple keys). | |
| 123 | 151 | ||
| 124 | - | ||
| 152 | + | You shouldn't have this problem with Finder when you install your app on other computers. The issue is a result of Finder caching the icon. | |
| 125 | 153 | ||
| 126 | 154 | ## Removing the app icon from title bars | |
| 127 | 155 | ||
| 128 | - | ||
| 156 | + | The Apple convention is that a window title bar has an icon only when the window represents a file. However, in the LCL the icon typically defines the application itself. | |
| 129 | 157 | ||
| 130 | - | ||
| 158 | + | The expected Apple behaviour can be achieved by setting the global variable **CocoaIconUse** to true and including the **CocoaInt** unit. See [[Cocoa Internals/Forms|Cocoa Form Icons]] for the full details. | |
| 131 | 159 | ||
| 132 | - | ||
| 160 | + | See also the Apple [_Human Interface Guidelines_](<https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/window-anatomy/>) document on window anatomy. | |
| 133 | 161 | ||
| 134 | 162 | ## Removing the title bar and border from a form | |
| 135 | 163 | ||
| 136 | - | ||
| 137 | - | ||
| 138 | - | ||
| 164 | + | To remove the title bar and border from a form, use the following code in your Form OnCreate method: | |
| 165 | + | ``` | |
| 139 | 166 | procedure TForm1.FormCreate(Sender: TObject); | |
| 140 | - | ||
| 141 | - | ||
| 142 | - | ||
| 143 | - | ||
| 144 | - | ||
| 145 | - | ||
| 146 | - | ||
| 167 | + | begin | |
| 168 | + | BorderIcons := []; | |
| 169 | + | BorderStyle := bsNone; | |
| 170 | + | FormStyle := fsStayOnTop; | |
| 171 | + | ShowInTaskBar := stNever; | |
| 172 | + | ControlStyle := ControlStyle - [csSetCaption]; | |
| 173 | + | end; | |
| 147 | 174 | ``` | |
| 148 | 175 | ||
| 149 | 176 | ## Add an Apple help book to your app | |
| 150 | 177 | ||
| 151 | - | ||
| 178 | + | No professional macOS application should be without a functioning Apple Help Book. Unfortunately Apple make it harder than it should be for developers to create an Apple Help Book because their documentation is significantly out of date (2013 anyone?) and the Apple Help Viewer has undergone significant change in recent versions of the operating system. For the full details on how to add an Apple Help Book to your application, along with sample code, refer to the article [[Add an Apple Help Book to your macOS app]]. | |
| 152 | 179 | ||
| 153 | 180 | ## Using preferences in your application | |
| 154 | 181 | ||
| 155 | - | ||
| 182 | + | For details on how to use Preferences in your application, refer to the articles: [[Mac Preferences Read and Write|Reading and Writing Preferences]] and [[Mac Preferences and About Menu|Preferences Menu]]. | |
| 156 | 183 | ||
| 157 | 184 | ## Menu bar | |
| 158 | 185 | ||
| 159 | - | ||
| 186 | + | Only one status bar, the system status bar, is available in macOS. It resides in the system-wide menu bar at the top of the screen. Status items appear on the right side of the menu bar, just to the left of the menu bar clock and Menu Extras, such as the Displays and Sound menus. The items remain in the menu bar even when your application is not in the foreground. | |
| 160 | 187 | ||
| 161 | - | ||
| 188 | + | For details of adding your own status items to the menu bar, refer to the [[macOS NSStatusBar]] article. | |
| 162 | 189 | ||
| 163 | 190 | ## Mac Buttons | |
| 164 | 191 | ||
| 165 | - | ||
| 192 | + | By default, the button placed onto a form by Lazarus is 75 (width) by 25 (height), which is not the standard for Mac Applications. See [[Mac Buttons]] for how to create the expected Mac button appearance. | |
| 166 | 193 | ||
| 167 | 194 | ## The Dock | |
| 168 | 195 | ||
| 169 | - | ||
| 196 | + | The Dock is a prominent feature of the macOS GUI which is used to launch applications and to switch between running applications. A user's frequently applications, or indeed any file or folder, may also be placed in the Dock for quick access. Applications that do not normally keep icons in the Dock will still appear there when running and remain until they are quit. By default, the Dock appears at the bottom of the screen, but the user can optionally locate it on the left or right side of the screen. | |
| 170 | 197 | ||
| 171 | - | ||
| 198 | + | Apple applied for a US patent for the Dock design in 1999 and the patent was ultimately granted in 2008. | |
| 172 | 199 | ||
| 173 | 200 | ### Hiding an application from the Dock | |
| 174 | 201 | ||
| 175 | - | ||
| 202 | + | For information on how to hide your application from the Dock, refer to the article [[Hiding a macOS app from the Dock]]. | |
| 176 | 203 | ||
| 177 | 204 | ### Show Badge on application icon in Dock | |
| 178 | 205 | ||
| 179 | - | ||
| 206 | + | Badges are used to notify a user of something new in an application. The badge is a counter that appears on the application's dock tile (icon) as a white number on a red circular or oval, depending on the number of digits, background. For how to implement this, see the article [[Show Badge on Application Icon in Dock]]. | |
| 180 | 207 | ||
| 181 | 208 | ### Bouncing an application icon in the Dock | |
| 182 | 209 | ||
| 183 | - | ||
| 210 | + | Bouncing your application's icon in the dock can be useful to attract a user's attention when, for example, a long-running task has finished. For how to do this, refer to the [[Bounce Application Icon in Dock]] article. | |
| 184 | 211 | ||
| 185 | 212 | ### Adding menu items to an application Dock Menu | |
| 186 | 213 | ||
| 187 | - | ||
| 214 | + | By adding menu items to your application's dock icon, you can provide the user with quick access to commonly used features. For how to do this, referent to the [[macOS Application Dock Menu]] article. | |
| 188 | 215 | ||
| 189 | 216 | ## Dialogs / Windows | |
| 190 | 217 | ||
| 191 | 218 | ### How to use a Drawer | |
| 192 | 219 | ||
| 193 | - | ||
| 220 | + | A drawer is a child window that slides out from a parent window and that the user can open or close (show or hide) while the parent window is open. A drawer should contain frequently accessed controls that do not need to be visible at all times. For how to do this, refer to the [[macOS Drawers]] article. | |
| 194 | 221 | ||
| 195 | 222 | ### How to use a Sheet | |
| 196 | 223 | ||
| 197 | - | ||
| 224 | + | A sheet is the Apple recommended way to request user input before proceeding with a document-specific action or to present information to the user before the next step. For information on how to create and use a sheet, see: [[Using macOS Sheets]]. | |
| 198 | 225 | ||
| 199 | 226 | ### How to use Alert Panels | |
| 200 | 227 | ||
| 201 | - | ||
| 228 | + | A panel is a special kind of window, typically serving an auxiliary function in an application. An alert panel is a type of built-in dialog for alerting the user to something and retrieving any choice the user made (eg clicking an OK or Cancel button). For information on how to create and use an alert panel in your application, see the article [[Using macOS Alert Panels]]. | |
| 202 | 229 | ||
| 203 | 230 | ### About windows / About Boxes | |
| 204 | 231 | ||
| 205 | - | ||
| 232 | + | An About window, also called an About Box, is an optional window that contains your application’s version and copyright information and may also optionally include credits acknowledging people and code you did not write. For several different ways to implement About windows. see the [[Mac Show Application Title, Version, and Company|About windows]] article. | |
| 206 | 233 | ||
| 207 | 234 | ## How to deliver user notifications | |
| 208 | 235 | ||
| 209 | - | ||
| 236 | + | Notifications are a great way for your applications to keep your users informed. They appear in the upper-right corner of the screen and/or in the Notification Center. To use this feature in your application, see the article [[macOS User Notifications]]. | |
| 210 | 237 | ||
| 211 | 238 | ## Detecting Light or Dark mode | |
| 212 | 239 | ||
| 213 | - | ||
| 240 | + | Dark mode was introduced with macOS Mojave (10.14). Macs using older versions of macOS like High Sierra and Sierra are unfortunately not able to use dark mode but can enable a dark menu bar and dock. Users can enable or disable dark mode via System Preferences. An Auto mode was introduced with macOS Catalina (10.15). This mode switches between light (during the day) and dark (during the night) modes automatically. | |
| 214 | 241 | ||
| 215 | - | ||
| 242 | + | For details of how to detect the mode, see [[Dark theme|Dark mode]]. | |
| 216 | 243 | ||
| 217 | 244 | ## See also | |
| 218 | 245 | ||
| 219 | - | ||
| 220 | - | ||
| 221 | - | ||
| 222 | - | ||
| 223 | - | ||
| 246 | + | * [[Portal:Mac|Lazarus/FPC macOS Portal]]. | |
| 247 | + | * [[macOS Programming Tips]]. | |
| 248 | + | * [[macOS Big Sur changes for developers]]. | |
| 249 | + | * [[Multiplatform Programming Guide]]. | |
| 250 | + | * [[Introduction to platform-sensitive development]]. | |
| 224 | 251 | ||
| 225 | 252 | ## External links | |
| 226 | 253 | ||
| 227 | - | ||
| 254 | + | * Apple [_Human Interface Guidelines_](<https://developer.apple.com/design/human-interface-guidelines/macos/>) | |
| 228 | 255 | ||
| 229 | 256 | --- | |
| 230 | - | ||
| 231 | - | ||
| 232 | - | ||
| 233 | - | ||
| 257 | + | *From the Free Pascal wiki, page "Apple-specific UI elements", as the Internet Archive kept it on 2023-01-29. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).* |