gwtmaterialdesign / gwt-material Goto Github PK

Hi!

I cannot manage to get change handlers working for MaterialListBox. This peace of code works on the standard GWT ListBox, but does not work on MaterialListBox:

        listBox.addChangeHandler(new ChangeHandler()
        {
            @Override
            public void onChange(ChangeEvent event)
            {
                Window.alert("Should occur on change!");
            }
        });

Any ideas?

Hi Friends,
I need some example by which I can create my phonegap app. I saw many examples in a website, but all in xml format, please help me to create my simple phonegap application using the gwt - material framework.

The Plan

• Remove redundant classes and tidy existing code
• Add GWTP and restructure as MVP
• Pages do not need to be widgets - replace with Presenter-View-UiB triplets
• Documentation for less-experienced maven users

Dependent on #69 and #70 being implemented first

When you download the apk, app works but if you want to go in the bottom of the main menu you have to click a long time to access to the lasts items of the menu (f.e. the item collections)

I update to the latest version from github. For navbar, the type is set to "left" and the sidebarwidth is set to ,say, 250. In previous version, the sidebar won't shown until collapse in small screen and click the collapse menu. but in current version, a white rectangle will be shown anyway.

Pls take a look.

On desktop when you shrink browser window in one moment header (on the left) and rows are not aligned correctly (note arrow that points direction)

On mobile it does not render correctly, it depends on direction of mobile device, two real screen shots taken from Google Nexus mobile will demonstrate the problem:

No price and actions:

Nothing at all:

BTW, this is going to be great feature when you resolve this layout issues !

When we incorporated the library into our project, we noticed the css in the .jar overrides our existing css. Is there a work around for this?

Now the material links ( suppose align="left") will be truncated and not all the links will be shown or not clickable any more.

Hey guys,

this framework is awesome. But i found a little bug.
MaterialListBox is not reacting on DOM handler.

Trying to add a listener does not end up in an result for calling method doSomething()
Instead of this, nothing happens ....

final MaterialListBox materialListBox = new MaterialListBox();
        materialListBox.addItem("Test");
        materialListBox.addChangeHandler(new ChangeHandler() {
            @Override
            public void onChange(ChangeEvent changeEvent) {
                doSomething(); // 
            }
        });

another approach ends in the same result. Nothing happens again ...

        materialListBox.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent clickEvent) {
                doSomething();
            }
        });

Is there another way to react as a listener ?

with best regards

John

There is still one problem with MaterialListBox.
ChangeEvent does not work.

listBox.addChangeHandler(new ChangeHandler() {
      public void onChange(ChangeEvent event) {
        // Get the index of the selected Item
        Window.alert(listBox.getSelectedItemText());
      }
    });

When i add dynamically item in MaterialCollapsible, there is no expand on click.

MaterialCollapsibleItem collapsibleItem = new MaterialCollapsibleItem();
collapsibleItem.addHeader( new MaterialLink("title", "blue"));
collapsibleItem.addContent( new MaterialLabel("label"));
MaterialCollapsible collapsible.addItem(collapsibleItem);

Thx.

I tried to change the current selection of MaterialListBox via code in four different ways, but it does not react at all.

@UiField 
protected MaterialListBox tabItemImageSelection;

public Menu(){
   tabItemImageSelection.setSelectedIndex(2); // first test

   tabItemImageSelection.setTitle("Test"); // secound test
   tabItemImageSelection.setValue(1,"Test"); // third test
}

How do you best work with tables when using gwt-material?

http://www.gwt-material.appspot.com/#table

This page only shows how to use raw HTML, which isn't something I want to do. I'd like to be able to do the following:

• Build a GUI with tables easily, for example <m:Table><m:TableRow><m:TableColumn></..></..></..>
• Bind the table to a table model. For example, if I have a domain object with a list of something, I want this list to be bound to the table.
• Two-way bindings in the tables. For example, one column in the table might contain MaterialListBox, and if one row is changed here, I want it to be reflected to the domain object.

Any suggestions, ideas or discussions are welcome!

