gwtmaterialdesign / gwt-material-addins Goto Github PK

You need to include a materialWindow in your widget to use it.
OpenWindow should better attach itself to the rootpanel & remove it on close.

Playing around with autocomplete I noticed that type="TEXT" is not working. Neither setting it in the UiBinder nor setting it programmatically changes the result

<m.addins:MaterialAutoComplete ui:field="acTool" placeholder="test" type="TEXT"/>

public class MyApplication implements EntryPoint {
    public void onModuleLoad() {
        RootPanel.get().add(new MaterialRichEditor());
    }
}

results in error: Uncaught TypeError: $wnd.jQuery(...).materialnote is not a function

Tested with 1.5.1-SNAPSHOT, with the gwt material demo project setup (just doing above code, not using mvp)

In my application I have a (GWTP) slot that contains a MaterialSplitPanel. If i add another Presenter/Panel to that slot and try to add the Presenter/Panel with the MaterialSplitPanel afterwards I get the following exception:

Caused by: com.google.gwt.core.client.JavaScriptException: (String) : Cannot make a splitter here! '' already has a splitter! Use $('')[0].touchSplitter.destroy() to remove it!

If I use just 'normal' MaterialPanels everything works fine.

Implementation of Rich Editor using Tinymce editor.

If you have any good API that we can use please don't hesitate to share your ideas.

Noticed in our project and reproduced in Demo application v 1.5.0

On this page for all instances of MRE where setHTML was called when I click any toolbar icon with popup menu it (the popup) becomes hidden right after display.

Hey there,
after my problems with MaterialRichEditor, i switched to MaterialTextArea. Unfortunately there is also a little bug.
When i open a form, i fill the text fields and text areas with the values of my given object. I tried this by using MaterialTextArea.setText("text") and MaterialTextArea.setValue("text", true) - where true means: yes, fire ValueChangeEvent!!!
So the text i am setting to the MaterialTextArea is long and has many lines, the area will not be resized.
If you click into the area and begin changing the text, the area is suddenly resized to the size of the content.
I would like to have a method or a setting in order to control the resizing of the MaterialTextArea. Actually i don't know how to find a compromise, so that users can see, that there is more content in the area.

Kind regards,
David

http://gwtmaterialdesign.github.io/gwt-material-demo/#!autocomplete

scroll to the TYPE TEXT example, click on the textbox, than type L, select the first suggestion, than see the console for the error

Currently the MaterialAddinsBase class imports 9 javascript files:

public void load() {
        inject(MaterialAddinsResources.INSTANCE.timepickerJs());
        inject(MaterialAddinsResources.INSTANCE.subHeaderJs());
        inject(MaterialAddinsResources.INSTANCE.pathAnimatorJs());
        inject(MaterialAddinsResources.INSTANCE.waterfallJs());
        inject(MaterialAddinsResources.INSTANCE.scrollFireJs());
        inject(MaterialAddinsResources.INSTANCE.bubbleJs());
        inject(MaterialAddinsResources.INSTANCE.interactJs());
        inject(MaterialAddinsResources.INSTANCE.masonryJs());
        inject(MaterialAddinsResources.INSTANCE.tinymceJs());
}

... but, if in my application, I don't use ScrollFire or Waterfall for example, I still import their scripts.

In my opinion the Widgets that use specific js files should be responsible to import them. Of course the framework can provide some sort of "JS Registry" to keep track of what is imported and what is not.

Making the components import their JS files also helps the code splitter to lazy load the files only when really needed, improving the startup time of the app.

An easy wrapper for viewing your pdf, word, excel, powerpoint and any document using Google Docs Viewer.

Sample
https://docs.google.com/viewer?url=www.snee.com%2Fxml%2Fxslt%2Fsample.doc&embedded=true

We are missing a file upload widget. im sure everyone else is waiting for this widget out there.

This is a screenshot from the online demo with a small screen:

The padding of the step should be smaller overall, to better accommodate the body of the step. Also note that the description text doesn't create a new line, and the text appears strange.

