{"id":254408,"date":"2015-04-02T23:19:02","date_gmt":"2015-04-02T19:19:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=254408"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=254408","title":{"rendered":"Qooxdoo. \u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c TODO List"},"content":{"rendered":"

\t\t\t\u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0435\u043b\u0438\u043a\u043e\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e javascript \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043f\u043e \u043c\u043d\u043e\u0433\u0438\u043c \u0438\u0437 \u043d\u0438\u0445 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0433\u043e\u0440\u044b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u042f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043f\u043e \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0439 \u043c\u043d\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0441\u043e\u0431\u043e\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c\u044e \u0443 \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432.<\/p>\n

\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f qooxdoo. \u041f\u0440\u043e\u0438\u0437\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u00ab\u043a\u0443\u043a\u0441\u0434\u0443\u00bb (\u043a\u043e\u043c\u0443 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0430\u044f \u0442\u0440\u0430\u043d\u0441\u0442\u0440\u0438\u043f\u0446\u0438\u044f: [‘kuksdu:]).<\/p>\n

\u041d\u0430 \u0425\u0430\u0431\u0440\u0435 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e \u044d\u0442\u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043d\u043e \u0432\u0441\u0435 \u043e\u043d\u0438 \u0441\u0432\u0435\u043b\u0438\u0441\u044c \u043a \u043d\u043e\u0432\u043e\u0441\u0442\u044f\u043c \u043e \u0432\u044b\u0445\u043e\u0434\u0435 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438\u043b\u0438 \u043a \u043f\u0430\u0440\u0430\u043c \u0430\u0431\u0437\u0430\u0446\u0435\u0432 \u0432 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u0442\u0438\u043f\u0430 \u00ab\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043a\u0430\u043a\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u043f\u043e\u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438\u00bb. \u042f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0441 qooxdoo \u0438 \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0431\u0435\u043b.
<\/a>
\u0412\u043a\u0440\u0430\u0442\u0446\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u0437\u0432\u0435\u0440\u044c \u0438 \u0441 \u0447\u0435\u043c \u0435\u0433\u043e \u0435\u0434\u044f\u0442. \u0411\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u00ab\u043f\u043e\u0445\u043e\u0436\u00bb \u043d\u0430 ExtJS. \u0421\u043b\u043e\u0432\u043e \u00ab\u043f\u043e\u0445\u043e\u0436\u00bb \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043d\u043e \u044f \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u044f\u044e\u0441\u044c \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c \u0432 \u043d\u0435\u0434\u0440\u0430\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 1&1 Internet AG<\/a>. \u041f\u0435\u0440\u0432\u0430\u044f \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f 0.1 \u0432\u044b\u0448\u043b\u0430 \u0432 2005 \u0433\u043e\u0434\u0443. \u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f 4.1, \u043f\u0440\u043e \u043d\u0435\u0435 \u0438 \u0431\u0443\u0434\u0435\u043c \u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u0447\u044c. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043c\u043d\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u044f\u043b\u0438\u0441\u044c Qt \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0434\u0435\u0442\u0438\u0449\u0430. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0434\u0443\u043c\u043a\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043b\u044e\u0434\u044f\u043c \u0431\u0435\u0437 \u0437\u043d\u0430\u043d\u0438\u044f HTML, CSS \u0438 DOM \u043c\u043e\u0434\u0435\u043b\u0438. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e qooxdoo \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u041d\u043e\u0432\u0438\u0447\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u0434\u043c\u0438\u043d\u043a\u0443 \u0432 \u0432\u0438\u0434\u0435 single page application (\u0434\u0430\u043b\u0435\u0435 SPA) \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e HTML \u0442\u0435\u0433\u0430, \u0430 \u043f\u0440\u043e CSS \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0441\u043c\u043e\u0436\u0435\u0442 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u042d\u0442\u043e \u043d\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0437\u043d\u0430\u043d\u0438\u044f HTML, CSS \u0438 DOM \u043c\u043e\u0434\u0435\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0440\u0435\u0437\u043a\u043e \u0441\u0442\u0430\u043b\u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u041f\u0440\u043e\u0441\u0442\u043e, \u043f\u043e\u043d\u0430\u0447\u0430\u043b\u0443, \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u043d\u0438\u0445. \u0427\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0447\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0432\u0435\u0431\u0435.<\/p>\n

\u0412 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u0434\u0435\u043c\u043e<\/a> \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/a> \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435.<\/p>\n

\u041f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u0441\u043a\u0443\u0448\u043d\u043e \u0438 \u043d\u0435\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u044d\u0442\u043e \u0443\u0436\u0435 \u0438 \u0442\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043b\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u041c\u043d\u043e\u0433\u0438\u0435 \u0437\u043d\u0430\u044e\u0442 \u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0435 http:\/\/todomvc.com\/<\/a>. \u0412\u043e\u0442 \u0438 \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0447\u0442\u043e-\u0442\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c qooxdoo. \u0421\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e\u0441\u0442\u0438 \u0440\u0430\u0434\u0438, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0443\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0434\u0435\u043c\u043e todo \u043b\u0438\u0441\u0442\u0430<\/a>, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e.<\/p>\n

\u0418\u0442\u0430\u043a, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/p>\n

\u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u043d\u043d\u043e SPA (Desktop \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 qooxdoo). \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c qooxdoo sdk. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e \u044d\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435<\/a>. SDK \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0440\u044f\u0434 \u0443\u0442\u0438\u043b\u0438\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u0443\u044e \u0438 \u0440\u0435\u043b\u0438\u0437\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0434\u043e\u043a\u0443\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u0442\u0443\u0442\u044b \u0438 \u0442.\u0434. \u041e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u043f\u043e \u0442\u0443\u043b\u0447\u0435\u0439\u043d\u0443 \u043c\u043e\u0436\u043d\u043e \u0442\u0443\u0442<\/a>.<\/p>\n

\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c:<\/p>\n

create-application.py --name=todos <\/code><\/pre>\n
  \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u0430\u0440\u043a\u0430\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n
  <\/p>\n
  \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u0443\u0441\u0442\u044b\u043c. \u041e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443, \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f alert.
  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b Application.js \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n
\/**  * This is the main application class of your custom application "todos"  *  * @asset(todos\/*)  *\/ qx.Class.define("todos.Application", {   extend : qx.application.Standalone,   members : {     \/**      * This method contains the initial application code and gets called       * during startup of the application      *       * @lint ignoreDeprecated(alert)      *\/     main : function() {       \/\/ Call super class       this.base(arguments);        \/\/ Enable logging in debug variant       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. Press F7 to toggle visibility         qx.log.appender.Console;       }        \/*       -------------------------------------------------------------------------         Below is your actual application code...       -------------------------------------------------------------------------       *\/        \/\/ Create a button       var button1 = new qx.ui.form.Button("First Button", "todos\/test.png");        \/\/ Document is the application root       var doc = this.getRoot();        \/\/ Add button to document at fixed coordinates       doc.add(button1, {left: 100, top: 50});        \/\/ Add an event listener       button1.addListener("execute", function(e) {         alert("Hello World!");       });     }   } }); <\/code><\/pre>\n
  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0437\u0430\u0434\u0443\u043c\u043a\u0443 \u0430\u0432\u0442\u043e\u0440\u043e\u0432, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0434\u0435\u0431\u0430\u0436\u043d\u0443\u044e \u0438\u043b\u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.
  \u041f\u0435\u0440\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c:<\/p>\n
.\/generate.py source <\/code><\/pre>\n
  \u0432\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430:<\/p>\n
.\/generate.py build <\/code><\/pre>\n
  \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0433\u0440\u0443\u0437\u0438\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 index.html \u0444\u0430\u0439\u043b \u0438 \u0432\u0438\u0434\u0438\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443:<\/p>\n
  <\/p>\n
  \u041d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c, \u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043d\u0430\u0436\u0438\u043c\u0430\u0442\u044c. \u041c\u043e\u0436\u043d\u043e \u0433\u0440\u0430\u0431\u0438\u0442\u044c \u043a\u043e\u0440\u043e\u0432\u0430\u043d\u044b.<\/s> \u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u0427\u0443\u0434\u0430 \u043d\u0435 \u0441\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u0447\u0435\u043c \u043c\u044b, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0438 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f.<\/p>\n
  \u0414\u043b\u044f \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043b\u0438\u0432\u044b\u0445 \u0441\u0440\u0430\u0437\u0443 \u0434\u0430\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 github<\/a> \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u043a\u0440\u043e\u043c\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 \u0441 \u0433\u0438\u0442\u0445\u0430\u0431\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c SDK \u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u0444\u0430\u0439\u043b\u0435 config.json \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u00abQOOXDOO_PATH\u00bb. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u043a\u0430\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u044b\u0448\u0435.<\/p>\n
  \u041d\u0443 \u0430 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0432 \u0435\u0433\u043e \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435.
  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0434\u043b\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043e\u043a\u043d\u0430 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e todo \u043b\u0438\u0441\u0442\u0430 \u0438 \u0431\u0435\u0437\u0436\u0430\u043b\u043e\u0441\u0442\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u043c \u0438\u0437 Application.js \u0432\u0441\u0435 \u0447\u0442\u043e \u0442\u0430\u043c \u043d\u0430\u043c \u043d\u0430\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440. \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0443 \u043d\u0430\u0441 \u0441\u043b\u0435\u0434\u0443\u0449\u0435\u0435.<\/p>\n
  Window.js  <\/p>\n
qx.Class.define("todos.Window", {   extend : qx.ui.window.Window,    construct: function(){     this.base(arguments);      this.set({       caption: "todos",       width: 480,       height: 640,       allowMinimize: false,       allowMaximize: false,       allowClose: false     });      this.addListenerOnce("appear", function(){       this.center();     }, this);   } }); <\/code><\/pre>\n
  Application.js  <\/p>\n
\/**  * @asset(todos\/*)  *\/ qx.Class.define("todos.Application", {   extend : qx.application.Standalone,   members : {     main : function() {       \/\/ Call super class       this.base(arguments);        var wnd = new todos.Window;       wnd.show();     }   } }); <\/code><\/pre>\n
  \u041f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u043a\u0440\u0430\u0441\u043e\u0442\u0443:<\/p>\n
  <\/p>\n
  \u041f\u043e\u0440\u0430 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0435\u0435 \u0441\u043c\u044b\u0441\u043b\u043e\u043c. \u041d\u0430\u043c \u0431\u0443\u0434\u0443\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: \u0442\u0443\u043b\u0431\u0430\u0440, \u0437\u0430\u043f\u0438\u0441\u044c todo \u043b\u0438\u0441\u0442\u0430 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u043b\u0438\u0441\u0442. \u0417\u0430\u043f\u0438\u0441\u044c todo \u043b\u0438\u0441\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u043c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u043e\u0444\u043e\u0440\u043c\u0438\u043c \u0435\u0433\u043e \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u0422\u0443\u043b\u0431\u0430\u0440 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u043b\u0438\u0441\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e, \u0442\u0430\u043a \u0438 \u0447\u0430\u0441\u0442\u044c\u044e Window. \u0422\u0443\u043b\u0431\u0430\u0440 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u043c, \u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0447\u0430\u0441\u0442\u044c\u044e Window, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438 \u0442\u0430\u043a \u0438 \u0442\u0430\u043a. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u0441\u0435 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0436\u0438\u0437\u043d\u044c\u044e.<\/p>\n
  ToDo.js  <\/p>\n
qx.Class.define("todos.ToDo", {   extend: qx.ui.core.Widget,    events : {     remove : "qx.event.type.Event"   },    properties: {     completed: {       init: false,       check: "Boolean",       event: "completedChanged"     },      appearance: {       refine: true,       init: "todo"     }   },    construct: function(text){     this.base(arguments);      var grid = new qx.ui.layout.Grid;     grid.setColumnWidth(0, 20);     grid.setColumnFlex(1, 1);     grid.setColumnWidth(2, 20);     grid.setColumnAlign(0, "center", "middle");     grid.setColumnAlign(1, "left", "middle");     grid.setColumnAlign(2, "center", "middle");      this._setLayout(grid);     this._add(this.getChildControl("checkbox"), {row: 0, column: 0});     this._add(this.getChildControl("text-container"), {row: 0, column: 1});     this._add(this.getChildControl("icon"), {row: 0, column: 2});      this.getChildControl("label").setValue(text);      this.addListener("mouseover", function(){this.getChildControl("icon").show();}, this);     this.addListener("mouseout", function(){this.getChildControl("icon").hide();}, this);     this.getChildControl("icon").hide();      this.getChildControl("text-container").addListener("dblclick", this.__editToDo, this);   },    members : {      \/\/ overridden     _createChildControlImpl: function(id) {       var control;        switch(id) {         case "checkbox":           control = new qx.ui.form.CheckBox;           this.bind("completed", control, "value");           control.bind("value", this, "completed");           break;         case "text-container":           control = new qx.ui.container.Composite(new qx.ui.layout.HBox);           control.add(this.getChildControl("label"), {flex: 1});           break;         case "label":           control = new qx.ui.basic.Label;           control.bind("value", control, "toolTipText");           break;         case "textfield":           control = new qx.ui.form.TextField;           control.addListener("keypress", function(event){             var key = event.getKeyIdentifier();             switch(key) {               case "Enter":                 this.__editComplete();                 break;               case "Escape":                 this.__editCancel();                 break;             }           }, this);           control.addListener("blur", this.__editComplete, this);           break;         case "icon":           control = new qx.ui.basic.Image("todos\/icon-remove-circle.png");           control.addListener("click", function(){             this.fireEvent("remove");           }, this);           break;       }       return control || this.base(arguments, id);     },      __editToDo : function() {       var tc = this.getChildControl("text-container");       var tf = this.getChildControl("textfield");       tc.removeAll();       tc.add(tf, {flex: 1});       tf.setValue(this.getChildControl("label").getValue());       tf.focus();       tf.activate();     },      __editComplete : function() {       this.getChildControl("label").setValue(this.getChildControl("textfield").getValue());       this.__editCancel();     },      __editCancel : function() {       var tc = this.getChildControl("text-container");       tc.removeAll();       tc.add(this.getChildControl("label"), {flex: 1});     }   } }); <\/code><\/pre>\n
  StatusBar.js  <\/p>\n
qx.Class.define("todos.StatusBar", {   extend: qx.ui.core.Widget,    events: {     removeCompleted: "qx.event.type.Event"   },    properties: {     todos: {       init: [],       check: "Array"     },      filter: {       init: "all",       check: ["all", "active", "completed"],       event: "filterChanged"     }   },    construct: function() {     this.base(arguments);      var grid = new qx.ui.layout.Grid;     grid.setColumnWidth(0, 100);     grid.setColumnFlex(1, 1);     grid.setColumnWidth(2, 130);     grid.setColumnAlign(0, "left", "middle");     grid.setColumnAlign(1, "center", "middle");     grid.setColumnAlign(2, "right", "middle");     grid.setRowHeight(0, 26);      this._setLayout(grid);     this._add(this.getChildControl("info"), {row: 0, column: 0});     this._add(this.getChildControl("filter"), {row: 0, column: 1});     this._add(this.getChildControl("remove-completed-button"), {row: 0, column: 2});     this.update();   },    destruct: function() {     this.__rgFilter.dispose();   },    members : {     __rgFilter: null,      update: function() {       var todosCount = this.getTodos().length;       var itemsLeft = this.getTodos().filter(function(item){return !item.getCompleted();}).length;       this.getChildControl("info").setValue("<b>"+itemsLeft+"<\/b> items left");       if (itemsLeft === todosCount) {         this.getChildControl("remove-completed-button").exclude();       } else {         this.getChildControl("remove-completed-button").setLabel("Clear completed ("+(todosCount-itemsLeft)+")");         this.getChildControl("remove-completed-button").show();       }     },      \/\/ overridden     _createChildControlImpl: function(id) {       var control;        switch(id) {         case "info":           control = new qx.ui.basic.Label;           control.setRich(true);           break;         case "filter":           control = new qx.ui.container.Composite(new qx.ui.layout.HBox);           control.add(this.getChildControl("rb-filter-all"));           control.add(this.getChildControl("rb-filter-active"));           control.add(this.getChildControl("rb-filter-completed"));           this.__rgFilter = new qx.ui.form.RadioGroup(             this.getChildControl("rb-filter-all"),             this.getChildControl("rb-filter-active"),             this.getChildControl("rb-filter-completed")           );           this.__rgFilter.addListener("changeSelection", this.__onFilterChanged, this);           break;         case "rb-filter-all":           control = new qx.ui.form.RadioButton("All");           control.setUserData("value", "all");           break;         case "rb-filter-active":           control = new qx.ui.form.RadioButton("Active");           control.setUserData("value", "active");           break;         case "rb-filter-completed":           control = new qx.ui.form.RadioButton("Completed");           control.setUserData("value", "completed");           break;         case "remove-completed-button":           control = new qx.ui.form.Button;           control.addListener("execute", function(){             this.fireEvent("removeCompleted");           }, this);           break;       }       return control || this.base(arguments, id);     },      __onFilterChanged : function(event) {       this.setFilter(event.getData()[0].getUserData("value"));     }   } }); <\/code><\/pre>\n
  Window.js  <\/p>\n
qx.Class.define("todos.Window", {   extend: qx.ui.window.Window,    properties: {     appearance: {       refine: true,       init: "todo-window"     },      todos: {       init: [],       check: "Array",       event: "todosChanged"     },      filter: {       init: "all",       check: ["all", "active", "completed"],       apply: "__applyFilter"     }   },    construct: function(){     this.base(arguments);      this.set({       caption: "todos",       width: 480,       height: 640,       allowMinimize: false,       allowMaximize: false,       allowClose: false     });      this.setLayout(new qx.ui.layout.VBox(2));     this.add(this.getChildControl("todo-writer"));     this.add(this.getChildControl("todos-scroll"), {flex: 1});     this.add(this.getChildControl("statusbar"));      this.addListenerOnce("appear", function(){       this.center();     }, this);   },    destruct : function() {     var todoItems = this.getTodos();     for (var i= 0, l=todoItems.length; i<l; i++) {       todoItems[i].dispose();     }   },    members : {     \/\/ overridden     _createChildControlImpl: function(id) {       var control;        switch(id) {         case "todo-writer":           var grid = new qx.ui.layout.Grid;           grid.setColumnWidth(0, 20);           grid.setColumnFlex(1, 1);           grid.setColumnAlign(0, "center", "middle");           grid.setColumnAlign(1, "left", "middle");           control = new qx.ui.container.Composite(grid);           control.add(this.getChildControl("checkbox"), {row: 0, column: 0});           control.add(this.getChildControl("textfield"), {row: 0, column: 1});           break;         case "checkbox":           control = new qx.ui.form.CheckBox;           control.addListener("changeValue", this.__onCheckAllChanged, this);           break;         case "textfield":           control = new qx.ui.form.TextField;           control.setPlaceholder("What needs to be done?");           control.addListener("keydown", this.__onWriterTextFieldKeydown, this);           break;         case "todos-scroll":           control = new qx.ui.container.Scroll;           control.add(this.getChildControl("todos-container"));           break;         case "todos-container":           control = new qx.ui.container.Composite(new qx.ui.layout.VBox(1));           break;         case "statusbar":           control = new todos.StatusBar;           control.bind("filter", this, "filter");           this.bind("todos", control, "todos");           control.addListener("removeCompleted", this.__onRemoveCompleted, this);           break;       }       return control || this.base(arguments, id);     },      __onWriterTextFieldKeydown : function(event) {       var key = event.getKeyIdentifier();       switch(key) {         case "Enter":           var value = event.getTarget().getValue();           if (value) {             event.getTarget().setValue("");             var todo = new todos.ToDo(value);             this.getTodos().push(todo);             todo.addListenerOnce("remove", this.__onTodoRemove, this);             todo.addListener("completedChanged", this.__onTodoCompletedChanged, this);              this.__updateTodoList();             this.getChildControl("statusbar").update();              var cbAll = this.getChildControl("checkbox");             cbAll.removeListener("changeValue", this.__onCheckAllChanged, this);             cbAll.setValue(false);             cbAll.addListener("changeValue", this.__onCheckAllChanged, this);           }           break;         case "Escape":           event.getTarget().setValue("");           break;       }     },      __updateTodoList : function() {       var toList;       switch(this.getFilter()) {         case "all":           toList = this.getTodos();           break;         case "active":           toList = this.getTodos().filter(function(item){return !item.getCompleted();});           break;         case "completed":           toList = this.getTodos().filter(function(item){return item.getCompleted();});           break;       }       var container = this.getChildControl("todos-container");       container.removeAll();       toList.forEach(function(item){         container.add(item);       });     },      __applyFilter : function() {       this.__updateTodoList();     },      __onTodoRemove : function(event) {       var todo = event.getTarget();       this.setTodos(this.getTodos().filter(function(item){return item !== todo;}));       this.getChildControl("todos-container").remove(todo);       todo.dispose();       this.getChildControl("statusbar").update();     },      __onTodoCompletedChanged : function() {       var cbAll = this.getChildControl("checkbox");       cbAll.removeListener("changeValue", this.__onCheckAllChanged, this);       cbAll.setValue(this.getTodos().length === this.getTodos().filter(function(item){return item.getCompleted();}).length);       cbAll.addListener("changeValue", this.__onCheckAllChanged, this);       this.__updateTodoList();       this.getChildControl("statusbar").update();     },      __onCheckAllChanged : function(event) {       var value = event.getData();       this.getTodos().forEach(function(todo){         todo.removeListener("completedChanged", this.__onTodoCompletedChanged, this);         todo.setCompleted(value);         todo.addListener("completedChanged", this.__onTodoCompletedChanged, this);       }, this);       this.__updateTodoList();       this.getChildControl("statusbar").update();     },      __onRemoveCompleted : function() {       var completed = this.getTodos().filter(function(item){return item.getCompleted();});       this.setTodos(this.getTodos().filter(function(item){return !item.getCompleted();}));       completed.forEach(function(todo){         this.getChildControl("todos-container").remove(todo);         todo.dispose();       }, this);       this.getChildControl("statusbar").update();       this.getChildControl("checkbox").setValue(false);     }   } }); <\/code><\/pre>\n
  \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u0435\u0431\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0415\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043d\u044e\u0430\u043d\u0441, \u043e\u043d\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e, \u043a\u0430\u043a \u0430\u0442\u043e\u043c\u043d\u0430\u044f \u0432\u043e\u0439\u043d\u0430:<\/p>\n
  <\/p>\n
  \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0435\u0433\u043e \u043a \u043f\u0440\u0438\u0441\u0442\u043e\u0439\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443. \u041e\u0433\u043e\u0432\u043e\u0440\u044e\u0441\u044c \u0441\u0440\u0430\u0437\u0443, \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0438\u0437 \u043c\u0435\u043d\u044f, \u043a\u0430\u043a \u0438\u0437 \u043a\u043e\u0437\u043b\u0430 \u0431\u0430\u043b\u0435\u0440\u0438\u043d\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u0434\u0430\u0447\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 todo \u043b\u0438\u0441\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043f\u0440\u043e\u0441\u0442\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e, \u0431\u0435\u0437 \u0438\u0437\u044b\u0441\u043a\u043e\u0432.<\/p>\n
  \u0417\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 qooxdoo \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0442\u0435\u043c\u044b. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 4 \u0442\u0435\u043c\u0430\u043c\u0438. \u0422\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c, \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0438 \u0442.\u0434. \u0422\u0435\u043c\u0430 \u0432 qooxdoo \u0438\u043c\u0435\u0435\u0442 5 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
qx.Theme.define("todos.theme.Theme", {   meta : {     color : todos.theme.Color,     decoration : todos.theme.Decoration,     font : todos.theme.Font,     icon : qx.theme.icon.Tango,     appearance : todos.theme.Appearance   } }); <\/code><\/pre>\n
  \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e \u0442\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0443\u0442<\/a>.
  \u0418\u0442\u0430\u043a, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/p>\n
  Appearance.js  <\/p>\n
\/**  * * @asset(qx\/icon\/Tango\/*  *\/ qx.Theme.define("todos.theme.Appearance", {   extend : qx.theme.simple.Appearance,   appearances : {     "todo-window" : {       include : "window",       alias : "window",       style : function(){         return {           contentPadding: 0         };       }     },     "checkbox": {       alias : "atom",       style : function(states) {         var icon;         if (states.checked) {           icon = "todos\/checked.png";         } else if (states.undetermined) {           icon = qx.theme.simple.Image.URLS["todos\/undetermined.png"];         } else {           icon = qx.theme.simple.Image.URLS["blank"];         }          return {           icon: icon,           gap: 8,           cursor: "pointer"         }       }     },     "radiobutton": {       style : function(states) {         return {           icon : null,           font : states.checked ? "bold" : "default",           textColor : states.checked ? "green" : "black",           cursor: "pointer"         }       }     },     "checkbox\/icon" : {       style : function(states) {         return {           decorator : "checkbox",           width : 16,           height : 16,           backgroundColor : "white"         }       }     },     "todo-window\/checkbox" : "checkbox",     "todo-window\/textfield" : "textfield",     "todo-window\/todos-scroll" : "scrollarea",     "todo-window\/todo-writer" : {       style : function() {         return {           padding   : [2, 2, 0, 0]         };       }     },     "todo-window\/statusbar" : {       style : function() {         return {           padding   : [ 2, 6],           decorator : "statusbar",           minHeight : 32,           height : 32         };       }     },     "todo-window\/statusbar\/info" : "label",     "todo-window\/statusbar\/rb-filter-all" : "radiobutton",     "todo-window\/statusbar\/rb-filter-active" : "radiobutton",     "todo-window\/statusbar\/rb-filter-completed" : "radiobutton",     "todo-window\/statusbar\/remove-completed-button" : {       include : "button",       alias : "button",       style : function() {         return {           width : 150,           allowGrowX : false         };       }     },     "todo\/label" : {       include : "label",       alias : "label",       style : function(states) {         return {           font : (states.completed ? "line-through" : "default"),           textColor : (states.completed ? "light-gray" : "black"),           cursor : "text"         };       }     },     "todo\/icon" : {       style : function() {         return {           cursor : "pointer"         };       }     },     "todo\/text-container" : {       style : function() {         return {           allowGrowY : false         };       }     },     "todo\/checkbox" : "checkbox"   } }); <\/code><\/pre>\n
  Color.js  <\/p>\n
qx.Theme.define("todos.theme.Color", {   extend : qx.theme.simple.Color,    colors :   {     "light-gray" : "#BBBBBB",     "border-checkbox": "#B6B6B6"   } }); <\/code><\/pre>\n
  Decoration.js  <\/p>\n
qx.Theme.define("todos.theme.Decoration", {   extend : qx.theme.simple.Decoration,    decorations : {     "statusbar" : {       style : {         backgroundColor : "background",         width: [2, 0, 0, 0],         color : "window-border-inner"       }     },      "checkbox" : {       decorator : [         qx.ui.decoration.MBorderRadius,         qx.ui.decoration.MSingleBorder       ],        style : {         radius : 3,         width : 1,         color : "border-checkbox"       }     }   } }); <\/code><\/pre>\n
  Font.js  <\/p>\n
qx.Theme.define("todos.theme.Font", {   extend : qx.theme.simple.Font,    fonts :   {     "line-through" :     {       size : 13,       family : ["arial", "sans-serif"],       decoration : "line-through"     }   } }); <\/code><\/pre>\n
  \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0448 TODO \u043b\u0438\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
  <\/p>\n
  \u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c. \u042f \u043d\u0435 \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432, \u043d\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. \u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u044f\u0441\u044c \u0432 \u0434\u0435\u0442\u0430\u043b\u0438. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u043c \u0441\u0441\u044b\u043b\u043a\u0430\u043c. \u041e\u0431\u043e \u0432\u0441\u0435\u0445 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0438 \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430\u0445 \u043f\u0440\u043e\u0448\u0443 \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043b\u0438\u0447\u043a\u0443. \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/p>\n
  \u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438:<\/b>
  \u0414\u043e\u043c\u0430\u0448\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 qooxdoo: http:\/\/qooxdoo.org\/<\/a>
  \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 SDK: http:\/\/qooxdoo.org\/downloads<\/a>
  \u0420\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u0434\u0435\u043c\u043e: http:\/\/qooxdoo.org\/demos<\/a>
  \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: http:\/\/qooxdoo.org\/community\/real_life_examples<\/a>
  SPA \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b: http:\/\/manual.qooxdoo.org\/current\/pages\/desktop\/tutorials\/tutorial-part-1.html<\/a>
  \u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435: https:\/\/github.com\/VasisualyLokhankin\/todolist_qooxdoo<\/a> \t\t\t<\/p>\n
<\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/254767\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
 \t\t\t\u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0435\u043b\u0438\u043a\u043e\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e javascript \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043f\u043e \u043c\u043d\u043e\u0433\u0438\u043c \u0438\u0437 \u043d\u0438\u0445 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0433\u043e\u0440\u044b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u042f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043f\u043e \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0439 \u043c\u043d\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0441\u043e\u0431\u043e\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c\u044e \u0443 \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432.<\/p>\n
  \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f qooxdoo. \u041f\u0440\u043e\u0438\u0437\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u00ab\u043a\u0443\u043a\u0441\u0434\u0443\u00bb (\u043a\u043e\u043c\u0443 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0430\u044f \u0442\u0440\u0430\u043d\u0441\u0442\u0440\u0438\u043f\u0446\u0438\u044f: [‘kuksdu:]).<\/p>\n
  \u041d\u0430 \u0425\u0430\u0431\u0440\u0435 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e \u044d\u0442\u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043d\u043e \u0432\u0441\u0435 \u043e\u043d\u0438 \u0441\u0432\u0435\u043b\u0438\u0441\u044c \u043a \u043d\u043e\u0432\u043e\u0441\u0442\u044f\u043c \u043e \u0432\u044b\u0445\u043e\u0434\u0435 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438\u043b\u0438 \u043a \u043f\u0430\u0440\u0430\u043c \u0430\u0431\u0437\u0430\u0446\u0435\u0432 \u0432 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u0442\u0438\u043f\u0430 \u00ab\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043a\u0430\u043a\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u043f\u043e\u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438\u00bb. \u042f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0441 qooxdoo \u0438 \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0431\u0435\u043b.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-254408","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/254408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=254408"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/254408\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=254408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=254408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=254408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}