Hola que tal? En esta oportunidad estoy realizando un pequeño portafolio web y buscando un poco en internet me encontré con esta librería bastante interesante.

Esta librería tiene algunas estructuras que tanto html y js que se deben seguir para poder llegar acabo sus animaciones,

En este caso estoy tratando de realizar el proceso de filtrado con grid.filter().

Código html: En este caso, estoy usando el parámetro "data-(atributo)" para llamar a las categorías por su atributo es justo data-categoria="" ya que los demás son otros atributos que usare en otro momento.

HTML:

<div class="categorias" id="categorias">
 
                        <a href="#" class="text"> All Categories</a>
                        <a href="#">Graphic Design</a>
                        <a href="#">Web Design</a>
                        <a href="#">Sketches</a>
 
                    </div>
</div>
<div id="contenedor2">
<section class="grid" id="gridjs">
 
 
    <div class="item" 
  data-categoria="GraphicDesign" 
  data-tipo="Graphic design PSD illustrator art comic"
   data-description="Art | PSD | illustrator">
 
    <div class="item-content">
     <img src="imgport/Alaz.png" alt="">
    </div>
    </div>
    <div class="item" 
    data-categoria="GraphicDesign" 
     data-tipo="Graphic designart PSD illustrator art comic" 
     data-description="Art  illustrator  Comic">
    <div class="item-content">
     <img src="imgport/alaz3.png" alt="">
    </div>
  </div>
 
 
  <div class="item" 
  data-categoria="GraphicDesign" 
  data-tipo="Graphic design art PSD  music party"
  data-description="Photo | PSD | Party">
    <div class="item-content">
     <img src="imgport/Photo-Enveroiment.png" alt="">
    </div>
  </div>
 
  <div class="item" 
  data-categoria="GraphicDesign" 
  data-tipo="Graphic design Photo person PSD stone"
   data-description="Photo | illustrator | fresh air" class="GraphicDesign">
    <div class="item-content">
     <img src="imgport/Mujer.png" alt="">
    </div>
  </div>
 
  <div class="item" 
  data-categoria="GraphicDesign" 
  data-tipo="Graphic design art PSD comic " 
  data-description=" Art | illustrator - PSD | City">
    <div class="item-content">
     <img src="imgport/Photo - City.png" alt="">
    </div>
  </div>
 
  <div class="item" 
  data-categoria="WebDesign" 
  data-tipo="Sketches Website Boceto" 
  data-description=" Briefcase design | Website">
    <div class="item-content">
     <img src="imgport/Web-design.png" alt="">
    </div>
  </div>
  <div class="item" 
  data-categoria="Sketches" 
  data-tipo="Sketches Website Boceto" 
  data-description=" Briefcase design | Website">
    <div class="item-content">
     <img src="imgport/Sketche.png" alt="">
    </div>
  </div>

Código JS: La librería tiene diferentes formas de ser ejecuta, en tal caso lo único que busco es cuando le de a los enlaces, estos me devuelvan solo las imágenes de esa categoría seleccionada.

const grid = new Muuri('.grid', {
 
layout: {
 
    rounding: false
}
 
  });
 
 
window.addEventListener('load', () => {
 
grid.refreshItems().layout();
document.getElementById('gridjs').classList.add('loadimg'); /*Carga todas las imagenes con una pequeña transicion css*/
 
const enlace = document.querySelectorAll('#categorias a');
enlace.forEach((catego) =>  {
 
/*Obtengo las categorias por medio queryselector y luego paso un foreach para ir recogiendo las imagenes respectivas*/
    catego.addEventListener('click' ,  (evento) => {
 
evento.preventDefault();
 
console.log(enlace);
 
 
    grid.filter('[data-categoria="GraphicDesign"]');
/*Obtengo solo las categorias las imagenes de GraphicDesign*/
 
});
 
});
 
});
 
 

Si alguien ha trabajado con esta librería, queria saber como puedo filtrar las imágenes cuando le haga click a un enlace y que solo me traiga la categoría que fue seleccionada y me devuelva solo los atributos que contenga esa categoría. Lo único que logro es que me traiga una sola categoría.

Alguna idea?

Documentacion: https://haltu.github.io/muuri/

IMG de muestra: https://i.stack.imgur.com/hUhPp.jpg
Cuando las categorias se desaparecen y solo trae la categoría de GraphicDesign: https://i.stack.imgur.com/Trlh1.jpg

Hola que tal? gracias por responder, escribe este post con la intencion de aclarar un poco mis dudas, acerca de los frames y bases de datos. Pero con respecto a lo que dices que tengo malas practicas, a lo que a mi concierne esta bien, ya que enrealidad estoy usando variables globales para inicializar y obtener datos en los metodos, o te estas refiriendo a que las variables G las inicializo con otras coasa?.  No entendi tu punto.