There appears to be an error caused by visibility reduction of the public method

    // public static class MaterialAutoComplete extends SuggestBox.SuggestionDisplay
    private boolean isSuggestionListShowing() {
        return this.suggestionPopup.isShowing();
    }

Even though it is actually a public method:

    // public abstract static class SuggestBox.SuggestionDisplay
    public boolean isSuggestionListShowing() {
      return false;
    }

I am using GWT Material Design 1.5-SNAPSHOT with GWT 2.8.0

Support copy / cut clipboard to any material widgets.
Reference : https://clipboardjs.com/

We can use CSS2PDF - https://github.com/Xportability/css-to-pdf
A rich javascript library to print any kind of element.

We accept your idea or if you have any recommendation, feel free to share it :)

Hi,

I cloned the repo and I'm building it using "mvn clean install" but I'm getting some errors:

INFO] -------------------------------------------------------------
[ERROR] COMPILATION ERROR :
[INFO] -------------------------------------------------------------
[ERROR] /Users/josep/Projects/eclipse/gwt-material-addins/src/main/java/gwt/material/design/addins/client/ui/MaterialStep.java:[123,17] error: cannot find symbol
[ERROR]   symbol:   method addClickHandler(<anonymous ClickHandler>)
  location: variable conCircle of type Div
/Users/josep/Projects/eclipse/gwt-material-addins/src/main/java/gwt/material/design/addins/client/ui/MaterialStepper.java:[217,43] error: cannot find symbol
[ERROR]   symbol:   variable FADEINUP
  location: class Transition
/Users/josep/Projects/eclipse/gwt-material-addins/src/main/java/gwt/material/design/addins/client/ui/MaterialWindow.java:[159,43] error: cannot find symbol
[ERROR]   symbol:   variable ZOOMIN
  location: class Transition
/Users/josep/Projects/eclipse/gwt-material-addins/src/main/java/gwt/material/design/addins/client/ui/MaterialWindow.java:[175,43] error: cannot find symbol
[INFO] 4 errors

Can anyone suggest a solution, please?

I wonna ask You for some improvment on File Uploader.

I would like to get some data (String,Json) from server after successful upload, for example when I will change the name of file on server with HTTP response message.

Currently I can done this when error occurs, and gwt.material.design.addins.client.fileuploader.events.ErrorEvent.ErrorHandler is triggered, cause there is an object private final UploadResponse response;, that's get access to http header.

For me it will be the best if we would get access to whole Http header object like:
http://www.gwtproject.org/javadoc/latest/com/google/gwt/http/client/Header.html
and Http response codes:
http://www.gwtproject.org/javadoc/latest/com/google/gwt/http/client/Response.html

Print screen with successful upload, where I cannot access status code and message from server response

Print screen with unsuccessful upload, where I can access status code and message from server response with:

MaterialFileUploader uploader = new MaterialFileUploader();

uploader.addErrorHandler(new ErrorEvent.ErrorHandler<UploadFile>() {
        @Override
        public void onError(ErrorEvent<UploadFile> event) {
        event.getResponse().getCode();
        event.getResponse().getMessage();
        }
    });

Here is my server side code for handling upload and returning custom data:
return new ResponseEntity("---------------->CREATED", HttpStatus.CREATED);

