qooxdoo

3.522. January 2014 | Martin Wittemann | Christopher Zündorf | Richard Sternagel

Martin Wittemann

• Head of Frameworks & Tooling

• TechLead of the qooxdoo project

• with 1&1 since 2009

Introduction

Christopher Zündorf

• Responsible Mobile Developer

• with 1&1 since 2012

Richard Sternagel

• Responsible Tooling Developer

• with 1&1 since 2004

Core

Desktop

Server Mobile

Website

Core

qooxdoo

Website

qx.Website

Widgets

qx.Desktop

Widgets

qx.Desktop HTML

???

Not Cross-Browser

Missing Features

Missing Features

WidgetsButton

Slider

Rating

Tabs

Calendar

Accordion

Slider API

ButtonAPI

WidgetAPI

Basics

q("button") // returns collection!!.button() // returns button collection

.setStyle("width", "100px"); // collection API

Initialization

qxWeb API

.setLabel("My Button") // button API

q("button").setLabel("New Text");2nd query

How to use?

<div id="slider"></div>HTMLSlider

q("#slider").slider();!

JavaScript

q("#slider").setValue(46);q("#slider").on("changeValue", function() {});

How to use?

q.create("<div>") .rating() .appendTo(document.body) .setValue(2);

JavaScript

Rating

Config & TemplateGeneric way to change config and templates!

Config Template

lengthsymbol -

stepminimummaximumoffset

knobContent

Config

q("#rating")!!

JavaScript

Rating

.setConfig("length", 10) .setConfig("symbol", "☃").render();

Template

q("#slider").setTemplate("knobContent", "{{value}}%").render();

JavaScript

Slider

Theming

API-Documentation

API-Documentation

Feedback

?

qx.Mobile

Mobile

Device Support

iOS

Windows Phone 8

Blackberry OS 10

Android 2.x Android 4.x

Improved Platform Support

✓ Improved UI performance ✓ Many bug fixes ✓ Better multi-touch behaviour

Enhanced support for Windows Phone 8 and Internet Explorer 11

Application Scaling• qx.Mobile‘s UI got scalable • Replaced CSS units from px to rem • Enhanced qx.Mobile widgets to be scalable

increase app scale

decrease app scale

High-Resolution Images + App Scale

Images are scaled in relation to app scale factor and device screen resolution

Dev

ice

Pixe

l Rat

ioApp Scale Factor

1.0

1.0

2.0

2.0

1.5

1.5

App Scale BenefitsImprove usability and user experience • Use extra space on big touch devices • Increase font size for target audiences • Increase UI element size for outdoor usage

!

Adjust Look & Feel

• No complex CSS adjustments required • One small SCSS file for changing the appearance

Adjust Look & Feel// Theme$foreground-color: #222;$background-color: white;$highlight-color: #3D72C9;

// Theme$foreground-color: #263248;$background-color: white;$highlight-color: #FF9800;

Adjust Look & Feel

Enhanced ThemingNew syntax for enabling single-colored and gradient backgrounds

Enhanced ThemingAdded many new theming variables, for additional customization possibilities

Checkbox

Radio Button

Toggle Button

Slider

Enhanced ThemingPicker Dialog

New Mobile Theme: Flat

Noteworthy• Carousel page transition adapts to

swipe velocity

• Added Carousel page overflow

management

• Improved Picker rendering

performance

• Slider displays its value

Feedback

?

Tooling

DesktopWebsite Mobile

Grunt

The JavaScript Task Runner

Experimental

What is Grunt?

• task runner (a.k.a. build tool)

• configure tasks for automation

• within Gruntfile.js

• runs under Node.js

building, linting, testing, …

Recap: Generator

• api

• build

• build-min

• build-module-all

• build-module-all-min

• clean

• dependencies

• distclean

• fix

• info

• inspector

generate.py {jobName}

• lint

• migration

• pretty

• source-*

• test

• test-source

• translation

• validate-config

• validate-manifest

• watch

• watch-scss

Why Grunt?

GruntGenerator

monolithic

PythonJavaScript

developer

plugins

know-how

reuse

extend

internalexternal

modularstable

proven

reinvent

maintenance

planflux

Already?

• newly created apps now contain Gruntfile.js

• all Generator jobs are available via Grunt

• Grunt as additional (optional) frontend

!

• Grunt Plugins

• every existing Plugin can be used

• extend Grunt with own Plugins

Feedback

?

-----Bugs------ Core 73 Server 1 Website 11 Mobile 50 Desktop 38 ---- Bugs 173 !-Enhancements-- Core 44 Server 0 Website 19 Mobile 14 Desktop 7 ---- Enh. 84 !Total 257 !

Thanks for using qooxdoo!

qooxdoo

next...

Define a Roadmap

Ideas

Core• Use Grunt for all demo

apps

• Migration of certain tool parts e.g. Lint

• Build-step using only JavaScript code

Ideas

• Universal input device support

• Code reuse across application domains

• Resolution Independence

• Responsive Layouts

UI Toolkits

Core

• New widgets e.g. Table

• Migration of existing widgets

• Data-Binding

Website

Ideas

UI Toolkits

Core

Website

Ideas

UI Toolkits

Core

Mobile• Support for Firefox OS

• Icon Sets

Feedback

?