Jak se dělá Plasmoid – 2 (popup IDOS)

28. 12. 2009 | Dan Vrátil | Programování | 5042×

Po minulém krátkém představení Plasmoidů si dnes ukážeme, jak lze vytvořit vyskakovací Plasmoid a jak v Plasmoidech používat různé ovládací prvky.

Co budeme dnes tvořit?

Dlouho jsem přemýšlel nad tím, jaký dnes použiji příklad. Nakonec jsem se nechal inspirovat komentářem v diskuzi u minulého článku a v dnešním dílu si vytvoříme plasmoid na vyhledávání spojení přes IDOS.cz. Protože se ale takový applet nepoužívá pořád a nemusí být neustále na očích, ukážeme si, jak ho lze skrýt do ikony v panelu. Tarball s kompletními zdrojovými kódy a ikonkou můžete stáhnout zde: idos_search-sources.tar.gz.

PopupApplet

Pokud píšeme Plasmoid s PopupAppletem, nestačí nám jen samotný PopupApplet. Pokud vložíme PopupApplet do panelu, zobrazí se v panelu pouze jeho ikonka a až po kliknutí na ni se objeví ovládací prvek (tzv. widget, například kalendář nebo QWidget) Plasmoidu. Pokud ho vložíme přímo na plochu, zobrazí se rovnou zmiňovaný ovládací prvek. Dnešní díl proto bude mít víc souborů se zdrojovými kódy.

Kód

idossearch.h

#ifndef IDOSSEARCH_HEADER
#define IDOSSEARCH_HEADER

#include <QGraphicsWidget>

// Dopředné deklarace
// Použití vlastního jmenného prostoru pro applet s více třídami je vhodné, ale ne nezbytné
namespace IDOSSearchApplet
{
  class SearchWidget;
}

namespace Plasma 
{
  class IconWidget; 
}
 
class IDOSSearch : public Plasma::PopupApplet
{
  Q_OBJECT
  public:
    // Konstruktor
    IDOSSearch(QObject *parent, const QVariantList &args);
    // Destruktor
    ~IDOSSearch();

    // Povinna implementace metody init()
    void init();

    // Povinna implementace metody graphicsWidget()
    QGraphicsWidget *graphicsWidget();
    
  private:
    // Ikona plasmoidu
    Plasma::IconWidget *m_icon;
    
    // Hlavní widget s ovládacími prvky
    IDOSSearchApplet::SearchWidget *m_searchWidget;
};

#endif

Zde se zmíním hlavně o metodě graphicsWidget(). Tato metoda vrací ukazatel na widget, který se má zobrazit. V tomto případě je to ukazatel na QGraphicsWidget. Pokud místo QGraphicsWidget použijete QWidget, musíte implementovat metodu widget(), která bude vracet ukazatel na QWidget. Tuto metodu používá Plasma, aby mohla přistupovat zejména k metodám show() a hide(), které slouží k zobrazení respektive skrytí widgetu.

idossearch.cpp

#include "idossearch.h"
#include "searchwidget.h"

#include <Plasma/IconWidget>

#include <KIcon>

using namespace Plasma;
using namespace IDOSSearchApplet;

// Nesmíme zapomenout na makro pro registraci appletu
K_EXPORT_PLASMA_APPLET(idos_search, IDOSSearch);

IDOSSearch::IDOSSearch(QObject *parent, const QVariantList &args)
    : Plasma::PopupApplet(parent, args),
    m_icon(0),
    m_searchWidget(0)
{
    // Náš applet nemá žádné nastavení, takže skryjeme tuto volbu z kontextové nabídky appletu
    setHasConfigurationInterface(false);  
    setAspectRatioMode(Plasma::IgnoreAspectRatio);
       
    // Inicializuje widget
    graphicsWidget();
}

IDOSSearch::~IDOSSearch()
{
    delete m_searchWidget;
}

void IDOSSearch::init()
{
    m_icon = new Plasma::IconWidget(KIcon("idos_search",NULL),QString());
    setPopupIcon(m_icon->icon());
}

QGraphicsWidget* IDOSSearch::graphicsWidget() 
{
    // Pokud je m_searchWidget NULLový, vytvoří nový SearchWidget (odvozený od QGraphicsWidget) a vrátí ukazatel na něj
    if (!m_searchWidget) {
      m_searchWidget = new SearchWidget(this);
    }
    
    return m_searchWidget;
}

#include "idossearch.moc"

Zde není moc co popisovat, až na novou metodu graphicsWidget() jsme implementovali ostatní metody stejně jako u Plasmoidu v minulém díle. Milé na tom je, že jediné, co musíme pro Plasmu implementovat, je funkce graphicsWidget() (případně widget()) a o zobrazování, skrývání a všechno další už se postará Plasma sama právě prostřednictvím této metody.

