Liferay Latino Blog » javascript http://www.lrlatinoblog.com.ar La comunidad latina de Liferay Sat, 19 Nov 2011 18:47:26 +0000 en hourly 1 http://wordpress.org/?v=3.3 Agregar un editor WYSIWYG a un portlet http://www.lrlatinoblog.com.ar/2011/11/19/agregar-un-editor-wysiwyg-a-un-portlet/ http://www.lrlatinoblog.com.ar/2011/11/19/agregar-un-editor-wysiwyg-a-un-portlet/#comments Sat, 19 Nov 2011 18:45:08 +0000 admin http://www.lrlatinoblog.com.ar/?p=210 Interesante nota de Erik Andersson en el site de Liferay donde explica como agregar un editor WYSIWYG a un portlet propio, y como se puede personalizar cambiando las barras de herramientas existentes o creando las propias.

 

]]> http://www.lrlatinoblog.com.ar/2011/11/19/agregar-un-editor-wysiwyg-a-un-portlet/feed/ 0 Comprimir CSS y JavaScript http://www.lrlatinoblog.com.ar/2011/04/09/comprimir-css-y-javascript/ http://www.lrlatinoblog.com.ar/2011/04/09/comprimir-css-y-javascript/#comments Sat, 09 Apr 2011 18:28:06 +0000 joyola83 http://www.lrlatinoblog.com/?p=69 Sigue leyendo →]]> YUI Compressor es una herramienta que permite la reducción del tamaño de archivos Javascript y CSS permitiendo una optimización del tiempo de transferencia entre el servidor web y el browser.

Los archivos Javascript son comprimidos eliminando comentarios y espacios en blanco, como asi tambien ofuscando variables locales utilizando nombres cortos. Los archivos CSS son comprimidos haciendo uso de expresiones regulares basadas en CSS minifier.

Instalación de YUI Compressor

sudo aptitude install yui-compressor

Comprimir y Obfuscar Javascript

cat *.js > original.js
yui-compressor -type js -o compressed.js original.js

Comprimir CSS

cat *.css > original.css
yui-compressor -type css -o compressed.css original.css

Utilizar YUI Compress con ANT

<path id="yuicompressor.classpath">
   <fileset dir="${yuicompressor.dir}">
         <include name="**/yuicompressor-2.2.5.jar"/>
         <include name="**/YUIAnt.jar"/>
         <!– include name="**/rhino*.jar"/ –>
   </fileset>
</path> 
 
<target name="js.compress">
    <taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask">
       <classpath>
          <path refid="yuicompressor.classpath"/>
       </classpath>
    </taskdef>
 
    <yuicompress warn="false" munge="yes" preserveallsemicolons="true" outputfolder="${js-min.dir}" >
        <fileset dir="${js.dir}" >
            <include name="javascript/*.js" />
          </fileset>
      </yuicompress>
</target>

Utilizar YUI Compress con Maven

<project>
...
  <build>
    <plugins>
