I'm trying to change default theme in ExtJs 4.2 to Neptune custom theme. How to make it for debugging?
<html>
<head>
<title>xxx</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-custom.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
</head>
<body></body>
</html>
You must have the following files and folders:
extjs/ext-all.js
extjs/ext-theme-neptune.js
extjs/resources/css/ext-all-neptune.css
extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css
extjs/resources/ext-theme-neptune/images/*.*
And your code as follows:
<html>
<head>
<title>xxx</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-neptune.css">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-custom.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-theme-neptune.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
</head>
<body></body>
</html>
To change to the neptune theme modify line 33 of your sencha.cfg file located in .sencha/app/sencha.cfg to
app.theme=ext-theme-neptune
After doing this run sencha app refresh in your terminal or cammand line
I did as #ccerville said but finished with a
sencha app build
which did some magic to the bootstrap.css and allowed debugging page to use neptune. The 'refresh' didn't seem to make a difference, whereas the build modifies bootstrap.css which is what the 'debug' index.html uses.
Some more info available here : http://senchado.blogspot.ca/2013/03/extjs-42-app-with-custom-neptune-based.html
in app.json change line 31 where "theme" define.
change it "theme": "ext-theme-neptune"
After doing this run sencha app build in your terminal or cammand line
Related
I am using AngularJS and trying to use the angularJS material datepicker. I have been following the tutorial video at https://egghead.io/lessons/angularjs-angular-material-containers-with-the-layout-api
However, I keep getting this error and dont know why?
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=kg-App&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24injector%2Fmodulerr%3Fp0%3DngMaterial%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.6.9%252F%2524injector%252Fnomod%253Fp0%253DngMaterial%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A7%253A76%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A26%253A408%250A%2520%2520%2520%2520at%2520b%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A25%253A439)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A26%253A182%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A332%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A180)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A364%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A180)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A43%3A99%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A364%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
The error happens when I inject the ngMaterial in my app.js
angular.module('kg-App', ['ui.router','ngMaterial'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('login');
});
I followed the video and have all the scripts that I need
<!DOCTYPE html>
<html ng-app="kg-App">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KG Strength</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.css" rel="stylesheet">
<link type="text/html" rel="stylesheet" href="node_modules/angular-material/angular-material.min.css">
<link rel="stylesheet" href="./stylesheets/main.css">
<link rel="stylesheet" href="./stylesheets/newform.css">
<link rel="stylesheet" href="./stylesheets/admin.css">
<link rel="stylesheet" href="./stylesheets/nextsession.css">
</head>
<body>
<header-template></header-template>
<image-template></image-template>
<footer-template></footer-template>
<ui-view autoscroll='true'></ui-view>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script type="text/html" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/html" src="node_modules/angular-aria/angular-aria.min.js"></script>
<script type="text/html" src="node_modules/angular-messages/angular-messages.min.js"></script>
<script type="text/html" src="node_modules/angular-material/angular-material.min.js"></script>
<script src="./javascripts/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
Please help
Move the jquery.js script reference before angular.js (important, because angular.js use it internally )
in the App.js, add a dependance to ngMessages !
angular.module('kg-App', ['ui.router','ngMaterial', 'ngMessages'])
Also take a look to enter link description here (the video you looked seem outdated)
I know this is going to be a very simple error I am missing.
In my Angularj App, Error: Failed to instantiate module myApp due to: persists on showing. I know this down to the module not being loaded before being called by my own but I have been staring at my code trying to understand why it won't load i.e my own script loading before the module CDNs, spelling mistake etc.
My scripts are loaded like so:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/components/chart/components/chartComponent.js"></script>
<script src="app/components/chart/services/chartService.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<title>Angular</title>
</head>
And in my app.module.js I try to inject two modules chartjs and uirouter. I switch them about and which ever is first it still flags an error
var app = angular.module('myApp', ['chart.js', 'ui.router']);
Question
Why are the modules failing to load? Sorry for the simple question.
You are missing the reference for angular-chart.js and reorder the references as follows,
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/chart/components/chartComponent.js"></script>
<script src="app/components/chart/services/chartService.js"></script>
I built a table in my demo. I got help from this example.
In this example, first column there is an image of "edit image" (coming from bootstrap).
I also make same example in my plunker, already includes jquery and bootstrap but it is not displaying the image. Why?
here is my code (plunker)
<head>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link data-require="bootstrap#*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
</head>
Your second example is missing this:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Adding it in gives this:
Essentially the image is a font coming from font-awesome, not bootstrap.
I am supposed to use a map showing all specified locations marked in it. It needs be a general map showing all locations and routes along with the markers. However,
when i used dxMap in my web development project nothing showed up. The screen just remained blank.
below is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="Map.js"></script>
</head>
<body>
<div id="mapContainer" style="height:450px;max-width:750px;margin:0px auto"></div>
</body>
</html>
Separate .js file code is as follows:
$(function () {
$('#mapContainer').dxMap({});
});
I have used this approach following the link :
http://js.devexpress.com/Documentation/Tutorial/Data_Visualization/Configure_VectorMap/?version=15_1#Create_a_Vector_Map
The link shows how to configure a DxVectorMap. But this approach doesn't seem to work for dxMap. Please can anyone guide what approach should i use for dxMap?
The above code created a dxmap once the head tag was changed with correct CDNs (which included support for desktop web applications as well)
<head>
<title>Add a Widget - jQuery Approach</title>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
**<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/15.1.7/js/dx.webappjs.js"></script>**
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
I am new to protractor. I have configured Gulp and protractor for my app.
My app structure looks like this:-
my_app
|
---WebContent
|
----css folder
----3rd party folder
----e2e tests folder
----css folder
----js folder
----css folder
----WEB-INF folder
----META-INF folder
----**index.html**
My gulp task looks like this
gulp.task('connect', function() {
connect.server({
root: '../',
port: 8000
});
});
my index.html looks like this
<!DOCTYPE html>
<html ng-app="app"ng-controller="appController">
<link rel="stylesheet" type="text/css" href="/my_app/3rd-party-js/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/theme/css/uigrid/ui-bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/3rd-party-js/angularjs/ui-grid.min.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/theme/css/uigrid/loading-bar.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/3rd-party-js/angularjs/slider/slider.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/css/app.css"/>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<header>
<div class ="header-panel"><span class="glyphicon glyphicon-info-sign"></span> Environment:{{constants.environment}} </div>
<div id="logo"> <img src="/my_app/images/logo.gif" alt="Logo"/></div>
<div class="menu">
// some stuff here
</div>
</header>
<div class="full-fit" ng-view></div>
<script src="/my_app/3rd-party-js/jquery/jquery-1.9.1.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-idle.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/lodash.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-animate.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-animate.min.js.map"></script>
<script src="/my_app/3rd-party-js/angularjs/ui-bootstrap.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular.min.js.map"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-route.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-resource.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/loading-bar.js"></script>
<script src="/my_app/3rd-party-js/angularjs/ui-grid.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/momentjs.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/slider/slider.js"></script>
<script src="/my_app/3rd-party-js/angularjs/multiselect/multiselect.js"></script>
<script src="/my_app/3rd-party-js/angularjs/multiselect/multiselectsingle.js"></script>
<script src="/my_app/3rd-party-js/bootstrap/bootstrap.min.js"></script>
<script src="/my_app/dist/app.min.js"></script>
</body>
</html>
Problem:
When I run gulp webserver, it shows me the directory listing. Ok here but when I want to access index.html (http://localhost:8000/my_app/WebContent/index.html), it refuses to recognise it as AngularJs app and load a crude html page with no css or other embeded htmls. My index.html referes to root relative URLs and works fine on tomcat or any other server but can't get this working using gulp. Ultilmate goal is to write some protractor e2e tests but connectivity is established. Any pointers?