Ir al contenido principal

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

Arquitectura Java para Desarrollo con GAE y GWT Soñando con el trabajo ideal, el cual sería ganar dinero por investigar, pues es lo que me gusta y  divierte, decidí emprender con una startup Tecnológica que pretende hacer de los lugares desconocidos y preciosos en lugares conocidos y visitados. Para  desarrollar una startup que pretende tener repercusión mundial, se necesita ser ordenado desde un principio, la arquitectura de software y el marco de trabajo en el proyecto es tu primera valla a superar. No pretendo criticar el desarrollo ágil por la poca documentación que genera, pienso que deberíamos tomar sus técnicas enriquecedoras, por eso combino el desarrollo clásico con el desarrollo ágil. Ahora ustedes se preguntarán por qué hablo de desarrollo ágil y clásico, si el título dice “Arquitectura Java para Desarrollo con GAE y GWT”, pues tiene mucha relación, pues los desarrolladores estamos acostumbrados a tomar  frameworks y buenas prácticas de diseño y desarrollo para a

INSTALACION DE ORACLE 12C EN CENTOS 7 PARTE 2-3 ARRANQUE AUTOMATICO ...

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

Ojo pestaña y ceja: Cuando realizas particiones estandar en Linux, la última partición que debes agregar es la raíz y esta debe ocupar los últimos sectores del disco. Esto porque cuando quieras extender la raíz(/) no te dará dolores de cabeza. Aquí un ejemplo en KVM /dev/vda1 swap 8G /dev/vda2 /boot 1G /dev/vda3 / 11G Extendiendo un disco virtual en qemu para KVM * Clonar KVM virt-clone --original vm_debian10_t2micro_ps --name vm_debian10_t2micro_servercapedwarf_one --file /opt/images/debian10_capedwarf_one-vm.qcow2 * Información de ubicación de disco virtual del kvm virsh domblklist vm_debian10_t2micro_servercapedwarf_one * Información de disco virtual virt-filesystems --long -h --all -a /opt/images/debian10_capedwarf_one-vm.qcow2 qemu-img info /opt/images/debian10_capedwarf_one-vm.qcow2  * Incrementar tamaño de disco virtual de 20G a 30G qemu-img resize /opt/images/debian10_capedwarf_one-vm.qcow2 +10G virsh blockresize vm_debian10_t2micro_servercapedwarf_one /opt/images/debian10_cape