Applications jQuery EasyUI -Création d'un lecteur de flux RSS

Dans ce tutoriel, nous allons créer un lecteur RSS en utilisant le framework jQuery EasyUI.

Nous utiliserons les plugins suivants :

  • layout : Créer l'interface utilisateur de l'application.
  • datagrid : Afficher la liste des flux RSS.
  • tree : Afficher les canaux de flux.

Étape 1 : Créer la mise en page

<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>

Étape 2 : Gestion des événements DataGrid

Ici, nous devons gérer certains événements déclenchés par l'utilisateur.

$('#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);
        }
    }
});

Cet exemple utilise l'événement 'onSelect' pour afficher le contenu du flux, et utilise l'événement 'onLoadSuccess' pour sélectionner la première ligne.

Étape 3 : Gestion des événements Tree

Une fois les données du Tree chargées, nous devons sélectionner le premier nœud feuille et appeler la méthode 'select' pour sélectionner ce nœud. Utilisez l'événement 'onSelect' pour obtenir le nœud sélectionné, afin de pouvoir récupérer la valeur 'url' correspondante. Enfin, nous appelons la méthode 'load' du DataGrid pour actualiser les données de la liste des flux.

$('#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);
        }
    }
});

Télécharger les exemples jQuery EasyUI

jeasyui-app-rssreader.zip

Autres extensions