this is my code
Info.newInfoPopUp = function (obj) {
var table = createInfo(obj);
popup = new OpenLayers.Popup.FramedCloud(
obj.name,
obj.lonlat,
new OpenLayers.Size(),
'<table class="info-table popup">' + table.html() + '</table>',
null,
true,
obj.closeCallback
);
popup.minSize =new OpenLayers.Size(300,155);
popup.maxSize = new OpenLayers.Size(800,200);
return popup;
};
the popup appears sometimes whith a vertical scroll-bar
any ideas?
The OpenLayers.Size class constructor should have parameters width and height.
Try this:
var popup = new OpenLayers.Popup.FramedCloud(
obj.name,
obj.lonlat,
new OpenLayers.Size(100,100),
tablHtml,
null,
true,
obj.closeCallback
);
Related
I am trying to create a screen on which I have a Panel. The main Panel has another Panel and this Panel has a Grid which has four HBoxes, and each HBox finally has a Button.
onInit:function(){
oMainPanel.removeAllContent();
var oHbox1 = new sap.m.HBox(jQuery.sap.uid());
var oHbox2 = new sap.m.HBox(jQuery.sap.uid());
var oHbox3 = new sap.m.HBox(jQuery.sap.uid());
var oHbox4 = new sap.m.HBox(jQuery.sap.uid());
var oPanel ;
var oGrid;
for (var i = 0; i < 4; i++) {
oGrid = new sap.ui.layout.Grid(jQuery.sap.uid(),{
hSpacing: 1,
vSpacing: 1,
content: [oHbox1,oHbox2,oHbox3,oHbox4]
});
oPanel = new sap.m.Panel(jQuery.sap.uid(),{
headerText: "Some Text",
expandable: true,
expanded: true,
width:"100%",
content:[oGrid]
});
jQuery.sap.delayedCall(100, this, function() {
});
oMainPanel.addContent(oPanel);
}
I can see the content in each HBox, but only for the last Panel. I think these are being overlapped. How can I display the content of all the HBoxes in all Panels?.
You are trying to use the same instances of HBox as content of different Grids. You need to create a new instance for each Panel.
Try doing something like:
oGrid = new sap.ui.layout.Grid(jQuery.sap.uid(),{
hSpacing: 1,
vSpacing: 1,
content: [new sap.m.HBox(), new sap.m.HBox(),
new sap.m.HBox(), new sap.m.HBox()]
or initialize your variables (oHbox1, oHbox2, etc) inside the loop
I solved this problem by using the forEach instead of for loop.
I create several treetables, each is placed on it's own div.
The main reproducable problem i've got:
creating the tables directly -> everything looks fine (see image 1)
creating the tables within an asynchron jQuery call: the first added table gets always a vertical scrollbar (see image 2)
here is the code:
var oData = { root: ...}
// code for image 2
jQuery.getJSON(url, function (result) {
createTable(oData['table1'], 'table1')
createTable(oData['table2'], 'table2')
})
// code for image 1
createTable(oData['table1'], 'table1')
createTable(oData['table2'], 'table2')
function createTable(oData, codeSample){
var oTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({label: "trans_class", template: "trans_class"})
, new sap.ui.table.Column({label: "Checked", template: "checked"})
],
height: '100%',
selectionMode: sap.ui.table.SelectionMode.None,
enableColumnReordering: false,
expandFirstLevel: false,
visibleRowCount : INITIAL_ROW_COUNT_IN_TABLE,
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto,
toggleOpenState: function(oEvent) {
var isLeafExpanded = oEvent.getParameter("expanded");
if(isLeafExpanded){
oTable.setVisibleRowCount(oTable.getVisibleRowCount() + 2)
SUM_INDEX_TOGGLE = SUM_INDEX_TOGGLE + 2
}else{
oTable.setVisibleRowCount(oTable.getVisibleRowCount() - 2)
SUM_INDEX_TOGGLE = SUM_INDEX_TOGGLE - 2
}
}
})
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
oTable.setModel(oModel);
sap.ui.getCore().setModel(oModel, codeSample);
oTable.bindRows("/root");
oTable.expand(4); // expand Sum Row
//Bring the table onto the UI
oTable.placeAt(codeSample);
}
How can I fix this issue. I want that all my tables look the same.
Workaround: add a simple textField and hide it after adding the treeTable:
addSimpleHiddenTextField(HIDDEN_TEXTFIELD)
for(var i in config.TABLES){
createTableAndPlaceIt(result[i], i, config.TABLES[i])
}
hideSimpleTextField(HIDDEN_TEXTFIELD)
I am trying to place a Business Card control within an Overlay Container in UI5, after pressing an enter button. My code isn't working and I can't seem to figure out why. Any help with this is appreciated. My code is as follows:
var oButton2 = new sap.ui.commons.Button({
text : "Enter",
style: sap.ui.commons.ButtonStyle.Emph,
width: "75px",
press : function() {var oOverlayContainer = new sap.ui.ux3.OverlayContainer();
oOverlayContainer.open();
oOverlayContainer.addContent(
function() {var oVCard = new sap.suite.ui.commons.BusinessCard({
firstTitle: new sap.ui.commons.Label({id:"vcard1-name-label",text:"White, Helen",tooltip:"White, Helen"}),
iconPath: "/XMII/CM/MIIDemos/TimeAttendance/images/AtoS_sm.jpg",
secondTitle: "Sales Contact at Customer Side",
imageTooltip:"White, Helen",
width: "424px"
});
var oContentCard = new sap.ui.commons.layout.MatrixLayout({widths:["20px", "100px"]});
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({hAlign:sap.ui.commons.layout.HAlign.Center});
oCell.addContent(new sap.ui.commons.TextView({text:"Phone:"}));
oContentCard.createRow(oCell, new sap.ui.commons.TextView({text:"+41 (635) 457-2875"}));
oCell = new sap.ui.commons.layout.MatrixLayoutCell({hAlign:sap.ui.commons.layout.HAlign.Center});
oCell.addContent(new sap.ui.commons.TextView({text:"E-Mail:"}));
oContentCard.createRow(oCell, new sap.ui.commons.TextView({text:"helen.white#company.com"}));
oContentCard.createRow(new sap.ui.commons.TextView({text:"Address:"}), new sap.ui.commons.TextView({text:"Diermar-Hopp Allee 16"}));
oVCard.setContent(oContentCard);
}
);
}
})
You're passing function not its result, you should do this:
var oButton2 = new sap.ui.commons.Button({
text : "Enter",
style: sap.ui.commons.ButtonStyle.Emph,
width: "75px",
press : function() {var oOverlayContainer = new sap.ui.ux3.OverlayContainer();
oOverlayContainer.open();
oOverlayContainer.addContent(
(function() {var oVCard = new sap.suite.ui.commons.BusinessCard({
firstTitle: new sap.ui.commons.Label({id:"vcard1-name-label",text:"White, Helen",tooltip:"White, Helen"}),
iconPath: "/XMII/CM/MIIDemos/TimeAttendance/images/AtoS_sm.jpg",
secondTitle: "Sales Contact at Customer Side",
imageTooltip:"White, Helen",
width: "424px"
});
var oContentCard = new sap.ui.commons.layout.MatrixLayout({widths:["20px", "100px"]});
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({hAlign:sap.ui.commons.layout.HAlign.Center});
oCell.addContent(new sap.ui.commons.TextView({text:"Phone:"}));
oContentCard.createRow(oCell, new sap.ui.commons.TextView({text:"+41 (635) 457-2875"}));
oCell = new sap.ui.commons.layout.MatrixLayoutCell({hAlign:sap.ui.commons.layout.HAlign.Center});
oCell.addContent(new sap.ui.commons.TextView({text:"E-Mail:"}));
oContentCard.createRow(oCell, new sap.ui.commons.TextView({text:"helen.white#company.com"}));
oContentCard.createRow(new sap.ui.commons.TextView({text:"Address:"}), new sap.ui.commons.TextView({text:"Diermar-Hopp Allee 16"}));
oVCard.setContent(oContentCard);
return oVCard;
})()
);
});
Make sure you have added the following libs also:
data-sap-ui-libs="sap.ui.commons, sap.ui.ux3, sap.suite.ui.commons"
I am trying to have a click event on a pop-up in openlayers. Right now I'm doing it with a hardcoded onclick in the feature:
var vector = new OpenLayers.Layer.Vector("Points",{
eventListeners:{
'featureselected':function(evt){
var feature = evt.feature;
var popup = new OpenLayers.Popup.Anchored("popup",
OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
new OpenLayers.Size(275,71),
'<div id="pincontent" onclick="pindetails()"><h3>' + feature.attributes.title +'</h3><div style="display: none;" id="pindescription">'+ feature.attributes.content +'</div></div>',
null,
false
);
popup.imageSrc = 'img/popup.png';
popup.autoSize = false;
popup.backgroundColor = 'transparent';
var offset = {'size':new OpenLayers.Size(0,0),'offset':new OpenLayers.Pixel(-74,-10)};
popup.anchor = offset;
popup.panMapIfOutOfView = true;
popup.imageSize = new OpenLayers.Size(275,71);
popup.relativePosition = "br";
popup.calculateRelativePosition = function () {
return 'tr';
};
feature.popup = popup;
map.addPopup(popup);
//adding event listener
map.events.register('mousedown', popup, function(evt){alert('help')}, false);
},
'featureunselected':function(evt){
var feature = evt.feature;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
}
});
But the main OpenLayers div is intercepting the click so I have to click twice.. I'm not sure if there's a way to disable this. I've looked at the openLayers documentation and I'm not sure how to use their API to add an event listener for a click on a feature.
Perhaps you should add return false; after your function call in onclick to stop event propagation (which is the default).
Also have a look at the register method:
this.map.events.register('click', this.map, function handleMapClick(e) { ... }
http://dev.openlayers.org/releases/OpenLayers-2.6/doc/apidocs/files/OpenLayers/Events-js.html#OpenLayers.Events.register
It seems that evt.stopPropagation(); does not work. But using return true; in the singleclick event handler can stop the Event-Propagation from penetrating down to cascaded layers.
The info window shows ok on desktop, and if I set an alert to show the content it will show the correct html code. However, on the iPhone it will just pop a blank info window (No text within it).
Here is my code:
function showPOICategory(category) {
// Icons { ID, Image }
// Entry { Latitude, Longitude, Name, Description, iconID);
$.getJSON('ajax/poi.php?key=' + jQGMSettings.apiKey + '&c=' + category , function(data) {
$.each(data.poi, function(key, val) {
// Set current position marker
var $image = new google.maps.MarkerImage('/images/pois/'+data.icons[val.image],
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(32, 37),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(16, 37)
);
var $marker = new google.maps.Marker({
title: val.title,
icon: $image,
clickable: true,
draggable: false,
position: new google.maps.LatLng(val.latitude, val.longitude),
animation: google.maps.Animation.DROP,
map: map
});
// Info Window
if( val.info == null ) {
var $infowindow = new google.maps.InfoWindow({
content: '<div><h1>' + val.title + '</h1>Prueba</div>'
});
} else {
var $infowindow = new google.maps.InfoWindow({
content: '<div style="color:#000000;"><h1 style="font-size:14px; font-family:Helvetica; padding:0px; margin:0px;">' + val.title + '</h1>' + val.info + 'Prueba</div>',
maxWidth: 200
});
}
var $listener = google.maps.event.addListener($marker, 'click', function() {
if( infoWindow != null ) {
infoWindow.close();
}
infoWindow = $infowindow;
infoWindow.open(map,$marker);
});
// Keep track of the marker to remove it ;)
pois.push({
marker: $marker,
listener: $listener
});
});
});
}
Anyone had this problem before? I'm going nutts to find out where the problem could be located.
OK I finally was able to solve my issue but not sure if it will help you. Are you using loadHTMLString method? if so and you aren't declaring a baseURL try declaring in the call
baseURL:[NSURL URLWithString:#"/"]