@RestController()
public class FileController {
    @RequestMapping(value = ServiceRouting.FileService.upload, method = RequestMethod.POST)
    public ResponseEntity<String> upload(HttpServletRequest request, HttpServletResponse response) {
    if (!ServletFileUpload.isMultipartContent(request)) {
        return new ResponseEntity<String>("---------------->BAD_REQUEST", HttpStatus.BAD_REQUEST);
    } else {
        try {
        FileHelper.createFileFromHttpServletMultiPartRequest(request, response);
        return new ResponseEntity<String>("---------------->CREATED", HttpStatus.CREATED);
        } catch (ServletException | IOException e) {
        e.printStackTrace();
        return new ResponseEntity<String>("---------------->INTERNAL_SERVER_ERROR", HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }
    }
}

Update related dependecies :

• Java 8
• GWT 2.8-rc3
• JSInterop

Setting paddingand marginto 0

<m.addins:MaterialAutoComplete ui:field="acSearch" placeholder="Suche.." 
                               margin="0" padding="0"/>

Does unfortunately not work:

It appears that multiValueSuggestBox-list still contributes to size ofMaterialAutoComplete`

Integration of Speech Recognition on gwt apps for search, commands or other features. Working on POC with https://www.talater.com/annyang/.

Implementation of splitter feature to separate two contents. A news coming from Android N to support multi apps running on a phone. Can be used on Cloud IDE's also.

Spec : https://www.google.com/design/spec/layout/split-screen.html
Source: https://github.com/ZombieHippie/Touch-Splitter-jQuery
Demo : http://blog.colelawr.com/Touch-Splitter-jQuery/

In readme: <inherits name="gwt.material.addins.GwtMaterialAddins"/>

Missing path: design
Name now: GWTMaterialAddins

Implement Custom Material Steppers 👍

Using static block injection in widget like for example MaterialTimePicker cause error if widget is attached trough UiBinder.
I get that corresponding js method not exist. The problem is that the js method is called without knowing if js library is loaded

If a stepper is added to it's parent without having children of it's own an IndexOutOfBoundException is thrown. This is caused by the onLoad() method calling goToStep(currentStepIndex + 1). goToStep does not validate the index argument, causing the mentioned exception because the (empty) widget list is accessed at a wrong index. In my opinion it should be legitimate to initialize a stepper without content and only fill it later as this is the case with other GWT panels.

As the addition above indicates the stepper interfaces uses indexes starting at 1 to identify the steps. This is quite uncommon in Java development and I would advise to change that to a zero-based index instead to prevent programming errors (internally as well as externally).

Tested on OnePlus One with Chrome version 49.0.2623.

Seems like the button clicks aren't invoked for some reason.

Can reproduce it in Chromes dev Toggle Device Mode.

Add drop event handlers and sample showcase on demo site

Added implementation of pull request both mobile and desktop.
https://github.com/lightningtgc/material-refresh

After the last commit on MaterialAutocomplete its behaviour has changed, I would like to understand if this is intentional because I am currently using a previous version of the component in production and updating it now would cause lots of regressions:

• There is no MaterialChipProvider anymore
• The style of the suggestbox is no more the same of MaterialListBox
• The property "directInputAllowed" has been removed.
• If directInputAllowed was true there was no default selection on the first element of the suggestions list so that the user could specify a substring of a suggestion as keyword. This is not possible anymore.

Thanks

I am not sure how to fix this. I tried to add the firing of the event to setText(String) but it seems like the value of the underlying textbox is changed in another way.

However, it would be nice to be able to catch a ValueChangedEvent for *Picker.

Hi all,

I noticed that a lot of MaterialWidget sub-classes i.e. MaterialListBox are actually composite widgets, managing internal widgets. Let's say, the widget class comes with some members:

    private final ListBox listBox = new ListBox();
    private final Label lblName = new Label();
    private ToggleStyleMixin<ListBox> toggleOldMixin;
    private boolean initialized;

Well, you see that they are all declared private and thus can't be modified in sub-classes. They also come without getter and setter methods for the internal properties quite often. For example, MaterialListBox has no getListBox(), setListBox(), getInitialized(), setInitialized(...), setLabel() and getLabel(). I'm sure there is a concept behind that, but I don't know if that is more important than extensibility.

Currently I don't see any way to extend those widget classes in a meaningful way. Instead of extending, I see myself forced to copy the code of this class to change and adapt it's behavior to my needs and... and loosing any upstream compatibility on that way.

Well... would it be fine for you to change that in all widget classes by adding getter/setter methods for all private member properties? Or do you have any other ideas?

If you are fine with such a change, I'm willing to do that job for any widget class and provide a pull request (if that would speed up the progress to get the change into the snapshot version) :)

Thank you in advance and best,
Aron

When using the RichEditor to show and edit HTML data, i would like to get the edited and changed HTML data. But by caling 'getHTML()' you get the original HTML data, which you inserted by 'setHTML' or 'insertText'. MaterialRichEditor is not usable as editing component :(

You can see this issue also at the demo website:
http://gwtmaterialdesign.github.io/gwt-material-demo/#richeditor

Hi guys,
after I close a Popup Window the cursor doesn't change to his original shape.

Can you fix it?

Thanks

There are two types of Material Header : STATIC which is good for SideNav and PINNED for Collections.

The MaterialTimePicker is not shown when a modal dialog is displayed.

Is there a configuration that I am missing or just a minor implementation bug?

Provide proof of concept of MaterialPathAnimator
Reference:
http://kushagragour.in/lab/ctajs/
Example

I am gettig this result

When using the following XML code. It appears that the z-index value is too low. Setting it manually to 1002 makes the suggestion list appear above the modal.

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:m="urn:import:gwt.material.design.client.ui" 
    xmlns:m.addins="urn:import:gwt.material.design.addins.client.ui"
    >

    <ui:style gss="true">
    </ui:style>

    <g:SimplePanel ui:field="main">

        <m:MaterialModal ui:field="setOfferModal" type="FIXED_FOOTER" dismissable="false" inDuration="200" outDuration="200" >

            <m:MaterialModalContent>

                <m:MaterialRow>

                    <m:MaterialColumn grid="s12 m9 l9">                        
                        <m:MaterialTextBox placeholder="Name"/>
                        <g:SimplePanel ui:field="rta"/>
                    </m:MaterialColumn>

                    <m:MaterialColumn grid="s12 m3 l3">                        
                        <m.addins:MaterialAutoComplete ui:field="acTool" placeholder="test"/>                        
                           <m:MaterialCollection>                               
                               <m:MaterialCollectionItem>                                   
                                   <m:MaterialImage url="https://material.angularjs.org/latest/img/list/60.jpeg" type="CIRCLE"/>                                   
                               </m:MaterialCollectionItem>
                           </m:MaterialCollection>
                    </m:MaterialColumn>

                </m:MaterialRow>

            </m:MaterialModalContent>

            <m:MaterialModalFooter>
                <m:MaterialButton ui:field="btnSave" text="SPEICHERN" type="FLAT" />
                <m:MaterialButton ui:field="btnAbort" text="ABBRECHEN" type="FLAT" />
            </m:MaterialModalFooter>

        </m:MaterialModal>

    </g:SimplePanel>
</ui:UiBinder>

As a quickfix I added to my css:

div.gwt-SuggestBoxPopup {
    z-index: 999999;
}

The onLoad() method of the Widget system is called by the onAttach() of the Widget base class, which is turn "is called when a widget is attached to the browser's document." (from the javadoc).

In other words, every time the widget is attached to the DOM tree, the onLoad() method is called.

That becomes a problem when the logic inside the method changes the state of the widget. For instance, on MaterialStepper:

    @Override
    protected void onLoad() {
        super.onLoad();
        goToStep(1);
    }

Every time the component is reattached, it activates the first step. That's a problem when you have a persistent view where the user can come and go.

The MaterialStep have similar problem:

    @Override
    protected void onLoad() {
        super.onLoad();
        if(getParent() instanceof MaterialStepper){
            stepper = (MaterialStepper) getParent();
            if(stepper.getAxis() == Axis.HORIZONTAL){
                conCircle.add(divTitle);
                conCircle.add(divLine);
                conCircle.add(divDescription);
            }else{
                conBody.insert(divTitle, 0);
                conCircle.add(divLine);
            }

        }
        conCircle.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                stepper.goToStep(step);
            }
        });
    }

In this case, the layout is redone on every attach, and a click handler is added on every attach. That can lead to multiple click handlers on the component over time.

Currently we can only have AVATAR for an icon and CHECKBOX on MaterialCollectionItem.

public enum CollectionType implements CssType {
    AVATAR("avatar"),
    CHECKBOX("checkbox");
    // ..
}

Would it be possible to add a RADIO type as well?

I could implement this but I am not sure how. I see that MaterialCollection is currently not aware of it's children and which type they are having.

MaterialCollectionItem does the whole ClickHandler registration by itself but this does not work that way for a RADIO type because of course the others have to be set to false once another is clicked.

If somebody could explain me how MaterialCollapsible is managing to do this when it's set to ACCORDION then I could give it a try on MaterialCollection.

Reported by @silentsnooc

I think there is a bug in MaterialStepper#getCurrentStep()

if(currentStepIndex >= getWidgetCount() - 1 || currentStepIndex < 0){
    return null;
}

should actually be

// > instead of >=
if(currentStepIndex > getWidgetCount() - 1 || currentStepIndex < 0){
    return null;
}

because in the first version being at the last step will cause getCurrentStep() to return null

((MaterialStep)this.stepper.getWidget(this.stepper.getCurrentStepIndex())).clearErrorOrSuccess();

The MaterialCutOut isn't properly calculating its position because the placement calculates before adding overflow: hidden which removes the scrollbar and causes its placement to go off.

Solution is probably to remove the scrollbar and then calculate its positioning.

I'm getting an exception when I reenter a page that has the file uploader ui component (whether I display the file uploader or not).

The test app I created has:
Page 1, has a button to go to Page 2
Page 2, has a button to display a dialog with a file uploader

I can show/hide the dialog and the file uploader is displayed fine.

If I go back to Page 1, then attempt to go to Page 2 the exception is seen.

Exception caught: (Error) : Dropzone already attached.com.google.web.bindery.event.shared.UmbrellaException

Hi,

After adding around 1000 items to the MaterialTree the Browser gets awfully slow almost blocked.

I have to layers. Top layer is A-Z and seconde layer is text starting with the corresponding letter.

In this situation clicking on 'D' needs around 30 seconds to open.

Precondition:
Place a File Uploader widget inside a modal dialog with dismissable=false

Steps to repro:
Drop/add a file for download

Result:
The preview widget will display, but will not have focus and is not selectable.

Notes:
1:
When the dialog is dismissed, the preview widget will also be dismissed. If the dialog is reopened, sometimes the preview widget will not be displayed. (If I shrink the window so that the preview window is within the dialog view you can see it)

2:
This occurs in IE. In IE the preview widget displays in the lower right corner of the screen, outside of the modal dialog.

I tried this in Firefox and the preview widget displays in the lower right corner of the dialog and this issue doesn't occur.

Could this be a setting in my IE browser?

MaterialRichEditor should be able to bind on String for gwt editor support.

Solution 1)
implement LeafValueEditor
pro: easy
contra: confusing because of getText/setText & getValue/setValue

Solution 2)
Extend from base abstract class. MaterialValueBox comes close, but would need refactoring.

A color picker widget, following the material design guidelines.

I imagine something like this one (in terms of features):

• Flat mode: shows the canvas with the color gradient directly
• Color button: shows a button with the selected color, and when clicked, a popup shows the canvas and the other options
• Text input: same as the color button, but the color is written to a text input as hex string (and the user can input a color directly). When clicking on in, a popup shows the canvas and other options

Things to pay attention to:

• Touch support for mobile/tablet devices
• Responsive design (the popup shouldn't create an horizontal scroll bar on small screens)
• Ability to enable/disable certain features (like showing RGB/HSB values alongside HEX, a list of recent picked colors, presets and so on)

The autocomplete it not functioning very well due to the PR merged #9. This component need to be updated to show the items correctly.

Would it be possible to add something like

<m:MaterialTimePicker hasClearButton="true"/>

that displays also a delete or clear button in order to remove the time from inside the time picker?

I would suggest reverting the package reorganization of components:
referencing multiple components in a single ui binder file has become unmaintenaible because each component requires its own urn:import.