can we help me with JsniBundle(tutorial for JsniBundle)

[Nikolay Dyakin]

Hi Guys,

i would like to implement external js lib (for instance HighCharts http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/ )

my steps is :

1.make inherits in modul

<inherits name='com.google.gwt.query.Query'/>

2. add dependency for Maven

       <dependency>

            <groupId>com.googlecode.gwtquery</groupId>

            <artifactId>gwtquery</artifactId>

            <version>1.4.3</version>

        </dependency>

3.and then use new feature JsniBundle (it's awesome, thanks to developers)

I have found inly one resourse 

https://code.google.com/p/gwtquery/source/browse/gwtquery-core/src/main/java/com/google/gwt/query/client/builders/JsniBundle.java?r=fd07d49ebc637dcbf8092a3a7346ab0e5c0f289e

my code is :

import com.google.gwt.core.client.GWT;

import com.google.gwt.core.client.JavaScriptObject;

import com.google.gwt.query.client.builders.JsniBundle;

import com.google.gwt.uibinder.client.UiBinder;

import com.google.gwt.uibinder.client.UiField;

import com.google.gwt.user.client.ui.Composite;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.SimplePanel;

import com.google.gwt.user.client.ui.Widget;

import static com.google.gwt.query.client.GQuery.*;

import com.google.gwt.query.client.GQuery;

import com.google.gwt.query.client.Function;

import com.google.gwt.query.client.Selector;

import com.google.gwt.query.client.Selectors;

import static com.google.gwt.query.client.GQuery.*;

import static com.google.gwt.query.client.css.CSS.*;

/**

 * Created with IntelliJ IDEA.

 * User: dyakin

 * To change this template use File | Settings | File Templates.

 */

public class barChart extends Composite {

    interface barChartUiBinder extends UiBinder<Widget, barChart> {

    }

    private static barChartUiBinder ourUiBinder = GWT.create(barChartUiBinder.class);

    @UiField

    SimplePanel barCgart;

    public interface HighCharts extends JsniBundle {

        @LibrarySource("http://code.highcharts.com/highcharts.js")

        public void initialize();

    }

    private void setUpCharts(){

        HighCharts charts = GWT.create(HighCharts.class);                  <--- uploading external lib 

               charts.initialize();

       $(barCgart).                <---   Could you help me, how developers can use JsniBundle to add charts from external js lib to existing widget?

    }

   barChart() {

        initWidget(ourUiBinder.createAndBindUi(this));

    }

}

links to existing resourses for gquery 

1.https://code.google.com/p/gwtquery/source/browse/gwtquery-core/src/main/java/com/google/gwt/query/client/builders/JsniBundle.java?r=fd07d49ebc637dcbf8092a3a7346ab0e5c0f289e

2.https://code.google.com/p/gwtquery/wiki/GettingStarted

Unfortunately, guide for Gquery doesn't cover some points((

i hope that we can together add new features to tutorial because it's difficult to find answer in the internet for JsniBundle especially for nood as i. 

[Manuel Carrasco Moñino]

There is an example I did for the GWT.create 2013 conferences: http://gwtquery.github.io/gwt.create-slides/gwtcreate2013/gwtcreate2013.html#33 (push on the play button to see the demo).

This is the full code of the demo

 public interface JQueryBundle extends JsniBundle {

   @LibrarySource(value = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js")

   public void initJQuery();

  }

  public static abstract class HighCharts implements JsniBundle {

    @LibrarySource("js/highcharts.src.js")

    public abstract void initHighcharts();

    public void drawChart(String id, JavaScriptObject props) {

      JavaScriptObject $container = JsUtils.runJavascriptFunction(window, "$", "#" + id);

      JsUtils.runJavascriptFunction($container, "highcharts", props);

    }

  }

  private JavaScriptObject charProps = $$("title: {text: 'Monthly Average Temperature'},"

      + "xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']},"

      + "yAxis: {title: {text: 'Temperature (°C)'},},"

      + "series: [{name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]},"

      + "{name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]},"

      + "{name: 'London',data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2]}]");

  public void testHighCharts() {

    $("<div id='chart'>").appendTo(document);

    // @include: JQueryBundle// @include: HighCharts

    JQueryBundle jQuery = GWT.create(JQueryBundle.class);

    HighCharts highCharts = GWT.create(HighCharts.class);

    //

    jQuery.initJQuery();

    highCharts.initHighcharts();

    highCharts.drawChart("chart", charProps);

  }

--
You received this message because you are subscribed to the Google Groups "gwtquery" group.
To unsubscribe from this group and stop receiving emails from it, send an email to gwtquery+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Alain Ekambi]

Why always reinvent the wheel ? 

There are two powerful hightcharts gwt libs out there,

why not use them ? 

--

Alain Ekambi

Co-Founder

Ahomé Innovation Technologies

http://www.ahome-it.com/

[Julien Dramaix]

The question is more how to use the JsniBundle feature of GQuery. Highcharts is just an example.

[Nikolay Dyakin]

Alain, highcharts gwt is not maintaining for 2 years , that's why i'm focusing on Gquery.

it's flexible and i hope that one will be part of GWT 3.0

пятница, 10 апреля 2015 г., 13:35:49 UTC+3 пользователь Julien Dramaix написал:

[Nikolay Dyakin]

Manuel Carrasco Moñino, thank you , i'll try create our charts 

[Daniel Blanc]

Hi Nikolay,

did you succeed ?

I am in the same situation than you and can not make it run.

I used the exact code provided by Manuel but I always get the error jQuery is not defined

in the browser console. 

I thought it could be due to an interference with GWTP so I tried again only with GWT, same result.

I tried to put timers to let time to jQuery to load but it does not help.

I would welcome any idea of what else I could investigate or check.

Regards

Daniel