Tampoco hago las cosas por salir del paso, esto es un foro de internet donde todos los dias un nuevo usuario se registra y puede exponer su inquietud con respecto algun proyecto o ejercicio de programacion, claro estan esas personas que solo se registran para que les hagan la tarea por ejemplo o publican 5 o 10 post con lo mismo en esta u otra sección para que les contesten rapido. Yo por lo menos me detuve a leer las reglas del foro para formular este post y expuse todo lo que estaba aconteciendo con mi programa.


Pero no te preocupes, ya resolvi mi problema y para no gastar "tanta saliba" explicare la solucion muy breve:

SEÑORES! ANTES DE GUARDAR LOS DATOS EN UNA BD CON CUALQUIER OBJETO Y TENER UNA CLASE  APARTE COMO LA MIA... POR FAVOR, ASEGURENSE Y ESTEN PENDIENTES CUANDO DECLAREN LOS OBJETOS!, SIEMPRE PASEN LAS REFERENCIAS! (AL CONSTRUCTOR DE LA GUI EN ESTE CASO).  


Gracias ^^.

PD: Cambie un poco mi codigo principal (BD), ya que en algunas partes estaba equivocado con respecto a logica.

Hola buenas tardes a todos, soy nuevo en este foro y quería preguntarles a ustedes (iniciados o expertos en el tema) sobre como se debe cargar una foto a una base de datos.

Se que me diran: OYE! PERO EN YOUTUBE Y INTERNET AHI MUCHOS TUTORIALES DE ESO.... Lo se , una de la cosas que me gusta hacer es buscar e indagar siempre sobre un problema o algo que no se, por que de verdad es esencial orientarte y aprender algo sobre los temas y/o personas que están en este mundo de  programación, pero sinceramente, por mas que leo y busco no encuentro la forma de como solucionar esto.

Mi código es el siguiente:

            

public void InsertoImagen (ImagenPrincipalPR imagenPrincipalPR)
{
try{
con=DriverManager.getConnection("jdbc:postgresql://127.0.0.1:5432/Sistem.DB","postgres","ender");
String SQLInsert = ("insert into categoria_pr (nombre_pr,descripcion_pr,image_pr,enum_pk)"
+ "VALUES (?,?,?,NULL)");
if (imagenPrincipalPR.getFoto() != null)
{
try{           
{
String SQLInsert2 = ("insert into categoria_pr (image_pr) "
+ "values (?)");
archivo = imagenPrincipalPR.getFoto().getAbsoluteFile();
convertir = new FileInputStream (archivo);
Sta = con.prepareStatement(SQLInsert2);
Sta.setBinaryStream(3, convertir ); 
}            
} catch (FileNotFoundException ex) {
ex.printStackTrace();
}
}    
Sta = con.prepareStatement(SQLInsert);
Sta.setString(1, imagenPrincipalPR.getNombre());
Sta.setString(2, imagenPrincipalPR.getDescripcion());
Sta.setBinaryStream(3, convertir );
Sta.executeUpdate();
} catch (SQLException ex) {
ex.printStackTrace();
}
finally
{
try {
con.close();
Sta.close();
} catch (SQLException ex) {
ex.printStackTrace();
}
}
}
}

El programa trata de insertar y devolver 3 campos: 2 Strings (Nombre y descripcion),1 File (que este caso es la foto en cuestion).

Como podran darse cuenta, estoy usando el metodo de encapsulacion (SET y GET) para devolver los datos propuestos, luego mediante un Object (unido a un código que verán despues) se obtendran todos los campos de un JDialog. El campo NULL en String SQLInsert, es un tupla de tipo serial que no usare en mi codigo, solo se insertan los datos vistos en el codigo.

Ok, con respecto a la validacion  if (imagenPrincipalPR.getFoto() != null), la coloque debido a que el tipo de error de que me salta es NULLPOINTEREXCEPTION. Despues de leer mucho y por lo que he visto, Esto salta cuando algun objeto de mi clase o (algun arguemento en el metodo) es nulo y debe especificarse. Mi metodo lo realize asi, ya que por logica mia , todo el constructor me devuelve nulos, asi que por lo tanto debo hacer validacion para que no me salte el problema, o estoy argumentado mal en esta parte?.

Tambien, tengo una pregunta con respecto a esta parte del método:

¿Es necesario volver a insertar solo ese dato en el if?, con esto digo que debido a que me devuelve nulos, se debería de insertar nuevamente a la base de datos? o no seria tan necesario?.

                                        

https://ibb.co/Gk1FcS4

Como pueden ver en la imagen tengo todos los campos con el cual se obtendrantodos los datos especificados por el usuario. Luego por medio de un JButtom abro un JFileChooser que me permite pasar la imagen a un JLabel y ajustarla a su tamaño.

     
Codigo de mi Buttom (Aceptar):