Ikonu (idos_search.svgz) KDE automaticky vyhledá v jedné z výchozích složek (lze definovat i vlastní složky, a to nahrazením hodnoty NULL objektem třídy KIconLoader).

idossearch.h

#ifndef SEARCHWIDGET_HEADER
#define SEARCHWIDGET_HEADER

#include <QObject>
#include <QGraphicsWidget>
#include <QGraphicsLinearLayout>
#include <QtNetwork/QNetworkAccessManager>
#include <QtNetwork/QNetworkReply>

#include <KIcon>

#include <Plasma/Applet>
#include <Plasma/LineEdit>
#include <Plasma/Label>
#include <Plasma/PushButton>
#include <Plasma/WebView>

// Dopředné deklarace
class IDOSSearch;

namespace Plasma
{
  class Icon;
  class Dialog; 
}

namespace IDOSSearchApplet
{
  
  class SearchWidget : public QGraphicsWidget
  {
    Q_OBJECT
    public:
      // Konstruktor
      SearchWidget(QGraphicsWidget *parent = 0);
      // Destruktor
      ~SearchWidget() { };
      
    private:
      // Ovládací prvky widgetu
      QGraphicsLinearLayout *m_layout;
      QNetworkAccessManager *m_network_manager;
      
      Plasma::LineEdit *m_from;
      Plasma::LineEdit *m_to;
      Plasma::Label *m_from_label;
      Plasma::Label *m_to_label;
      Plasma::PushButton *m_search_button;
      Plasma::WebView *m_webview;	

    private slots:
      void onSearch();
      void onDataLoaded(QNetworkReply *reply);
  };
}

#endif

Toto je třída hlavního widgetu. Zvolil jsem QGraphicsWidget místo QWidget, protože jsem chtěl použít implementaci ovládacích prvků v Plasmě. Pokud bych použil obyčejný QWidget, musel bych použít i původní Qt třídy (případně odvozené KDE třídy). A proč jsem je nepoužil? Protože prvky v Plasmě jsou odvozené od KDE (které jsou odvozené od Qt) prvků, ale navíc implementují překreslování a grafiku Plasmy. Kdybych použil KDE třídy, řídil by se jejich styl nastavením stylu KDE. Takto se jejich vzhled řídí nastavením vzhledu Plasmy.

searchwidget.cpp

#include "searchwidget.h"

#include <Plasma/Theme>
#include <Plasma/Dialog>

#include <KUrl>

#include <QSizePolicy>
#include <QNetworkRequest>
#include <QRegExp>

using namespace Plasma;
using namespace IDOSSearchApplet;

SearchWidget::SearchWidget(QGraphicsWidget *parent)
    : QGraphicsWidget(parent)
{ 
    // Vytvoří vertikální layout
    m_layout = new QGraphicsLinearLayout(Qt::Vertical,this);
    
    // Vytvoří popisku
    m_from_label = new Plasma::Label(this);
    m_from_label->setText("Odkud:");
    m_layout->addItem(m_from_label);
    
    // Vytvoří jednořádkové vstupní pole
    m_from = new Plasma::LineEdit(this);
    m_layout->addItem(m_from);
    
    m_to_label = new Label(this);
    m_to_label->setText("Kam:");
    m_layout->addItem(m_to_label);

    m_to = new LineEdit(this);
    m_layout->addItem(m_to);
    
    // Vytvoří tlačítko
    m_search_button = new Plasma::PushButton(this);
    m_search_button->setText("Hledat!");
    // Sváže událost kliknutí se slotem onSearch()
    connect(m_search_button, SIGNAL(clicked()),this,SLOT(onSearch()));
    m_layout->addItem(m_search_button);
    
    // Vytvoří WebView – na WebKitu založené plátno pro renderování HTML stránek
    m_webview = new Plasma::WebView(this);
    m_webview->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    m_webview->setPreferredSize(260,200);
    m_layout->addItem(m_webview);
    
    this->setLayout(m_layout);
    this->setMinimumSize(260, 420);

    // Vytvoří NetworkAccessManager a sváže jeho signál finished() se slotem onDataLoaded()
    m_network_manager = new QNetworkAccessManager(this);
    connect(m_network_manager,SIGNAL(finished(QNetworkReply*)),this,SLOT(onDataLoaded(QNetworkReply*)));
}

void SearchWidget::onSearch()
{
   // Adresa stránek s vyhledáváním
   QString url = "http://ttwap.chaps.cz/conn.aspx?Odkud="+m_from->text()+"&Kam="+m_to->text()+"&Datum=&Cas=&JR=&OP=&Lang=C&Format=2&cmd=search";
   // Stáhne stránku
   m_network_manager->get(QNetworkRequest(url));

}

