Slider Básico en GWT

Usado en: www.develtrex.com

Bueno esto lo hice a raíz de no encontrar una implementación de un slider con código nativo GWT. Espero que puedan mejorarlo, lo que hice fue aprovecharme de las funcionalidades de los paneles que nos brinda el google web toolkit, he creado una clase que crea un objeto, en este caso es objeto es el slider, bueno espero les sirva y lo mejoren.

Pueden crear cuanto slider e imagenes en el slider quieren usar.

Clase para crear Objetos Slider:

package com.develtrex.website.view;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import com.develtrex.website.image.WebSiteImagen;
import com.google.gwt.dom.client.Style;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.DeckPanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;

public class Slider extends FlowPanel{
    private DeckPanel panelSlider=new DeckPanel();
    private Label nextLeft=new Label();
    private Label nextRight=new Label();
    private List<Image> listImage;
    private Timer timer;
    public Slider(ArrayList<Image> imagenes){
        listImage=imagenes;
        initComponents();
    }  
   
    private void initComponents(){
        this.add(nextLeft);
        this.add(panelSlider);
        this.add(nextRight);      
        panelSlider.setAnimationEnabled(true);
        Iterator<Image> i=listImage.iterator();
        while(i.hasNext()){
            panelSlider.add(i.next());                  
        }
        panelSlider.showWidget(0);
        stlSlider();
        stlDeckPanel();
        stlNextLeft();
        stlNextRigth();
        nextLeft.addClickHandler(click);
        nextRight.addClickHandler(click);
        timer=new Timer(){
            @Override
            public void run() {
                // TODO Auto-generated method stub
                int index = panelSlider.getVisibleWidget();
                index++;
                if (index == panelSlider.getWidgetCount()) index = 0;
                panelSlider.showWidget(index);
            }          
        };
        timer.scheduleRepeating(5000);
    }
   
    ClickHandler click=new ClickHandler(){

        @Override
        public void onClick(ClickEvent event) {
            if(event.getSource().equals(nextLeft)){
                int tamanno=listImage.size();
                int indexActual=panelSlider.getVisibleWidget();
                if(indexActual==0){
                    panelSlider.showWidget(tamanno-1);
                }else{
                    panelSlider.showWidget(indexActual-1);
                }
            }else if(event.getSource().equals(nextRight)){
                int tamanno=listImage.size();
                int indexActual=panelSlider.getVisibleWidget();
                if(indexActual==tamanno-1){
                    panelSlider.showWidget(0);
                }else{
                    panelSlider.showWidget(indexActual+1);
                }
            }
        }
      
    };
   
    private void stlNextLeft(){
        nextLeft.getElement().getStyle().setWidth(10,Unit.PCT);
        nextLeft.getElement().getStyle().setHeight(100,Unit.PCT);
        nextLeft.getElement().getStyle().setFloat(Style.Float.LEFT);
        nextLeft.getElement().getStyle().setProperty("background", "url("+WebSiteImagen.INSTANCE.getBack().getSafeUri().asString()+") no-repeat scroll 0% 0% transparent");
        nextLeft.getElement().getStyle().setProperty("backgroundPosition","center");
        nextLeft.getElement().getStyle().setBorderWidth(0, Unit.PX);
        nextLeft.getElement().getStyle().setFontSize(30, Unit.PX);
    }
   
    private void stlNextRigth(){
        nextRight.getElement().getStyle().setWidth(10,Unit.PCT);
        nextRight.getElement().getStyle().setHeight(100,Unit.PCT);
        nextRight.getElement().getStyle().setFloat(Style.Float.LEFT);
        nextRight.getElement().getStyle().setProperty("background", "url("+WebSiteImagen.INSTANCE.getNext().getSafeUri().asString()+") no-repeat scroll 0% 0% transparent");
        nextRight.getElement().getStyle().setProperty("backgroundPosition","center");
        nextRight.getElement().getStyle().setBorderWidth(0, Unit.PX);
        nextRight.getElement().getStyle().setFontSize(30, Unit.PX);
    }
   
    private void stlSlider(){
        this.getElement().getStyle().setWidth(100,Unit.PCT);
        this.getElement().getStyle().setHeight(100,Unit.PCT);
        this.getElement().getStyle().setMargin(0, Unit.PX);      
        this.getElement().getStyle().setPadding(0, Unit.PX);
        this.getElement().getStyle().setBorderWidth(0, Unit.PX);
    }
   
    private void stlDeckPanel(){
        panelSlider.getElement().getStyle().setWidth(80,Unit.PCT);
        panelSlider.getElement().getStyle().setHeight(100,Unit.PCT);
        panelSlider.getElement().getStyle().setFloat(Style.Float.LEFT);
    }
   
   
   
    //Getters y Setters
   
    public DeckPanel getPanelSlider() {
        return panelSlider;
    }

    public void setPanelSlider(DeckPanel panelSlider) {
        this.panelSlider = panelSlider;
    }
    public List<Image> getListImage() {
        return listImage;
    }

    public void setListImage(List<Image> listImage) {
        this.listImage = listImage;
    }

    public Label getNextLeft() {
        return nextLeft;
    }

    public void setNextLeft(Label nextLeft) {
        this.nextLeft = nextLeft;
    }

    public Label getNextRight() {
        return nextRight;
    }

    public void setNextRight(Label nextRight) {
        this.nextRight = nextRight;
    }

    public Timer getTimer() {
        return timer;
    }

    public void setTimer(Timer timer) {
        this.timer = timer;
    }

    public ClickHandler getClick() {
        return click;
    }

    public void setClick(ClickHandler click) {
        this.click = click;
    }
   
}



Usando la el objeto slider:

package com.develtrex.website.view;

import java.util.ArrayList;

import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.TabLayoutPanel;

public class TabSliderHome extends TabLayoutPanel{
    private Slider sldTecnology;
    private Image imgGoogleApps=new Image("http://tecnologyc.com/wp-content/2011/01/google_apps.jpg");
    private Image imgCentos=new Image("http://www.dacostabalboa.com/es/imagenes/CentOS-5.6.jpg");
    private Image imgRedHat=new Image("http://blog.linuxlatinamerica.com/wp-content/uploads/2011/10/redhat-logo.jpg");
    private Image imgUbuntu=new Image("http://web.educastur.princast.es/proyectos/grupotecne/archivos/tic/144ubuntu.jpg");
    public TabSliderHome(double barHeight, Unit barUnit) {
        super(barHeight, barUnit);
        // TODO Auto-generated constructor stub
        initComponents();
    }
   
    private void initComponents(){
        this.setAnimationDuration(1000);
        ArrayList<Image> images=new ArrayList<Image>();
        images.add(imgGoogleApps);
        images.add(imgCentos);
        images.add(imgRedHat);
        images.add(imgUbuntu);
        sldTecnology=new Slider(images);
        this.add(sldTecnology,"Tecnología");
        stlTabSliderHome();
    }
   
    private void stlTabSliderHome(){
        this.getElement().getStyle().setWidth(100,Unit.PCT);
        this.getElement().getStyle().setHeight(95,Unit.PCT);
        this.getElement().getStyle().setMargin(5, Unit.PX);       
        this.getElement().getStyle().setPadding(0, Unit.PX);
        this.getElement().getStyle().setBorderWidth(0, Unit.PX);
       
    }

}




Comentarios

Entradas más populares de este blog

Emprendiendo en la Nube - Arquitectura y Patrón de Diseño

Extendiendo espacio de la partición raíz en linux en particiones estándar KVM - Debian 10