I think you should try to embed ads like http://materializecss.com are doing. Not like the last time you did with popping advertisements that ruins all the demo but discreet ones like they did.

OK guys, my first suggestion is that I think some of the existing widgets can be rewritten to basically be a wrapper around the standard html element, with the materializecss.com css added to it.

Simple Example

In gwt-material MaterialNavbar is an element that not only renders a Navbar, but has the SideNav combined into it, using @UiChild methods. I propose:

1. Break up the Navbar and SideNav into separate elements, modelling the code from these pages:
   • http://materializecss.com/navbar.html
   • http://materializecss.com/side-nav.html
2. Extract out additional components that can be placed inside the Navbar such as NavBrand, NavSection and AnchorListItem (which goes inside NavSection).

So....

Looking at the most basic Navbar implementation on materializecss.com:

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">JavaScript</a></li>
    </ul>
  </div>
</nav>

I feel should be achieved through this in UiBinder:

<m:Navbar>
  <m:NavBrand href="#">Logo</m:NavBrand>
  <m:NavSection>
    <m:AnchorListItem href="sass.html" text="Sass"/>
    <m:AnchorListItem href="badges.html" text="Components"/>
    <m:AnchorListItem href="collapsible.html" text="JavaScript"/>
  </m:NavSection>
</m:Navbar>

Obviously this leaves the issue of the SideNav but the markup is similar so they would just have to be added to the page separately.

I feel like this has numerous benefits:

1. Cleaner markup
2. Easier to maintain as it's more modular
3. We can extend native GWT elements where possible
4. A SideNav can exist without a Navbar, whereas atm it has the be added as a child of the Navbar
5. More programmatic control - add a ui:field to a NavSection and you can add items from Java code 😎

Full Example

We go from this:

<m:MaterialNavBar wave="light" align="right" color="blue" text="Starter" sideBarWidth="300">
  <m:nav>
    <m:MaterialLink  icon="mdi-social-whatshot" textColor="white"  tooltip="Starter"/>
  </m:nav>
  <m:nav>
    <m:MaterialLink  icon="mdi-navigation-apps" textColor="white"  tooltip="Apps"/>
  </m:nav>
  <m:nav>
    <m:MaterialLink  icon="mdi-social-notifications" textColor="white"  tooltip="Notification"/>
  </m:nav>
  <m:sidebaritem>
    <m:MaterialTopNav profileName="GWT Material" profileImageUrl="image.png" ui:field="topNav" textColor="white" type="sidebar" >
      <m:child>
        <m:MaterialLink text="[email protected]" textColor="white" fontSize="0.8" icon="mdi-navigation-arrow-drop-down" iconPosition="right"/>
      </m:child>
    </m:MaterialTopNav>
  </m:sidebaritem>
  <m:sidebaritem>
    <m:MaterialLink icon="mdi-social-whatshot" iconPosition="left" text="Starter" textColor="blue"  />
  </m:sidebaritem>
  <m:sidebaritem>
    <m:MaterialLink icon="mdi-navigation-apps" iconPosition="left" text="Apps" textColor="blue"/>
  </m:sidebaritem>
  <m:sidebaritem>
    <m:MaterialLink icon="mdi-social-notifications"  iconPosition="left" text="Notifications" textColor="blue" separator="true"/>
  </m:sidebaritem>
  <m:sidebaritem>
    <m:MaterialLink icon="mdi-action-explore" iconPosition="left" text="Navigation" textColor="blue"  />
  </m:sidebaritem>
</m:MaterialNavBar>

... to this:

<m:Navbar>
  <m:NavBrand href="#">Starter</m:NavBrand>
  <m:NavSection>
    <m:AnchorListItem href="#something" icon="mdi-social-whatshot" textColor="white"  tooltip="Starter"/>
    <m:AnchorListItem href="#something" icon="mdi-navigation-apps" textColor="white"  tooltip="Starter"/>
    <m:AnchorListItem href="#something" icon="mdi-social-notifications" textColor="white"  tooltip="Starter"/>
  </m:NavSection>
</m:Navbar>


