Mock classes and the phone view in the designer

Open Source Development
1

Is there any way to recognize the type of the selected phone view and screen orientation from any Mock component class?

2

I don't believe so. It's not been a use case that we've had to concern ourselves with in the past.

3

Maybe: DesignPreviewChangeListener and FormChangeListener? I'll try.

Unfortunately,DesignPreviewChangeListener does not return any value. But I think the orientation is readable. It would be good to standardize the size of the workspace in the phone view.

4

I think I can easily implement this. I need it to know the actual size of the selected phone view and adjust the sizes and behavior of the MockListView accordingly. I want to do this so that the phone view reflects a more realistic ListView view.

5

What exactly are you trying to do?

6

I want the Search Bar not to scroll with the list. So I added an additional panel inside the list view, which contains the list of items. The outer layout is not scrollable, only the inner layout with the list is scrollable. To make the inner layout scrollable, I need to set a max-height value for it. When we set the height to pixels, there is no problem, but when the mode is auto, fill parent or percentage, then I don't know what value to limit the maximum height of the scrollable panel to. In auto mode, I can't read the real height value from the mock view container because it has a height of 100%. I don't know if I explained it clearly.

7

Presumably the filter bar is the same height regardless since it's a text box? You'd want to set up the Widget hierarchy to get something like:

<div class="outer">
  <div class="filterBar">
    <input type="text" disabled>
  </div>
  <div class="scrollable">  <!-- this is what the body of the listview populates (sans filter bar) -->
  </div>
</div>

and then use CSS Flex to control the remaining bits, something like:

div.outer {
  display: flex;
  flex-direction: column;
}

div.outer div.filterBar {
  flex-shrink: 0; flex-grow: 0;
  height: 40px;  /* whatever the actual value needs to be. 40 is just a guess */
}

div.outer div.scrollable {
  flex-grow: 1;
  overlow: scroll-x;
}

The height is then computed and set on outer following the standard mock layout logic. Any overflow if the list is larger than the computed height of the view will then be scrollable. Since the filterBar is separate at the top it won't scroll.

8

Unfortunately, after applying these changes, and removing all css height modification methods from the java code, it doesn't work.

.listViewComponentStyle {
  width: 315px;
  display: flex;
  flex-direction: column;
}

.listViewComponentStyle .listViewSearchStyle {
  flex-shrink: 0; 
  flex-grow: 0;
  height: 30px;
}

.listViewComponentStyle .listContainerStyle {
  flex-grow: 1;
  overflow: scroll-x;
}

.listViewItemStyle {
  min-height: 40px;
  display: flex;
  align-items: center;
}

Effect:

image
image359×523 16.9 KB

The list container extends outside the ListView.

9 
.outer {
  display: flex;
  flex-direction: column;
}

.filterBar {
  flex: 0 0 40px;
  width: 100%;
}

.scrollable {
  flex: 1 1 auto;
  overflow-y: auto;
}

Minor modifications. And most importantly, I replaced VerticalPanel with FlowPanel and it works perfectly. VerticalPanel didn't want to work with this css and created <table> instead of <div>. Now I can move on.

1 Like