jQuery EasyUI Aplicación -Crear un lector de RSS Feed

En este tutorial, crearemos un lector de RSS Feed utilizando el framework jQuery EasyUI.

Usaremos los siguientes plugins:

  • layout: crea la interfaz de usuario de la aplicación.
  • datagrid: muestra la lista de RSS Feed.
  • tree: muestra los canales de feed.

Paso 1: Crear el Layout

<body class="easyui-layout">
    <div region="north" border="false" class="rtitle">
        jQuery EasyUI RSS Reader Demo
    </div>
    <div region="west" title="Channels Tree" split="true" border="false" style="width:200px;background:#EAFDFF;">
        <ul id="t-channels" url="data/channels.json"></ul>
    </div>
    <div region="center" border="false">
        <div class="easyui-layout" fit="true">
            <div region="north" split="true" border="false" style="height:200px">
                <table id="dg" 
                        url="get_feed.php" border="false" rownumbers="true"
                        fit="true" fitColumns="true" singleSelect="true">
                    <thead>
                        <tr>
                            <th field="title" width="100">Title</th>
                            <th field="description" width="200">Description</th>
                            <th field="pubdate" width="80">Publish Date</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div region="center" border="false" style="overflow:hidden">
                <iframe id="cc" scrolling="auto" frameborder="0" style="width:100%;height:100%"></iframe>
            </div>
        </div>
    </div>
</body>

Paso 2: Manejar eventos del DataGrid

Aquí manejaremos algunos eventos desencadenados por el usuario.

$('#dg').datagrid({
    onSelect: function(index,row){
        $('#cc').attr('src', row.link);
    },
    onLoadSuccess:function(){
        var rows = $(this).datagrid('getRows');
        if (rows.length){
            $(this).datagrid('selectRow',0);
        }
    }
});

Este ejemplo usa el evento 'onSelect' para mostrar el contenido del feed, y el evento 'onLoadSuccess' para seleccionar la primera fila.

Paso 3: Manejar eventos del Tree

Cuando los datos del Tree se hayan cargado, debemos seleccionar el primer nodo hoja, y llamar al método 'select' para seleccionar ese nodo. Usamos el evento 'onSelect' para obtener el nodo seleccionado, de modo que podamos obtener el valor 'url' correspondiente. Finalmente, llamamos al método 'load' del DataGrid para actualizar los datos de la lista de feeds.

$('#t-channels').tree({
    onSelect: function(node){
        var url = node.attributes.url;
        $('#dg').datagrid('load',{
            url: url
        });
    },
    onLoadSuccess:function(node,data){
        if (data.length){
            var id = data[0].children[0].children[0].id;
            var n = $(this).tree('find', id);
            $(this).tree('select', n.target);
        }
    }
});

Descargar ejemplos de jQuery EasyUI

jeasyui-app-rssreader.zip

Otras extensiones