Hello and thank you for reading this message.
I am very new to qooxdoo, literally 2 days, and I have a application which I
would like to build with a qooxdoo frontend.
Here is the code: (The original structure is implemented with Interfaces and
Classes describing the components, if it is too compact let me know and ill
post something a bit more structured)
qx.Class.define("servicesv2.Application",
{
extend : qx.application.Standalone,
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members :
{
toolbarSpacing : 20,
buttonSize : 155,
/**
* 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...
-------------------------------------------------------------------------
*/
this.mainPage();
},
// Used to decompose the parts of the main page
mainPage : function() {
//Creates the mainContainer component which will hold all the
items in the
page
var mainContainer = new qx.ui.container.Composite();
mainContainer.setWidth(qx.bom.Viewport.getWidth());
mainContainer.setHeight(qx.bom.Viewport.getHeight());
var layoutManager = new qx.ui.layout.VBox();
mainContainer.setLayout(layoutManager);
mainContainer.add(this.topSection());
mainContainer.add(this.bottomSection());
var applicationRoot = this.getRoot();
applicationRoot.add(mainContainer);
},
//Describes the top thirty percent of the mainPage
topSection : function() {
var topContainer = new qx.ui.container.Composite();
var layoutManager = new qx.ui.layout.VBox();
topContainer.setLayout(layoutManager);
topContainer.add(this.graphicsBar());
topContainer.add(this.modalToolbarAndContainer());
return topContainer;
},
//Describes the bottom seventy percent of the mainPage
bottomSection : function() {
//Creates the bottomContainer component which will hold
the two bottom windows items in the mainPage
var bottomContainer = new qx.ui.container.Composite();
var layoutManager = new qx.ui.layout.HBox();
bottomContainer.setLayout(layoutManager);
bottomContainer.add(this.windowManager(this.clientPane()));
bottomContainer.add(this.windowManager(this.canvasPane()));
return bottomContainer;
},
// Area set aside for the Displaying of Graphics including but not
limited
to a LOGO
graphicsBar : function() {
//Adds Graphics Bar Class
var logo = new qx.ui.basic.Image("qooxdoo.png");
return logo;
},
// Holds the modes which determine what information/settings the
canvasPane
displays
modalToolbarAndContainer : function() {
//Creates a toolbar
var toolbarObject = new qx.ui.toolbar.ToolBar();
toolbarObject.setSpacing(this.toolbarSpacing);
var part = new qx.ui.toolbar.Part();
var clientOverview = new qx.ui.toolbar.RadioButton("Client
Overview");
clientOverview.setWidth(this.buttonSize);
part.add(clientOverview);
var fileProperties = new qx.ui.toolbar.RadioButton("File
Properties");
fileProperties.setWidth(this.buttonSize);
part.add(fileProperties);
var jobOptions = new qx.ui.toolbar.RadioButton("Job Options");
jobOptions.setWidth(this.buttonSize);
part.add(jobOptions);
var archiveSettings = new qx.ui.toolbar.RadioButton("Archive
Settings");
archiveSettings.setWidth(this.buttonSize);
part.add(archiveSettings);
var targetSchema = new qx.ui.toolbar.RadioButton("Target Schema
Administration");
targetSchema.setWidth(this.buttonSize);
part.add(targetSchema);
this.toolbarObject.add(part);
var radioGroup = new qx.ui.form.RadioGroup(clientOverview,
fileProperties,
jobOptions, archiveSettings, targetSchema);
radioGroup.setAllowEmptySelection(true);
// Creates the toolbarContainer
var toolbarContainer = new qx.ui.container.Composite();
var layoutManager = new qx.ui.layout.Canvas();
toolbarContainer.setLayout(layoutManager);
toolbarContainer.add(toolbarObject, {left:10, top:10, right:10,
bottom:10});
return toolbarContainer;
},
windowManager : function(windowObject) {
var containerDesktop = new qx.ui.window.IDesktop();
containerDesktop.add(windowObject);
return containerDesktop;
},
// A List of clients, also the tools to add or remove clients
clientPane : function() {
var clientPane = new qx.ui.window.Window("Clients");
clientPane.setWidth(this.width);
clientPane.setHeight(this.height);
clientPane.setShowMinimize(false);
clientPane.setShowMaximize(false);
clientPane.setShowClose(false);
clientPane.setResizable(false, false, false, false);
clientPane.open();
var container = new qx.ui.container.Composite();
var layoutManager = new qx.ui.layout.Basic();
container.setLayout(layoutManager);
var list = new qx.ui.form.List();
list.set({ height: 590, width: 90, selectionMode : "one" });
container.add(list, {left: 5, top: 5});
clientPane.add(container);
//Stablishes the Data in the clientPane
list.add("John Doe");
return clientPane;
},
// Displays information based on the mode which is selected on the
modalToolbar
canvasPane : function() {
var canvasPane = new qx.ui.window.Window("Configuration");
canvasPane.setWidth(this.width);
canvasPane.setHeight(this.height);
canvasPane.setShowMinimize(false);
canvasPane.setShowMaximize(false);
canvasPane.setShowClose(false);
canvasPane.setResizable(false, false, false, false);
canvasPane.open();
var container = new qx.ui.container.Composite();
var layoutManager = new qx.ui.layout.Basic();
container.setLayout(layoutManager);
var tabView = new qx.ui.tabview.TabView();
for(var i = 0; i <= 5; i++) {
// create a page
var page = new qx.ui.tabview.Page("Test" + i);
// add page to tabview
tabView.add(page);
//Add components to page
page.setLayout(new qx.ui.layout.VBox());
page.add(new qx.ui.basic.Label("Notes..."));
}
container.add(tabView, {edge : 10});
canvasPane.add(container);
return canvasPane;
}
}
});
--
View this message in context:
http://qooxdoo.678.n2.nabble.com/Qooxdoo-Class-not-deploying-to-browser-All-I-get-is-a-blank-Screen-tp7581448.html
Sent from the qooxdoo mailing list archive at Nabble.com.
------------------------------------------------------------------------------
Everyone hates slow websites. So do we.
Make your web apps faster with AppDynamics
Download AppDynamics Lite for free today:
http://ad.doubleclick.net/clk;258768047;13503038;j?
http://info.appdynamics.com/FreeJavaPerformanceDownload.html
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
