### Basic qx.Server Example Source: https://archive.qooxdoo.org/5.0.2/toc Demonstrates a basic setup and usage of qx.Server, a component for server-side JavaScript applications. It covers installation and simple example scenarios for running qooxdoo on the server. ```javascript var server = require("qooxdoo-server"); server.on("request", function(req, res) { res.writeHead(200, {"Content-Type": "text/plain"}); res.end("Hello World!"); }); server.listen(8080); ``` -------------------------------- ### qooxdoo Hello World Example (SDK) Source: https://archive.qooxdoo.org/5.0.2/toc A simple 'Hello World' application demonstrating the basic structure and setup of a qooxdoo application using the SDK. This is often the first example encountered when starting with qooxdoo. ```javascript qx.Class.define("myapp.Application", { extend: qx.application.Standalone, members: { /** * This method contains the initial application code. */ main: function() { // Call super class this.base(arguments); // Enable logging in debug builds if (qx.core.Environment.get("qx.debug")) { // Support native logging capabilities, e.g. Firebug for Firefox qx.log.appender.Native; // Support additional cross-browser console. qx.log.appender.Console; } // create a button var button = new qx.ui.form.Button("Hello World!"); // add button to the root document this.getRoot().add(button, {left: "50%", top: "50%"}); // add event listener button.addListener("execute", function(e) { alert("Hello World!"); }); } } }); ``` -------------------------------- ### Loading qooxdoo Server Module in Node.js Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/server/getting_started This snippet demonstrates loading the qooxdoo library in a Node.js environment and defining a basic class that extends qx.core.Object with a bark method. It requires Node.js and the qooxdoo package installed via npm. The example creates an instance and calls the method to output 'Ruff!' to the console. No specific inputs or outputs beyond console logging; suitable for initial setup but lacks error handling. ```javascript var qx = require('%{qooxdoo}'); qx.Class.define("Dog", { extend : qx.core.Object, members : { bark : function() { console.log("Ruff!"); } } }); var dog = new Dog(); dog.bark(); ``` -------------------------------- ### Initialize qx.Website and Display Div Content Source: https://archive.qooxdoo.org/5.0.2/pages/website/getting_started This example demonstrates the fundamental setup for using qx.Website in an HTML page. It includes the library via script tag and uses the q() selector to retrieve a div's HTML content. The code alerts the div's inner HTML when executed, assuming the qx.Website library is properly loaded at the specified URI. ```html
Hello World!
``` -------------------------------- ### Qooxdoo SDK Tooling Source: https://archive.qooxdoo.org/5.0.2/toc Introduction to the Qooxdoo SDK, its requirements, and a basic 'Hello World' example to get started with the tools. ```APIDOC ## Tooling ### Introduction Provides an introduction to the Qooxdoo SDK, its requirements, and a 'Hello World' example to help users get started with the development tools. ``` -------------------------------- ### Build Qooxdoo Application for Deployment Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/tool/getting_started Produces an optimized production-ready build version of the application. The process concatenates all required classes into a single minimized JavaScript file, strips debug code, removes whitespace and comments, and performs various code optimizations for faster startup and improved performance. ```shell generate.py build ``` -------------------------------- ### Generate Qooxdoo Source with All Classes Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/tool/getting_started Executes the qooxdoo generator to rebuild the source version including all available source classes. Required when introducing new classes or changing dependencies during development. The resulting application loads individual unoptimized JavaScript files. ```shell generate.py source-all ``` -------------------------------- ### Setup Qooxdoo Grunt Toolchain (Bash) Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/tool/grunt Installs required npm packages and configures the qooxdoo Grunt toolchain by running npm install followed by grunt setup. Requires Node.js, npm, and Python (for Generator) installed; qooxdoo project directory. On Windows, run as administrator for symlink creation. Outputs setup completion; no specific return value, but enables Grunt tasks. Limitations: Symlinks may fail on restricted systems. ```bash $ npm install $ grunt setup ``` -------------------------------- ### Generate Qooxdoo API Documentation Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/tool/getting_started Parses JSDoc-style comments from application and framework source code to create an interactive API viewer. The generated documentation is fully cross-linked, searchable, and accessible via a web interface in the api folder. Supports JavaScript and qooxdoo-specific documentation features. ```shell generate.py api ``` -------------------------------- ### Basic HTML Structure with qooxdoo Website API Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/website/getting_started This HTML snippet demonstrates how to include the qooxdoo Website library and use its API to interact with HTML elements. It assumes the library is available at a specified URI and shows a simple example of retrieving HTML content from a div element. ```html ``` -------------------------------- ### Basic qooxdoo Server Example in Node.js Source: https://archive.qooxdoo.org/5.0.2/pages/server/overview Demonstrates how to use the qooxdoo qx.Server package in a Node.js environment. It defines custom classes and utilizes Node.js's console object. Requires the qooxdoo package to be installed via npm. ```javascript var qx = require('qooxdoo'); // create animal class qx.Class.define("my.Animal", { extend : qx.core.Object, properties : { legs : {init: 4} } }); // create dog class qx.Class.define("my.Dog", { extend : my.Animal, members : { bark : function() { console.log("ARF! I have " + this.getLegs() + " legs!"); } } }); var dog = new my.Dog(); dog.bark(); ``` -------------------------------- ### qx.Server Requirements and Installation Source: https://archive.qooxdoo.org/5.0.2/toc Outlines the prerequisites for using qx.Server and provides instructions on how to install it. This includes specifying supported runtimes and the installation command. ```bash # Install qx.Server using npm npm install qooxdoo-server --save-dev # Supported Runtimes: # - Node.js (version X.Y or higher) ``` -------------------------------- ### Loading qx.Server in Node.js with qooxdoo Source: https://archive.qooxdoo.org/5.0.2/pages/server/getting_started This snippet shows how to load the qx.Server module in a Node.js environment. It defines a simple 'Dog' class extending qooxdoo's core Object and demonstrates its usage by creating an instance and calling a method. ```javascript var qx = require('qooxdoo'); qx.Class.define("Dog", { extend : qx.core.Object, members : { bark : function() { console.log("Ruff!"); } } }); var dog = new Dog(); dog.bark(); ``` -------------------------------- ### qooxdoo Widget Reference Example Source: https://archive.qooxdoo.org/5.0.2/toc Illustrates how to use widgets from the qooxdoo widget library. This example shows the creation and basic configuration of a text field and a button. ```javascript // Create a text field var nameField = new qx.ui.form.TextField("Enter your name"); nameField.setRequired(true); // Create a button var submitButton = new qx.ui.form.Button("Submit"); submitButton.addListener("execute", function() { alert("Hello, " + nameField.getValue() + "!"); }); // Add widgets to the root var container = new qx.ui.container.VBox(10); container.add(nameField); container.add(submitButton); this.getRoot().add(container, {left: 20, top: 20}); ``` -------------------------------- ### Complete Configuration Example (JSON) Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/tool/generator/generator_config_articles Illustrates a complete configuration example including include, jobs, let, library, and environment keys. This shows how to combine external and local configurations to create a custom build process. ```json { "include": [{"as": "apiconf", "path": "../apiviewer/config.json"}], "jobs": { "myapi": { "extend": ["apiconf::build"], "let": { "ROOT": "../apiviewer", "BUILD_PATH": "./api", "API_INCLUDE": ["qx.*", "myapp.*"], "API_EXCLUDE": ["myapp.tests.*"] }, "library": { ... }, "environment": { "myapp.resourceUri": "./resource" } } } } ``` -------------------------------- ### Example Gruntfile Configuration (JavaScript) Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/tool/grunt Defines a basic Gruntfile.js for qooxdoo applications, loading utilities and qooxdoo Grunt module, then exporting a configuration object with generator settings. Depends on Node.js, Grunt, and qooxdoo path; run via Grunt CLI. Configures tasks like generator jobs; inputs via config object, outputs build artifacts. Limitations: Incomplete example; requires full qooxdoo setup for execution. ```javascript // requires var util = require('util'); var qx = require("${REL_QOOXDOO_PATH}/tool/grunt"); // grunt module.exports = function(grunt) { var config = { generator_config: { let: { } }, common: { ``` -------------------------------- ### qx.Server Development Source: https://archive.qooxdoo.org/5.0.2/toc Information on using Qooxdoo's qx.Server module for server-side development. Covers included features, supported runtimes, installation, and examples. ```APIDOC ## qx.Server ### Server Overview Details the features, supported runtimes, installation process, and provides basic and additional usage examples for qx.Server. ### qx.Server Requirements Specifies the runtime requirements and installation procedures for qx.Server. ### RequireJS Support Explains the representable interface and configuration file related to RequireJS support in qx.Server. ``` -------------------------------- ### Higher-level requests - Basic Setup Source: https://archive.qooxdoo.org/5.0.2/pages/communication/request_io Demonstrates the basic setup for making an HTTP request using qooxdoo's Xhr transport, including setting the URL, method, and request data. ```APIDOC ## POST /books ### Description This endpoint is used to create a new book resource. ### Method POST ### Endpoint /books ### Parameters #### Query Parameters None #### Request Body - **title** (String) - Required - The title of the book. ### Request Example ```json { "title": "The title" } ``` ### Response #### Success Response (200) - **id** (String) - The unique identifier of the newly created book. - **title** (String) - The title of the book. #### Response Example ```json { "id": "123e4567-e89b-12d3-a456-426614174000", "title": "The title" } ``` ``` -------------------------------- ### Initial List Controller Setup (JavaScript) Source: https://archive.qooxdoo.org/5.0.2/pages/desktop/tutorials/tutorial-part-4-2 This is the original configuration for the Qooxdoo List controller before customization. It shows the basic setup for creating a list controller, setting label and icon paths directly, and configuring item appearance. This code block is provided for context, indicating what parts are removed or modified to integrate the custom delegate. ```javascript // create the controller var controller = new qx.data.controller.List(null, main.getList()); controller.setLabelPath("text"); controller.setIconPath("user.profile_image_url"); controller.setDelegate({ configureItem : function(item) { item.getChildControl("icon").setWidth(48); item.getChildControl("icon").setHeight(48); item.getChildControl("icon").setScale(true); item.setRich(true); } }); ``` -------------------------------- ### Example: #asset Compiler Hint (Qooxdoo < 3.0) Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/tool/migration/migration_guide Demonstrates the syntax for the deprecated `#asset` compiler hint used in older versions of Qooxdoo. This hint is used for including assets in the application, and its functionality is replaced by `@asset` in newer versions. ```javascript /* ************************************************** #asset(myApp/*) ************************************************* */ /** * This is ... of your custom application "myApp" */ qx.Class.define("myApp.Application", { extend : qx.application.Standalone, ... } ``` -------------------------------- ### SCSS and Sass Syntax Examples Source: https://archive.qooxdoo.org/5.0.2/pages/mobile/theming These examples demonstrate the SCSS syntax using nested rules and property grouping, which extends CSS for modularity. The Sass example shows the alternative indented syntax. Purpose is to illustrate differences; no dependencies beyond Sass compiler; input is stylesheet content, output is compiled CSS; limitations include requiring compilation for use in browsers. ```scss #main { color: blue; font-size: 0.3em; a { font: { weight: bold; family: serif; } } } ``` ```sass #main color: blue font-size: 0.3em a font: weight: bold family: serif ``` -------------------------------- ### POST /rpc/getString Source: https://archive.qooxdoo.org/5.0.2/pages/communication/rpc_server_writer_guide Returns the string "Hello world". ```APIDOC ## POST /rpc/getString ### Description Returns the constant string `"Hello world"`. ### Method POST ### Endpoint /rpc/getString ### Parameters None. ### Request Example {} ### Response #### Success Response (200) - **value** (string) - The string "Hello world". ### Response Example { "value": "Hello world" } ``` -------------------------------- ### Portable Test Runner Example (HTML/JavaScript) Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/development/frame_apps_testrunner This HTML and JavaScript example demonstrates how to use the portable Test Runner. It includes the testrunner-portable.js script, the application code (foo.js), and the test definitions in JavaScript. ```html Test Runner ``` -------------------------------- ### GET q.string.startsWith - String Utility Source: https://archive.qooxdoo.org/5.0.2/pages/website/modules Checks if a string starts with a specified prefix. Returns boolean indicating whether the string begins with the given characters. ```APIDOC ## q.string.startsWith ### Description Checks if a string starts with a specified prefix. Part of the Util module that provides static utility functions for strings, arrays, and generic helpers. ### Method Function ### Parameters #### Path Parameters - **string** (string) - Required - The string to check - **prefix** (string) - Required - The prefix to look for #### Query Parameters - No query parameters #### Request Body - No request body ### Request Example q.string.startsWith("hamster", "ham"); ### Response #### Success Response - **result** (boolean) - True if string starts with prefix #### Response Example true ``` -------------------------------- ### Run Qooxdoo migration and source generation scripts Source: https://archive.qooxdoo.org/5.0.2/pages/tool/migration/migration_guide Executes the Qooxdoo migration job to update project files and then runs the source generation step to verify the updated code base. Requires a functional Python environment with the Qooxdoo SDK installed. No additional inputs beyond the command arguments. ```shell generate.py migration ``` ```shell generate.py source ``` -------------------------------- ### qooxdoo Unit Testing Example Source: https://archive.qooxdoo.org/5.0.2/toc Provides a basic example of how to write unit tests for qooxdoo code using its testing framework. This typically involves using assertion methods to verify expected outcomes. ```javascript // Assuming myapp.Calculator is a class with an add method qx.Class.define("myapp.test.CalculatorTest", { extend: qx.test.QUnit, members: { "testAdd": function() { var calculator = new myapp.Calculator(); this.assertEquals(5, calculator.add(2, 3), "2 + 3 should be 5"); this.assertEquals(0, calculator.add(0, 0), "0 + 0 should be 0"); this.assertEquals(-1, calculator.add(-2, 1), "-2 + 1 should be -1"); }, "testAddWithNonNumbers": function() { var calculator = new myapp.Calculator(); // Assert that adding non-numbers throws an error or handles it gracefully this.assertThrows(function() { calculator.add("a", 3); }, qx.type.BaseError, "Adding string should throw an error"); } } }); ``` -------------------------------- ### Example: @asset Compiler Hint (Qooxdoo >= 3.0) Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/tool/migration/migration_guide Illustrates the syntax for the `@asset` compiler hint, used in Qooxdoo version 3.0 and later. This hint serves the same purpose as `#asset` but utilizes JSDoc comments instead of JS comments. Note the difference in formatting. ```javascript /** * This is ... of your custom application "myApp" * * @asset(myApp/*) */ qx.Class.define("myApp.Application", { extend : qx.application.Standalone, ... } ``` -------------------------------- ### Child Control Selector Example in qx.Desktop Source: https://archive.qooxdoo.org/5.0.2/pages/desktop/ui_appearance Illustrates the structure of child control selectors in qx.Desktop. The example shows how selectors are built for nested child controls. ```Text - pane - level1 - level2 - level3 ``` -------------------------------- ### GET q.matchMedia - Media Query Evaluation Source: https://archive.qooxdoo.org/5.0.2/pages/website/modules Evaluates media queries and returns a match object with boolean matching capability. Provides a polyfill for window.matchMedia when not supported natively. ```APIDOC ## q.matchMedia ### Description Module for evaluating media queries. Implements a wrapper around media.match.js that provides a polyfill for window.matchMedia when not natively supported. ### Method Function ### Parameters #### Path Parameters - **query** (string) - Required - Media query string to evaluate (e.g., "screen and (min-width: 480px)") #### Query Parameters - No query parameters #### Request Body - No request body ### Request Example q.matchMedia("screen and (min-width: 480px)").matches ### Response #### Success Response - **matches** (boolean) - True if media query matches, false otherwise #### Response Example true ``` -------------------------------- ### Introduction to Qooxdoo Source: https://archive.qooxdoo.org/5.0.2/toc Overview of Qooxdoo, including its nature as a framework, GUI toolkit, and its communication capabilities. Provides information on where to find more details online. ```APIDOC ## Introduction ### About Provides an overview of Qooxdoo as a framework, GUI toolkit, and its communication aspects. Includes links to online resources for further information. ### Feature Overview Details the key features of Qooxdoo, including runtimes, object-orientation, programming paradigms, internationalization support, API reference, testing capabilities, deployment options, and migration strategies. ### Architectural Overview Describes the overall architecture of the Qooxdoo framework. ### Getting Started Guides users on how to begin with Qooxdoo, with specific sections for qx.Website, qx.Desktop, qx.Mobile, qx.Server, and other related areas. ``` -------------------------------- ### GET q.template.get - Template Rendering Source: https://archive.qooxdoo.org/5.0.2/pages/website/modules Renders templates using Mustache.js templating engine. Returns a collection containing the newly created DOM elements with template data applied. ```APIDOC ## q.template.get ### Description Renders templates using Mustache.js templating engine. Returns a collection containing new DOM elements with template data applied. For detailed Mustache.js syntax, refer to Mustache.js documentation. ### Method Function ### Parameters #### Path Parameters - **templateId** (string) - Required - ID of the template to render #### Query Parameters - No query parameters #### Request Body - **data** (object) - Required - Data object to populate template ### Request Example q.template.get("templateId", {data: "test"}); ### Response #### Success Response - **elements** (collection) - Collection containing new element(s) with rendered template #### Response Example [ { "tagName": "DIV", "innerHTML": "test" } ] ``` -------------------------------- ### GET q.localStorage.get - Local Storage Retrieval Source: https://archive.qooxdoo.org/5.0.2/pages/website/modules Retrieves data from localStorage with cross-browser compatibility. Falls back to in-memory storage when localStorage is unavailable, providing consistent API access. ```APIDOC ## q.localStorage.get ### Description Retrieves data from localStorage with cross-browser compatibility. Uses Web Storage API when available, falls back to in-memory storage for older browsers (IE < 8), ensuring consistent API access. ### Method Function ### Parameters #### Path Parameters - **key** (string) - Required - Storage key to retrieve #### Query Parameters - No query parameters #### Request Body - No request body ### Request Example var value = q.localStorage.get("my_custom_key"); ### Response #### Success Response - **value** (any) - Stored value or null if key doesn't exist #### Response Example "stored_value" ``` -------------------------------- ### GET q.array.equals - Array Comparison Source: https://archive.qooxdoo.org/5.0.2/pages/website/modules Compares two arrays for equality by checking element values. Returns true if arrays have the same elements in the same order. ```APIDOC ## q.array.equals ### Description Compares two arrays for equality by checking element values. Returns true if arrays have the same elements in the same order. Part of array utility functions. ### Method Function ### Parameters #### Path Parameters - **array1** (array) - Required - First array to compare - **array2** (array) - Required - Second array to compare #### Query Parameters - No query parameters #### Request Body - No request body ### Request Example q.array.equals(["a", "b"], ["a", "b"]); ### Response #### Success Response - **result** (boolean) - True if arrays are equal #### Response Example true ``` -------------------------------- ### GET q.string.camelCase - String Conversion Source: https://archive.qooxdoo.org/5.0.2/pages/website/modules Converts hyphenated or underscored strings to camelCase format. Useful for standardizing string formats across different data sources. ```APIDOC ## q.string.camelCase ### Description Converts hyphenated or underscored strings to camelCase format. Part of string utility functions in the Util module for string manipulation. ### Method Function ### Parameters #### Path Parameters - **string** (string) - Required - String to convert to camelCase #### Query Parameters - No query parameters #### Request Body - No request body ### Request Example q.string.camelCase("i-like-cookies"); ### Response #### Success Response - **result** (string) - String in camelCase format #### Response Example "ILikeCookies" ``` -------------------------------- ### GET q.type.get - Type Detection Source: https://archive.qooxdoo.org/5.0.2/pages/website/modules Returns the type of a value as a string. Supports detecting String, Array, Object, Function, and other JavaScript primitive and reference types. ```APIDOC ## q.type.get ### Description Returns the type of a value as a string. Supports detecting JavaScript primitive and reference types including String, Array, Object, Function, etc. Part of general utility functions. ### Method Function ### Parameters #### Path Parameters - **val** (any) - Required - Value to determine type of #### Query Parameters - No query parameters #### Request Body - No request body ### Request Example q.type.get(val); ### Response #### Success Response - **type** (string) - String representation of the value type #### Response Example "String" ``` -------------------------------- ### GET q.array.unique - Array Deduplication Source: https://archive.qooxdoo.org/5.0.2/pages/website/modules Removes duplicate elements from an array, returning only unique values. Maintains the original order of first occurrences. ```APIDOC ## q.array.unique ### Description Removes duplicate elements from an array, returning only unique values. Maintains the original order of first occurrences. Part of array utility functions. ### Method Function ### Parameters #### Path Parameters - **array** (array) - Required - Array with potential duplicates #### Query Parameters - No query parameters #### Request Body - No request body ### Request Example q.array.unique(["a", "b", "b", "c"]); ### Response #### Success Response - **result** (array) - Array with duplicates removed #### Response Example ["a", "b", "c"] ``` -------------------------------- ### Enable Debug Logging in Qooxdoo Application Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/tool/getting_started Conditionally activates native and console log appenders when qx.debug environment flag is enabled. This code is automatically removed during build generation to prevent debug output in production. The logging mechanisms provide developer insights through browser consoles or in-app overlays. ```javascript if (qx.core.Environment.get("qx.debug")) { qx.log.appender.Native; qx.log.appender.Console; } ``` -------------------------------- ### Watch SCSS Job Configuration in config.json Source: https://archive.qooxdoo.org/5.0.2/pages/mobile/theming This JSON configures the watch-scss job in qx.Mobile's config.json for automated SCSS compilation using Sass. It defines paths for themes and resources, and a shell command for watching. Purpose is to enable real-time compilation; dependencies include Sass and defined paths; input is SCSS changes, output is compressed CSS; limitations require Ruby/Sass installation and proper path setup. ```json "watch-scss" : { "desc" : "Watch and compile the theme scss", "extend" : ["cache"], "let" : { "QX_MOBILE_THEME_PATH" : "${QOOXDOO_PATH}/framework/source/resource/qx/mobile/scss", "QX_SHARED_THEME_PATH" : "${QOOXDOO_PATH}/framework/source/resource/qx/scss", "APPLICATION_THEME_PATH" : "source/theme/${APPLICATION}", "APPLICATION_RESOURCE_PATH" : "source/resource/${APPLICATION}" }, "shell" : { "command" : "sass -C -t compressed -I ${QX_MOBILE_THEME_PATH} -I ${QX_SHARED_THEME_PATH} --watch ${APPLICATION_THEME_PATH}/scss:${APPLICATION_RESOURCE_PATH}/css", "command-not-found" : "It seems that Sass (http://sass-lang.com/) is not installed and/or executable, which is needed for the SCSS-compilation." } } ``` -------------------------------- ### Perform Remote GET Request in Qooxdoo Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/communication/remote_io This snippet shows how to make a GET request to a server using Qooxdoo's remote IO functionality. It includes a listener for the 'completed' event to handle the response. The example also includes commented-out options for POST requests, adding parameters, and setting request headers. ```JavaScript // get text from the server req = new qx.io.remote.Request(val.getLabel(), "GET", "text/plain"); // request a javascript file from the server // req = new qx.io.remote.Request(val.getLabel(), "GET", "text/javascript"); // Switching to POST // req.setMethod("POST"); // req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Adding parameters - will be added to the URL // req.setParameter("test1", "value1"); // req.setParameter("test2", "value2"); // Adding data to the request body // req.setData("foobar"); // Force to testing iframe implementation // req.setCrossDomain(true); req.addListener("completed", function(e) { alert(e.getContent()); // use the following for qooxdoo versions <= 0.6.7: // alert(e.getData().getContent()); }); // Sending req.send(); ``` -------------------------------- ### Qooxdoo String Utilities Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/website/modules Provides examples of static utility functions for string manipulation, including checking if a string starts with a specific prefix and converting strings to camel case. ```javascript // Strings q.string.startsWith("hamster", "ham"); // true q.string.camelCase("i-like-cookies"); // "ILikeCookies" ``` -------------------------------- ### Login Window Initialization and Display Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/desktop/tutorials/tutorial-part-4-1 This JavaScript code demonstrates how to create an instance of the login window, position it within the application's main window, and then open it. This is typically done during the application's startup sequence. ```javascript this.__loginWindow = new tweets.LoginWindow(); this.__loginWindow.moveTo(320,30); this.__loginWindow.open(); ``` -------------------------------- ### Cookie Module: Setting and Getting Cookies Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/website/modules Provides examples of how to set a cookie with a key-value pair and retrieve a cookie's value using the q.cookie.set() and q.cookie.get() methods, ensuring cross-browser compatibility. ```javascript q.cookie.set("key", "value"); q.cookie.get("key"); ``` -------------------------------- ### Register supported data types during dragstart Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/desktop/ui_dragdrop Registers multiple drag data types (qooxdoo list items and HTML list) when the drag operation starts, allowing the drop target to request the appropriate format. ```JavaScript source.addListener("dragstart", function(e) { e.addAction("move"); e.addType("qx/list-items"); e.addType("html/list"); }); ``` -------------------------------- ### qx.Desktop Application Development Source: https://archive.qooxdoo.org/5.0.2/toc Guides users on developing desktop-like applications using Qooxdoo's qx.Desktop module. Covers widgets, layouts, theming, and core development concepts. ```APIDOC ## qx.Desktop ### Overview Introduces the core components of qx.Desktop, including widgets, composites, roots, applications, and communication. ### How to Develop a qx.Desktop Application Details the development lifecycle, build process, and running applications through a web server. ### Widgets Introduction Explains various widget types, their interaction, resources, selection handling, drag & drop, form handling, menu management, window management, and table styling. Includes a widget reference. ### Layouts Covers the layouting system for arranging UI elements. ### Themes Details theming, appearance customization, creating custom themes, decorators, web fonts, and efficient theme development. ### Technical Concepts Explains concepts like the event layer, HTML element handling, the focus layer, and integrating qx.Website components within qx.Desktop. ### Tutorials Provides a series of tutorials covering the creation of a Tweets app, UI finishing, communication, form handling, custom widgets, theming, translation, unit testing, and virtual lists. ### Migration Offers guidance on migrating from older versions of qx.Desktop (e.g., 2.x). ``` -------------------------------- ### Mark method as protected using @protected tag (JSDoc) Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/development/api_jsdoc_ref Indicates that a method should be treated as protected, even if it does not start with an underscore. The Apiviewer uses this annotation to classify method visibility. The example shows a parameterless usage. ```JSDoc @protected ``` -------------------------------- ### Include qx.Website Library in HTML Source: https://archive.qooxdoo.org/5.0.2/pages/website/tutorial_web_developers This snippet shows how to include the qx.Website JavaScript library in an HTML file, either by referencing a local script or a CDN. It's the initial setup step for using qx.Website. ```html qx.Website tutorial ``` ```html ``` -------------------------------- ### Basic JavaScript Setup and Notification Logic Source: https://archive.qooxdoo.org/5.0.2/pages/website/tutorial_web_developers This JavaScript code sets up the basic structure for a notification system. It declares a variable for the popup and defines a 'notify' function. The demo code demonstrates how to use this function with a message, delay, and callback. ```javascript // create the notification popup var popup; // create the notification API var notify = function(message, delay, callback) { // do the notifying } // DEMO notify("This is ...", 1000, function() { notify("... a qx.Website notification demo.", 2000); }); ``` -------------------------------- ### Slider for IForm Interface and Invalid State Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/desktop/ui_form_handling Shows the basic setup for qx.ui.form.Slider as an example of implementing the IForm interface. This snippet focuses on widget creation, setting an initial value, and preparing for potential invalid state marking. ```javascript var slider = new qx.ui.form.Slider(); slider.setWidth(200); slider.setValue(100); ``` -------------------------------- ### qooxdoo Tutorial Part 1: The Beginning of a Tweets App Source: https://archive.qooxdoo.org/5.0.2/toc Provides initial code snippets for a tutorial application, specifically the beginning of building a 'Tweets App' using qooxdoo. Focuses on setting up the basic structure and UI elements. ```javascript qx.Class.define("myapp.Application", { extend: qx.application.Standalone, members: { main: function() { this.base(arguments); // Enable logging in debug builds if (qx.core.Environment.get("qx.debug")) { qx.log.appender.Native; // console.log qx.log.appender.Console; } // Create a main window var mainWindow = new qx.ui.window.Window("My Tweets App"); mainWindow.setLayout(new qx.ui.layout.VBox(10)); // Add a placeholder for tweets var tweetContainer = new qx.ui.container.Composite(); tweetContainer.add(new qx.ui.basic.Label("Tweets will appear here...")); mainWindow.add(tweetContainer, {flex: 1}); this.getRoot().add(mainWindow, {edge: 0}); mainWindow.open(); } } }); ``` -------------------------------- ### qooxdoo Properties in Detail Source: https://archive.qooxdoo.org/5.0.2/toc Explains advanced features of qooxdoo properties, such as validation, event handling on change, and initialization behavior. This snippet demonstrates setting up a property with a check and an event listener. ```javascript qx.Class.define("myapp.Configurable", { extend: qx.core.Object, properties: { // Property with validation and change event timeout: { check: "Integer", init: 30000, event: "changeTimeout", apply: "_applyTimeout" } }, members: { _applyTimeout: function(value, old) { console.log("Timeout changed from " + old + " to " + value); // Additional logic for timeout change } } }); var config = new myapp.Configurable(); config.addListener("changeTimeout", function(e) { console.log("Change event caught: " + e.getData()); }); config.setTimeout(60000); // This will trigger _applyTimeout and the change event ``` -------------------------------- ### Entirely Override Imported Job in qooxdoo JSON Config Source: https://archive.qooxdoo.org/5.0.2/pages/tool/generator/generator_config_articles This example guards a job with = to override the imported job entirely, replacing all its settings. Useful for complete redefinition without merging. Requires a qooxdoo setup with imported configurations to shadow. ```JSON "jobs" : { "=build-script" : {}, ... } ``` -------------------------------- ### Initialize and Use JSONP Store Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/data_binding/stores Shows how to set up a JSONP store, specifying the URL, a null value for the model, and the callback parameter name. Loading starts immediately after initialization. ```javascript var url = "json/data.json"; var store = new qx.data.store.Jsonp(url, null, "CallbackParamName"); ``` -------------------------------- ### Build Deployment Version of qooxdoo Application Source: https://archive.qooxdoo.org/5.0.2/pages/tool/getting_started This command initiates the build process for a qooxdoo application, generating an optimized deployment version. The build process removes debugging code, strips whitespace and comments, optimizes JavaScript, and bundles necessary classes into a single file for faster loading. This command requires the 'generate.py' script to be available in the project environment. ```bash generate.py build ``` -------------------------------- ### Initializing Validation Manager and Form Fields Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/desktop/ui_form_handling Sets up a validation manager and initializes form elements like a text field and a check box. This serves as a foundational setup for various validation examples that follow, demonstrating the basic instantiation of these components in qooxdoo. ```javascript var manager = new qx.ui.form.validation.Manager(); var textField = new qx.ui.form.TextField(); var checkBox = new qx.ui.form.CheckBox(); ``` -------------------------------- ### Set Grid Layout for MainWindow.js Source: https://archive.qooxdoo.org/5.0.2/pages/desktop/tutorials/tutorial-part-2 This code snippet demonstrates how to initialize and set a Grid layout for the main window. It takes `qx.ui.layout.Grid` as a dependency and configures the layout for the window. ```javascript var layout = new qx.ui.layout.Grid(0, 0); this.setLayout(layout); ``` -------------------------------- ### Create qooxdoo desktop application (Bash) Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/desktop/ui_using_widgetbrowser_for_theme_development This shell command initializes a new qooxdoo desktop application skeleton using the create-application.py script. It requires qooxdoo to be installed and accessible. Inputs include the theme name as an argument. Outputs a new application directory structure. Not applicable for mobile or website apps. ```bash create-application.py -t desktop -n ``` -------------------------------- ### qooxdoo Layouting Example Source: https://archive.qooxdoo.org/5.0.2/toc Demonstrates different layout managers available in qooxdoo for arranging widgets within containers. This example uses a Vertical Box layout. ```javascript var container = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)); // 10px spacing var label1 = new qx.ui.basic.Label("First Item"); var label2 = new qx.ui.basic.Label("Second Item"); var label3 = new qx.ui.basic.Label("Third Item"); container.add(label1); container.add(label2); container.add(label3); this.getRoot().add(container, {edge: 0}); ``` -------------------------------- ### Initiating Data Fetch and Configuring List Items in Qooxdoo Source: https://archive.qooxdoo.org/5.0.2/pages/desktop/tutorials/tutorial-part-3 This code handles starting the data load on application startup and using a delegate to customize list item appearance, such as setting icon dimensions and enabling text wrapping. It relies on the service's fetchTweets method and controller's delegate feature. Inputs are the service and controller instances; outputs are loaded data and styled UI items. Limitations: Assumes no errors in data fetching or UI creation. ```javascript // start the loading on startup service.fetchTweets(); ``` ```javascript controller.setDelegate({ configureItem : function(item) { item.getChildControl("icon").setWidth(48); item.getChildControl("icon").setHeight(48); item.getChildControl("icon").setScale(true); item.setRich(true); } }); ``` -------------------------------- ### Initialize Basic Layout and Form in qooxdoo Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/desktop/tutorials/tutorial-part-4-3 Sets up the initial layout for the settings window using `qx.ui.layout.Basic` and creates a `qx.ui.form.Form` instance. It also adds a `RadioButtonGroup` for language selection, with a translated label. ```javascript this.setLayout(new qx.ui.layout.Basic()); var form = new qx.ui.form.Form(); var radioGroup = new qx.ui.form.RadioButtonGroup(); form.add(radioGroup, this.tr("Language")); // TODO: create a radio button for every available locale var renderer = new qx.ui.form.renderer.Single(form); this.add(renderer); ``` -------------------------------- ### Creating and Configuring Qooxdoo List Controller for Data Binding Source: https://archive.qooxdoo.org/5.0.2/pages/desktop/tutorials/tutorial-part-3 This snippet demonstrates initializing a Qooxdoo List controller to bind data to a UI list, setting paths for labels and icons, and connecting it to a service model. It depends on the qx.data.controller.List class and a pre-existing service and main UI objects. Inputs include the target list and service bindings; outputs are a populated list. Limitations include lack of error handling and initial null model. ```javascript // create the controller var controller = new qx.data.controller.List(null, main.getList()); ``` ```javascript controller.setLabelPath("text"); controller.setIconPath("user.profile_image_url"); ``` ```javascript service.bind("tweets", controller, "model"); ``` -------------------------------- ### Verify Grunt Installation (Bash) Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/tool/grunt This snippet demonstrates how to check the Grunt CLI version in a general directory and the full Grunt version in a project directory with a Gruntfile.js. It requires Node.js (v0.10.0+) and Grunt CLI (v0.4.2+) installed. Outputs confirm the versions; no inputs needed, but run from command line. Limitations: Assumes global installation; local versions may differ. ```bash $ grunt --version grunt-cli v0.1.11 ``` ```bash $ grunt --version grunt-cli v0.1.11 grunt v0.4.2 ``` -------------------------------- ### Run Unit Tests for qooxdoo Application Source: https://archive.qooxdoo.org/5.0.2/pages/tool/getting_started This command executes the unit tests for a qooxdoo application using its built-in testing framework. It requires test files (e.g., 'test/DemoTest.js') to be present in the application structure. The output is viewed through a Testrunner application accessible via 'index.html' in the 'test' folder. ```bash generate.py test ``` -------------------------------- ### Asynchronous AJAX Test Example Source: https://archive.qooxdoo.org/5.0.2/pages/development/frame_apps_testrunner Example demonstrating asynchronous testing with AJAX requests. Uses wait() and resume() methods to handle asynchronous operations and test the response status. ```javascript testAjaxRequest : function() { var request = new qx.io.request.Xhr("/index.html"); request.addListener("success", function (e) { this.resume(function() { this.assertEquals(200, request.getStatus()); }, this); }, this); request.send(); this.wait(10000); } ``` -------------------------------- ### Simple Table Creation in qooxdoo Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/widget/table Demonstrates the basic creation of a Table widget using a Simple Table Model. It involves setting column headers and providing data. The table model is then used to instantiate the Table widget, which is added to the application's root. ```javascript var tableModel = new qx.ui.table.model.Simple(); tableModel.setColumns(["ID", "A number"]); tableModel.setData([[1, 12.23],[3, 849759438750],[2, -2]]); var table = new qx.ui.table.Table(tableModel); this.getRoot().add(table); ``` -------------------------------- ### Standard Qooxdoo Applications and Demos Source: https://archive.qooxdoo.org/5.0.2/toc Lists and describes standard applications and demo applications available with Qooxdoo, including the Demobrowser, Widgetbrowser, and developer tools like the API Viewer. ```APIDOC ## Standard Applications ### Demo Applications Lists and describes various demo applications, including Demobrowser, Feedreader, Playground, ToDo, Tutorial, Showcase, and Widgetbrowser. ### Developer Tools Highlights developer tools such as the API Viewer and Testrunner. ``` -------------------------------- ### Basic getter and setter implementation in JavaScript Source: https://archive.qooxdoo.org/5.0.2/pages/core/understanding_properties Illustrates a basic implementation of getter and setter methods in JavaScript, similar to practices in languages like Java. ```JavaScript // ordinary example #1 members: { getWidth : function() { return this._width; }, setWidth : function(width) { this._width = width; return width; } } ``` -------------------------------- ### Create qooxdoo application Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/desktop/tutorials/tutorial-part-1 This snippet shows how to create a qooxdoo application skeleton using the 'create-application.py' script. ```bash create-application.py --name=tweets ``` -------------------------------- ### GitHub Contribution Download URL Example Source: https://archive.qooxdoo.org/5.0.2/_sources/pages/development/contrib This example shows the format for a 'download' URL within a Manifest.json file when the contribution is hosted on GitHub. It specifies the archive download link from a specific branch. ```json "info" : { "download" : "https://github.com/myuid/mycontrib/archive/master.tar.gz", ... } ``` -------------------------------- ### Create Comprehensive qooxdoo Test Class with Lifecycle Source: https://archive.qooxdoo.org/5.0.2/pages/desktop/tutorials/tutorial-part-4-4 Shows advanced test class implementation for testing UI components like TweetView with proper lifecycle management using setUp and tearDown methods. Demonstrates testing of property setting and child control validation, including resource management for assets and proper cleanup using dispose() method. ```JavaScript /** * @asset(tweets/logo.png) */ qx.Class.define("tweets.test.TweetView", { extend : qx.dev.unit.TestCase, members : { setUp : function() { this.__tweetView = new tweets.TweetView(); }, tearDown : function() { this.__tweetView.dispose(); this.__tweetView = null; }, testSetIcon : function() { var expectedSource = qx.util.ResourceManager.getInstance().toUri("logo.png"); this.__tweetView.setIcon(expectedSource); var foundSource = this.__tweetView.getChildControl("icon").getSource(); this.assertEquals(expectedSource, foundSource, "Icon source was not set correctly!"); } } }); ```