macOS Designing a Poor man's Interface Designer

[dernhelm]

Hi all,

I have a need to develop a poor-man's interface designer. The idea is this, the user will design their own worksheet templates that include buttons, text fields, combo boxes, and some other controls designed by me. We want to be able to use both Apple designed controls, and our own designed controls for certain purposes as well.

During the course of designing these templates, the user should be apple to pick from a small palette of items (each backed by a particular type of user-control). They would drop them onto a design surface, locate, and size them appropriately. Saving the template would involve writing out as XML the contents of the worksheet. At run time, the idea would be to load the worksheet XML from memory, build the worksheet (not in design mode) and have all the widgets "come alive" as data-backed controls.

I've done something similar in .NET, but I'd like to provide this type of functionality under OS/X. What I cannot figure out is how to interact with an NSButton (for instance) such that I can place a design surface over it that will allow me to interact with it by re-sizing and re-locating the widget. Does anyone know of resources in this area that could help me along?

 

[robbieduncan]

So basically you want to re-write Interface Builder? Why? It doesn't output XML I agree, but if you are writing your own backend code you can just load the nib file...

 

[dernhelm]

So basically you want to re-write Interface Builder? Why? It doesn't output XML I agree, but if you are writing your own backend code you can just load the nib file...

Well, no not really. What I want to be able to do is allow a user to create their own "worksheets" and layout the items on the worksheets as they so desire. The idea is really that they would pick only a few from an enormous number of possible data fields (each of which would be backed by a certain type of input control - text field, combo-box, radio-set, etc.). The idea is for a "super-user" to be able to choose which data fields that they want on any particular worksheet, and allow them to size, locate them as they desire.

Users would then start an interaction session and choose a particular type of worksheet for that section. Normal users are interacting with the worksheets in "run mode" not "design mode", so they are entering data into the worksheet chosen. The data entered is stored against the created session and reported on later.

So you see, the part of the interface builder that I want to re-write is only the part that allows a user to drop something on a design surface, and interact with it by sizing and locating it. All the rest of it is not interesting to me, and would be incredibly confusing to the user.

 

[snkTab]

Well, no not really. What I want to be able to do is allow a user to create their own "worksheets" and layout the items on the worksheets as they so desire. The idea is really that they would pick only a few from an enormous number of possible data fields (each of which would be backed by a certain type of input control - text field, combo-box, radio-set, etc.). The idea is for a "super-user" to be able to choose which data fields that they want on any particular worksheet, and allow them to size, locate them as they desire.

Users would then start an interaction session and choose a particular type of worksheet for that section. Normal users are interacting with the worksheets in "run mode" not "design mode", so they are entering data into the worksheet chosen. The data entered is stored against the created session and reported on later.

So you see, the part of the interface builder that I want to re-write is only the part that allows a user to drop something on a design surface, and interact with it by sizing and locating it. All the rest of it is not interesting to me, and would be incredibly confusing to the user.

So basically InfoPath but for OSX? Looks like you want to build forms. You can do this in Word and Excel but its limited. You may also want to designing for the web, as its made for designing a page with interactive features.

 

[HiRez]

What I cannot figure out is how to interact with an NSButton (for instance) such that I can place a design surface over it that will allow me to interact with it by re-sizing and re-locating the widget. Does anyone know of resources in this area that could help me along?

If you provide bounding handles for it (a proxy bounding box), you should be able to dynamically size an NSButton using superclass methods (it inherits from NSControl and NSView). Try NSView's -setFrame: or -setBounds: methods. Or perhaps I'm not understanding correctly what you're trying to do. Another option is to use Java with Mac LAF. Sounds like an interesting project.

 

[kainjow]

So basically you want to re-write Interface Builder? Why? It doesn't output XML I agree, but if you are writing your own backend code you can just load the nib file...

Actually it does export to XML: File > Save As > "Use text archive format"

 

[broken_keyboard]

What I cannot figure out is how to interact with an NSButton (for instance) such that I can place a design surface over it that will allow me to interact with it by re-sizing and re-locating the widget. Does anyone know of resources in this area that could help me along?

You could always just use a picture of an NSButton. Would be simpler...

 

[dernhelm]

If you provide bounding handles for it (a proxy bounding box), you should be able to dynamically size an NSButton using superclass methods (it inherits from NSControl and NSView). Try NSView's -setFrame: or -setBounds: methods. Or perhaps I'm not understanding correctly what you're trying to do. Another option is to use Java with Mac LAF. Sounds like an interesting project.

Thanks for the response. Sorry for my tardiness in responding back - suddenly got buried the last couple of days...

From your description, it sounds like setFrame / setBounds is exactly what I want. I essentially want to allow the user to dynamically drop widgets on a form, and if in design mode, show grab handles that would allow them to resize the widget as needed. I would also like them to have the ability to re-locate the widget, but I will start digging into setFrame.

I saw that method in the list, but blew right by it, not understanding the small blurb associated with it.

Thanks again, I'll let you know what I find. This is a "spare time" project for right now, but I'm using it to get where I feel more proficient in Cooca.

 

[dernhelm]

You could always just use a picture of an NSButton. Would be simpler...

I thought of this too, but was still running into the same problem, how do I show the grab handles to allow dynamic resize? Whether it is an image or a button, I have the same problem. Hopefully setFrame will help me here.

Thanks for the input, though.

 

[HiRez]

From your description, it sounds like setFrame / setBounds is exactly what I want. I essentially want to allow the user to dynamically drop widgets on a form, and if in design mode, show grab handles that would allow them to resize the widget as needed. I would also like them to have the ability to re-locate the widget, but I will start digging into setFrame.

