A minor update.
- To facilitate controls that want to perform their own layout, controls can bind to a new layout event. Catalog controls like HorizontalPanels, VerticalPanels, PanelWithOverlfow, and PersistentPanel use this to recalculate the layout of their contents in response to a change in window size.
- A companion event called sizeChanged can be triggered by a control that wants to cooperatively let its parents know about a change in the control’s size.
- A helper Control method called checkForSizeChange() can be called if a control has updated its contents and there’s the possibility that its size has changed. The helper records the control’s last known size and, if the size has indeed change, raises the aforementioned sizeChanged event.
QuickUI 
Hi Jan,
I’m going through your tutorial and I am amazed by how intuitive is your quickui framework. I first read about it on this blog post: http://nerdplusart.com/html-needs-custom-components-and-what-to-do-about-it .
I’m currently building a single page application that is based on Chaplin, backbone.js, twitter bootstrap, jquery and is using handlebars templates. There was something about the simplicity and code friendly way that HTML controls are created in quickui that is making me want to adopt its use in my application. But, I’m curious if you are encouraging just the use of javascript or a combination of quickui markup, css and javascript? I haven’t gone through all your tutorials, but, I would like to know your opinion. One thing I’m noticing is that my app will be dynamic, so, I don’t see myself coding “static” values as is done in the tutorials. So, my hope is that there is a more advance way in quickui to do binding or at least looping to generate lists, menus, tabs, et cetera.
It would be tremendous to see a sample application. Is there one available?
I’m interested in one of the advanced topics quickui+jquery … but, it looks like the link is broken.
Thank you for sharing this framework with us.
Best regards,
Chris
Hi Chris,
Thanks for your comments — glad you like what you see!
QuickUI is certainly intended for use in dynamic AJAX apps. Cozi.com uses QuickUI for their Meal Planner feature in just that way. QuickUI constructs the View in an MVP pattern to display and edit data from the server. Unfortunately, the source for that app can’t be made public.
The tutorial uses static examples for simplicity, but of course you’re right that it would be helpful to have a more complete dynamic sample app. It’s always a challenge to come up with an example that’s interesting enough to be illustrative but not so complex that it’s overwhelming.
Regarding looping: While working on the Cozi Meal Planner, the QuickUI controls typically had property getter/setters that had the same value type as the data in the Model. Most of the list-ish controls derived from the QuickUI Catalog control called List, so they automatically picked up basic looping. E.g., if the Model had an array of recipes or whatever, then the RecipeList control would have an items() getter/setter that accepted an array of recipe objects. An accompanying Recipe control would be set as the class for items in that list. The List base class would take care of looping over the array, creating the required number of Recipe controls, and passing the recipes in the array to the corresponding controls.
If you’re interested in a sample showing something like that, I’ll definitely that up on my priority list. I’ve been playing with a canonical blog reader example, or might take a shot at a To Do list example mirroring the ones at http://addyosmani.github.com/todomvc/. If you want to share more details about the app you’re dealing with, feel free to send me email at jan at quickui dot org and I can provide some suggestions for getting started.
The page at http://quickui.org/tutorial/jQuery-UI.html should be back again. Some part of my pipeline seems to have messed up the casing on that URL. Sorry about that; I hope I just fixed it for good.
-Jan
Hi Jan,
You understood my question completely! Your example of the List control was exactly what I was looking for, apparently I hadn’t gotten that far in the tutorials. The fact that you’re talking about Models and MVP tells me that quickui might work with backbone.js.
I am very familiar with the TODO list example with backbone.js, which is one of the samples on the link you provided. And I also recognize addyosmani as someone who has written a lot about backbone.js and single page applications. The TODO sample was the sample that got me started with the idea of building a single page application using backbone.js. It has been a long road since then and I eventually discovered Chaplin https://github.com/moviepilot/chaplin which puts an MVC framework on top of backbone.js.
I would love to see a TODO sample written in quickui 🙂 … To be honest, the many approaches to building JavaScript apps is both exciting and overwhelming at the same time. I’ve already started working with quickui and I’m trying to build a modal spinner control to display when collections are loading. I am using your modal control. I thought this would be a simple enough control to get my feet wet. I still don’t know enough about your markup and compiler to know how to use it yet, I haven’t studied it enough. But, the picture I am getting is that the quickui markup and javascript work hand in hand to create the desired controls. But, based on your blog posts, I am not clear if everything can be done with pure JavaScript or not. Also, what approach do you suggest is best; pure JavaScript or a mixture of quickui markup and JavaScript?
When Robbie (at nerdplusart) talked about how you used to work at Microsoft and how you were instrumental in building the foundation for what would become the WPF controls I realized you must be seriously talented. The thing I loved most about WPF and Silverlight was how the markup converted to controls. As a developer I saw the XAML markup as something extremely powerful. I worked with WPF and Silverlight for a few years until about a year ago when I switched over to HTML/JavaScript/CSS3.
The application I’m working on is just a sample app. It is meant to learn the best approach to building JavaScript single page applications. The models I’m focusing on is Projects and Projects have Tasks. Tasks can be viewed independently and also coupled with their projects. Also, I am adding simple Notes, where Notes have a title and a body and associated Tags. I felt this was complex enough to test my abilities with JavaScript before moving forward with something more complex. I am using the new asp.net mvc 4 webapi as a restful service for my client app.
Thank you for the link to cozi.com. I hadn’t heard of it before, but, I’ve wanted an app like this for the longest time! 🙂 I will definitely check it out and pay special attention to the meal planner. My wife is always planning meals for the week ahead.
Best regards,
Chris
QuickUI can be used either in pure JavaScript, or markup (which gets compiled to JavaScript), or a mixture of both. Which route is best really depends on you and the other people who might be working in your codebase. The markup compiler itself currently requires the .NET runtime, which is a deal-breaker for some developers, although if you’re a WPF fan, maybe .NET is just right. I’ve used the pure JavaScript approach in the main tutorial mostly so that the reader can do the exercises directly in the browser.
I tend to use the markup approach myself because I find the markup makes it easier for me to organize my code. In particular, I find the ability to have a control’s CSS travel together with the rest of the control code (markup + JavaScript) invaluable. But that’s just my own preference. YMMV.
I haven’t used Backbone myself, but will take a look at it. Based on the little I’ve read, one thing to keep watch for is the fact that Backbone and QuickUI provide their own subclassing mechanisms. (QuickUI’s is based on jQuery’s.) The approach and even syntax appears to be comparable, but there are surely enough differences in behavior that you’ll need to keep straight which sort of class you’re dealing with at any moment. In general, though, I expect the two should be able to work well together. As I said, I’ll look at building out a sample app, possibly a ToDoMVC sample.
In the meantime, good luck with your explorations, and please continue to feel free to ask questions.
It has been enjoyable talking to you about your framework, Jan. I’m looking forward to going through the tutorials and getting a clearer appreciation how things work. I’m a .NET developer, so, now I’m excited to give the compiler a try. Thanks for your advice on working with the markup. I’ll keep you posted on my progress 🙂 … thanks so much for your responses.
Have a great day,
Chris