We are using qooxdoo 5.0.2 and selenium for our functional tests.
We try to find a way in selenium to know (html/style/xpath/...) if a QX button is enable/disable.
When We inspect both QX buttons (enable & disable), it seems there is no difference.
Any way to distinguish that, please ?
Thanks in advance for your help.
As far as I can see, information on the "enabled" state of the buttons is only kept by the qooxdoo object in the execution context, not on the level of the DOM. Can Selenium access the execution context, like more modern Tools like Puppeteer or Playwright? Alternatively, would you could consider monkey-patching qx.ui.core.Widget._applyEnabled() in order to set a custom attribute (such as data-qx-enabled="false") on this.getContentElement().getDomElement(). If you think a more general solution is necessary, we are happy to review a PR that would integrate it in v6.
Related
I'm using the MGT with React. I am trying to style the component in the same fashion as the rest of my application (reactstrap).
I've found the custom CSS properties you can set, which has got me 90% of the way there, but I need to be able to adjust the margins of the control (margin-left: -3px) and I can't seem to do this no matter what I try.
I think the answer to my problem lies in using the templating functionality but the documentation is a bit lacking for this.
Any ideas where I should start with this? Am I on the right track? Does anyone know of an example of using templates with the PersonPicker component?
Without specifics, there definitely might some css properties that we haven't exposed yet. I don't think there would be any recommended code to use here, instead I'd highly suggest opening a an issue on our github repo as a feature request. We can then work with you on improving the toolkit with these properties.
LayoutAnimation is a part of React Native that automatically animates components when the view is rendered.
The official documentation is here:
https://reactnative.dev/docs/layoutanimation
However, the examples in the docs do not work. Objects in the examples that are supposed to animate just jump from the starting position to the end position.
Here is an example of one of the Snacks in the documentation that does not appear to animate:
https://snack.expo.io/91MUQd5IH
This would lead one to the conclusion that this API is just not supported or no longer functional.
Is it the case that Layout Animation just does not work? Or if it does work under some circumstances, please share a link containing a working Snack / Gist with an extremely simple but working LayoutAnimation example.
UPDATE: LayoutAnimation possibly does not support web. Does anyone have any knowledge of this or who can refer the reader to an explanation in the docs?
LayoutAnimation is currently not supported properly in react-native-web. You can see that here: https://github.com/necolas/react-native-web#modules and here https://github.com/necolas/react-native-web/issues/1613, https://github.com/necolas/react-native-web/issues/1056. It doesn't seem to be a priority for the project at the moment so I wouldn't count on it being implemented.
On iOS/Android it's a different story. If we look here: https://reactnative.dev/docs/layoutanimation/ you can actually see this working properly by pressing play and selecting iOS for example.
On Android we have support as well but it might not work/crash. If you look over the issues open for react-native, you will see a lot of them mention issues with LayoutAnimation and Android. E.g. it crashes under certain conditions on Android: https://github.com/facebook/react-native/issues/27552 and https://github.com/facebook/react-native/issues/29919.
I don't recommend using LayoutAnimation, especially on Android, as it is highly experimental and might crash on some devices without warning.
If you want to try some more interesting animations with better performance, I recommend you try using the Animated API from ReactNative or the newer react-native-reanimated which is faster, more modern but still in alpha (I'm talking about the current, v2, version).
By my test the given link in the question post works properly:
Also, I test it on my friend's iPhone and it's worked properly too. But many of React Native features don't work properly on Web export. For example animations on RNW (React Native Web) works on Android/iOS exports but not on Web exports.
For such web situations, you should decouple the web component and make a separate file then write the desired animation on it.
I have created an website/application using Angular2. The infrastructure is all set, I have routing completed, sass being processed etc.
I have sections (components) on this website that will display current web standards for our designs (buttons, forms, copy). The purpose of this site is to give our developers a copy/paste solution for markup and sass.
We will most likely create our own css library but they will still need a good visual reference of what each class does and a copy/paste solution.
I know how to develop all the standards, what I don't know how to do is have the DOM display options for the user to copy/paste the code. I could manually enter the code into or tags but this will be hard to maintain and not very clean approach. I'd like to find some solution that will utilize my code and create these tags at run time.
Googling this question leads down the road of using living style guide generators, which i don't want to use... why? I like having the functionality of controlling my own layout and scaling my standards as I see fit with our own technology.
Any ideas?
After exploring this even further I ended circling yet again on documentation tools (KSS) where I would need to rebuild my entire style guide for this functionality using markdown and or JDOCs.
Solution!
Use CodePen, its free to signup however there are some nice to have features for a monthly fee. I easily created my code here using SASS, HTML and CSS libraries. CodePen has a great EMBED feature whereas I could copy/paste html or iframe right to my styleguide.
Problem is now solved, and we have have a dynamic Web & UI Styleguide.
Hope this method helps others in my situation.
Is there a way to directly manipulate styles in the chrome dev tools while debugging in React-Native like there is for manipulating the styles of a webpage (like below)?
Yes, given the fact, that style is just a property in react-native and you can edit props on the fly with React chrome extension, it should be possible. Should, because I've had hard time making it work, maybe you'll have a better luck :) However I've seen it work in some video...
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Try this: https://github.com/jhen0409/react-native-debugger
Go to debugger integration and look for elemental inspector, and there i believe you can change style in runtime.
i want my websit ui of flash or silverlight quality, but want it to work on any browser by default, i.e not asking for installing flash plugin. is it possible ? what technology should i look at ?
Well, it depends on what kind of "UI quality" you have in mind.
If you want something static, pure HTML will do the job.
If you want dynamic UI, HTML + Javascript is probably your best option right now (AJAX if you need to deal with the server without refreshing the whole page).
HTML 5 will also offer you more UI possibilities if you don't mind waiting for it.
However, some plugins features (like 3D acceleration) will be difficult to "emulate" even with HTML 5, so before choosing which technology is suitable for you, defines whats your real UI needs are (for now and futur development).
you could use javascript with a library such as jQuery to help. But there are things the both Flash and SilverLight can do that html+javascript just cannot do.
HTML5 is around the corner...Which to some extent can do a lot more...