well I am trying to apply the PgroutingWorkshop using PHP, ExtJS, GeoExt and OpenLayers.
I fact in the tutorial, they are using ExtJS 3.3.1 I think and me the 4.2.1
First of all, they mentionned a JS script called ext-base that doesn't exist on the 4.2.1 version. I said, this can not be very important, so I applied every thing they said but nothing appears.
I tried another tutorial from the official website of geoExt without osm map and it doen't work neither.
here is the code :
<html>
<head>
<title>Une page GeoExt de base</title>
<script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
<script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="GeoExt/resources/css/geoext-all-debug.css"></link>
<script type="text/javascript">
Ext.onReady(function() {
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
);
map.addLayer(layer);
new GeoExt.MapPanel({
renderTo: 'usthb',
height: 400,
width: 600,
map: map,
title: 'A Simple GeoExt Map'
});
});
</script>
</head>
<body>
<div id="usthb" style="width:100% height=200% "></div>
<div id="navigator"></div>
</body>
Related
<!DOCTYPE html>
<html>
<head>
<!-- locally referred ExtJS library files -->
<link href="ExtjsLib/ext-all.css" rel="stylesheet"
<script type="text/javascript" src="ExtjsLib/ext-all.js"></script>
<script type="text/javascript" src="ExtjsLib/ext-base.js"></script>
<script type="text/javascript"> Ext.BLANK_IMAGE_URL = "ExtjsLib/s.gif"; </script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.Panel', {
renderTo: 'helloWorldPanel',
height: 200,
width: 600,
title: 'Hello world',
html: 'First Ext JS Hello World Program'
});
});
</script>
</head>
<body>
<div id="helloWorldPanel" />
</body>
</html>
What's wrong in my code.I am using ExtJS 3.4.1 version and I have referred the Extjs library files locally from 'ExtLib' folder. Its displaying just the blank page as output. please help.
This line:
<!-- locally referred ExtJS library files
should be this
<!-- locally referred ExtJS library files -->
If you don't close the comment everything is a comment.
Use Library Ext.all.debug.js instead of ext.base.js.
I'm currently working on a project using Angular 1.1.5.
Upgrading Angular is not an option for now.
We would like to implement a rich HTML5 WYSIWYG-editor and dicided to give Froala a try, as it meets our requirements and the docs of angular-froala state that it should work with all versions of Angular >=1.0 .
I have made a POC on Plunker that uses Angular 1.1.5.
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<head>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<!-- Include Font Awesome. -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg=="
crossorigin="anonymous">
<!-- Include Froala Editor styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/froala_editor.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/froala_style.min.css" />
<!-- Include Froala Editor Plugins styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/char_counter.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/code_view.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/colors.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/emoticons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/file.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/fullscreen.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/image_manager.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/image.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/line_breaker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/table.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/video.css">
<!-- Include Froala Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/froala_editor.min.js"></script>
<!-- Include Froala Editor Plugins -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/align.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/char_counter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/code_beautifier.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/code_view.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/colors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/emoticons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/entities.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/file.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/font_family.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/font_size.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/fullscreen.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/image_manager.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/inline_style.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/line_breaker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/link.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/lists.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/paragraph_format.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/paragraph_style.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/quote.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/save.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/video.min.js"></script>
<!-- End Froala -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js"></script>
<script src="angular-froala.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="app.css">
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<div class="sample">
<h2>Sample 2: Full Editor</h2>
<textarea id="froala-sample-2" froala ng-model="sample2Text"></textarea>
<h4>HTML Content:</h4> {{sample2Text}}
</div>
</body>
</html>
everything seems to work fine except the most important part, the data-binding.
Upgrading the Angular version to 1.5.0 fixes the issue in the POC. But as mentioned that is not an option in my case.
Is this a bug? Is the documentation of froala-angular outdated?
Is there some kind of workaround besides upgrading Angular?
Or am I simply missing something here?
There seems to be an issue with this version of Angular when trying to use ngModel in a directive.
https://github.com/angular/angular.js/issues/1924
When ngModel directive is used on an element that represents a component (implemented via a directive with isolate scope), ngModel is locked into this isolate scope and in order to get out and make ngModel useful the ngModel expression has to be prefixed with $parent.
As suggested in this thread I tried using the $parent prefix and could notice one way data-binding finding place.
<textarea id="froala-sample-2" froala ng-model="$parent.sample2Text"></textarea>
To get my model to be updated, I had to call $apply() in the froala-directive which forces a $digest().
ctrl.updateModelView = function () {
var returnedHtml = element.froalaEditor('html.get');
if (angular.isString(returnedHtml)) {
scope.$apply(function() {
ngModel.$setViewValue(returnedHtml);
})
}
};
I updated my POC on plunker for those who want to see it running.
I know this post is old, but for anyone looking for a solution, I fixed the issue by changing from:
<textarea froala="froalaOptions" ng-model="myHtml"></textarea>
to this:
<textarea froala="froalaOptions" ng-model="$parent.myHtml"></textarea>
I just started to explore react and trying to understand how do I use react-bootstrap if is installed over bower I just followed the getting started part but I do not really understand how does should work.
here I have my markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="styles/main.css" rel="stylesheet">
<script src="vendor/react/react.js"></script>
<script src="vendor/react-bootstrap/react-bootstrap.js"></script>
<script src="vendor/react/JSXTransformer.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script>
var Alert = ReactBootstrap.Alert;
console.log(Alert)
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
How do I generate bootsrap component with this package?
Update
I think I got it but I'm not sure if I use it right so in my markup
<script>
var Alert = ReactBootstrap.Alert;
</script>
<script src="components/Alert.js"></script>
Alert.js is the compiled jsx
const alertInstance = (
<Alert bsStyle='warning'>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</Alert>
);
React.render(alertInstance, document.body);
#dmasi mentioned it right in comments. This looks like a namespace issue and its missing from the examples mentioned on react-bootstrap website.
Here is an example of using Bootstrap's ButtonGroup via React-Bootstrap. You can adopt a similar approach for your code.
<h2>React-Bootstrap Testing</h2>
<div id="myBtn"></div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.25.1/react-bootstrap.js"></script>
<script type="text/jsx">
var MyReactBootstrapButton = React.createClass({
render: function() {
var ButtonGroup = ReactBootstrap.ButtonGroup,
Button = ReactBootstrap.Button;
return (<div>
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</div>);
}
});
React.render(<MyReactBootstrapButton />, document.getElementById("myBtn"));
</script>
Working Fiddle link: fiddle
I am using openlayers 3 (http://openlayers.org/) and i am trying to load an osm file in my map. In the old version of openlayers this task is very simple (http://wiki.openstreetmap.org/wiki/OpenLayers_osm_file_example) but now using openlayers 3 i cannot do a similar thing.
Any suggestion?
A Simple "OpenLayers 3" (Open Street Maps) Example
If you are trying to use OpenLayers 3 you might try using the https://openlayers.org/en/latest/doc/quickstart.html example it works locally really well and is fairly simple JavaScript.
OpenLayers (Open Street Maps)
uses the following two files in the code...
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/build/ol.js"></script>
<link rel="stylesheet"
href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/css/ol.css">
https://openlayers.org/en/latest/doc/quickstart.html
Here is the code from the above example if you need to test it out locally on your computer.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
I'm implementing a site that is using Videogular to play the videos as it integrates nicely with the rest of the AngularJS within the site. Every file that is needed appears to be in the correct location in the path but the end result is only the total time, the elapsed time, and the elapsed time bar are shown.
Now I now the controls are there as if I hover over where the volume control should be the volume appears.
I'm testing in Chrome Version 32.0.1700.107. I think I followed the demo to the letter.
This is how I"m referencing the specific style sheets
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/offcanvas.css">
<link rel="stylesheet" href="css/videogular/videogular.css">
<link rel="stylesheet" href="css/app2.css"/>
This is how I'm pulling in the js files. Not shown are inclusion of jquery, bootstrap, and offcanvas js files.
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="js/videogular/videogular.js" type="text/javascript"></script>
<script src="js/videogular/plugins/controls.js" type="text/javascript"></script>
<script src="js/videogular/plugins/overlay-play.js" type="text/javascript"></script>
<script src="js/videogular/plugins/buffering.js" type="text/javascript"></script>
<script src="js/videogular/plugins/poster.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
I even used the same config as the demo
$scope.config = {
width: 640,
height: 360,
autoHide: false,
autoPlay: true,
responsive: true,
theme: {
url: "css/videogular/videogular.css",
playIcon: "",
pauseIcon: "",
volumeLevel3Icon: "",
volumeLevel2Icon: "",
volumeLevel1Icon: "",
volumeLevel0Icon: "",
muteIcon: "",
enterFullScreenIcon: "",
exitFullScreenIcon: ""
}
Finally my directory structure is this:
app
css
videogular
fonts
icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff
videogular.css
img
js
videogular
plugins
buffering.js
controls.js
overlay-play.js
poster.js
videogular.js
lib
partials
videos
views
videogular
plugins
buffering
buffering.html
controls
controls.html
full-screen-button.html
mute-button.html
play-pause-button.html
volume-bar.html
overlay-play
overlay-play.html
index.html
Now I'm certain I'm missing something but I can't see it. Any help?
So I figured it out. Based on the comment from elecash to the question that everything looked correct I compared everything to the demo. As it turns out my mistake was getting the icomoon font from the icomoon website and not the demo. Without the unicode definitions defined in the icomoon.svg it had no means of knowing the correct glyphy to display eventhough it was correctly defined in the config correctly. A quick download of the font files and restarting of the server and everything rendered correctly.