Create a Yosemite-like UI in Interface Builder - macos

I'm trying to work on a Markdown app for macOS and iOS that works more closely with Jekyll, especially in use with GitHub Pages. I have a general idea for an interface and I know a bit of Swift, but I am experiencing issues when trying to create the interface for the macOS version. I want to create an interface that best works with macOS Yosemite or higher, but the Interface Builder in Xcode doesn't seem to let me do that. For reference, I have a linked image of Bear, which has a similar design that I want to do:
Bear screenshot
While I am able to find parts in documentation and other parts of Stack Overflow regarding using the transparency programmatically, I am still unable to figure out how to get the master-detail view in the "Yosemite" style, as seen in the image. I've looked in Apple's documentation and other websites, and after some researching, I can't seem to find the right answer to this question.
How do I achieve this master-detail view, or just creating an app in Interface Builder that pertains to recent macOS versions' UI, not something from OS X Mountain Lion or below?

There is no pre-made "master-detail" view component in Interface Builder.
You have to use NSVisualEffectView together with NSTableView and programmatically exchange views in a container NSView.
Relevant API's:
https://developer.apple.com/reference/appkit/nsvisualeffectview
https://developer.apple.com/reference/appkit/nstableview

Related

Configure platform page with platform specific options

We've begun evaluating Xamarin for a up and coming project involving both iOS and Android, with the overriding intention to produce a single UI layer (and some share code, obviously) (I'm also new to C#)
TL;DR
I've begun exploring Xamarin on iOS. I started with the Phoneword example and it worked well enough.
The first issue I found was running the code on the iPhone X, which I was able to solve by using MainPage.On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true); in the platform App class
While testing this, I noticed some issues with the ListView not scrolling properly (the core issue was actually with the platform padding).
I then used (MainPage as Xamarin.Forms.NavigationPage).On<iOS>().EnableTranslucentNavigationBar(); to enable translucent navigation bars (as we're targeting iOS 11+) and now everything appears under the navigation bar.
This is easily fixed in xCode and after some research I've found that I need to be using UIKit.UIViewController.EdgesForExtendedLayout Property, the immediate problem I'm facing is, the only "snippets" of code I can find are from the View is displayed under status bar in iOS 7 and EdgesForExtendedLayout doesn't help forum post.
Issue at hand...
The example solution snippets posted seem to be making use of a platform (iOS) specific solution. The problem is, I want to keep using the "cross-platform" code in the "platform" project and simply provide some custom configuration for the iOS platform which can apply these states.
I understand it could be possible to use a renderer, but this seems to counter-interactive, as I'd need one for both iOS and Android, where the platform page is doing just fine as it.
I understand that I could setup a DependencyService, but this seems annoying to have to include a specific "configuration" service just to solve this issue for iOS
I was hoping it might be possible to setup a iOS Page which would "override" some of the functionality of the platform page and would allow me to make use of things like viewDidLoad so I can apply the iOS specific configurations on a page by pages bases, so we could keep the platform page as it, but when running under iOS, it would provide me access to iOS life cycle of the actual view...
I've been trying to search the documentation and tutorials and haven't yet come across anything which would seem to do this or something similar (not to say there isn't one, but I'm just not finding it).

How to best author a Apple Helpbook for a macOS app?

macOS apps, e.g. Photos.app, provide a help panel to the user
Is there a way to author such a Help Book in your own macOS app?
Is there a way to at least provide a toolbar to be used for a table of contents?
I am asking specifically about the UI and all the user interactions. Not how to generally create and register a helpbook.
Update
Here is what I’ve been able to find/gather/learn from others. A Help Book appears to run on a separate app/process called “HelpViewer”. Any Apple macOS app displaying a help makes use of a DDMViewerController that isn’t public.
There is an “app.css” and an “app.js” being used by the Apple macOS app “index.html” of the Apple Help Book. The Javascript one manipulates the DOM to create the “show-hide” link that toggles the Sidebar. Haven’t been able to find how to instruct HelpViewer to use a sidebar.
There is a WWDC talk from back in 2014, “Introducing the Modern WebKit API” that talks about “User Scripts” and “Script Messages” which allow communication between a Webview and Cocoa. https://developer.apple.com/videos/play/wwdc2014/206/
AFAICS, there is no way to have HelpViewer display a custom view or have a sidebar. My guess is that you would have to implement everything yourself. That is an NSSplitViewController, NSToolbar, NSOutlineView, any Javascript alongside the “app.css” to get the look and feel.
Currently it's not possible to implement the sidebar as shown in the Maps and other built-in macOS applications from 10.13 onward.
Versions of macOS from 10.10 (built-in applications) implement sidebar navigation with HTML and JavaScript, and Apple Help Viewer itself offers a window.HelpViewer object with some hooks that enable/disable the Help Viewer's table of contents button. Once enabled, it will callback into your own JavaScript where you can show/hide TOC via CSS or JS.
From approximately 10.10, Apple's non-built-in applications have also been using this technique. For example, iTunes and Xcode help both do this.
From 10.13, macOS has a newer version of Help Viewer that provides an actual Cocoa-native table of contents and windows splitter, as well as some new properties on window.HelpViewer; presumably these can be used to enable/disable the Cocoa sidebar and populate the TOC, but these are undocumented and I'm not sure anyone outside of Apple has been able to reverse-engineer this functionality yet.
And in any case, it wouldn't work if you offer Help Books to pre-10.13 users, and the use of undocumented API's restricts applications from the App Store (although, I'm not certain that Apple scans Help Book JavaScripts for API usage as part of their review).
(There are also a lot of other changes to how Apple's built-in application Help works now, too, but that's another topic entirely.)
Thus the answer for now is we can't, or shouldn't, or just don't know how. Alternatives include using something like using jekyll-apple-help (no affiliation) or Middlemac 3 (my project), or just rolling your own.
For those interested in knowing how Apple does it, I've documented a lot of it here (disclosure: link to my own website).
I'm not sure whether Apple's current applications still use it, but there is a very old API on macOS for Help Books. Apple has documentation on how to create them and some introduction. In short: Help books are standard HTML files with additional proprietary anchors. Those anchors are accessible via the class NSHelpManager, e.g. to open the help book at a specific page.
See also this question.

Creating Universal UI files

Is there any tutorial available for creating Universal UI which can run on iPad as well as iPhone on different resolution. I tried looking in the official documentation, but couldn't find anything about UI files.
I notice you've tagged this question with Marmalade, so I'm assuming you are talking about how to write a Universal app in Marmalade? If so then creating a Universal UI is pretty much up to you to implement in the best way you see fit.
By default all Marmalade apps are Universal apps, though you can limit to iPad only with the MKB setting iphone-ipad-only.
Marmalade does come with the iwui module that allows you to lay out user interfaces with buttons and text boxes etc. but ultimately unless you have a very simple UI you'll need to either provide different UI layouts for each screen resolution/orientation you wish to support, or do some fancy laying out in code.
Apple wisely chose to persuade developers into creating separate UIs for iPhone and iPad since the one-layout-fits-all approach generally looks bad at any screen size.

A MapKit for Mac OS X?

on the iPhone we have the Apple's amazing MapKit. There is something similar for Mac OS X?
If possible something more advanced than a simple WebView, because I need that it manage automatically at least:
annotations
the user interaction
the zoom in/out
an overlay view
(Even if the maps are not from Google is ok.)
Thank you very much!
Update 2
MapKit is available in OS X 10.9 Mavericks : Map Kit Framework Reference.
Update - pulled from my comment below
The situation has changed and there now exists a third party MapKit for Mac OS X. Find it at http://github.com/Oomph/MacMapKit and a small writeup at http://rickfillion.tumblr.com/post/1134987954/pretroducing-mapkit-for-mac
Orginal Answer
There is no such API from Apple on Mac OS X. You should file a bug request at bugreporter.apple.com.
The best alternative is to use the Google Maps JavaScript API embedded in a WebKit view. Visit the Google Maps JavaScript API V3 Documentation to understand the API.
I realize that you asked for more then a simple WebView, but perhaps you're unaware of some of the more advance functionality a WebKit view allows.
Webkit provides means for bridging between the JavaScript scripting environment in your WebKit view and the rest of your Cocoa application.
To call a Javascript function from Objective-C, use your WebKit view's WebScriptObject. "Using Javascript From Objective-C" from the "WebKit Objective-C Programming Guide" is a great place to start learning.
If you need to call back into your Cocoa application from Javascript, "Calling Objective-C Methods From JavaScript" in the "WebKit DOM Programming Topics" provides examples and explanation.
These technologies used carefully together should provide the functionality you require.

Button to sound in Interface Builder?

I'm working with the iPhone 3.0 SDK (bit of a novice really), and I have set up an Interface Builder View with several UIButtons in it. I also have several sound files in the Xcode project.
I have searched for this and none of the solutions seem to work for me. Does anyone know how to make a short sound play once upon pressing a button?
Sorry about the simplistic question, but Apple's avTouch doesn't build on my Xcode.
Thanks
For the most basic needs, the AVAudioPlayer class will work. It has the simplest interface on the iPhone SDK and is best suited for what you're describing.
If you need lower latency or multiple sounds at once, then your choice is between OpenAL or Core Audio. See the oalTouch example for OpenAL use.

Resources