void SearchWidget::onDataLoaded(QNetworkReply* reply)
{
   // Načte data (kód stránek) do proměnné
   QString data = reply->readAll();
   // Převede wap stránky na HTML stránky
   data.replace(QRegExp("<!DOCTYPE*>"),"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd\">");
   data.replace("<wml>","<html>");
   data.replace("</wml>","</html>");
   data.replace("<card","<body");
   data.replace("</card>","</body>");
   data.remove(QRegExp("<template>*</template>"));

   // a výsledný kód zobrazí ve WebView
   m_webview->setHtml(data.toLatin1(),KUrl("http://ttwap.chaps.cz"));
}

#include "searchwidget.moc"

Nejdřív bych rád objasnil, proč jsem pro načítání stránky použil tak složitou metodu. U běžných HTML stránek by stačilo použít metodu setUrl(), která jako parametr přijímá objekt KUrl. Stránky, které používám pro vyhledávání, jsou ale WAPové a s takovými stránkami si WebKit neporadí. Proto jsem využil modul QtNetwork a stránky nejprve stáhnu, poté odstraním či nahradím nežádoucí elementy tak, že získám HTML kód a ten pak pomocí metody setHtml() zobrazím. Podrobněji o použití QNetworkAccessManager se dočtete v článku Konzolové programy v Qt – Práce s HTTP a FTP od Davida Watzkeho.

Objekty LineEdit, Label i PushButton jsou odvozené od KLineEdit, respektive KLabel a KPushButton, k dispozici tedy máte stejné metody a jejich použití se nijak neliší, jen jim jako rodiče lze přiřadit pouze QGraphicsWidget.

plasma-applet-idos_search.desktop

[Desktop Entry]
Name=IDOS Search
Type=Service
Icon=idos_search

X-KDE-ServiceTypes=Plasma/Applet
X-KDE-Library=plasma_applet_idos_search
X-KDE-PluginInfo-Author=Dan Vratil
X-KDE-PluginInfo-Email=vratil@progdansoft.com
X-KDE-PluginInfo-Name=idos_search
X-KDE-PluginInfo-Version=0.1
X-KDE-PluginInfo-Website=http://www.abclinuxu.cz
X-KDE-PluginInfo-Category=Examples
X-KDE-PluginInfo-Depends=
X-KDE-PluginInfo-License=GPL
X-KDE-PluginInfo-EnabledByDefault=true

CMakeLists.txt

# Název projektu
project(plasma-idos_search)
 
# Tentokrát kromě KDE potřebujeme i knihovny Qt (kvůli modulu QtNetwork)
find_package(KDE4 REQUIRED)
find_package(Qt4 REQUIRED)

include(KDE4Defaults)
include(${QT_USE_FILE})

add_definitions (${QT_DEFINITIONS} ${KDE4_DEFINITIONS})
include_directories(
   ${CMAKE_SOURCE_DIR}
   ${CMAKE_BINARY_DIR}
   ${KDE4_INCLUDES}
   ${QT_INCLUDE_DIR}
   ${QT_QTNETWORK_INCLUDE_DIR} )

set(QT_USE_QTNETWORK TRUE)
 
# Zdrojové kódy
set(idos_search_SRCS idossearch.cpp searchwidget.cpp)
 
kde4_add_plugin(plasma_applet_idos_search ${idos_search_SRCS})

# Slinkuje knihovnu appletu
target_link_libraries(plasma_applet_idos_search 
                      ${KDE4_PLASMA_LIBS} 
		      ${KDE4_KDEUI_LIBS}
		      ${QT_QTNETWORK_LIBRARY})
 
# Nainstaluje knihovnu, soubor .desktop a ikonu
install(TARGETS plasma_applet_idos_search
        DESTINATION ${PLUGIN_INSTALL_DIR})
 
install(FILES plasma-applet-idos_search.desktop
        DESTINATION ${SERVICES_INSTALL_DIR})

install(FILES idos_search.svgz
	DESTINATION ${CMAKE_INSTALL_PREFIX}/share/icons/hicolor/scalable/apps)

Závěr

Nyní nám už nic nebrání applet přeložit a spustit. Pokud ho vložíte na plochu, zobrazí se vám rovnou SearchWidget. Pokud ho vložíte do panelu, zobrazí se pouze ikonka a až po kliknutí na vás vyskočí SearchWidget. Samozřejmě že tento Plasmoid má k dokonalosti hodně daleko. Kvůli zmíněným problémům s renderováním WAP stránek nefungují odkazy pro zobrazení následujících/předchozích spojů, nelze nastavit čas odjezdu/příjezdu a chybí třeba ukazatel načítání. To všechno bych rád napravil v příštím díle, kde veškeré zpracování přeneseme do DataEnginu, čímž vlastně oddělíme část pro zpracování dat a pro zobrazení výstupu.

       

