I've spent some time simplifying the code to get a simple example of the problem. I'm using Dojo 1.6.1. I've a TabContainer defined on my page. Dinamically, I add to it two tabs, each one of them contains an EnhancedGrid with a rowMenu(right click). The issue is that the menu does not work correctly on IE8 if the TabContainer is defined to use all the space available on the page. If I use a specific height and width, it works fine. By not working correctly I mean the following: The menu is pretty simple; it has just two MenuItem, one of them is a PopupMenu that shows a submenu, as follows:
If the TabContainer takes all the available width and height, the menu does something very strange. First, if you do a right click over a row, it does not do anything. You need to a second right click. Then the menu shows, but when you open the submenu, the main menu disapears, and the submenu does not work. It keeps floating around until you navigate to other page:
When it fails, it throws a javascript error saying "'undefined' is null or not an object", on the line 208 of dojox/grid/_FocusManager.js
[...]
_scrollHeader: function(currentIdx){
var info = null;
if(this._colHeadNode){
var cell = this.grid.getCell(currentIdx);
info = this._scrollInfo(cell, cell.getNode(0));
}
[...]
I've tried to create a jsfiddle sample, but Dojo 1.6.1 is not available there, and with Dojo .1.6.0 the behaviour is diferent (You need to do a left click on the row and then a right click, and then the menu works fine), so I've created a simple HTML sample you can see on http://pastebin.com/jDNFQxrP. To see the difference you just need to change the commented TabContainer at the bottom of the code. Has someone seen this before?
Thanks
JL
Related
In the simple Dialog below:
// choice of layout has no impact:
Container cont=new Container(new TextModeLayout(3, 1));
//Container cont=new Container(new BoxLayout(BoxLayout.Y_AXIS));
TextComponent firstName=new TextComponent().label("First Name").text(person.firstname);
TextComponent lastName=new TextComponent().label("Last Name").text(person.lastname);
TextComponent cost=new TextComponent().label("Cost per Session").text(person.getCostString());
cost.getField().setConstraint(TextArea.DECIMAL);
// NOTE HERE
// doesn't work: // works:
cont.add(firstName); // cont.add(firstName.getField());
cont.add(lastName); // cont.add(lastName.getField());
cont.add(cost); // cont.add(cost.getField());
Dialog.show("Edit Client", cont, new Command(CANCEL), new Command(OK));
Nothing appears in the Dialog unless I add the TextField instead of the TextComponent to my container at the NOTE HERE comment. This means I lose the nice appearance of the labelled input fields (yes I know I could label them myself, but they wouldn't look as good on different devices). My choice of layout manager at the top does not affect this issue (I've tried several). I can't find evidence online to conclude there's an incompatibility here, adding TextComponents and other InputComponents works fine on a Form, just not in a Dialog.
I'm having the same problem in another Dialog that uses PickerComponents. The PickerComponent doesn't appear unless I add the Picker itself, and then the Picker spawned from a Dialog looks all wrong. I'm hoping the simpler code question above will answer this quandary as well.
It's worth noting I've made no theme changes and this problem is noted in both the Android and Apple skins as well as on an actual Android phone. Thanks in advance for any help!
You shouldn't do input in a Dialog as it creates a very problematic user experience. If you would like things to look like they are in a dialog you can use styles and layouts to make a Form feel like a Dialog but you shouldn't use a Dialog.
The reason this fails is a bit complicated but here are the high level problems with using a dialog:
Dialogs don't grow implicitly - This is a huge problem for text input as the component needs space to resize with input and even more so for the animated TextComponent which needs to shift things around. The size of a Dialog is determined when it's shown and that's a big problem
This becomes a bigger problem on Android where the screen resizes during input and distorts the dialog completely. It's one of those things you'll only see on the device because it's really hard to simulate the virtual keyboard.
Scrollability is hard in a Dialog and text components need a scrollable parent so you can scroll between the various edit components
Picker component uses a form of Dialog to show input and this can collide with your dialog
Dialogs are hard to get right for suspend/resume behavior. Suspend/resume happens when the app is minimized or sent to the background. E.g. say you have an incoming call while typing in the dialog. When you go back to the app we want to show the last form. If we show the dialog it will block and we won't know which parent form to show anyway. So when an app is suspended dialogs are just disposed in the default code generated in the main class. It makes more sense.
I'm facing a problem with the LWUIT's Textfield.
In some of my Forms I display a CategoryBar, while in others I hide it.
In some of the Forms I have Textfields, the problem presents itself when I focus on one and make the Virtual Keyboard (VKB) to appear. When the VKB appears, the screen components resize themselves to adjust to the Textfield to be visible while text is entered, but when I hide the VKB, either through the back button or the return key on the VKB, the Textfield remains with the focus, not only that, when the screen components resize themselves, the current visible Form resizes itself as if there was no CategoryBar present, so any components that are at the bottom of the Form are hidden by the CategoryBar.
This is fixed by displaying another Form (this includes PopupChoiceGroup and DatePicker) and then going back to the Form that is covered by the CategoryBar.
In other Forms where no CategoryBar is visible, sometimes the resizing when the VKB is shown causes the Forms to resize themselves as if the CategoryBar was visible, making it possible to interact with it when it shouldn't be available.
How can I make sure the focus is completely lost on the Textfield? Also, how to make sure a Form is resized correctly whether a CategoryBar is visible or not?
EDIT
I've been digging through the class reference for TextField, Form and VKB, in the later I found a method called autoAdjust which according to documentation:
Auto adjust size of the dialog. This method is triggered from a
sizeChanged event.
The method sizeChanged sounded like something I should check and in the Form's reference the description for this method is:
This method is only invoked when the underlying canvas for the form
gets a size changed event. This method will trigger a relayout of the
Form. This method will get the callback only if this Form is the
Current Form
This method seemed like the callback for resizing I was looking for, so I overrode it and placed a NotificatioBar to be displayed with the width and height values sent when the method was called.
What I found after testing this on my device was that when the Form was being resized after the VKB was shown or hidden, the height value sometimes instead of being 270 (the height for the Form when the CategoryBar is being displayed) it was sent as 320 (the full screen height, as if no CategoryBar was being displayed).
So far I haven't been able to understand why would the Form ignores the fact that the CategoryBar is being displayed or not when resizing the itself.
I tried to change the Form height inside its sizeChanged method but the Form wasn't affected by it. It seems to me what I have to modify is the canvas where the Form is being drawn, but I don't really know for sure since the canvas is hidden in LWUIT.
Could it be the canvas where my Form is being drawn is the one at fault? What is provoking this behaviour?
At the moment I found a workaround to avoid having my Components hidden by the CategoyBar because the Form resized wrongly after the VKB hid, for the scenario in which the Form resizes wrongly and displays the CategoryBar (which I don't know why is visible if I'm calling to its setVisibility method and passing false).
First I overrode the sizeChanged method:
protected void sizeChanged(int w, int h){
if(h > 270){
mainContainer.getStyle().setMargin(Component.BOTTOM, 50);
}
else{
mainContainer.getStyle().setMargin(Component.BOTTOM, 0);
}
}
I check the height value, if the value is greater than the expected height when the CategoryBar is being displayed then I set the bottom of my Container to 50, so it'll be visible.
But this wasn't enough because if I show again the same form and it resizes correctly then the Container will remain with a bottom of 50. So I overrode the onShow method too:
protected void onShow(){
int containerBottom = mainContainer.getStyle().getMargin(Component.BOTTOM);
if(this.getHeight() == 270 && containerBottom == 50){
mainContainer.getStyle().setMargin(Component.BOTTOM, 0);
}
}
I had to make sure if the height was 270 and my Container's bottom was 50 then the Container's bottom should be 0.
Since I haven't found a way to avoid having my Form to resize and show the CategoryBar when it shouldn't be displayed at all, I don't consider myself with a full answer. Will update if I find a workaround for this.
EDIT
I tried with explicitly setting the shown/hidden status by calling the setVisibility method inside the onShow method of every Form I have. So far I've been able to avoid the visual problems I experienced previously. I'm not sure if this problem was due to LWUIT or due to J2ME restrictions but this is how I worked around it.
I'm using twitter bootstrap with JSF-2.2.4 and Spring 3.2.4 Framework. I've built a collapsible accordion based on the following tutorial: http://getbootstrap.com/javascript/#collapse
The code seems to work fine, but only if I start with opened accordions, meaning that I add the 'in' class to the div which inherits the content which is supposed to be collapsed. If I remove the 'in' class the accordion is opened by clicking the appropriate link, but the content is no displayed.
Content is plot created with plotfaces.
Any ideas?
Edit: I just tried filling the box with an image. This seems to work. Maybe this helps narrowing down the problem.
I don't know how this plotfaces work, but i expect your problem similair to fullcalendar not visible until button is clicked or window resized?
Try to set .collapse {display;block; visibilty:hidden;} instead of display none. If this don't helps try to focus on the height of the element. The plugin change the height from 0 to auto but on initial load the height is not set.
GridPanel not rendering correctly
I'm using EditorGridPanels on dynamically generated web pages. ExtJS does not control the ViewPort.
When I wrap the Grid generation code in Ext.onReady(), the grids render perfectly.
If I do not wrap it in Ext.onReady() it renders with subtle layout issues like
the grids are a little too wide
the top toolbar gets cut off on the right
the rows don't quite fit and they shift when clicking a cell
I have tried forcing the grids' layout to get recalculated once the page loads...
(function(){}
var grid = ...
[ ... ]
Ext.onReady(function(){
grid.doLayout();
});
)();
...but this does not work.
The reason I'm trying to avoid placing Grid initialization inside Ext.onReady() is that sometimes pages take a long time to fully load every resource, and in these cases the pages look fully loaded apart from the blank spaces where the grids eventually get rendered to!
Any suggestions on what I might try? Right now a complete redesign of the page is not in scope, so I'm looking for something I can do to get the grid to layout like it does when initialized inside onReady()!
Thanks
You could perhaps mask the page initially with 'loading..' message and remove this in the onReady().
If you're getting issue outside of on the onReady it would indicate something has not loaded when you're trying to render components, this in my experience will lead to further issues down the line.
I am trying to work with mouseover on a particular Item in my application by using the following command
{
ie.text_field(:xpath, "//a[contains(text(),'Deal')]").fire_event('onmouseover')
}
On doing mouseover on a item, two subitems are displayed.
Is there any way to capture the sub items which are part of the Item by doing mouseover with which we can report that our test is pass or fail.
Please suggest.
Additional Information :
If we take example,On the StackOver flow page, If i do mouseover on my name, i get a window where i see activity, privileges, Logout and other stuff. This is really what i was looking for. Is there a way to capture the items displayed on the window on doing mouseover.
I also tried to capture the subitems with the following :
{
text=ie.text_field(:xpath, "//a[contains(text(),'Deal')]").fire_event('onmouseover')
puts(text.inspect)
}
On doing this "text" value is displayed as 'nil'.
My general tactic for such things is a combination of using IRB and the IE Developer tool, or Firebug.
using IRB, type out (or cut and paste) the watir statement to fire the onmouseover command to the proper element on the page.
Then have the developer tool rescan the DOM (there's a little refresh icon you can click) The use the tool to point to an element to point to one of the items in the stuff exposed by the onmouseover. Using the info from that, you can then figure out how to address those elements to get the text from the proper div, etc.
If I do that here to the info that opens up when I float the mouse over my name I can find out that it is a table of class "profile-recent-summary" Furthermore I can then look at the way the table is made up and see for example that the 'today' reputation value is in the second cell on that row.. The row also has the text 'reputation' in it.. so
browser.table(:class, 'profile-recent-summary').row(:text, /reputation/).cell(:index, 2).flash
Should flash the cell I want (index might be 1 if using firewatir or webdriver) I can then replace the .flash with something else like .text if I want to get the text from that cell (which is actually inside a link that sits in the cell)..
without seeing your code, I would 'inspect' the element that you are trying to verify and when_present (text) assert that its true