Cannot load ExtJS 5 inside spring web app - spring

i have problems to load my application. I created a Spring Web application and using Sencha cmd, i created an app inside webapp/resources folder.
This is my view.jsp
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# page session="false" %>
<html>
<head>
<title>LOGIN</title>
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/apps/BetsTrackerAuth/ext/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>">
<script type="text/javascript" src="<c:url value="/resources/apps/BetsTrackerAuth/ext/build/ext-all.js"/>"</script>
<script type="text/javascript" src="<c:url value="/resources/apps/BetsTrackerAuth/ext/packages/ext-theme-neptune/build/ext-theme-neptune.js"/>"</script>
<script type="text/javascript" src="<c:url value="/resources/apps/BetsTrackerAuth/app.js"/>" charset="utf-8"></script>
</head>
<body>
<h1>
LOGIN Hello world!
</h1>
<P> The time on the server is ${serverTime}. </P>
</body>
</html>
And my error is:
GET http://localhost:8084/app/app/Application.js?_dc=1433427933321 404 (Not Found)
What's wrong in my view?

It's a bit hard to say for sure without seeing your app.js file, but I would guess it is trying to load various dependencies -- namely Application.js.
Looking at the URL, I can see two levels of /app/, which tells me it's probably looking in the wrong place (for whatever reason).
Try setting the Ext.Loader paths before you load app.js:
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
paths: {
'MyApp': 'path/to/app'
}
});
</script>

Related

SAPUI5 reuse Views and make new instance

