I've started a new macOS project (currently on Big Sur beta 3), and the NSOutlineView nodes seem to be broken. Can't tell if this is me or the os.
Here's a sample project that demonstrates the issue. And an image...
As you can see, the cell is overlapping the expansion chevrons. Clicking on either chevron restores the first row to the proper layout, but not the second. Also, the autosave methods persistentObjectForItem and itemForPersistentObject are never called.
The test project is super simple--all I did was add the SourceView component from the view library to the default app project and hook up the delegate/data source to the view controller. Also checked Autosave Expanded Items in IB and put a name in the Autosave field. Here's the entirety of the controller code:
class ViewController: NSViewController {
#IBOutlet var outlineView: NSOutlineView?
let data = [Node("First item", 1), Node("Second item", 2)]
}
extension ViewController: NSOutlineViewDataSource {
func outlineView(_ outlineView: NSOutlineView, child index: Int, ofItem item: Any?) -> Any {
data[index]
}
func outlineView(_ outlineView: NSOutlineView, isItemExpandable item: Any) -> Bool {
true
}
func outlineView(_ outlineView: NSOutlineView, numberOfChildrenOfItem item: Any?) -> Int {
item == nil ? data.count : 0
}
func outlineView(_ outlineView: NSOutlineView, objectValueFor tableColumn: NSTableColumn?, byItem item: Any?) -> Any? {
item
}
func outlineView(_ outlineView: NSOutlineView, persistentObjectForItem item: Any?) -> Any? {
(item as? Node)?.id
}
func outlineView(_ outlineView: NSOutlineView, itemForPersistentObject object: Any) -> Any? {
guard let id = object as? Int else { return nil }
return data.first { $0.id == id }
}
}
extension ViewController: NSOutlineViewDelegate {
func outlineView(_ outlineView: NSOutlineView, viewFor tableColumn: NSTableColumn?, item: Any) -> NSView? {
guard let node = item as? Node else {
preconditionFailure("Invalid data item \(item)")
}
let view = outlineView.makeView(withIdentifier: nodeCellIdentifier, owner: self) as? NSTableCellView
view?.textField?.stringValue = node.name
view?.imageView?.image = NSImage(systemSymbolName: node.icon, accessibilityDescription: nil)
return view
}
}
final class Node {
let id: Int
let name: String
let icon: String
init(_ name: String, _ id: Int, _ icon: String = "folder") {
self.id = id
self.name = name
self.icon = icon
}
}
private let nodeCellIdentifier = NSUserInterfaceItemIdentifier("DataCell")
Any Mac developers left out there that can help?
Source list
What is a source list? It's NSOutlineView (which is a subclass of
NSTableView) with a special
treatment. Finder screenshot:
To create a source list, all you have to do is to set the
selectionHighlightStyle property to
.sourceList. The documentation says:
The source list style of NSTableView. On 10.5, a light blue gradient is used to highlight selected rows.
What it does exactly? Jump to Definition in Xcode and read comments (not included in the docs):
The source list style of NSTableView. On 10.10 and higher, a blur selection is used to highlight rows. Prior to that, a light blue gradient was used. Note: Cells that have a drawsBackground property should have it set to NO. Otherwise, they will draw over the highlighting that NSTableView does. Setting this style will have the side effect of setting the background color to the "source list" background color. Additionally in NSOutlineView, the following properties are changed to get the standard "source list" look: indentationPerLevel, rowHeight and intercellSpacing. After calling setSelectionHighlightStyle: one can change any of the other properties as required. In 10.11, if the background color has been changed from the "source list" background color to something else, the table will no longer draw the selection as a source list blur style, and instead will do a normal blue highlight.
Since you're on Big Sur, be aware that the SelectionHighlightStyle.sourceList is deprecated.
One should use style
& effectiveStyle.
Sample project
Xcode:
New project
macOS & App (Storyboard & AppKit App Delegate & Swift)
Main.storyboard
Add Source List control
Position & fix constraints
Set delegate & dataSource to ViewController
Enable Autosave Expanded Items
Set Autosave to whatever you want (I have FinderLikeSidebar there)
Choose wisely because the expansion state is saved in the user defaults
under the NSOutlineView Items FinderLikeSidebar key
Create #IBOutlet var outlineView: NSOutlineView!
Add another Text Table Cell View (no image)
Set identifier to GroupCell
ViewController.swift
Commented code below
Screenshots
As you can see, it's almost Finder like - 2nd level is still indented. The reason
for this is that the Documents node is expandable (has children). I have them here to demonstrate autosaving.
Just remove them if you'd like to move all 2nd level nodes to the left.
ViewController.swift code
There's not much to say about it except - read comments :)
import Cocoa
// Sample Node class covering groups & regular items
class Node {
let id: Int
let title: String
let symbolName: String?
let children: [Node]
let isGroup: Bool
init(id: Int, title: String, symbolName: String? = nil, children: [Node] = [], isGroup: Bool = false) {
self.id = id
self.title = title
self.symbolName = symbolName
self.children = children
self.isGroup = isGroup
}
convenience init(groupId: Int, title: String, children: [Node]) {
self.init(id: groupId, title: title, children: children, isGroup: true)
}
}
extension Node {
var cellIdentifier: NSUserInterfaceItemIdentifier {
// These must match identifiers in Main.storyboard
NSUserInterfaceItemIdentifier(rawValue: isGroup ? "GroupCell" : "DataCell")
}
}
extension Array where Self.Element == Node {
// Search for a node (recursively) until a matching element is found
func firstNode(where predicate: (Element) throws -> Bool) rethrows -> Element? {
for element in self {
if try predicate(element) {
return element
}
if let matched = try element.children.firstNode(where: predicate) {
return matched
}
}
return nil
}
}
class ViewController: NSViewController, NSOutlineViewDelegate, NSOutlineViewDataSource {
#IBOutlet var outlineView: NSOutlineView!
let data = [
Node(groupId: 1, title: "Favorites", children: [
Node(id: 11, title: "AirDrop", symbolName: "wifi"),
Node(id: 12, title: "Recents", symbolName: "clock"),
Node(id: 13, title: "Applications", symbolName: "hammer")
]),
Node(groupId: 2, title: "iCloud", children: [
Node(id: 21, title: "iCloud Drive", symbolName: "icloud"),
Node(id: 22, title: "Documents", symbolName: "doc", children: [
Node(id: 221, title: "Work", symbolName: "folder"),
Node(id: 221, title: "Personal", symbolName: "folder.badge.person.crop"),
])
]),
]
override func viewWillAppear() {
super.viewWillAppear()
// Expanded items are saved in the UserDefaults under the key:
//
// "NSOutlineView Items \(autosaveName)"
//
// By default, this value is not present. When you expand some nodes,
// an array with persistent objects is saved. When you collapse all nodes,
// the array is removed from the user defaults (not an empty array,
// but back to nil = removed).
//
// IOW there's no way to check if user already saw this source list,
// modified expansion state, etc. We will use custom key for this
// purpose, so we can expand group nodes (top level) when the source
// list is displayed for the first time.
//
// Next time, we wont expand anything and will honor autosaved expanded
// items.
if UserDefaults.standard.object(forKey: "FinderLikeSidebarAppeared") == nil {
data.forEach {
outlineView.expandItem($0)
}
UserDefaults.standard.set(true, forKey: "FinderLikeSidebarAppeared")
}
}
// Number of children or groups (item == nil)
func outlineView(_ outlineView: NSOutlineView, numberOfChildrenOfItem item: Any?) -> Int {
item == nil ? data.count : (item as! Node).children.count
}
// Child of a node or group (item == nil)
func outlineView(_ outlineView: NSOutlineView, child index: Int, ofItem item: Any?) -> Any {
item == nil ? data[index] : (item as! Node).children[index]
}
// View for our node
func outlineView(_ outlineView: NSOutlineView, viewFor tableColumn: NSTableColumn?, item: Any) -> NSView? {
guard let node = item as? Node,
let cell = outlineView.makeView(withIdentifier: node.cellIdentifier, owner: self) as? NSTableCellView else {
return nil
}
cell.textField?.stringValue = node.title
if !node.isGroup {
cell.imageView?.image = NSImage(systemSymbolName: node.symbolName ?? "folder", accessibilityDescription: nil)
}
return cell
}
// Mark top level items as group items
func outlineView(_ outlineView: NSOutlineView, isGroupItem item: Any) -> Bool {
(item as! Node).isGroup
}
// Every node is expandable if it has children
func outlineView(_ outlineView: NSOutlineView, isItemExpandable item: Any) -> Bool {
!(item as! Node).children.isEmpty
}
// Top level items (group items) are not selectable
func outlineView(_ outlineView: NSOutlineView, shouldSelectItem item: Any) -> Bool {
!(item as! Node).isGroup
}
// Object to save in the user defaults (NSOutlineView Items FinderLikeSidebar)
func outlineView(_ outlineView: NSOutlineView, persistentObjectForItem item: Any?) -> Any? {
(item as! Node).id
}
// Find an item from the saved object (NSOutlineView Items FinderLikeSidebar)
func outlineView(_ outlineView: NSOutlineView, itemForPersistentObject object: Any) -> Any? {
guard let id = object as? Int else { return nil }
return data.firstNode { $0.id == id }
}
}
Related
I'm trying to display an image in a table view cell view on the condition of a Boolean value.
The Boolean is a representation of the state of an object of the class "Book" where the objects are initialized:
class Book: NSObject, Codable {
#objc dynamic var author: String
#objc dynamic var title: String
#objc dynamic var lentBy: String
#objc dynamic var available: Bool {
if lentBy == "" {
return true
} else {return false}
}
init(author: String, title: String, lentBy: String) {
self.author = author
self.title = title
self.lentBy = lentBy
}
}
If the String lentBy is not specified, the Bool available returns true: no one has lent the book and hence it should be available. Binding the available object to the table view, the respective table view cell displays either 1 or 0. Instead of 1 or 0 I would like it to display an image: NSStatusAvailable or NSStatusUnavailable.
Have a look at this: https://i.imgur.com/xkp0znT.png.
Where the text field "Geliehen von" (lent by) is empty, the status is 1 and should display the green circle; otherwise a red circle. The green circle you see now is simply dragged into the table cell view and is non-functional. But this is the idea.
Now I'm wondering how to display the respective image view instead of the Bool 1 or 0.
The table view is constructed with the interface builder in a storyboard. If I'm trying to make changes to it programmatically, nothing gets display in the table view anymore. I suppose this is due to the set bindings. Removing the bindings just for the last column doesn't work. This is how I tried it (without implementation of the image view; I don't know how to do that programmatically):
func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {
if tableColumn == tableView.tableColumns[2] {
let cellIdentifier = "statusCellID"
let cell = tableView.makeView(withIdentifier: NSUserInterfaceItemIdentifier(rawValue: cellIdentifier), owner: self) as? NSTextField
if let cell = cell {
cell.identifier = NSUserInterfaceItemIdentifier(rawValue: cellIdentifier)
cell.stringValue = books[row].lentBy
}
return cell
}
return nil
}
What's the best solution to achieve this? Could I somehow, instead of a Bool, directly return the respective, e.g. CGImage types for lentBys representation available?
You are using Cocoa Bindings. This makes it very easy.
In Interface Builder drag an NSTableCellView with image view into the last column and delete the current one.
Delete the text field and set appropriate constraints for the image view.
Rather than viewForColumn:Row implement
func tableView(_ tableView: NSTableView, objectValueFor tableColumn: NSTableColumn?, row: Int) -> Any? {
return books[row]
}
Extend the model with an image property which is driven by KVO
class Book: NSObject, Codable {
#objc dynamic var author: String
#objc dynamic var title: String
#objc dynamic var lentBy: String
#objc dynamic var available: Bool {
return lentBy.isEmpty
}
#objc dynamic var image: NSImage {
return NSImage(named: (lentBy.isEmpty) ? NSImage.statusAvailableName : NSImage.statusUnavailableName)!
}
static func keyPathsForValuesAffectingImage() -> Set<String> { return ["lentBy"] }
init(author: String, title: String, lentBy: String) {
self.author = author
self.title = title
self.lentBy = lentBy
}
}
In Interface Builder bind the Value of the image view of the table cell view to Table Cell View > objectValue.image
I am new to Swift and trying to learn how to implement NSTreeController with NSOutlineView. I've been following several guides which shows such examples, but I keep getting an error. I followed step by step and/or try to run their source codes if available, but I was getting same error. I come to think there is some change in Swift 4 which makes these Swift 3 examples to produce error. As there are not many examples done in Swift 4, I decided I'd give a try by asking the question here.
The error I'm getting is:
this class is not key value coding-compliant for the key isLeaf.
I believe that error is coming from the key path set up for NSTreeController:
However I am not sure what needs to be done to fix the error.
I have simple model class called Year.
class Year: NSObject {
var name: String
init(name: String) {
self.name = name
}
func isLeaf() -> Bool {
return true
}
}
My view controller looks like this.
class ViewController: NSViewController, NSOutlineViewDataSource, NSOutlineViewDelegate {
#IBOutlet weak var outlineView: NSOutlineView!
#IBOutlet var treeController: NSTreeController!
override func viewDidLoad() {
super.viewDidLoad()
addData()
outlineView.delegate = self
outlineView.dataSource = self
}
func addData() {
let root = ["name": "Year", "isLeaf": false] as [String : Any]
let dict: NSMutableDictionary = NSMutableDictionary(dictionary: root)
dict.setObject([Year(name: "1999"), Year(name: "2000")], forKey: "children" as NSCopying)
treeController.addObject(dict)
}
func isHeader(item: Any) -> Bool {
if let item = item as? NSTreeNode {
return !(item.representedObject is Year)
} else {
return !(item is Year)
}
}
func outlineView(_ outlineView: NSOutlineView, viewFor tableColumn: NSTableColumn?, item: Any) -> NSView? {
if isHeader(item: item) {
return outlineView.makeView(withIdentifier: NSUserInterfaceItemIdentifier(rawValue: "HeaderCell"), owner: self)!
} else {
return outlineView.makeView(withIdentifier: NSUserInterfaceItemIdentifier(rawValue: "DataCell"), owner: self)!
}
}
}
When I run the program, it causes no issue, but when I expand the node to show the two children of the root, it is giving the error I mentioned above.
Because is isLeaf is used in KVO by NSOutlineView, you have to add #objc in front of isLeaf function:
#objc func isLeaf() -> Bool {
return true
}
The class to which you are binding needs to be KVO compliant.
So, it needs to be a subclass of NSObject.
And the objc runtime needs access.
One way to do this:
#objcMembers
class FileSystemItem: NSObject {
Or, you can annotate each field/function with #objc
Full Example
I'm attempting to construct code-only NSOutlineView in Swift playground, and I'm coming to grief trying to display the disclosure buttons.
At the moment the result looks like this:
But I am expecting something more like this:
Here's the code I have so far.
// Requires XCode 7.3.1
import Cocoa
import XCPlayground
let FILENAME_COLUMN = "FileName2"
public class Node
{
init (_ description: String, _ children: [Node]) {
self.description = description
self.children = children
}
convenience init (_ description: String) {
self.init(description, [])
}
public var children : [Node] = []
public var description: String = ""
}
func makeOutline() -> NSOutlineView {
let outline = NSOutlineView(frame: NSMakeRect(0, 0, 250, 150))
let fileNameColumn = NSTableColumn(identifier: FILENAME_COLUMN)
fileNameColumn.title = "File Name"
fileNameColumn.width = 200
outline.addTableColumn(fileNameColumn)
outline.selectionHighlightStyle = .Regular
return outline
}
func makeOutlineDelegate() -> NSOutlineViewDelegate {
class OutlineViewDelegate : NSObject, NSOutlineViewDelegate {
#objc func outlineView(outlineView: NSOutlineView, shouldShowOutlineCellForItem item: AnyObject) -> Bool {
return true
}
#objc func outlineView(outlineView: NSOutlineView, shouldExpandItem item: AnyObject) -> Bool {
return true;
}
#objc func outlineView(outlineView: NSOutlineView, viewForTableColumn tableColumn: NSTableColumn?, item: AnyObject) -> NSView? {
let columnIdentifier = tableColumn!.identifier
if let recycledCell = outlineView.makeViewWithIdentifier(columnIdentifier, owner: self) as? NSTableCellView {
return recycledCell
}
let newCell = NSTableCellView(frame: NSMakeRect(0, 0, 150, outlineView.rowHeight))
newCell.identifier = columnIdentifier
newCell.autoresizesSubviews = true
let imageField = NSImageView(frame: NSMakeRect(0, 0, 150, outlineView.rowHeight))
newCell.addSubview(imageField)
newCell.imageView = imageField
let textField = NSTextField(frame: NSMakeRect(0, 0, 150, outlineView.rowHeight))
newCell.addSubview(textField)
newCell.textField = textField
textField.bordered = false
textField.drawsBackground = false
textField.bind(NSValueBinding,
toObject: newCell,
withKeyPath: "objectValue",
options: nil)
return newCell
}
}
return OutlineViewDelegate()
}
func makeOutlineDataSource(store: [Node]) -> NSOutlineViewDataSource {
class OutlineViewDataSource : NSObject, NSOutlineViewDataSource {
var store : [Node]
init(store:[Node]) {
self.store = store
}
#objc func outlineView(outlineView: NSOutlineView, isItemExpandable item: AnyObject) -> Bool {
if item is [Node] {
return true
}
if let node = item as? Node {
return node.children.count > 0
}
return true
}
#objc func outlineView(outlineView: NSOutlineView, objectValueForTableColumn tableColumn: NSTableColumn?, byItem item: AnyObject?) -> AnyObject? {
if let node = item as? Node {
return node.description
}
return nil
}
#objc func outlineView(outlineView: NSOutlineView, child index: Int, ofItem item: AnyObject?) -> AnyObject {
if (item == nil) {
return store[index]
}
if let nodeArray = item as? [Node] {
return nodeArray[index]
}
if let node = item as? Node {
return node.children[index]
}
return Node("WRONG")
}
#objc func outlineView(outlineView: NSOutlineView, numberOfChildrenOfItem item: AnyObject?) -> Int {
if (item == nil) {
return store.count;
}
if let nodeArray = item as? [Node] {
return nodeArray.count
}
if let node = item as? Node {
return node.children.count
}
return 0
}
}
return OutlineViewDataSource(store: store)
}
let store = [
Node("Dev", [
Node("svc_sql_dev"),
Node("svc_app_dev")
]),
Node("Test",[
Node("svc_sql_test"),
Node("svc_app_test")
]),
Node("UAT",[
Node("svc_sql_uat"),
Node("svc_app_uat")
]),
Node("Prod",[
Node("svc_sql_prod"),
Node("svc_app_prod")
])
]
let outline = makeOutline()
let dataSource = makeOutlineDataSource(store)
let outlineDelegate = makeOutlineDelegate()
outline.setDataSource(dataSource)
outline.setDelegate(outlineDelegate)
outline.expandItem(outline.itemAtRow(4), expandChildren: true)
outline.expandItem(outline.itemAtRow(3), expandChildren: true)
outline.expandItem(outline.itemAtRow(2), expandChildren: true)
outline.expandItem(outline.itemAtRow(0), expandChildren: true)
let container = NSScrollView(
frame: NSMakeRect(0, 0, 400, 160))
container.documentView = outline
container.hasVerticalScroller = true;
//dispatch_async(dispatch_get_main_queue(), {
// outline.expandItem(nil, expandChildren: true)
//})
XCPlaygroundPage.currentPage.liveView = container
Update (with solution)
Setting the column as outlineColumn is required:
outline.outlineTableColumn = fileNameColumn
I have a simple NSOutlineView, init via swift, with 2 columns. I made the following very simple data source, hoping to test it this way, but maybe I this format is not allowable. I assume the table view only queries as needed, so that this won't cause an infinite loop.
The result is a 4 row, 2 column table layout with "Name" and "Value", but no expansion buttons.
I've implemented isExpandable as mentioned in the Obj-C post with similar name and added the columns.
Is there something more that I need to do to setup a NSOutlineView with expandable elements, or should I attempt another more realistic dataSource test:
import Cocoa
class OutlineDataSource : NSObject,NSOutlineViewDataSource
{
var a = "Name"
var b = "Value"
var column1 : NSTableColumn
var column2 : NSTableColumn
init(column1:NSTableColumn,column2:NSTableColumn) {
self.column1 = column1
self.column2 = column2
}
func outlineView(outlineView: NSOutlineView, numberOfChildrenOfItem item: AnyObject?) -> Int
{
return 4;
}
func outlineView(outlineView: NSOutlineView, child index: Int, ofItem item: AnyObject?) -> AnyObject
{
return a
}
func outlineView(outlineView: NSOutlineView, isItemExpandable item: AnyObject) -> Bool
{
return true;
}
func outlineView(outlineView: NSOutlineView, objectValueForTableColumn tableColumn: NSTableColumn?, byItem item: AnyObject?) -> AnyObject?
{
if (tableColumn == column1)
{
return a
}
return b
}
}
outlineTableColumn needs to be set on the outline view.
I'm a beginner to cocoa and I've been trying to make a simple app for Mac using swift programming language, but I'm stuck and can't find a solution.
I want to present a data from dictionary in two or more tableViews, where the first table will show key, and the second table will show value.
For example, I have a dictionary
var worldDict:NSDictionary = ["Africa":["Egypt", "Togo"],"Europe": ["Austria", "Spain"]]
I can present all continents in the first table, but I can't find out how to make second table to display countries from continent I choose in the first table.
My ViewController is a DataSource and Delegate for both tables.
extension ViewController: NSTableViewDataSource {
func numberOfRowsInTableView(tableView: NSTableView) -> Int {
if tableView == continentTable {
return self.worldDict.valueForKey("Continent")!.count
} else if tableView == countryTable {
return self.worldDict.valueForKey("Continent")!.allKeys.count
}
return 0
}
func tableView(tableView: NSTableView, viewForTableColumn tableColumn: NSTableColumn?, row: Int) -> NSView? {
var cell = tableView.makeViewWithIdentifier(tableColumn!.identifier, owner: self) as! NSTableCellView
if tableView == self.continentTable {
let continent: AnyObject? = wordlDict.valueForKey("Continent")
var keys = continent!.allKeys
cell.textField?.stringValue = keys[row] as! String
} else if tableView == self.countryTable {
var countriesOfContinent: AnyObject? = worldDict.valueForKey("Continent")?.valueForKey("Africa")!
cell.textField?.stringValue = countriesOfContinent?.allKeys[row] as! String
}
return cell
}
}
Here I present data from dictionary in tables, but separately, and can't figure out how to make them work together.
Also I know how to get the number of row that has been selected
extension ViewController: NSTableViewDelegate {
func tableViewSelectionDidChange(notification: NSNotification) {
let continentSelected = rowSelected()
}}
func rowSelected() -> Int? {
let selectedRow = self.continentTable.selectedRow
if selectedRow >= 0 && selectedRow < self.worldDict.valueForKey("Continent")!.count {
return selectedRow
}
return nil
}
Part of the problem is that you're relying on the ordering of the keys returned by allKeys() to be reliable, which it's not. You need to keep a separate array of continents. It can basically be a copy of whatever allKeys() returned on one occasion, but you should not keep calling allKeys() each time.
In numberOfRowsInTableView(), for the countries table, you want to return the number of countries in the selected continent:
} else if tableView == countryTable {
if let selectedContinentRow = rowSelected() {
let selectedContinent = continentsArray[selectedContinentRow]
return self.worldDict[selectedContinent].count
}
return 0
}
For tableView(_:viewForTableColumn:row:), you want to return an element from the selected continent's array of countries:
} else if tableView == self.countryTable {
if let selectedContinentRow = rowSelected() {
let selectedContinent = continentsArray[selectedContinentRow]
return self.worldDict[selectedContinent][row]
}
}
Also, whenever the selected continent changes, you need to tell the countries table to reload its data:
func tableViewSelectionDidChange(notification: NSNotification) {
// ... whatever else ...
let tableView = notification.object as! NSTableView
if tableView == continentTable {
countryTable.reloadData()
}
}