<m:SideNav>
  <m:SideNavTop>
    <g:HTMLPanel>   
      <g:Image src="...">
      <g:Label>GWT Material</g:Label>
      <!-- Any widgets or HTML can go here! -->
    </g:HTMLPanel>
  </m:SideNavTop>
  <m:NavSection>
    <m:AnchorListItem icon="mdi-social-whatshot" iconPosition="left" text="Starter" textColor="blue"  />
    <m:AnchorListItem icon="mdi-navigation-apps" iconPosition="left" text="Apps" textColor="blue"/>
    <m:AnchorListItem icon="mdi-social-notifications"  iconPosition="left" text="Notifications" textColor="blue" separator="true"/>
    <m:AnchorListItem icon="mdi-action-explore" iconPosition="left" text="Navigation" textColor="blue"  />
  </m:NavSection>
</m:SideNav>

No need for <m:nav> or <m:container> wrappers!

We do this by replacing @UiChild methods we currently have:

@UiChild(tagname = "nav")
public void addWidget(final Widget item) {
  navigation.add(new ListItem(item));
}

// replace with this (or similar!)

// I'M NO EXPERT, but I believe this is called by UiBinder when it sees a set of `AnchorListItem`s inside a `NavSection`

public NavSection(final AnchorListItem... widgets) 
{
  this();
  // Add all the list items to the widget
  for (final AnchorListItemli : widgets)
  {
    add(li);
   }
}

What do you guys think?

When adding a bunch of lines in the MaterialTextArea it doesn't expand correctly and text gets hidden without a scrollbar.

This was done using the demo app on Mac Chrome

Hi everybody!

As I have mentionned in the gitter gwt-material forum, I'm asking about the possibility to customize my MaterialNavBar icons alignment, so that I could place them as I want such as the burger-menu-icon that I would place it in the extreme left side.
And also the sideNav that can be hide or shown on the click of the menu-botton.
Please help me to solve these problems. thanks to all !

In the latest 1.3.3 demo striped an hoverable table styles does not have any affect on table like it was before. In the previous demo striped and hoverable styles were working fine. Tested on desktop Chrome, IE, FireFox and mobile Android Chrome.

Using the UIBinder Code from http://gwt-material.appspot.com/bin/HomePanel.ui.xml with version 1.3.1 does not compile due not found methods and a missing MaterialContainer class.

• Desktop: When you hover on Components, both menu options "Component" and "Style and Layout" are marked.

• Desktop & Mobile: When you select Dialogs: SHOW MODAL, dialog does not show at all (and after this point we need to reload the page because we can not do anything on the page) if pressed before any other option on the right (MODAL WITH FIXED FOOTER etc). If you select any other option on the right like MODAL WITH FIXED FOOTER and after that press SHOW MODAL, dialog will be shown as expected.
• Desktop & Mobile: When you select NavBar it does not change header text, it will be "Media" if that was the last place you have been.
• Mobile: Paralax scroll is not smooth (images are jumping up-down) on mobile when you scroll the page.
• Mobile & Desktop: Menu button should be left aligned ? Not really sure that this is an issue because it's the same as on http://materializecss.com/ as well, but I think left aligned would look better that this. At least it should be aligned with header text if it's not left aligned.

• Desktop & Mobile: Badges in Dropdown : Badge is not vertically aligned with as it should be. Scroll bar is also there but it should not be shown for only 3 options.(It's probably because of badge that is not on the place it should be).

BTW, great job done !

Material grid is now much better than the previous version but there are still some issues:

1. Grid does not render the same on IE (ver. 11) and Chrome (ver. 44).

a.) On IE (on the left) there are (bold) lines that separates header items (in this case rows) that is nice I think - no such lines on Chrome. On Chrome there are line that separates header with table content that is also nice I think - no such lines on IE. I am not sure but maybe row with checkboxes should also be separated with the line from the rest of table.

b.) On IE "Item name" does not wrap on next line and it is much better than Chrome version that wraps because all rows bellow it are not aligned correctly (look Price, Action).

c.) On IE there is a Vertical scroll bar that is not needed, on Chrome it is OK

