gwtmaterialdesign / gwt-material Goto Github PK
View Code? Open in Web Editor NEWA Google Material Design wrapper for GWT
Home Page: https://gwtmaterialdesign.github.io/gmd-core-demo/
License: Apache License 2.0
A Google Material Design wrapper for GWT
Home Page: https://gwtmaterialdesign.github.io/gmd-core-demo/
License: Apache License 2.0
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
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 !
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());
}
});
Now the material links ( suppose align="left") will be truncated and not all the links will be shown or not clickable any more.
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
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.
MaterialTabs have no SelectionHandler to indicate the selected tab has changed.
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
}
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?
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)
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)
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".
How do you guys get the selected Elements ?
Does anybody know how to deal with them ?
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?
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; }
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?
Material grid is now much better than the previous version but there are still some issues:
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
If Stripped style is rendered like this:
than I think Bordered should look like this (not with red color off course):
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.
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.
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.
BTW, great job done !
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?
Then it is hard to click the icon
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.
Items in MaterialListBox do not display the first time.
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?
The layout goes wrong
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.
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:
<m:Table><m:TableRow><m:TableColumn></..></..></..>
Any suggestions, ideas or discussions are welcome!
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
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 !
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.
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:
Navbar
and SideNav
into separate elements, modelling the code from these pages:
Navbar
such as NavBrand
, NavSection
and AnchorListItem
(which goes inside NavSection
).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>
<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:
SideNav
can exist without a Navbar
, whereas atm it has the be added as a child of the Navbar
ui:field
to a NavSection
and you can add items from Java code ๐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>
<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?
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 .
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.
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.
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:
Thank you very much.
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
There is a problem with menu selection. To reproduce the problem do the following:
Conclusion: After selecting "Material Charts" no page will open correctly.
Hi!
The MaterialButton lacks interfaces that the GWT standard Button has, for example:
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.
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.
Create a password TextBox that has * instead of characters.
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
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.