I am new in SAP and trying to develop a SAPUI5 application, but faced some problems when reusing views/partial views. I want to have a partial view and pass custom data in a specefic format (data changes but model is same), and reuse these partial view many times in one page, every time passing different data. Somehow like Tiles, but very cuszomized.
what do you suggest me to use?
I have tryied to make new instance of a regular view but faced this error:
GET https://sapui5.hana.ondemand.com/resources/view/List.view.xml 404
(Not Found)
this is my code to make new instance:
var firstListView=sap.ui.xmlview("firstViw", "view.List");
thanks for your help
Update:
this is my index.html
<!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="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ushell"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{
"sap.ui.appName": "./"
}'>
</script>
<script src="../libs/jquery.cookie.js"></script>
<link href="css/site.css" rel="stylesheet" type="text/css" />
<link href="css/library.css" rel="stylesheet" type="text/css" />
<link href="css/theme/library.css" rel="stylesheet" type="text/css" />
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
appWidthLimited:false,
app: new sap.ui.core.ComponentContainer({
name: "sap.ui.appName"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
and this is the folder structered:
Please have a look at chapter “Reusing UI Parts: Fragments” of the UI5 SDK.
Here is an excerpt. Please have a look whether this helps.

local bootstrap with laravel 4.2

I have a default blade file that yields other contents this is where im calling the link to style sheet and javascript i downloaded bootstrap 3.3.5 and created a link to it here is my default blade
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap335/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug- ins/1.10.7/integration/bootstrap/3/dataTables.bo‌​otstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
#yield('content')
</div>
</body>
</html>
The bootstrap is working properly in my views except one. i don't know the problem because it works fine on the others and it is extends the default blade file

Angular-UI-router Routing doesn't work in Ionic app

I have a problem where my Ionic app won't render my views but I'm not getting an error. When I run this app only the navbar and a blank page is showing.
index.html:
<html ng-app="App">
<head>
<!-- Project setup: https://scotch.io/tutorials/angularjs-best-practices-directory-structure -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>TEST Mobile</title>
<!-- Assets -->
<link href="assets/libs/ionic/ionic.css" rel="stylesheet" />
<script src="assets/libs/ionic/ionic.bundle.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.route.js"></script>
<!-- Controllers -->
<script src="app/components/home/homeController.js"></script>
<script src="app/components/projects/projectsController.js"></script>
<script src="app/components/vms/vmsController.js"></script>
<script src="app/components/auth/authController.js"></script>
<!-- Services -->
<script src="app/components/home/homeService.js"></script>
<script src="app/components/projects/projectsService.js"></script>
<script src="app/components/vms/vmsService.js"></script>
<script src="app/components/auth/authService.js"></script>
<!-- Cordova.js isn't loaded until build for a specific platform, this will give 404 when viewing from ordinary browser -->
<script src="cordova.js"></script>
</head>
<body>
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
I have a module file and a seperate routing file:
var app = angular.module('App', ['ionic']);
routing js file:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/components/home/homeView.html',
controller: 'homeController'
});
$urlRouterProvider.otherwise('/home');
})
When I run this I only get the nav bar to show but not the ion-view home, which is now just for demonstration:
<ion-view view-title="Forgot Password">
<ion-content padding="true">
<p>
Yeah this is just a demo showing how views can be shown without tabs, then you can navigate
to views within tabs. Additionally, only one set of tabs needs to be written for all of the different views that should go inside the tabs. (Compared to written the same tab links in the footer of every view that's in a tab.)
</p>
<p>
There's no username/password, just click
the Sign-In button back a the sign-in view.
</p>
<p>
Return to Sign-In.
</p>
</ion-content>
</ion-view>
I suspect my issue is in the routing config but I wasn't able to find a working fix for this problem.
Add ui-view to your ion-nav-view in your index.html and it will work.
<ion-nav-view ui-view></ion-nav-view>
The issue wasn't with the routing config. The issue was that in another file (controller file) I also stated the angular.module('App', ['ionic']); this overrided my app.config.

Type Error i is undefined

Am using jquery draggable collision plugin which throws the error on loading the page that is "Type Error i is undefined"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type= "text/javascript" src="js/jquery-ui.js"></script>
<script type= "text/javascript" src="js/jquery-collision.min.js"></script>
<script type= "text/javascript" src="js/jquery-ui-draggable-collision.min.js"></script>
<script type= "text/javascript" src="js/common.js"></script>
</head>
<body>
<div id="header">Sprite Generator</div>
<div id="droppable" >
<div id="overLay">Drop Files Here</div>
</div>
<div id="cssDetails">
<div id="cssHead">CSS Data</div>
</div>
<div id="errorMessage"></div>
</body>
</html>
This is the code I use. Kindly help, am not aware what is going wrong here.
The error lies in the draggable collision plugin file. Each time the method .data("draggable") is called, an undefined value is returned.
There is a slight difference between jQuery UI 1.9.2 and 1.10.3. In this last version, .data("draggable") has been replaced by .data("ui-draggable").
You should :
Either use an old version of jQuery UI plugin,
or use the last version, then replace .data("draggable") by .data("ui-draggable") in the jquery-ui-draggable-collision.min.js file.
In my own case, I used the second solution. But your case may be different, since I don't know which version of jQuery UI plugin you are using now.
The README for jQuery UI Draggable Collision reads:
Load jquery-ui-draggable-collision and its dependencies:
<script src="jquery-1.8.3.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="jquery-collision-1.0.2.js"></script>
<script src="jquery-ui-draggable-collision-1.0.2.js"></script>
It doesn't explain why you need to load modules separately, but my suspicion is there's a conflict going on somewhere. I'd try including the specific individual files (core, widget, mouse, draggable, collision, and ui-draggable-collision) and see if that works. Without more information in your question, it's hard for me to try a set of specific things, but this may be your best bet.

Using ruby gem coderay gets me inline text in *.html.erb file

I am focused on the wrong layer of abstraction here, but can't figure out where.
I have this file views/pages/overview.html.erb
<%= stylesheet_link_tag "cust/coderay"%>
<h1>Overview</h1>
<hr>
Here's my code test:
<%= html = CodeRay.scan("puts 'Hello, world!'", :ruby).div(:line_numbers => :table)%>
<hr>
Back <%=link_to "home", "home"%>.
<hr>
It took <%="%.3f" %(Time.now-#start_time)%> seconds to generate this page.
To my surprise, the pages renders like so:
When I view source on the page I get:
<!DOCTYPE html>
<html>
<head>
<title>Dash</title>
<link href="/assets/application-all.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/all/pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="SydEiDhSNHuEE6vCfr4rajIksxBbqnm89sddC08msjs=" name="csrf-token" />
</head>
<body>
<h1>Overview</h1>
<hr>
Here's my code test:
<table class="CodeRay"><tr>
<td class="line-numbers" title="double click to toggle" ondblclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"><pre>
</pre></td>
<td class="code"><pre>puts <span style="background-color:hsla(0,100%,50%,0.05)"><span style="color:#710">'</span><span style="color:#D20">Hello, world!</span><span style="color:#710">'</span></span></pre></td>
</tr></table>
<hr>
Back home.
<hr>
It took 0.006 seconds to generate this page.
</body>
</html>
Why is the bracketed css displaying as inline text? What should my usage of coderay look like here?
Many thanks -
Rails escapes your HTML by default in ERB templates. You need to turn off HTML escaping like so:
<%=raw CodeRay.scan("puts 'Hello, world!'", :ruby).div(:line_numbers => :table) %>
See more at this question and these release notes.

Resources