Portál AbcLinuxu, 1. května 2024 10:13

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

28. 12. 2009 | Dan Vrátil
Články - Jak se dělá Plasmoid – 2 (popup IDOS)  

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.

IDOS plasmoid

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()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, LabelPushButton jsou odvozené od KLineEdit, respektive KLabelKPushButton, 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.

Seriál Plasmoid – jak se píše (dílů: 5)

První díl: Jak se dělá Plasmoid – 1 (úvod, první plasmoid), poslední díl: Jak se dělá Plasmoid – 5 (drag&drop, konfigurační dialog).
Předchozí díl: Jak se dělá Plasmoid – 1 (úvod, první plasmoid)
Následující díl: Jak se dělá Plasmoid – 3 (DataEngine)

Související články

KDE 4.0: Plasma
Seriál: Qt 4 - psaní grafických programů
Seriál: Qt 4 – Konzolové programy
Cmake: zjednoduš si život
Seriál: Kommander
Co přináší KDE 4 - (alfaverze, porty a D-BUS)
Co přináší KDE 4 - (technologie)
Novinky v KDE 4

Další články z této rubriky

LLVM a Clang – více než dobrá náhrada za GCC
Ze 4 s na 0,9 s – programovací jazyk Vala v praxi
Reverzujeme ovladače pro USB HID zařízení
Linux: systémové volání splice()
Programování v jazyce Vala - základní prvky jazyka

Diskuse k tomuto článku

28.12.2009 10:06 xavier | skóre: 10 | blog: borkovo
Rozbalit Rozbalit vše Re: Jak se dělá Plasmoid – 2 (popup IDOS)
Odpovědět | Sbalit | Link | Blokovat | Admin
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 avatar 28.12.2009 10:31 David Watzke | skóre: 74 | blog: Blog... | Praha
Rozbalit Rozbalit vše Re: Jak se dělá Plasmoid – 2 (popup IDOS)
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á).
“Being honest may not get you a lot of friends but it’ll always get you the right ones” ―John Lennon
progdan avatar 28.12.2009 12:38 progdan | skóre: 34 | blog: Archař | Teplice/Brno
Rozbalit Rozbalit vše Re: Jak se dělá Plasmoid – 2 (popup IDOS)
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?
Collecting data is only the first step toward wisdom, but sharing data is the first step toward the community.
MaSo avatar 30.12.2009 10:47 MaSo | skóre: 15 | blog: MaSo | Frýdek-Místek
Rozbalit Rozbalit vše Re: Jak se dělá Plasmoid – 2 (popup IDOS)
+1
Webové síťové nástroje: http://nettools.mzettik.cz (pracuje se na tom - pomalu :-) )
=^..^= AmigaPower® avatar 28.12.2009 11:49 =^..^= AmigaPower® | skóre: 30 | blog: BLB | Praha
Rozbalit Rozbalit vše Re: Jak se dělá Plasmoid – 2 (popup IDOS)
Odpovědět | Sbalit | Link | Blokovat | Admin
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... ;-)
I♥DRX * www.KERNELULTRAS.org
progdan avatar 28.12.2009 12:34 progdan | skóre: 34 | blog: Archař | Teplice/Brno
Rozbalit Rozbalit vše Re: Jak se dělá Plasmoid – 2 (popup IDOS)
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 :-)
Collecting data is only the first step toward wisdom, but sharing data is the first step toward the community.
=^..^= AmigaPower® avatar 28.12.2009 12:40 =^..^= AmigaPower® | skóre: 30 | blog: BLB | Praha
Rozbalit Rozbalit vše Re: Jak se dělá Plasmoid – 2 (popup IDOS)
...protože je to rozbitý :-D 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... ??
28.12.2009 16:38 jiřík | skóre: 9 | Hradec Králové
Rozbalit Rozbalit vše Díky
Odpovědět | Sbalit | Link | Blokovat | Admin
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).
Zapomeňte na pumpičku a na rozhodčí, hrajte Ultimate Frisbee http://www.frisbee.cz
progdan avatar 29.12.2009 00:43 progdan | skóre: 34 | blog: Archař | Teplice/Brno
Rozbalit Rozbalit vše Re: Díky
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)...:-)
Collecting data is only the first step toward wisdom, but sharing data is the first step toward the community.
Marián Kyral avatar 29.12.2009 10:58 Marián Kyral | skóre: 29 | blog: Sem_Tam | Frýdek-Místek
Rozbalit Rozbalit vše Re: Díky
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 avatar 29.12.2009 12:50 progdan | skóre: 34 | blog: Archař | Teplice/Brno
Rozbalit Rozbalit vše Re: Díky
Dekuji. Poucen pro priste :-)
Collecting data is only the first step toward wisdom, but sharing data is the first step toward the community.
29.12.2009 14:57 heydax
Rozbalit Rozbalit vše Re: Díky
Clanek je to pekny , ale urite by se mi moc libyl okomentovany kazdy radek , snad v dalsim dilu , prosim .
progdan avatar 29.12.2009 22:37 progdan | skóre: 34 | blog: Archař | Teplice/Brno
Rozbalit Rozbalit vše Re: Díky
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
Collecting data is only the first step toward wisdom, but sharing data is the first step toward the community.
7.1.2010 00:39 Ash | skóre: 53
Rozbalit Rozbalit vše Re: Jak se dělá Plasmoid – 2 (popup IDOS)
Odpovědět | Sbalit | Link | Blokovat | Admin
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 avatar 7.1.2010 00:52 progdan | skóre: 34 | blog: Archař | Teplice/Brno
Rozbalit Rozbalit vše Re: Jak se dělá Plasmoid – 2 (popup IDOS)
Vida, tento zpusob jsem neobjevil. Kazdopadne - ta wapova verze se urcite parsuje snaz nez tahle :-)
Collecting data is only the first step toward wisdom, but sharing data is the first step toward the community.
20.1.2010 15:04 Atrament | skóre: 10
Rozbalit Rozbalit vše Re: Jak se dělá Plasmoid – 2 (popup IDOS)
Odpovědět | Sbalit | Link | Blokovat | Admin
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...

ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.