I am working with the Google Web Toolkit wrapper for OpenLayers. I'm attempting to add a WMS layer to a map, but I need to parse a Capabilities document in order to get the available layer names. I see that a WMSCapabilities class is available in OpenLayers http://dev.openlayers.org/releases/OpenLayers-2.12/doc/apidocs/files/OpenLayers/Format/WMSCapabilities-js.html, but I can't seem to find the implementation in GWT. Is this feature not yet available, or is it hiding, undocumented somewhere? Thanks in advance!
I still don't know if the GWT implementation is available, but it's actually rather easy to wrap native javascript code in Java. Here is my solution:
import com.google.gwt.core.client.JsArrayString;
native JsArrayString getLayerNames(String capDoc) /*-{
var toReturn = [];
var parser = new $wnd.OpenLayers.Format.WMSCapabilities();
var doc = parser.read(capDoc);
for (var i in doc.capability["layers"]) {
toReturn.push(doc.capability["layers"][i].name);
}
return toReturn;
}-*/;
You can then access them using:
JsArrayString layers = getLayerNames(getMyCapabilitiesDocumentAsString());
for (int i = 0; i < layers.length(); i++) {
Window.alert("A layer name is " + layers.get(i));
}
The variable doc is a javascript array containing the entire contents of the capabilities document, so it's possible to access more than just the layer names; simply pull out what you need. Also, it's probably better to create a single parser rather than create a new one each time the method is called, but that's a different exercise ;)
Related
I am very new to syncfusion controls for mvc. While exploring how to set dynamic datasource to grid, I came across this line of javascript code which I cannot understand. I have been through the javascript api docs for ej grid but couldn't find the meaning.
var obj = $("#Grid").ejGrid("instance");
If someone can explain the meaning and point out some reference documentation, I will be highly grateful.
The example I came across
https://help.syncfusion.com/aspnetmvc/grid/how-to
The javascript api I have been through
https://help.syncfusion.com/api/js/ejgrid#members:datasource
P.s: I know from a comment I came across that this has something to do with current instance of ej grid but I would like a solid understanding via a reference so I can understand.
From my little experience with Syncfusion controls the documentation explaining how to perform tasks is not well stated. If you have a license you can ask questions in their forum but I can tell you what little I learned perusing their forum.
In their JS 1 version
var obj = $("#Grid").ejGrid("instance");
and in their JS 2 version
var obj = document.getElementById('Grid').ej2_instances[0];
The variable obj appears to get an object reference to the grid identified by the id Grid. I am not sure what the instance value refers to other than the examples in the documentation show it and it works when it is used.
Not sure if I was much help.
In the Below code example Grid – Grid ID and you can take the Grid instance using the above code example. From the instance you can get the details regarding the column, dataSource, filterSettings, sortSettings etc currently applied to ejGrid. We have given support to customize the Grid using several public method. You can call those method by taking the Grid instance.
#(Html.EJ().Grid<EJGrid.Models.Order>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.Columns(col =>
{ col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("Freight").HeaderText("Freight").Format("{0:c}").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();
col.Field("Child.Test").HeaderText("TEst").Format("{0:c}").Width(90).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add();
})
)
<script>
var obj = $("#Grid").ejGrid("instance");
var value = $("#colValue").val();
//Add custom parameter to the server
var query = new ej.Query().addParams("EmployeeID", value);
//Creating ejDataManager with UrlAdaptor
var dataManager = ej.DataManager({ url: "/Home/GetData", adaptor: new ej.UrlAdaptor() });
var promise = dataManager.executeQuery(query); promise.done(function (e) {
//Assign the result to the grid dataSource using "dataSource" method.
obj.dataSource(e.result);
</script>
To update the Grid, you can use dataSource() method. To call that method you need to take the Grid instance and call that method.
Refer the below API documentation for your reference
https://help.syncfusion.com/api/js/ejgrid#methods:datasource - used to update the Grid dataSource dynamically
https://help.syncfusion.com/api/js/ejgrid#members:datasource - returns the Grid dataSource.
Please get back to us if you have further queries.
Using WinJS, while looping through a directory, how to retrieve only images in that particular directory and ignoring any other file extension, including the DoubleDots .. and the SingleDot . etc?
Something like:
var dir = Windows.Storage.KnownFolders.picturesLibrary;
dir.getFilesAsync().done(function (filesFound) {
for(var i=0; i < filesFound.length; i++){}
if(filesFound[i] IS_REALLY_AN_IMAGE_(jpeg,jpg,png,gif Only)){
//Retrieve it now!
}else{
//Escape it.
}
}})
Instead of trying to process pathnames, it will work much better to use a file query, which lets the file system do the search/filtering for you. A query also allows you to listen for the query's contentschanged event if you want to dynamically track the folder contents rather than explicitly enumerating again.
A query is created via StorageFolder.createFileQuery, createFolderQuery, or other variants. In your particular case, where you want to filter by file types, you can use createFileQueryWithOptions. This function takes a QueryOptions object which you can initialize with an array of file types. For example:
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
var options = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName, [".jpg", ".jpeg", ".png", ".gif"]);
//Could also use orderByDate instead of orderByName
if (picturesLibrary.areQueryOptionsSupported(options)) {
var query = picturesLibrary.createFileQueryWithOptions(options);
showResults(query.getFilesAsync());
}
where showResults is some function that takes the promise from query.getFilesAsync and iterates as needed.
I go into this subject at length in Chapter 11 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, in the section "Folders and Folder Queries". Also refer to the Programmatic file search sample, as I do in the book.
When you want to display the image files, be sure to use thumbnails instead of loading the whole image (images are typically much larger than a display). That is, for each StorageFile, call its getThumbnailAsync or getScaledImageAsThumbnailAsync method. Pass the resulting thumbnail (blob) to URL.createObjectURL which returns a URL you can assign to an img.src attribute. Or you can use a WinJS.UI.ListView control, but that's another topic altogether (see Chapter 7 of my book).
Wasn't sure how to properly title my question, I guess in my case it can also be titled "DOM manipulation not being detected by the scope", but it all depends on the approach of my problem.
To start off, I followed an official example on AngularJS main website with the Projects app which connects with Mongolab. The only difference is I want to add a file input, that reads file name and its lastModifiedDate properties and then applies those values to my form. To make file input work I followed this example here.
I made it work, but the problem is that when values get applied to my form scope is not picking up the changes.
I am doing DOM manipulation in my .apply() function and using $compile too, but something is missing. Or perhaps there's an easier way altogether without doing DOM manipulation?
Here's what I have so far, please take a look at this plunker - http://plnkr.co/edit/mkc4K4?p=preview
(Just click on the plus sign icon to add new entry, then try choosing a file.)
You need to add a watch statement in the CreateCtrl
function CreateCtrl($scope, $location, Movie) {
$scope.inputfile = {};
$scope.movie = {};
$scope.$watch('inputfile.file', function(value){
$scope.movie.filename = value ? value.name : '';
$scope.movie.dateadded = value ? value.lastModifiedDate : '';
})
$scope.save = function() {
Movie.save($scope.movie, function(movie) {
$location.path('/edit/' + movie._id.$oid);
});
};
}
Demo: Sample
I am working on a project that uses GWT 2.4 and gwt-maps.jar to create a MapWidget and place it in a panel with various controls. This all works fine.
I would like to give my users the ability to draw a polyline on the map and use the getLength method in Polyline to determine the length of the drawn polyline. I have done this before in ActionScript and it was a bit of a pain in the neck (the rubber-banding between the last clicked point and the mouse in particular) and I was hoping not to have to do that again.
The drawing manager looks like it might be a good fit (for the drawing part at least) but it is in v3 of the API and the gwt-maps.jar code only is at v2. So I thought I might write some JavaScript and call out from GWT using JSNI, something along the lines of (in wibble.html - my top-level HTML file):
var dM = new google.maps.drawing.DrawingManager( ...
function showDM(map) {
dM.setMap(map);
dM.setOptions({
drawingControl: true
});
And then (in Wobble.java):
private MapWidget map = new MapWidget( ...
private native void showIt(final MapWidget map) /*-{
$wnd.showDM(map);
}-*/;
I have tried passing the MapWidget and its peer but in both cases I get an invalid value error when calling setMap.
Has anybody tried (and succeeded) in doing this or am I barkig up the wrong tree?
Thanks,
SO
First of all, I only have experience with GWT and GWT-JS communication. Not Google APIs.
Now:
Looks like you are passing a GWT object (compiled javscript object) to DrawingManager. The problem is the DrawingManager API receives "nice javascript objects" (not objects with obfuscated methods).
If you want to pass an HTML Element is ok (but then, you must pass widget.getElement() that really is a <div> object (by example).
Solution
Indeed GMaps API docs says you must pass a Map object from the GMap API. You create that map with an element that will be the canvas.
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
If you want to use your MapWidget as the map canvas then you can use its HTML Element.
In GWT:
private native void showIt(final MapWidget map) /*-{
$wnd.showDM(map.getElement()); // use mapwidget's element as canvas
}-*/;
In javascript:
function showDM(canvasToUse) {
// TODO: define myOptions :)
var map = new google.maps.Map(canvasToUse, myOptions);
dM.setMap(map);
dM.setOptions({
drawingControl: true
});
Disclaimer
It's only based on my experience with GWT and JSNI. I didn't try it nor have experience with GMaps or DrawingManager. You should check what I say and tell me if I had luck :)
Hope it helps!
I'm trying to populate a GXT Grid using data retrieved from an online API (for instance, going to www.example.com/documents returns a JSON array of documents). In addition, I need to paginate the result.
I've read all the various blogs and tutorials, but most of them populate the pagination proxy using something like TestData.GetDocuments(). However, I want to get that info using HTTP GET.
I've managed to populate a grid, but without pagination, using a RequestBuilder + proxy + reader + loader. But it seems as though the actual loading of the data is "put off" until some hidden stage deep inside the GXT code. Pagination requires that data from the start, so I'm not sure what to do.
Can someone provide a simple code example which does what I need?
Thank you.
I managed to get this going, here is what I did:
First I defined the proxy and loader for my data along with the paging toolbat:
private PagingModelMemoryProxy proxy;
private PagingLoader<PagingLoadResult<ModelData>> loader;
private PagingToolBar toolBar;
Next is the creation of each one, initializing with an empty ArrayList.
proxy = new PagingModelMemoryProxy(new ArrayList<EquipmentModel>());
loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy);
loader.setRemoteSort(true);
toolBar = new PagingToolBar(100);
toolBar.bind(loader);
loader.load(0, 100);
Last, I have a set method in my view that gets called when the AJAX call is complete, but you could trigger it anywhere. Here is my entire set method, Equipment and EquipmentModel are my database and view models respectively.
public void setEquipmentData(List<Equipment> data)
{
Collections.sort(data);
// build a list of models to be loaded
List<EquipmentModel> models = new ArrayList<EquipmentModel>();
for (Equipment equipment : data)
{
EquipmentModel model = new EquipmentModel(equipment);
models.add(model);
}
// load the list of models into the proxy and reconfigure the grid to
// refresh display.
proxy.setData(models);
ListStore<EquipmentModel> equipmentStore = new ListStore<EquipmentModel>(loader);
equipmentGrid.reconfigure(equipmentStore, equipmentColumnModel);
loader.load(0, 100);
}
The key here for me was re-creating the store with the same loader, the column model was pre-created and gets reused.