Nom = this.NomCate.getText();
Descrip = this.DescripMain.getText();
if (imagenCateP == null)
{
JOptionPane.showMessageDialog(this, "Debe Escojer una foto");
}
else{
ImagenPrincipalPR Creacion = new ImagenPrincipalPR(Nom, Descrip, imagenCateP);
Base.InsertoImagen(Creacion);
}

Cabe mencionar que todos las variables manejadas en este codigo (Buttom) son globales, (La variable imagenCateP) devuelve la path, por medio del JFileChooser que declare anteriormente. Como quiero asegurarme que la imagen sea insertada hago mi validacion antes de darle al click al buttom, si no es nulo, llamo al objeto Base, luego al constructor de mi clase y le paso el objeto al metodo explicado arriba.

Al momento de ejecutar y darle al bottom me tira la excepcion conocida por todos..  

Exception in thread "AWT-EventQueue-0" java.lang.NullPointerException
	at VentanaDeCreacion.AceptarActionPerformed(VentanaDeCreacion.java:213)
	at VentanaDeCreacion.access$400(VentanaDeCreacion.java:21)
	at VentanaDeCreacion$4.actionPerformed(VentanaDeCreacion.java:119)
	at javax.swing.AbstractButton.fireActionPerformed(AbstractButton.java:2022)
	at javax.swing.AbstractButton$Handler.actionPerformed(AbstractButton.java:2348)
	at javax.swing.DefaultButtonModel.fireActionPerformed(DefaultButtonModel.java:402)
	at javax.swing.DefaultButtonModel.setPressed(DefaultButtonModel.java:259)
	at javax.swing.plaf.basic.BasicButtonListener.mouseReleased(BasicButtonListener.java:252)
	at java.awt.Component.processMouseEvent(Component.java:6539)
	at javax.swing.JComponent.processMouseEvent(JComponent.java:3324)
	at java.awt.Component.processEvent(Component.java:6304)
	at java.awt.Container.processEvent(Container.java:2239)
	at java.awt.Component.dispatchEventImpl(Component.java:4889)
	at java.awt.Container.dispatchEventImpl(Container.java:2297)
	at java.awt.Component.dispatchEvent(Component.java:4711)
	at java.awt.LightweightDispatcher.retargetMouseEvent(Container.java:4904)
	at java.awt.LightweightDispatcher.processMouseEvent(Container.java:4535)
	at java.awt.LightweightDispatcher.dispatchEvent(Container.java:4476)
	at java.awt.Container.dispatchEventImpl(Container.java:2283)
	at java.awt.Window.dispatchEventImpl(Window.java:2746)
	at java.awt.Component.dispatchEvent(Component.java:4711)
	at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:760)
	at java.awt.EventQueue.access$500(EventQueue.java:97)
	at java.awt.EventQueue$3.run(EventQueue.java:709)
	at java.awt.EventQueue$3.run(EventQueue.java:703)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:74)
	at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:84)
	at java.awt.EventQueue$4.run(EventQueue.java:733)
	at java.awt.EventQueue$4.run(EventQueue.java:731)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:74)
	at java.awt.EventQueue.dispatchEvent(EventQueue.java:730)
	at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:205)
	at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:116)
	at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:109)
	at java.awt.WaitDispatchSupport$2.run(WaitDispatchSupport.java:190)
	at java.awt.WaitDispatchSupport$4.run(WaitDispatchSupport.java:235)
	at java.awt.WaitDispatchSupport$4.run(WaitDispatchSupport.java:233)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.awt.WaitDispatchSupport.enter(WaitDispatchSupport.java:233)
	at java.awt.Dialog.show(Dialog.java:1084)
	at java.awt.Component.show(Component.java:1671)
	at java.awt.Component.setVisible(Component.java:1623)
	at java.awt.Window.setVisible(Window.java:1014)
	at java.awt.Dialog.setVisible(Dialog.java:1005)
	at VentanaDeCreacion$6.run(VentanaDeCreacion.java:265)
	at java.awt.event.InvocationEvent.dispatch(InvocationEvent.java:311)
	at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:758)
	at java.awt.EventQueue.access$500(EventQueue.java:97)
	at java.awt.EventQueue$3.run(EventQueue.java:709)
	at java.awt.EventQueue$3.run(EventQueue.java:703)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:74)
	at java.awt.EventQueue.dispatchEvent(EventQueue.java:728)
	at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:205)
	at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:116)
	at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:105)
	at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:101)
	at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:93)
	at java.awt.EventDispatchThread.run(EventDispatchThread.java:82)

He intentado de todo, cambiar, establecer, quitar, poner, colocar, probar en la consola y la verdad no se que mas hacer.

Tampoco me voy a excusar con decir: "estoi empezando", por el poco tiempo que llego en java (y esto va para todo lenguaje) se les debe dedicar tiempo y con las practicas tratar de resolver los errores que surgen. Pero algo de orientacion no esta demas  .

Gracias por leer y espero no haberte aburrido con tanto texto.