Komentáře

[xavier]

Nemůžu si pomoct, ale "články" o Qt na tomhle serveru mi většinou připadají jako okomentovaný zdroják. Nechápu proč jsou do textu vkládané kompletní zdrojové kódy, když jsou v přiloženém archivu. Ale třeba je to cíl a nesedlo to jenom mě, protože ohlasy na tyhle články jsou celkem dobré.

[David Watzke]

To je ale v podstatě cílem (okomentovaný zdroják). Má to bejt víc o kódu, než o povídání. V textu jsou zdrojáky z pochopitelnýho důvodu, archívy jsme začli přidávat až na požádání (teda aspoň já).

[progdan]

Kod je nazornejsi. Kdyz okomentuju spravne kod a jen pod nim vysvetlim co to dela, proc to tak dela atd. tak je to mnohem znazsi na pochopeni nez kdybych psal sahodlouhe romany, coz by vlastne nebylo nic jineho nez navod jak ten kod napsat radek po radce. Uprimne - tebe by to bavilo cist?

[MaSo]

+1

[=^..^= AmigaPower®]

Já sem zatim ani nepochopil, jak ty hemero...plasmoidy fungujou, jestli jde ta plasma někde nastavovat atd. Používám nějakou blbost na počasí a až na vyjímky mi to furt běží z cache, bez možnosti s čimkoliv se spojit. Když dám "instalovat nový elementy plasmy", tak to na mně vyplivne že se nemůže spojit s databází, ale databáze nikde nastavit nejde, spojilo se mi to s ní zatim jednou. Vysvětlí mi to někdo? Seriál mi příde zajímavej, když jsem viděl první díl, přemejšlel sem dokonce o plasmoidu na výpočet dne porodu kočky...

[progdan]

Kazdy Plasmoid ma svoje individualni nastaveni (kliknout pravym na Plasmoid -> Nastaveni) - vcetne plochy,panelu...to jsou vsechno taky plasmoidy. Zadne centralni nastaveni Plasma nema (aspon jsem nic nenasel), vetsinu dalsi konfigurace si bere z nastaveni KDE.

Jedina zatim podporovana databaze Plasmoidu (a vubec vsech moznejch pridavnejch ptakovin do KDE) je kde-look.org. Proc ti to nejde, to netusim

[=^..^= AmigaPower®]

...protože je to rozbitý Na kde-look sice něco píšou, ale je to k nějaký novější verzi a stejně tomu nerozumim, vytáhni kabel, zastrč kabel... ??

[jiřík]

Perfektní, děkuji za splněné přání :) Jen taková drobnost - na tématu Oxygen má plasmoid černé pozadí (a černý text) - náhled

Každopádně to je na dobré cestě k jednomu z mála opravdu užitečných plasmoidů (ne Eyes či Ball fakt neberu jako užitečnou věc).

[progdan]

O te barve vim (sam pouzivam tmavy styl), ale nepodarilo se mi vymyslet/zjistit, jak zjistim aktualni barvu stylu Plasmy a k tomu zmenim barvu textu v HTML kodu tak, aby to bylo videt :) Kazdopadne v dalsim dile to hodlam vzit za trochu jiny konec, takze kdyz to vyjde, tak se WebView uplne vyhneme a nechame barvicky na Plasme...

Jinak kdyz uz ten Plasmoid dokopu do nejakeho slusneho stavu, tak ho pak pravdepodobne hodim na kde-look.org a budu ho obdarovat dalsimi vylepsenimi mimo serial (resp. po jeho skonceni)...

[Marián Kyral]

O te barve vim (sam pouzivam tmavy styl), ale nepodarilo se mi vymyslet/zjistit, jak zjistim aktualni barvu stylu Plasmy

Třeba takhle:

Plasma::Theme::defaultTheme()->colorScheme()).foreground().color()

[progdan]

Dekuji. Poucen pro priste

[heydax]

Clanek je to pekny , ale urite by se mi moc libyl okomentovany kazdy radek , snad v dalsim dilu , prosim .

[progdan]

Ok, polepsim se...i kdyz komentovat uplne kazdy radek nema smysl, nektere veci jsou zjevne nebo popsane v predchozim dile. Ale urcite budu komentovat vic

[Ash]

Koukám že přímé hledání jde přecejen i v html verzi, nejen ve wapu, např. http://jizdnirady.idnes.cz/vlakyautobusy/spojeni/?f=Praha&t=Brno&v=&date=7.1.2010&submit=true

[progdan]

Vida, tento zpusob jsem neobjevil. Kazdopadne - ta wapova verze se urcite parsuje snaz nez tahle

[Atrament]

V článku je zdroják souboru searchwidget.h označen nadpisem idossearch.h - docela mne to na chvíli zmátlo, neškodilo by to opravit...