Jak stworzyć ładnie wyglądający interfejs programu?


(Lord218) #1

Witam.

Pytanie jak w temacie, a konkretniej to chcę zbudować ładny interfejs do swojej aplikacji. Nie taki jak w Visual Studio, tylko coś w stylu np. Comodo Internet Security, albo Norton IS, albo może CCleaner. Chodzi mi o ładnie wyglądający, niestandardowy interfejs. Słyszałem, że można to zrobić w html/css i podpiąć pod kod aplikacji, ale nie wiem jak to zrobić. Proszę was o pomoc i pozdrawiam.


(Krystian Rosinski) #2

Polecam Qt Quick. Wykorzystuje on język QML oparty na JavaScript. QML można integrować z C++ i Pythonem. Przykłady podane są w linku. Prościej chyba się nie da;) Zwłaszcza, że do pracy można wykorzystać Photoshopa (

) i IDE Qt Designer.

Świetne efekty małym nakładem pracy, bardzo dobra wydajność, płynne animacje itd.


(Frankfurterium) #3

W Visualu (C#, VB.NET) też można tworzyć ciekawe interfejsy -> WPF.


(Czarek2) #4

Jak w C++ piszesz program to możesz użyć HTMLayout, który pozwala tworzyć layout programu w HTML i ulepszonej wersji CSS. Zobacz na stronie:

http://www.terrainformatica.com/htmlayout/

Narzut to tylko 1 MB - tyle waży dołączana DLL'ka.

Avast używa htmlayout w swoim antywirusie, nie wiem czy widziałeś.

Z innych używających HTMLayout to ostatnio widziałem Advanced Installer także korzysta, doczytałem w "About" (http://www.advancedinstaller.com/ - taki program do tworzenia instalatorów do programów).

Inną opcją jest też np osadzenie silnika Chrome w swojej aplikacji, to daje największe możliwości, HTML5 + CSS3 + Javascript, ale narzut jest większy bo aż 10 MB dllek (upx'ed). Jest projekt Chromium Embedded Framework (CEF), który pozwala w łatwy sposób osadzić silnik Chrome: http://code.google.com/p/chromiumembedded/ . Pracuję nad wiązaniami Pythona dla tego projektu, ale jeszcze długa droga :slight_smile: (http://code.google.com/p/cefpython/)


(Razi) #5

Sam Qt ma przecież QSS, który pozwala ładnie dekorować okna używając języka CSS-podobnego, nie wspominając już o możliwościach nadpisania dekoratorów i stworzenia własnego wektorowego stylu.

Podobnie w Javie i Swingu, motyw Nimbus wprowadzony w 6 wersji jest bardzo ładny i modyfikowalny, widziałem bardzo ładne interfejsy zrobione w nim.


(Krystian Rosinski) #6

Nimbus jest ładny, chociaż ostatnio jak w jEdit zmieniłem na Nimbus to jakieś drobne artefakty pod Windows wyszły. Styl "natywny" w Swingu nie za dobrze się prezentuje. Poza tym "ładny interfejs" to pojęcie względne. Wg mnie zawsze dobrze wygląda poprawnie zaprojektowany natywny interfejs.


(Lord218) #7

Śliczne dzięki :slight_smile:

A czy mógłbym prosić o jakieś tutoriale albo coś, żeby załapać o co w tym biega?

Jeszcze raz dzięki i pozdro dla wszystkich.


(Krystian Rosinski) #8

Jeśli chodzi o QML to mogę pokazać jak osadzić kod w Pythonie na przykładzie, który akurat mam "pod ręką". Program wyświetla animowane zegary złożone z obrazów PNG. Nie ma tu typowych kontrolek czy widgetów. Te można znaleźć w przykładach QML Ui Components (udostępniane wraz z PyQt) i dokumentacji w internecie lub zrobić własne. Zasada działania jest podobna, zostaje tylko kwestia poznania QML (JavaScript).

LEMFv.png

Plik główny .pyw:

import sys

from PyQt4 import QtCore, QtGui, QtDeclarative


app = QtGui.QApplication(sys.argv)


view = QtDeclarative.QDeclarativeView()

view.setSource(QtCore.QUrl('clocks.qml'))

view.setResizeMode(QtDeclarative.QDeclarativeView.SizeRootObjectToView)

view.setGeometry(100, 100, 640, 240)

view.show()

app.exec_()

clocks.qml:

import QtQuick 1.0

import "content"


Rectangle {

    width: 640; height: 240

    color: "#646464"


    Row {

        anchors.centerIn: parent

        Clock { city: "New York"; shift: -4 }

        Clock { city: "Mumbai"; shift: 5.5 }

        Clock { city: "Tokyo"; shift: 9 }

    }

}

Reszta znajduje się w katalogu content.

Pliki źródłowe i obrazy PNG: tutaj

Wersja exe: tutaj (należy rozpakować i uruchomić plik exe)


(Lord218) #9

A czy w takim razie w tym QT Creatorze mógłbym np użyć takiego menu: http://tympanus.net/Tutorials/CreativeC ... ndex2.html jako menu programu?


(Krystian Rosinski) #10

Z tego co widziałem w przykładach i czytałem to Qt Quick jest właśnie stworzony do tego typu rzeczy.

Kanał youtube QtStudios zawiera trochę przykładów / prezentacji.