1. Bordered style not rendered correctly.

If Stripped style is rendered like this:

than I think Bordered should look like this (not with red color off course):

1. Still some layout issues on mobile:

Unnecessary scroll bars of outer panel ? shown:

Unnecessary scroll bars of outer panel ? shown:

Last row has been cut ? This is a case when outer panel did not register that it should scroll ?

Note: I think rendering on Mozilla FF is like on Chrome.

In the http://gwt-material.appspot.com, for the demo of navbar, the "Custom Color" and "Wave" demo seems ok for the small screen but other demos can not see the collapsed menu .

The site isn't loading at all. Happens in Chrome and Firefox. Not very useful error message:

Uncaught TypeError: Cannot read property 'G' of undefined
qI  @   gwt_material_design_demo-0.js:2348
HI  @   gwt_material_design_demo-0.js:887
MI  @   gwt_material_design_demo-0.js:549
ET  @   gwt_material_design_demo-0.js:2666
hH  @   gwt_material_design_demo-0.js:2666
(anonymous function)    @   gwt_material_design_demo-0.js:817
Vm  @   gwt_material_design_demo-0.js:745
Ym  @   gwt_material_design_demo-0.js:931
(anonymous function)    @   gwt_material_design_demo-0.js:2301

Anyone else getting this?

We want to thank all your work, from the entire team onLibrary. We are a small group of students who are making an application in GWT, from Seville, Spain. At first we was very ugly, but when you find your JAR, all sorted!

Also, if you want, you can see how we stayed and give us feedback to improve (ol-onlibrary.appspot.com).

I would also like to give you some suggestions:

1. I can download the new version of your JAR, but the "GettingStart" button does not work in your web.
2. You could teach how to use the API from Java classes, which is how we have done.
3. You could add tables Materialize.

Thank you very much.

Items in MaterialListBox do not display the first time.

revealed:

unrevealed:

SOLUTION: adding
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

to the .card .card-reveal css class does the trick.

in materialize.css version 15.5 this card-reveal class looks :

.card .card-reveal {
padding: 20px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
top: 100%;
height: 100%;
z-index: 1;
display: none; }

Hi! I have an issue regarding the indententation of some input fields (MaterialTextBox for example). If you compare your examples with materializecss' examples, you can see that there is a small difference in the indentation of the placeholder.

In materializecss' examples, they have this:

<div class="row">
    <div class="input-field col s12">
        <input id="email" type="email" class="validate">
        <label for="email" data-error="wrong" data-success="right">Email</label>
    </div>
</div>

To simulate this, I'd do this in my *.ui.xml file:

<m:MaterialRow>
    <m:MaterialColumn grid="s12">
        <m:MaterialTextBox ui:field="txtTest" placeholder="Test" />
    </m:MaterialColumn>
</m:MaterialRow>

However, this turns into:

<div class="row">
    <div class="col s12">
        <div class="input-field">
            <i></i>
            <input type="text" class="gwt-TextBox validate" id="101">
            <label for="101">
                <div class="gwt-Label">Test</div>
            </label>
        </div>
    </div>
</div>

This extra div makes it look no different than before (i. e. it looks exactly as your example). But it makes sense, because that's how I structured my UiBinder.

One idea how to solve this is to have a grid-property on ALL material input fields. Something like this:

public void setGrid(String grid) {
    this.grid = grid;
    addStyleName("col");
    addStyleName(grid);
}

This way I can design my UiBinder like this:

<m:MaterialRow>
    <m:MaterialTextBox ui:field="txtTest" placeholder="Test" grid="s12" />
</m:MaterialRow>

I've tested this in my own code and it works perfectly, atleast for MaterialTextBox and MaterialTextArea. I tested on MaterialListBox, but I got some trouble with a slightly misplaced caret. I had a hard time finding a solution, since the HTML you get from MaterialListBox does not match the HTML in the materializecss examples.

Ideas, thoughts?

Major release like the Material Design Icons implemented on materializecss will be updated http://materializecss.com/icons.html Using Google repositories.

Also bug fixes of previous version that have been fixed.

