Skip to content

Commit

Permalink
Launchpad Navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
hpseitz committed Nov 23, 2014
1 parent ca54907 commit c141b3c
Show file tree
Hide file tree
Showing 12 changed files with 156 additions and 18 deletions.
19 changes: 10 additions & 9 deletions README.md
@@ -1,10 +1,9 @@
# UI5 SplitApp Boilerplate
# UI5 Boilerplate

UI5 SplitApp Boilerplate is a template for building Apps based on OpenUI5 or SAPUI5.
The Split App itself is especially designed for tablet usage (iPad), but should also be usable on
smartphones with iOS, Android or BB10 (iPhone 4s/5/5s, Nexus 4/5, ....).
UI5 Boilerplate is a template for building Apps based on OpenUI5 or SAPUI5.
The UI5 Boilerplate uses the sap.m.SplitApp which itself is especially designed for tablet usage (iPad), but is also usable on smartphones with iOS and Android (iPhone 4s/5/5s/6, Nexus 4/5, ....).

It could be used as starting point for development.
It could be used as starting point for your own development.

* Source: [https://github.com/6of5/UI5SplitApp-Boilerplate](https://github.com/6of5/UI5SplitApp-Boilerplate)
```
Expand All @@ -21,10 +20,12 @@ More Info can be found here:
* Contacts: Twitter [@hpseitz](http://twitter.com/hpseitz) or Email to information@6of5.com

## Features
* based on OpenUI5, more Infos under [http://sap.github.io/openui5/](http://sap.github.io/openui5/)
* based on sap.m library of UI5, which provide touch optimized controls
* follows "Mobile First" approach, but App also works on Desktop (Chrome latest, Firefox latest, Safari, IE9 and IE10)
* default file structure (i18n, model, view, css, js)
* Based on OpenUI5, more Infos under [http://sap.github.io/openui5/](http://sap.github.io/openui5/)
* Based on sap.m library of UI5, which provide touch optimized controls
* Follows "Mobile First" approach, but App also works on Desktop (Chrome latest, Firefox latest, Safari, IE9 and IE10)
* Default file structure (i18n, model, view, css, js)
* Navigation via Launchpad (default) or LeftMenu navigation
* Automatic generation of navigation items (Launchpad or LeftMenu)
* i18n base model

## Local Development with Grunt
Expand Down
9 changes: 9 additions & 0 deletions app/config.js
@@ -0,0 +1,9 @@
//UI5 Boilerplate Configuration
jQuery.sap.declare("ui5bp.app.config");

ui5bp.app.config = {

//Navigation Mode (LaunchpadMode: false -> LeftMenu Navigation)
LaunchpadMode: true

};
3 changes: 3 additions & 0 deletions css/style.css
Expand Up @@ -5,6 +5,9 @@
#myproLink {
color: #ffffff;
}
#myproLinkLP {
color: #ffffff;
}
.welcomeText {
font-size: 1.0rem;
margin: 2rem;
Expand Down
2 changes: 1 addition & 1 deletion model/menu.json
@@ -1,6 +1,6 @@
{
"Menu": [{
"title": "Menu",
"title": "Coffee Menu",
"icon": "sap-icon://list",
"targetPage": "CoffeeList",
"description": "Coffee Menu"
Expand Down
4 changes: 4 additions & 0 deletions view/App.controller.js
Expand Up @@ -41,13 +41,17 @@ sap.ui.controller("ui5bp.view.App", {
// subscribe to event bus
var bus = sap.ui.getCore().getEventBus();
bus.subscribe("nav", "to", this.navHandler, this);
bus.subscribe("nav", "backToPage", this.navHandler, this);
bus.subscribe("nav", "back", this.navHandler, this);
bus.subscribe("nav", "virtual", this.navHandler, this);
},

navHandler: function (channelId, eventId, data) {
var app = this.getView().app;
if (eventId === "to") {
this.navTo(data.id, data.data, true);
} else if (eventId === "backToPage" && data && data.id) {
app.backToPage(data.id);
} else if (eventId === "back") {
if(data && data.id){
this.navBack(data.id);
Expand Down
29 changes: 23 additions & 6 deletions view/App.view.js
@@ -1,3 +1,5 @@
jQuery.sap.require("ui5bp.app.config");

sap.ui.jsview("ui5bp.view.App", {

getControllerName: function() {
Expand All @@ -6,6 +8,10 @@ sap.ui.jsview("ui5bp.view.App", {

createContent: function(oController) {

if(jQuery.sap.getUriParameters().get("mode") === "LeftMenuNavi"){
ui5bp.app.config.LaunchpadMode = false;
}

// set i18n model
var oI18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl: "i18n/i18n.properties"
Expand All @@ -17,10 +23,11 @@ sap.ui.jsview("ui5bp.view.App", {
var oDeviceModel = new sap.ui.model.json.JSONModel({
isTouch: sap.ui.Device.support.touch,
isNoTouch: !sap.ui.Device.support.touch,
isPhone: sap.ui.Device.system.phone,
isPhone: sap.ui.Device.system.phone && !ui5bp.app.config.LaunchpadMode,
isNoPhone: !sap.ui.Device.system.phone,
listMode: (sap.ui.Device.system.phone) ? "None" : "SingleSelectMaster",
listItemType: (sap.ui.Device.system.phone) ? "Active" : "Inactive"
listItemType: (sap.ui.Device.system.phone) ? "Active" : "Inactive",
launchpadMode: ui5bp.app.config.LaunchpadMode
});
oDeviceModel.setDefaultBindingMode("OneWay");
sap.ui.getCore().setModel(oDeviceModel, "device");
Expand All @@ -31,7 +38,7 @@ sap.ui.jsview("ui5bp.view.App", {

this.app = new sap.m.SplitApp({
afterDetailNavigate: function() {
if (sap.ui.Device.system.phone) {
if (sap.ui.Device.system.phone || ui5bp.app.config.LaunchpadMode) {
this.hideMaster();
}
},
Expand All @@ -44,19 +51,29 @@ sap.ui.jsview("ui5bp.view.App", {
'precomposed': false
}
});
if(ui5bp.app.config.LaunchpadMode){
this.app.setMode(sap.m.SplitAppMode.HideMode);
}


this.app.addMasterPage(sap.ui.jsview("Menu", "ui5bp.view.Menu"));

if(ui5bp.app.config.LaunchpadMode){
this.app.addDetailPage(sap.ui.jsview("Launchpad", "ui5bp.view.Launchpad"));
}
this.app.addDetailPage(sap.ui.xmlview("Info", "ui5bp.view.Info"));
this.app.addDetailPage(sap.ui.jsview("CoffeeList", "ui5bp.view.CoffeeList"));
this.app.addDetailPage(sap.ui.jsview("NewFeatures-v122", "ui5bp.view.NewFeatures-v122"));

// navigate to the first page in both master and detail areas.
// the toMaster must be called after calling the toDetail, because both of them point to the same reference in phone and
// the real first page that will be shown in phone is the page in master area.
this.app.toDetail("CoffeeList");
this.app.toMaster("Menu");

if(ui5bp.app.config.LaunchpadMode){
this.app.toDetail("Launchpad");
} else {
this.app.toDetail("CoffeeList");
this.app.toMaster("Menu");
}
return this.app;
}
});
12 changes: 11 additions & 1 deletion view/CoffeeList.view.js
@@ -1,3 +1,5 @@
jQuery.sap.require("ui5bp.app.config");

sap.ui.jsview("ui5bp.view.CoffeeList", {

getControllerName: function() {
Expand All @@ -17,13 +19,21 @@ sap.ui.jsview("ui5bp.view.CoffeeList", {
var oList = new sap.m.List({});
oList.bindAggregation("items", "/Coffee", oListTemplate);

var oBtnLaunchpad = new sap.m.Button({
icon : "sap-icon://home",
visible : ui5bp.app.config.LaunchpadMode,
tooltip : "Back to Launchpad",
press : function(ev) {
sap.ui.getCore().getEventBus().publish("nav", "back", {id : "Launchpad"});
}
});

return new sap.m.Page({
title: "Coffee Menu",
showNavButton: "{device>/isPhone}",
navButtonPress: [oController.doNavBack, oController],
content: [oList],
headerContent: [],
headerContent: [oBtnLaunchpad],
footer: new sap.m.Bar({})
});
}
Expand Down
6 changes: 6 additions & 0 deletions view/Info.controller.js
@@ -1,9 +1,15 @@
jQuery.sap.require("ui5bp.app.config");

sap.ui.controller("ui5bp.view.Info", {

onInit: function() {
this.bus = sap.ui.getCore().getEventBus();
},

doNavBackLaunchpad: function(event) {
this.bus.publish("nav", "backToPage", {id : "Launchpad"});
},

doNavBack: function(event) {
this.bus.publish("nav", "back");
}
Expand Down
11 changes: 10 additions & 1 deletion view/Info.view.xml
Expand Up @@ -6,7 +6,16 @@
title="{i18n>WELCOME_TITLE}"
enableScrolling="true"
showNavButton="{device>/isPhone}"
navButtonPress="doNavBack" >
navButtonPress="doNavBack" >
<headerContent>
<Button
icon="sap-icon://home"
tooltip="Back to Launchpad"
visible="{device>/launchpadMode}"
press="doNavBackLaunchpad"
>
</Button>
</headerContent>
<footer>
<Bar>
</Bar>
Expand Down
13 changes: 13 additions & 0 deletions view/Launchpad.controller.js
@@ -0,0 +1,13 @@
sap.ui.controller("ui5bp.view.Launchpad", {

onInit: function() {
this.bus = sap.ui.getCore().getEventBus();
},

doNavOnSelect : function (event) {
this.bus.publish("nav", "to", {
id : event
});
}

});
57 changes: 57 additions & 0 deletions view/Launchpad.view.js
@@ -0,0 +1,57 @@
// ======= HECQTA ========
sap.ui.jsview("ui5bp.view.Launchpad", {

getControllerName: function() {
return "ui5bp.view.Launchpad";
},

createContent: function(oController) {

var tc = new sap.m.TileContainer("tc", {});

var model = new sap.ui.model.json.JSONModel("model/menu.json");
model.attachRequestCompleted(null, function() {
function navFn(target) {
return function() {
oController.doNavOnSelect(target);
}
}

var data = null,
m = 0,
menu = null;
data = model.getData();
if (data && data.Menu) {
for (m = 0; m < data.Menu.length; m++) {
menu = data.Menu[m];
tc.addTile(new sap.m.StandardTile({
icon: menu.icon,
title: menu.title,
info: menu.title,
press: navFn(menu.targetPage)
}));
}
}

});

var page = new sap.m.Page({
setShowHeader: true,
title: "UI5 Boilerplate Launchpad",
footer: new sap.m.Bar({
contentMiddle: [new sap.m.Link("myproLinkLP", {
text: "v0.8.0",
href: "http://blog.mypro.de/tag/ui5boilerplate/"
})]

})
});

page.setEnableScrolling(false);
page.setShowHeader(true);
page.addContent(tc);

return page;
}

});
9 changes: 9 additions & 0 deletions view/NewFeatures-v122.view.js
Expand Up @@ -182,12 +182,21 @@ sap.ui.jsview("ui5bp.view.NewFeatures-v122", {
]
});

var oBtnLaunchpad = new sap.m.Button({
icon : "sap-icon://home",
visible : ui5bp.app.config.LaunchpadMode,
tooltip : "Back to Launchpad",
press : function(ev) {
sap.ui.getCore().getEventBus().publish("nav", "backToPage", {id : "Launchpad"});
}
});

return new sap.m.Page({
title : "New Features v1.22 - Demo",
showNavButton: "{device>/isPhone}",
navButtonPress: [oController.doNavBack, oController],
content : [ oIconTabBar ],
headerContent: [oBtnLaunchpad],
footer: new sap.m.Bar({})
});
}
Expand Down

0 comments on commit c141b3c

Please sign in to comment.