I'm working with the OpenUI5 tutorial on https://openui5.hana.ondemand.com/#docs/guide/b4d66ebee72645c1a3501a769e935541.html
Right now at "Step 7" I am getting an error loading the app:
failed to load 'sap/m/splitApp.js' from resources/sap/m/splitApp.js: 404 - Resource could not be found!
The error message is thrown by UIComponent.js, a file from the UI5 library, which means, that the library itself is found.
Please help.
The code is an exact copy from the tutorial and the project was created by Eclipse and the UI5 plugin.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"sap.ui.demo.tdg": "./"
}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "sap.ui.demo.tdg"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Component.js
jQuery.sap.declare("sap.ui.demo.tdg.Component");
jQuery.sap.require("sap.ui.demo.tdg.MyRouter");
sap.ui.core.UIComponent.extend("sap.ui.demo.tdg.Component", {
metadata : {
name : "TDG Demo App",
version : "1.0",
includes : [],
dependencies : {
libs : ["sap.m", "sap.ui.layout"],
components : []
},
rootView : "sap.ui.demo.tdg.view.App",
config : {
resourceBundle : "i18n/messageBundle.properties",
serviceConfig : {
name : "Northwind",
serviceUrl : "http://services.odata.org/V2/(S(sapuidemotdg))/OData/OData.svc/"
}
},
routing : {
config : {
routerClass : sap.ui.demo.tdg.MyRouter,
viewType : "XML",
viewPath : "sap.ui.demo.tdg.view",
targetAggregation : "detailPages",
clearTarget : false
},
routes : [
{
pattern : "",
name : "main",
view : "Master",
targetAggregation : "masterPages",
targetControl : "idAppControll",
subroutes : [
{
pattern : "{product}/:tab:",
name : "product",
view : "Detail"
}
]
},
{
name : "catchallMaster",
view : "Master",
targetAggregation : "masterPages",
targetControl : "idAppControl",
subroutes : [
{
pattern : ":all*:",
name : "catchallDetail",
view : "NotFound"
}
]
}
]
}
},
init : function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
var mConfig = this.getMetadata().getConfig();
var rootPath = jQuery.sap.getModulePath("sap.ui.demo.tdg");
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : [rootPath, mConfig.resourceBundle].join("/")
});
this.setModel(i18nModel, "i18n");
var sServiceUrl = mConfig.serviceConfig.serviceUrl;
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);
this.setModel(oModel);
var deviceModel = new sap.ui.model.json.JSONModel({
isTouch : sap.ui.Device.support.touch,
isNoTouch : !sap.ui.Device.support.touch,
isPhone : sap.ui.Device.system.phone,
isNoPhone : !sap.ui.Device.system.phone,
listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster",
listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive"
});
deviceModel.setDefaultBindingMode("OneWay");
this.setModel(deviceModel, "device");
this.getRouter().initialize();
},
});
MyRouter.js
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
jQuery.sap.require("sap.ui.core.routing.Router");
jQuery.sap.declare("sap.ui.demo.tdg.MyRouter");
sap.ui.core.routing.Router.extend("sap.ui.demo.tdg.MyRouter", {
constructor : function() {
sap.ui.core.routing.Router.apply(this, arguments);
this._oRouteMatchedHandler = new sap.m.routing.RouteMatchedHandler(this);
},
myNavBack : function(sRoute, mData) {
var oHistory = sap.ui.core.routing.History.getInstance();
var sPreviousHash = oHistory.getReviousHash();
if(sPreviousHash !== undefined) {
window.history.go(-1);
} else {
var bReplace = true;
this.navTo(sRoute, mData, bReplace);
}
},
myNavToWithoutHash : function (oOptions) {
var oSplitApp = this._findSplitApp(oOptions.currentView);
var oView = this.getView(oOptions.targetView, oOptions.targetViewType);
oSplitApp.addPage(oView, oOptions.isMaster);
oSplitApp.to(oView.geId(), oOptions.transition || "show", oOptions.data);
},
backWithouHash : function (oCurrentView, bIsMaster) {
var sBackMethod = bIsMaster ? "backMaster" : "backDetail";
this._findSplitApp(oCurrentView)[sBackMethod]();
},
destroy : function (oControl) {
sap.ui.core.routing.Router.prototype.destroy.apply(this, arguments);
this._oRouteMatchedHandler.destroy();
},
_findSplitApp : function (oControl) {
sAncestorControlName = "idAppControl";
if (oControl instanceof sap.ui.core.mvc.View & oControl.byId(sAncestorControlName)){
return oControl.byId(sAncestorConrolName);
}
return oControl.getParent() ? this._findSplitApp(oControl.getParent(), sAncestorControlName) : null;
}
});
It was a spelling mistake. Thx to Qualiture
Related
I am trying to unit test this service using jasmine:-
my unit test is :-
describe('initial configuration for the test user', function () {
beforeEach(function(){
var config = {
'Apache 404' : {
content : {
type : 'tip',
template : 'yesNo',
text : 'Are you searching for status code 404?',
yesText : 'Try our more accurate field search',
attachTo : '#inputBox right',
yesActions : {
0 : {
type : 'replaceSubstring',
target : '#inputBox',
value : 'apache.status:404',
match : '404'
}
}
},
conditions : {
0 : {
type : 'valueChange',
target : '#inputBox',
textMatch : '(^|([\\s]+))404(([\\s]+)|$)',
preventSubmit : true
},
1 : {
type : 'contentPropertyLessThan',
propertyName : 'timesShown',
compareVal : 3
}
}
}
};
var clientName = 'testClient';
var fireRef = new Firebase('https://luminous-inferno-1740.firebaseio.com/' + clientName);
var fireSync = $firebase(fireRef);
fireSync.$set({'config' : config});
log.message = 'Resetting user data';
$log.debug(log);
userData.init(function(done) {
done();
});
});
it('should have a valid config', function () {
expect(Object.keys(userData.getConfig()).length > 1);
});
});
I am receiving an error :-
ReferenceError: $firebase is not defined
at Object.
Can somebody help me providing working example of my code with some explanation?
I also had the problem. I solved my problem by adding $firebaseArray in the parameter of the controller
.controller('ChatsCtrl', ['$scope','$firebaseArray','$rootScope',......
One thing should be noted that firebase has been updated that $firebase is no longer supported. You can only use $firebaseArray or $firebaseObject for retrieving the data.
Trying to create dynamic HTML forms and save them, I can create dynamic forms using bootstrap but on submit i am struggling to create JSON of this dynamic form.
I am looking to save something like this
{
"form" :
[
{
"name" : "username",
"id" : "txt-username",
"caption" : "Username",
"type" : "text",
"placeholder" : "E.g. user#example.com"
},
{
"name" : "password",
"caption" : "Password",
"type" : "password"
},
{
"type" : "submit",
"value" : "Login"
}
]
}
I am not sure how i can achieve this.
This should do it:
function getAttrs(DOMelement) {
var obj = {};
$.each(DOMelement.attributes, function () {
if (this.specified) {
obj[this.name] = this.value;
}
});
return obj;
}
$("form").each(function () {
var json = {
"form": []
};
$(this).find("input").each(function () {
json.form.push(getAttrs(this));
});
$(this).find("select").each(function () {
var select = getAttrs(this);
select["type"] = "select";
var options = [];
$(this).children().each(function () {
options.push(getAttrs(this));
});
select["options"] = options;
json.form.push(select);
});
console.log(json);
});
DEMO: http://jsfiddle.net/j1g5jog0/
Update: http://jsfiddle.net/j1g5jog0/5/
As part of our Grunt build we are transpiling some typescript code into a few separate files, and then concatenating the resulting javascript along with all the rest of our javascript code. Unfortunately I can't get the dynamic buildup of filenames to work along with grunt-concat.
This is the relevant snippet from our Gruntfile - see the part on generatedTypeScriptFiles, which doesn't work.
var jsfiles = [
'js/external_libraries/inherit.js',
'js/external_libraries/modernizr.js',
'js/baz.js'
];
grunt.initConfig({
gitinfo : {}, //will be populated with values from Git
options : {
"packageName" : nconf.get("name"),
"frameworkVersion" : nconf.get("version"),
"frameworkOutputPath" : nconf.get("frameworkOutputPath"),
"workerOutputPath" : nconf.get("workerOutputPath"),
"sourceMapPath" : nconf.get("sourceMapPath")
},
typescript : {
foo: {
src : ['js/Foo/*.ts'],
dest : 'generated/Foo.js',
},
bar : {
src : ['js/Bar/*.ts'],
dest : 'generated/Bar.js',
}
},
generatedTypeScriptFiles : {
all : function () {
var tsf = [];
for (var key in this.typescript) {
if(this.typescript[key].dest) {
tsf.push(this.typescript[key].dest);
}
}
return tsf;
}()
},
scriptfiles : {
hybrid : function () {
return jsfiles.concat('<%= generatedTypeScriptFiles.all %>');
}(),
web : function () {
return jsfiles.concat('<%= generatedTypeScriptFiles.all %>');
}()
}
concat : {
web : {
options : {
separator : ';',
},
src : '<%= scriptfiles.web %>',
dest : '<%= options.frameworkOutputPath %>'
}
}
}
I am guessing that for our case where we actually know all the resulting filenames in our typescript build step, we could just build up the filenames beforehand - outside of grunt.initConfig. That should fix things, right? Or is there another way?
Maybe I misunderstand the problem or what you're trying to do, but why don't you just glob all .js files from the "generated" directory?
Like this:
var jsfiles = [
'js/external_libraries/inherit.js',
'js/external_libraries/modernizr.js',
'js/baz.js',
'generated/*.js'
];
grunt.initConfig({
typescript : {
foo: {
src : ['js/Foo/*.ts'],
dest : 'generated/Foo.js',
},
bar : {
src : ['js/Bar/*.ts'],
dest : 'generated/Bar.js',
}
},
concat : {
web : {
options : {
separator : ';',
},
src : jsFiles,
dest : '<%= options.frameworkOutputPath %>'
}
}
});
I have created an Object.. please tell me If I'm doing it right:
{"images": {
image1 : {
"small_image" : "images/1.png",
"large_image" : "images/big/1.png"
},
image2 : {
"small_image" : "images/2.png",
"large_image" : "images/big/2.png"
},
image3 : {
"small_image" : "images/3.png",
"large_image" : "images/big/3.png"
},
}
Now, I saved it with the name images.json
How will I call it on my HTML file using jQuery?..
I want to test it on a console first..
I use this code and it does'nt display anthing on console..
$.getJSON("js/images.json", function(data){
$.each(data, function (index, value) {
console.log("asdfasdf " +value);
});
});
You need to modify your object Literal to make it a JSON String. It should look more like this:
{"images": {
"image1" : {
"small_image" : "images/1.png",
"large_image" : "images/big/1.png"
},
"image2" : {
"small_image" : "images/2.png",
"large_image" : "images/big/2.png"
},
"image3" : {
"small_image" : "images/3.png",
"large_image" : "images/big/3.png"
}
}}
That along with the javascript you already have should work, assuming your webserver is setup to properly serve .json files.
Creating a ajava script array in given format with carousel ?
Iam using carousel.js & carousel.css, its working fine with static data, but when im trying to put dynamic data its hot happening. Im not able to create the value array in given format.
<script>
var carousel2 = new widgets.Carousel( {
uuid : "carousel2",
widgetDir : "carousel/",
args : { "theme" : "gray", "scrollCarousel" : true, },
value : [
{
"image" : "images/banner/big_banner_01.jpg",
},
{
"image" : "images/banner/big_banner_02.jpg",
},
{
"image" : "images/banner/big_banner_03.jpg",
},
{
"image" : "images/banner/big_banner_04.jpg",
},
{
"image" : "images/banner/big_banner_05.jpg",
}
]
} );
</script>
I need to pass the value for "value" key dynamically. How can i form this dynamically .IM TRYING WITH THE BELOW ONE
<repeat index="index.value" ref="DATA">
<repeat ref="VAL">
<choose ref="LANGUAGE">
<when value="${lang}">hiii
<script>
val[index.value] = "{"+"'image' :" +${IMAGE}+"}";</script>
</when>
<otherwise/>
</choose>
</repeat>
</repeat>
This is not working.
<script>
var generateCaroseul = {
getData: function(){
//loop through html to create an object with the data.
var dataObj = null;
$('li').each(function(index) {
var imgUrl = $(this).attr("src");
dataObj.add("image", imgUrl);
});
return dataObj;
}
};
var carousel2 = new widgets.Carousel( {
uuid : "carousel2",
widgetDir : "carousel/",
args : { "theme" : "gray", "scrollCarousel" : true, },
value : generateCaroseul.getData()
} );
</script>