\r\n<Control name=\"Gradient\">\r\n<script>\r\n…\r\nif ($.browser.mozilla)\r\n{\r\n value = \"-moz-linear-gradient(\"\r\n + position + \", \"\r\n + startColorString + \", \"\r\n + endColorString + \")\";\r\n}\r\n$(this.element).css(property, value);\r\n…\r\n</script>\r\n</Control>\r\n ",
"example": " \r\n<Gradient start=\"#808080\" end=\"#f0f0f0\"/>\r\n", "result": [ " ", QuickUI.Control.create(FeatureBrowserIsolationDemo), " " ] }); } }); // // FeatureBrowserIsolationDemo // FeatureBrowserIsolationDemo = QuickUI.Control.extend({ className: "FeatureBrowserIsolationDemo", render: function() { QuickUI.Control.prototype.render.call(this); this.setClassProperties(QuickUI.Control, { "content": [ " ", QuickUI.Control.create(Gradient, { "start": "#808080", "end": "#f0f0f0" }), " " ] }); } }); // // FeatureComposition // FeatureComposition = Feature.extend({ className: "FeatureComposition", render: function() { Feature.prototype.render.call(this); this.setClassProperties(Feature, { "name": "Define new controls by composing existing ones", "description": [ " QuickUI controls can be used as building blocks for larger and more complex controls. Snap together some markup, CSS, and JavaScript behavior—and now you have a new class that can be used anywhere you want. See the full ", QuickUI.Control.create(GalleryLink, { "content": "SearchBox" }), " example. " ], "control": "
\r\n<Control name=\"SearchBox\">\r\n\r\n<content>\r\n <input id=\"terms\" type=\"text\"/>\r\n <OrangeButton>Search</OrangeButton>\r\n</content>\r\n…\r\n</Control>\r\n", "example": "
\r\n<SearchBox/>\r\n", "result": [ " ", QuickUI.Control.create(SearchBox), " " ] }); } }); // // FeatureElementIDs // FeatureElementIDs = Feature.extend({ className: "FeatureElementIDs", render: function() { Feature.prototype.render.call(this); this.setClassProperties(Feature, { "name": "Refer to DOM elements as class members", "description": " The JavaScript generated by the Quick compiler builds your DOM elements at run-time through jQuery calls. As it does so, it saves references to any element with an ID, storing these as members on your control instance. Your JavaScript can refer to these members directly without the need for run-time searches through the DOM to reacquire exactly the element you want. This works even if another element on the page has the same ID! ", "control": "
\r\n<Control name=\"Counter\">\r\n\r\n<content>\r\nYou’ve clicked this\r\n<span id=\"count\">0</span>\r\ntimes.\r\n</content>\r\n\r\n<script>\r\n$.extend(Counter.prototype, {\r\nready: function() {\r\n // Points to above span.\r\n var $count = $(this.count);\r\n $(this.element).click(function() {\r\n $count.text(1 +\r\n parseInt($count.text()));\r\n });\r\n}\r\n});\r\n</script>\r\n\r\n</Control>\r\n ",
"example": " \r\n<Counter/>\r\n<Counter/>\r\n<Counter/>\r\n", "result": [ " ", QuickUI.Control.create(Counter), " ", QuickUI.Control.create(Counter), " ", QuickUI.Control.create(Counter), " " ] }); } }); // // FeatureHtmlMacros // FeatureHtmlMacros = Feature.extend({ className: "FeatureHtmlMacros", render: function() { Feature.prototype.render.call(this); this.setClassProperties(Feature, { "name": "HTML macros", "description": " Define your own tag to stand for a block of HTML content. This content will get inserted wherever you use that tag. ", "control": "
\r\n<Control name=\"Greet\">\r\nHello <i>world!</i>\r\n</Control>\r\n", "example": "
\r\n<Greet/>\r\nYes!\r\n<Greet/>\r\n", "result": [ " ", QuickUI.Control.create(FeatureHtmlMacrosDemo), " " ] }); } }); // // FeatureHtmlMacrosDemo // FeatureHtmlMacrosDemo = QuickUI.Control.extend({ className: "FeatureHtmlMacrosDemo", render: function() { QuickUI.Control.prototype.render.call(this); this.setClassProperties(QuickUI.Control, { "content": [ " ", QuickUI.Control.create(Greet2), " Yes! ", QuickUI.Control.create(Greet2), " " ] }); } }); // // FeatureMarkupAndCSS // FeatureMarkupAndCSS = Feature.extend({ className: "FeatureMarkupAndCSS", render: function() { Feature.prototype.render.call(this); this.setClassProperties(Feature, { "name": "Keep related markup and CSS right next to each other", "description": " Old school HTML pages kept the markup and CSS right next to each other, which was great for simple pages but can’t scale up to today’s complex apps. QuickUI restores this simplicity in a scalable way by letting you define a control in a single file that keeps the control’s markup and CSS rules together. No more hunting around for all the styles defined for a particular component! ", "control": "
\r\n<Control name=\"Tag\">\r\n\r\n<content>\r\n <<span id=\"Tag_content\"/>>\r\n</content>\r\n\r\n<style>\r\n{\r\n display: inline;\r\n font-family: monospace;\r\n}\r\n</style>\r\n…\r\n</Control>\r\n ",
"example": " \r\nQuick markup has <Tag>style</Tag> and <Tag>script</Tag> elements, just like HTML.\r\n", "result": [ " ", QuickUI.Control.create(FeatureMarkupAndCSSDemo), " " ] }); } }); // // FeatureMarkupAndCSSDemo // FeatureMarkupAndCSSDemo = QuickUI.Control.extend({ className: "FeatureMarkupAndCSSDemo", render: function() { QuickUI.Control.prototype.render.call(this); this.setClassProperties(QuickUI.Control, { "content": [ " Quick markup has ", QuickUI.Control.create(Tag, { "content": "style" }), " and ", QuickUI.Control.create(Tag, { "content": "script" }), " elements, just like HTML. " ] }); } }); // // FeatureProperties // FeatureProperties = Feature.extend({ className: "FeatureProperties", render: function() { Feature.prototype.render.call(this); this.setClassProperties(Feature, { "name": "Easy property definition", "description": " The QuickUI runtime includes a range of helper functions that make it trivial to define properties on a control class and map the property values to (and from) control DOM element content, CSS styles, and more. Properties can be specified in markup as tag attributes or tag content. Compound property syntax lets the markup for control consumers define rich property values. All proprties are directly accessible as JavaScript class members. ", "control": "
\r\n<Control name=\"Recipe\">\r\n\r\n<content>\r\n <div>\r\n Name: <span id=\"Recipe_name\"/>\r\n <span id=\"Recipe_rating\"/>\r\n </div>\r\n <div id=\"Recipe_content\"/>\r\n</content>\r\n\r\n<script>\r\n$.extend(Recipe.prototype, {\r\n\r\ncontent: QuickUI.Element(\r\n \"Recipe_content\").content(),\r\nname: QuickUI.Element(\r\n \"Recipe_name\").content(),\r\nrating: QuickUI.Property.integer(\r\n function(rating) {\r\n $(this.Recipe_rating).text(\r\n \"*****\".substr(0, rating));\r\n })\r\n\r\n})\r\n</script>\r\n\r\n</Control>\r\n ",
"example": " \r\n<Recipe name=\"Lasagna\" rating=\"3\">\r\n Quick and easy lasagna\r\n</Recipe>\r\n<Recipe>\r\n <name>\r\n Pasta <i>con i fagioli</i>\r\n </name>\r\n <rating>5</rating>\r\n <content>\r\n A <b>great</b>\r\n Tuscan peasant dish\r\n </content>\r\n</Recipe>\r\n", "result": [ " ", QuickUI.Control.create(FeaturePropertiesDemo), " " ] }); } }); // // FeaturePropertiesDemo // FeaturePropertiesDemo = QuickUI.Control.extend({ className: "FeaturePropertiesDemo", render: function() { QuickUI.Control.prototype.render.call(this); this.setClassProperties(QuickUI.Control, { "content": [ " ", QuickUI.Control.create(Recipe, { "content": " Quick and easy lasagna ", "name": "Lasagna", "rating": "3" }), " ", QuickUI.Control.create(Recipe, { "content": " A great Tuscan peasant dish ", "name": " Pasta con i fagioli ", "rating": "5" }), " " ] }); } }); // // FeatureScoping // FeatureScoping = Feature.extend({ className: "FeatureScoping", render: function() { Feature.prototype.render.call(this); this.setClassProperties(Feature, { "name": "Prevent style rule collisions with style scoping", "description": " Controls on a page are as independent of each other as possible, so you can mix controls freely without concern for collisions in the namespaces for DOM element IDs or CSS rule names. For example, the QuickUI compiler ensures that a control’s CSS only applies to instances of that control: each control defines a corresponding CSS class, and the DOM roots of all that control’s instances are stamped with that CSS class. So if two controls define CSS for a class called, say, “message”, the generated CSS will apply the correct rules to each control. ", "control": "
\r\n<Control name=\"Red\">\r\n<div class=\"message\">I’m red</div>\r\n<style>\r\n.message {\r\n color: red;\r\n}\r\n</style>\r\n</Control>\r\n\r\n<Control name=\"Green\">\r\n<div class=\"message\">I’m green</div>\r\n<style>\r\n.message {\r\n color: green;\r\n}\r\n</style>\r\n</Control>\r\n ",
"example": " \r\n<Red/>\r\n<Green/>\r\n", "result": [ " ", QuickUI.Control.create(FeatureScopingDemo), " " ] }); } }); // // FeatureScopingDemo // FeatureScopingDemo = QuickUI.Control.extend({ className: "FeatureScopingDemo", render: function() { QuickUI.Control.prototype.render.call(this); this.setClassProperties(QuickUI.Control, { "content": [ " ", QuickUI.Control.create(Red), " ", QuickUI.Control.create(Green), " " ] }); } }); // // FeatureSubclassing // FeatureSubclassing = Feature.extend({ className: "FeatureSubclassing", render: function() { Feature.prototype.render.call(this); this.setClassProperties(Feature, { "name": "Subclassing", "description": [ " Quick controls can be easily subclassed to create true prototype-based JavaScript subclasses. These inherit DOM elements, CSS rules, and behavior from their parent classes in a well-defined way. One use for subclassing is to create templates for dialogs, page sections, or complete pages (such as the ", QuickUI.Control.create(GalleryLink, { "content": "GalleryPage" }), " example). Subclasses generally allow for clean factoring of a user interface into easily maintainable and reusable components. " ], "control": "
\r\n<!-- Sample dialog template -->\r\n<Control name=\"OrangeDialog\">\r\n\r\n<prototype>\r\n <Dialog>\r\n <h1 id=\"OrangeDialog_title\"/>\r\n <div id=\"OrangeDialog_content\"/>\r\n <div id=\"OrangeDialog_buttons\"/>\r\n </Dialog>\r\n</prototype>\r\n\r\n<style>\r\n{\r\n border: 2px solid orange;\r\n …\r\n}\r\n</style>\r\n\r\n<script>\r\n$.extend(OrangeDialog.prototype, {\r\nbuttons: QuickUI.Element(\r\n \"OrangeDialog_buttons\").content(),\r\n…\r\n});\r\n</script>\r\n\r\n</Control>\r\n ",
"example": " \r\n<!-- Sample use of template -->\r\n<Control name=\"SampleDialog\">\r\n\r\n<prototype>\r\n <OrangeDialog\r\n title=\"What do you think?\">\r\n It's easy to use subclassing\r\n to create a new dialog --\r\n or an entirely new template.\r\n <buttons>\r\n <OrangeButton>\r\n Huh\r\n </OrangeButton>\r\n <OrangeButton>\r\n Neat!\r\n </OrangeButton>\r\n </buttons>\r\n </OrangeDialog>\r\n</prototype>\r\n\r\n</Control>\r\n", "result": [ " ", QuickUI.Control.create(FeatureSubclassingDemo), " " ] }); } }); // // FeatureSubclassingDemo // FeatureSubclassingDemo = QuickUI.Control.extend({ className: "FeatureSubclassingDemo", render: function() { QuickUI.Control.prototype.render.call(this); this.setClassProperties(QuickUI.Control, { "content": [ " ", this.buttonShow = QuickUI.Control.create(OrangeButton, { "content": "Show dialog", "id": "buttonShow" }), " " ] }); } }); $.extend(FeatureSubclassingDemo.prototype, { ready: function() { $(this.buttonShow).click(function() { Dialog.show(SampleDialog); }); } }); // // GetStartedModule // GetStartedModule = QuickUI.Control.extend({ className: "GetStartedModule", render: function() { QuickUI.Control.prototype.render.call(this); this.setClassProperties(QuickUI.Control, { "content": [ " ", "
\r\nQuickUI (Quick User Interface) is a framework that simplifies the design, construction,\r\nand maintenance of web-based user interfaces. The easiest way to describe QuickUI is\r\nthat it lets you write HTML as if you could create your own tags.\r\n
", " ", "\r\nIn QuickUI, the tags you create are called controls. You define controls with declarative\r\nmarkup that can include HTML (including other QuickUI controls), CSS styling,\r\nand JavaScript scripting. You can easily create new controls by bundling together a group\r\nof existing controls, or by subclassing an existing control to make it more special-purpose.\r\nThe page you are reading here, and remainder of this site, is built entirely using QuickUI.\r\n
", " ", $("").items( " QuickUI includes tools that compile your markup into regular JavaScript and CSS files. These tools run on Windows and OS/X (via the Mono project). The generated JavaScript makes use of the ", QuickUI.Control.create(Link, { "content": "jQuery", "href": "http://jquery.com" }), " library to build the web user interface on demand. QuickUI also includes a run-time library. Overall QuickUI is targetted at and tested against the mainstream browsers: Apple Safari 4.x, Google Chrome 3.x, Internet Explorer 8.x, and Mozilla Firefox 3.x. " )[0], " ", "\r\nThe following are brief examples of some aspects of QuickUI. Each demo shows\r\nthe live output of a Quick control running on this page.\r\n
", " ", QuickUI.Control.create(FeatureHtmlMacros), " ", QuickUI.Control.create(FeatureMarkupAndCSS), " ", QuickUI.Control.create(FeatureComposition), " ", QuickUI.Control.create(FeatureElementIDs), " ", QuickUI.Control.create(FeatureProperties), " ", QuickUI.Control.create(FeatureSubclassing), " ", QuickUI.Control.create(FeatureScoping), " ", QuickUI.Control.create(FeatureBrowserIsolation), " ", "\r\nQuickUI:\r\n
", " ", "\r\nQuickUI (Quick User Interface) is a framework that simplifies the design, construction,\r\nand maintenance of web-based user interfaces. The easiest way to describe QuickUI is\r\nthat it lets you write HTML as if you could create your own tags.\r\n
", " ", "\t\r\nIn QuickUI, the tags you create are called controls. You define controls with declarative\r\nmarkup that can include HTML (including other QuickUI controls), CSS styling,\r\nand JavaScript scripting. You can easily create new controls by bundling together a group\r\nof existing controls, or by subclassing an existing control to make it more special-purpose.\r\nThe page you are reading here, and remainder of this site, is built entirely using QuickUI.\r\n
", " ", $("").items( " QuickUI includes tools that compile your markup into regular JavaScript and CSS files. These tools run on Windows and OS/X (via the Mono project). The generated JavaScript makes use of the ", QuickUI.Control.create(Link, { "content": "jQuery", "href": "http://jquery.com" }), " library to build the web user interface on demand. QuickUI also includes a run-time library. Overall QuickUI is targetted at and tested against the mainstream browsers: Apple Safari 4.x, Google Chrome 3.x, Internet Explorer 8.x, and Mozilla Firefox 3.x. " )[0], " ", "\r\n\tThe following Quick markup defines a simple control called “Greet”.\r\n
", " ", QuickUI.Control.create(SourceCode, { "sourceFile": "Greet.qui" }), " ", $("").items( " This control definition gives you a new tag ", QuickUI.Control.create(Tag, { "content": "Greet" }), " that can be used in other Quick markup like this: " )[0], " ", QuickUI.Control.create(SourceCode, { "sourceFile": "Sample.qui" }), " ", "\r\nKicking everything off is accomplished in JavaScript via a jQuery extension:\r\n
", " ", "\r\n$(\"div\").control(Sample);\r\n", " ", "
\r\nThe div below shows the actual sample control above instantiated here on this page:\r\n
", " ", QuickUI.Control.create(CodeOutput, { "content": [ " ", QuickUI.Control.create(Sample), " " ] }), " ", $("").items( " This is a trivial example. The ", QuickUI.Control.create(Link, { "content": "tutorial", "href": "/tutorial/section01/default.html" }), " examines controls with complex contents, control styling, and interactive behavior. When combined with the ability to compose and subclass controls, things can quickly become very interesting. You can see some sample QuickUI controls in the ", QuickUI.Control.create(Link, { "content": "Gallery", "href": "/gallery/default.html" }), ". " )[0], " ", "\r\nConsider using QuickUI because it:\r\n
", " ", "