...
      <plugin>
        <groupId>net.alchim31.maven</groupId>
        <artifactId>yuicompressor-maven-plugin</artifactId>
        <executions>
          <execution>
            <phase>package</phase>
            <goals>
              <goal>compress</goal>
            </goals>
          </execution>
        </executions>
        <configuration>
            <failOnWarning>true</failOnWarning>
            <nosuffix>true</nosuffix>
             <force>true</force>
             <aggregations>
                 <aggregation>
                      <!-- Elimina los archivos declarado en agregations (default: false) -->
                      <removeIncluded>false</removeIncluded>
 
                      <!-- Inserta una linea despues de concatenar los archivos (default: false) -->
                      <insertNewLine>false</insertNewLine>
 
                      <!-- Es el archivo generado a partir de comprimir cada JS -->
                      <output>${project.basedir}/${webcontent.dir}/js/compressed.js</output>
 
                      <!-- Los archivos JS que deben comprimirse -->
                      <includes>                
                          <include>javascript/*.js</include>
                      </includes>
 
                      <!-- Los archivos JS que deben omitirse -->
                      <excludes>
	                 <exclude>...</exclude>
                      </excludes>
                 </aggregation>
             </aggregations>
          </configuration>
      </plugin>
...
    </plugins>
  </build>
...
</project>
]]> http://www.lrlatinoblog.com.ar/2011/04/09/comprimir-css-y-javascript/feed/ 0 PortletURL en JavaScript http://www.lrlatinoblog.com.ar/2008/12/22/portleturl-en-javascript/ http://www.lrlatinoblog.com.ar/2008/12/22/portleturl-en-javascript/#comments Tue, 23 Dec 2008 03:40:40 +0000 joyola83 http://www.lrlatinoblog.com/?p=71 Sigue leyendo →]]> Una funcionalidad que acabo de descubrir en el Blog de Liferay es crear el PortletUrl en JavaScript.

Un ejemplo de PortletUrl es:

http://localhost:8080/web/guest/home?p_p_id=EDITAR_CUENTA&p_p_lifecycle=0&p_p_state=maximized&p_p_mode=view&_EDITAR_CUENTA_struts_action=%2Feditar_cuenta%2Fview

Aca le estoy pasando el portlet id, el estado del portlet, la fase del ciclo de vida, la acción de struts a ejecutar y 1 parametro (podrian ser muchos más).  Anteriormente la manipulación de esta url era medio complicada, ya que solo se podia generar a traves de JAVA o mediante una concatenación kilometrica de varios strings.  Con esta funcion nos proporciona mayor flexibilidad a la hora de programar.

<script type="text/javascript">
var portletURL = new Liferay.PortletURL(_PHASE);
portletURL.setParameter("key1", "value");
portletURL.setParameter("key2", "value");
portletURL.setPortletId(_PORTLET_ID);
</script>
 
<a href="javascript: portletURL.toString()">Go to</a>

Los valores que puede tomar _PHASE son:

  • ACTION_PHASE
  • RENDER_PHASE
  • RESOURCE_PHASE

También existen los siguientes métodos que permiten crear el PortletUrl según _PHASE:

  • Liferay.PortletURL.createActionURL();
  • Liferay.PortletURL.createRenderURL();
  • Liferay.PortletURL.createResourceURL();

Estos son los métodos restantes de la clase Liferay.PortletURL:

  • setCopyCurrentRenderParameters: function(copyCurrentRenderParameters);
  • setDoAsUserId: function(doAsUserId);
  • setEncrypt: function(encrypt);
  • setEscapeXML: function(escapeXML);
  • setLifecycle: function(lifecycle);
  • setName: function(name);
  • setParameter: function(key, value);
  • setPlid: function(plid);
  • setPortletConfiguration: function(portletConfiguration);
  • setPortletId: function(portletId);
  • setPortletMode: function(portletMode);
  • setResourceId: function(resourceId);
  • setSecure: function(secure);
  • setWindowState: function(windowState);
  • toString: function();
]]> http://www.lrlatinoblog.com.ar/2008/12/22/portleturl-en-javascript/feed/ 1 Mostrar un portlet en un PopUp http://www.lrlatinoblog.com.ar/2008/11/12/mostrar-un-portlet-en-un-popup/ http://www.lrlatinoblog.com.ar/2008/11/12/mostrar-un-portlet-en-un-popup/#comments Thu, 13 Nov 2008 02:27:07 +0000 joyola83 http://www.lrlatinoblog.com/?p=34 Sigue leyendo →]]> Armo la URL

<portlet:renderURL windowState="<%= LiferayWindowState.EXCLUSIVE.toString() %>" var="url">
   <portlet:param name="struts_action" value="/miportlet/popupview" />
</portlet:actionURL>

Llamo al POPUP

<script type="text/javascript">
   function mostrar_popup() {
      var _dialog = Liferay.Popup( 	{
      width: 700,
      modal: true,
      message: '<div class="loading-animation" />',
      position: ['center', 100],
      title: <liferay-ui:message key"popup-title"/>,
      resizable: false,
      draggable: false,
      onClose: function() {
         // se ejecuta cuando el portle se cierra
      }
   });
 
   jQuery.ajax( {
      url: "<%= url %>",
      success: function(message) {
         _dialog.html(message);
      }
   });
}
</script>
 
<a href="javascript:mostrar_popup();">mostrar popup</a>

Al definir el estado de la ventana como exclusivo, el resultado de la respuesta solamente va a ser el contenido del portlet al cual se invoca.

Ejemplo:


]]> http://www.lrlatinoblog.com.ar/2008/11/12/mostrar-un-portlet-en-un-popup/feed/ 3