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

install mysql 5.6 database on ubuntu 20.04

Command List: wget http://launchpadlibrarian.net/418347043/multiarch-support_2.29-0ubuntu2_amd64.deb sudo dpkg -i multiarch-support_2.29-0ubuntu2_amd64.deb sudo dpkg -i mysql-common_5.6.40-1ubuntu14.04_amd64.deb sudo dpkg -i libmysqlclient18_5.6.40-1ubuntu14.04_amd64.deb sudo dpkg -i libmysqlclient-dev_5.6.40-1ubuntu14.04_amd64.deb sudo dpkg -i libmysqld-dev_5.6.40-1ubuntu14.04_amd64.deb sudo apt install  libtinfo5 sudo apt install libncurses5 sudo apt install -f sudo dpkg -i mysql-community-client_5.6.40-1ubuntu14.04_amd64.deb sudo dpkg -i mysql-client_5.6.40-1ubuntu14.04_amd64.deb sudo dpkg -i mysql-community-server_5.6.40-1ubuntu14.04_amd64.deb sudo dpkg -i mysql-community-bench_5.6.40-1ubuntu14.04_amd64.deb sudo dpkg -i mysql-community-source_5.6.40-1ubuntu14.04_amd64.deb sudo dpkg -i mysql-server_5.6.40-1ubuntu14.04_amd64.deb sudo apt install python2 sudo apt install -f sudo dpkg -i mysql-community-test_5.6.40-1ubuntu14.04_amd64.deb sudo dpkg -i mysql-testsuite_5.6.40-1ubuntu1...

create kvm Ubuntu 20.04 with virsh by jofrantoba

wget -bqc https://mirror.freethought-internet.co.uk/ubuntu-releases/20.04/ubuntu-20.04-live-server-amd64.iso qemu-img create -f qcow2 /opt/images/oracle19c-vm.qcow2 200G sudo virt-install --name vm_ubuntu20_freenx --ram 2048 --vcpu 2 --disk path=/opt/images/ubuntu20_freenx-vm.qcow2 --os-type linux --os-variant ubuntu20.04 --network bridge=br2 --graphics vnc,listen=0.0.0.0 --console pty,target_type=serial --cdrom '/opt/iso/ubuntu-20.04-live-server-amd64.iso' Written by @jofrantoba

Configurar SQL Server 2005 para poner a la escucha el puero 1433

Como ustedes ya saben para poder conectarse a una base de datos sql a través de JDBC es necesario que el puerto 1433 se encuentre a la escucha de conexiones, muchos de nosotros hemos tenido este problema, bueno la solución es configurar a  través de la aplicacion "SQL SERVER CONFIGURATION MANAGER", ver figura numero1. fig 01 Luego hacer doble click en el item "Protocols for SQLEXPRESS", ver figura 02 fig 02 Como podemos observar en la figura 02 en la area de contenidos existe un item llamado "TCP/IP" este tiene que estar habilitado o en ingles "enabled" bueno ahora en este item hacemos un doble click para que nos aparezca una ventana como la siguiente, en la cual nos vamos a ubicar en la pestaña "IP ADRESSES", en esta pestaña se tiene que configurar los puertos. fig 03  En la figura 04 se observara que todos los item de TCP Dynamic Ports tienen al cero "0" por valor y TCP port esta ...