@qooxdoo/framework
Version:
The JS Framework for Coders
496 lines (434 loc) • 12.4 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2011 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Tino Butz (tbtz)
************************************************************************ */
/**
* Specialized page. This page includes already a {@link qx.ui.mobile.navigationbar.NavigationBar}
* and and a {@link qx.ui.mobile.container.Scroll} container.
* The NavigationPage can only be used with a page manager {@link qx.ui.mobile.page.Manager}.
* *Example*
*
* Here is a little example of how to use the widget.
*
* <pre class='javascript'>
*
* var manager = new qx.ui.mobile.page.Manager();
* var page = new qx.ui.mobile.page.NavigationPage();
* page.setTitle("Page Title");
* page.setShowBackButton(true);
* page.setBackButtonText("Back")
* page.addListener("initialize", function()
* {
* var button = new qx.ui.mobile.form.Button("Next Page");
* page.getContent().add(button);
* },this);
*
* page.addListener("back", function()
* {
* otherPage.show({animation:"cube", reverse:true});
* },this);
*
* manager.addDetail(page);
* page.show();
* </pre>
*
* This example creates a NavigationPage with a title and a back button. In the
* <code>initialize</code> lifecycle method a button is added.
*/
qx.Class.define("qx.ui.mobile.page.NavigationPage", {
extend: qx.ui.mobile.page.Page,
implement: qx.ui.mobile.container.INavigation,
/*
*****************************************************************************
CONSTRUCTOR
*****************************************************************************
*/
/**
* @param wrapContentByGroup {Boolean} Defines whether a group box should wrap the content. This can be used for defining a page margin.
* @param layout {qx.ui.mobile.layout.Abstract} The layout of this page.
*/
construct(wrapContentByGroup, layout) {
super();
if (wrapContentByGroup != null) {
this._wrapContentByGroup = wrapContentByGroup;
}
},
/*
*****************************************************************************
EVENTS
*****************************************************************************
*/
events: {
/** Fired when the user tapped on the navigation button */
action: "qx.event.type.Event"
},
/*
*****************************************************************************
PROPERTIES
*****************************************************************************
*/
properties: {
/** The title of the page */
title: {
check: "String",
init: "",
event: "changeTitle",
apply: "_applyTitle"
},
/** The back button text */
backButtonText: {
check: "String",
init: "",
apply: "_applyBackButtonText"
},
/** The action button text */
buttonText: {
check: "String",
init: "",
apply: "_applyActionButtonText"
},
/** The action button icon */
buttonIcon: {
check: "String",
init: null,
nullable: true,
apply: "_applyActionButtonIcon"
},
/**
* Whether to show the back button.
*/
showBackButton: {
check: "Boolean",
init: false,
apply: "_applyShowBackButton"
},
/**
* Indicates whether the back button should be shown on tablet.
*/
showBackButtonOnTablet: {
check: "Boolean",
init: false
},
/**
* Whether to show the action button.
*/
showButton: {
check: "Boolean",
init: false,
apply: "_applyShowButton"
},
/**
* Toggles visibility of NavigationBar in
* wrapping container {@link qx.ui.mobile.container.Navigation}
*/
navigationBarHidden: {
check: "Boolean",
init: false
},
/**
* Sets the transition duration (in seconds) for the effect when hiding/showing
* the NavigationBar through boolean property navigationBarHidden.
*/
navigationBarToggleDuration: {
check: "Number",
init: 0.8
},
/**
* The CSS class to add to the content per default.
*/
contentCssClass: {
check: "String",
init: "content",
nullable: true,
apply: "_applyContentCssClass"
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members: {
_isTablet: false,
_wrapContentByGroup: true,
__backButton: null,
__actionButton: null,
__content: null,
__scrollContainer: null,
__title: null,
__leftContainer: null,
__rightContainer: null,
// interface implementation
getTitleWidget() {
if (!this.__title) {
this.__title = this._createTitleWidget();
}
return this.__title;
},
/**
* Creates the navigation bar title.
*
* @return {qx.ui.mobile.navigationbar.Title} The created title widget
*/
_createTitleWidget() {
return new qx.ui.mobile.navigationbar.Title(this.getTitle());
},
// property apply
_applyTitle(value, old) {
if (this.__title) {
this.__title.setValue(value);
}
},
// interface implementation
getLeftContainer() {
if (!this.__leftContainer) {
this.__leftContainer = this._createLeftContainer();
}
return this.__leftContainer;
},
// interface implementation
getRightContainer() {
if (!this.__rightContainer) {
this.__rightContainer = this._createRightContainer();
}
return this.__rightContainer;
},
/**
* Creates the left container for the navigation bar.
*
* @return {qx.ui.mobile.container.Composite} Creates the left container for the navigation bar.
*/
_createLeftContainer() {
var layout = new qx.ui.mobile.layout.HBox();
var container = new qx.ui.mobile.container.Composite(layout);
container.addCssClass("left-container");
this.__backButton = this._createBackButton();
this.__backButton.addListener("tap", this._onBackButtonTap, this);
this._showBackButton();
container.add(this.__backButton);
return container;
},
/**
* Creates the right container for the navigation bar.
*
* @return {qx.ui.mobile.container.Composite} Creates the right container for the navigation bar.
*/
_createRightContainer() {
var layout = new qx.ui.mobile.layout.HBox();
var container = new qx.ui.mobile.container.Composite(layout);
container.addCssClass("right-container");
this.__actionButton = this._createButton();
this.__actionButton.addListener("tap", this._onButtonTap, this);
this._showButton();
container.add(this.__actionButton);
return container;
},
/**
* Creates the navigation bar back button.
* Creates the scroll container.
*
* @return {qx.ui.mobile.navigationbar.BackButton} The created back button widget
*/
_createBackButton() {
return new qx.ui.mobile.navigationbar.BackButton(
this.getBackButtonText()
);
},
/**
* Creates the navigation bar button.
* Creates the content container.
*
* @return {qx.ui.mobile.navigationbar.Button} The created button widget
*/
_createButton() {
return new qx.ui.mobile.navigationbar.Button(
this.getButtonText(),
this.getButtonIcon()
);
},
/**
* Returns the content container. Add all your widgets to this container.
*
* @return {qx.ui.mobile.container.Composite} The content container
*/
getContent() {
return this.__content;
},
/**
* Returns the back button widget.
*
* @return {qx.ui.mobile.navigationbar.BackButton} The back button widget
*/
_getBackButton() {
return this.__backButton;
},
/**
* Returns the action button widget.
*
* @return {qx.ui.mobile.navigationbar.Button} The action button widget
*/
_getButton() {
return this.__actionButton;
},
/**
* Sets the isTablet flag.
* @param isTablet {Boolean} value of the isTablet flag.
*/
setIsTablet(isTablet) {
this._isTablet = isTablet;
},
/**
* Returns the isTablet flag.
* @return {Boolean} the isTablet flag of this page.
*/
isTablet() {
return this._isTablet;
},
/**
* Returns the scroll container.
*
* @return {qx.ui.mobile.container.Scroll} The scroll container
*/
_getScrollContainer() {
return this.__scrollContainer;
},
/**
* Adds a widget, below the NavigationBar.
*
* @param widget {qx.ui.mobile.core.Widget} The widget to add, after NavigationBar.
*/
addAfterNavigationBar(widget) {
if (widget && this.__scrollContainer) {
this.addBefore(widget, this.__scrollContainer);
}
},
// property apply
_applyBackButtonText(value, old) {
if (this.__backButton) {
this.__backButton.setValue(value);
}
},
// property apply
_applyActionButtonText(value, old) {
if (this.__actionButton) {
this.__actionButton.setValue(value);
}
},
// property apply
_applyActionButtonIcon(value, old) {
if (this.__actionButton) {
this.__actionButton.setIcon(value);
}
},
// property apply
_applyShowBackButton(value, old) {
this._showBackButton();
},
// property apply
_applyShowButton(value, old) {
this._showButton();
},
// property apply
_applyContentCssClass(value, old) {
if (this.__content) {
this.__content.setDefaultCssClass(value);
}
},
/**
* Helper method to show the back button.
*/
_showBackButton() {
if (this.__backButton) {
if (this.getShowBackButton()) {
this.__backButton.show();
} else {
this.__backButton.exclude();
}
}
},
/**
* Helper method to show the button.
*/
_showButton() {
if (this.__actionButton) {
if (this.getShowButton()) {
this.__actionButton.show();
} else {
this.__actionButton.exclude();
}
}
},
// overridden
_initialize() {
super._initialize();
this.__scrollContainer = this._createScrollContainer();
this.__content = this._createContent();
if (this.__content) {
this.__scrollContainer.add(this.__content, { flex: 1 });
}
if (this.__scrollContainer) {
this.add(this.__scrollContainer, { flex: 1 });
}
},
/**
* Creates the scroll container.
*
* @return {qx.ui.mobile.container.Scroll} The created scroll container
*/
_createScrollContainer() {
return new qx.ui.mobile.container.Scroll();
},
/**
* Creates the content container.
*
* @return {qx.ui.mobile.container.Composite} The created content container
*/
_createContent() {
var content = new qx.ui.mobile.container.Composite();
content.setDefaultCssClass(this.getContentCssClass());
if (this._wrapContentByGroup == true) {
content.addCssClass("group");
}
return content;
},
/**
* Event handler. Called when the tap event occurs on the back button.
*
* @param evt {qx.event.type.Tap} The tap event
*/
_onBackButtonTap(evt) {
this.back();
},
/**
* Event handler. Called when the tap event occurs on the button.
*
* @param evt {qx.event.type.Tap} The tap event
*/
_onButtonTap(evt) {
this.fireEvent("action");
}
},
destruct() {
this._disposeObjects(
"__leftContainer",
"__rightContainer",
"__backButton",
"__actionButton",
"__title"
);
this.__leftContainer =
this.__rightContainer =
this.__backButton =
this.__actionButton =
null;
this.__title = this.__content = this.__scrollContainer = null;
this._isTablet = null;
}
});