@qooxdoo/framework
Version:
The JS Framework for Coders
560 lines (456 loc) • 12.9 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 : function(wrapContentByGroup, layout)
{
this.base(arguments);
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 : function() {
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 : function()
{
return new qx.ui.mobile.navigationbar.Title(this.getTitle());
},
// property apply
_applyTitle : function(value, old) {
if (this.__title) {
this.__title.setValue(value);
}
},
// interface implementation
getLeftContainer : function() {
if (!this.__leftContainer) {
this.__leftContainer = this._createLeftContainer();
}
return this.__leftContainer;
},
// interface implementation
getRightContainer : function() {
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 : function() {
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 : function() {
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 : function() {
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 : function() {
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 : function()
{
return this.__content;
},
/**
* Returns the back button widget.
*
* @return {qx.ui.mobile.navigationbar.BackButton} The back button widget
*/
_getBackButton : function()
{
return this.__backButton;
},
/**
* Returns the action button widget.
*
* @return {qx.ui.mobile.navigationbar.Button} The action button widget
*/
_getButton : function()
{
return this.__actionButton;
},
/**
* Sets the isTablet flag.
* @param isTablet {Boolean} value of the isTablet flag.
*/
setIsTablet : function (isTablet) {
this._isTablet = isTablet;
},
/**
* Returns the isTablet flag.
* @return {Boolean} the isTablet flag of this page.
*/
isTablet : function() {
return this._isTablet;
},
/**
* Returns the scroll container.
*
* @return {qx.ui.mobile.container.Scroll} The scroll container
*/
_getScrollContainer : function()
{
return this.__scrollContainer;
},
/**
* Adds a widget, below the NavigationBar.
*
* @param widget {qx.ui.mobile.core.Widget} The widget to add, after NavigationBar.
*/
addAfterNavigationBar : function(widget) {
if(widget && this.__scrollContainer) {
this.addBefore(widget, this.__scrollContainer);
}
},
// property apply
_applyBackButtonText : function(value, old)
{
if (this.__backButton) {
this.__backButton.setValue(value);
}
},
// property apply
_applyActionButtonText : function(value, old)
{
if (this.__actionButton) {
this.__actionButton.setValue(value);
}
},
// property apply
_applyActionButtonIcon : function(value, old)
{
if (this.__actionButton) {
this.__actionButton.setIcon(value);
}
},
// property apply
_applyShowBackButton : function(value, old)
{
this._showBackButton();
},
// property apply
_applyShowButton : function(value, old)
{
this._showButton();
},
// property apply
_applyContentCssClass : function(value, old)
{
if (this.__content) {
this.__content.setDefaultCssClass(value);
}
},
/**
* Helper method to show the back button.
*/
_showBackButton : function()
{
if (this.__backButton)
{
if (this.getShowBackButton()) {
this.__backButton.show();
} else {
this.__backButton.exclude();
}
}
},
/**
* Helper method to show the button.
*/
_showButton : function()
{
if (this.__actionButton)
{
if (this.getShowButton()) {
this.__actionButton.show();
} else {
this.__actionButton.exclude();
}
}
},
// overridden
_initialize : function()
{
this.base(arguments);
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 : function()
{
return new qx.ui.mobile.container.Scroll();
},
/**
* Creates the content container.
*
* @return {qx.ui.mobile.container.Composite} The created content container
*/
_createContent : function()
{
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 : function(evt)
{
this.back();
},
/**
* Event handler. Called when the tap event occurs on the button.
*
* @param evt {qx.event.type.Tap} The tap event
*/
_onButtonTap : function(evt)
{
this.fireEvent("action");
}
},
destruct : function()
{
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;
}
});