-setFrame: and -setBounds will allow you to programatically resize a UI view. However, they will not draw resizing handles for you, or track the mouse movements in order to do so. You must do that part yourself. You should take a look at the Sketch application (/Developer/Examples/AppKit/Sketch). That does something along the lines of what you're looking for, only it draws circles and squares rather than buttons and table views, but conceptually it is similar. This is a fairly large and complex project, so you'll have to weed out the parts that relate to you. A lot of the code for dealing with the frame/handles is in the SKTGraphic class.

 

[logicat2001]

You'd first write a custom NS-view subclass that would serve as your virtual canvas. This is the class where you'd add the functionality of tracking user mouse-downs, clicks, etc. You could implement drag-and-drop from an NSTableView, for example, where each row represents one of your GUI elements and includes a picture of the element, the name and any other useful stuff you want. Your custom NS-view subclass would track the user's mouse point, i.e. the location of the added gui element, and would need to keep track of all the elements, each element's size and x/y location, as well as it's z-location if you're going to allow items to overlap. If not, you'll also need to add code that recognizes when the user is trying to overlap objects, and how it's resolved.

You should start reading through the included developer docs, or from Apple's ADC site. Some things to start with:

• Drawing and Views Programming Topics for Cocoa
  Basic Event Handling
  NSView API

That's the barest minimum, and honestly, from your questions you've got a lot of catching up to do. Your description is too vague to be useful, e.g. "allow them to size, locate them as they desire" doesn't specify to what precision a user can locate an object. Is it to the pixel or some other grid?

You should also read up on NSPoint, NSRange, NSRect, NSSize and all appropriate convenience functions available in Foundation. You can find a pile of information in "Geometry and Range Utilities."

Finally, do check out the following from the AppKit folder found in Apple's sample code (installed with Dev tools):

• BezierPathLab
  CircleView
  ClockControl
  DotView
  DotViewUndo
  Rulers

It would probably serve you and your project a lot of good if you really thought about the functionality of your app from the users perspective, and wrote it all out. Be very literal, line for line, and describe what your application does in each possible user interaction.

Best,
Anton

 

[Mechcozmo]

Also, read Apple's Human Interface Guidelines. Xcode comes with a copy. Make sure you don't shatter them into little itty-bitty pieces-- they are quite insightful.

 

[dernhelm]

You'd first write a custom NS-view subclass that would serve as your virtual canvas. This is the class where you'd add the functionality of tracking user mouse-downs, clicks, etc. You could implement drag-and-drop from an NSTableView, for example, where each row represents one of your GUI elements and includes a picture of the element, the name and any other useful stuff you want. Your custom NS-view subclass would track the user's mouse point, i.e. the location of the added gui element, and would need to keep track of all the elements, each element's size and x/y location, as well as it's z-location if you're going to allow items to overlap. If not, you'll also need to add code that recognizes when the user is trying to overlap objects, and how it's resolved.

After a MANY hours of futzing around I finally came to this conclusion (should've checked here first, sigh). So I've started with a simple panel already placed on an NSView, and rigged it so that when I click on it, it "selects" by drawing grab handles in a non-opaque view above it. I'm able to allow re-locating it (it snaps to a pixel grid that I define as 24wx12h). It is far from usable, but it works.

You should start reading through the included developer docs, or from Apple's ADC site. Some things to start with:

• Drawing and Views Programming Topics for Cocoa
  Basic Event Handling
  NSView API

That's the barest minimum, and honestly, from your questions you've got a lot of catching up to do. Your description is too vague to be useful, e.g. "allow them to size, locate them as they desire" doesn't specify to what precision a user can locate an object. Is it to the pixel or some other grid?

That's probably because I did not want to bore you with all the details of this application, so I was being intentionally vague. I have reams of specifications for how it should work already provided since it is something that my company is already selling on NT in .NET. I was simply teaching myself Cocoa in OS/X and decided to pick this as my project to prove to myself I'd really learned it.

.NET actually has "Designers" for interface controls (widgets) built into the Framework, and what my question was really trying to get at was whether or not Cocoa has something similar. I'm not advocating .NET over Cocoa or Cocoa over .NET, I'm just trying to learn Cocoa and this is one way i can prove to myself that I'd done it.

I had done a bit of research, but couldn't come up with anything that mimiced the "Designer" features in .NET. Not wanting to redevelop the wheel, and noticing the the interface designer already does what I wanted to do, I thought maybe someone (Apple) had already produced a framework to handle this problem for me, and I was just looking for it under the wrong stone. It sounds like I was wrong. So I'm off to draw my own grab-handle windows...

Oh well, things could be worse.

You should also read up on NSPoint, NSRange, NSRect, NSSize and all appropriate convenience functions available in Foundation. You can find a pile of information in "Geometry and Range Utilities."

Finally, do check out the following from the AppKit folder found in Apple's sample code (installed with Dev tools):

• BezierPathLab
  CircleView
  ClockControl
  DotView
  DotViewUndo
  Rulers

Thanks! I'll target this list first.

 

[dernhelm]

Also, read Apple's Human Interface Guidelines. Xcode comes with a copy. Make sure you don't shatter them into little itty-bitty pieces-- they are quite insightful.

I agree - the people writing the Mail Apps and iTunes apps should read them as well...

 

[Mechcozmo]

I agree - the people writing the Mail Apps and iTunes apps should read them as well...

Hey, I'm sure when you were drunk you did some crazy stuff too...