Friday, December 27, 2013

Friday, December 13, 2013

Fix Maven Error: JAVA_HOME is not defined correctly on Mac OSX 10.9 Mavericks

If your JAVA_HOME env.variable is set correctly then 100500% 
you have to hardcode the $M2_HOME/bin/mvn script!


Ok. Here is the error massege itself:
Error: JAVA_HOME is not defined correctly. We cannot execute /System/Library/Frameworks/JavaVM.framework/Versions/CurrentJDK/Home/bin/java

Now Edit mvn script (it could be line 61):
Change the path of JAVA_HOME that starts with /System/... on your e.g. /Library/...
Change above the value of variable JAVA_VERSION on that you have e.g. jdk1.7_...

Why this issue took place is beacouse the path of JAVA_HOME in OSX 10.9 Maericks is different then it was in previous versions of OS. Before it was installed in /System... now it is in /Library.... BUT the maven script still sets the path of JAVA_HOME that starts in /System... Maybe in next version of Maven this will be changed. 

That's all.

Tuesday, December 10, 2013

UIBinder example

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"
             xmlns:tabs="urn:import:com.db.syndicate.html.common.gxtcomponents.tabs">
    <ui:style>
        .header{
            text-align: center;
            background-color: bisque;
            width: 100%;
        }
    </ui:style>
    <g:FlowPanel>
        <b:FluidContainer>
            <b:FluidRow width="100%">
                <b:Column size="12">
                    <!--<g:HTMLPanel addStyleNames="{style.header}">Header</g:HTMLPanel>-->
                    <g:FlowPanel ui:field="headerPanel"/>
                </b:Column>
            </b:FluidRow>
            <b:FluidRow>
                <b:Column size="3">
                    <b:FluidRow>
                        <b:Column size="12">
                            <!--menu-->
                            <g:FlowPanel width="100%" ui:field="menuPanel"/>
                        </b:Column>
                    </b:FluidRow>
                    <b:FluidRow>
                        <b:Column width="100%" size="12">
                            <!--filter-->
                            <g:FlowPanel ui:field="filterPanel"/>
                        </b:Column>
                    </b:FluidRow>
                </b:Column>
                <b:Column size="9">
                    <!--content-->
                    <g:FlowPanel width="100%" ui:field="contentPanel">
                        <tabs:TabBar header="true" ui:field="tabBar"/>
                    </g:FlowPanel>
                </b:Column>
            </b:FluidRow>
            <b:FluidRow>
                <!--Footer-->
            </b:FluidRow>
        </b:FluidContainer>
    </g:FlowPanel>
</ui:UiBinder>

Consider Errai Framework

Wednesday, December 4, 2013

Creating a Facebook-style Autocomplete with GWT in SmartGWT project

The example of how to Creat a Facebook-style Autocomplete with GWT http://raibledesigns.com/rd/entry/creating_a_facebook_style_autocomplete needs some additional coding and styling if you want to use it your SmartGWT project. Why and what you have to change:

1. There could be a wrong z-index for a PopupBox taht has list of suggestions for a SuggestBox.

  • In InputListWidget class create instance of DefaultSuggestionDisplay, set its default GWT style (e.g. all styles related to gwt-SuggestBoxPopup) and add proper z-index attribut to it. 
  • Then use another constructor for a SuggestBox that has additional parameter for DefaultSuggestionDisplay and pass to it the styled instance of DefaultSuggestionDisplay you have just created.


Example:
DefaultSuggestionDisplay defaultSuggestionDisplay = new DefaultSuggestionDisplay();
defaultSuggestionDisplay.setPopupStyleName("gwt-SuggestBoxPopup");

final SuggestBox box = new SuggestBox(getSuggestions(), itemBox, defaultSuggestionDisplay);

Example of CSS with styles for InputListWidget including gwt-SuggestBoxPopup:
.token-input-list-facebook {
list-style-type: none;
}

ul.token-input-list-facebook {
overflow: hidden; 
height: auto !important; 
height: 1%;
width: 400px;
border: 1px solid #8496ba;
cursor: text;
font-size: 12px;
font-family: Verdana, sans-serif;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background-color: #fff;
list-style-type: none;
clear: left;
}

ul.token-input-list-facebook li input {

border: 0;
width: 100px;
padding: 3px 8px;
background-color: white;
margin: 2px 0;
-webkit-appearance: caret;

}

li.token-input-token-facebook {

overflow: hidden; 
height: auto !important; 
height: 15px;
margin: 3px;
padding: 1px 3px;
background-color: #eff2f7;
color: #000;
cursor: default;
border: 1px solid #ccd5e4;
font-size: 11px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
white-space: nowrap;

}

li.token-input-token-facebook p {

display: inline;
padding: 0;
margin: 0;

}

li.token-input-token-facebook span {

color: #a6b3cf;
margin-left: 5px;
font-weight: bold;
cursor: pointer;

}

li.token-input-selected-token-facebook {

background-color: #5670a6;
border: 1px solid #3b5998;
color: #fff;

}

li.token-input-input-token-facebook {

float: left;
margin: 0;
padding: 0;
list-style-type: none;

}

.gwt-SuggestBoxPopup { 
   border: thin 1px solid green; 
   width: 200px;
   z-index: 999999 !important;
}
.gwt-SuggestBoxPopup.item { 
   color: red; 
}
.gwt-SuggestBoxPopup .item-selected { 
   color: gray;
}
.gwt-SuggestBoxPopup .suggestPopupTopLeft { 
   border: thin 1px solid green; 
}
.gwt-SuggestBoxPopup .suggestPopupTopLeftInner { 
   border: thin 1px solid green; 
}
.gwt-SuggestBoxPopup .suggestPopupTopCenter { 
   border: thin 1px solid green; 
}
.gwt-SuggestBoxPopup .suggestPopupTopCenterInner { 
   border: thin 1px solid green; 
}
.gwt-SuggestBoxPopup .suggestPopupTopRight {
   border: thin 1px solid green; 
}
.gwt-SuggestBoxPopup .suggestPopupTopRightInner {
   border: thin 1px solid green; 
}
.gwt-SuggestBoxPopup .suggestPopupMiddleLeft { 
   border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleLeftInner { 
   border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleCenter { 
   border: thin 1px solid green; width:200px;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleCenterInner { 
   border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleRight { 
   border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleRightInner { 
   border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomLeft {
   border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomLeftInner { 
   border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomCenter {
   border: thin 1px solid green;
 }
.gwt-SuggestBoxPopup .suggestPopupBottomCenterInner { 
   border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomRight { 
   border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomRightInner { 
   border: thin 1px solid green;
}

2. The fix above will correct only style of PopupBox and its z-index, but there could be a wrong styling for other InputListWidget components as well if your project does not inherit any GWT skins.

  • So be sure to use proper inheritance of it in your *.gwt.xml file e.g.:
    <inherits name='com.google.gwt.user.theme.standard.Standard' />
  • Or add related missed styles to your CSS along with gwt-SuggestBoxPopup styles.