Using MaterialModal.closeModal() as given in the demo, there is thrown an exception "id is not defined" ...
Looking at the source the cause is clear, the id value isn't defined in this static method, it isn't given as parameter. Leaves the question open why the demo is working and the dialog is closing anyway?

Create a password TextBox that has * instead of characters.

The layout goes wrong

Then it is hard to click the icon

1. Desktop all browsers: Dots missing

Open demo with charts, re-size browser window to the certain point when tree dots will be missing from cards:

1. Desktop IE browser: Big empty space on top of each card:

BTW Charts demo (at least on Chrome) is really awesome.

if you set two dropdown elements among each other with <m:MaterialDropDown text="Selection" color="blue" waves="light"...
the second dropdown hides parts of the first dropdownmenue.

It's because waves-light add z-index=1 and the class dropdown-content else has z-index=1

There is a problem with menu selection. To reproduce the problem do the following:

1. Select Material Charts : OK
2. Select Component - Badges : NOT OK (Header is still Material Carts but with no content)
3. Select Buttons : OK
4. Select Component - Badges again : Now is OK
5. Select Material Charts : OK
6. Select Component - Buttons or any other page : NOT OK (The same as 2.)
   ...

Conclusion: After selecting "Material Charts" no page will open correctly.

It should be great to edit an input when clicking on his label.
on mobile phones, click the input itself is not easy(below the label)

Suppose we set a navbar with fixed sidebarwidth, say, 300px, as demoed in starter template, it works fine. In another webpage in the same webapp, we use another navbar without setting the sidebarwidth
in Uibinder, but the 300px offset is there. That's , the sidebarwidth seems a global thing. It is not good.

Pls take a look and thanks a lot

several font files ends with woff2 can not be found. This may bring overheads .

http://localhost/myweb/font/roboto/Roboto-Light.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)

Resize your browser on desktop to a small size and you will see that table is broken in two columns. First column will have table header with no rows and second one will have table content (rows) with no header.

MaterialTabs have no SelectionHandler to indicate the selected tab has changed.

I've tried to add Elements that works fine but then ...

    @UiField
    protected MaterialDropDown combo;

   @Override
    protected void onAttach() {
        super.onAttach();

        combo.addWidget(new MaterialLink("Pos 1", "black"));
        combo.addWidget(new MaterialLink("Pos 2", "black"));
        combo.addWidget(new MaterialLink("Pos 3", "black"));

        combo.addDomHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent clickEvent) {

                if (combo.getWidget() instanceof MaterialLink) {
                    Console.log("Widget found !!");
                }
            }
        }, ClickEvent.getType());
    }

The above code does not indicate the message "Widget found".

• There is no change handler or something like this.
  • getSelectedIndex() / setSelectedIndex method is missing
  • with getWidget() comes back a Button Widget but for all of the items the same one.

How do you guys get the selected Elements ?
Does anybody know how to deal with them ?

public static native void closeModal()/*-{
    $wnd.jQuery('#' + id).closeModal();
}-*/;

i think there is a missing "String id" transfer parameter in close modal function.

Error:
com.google.gwt.event.shared.UmbrellaException: Exception caught: (ReferenceError) @gwt.material.design.client.ui.MaterialModal::closeModal()([]): id is not defined

Hi there, great framework, I love it. Congratulation to this work,

Just experienced the following problem. I use the MaterialNavBar with the Sidebar. If I navigate away from the view to another activity and then navigate back, I see that there is an overlay leak in the DOM tree causing troubles. Each time I navigate away an back one more such DOM element is left.

As long as I stay on the view and only switch content, this doesn't happen. It only happens if I navigate away to another activity by EventBus action.

Hi!

The MaterialButton lacks interfaces that the GWT standard Button has, for example:

• HasEnabled
• HasDoubleClickHandlers
• HasFocus
• HasAllFocusHandlers
• etc

When developing Material Design components, we should try to keep existing GWT functionality, otherwise most of the components are useless. This goes for all components that does not extend their original class, but instead extend Composite or MaterialWidget, for example MaterialTextArea.