SAPUI5 - FilterBar - setVisible not working - filter

I'm using sap.ui.comp.filterbar.FilterBar Control on a project. Everything works fine, except when I try to hide this Control.
var oFilterBar = new sap.ui.comp.filterbar.FilterBar("filterBar",{
reset: oController.handleOnReset,
search: oController.handleOnSearch,
showRestoreOnFB: true,
showClearOnFB: true,
showRestoreButton: true,
showClearButton: true,
...
});
oFilterBar.setVisible(false);
I'm getting the following error:
Uncaught TypeError: oFilterBar.setVisible is not a function
Since this property is being inherited from sap.ui.core.Control class, this should work and I think it has nothing to do with versions either (I'm using 1.24).

It has something to do with the version.
In SAPUI5 1.28[1] the property visible was moved to sap.ui.core.Control so any Control extending it would have this property as well.
If you are using an earlier version only Control that implement this property themselves can be made invisible.
You could however extend the control you are using to include this property:
sap.ui.comp.filterbar.FilterBar.extend("my.FilterBar", {
metadata: {
properties: {
visible: {
type: "boolean",
group: "Appearance"
}
}
},
renderer: function (oRm, oControl) {
if (oControl.getVisible()) {
sap.ui.comp.filterbar.FilterBarRenderer.render(oRm, oControl);
} else {
// Handle invisibility
}
}
});

Related

`page_objects_path` field doesn't work in nightwatch.config.js

I use Page Objects in nightwatch, I config the page_objects_path in nightwatch.conf.js, but when I reference these elements defined, got error. I don't know why.I use vue-cli to build the project.
Here's my configuration:
nightwatch.conf.js
...
page_objects_path: 'test/e2e/pages',
...
The page object file register.js:
module.exports = {
elements: {
genderField: '.common-picker:first-child',
genderPicker: '.picker',
genderOptionLast: '.picker-item:last-child',
genderPickerConfirmButton: '.picker-toolbar span:last-child',
genderPickerCancelButton: '.picker-toolbar span:first-child'
}
}
Using the page object in test files:
'select a gender option': function (browser) {
browser
.assert.hidden('#genderPicker')
.click('#genderField')
.pause(1000)
.click('#genderOptionLast')
.click('#genderPickerConfirmButton')
.assert.containsText('#genderField', '女士')
.pause(1000)
.end()
}
Error info:
The Page Object File should have the keyword selector for every element.
module.exports = {
elements: {
genderField: {
selector: '.common-picker:first-child'
},
genderPicker: {
selector: '.picker'
},
genderOptionLast: {
selector: '.picker-item:last-child'
},
genderPickerConfirmButton: {
selector: '.picker-toolbar span:last-child'
},
genderPickerCancelButton: {
selector: '.picker-toolbar span:first-child'
}
}
}
You need to define your page object as a constant at the top of the test, and then call the elements from the registerPage object:
'select a gender option': function (browser) {
const registerPage = browser.page.register();
registerPage.assert.hidden('#genderPicker')
registerPage.click('#genderField')
browser.pause(1000)
registerPage.click('#genderOptionLast')
registerPage.click('#genderPickerConfirmButton')
registerPage.assert.containsText('#genderField', '女士')
browser.pause(1000)
browser.end()
}
You don't need selectors in your page objects if you're using CSS for everything (which it looks like you are).
Source: http://nightwatchjs.org/guide#page-objects

Trouble getting Ember Validations to work

Since Ember doesn't support form validation out of the box (as of this writing anyway), I am looking for a way to validate forms. I came across Dockyards ember-validations and the consensus seems to be that this is the goto module for form validation in EmberJS.
I'm trying to get it to work, but I'm having some trouble getting started.
I'm not using Ember CLI as referenced in the docs, so I have downloaded a compiled ember-validations.js from http://builds.dockyard.com/ and have included ember-validations.js in my apps js file.
The docs now say to pass the validations.mixin into a controller:
So I'm using:
App.MemberaddController = App.FamilyController.extend(EmberValidations.Mixin,{
needs: ["family","notifications"],
familyController: Em.computed.alias('controllers.family'),
notifications: Em.computed.alias('controllers.notifications'),
validations: {
firstname: {
presence: true,
presence : {message: 'mag niet leeg zijn'}
}
},
init: function() {
this.set('familyController.pageTitle', "Gezinslid toevoegen");
},
<etc...>
}
However in the browser I'm seeing
Uncaught ReferenceError: EmberValidations is not defined
Looking at the ember-validations.js I can see the mixin file being referenced as Ember.Validations.Mixin.
So when I pass that to my controller, like
App.MemberaddController = App.FamilyController.extend(Ember.Validations.Mixin,{
I'm seeing:
Error while processing route: memberadd Cannot read property 'invoke' of undefined TypeError: Cannot read property 'invoke' of undefined
In the ember-validations.js file at the _validate function.
What am I doing wrong here?
First on the off chance this is a new project and you have the option to use ember-cli I recommend you do so, the community is moving in that direction.
That said I think your bug is in here
validations: {
firstname: {
presence: true, <-- uneeded
presence <-- remove this space: {message: 'mag niet leeg zijn'}
}
},
should look like this
validations: {
firstname: {
presence: {message: 'mag niet leeg zijn'}
}
},

Groovy SwingBuilder() apple.awt.CToolkit exception

I am using newest Mac OS X and I am creating a GUI element inside a Gradle file. I am currently using jdk1.7.0_55 and I have imported groovy.swing.SwingBuilder, when I run the project I am getting the following error:
java.awt.AWTError: "Toolkit not found: apple.awt.CToolkit
I have tried running the script as a headless server using System.setProperty('java.awt.headless', 'true')
I would like to have a solution that I can include directly in the Gradle project file, instead of trying to figure out what is in my accesibilities.properties file (that may not exist on a particular system, like it does not on my system).
Also the project must use an internal solution, external libraries are not allowed.
Would really appreciate any help on this matter.
Edited: Sample Code
gradle.taskGraph.whenReady { taskGraph ->
if(taskGraph.hasTask(':CustomApp:assembleRelease')) {
def pass = ''
if(System.console() == null) {
new SwingBuilder().edt { // Error occurs here.
dialog(modal: true,
alwaysOnTop: true,
resizable: false,
locationRelativeTo: null,
pack: true,
show: true
)
{
vbox {
label(text: "Enter password:")
input = passwordField()
button(defaultButton: true, text: 'OK', actionPerformed: {
pass = input.password;
dispose();
})
}
}
}
}
}
I've faced same issue with Android Studio 0.8.6 and solved it with custom gradle installation.
Just downloaded gradle 1.12 and set path to it in preferences.
The question is a few years old, but with the following gradle build file (which is essentially the same as the OPs):
import groovy.swing.SwingBuilder
task doit {}
gradle.taskGraph.whenReady { taskGraph ->
if(taskGraph.hasTask(doit)) {
def pass = ''
new SwingBuilder().edt { // Error occurs here.
dialog(modal: true,
alwaysOnTop: true,
resizable: false,
locationRelativeTo: null,
pack: true,
show: true)
{ vbox
{ label(text: "Enter password:")
input = passwordField()
button(defaultButton: true, text: 'OK', actionPerformed: {
pass = input.password;
dispose();
})
}
}
}
}
}
executing:
~> gradle doit
results in the following screen:
in other words, at least with this version of gradle, operating system, java etc this seems to work.

Getting a list of markers with jQuery/gmap3 when using the Directions service

I started using the gmap3 jQuery plugin today and I'm having issues with getting a list of markers.
As long as I add all the markers manually (with addMarker or addMarkers) all works well and the:
.gmap3({action:'get', name:'marker', all:true});
gives proper list of markers.
However, if i use the action:getRoute and the addDirectionsRenderer - the markers are not 'gettable' by code pasted above.
My code for showing the directions is below - it works and shows them properly on the map. Only issue is that I cannot get any markers out of it, so I can process them after creation.
var optionDirections = {
origin: startcoord,
destination: stopcoord,
waypoints: coordsAllGoogleStyle,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
....
.gmap3({
action:'getRoute',
options: optionDirections,
callback: function(results) {
if (!results) { alert('nodata'); return; }
$(this).gmap3(
{
action:'addDirectionsRenderer',
options:{
preserveViewport: false,
draggable: false,
directions:results
}
}
);
var res = $(this).gmap3({action:'get', name:'marker', all:true});
alert('Found: '+res.length+' markers');
}
});
to make things simple, I contacted the author of this api and it kind of not support it anymore because "now people use angular"
nice is'nt it...

showing a single qtip when different events of different targets are triggered?

I have few input and select controls in my form that each of them have a small question mark icon in front of them that will show a tool tip when mouse is over that gif with help of excellent jquery jquery.qtip-1.0.0-rc3.js(with jquery-1.3.2.min.js) plug-in like this :
$('#questionmark1').qtip({
content: 'sample help content'
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
});
I also want to show tool tip when ever that corresponding input field get focused and hide when get blurred . the following one do the trick but without showing the tool tip when mouse is over that gif
$('#questionmark1').qtip({
content: 'sample help content'
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
, show: { when: { target: $('#input1'), event: 'focus'} }
, hide: { when: { target: $('#input1'), event: 'blur'} }
});
but the problem is that something like does not work.
show: { when: { target: $('#input1'), event: 'focus'},
{ target: $('#questionmark1'), event: 'focus'} }
in short the preceding first 2 blocks of code works fine and i can add both to achieve my goal but i want do it the right way .
how can i target multiple targets'events for showing a single tool tip ?
You don't have to wire up all of the show/hide events inside of the call to qtip(). I'd define the mouseover event as the event that triggers the qtip by default:
$('#questionmark1').qtip({
content: {text:'sample help content', prerender: true}
, style: { name: 'sampleStyle' }
, position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }
, show: { when: 'mouseover' }
});
(Note the prerender option I added)
And then manually define event handlers for the input that you want to show the qtip for:
$("#input1").bind("focusin", function() {
$("#questionmark1").qtip("show");
}).bind("blur", function() {
$("#" + this.id + "-tip").qtip("hide");
});
See an example here: http://jsfiddle.net/andrewwhitaker/wCgAM/
The only odd thing is that you can make both tooltips show up by focusing the first input and then mousing over the second question mark. This is probably easy enough to fix though.
Hope that helps.

Resources