I am new to NativeScript technology, while developing application I need to debug the UI component like why this textview is not showing, layout is overlapping with another or find out other distortion in UI
Thanks for your time.
As mentioned in the other answer you can use the debug mode. I think things have possibly changed a bit since that answer, because you CAN to an extent debug the UI.
1) run the app in your emulator
tns debug android --bundle for example
this will output link such as chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000
2) open the link in chrome.
Use Elements tab to view the xml tree of elements. You can alter and add attibutes to elements. example: right click on an element, click "add attribute" and add color="blue", this should change the font color to blue for the element.
<Label color="blue"...
you can view the computed CSS on the right side. However i don't think you can edit/modify the css on the right side as in web development.
here are the docs
https://docs.nativescript.org/tooling/debugging/chrome-devtools
Normally the only reason a field is off is if you are using margin with a negative value or you are putting multiple items in a absolute or grid layout cell.
To debug you can use:
tns debug ios --emulator
or
tns debug android --emulator
However using that you would be having to debug the JS code that builds the screen. You are much better off looking at the xml and understanding how layouts work to understand exactly how it lays it out. Then trying to debug what mistake you are making.
Related
I have recently inherited a web app using the EXTjs framework. I'm not really that familiar with it, but I have been learning it the best I can over the last few months. I have recently been given an assignment to update the entire application to comply with 508 Compliance, that is to say, make the application accessible for those with vision issues. I was given a deficiency list that gives examples where the software doesn't comply for various reasons. I guess I need a little help in understanding how this works. I've looked at the EXTjs documentation and it does say that it has accessibility features available in it, but I haven't really been successful in finding what to do. Those using the application are using the JAWS screen reader if that makes any difference.
A few of the things I know that I need to fix are:
Some elements need to be tagged as a heading so the screen reader can read it programmatically an to give the web page some structure.
When tabbing around a table/grid the data is read without any context/header information.
Color is used as a visual cue to indicate action(ie required field). I'm supposing this is for color blindness and some other visual cue needs to be added.
Modal windows can't be resized or moved by the keyboard.
Needs a mechanism to bypass blocks of content that are repeated on multiple pages.
Pages do not have titles(this is a single page app).
Keyboard operable UI elements do not have a visible indication of focus(radio button group doesn't show focus, even if selected one does).
Name/State of UI elements in the product can't be understood(ie the name of expand and collapse buttons are read as expand panel or collapse panel by assistive tech without context to what is being expanded or collapsed).
There are many other issues, but this gives some idea of the scope of the changes required. As I have stated above, I've done a lot of examination of the EXTjs documentation at their site as well as google searches on how to make applications more accessible. But I'm not really seeing what I need. Much of this application is just configuring EXTjs templates and then loading them with much of the meat of the application being handled by the EXTjs built in js code.
I would appreciate any help, useful sites with examples, or code snippets on how to accomplish some of this. I'm hoping that once I get started with some examples, I can just go on from there.
Thanks.
Most items come with aria support. Personally I would add look into each component and add an automated aria support. E.g. button ==> aria.label = button.text
Take a look at ariaAttributes, ariaDescribedBy, ariaLabel and ariaLabelledBy. Some have ariaErrorText, ariaHelp.
Next take a look at tabIndex. You want to ensure that you can use TAB to jump through the fields, buttons, ...
Can someone guide me where on how or where to even begin?
I tried to look at Appium's GitHub repository, but all their code is in javascript which left me highly confused.
Any guidance?
You can use the uiautomatorviewer to inspect the UI of an ios app. It will give you the full xpath of that particular element which you want to inspect.
I am working on a project that I cannot change to Java 1.8 to take in the newest JavaFX, this may or may not be relevant to the issue at hand. I have been trying everything that I can find on the internet to override the default look and feel for a drop down selection within the web browser. I have tried Javascript solutions, pure CSS solutions, and even trying to build the functionality using lists and CSS. Nothing seems to work within the WebView/WebEngine on JavaFX 2.2, most of the solutions I have tried work perfectly fine within Firefox (I know its not the best comparison because Firefox doesn't utilize webkit under the hood).
Any ideas on how to style the dropdown part of the select feature with JavaFX 2.2 WebView?
List of techniques I have tried:
http://wellstyled.com/en/javascript-styleselect-jquery-plugin/
http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm
http://www.scribbletribe.com/how-to-style-the-select-dropdown/
http://cssdeck.com/labs/styling-select-box-with-css3
http://bavotasan.com/2011/style-select-box-using-only-css/
http://www.htmllion.com/default-select-dropdown-style-just-css.html
http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
I found something that works and actually improves my interface. I was searching the UX Stack Exchange and found Chosen. Original UX Stack Exchange post
I have create JavaFX app with webview (angularjs and bootstrap).
This is how the element is rendered in Chrome
This is how select element is rendered in ubuntu jar file
I have try multiple fixes but it seams that this dropdown is rendered from the browser itself (will be rendered different in linux, macos, windows) and there is no way to style it.
Mine working solution is to use plane js library as tom-select, no dependencies.
And here how select element is rendered in chrome and in jar. Success :)
I am creating a CRM sort of application. There are multiple tags at the top of page. Clicking on the tags, should bring up, a chrome dev tools like panel(Ctrl+Shift+I) which will basically contain a table.
I searched the web, but could not find how to go about creating one. Neiter jQueryUI has any element of that sort, nor the bootstrap library from twitter has something like that.
In case you could throw in some pointers, along those lines. It will be helpful for me.
Thanks!
I am using twitter bootstrap, so that will be helpful.
PS : You can press Ctrl+Shift+I in chrome, to generate the panel, I am talking about.
This is a fairly broad question that potentially has many solutions depending on your exact needs, scenario and skillset. Also, it's always best to post an attempt at the problem to get a better response.
One solution would be to simply hide (display: none;) a sticky div that is attached to the bottom of the window. To show/hide you can use js and either a button/link or try something like http://plugins.jquery.com/project/hotkeys if you want to activate it with a keyboard shortcut.
I recently took on a website project that another developer left off. It's built using bootstrap and ColdFusion and I need to revise the visual components (turn dropdown into hover in nav, fix padding/margin, drop shadow around image etc...). I am having a hard time because there are so many css/js and other links in the the <head> already. It's hard to figure out what elements are controlled by what files.
Do you have any recommendation in the first steps when starting to work on an existing site? I am thinking maybe I should make a document to list out how all the css/js are connected to the html files before starting, but must I do this manually? Any suggestion is welcome.
Thank you!
Just use Firebug or Developer Tools in Chrome. When you inspect any element on website (just by right-click->inspect element) you can easily get information about files where particular rule for styling is.
I would suggest to use the Chrome developers tool, it's very powerful and doesn't just helps with the styling of the elements but also with js events. I recommend you to check out this video: http://vimeo.com/53073654 it helped me a lot.