8/3/2019 04 PyS60_UI

1/44

Bevezets a mobilszoftverfejlesztsbe

Dr. Forstner Bertalan

forstner.bertalan@aut.bme.hu

BME-AAIT 2008 1Bevezets a mobil szoftverfejlesztsbe 4. elads

8/3/2019 04 PyS60_UI

2/44

Knyv vsrj dtum a SCHQ miatt:

Jv szerda!

BME-AAIT 2009 Mobilszoftverek 4. el ads 2

8/3/2019 04 PyS60_UI

3/44

Nokia Klub

BME-AAIT 2009 Mobilszoftverek 4. el ads 3

8/3/2019 04 PyS60_UI

4/44

Nokia Klub

BME-AAIT 2009 Mobilszoftverek 4. el ads 4

8/3/2019 04 PyS60_UI

5/44

Qt tanfolyam

BME-AAIT 2009 Mobilszoftverek 4. el ads 5

8/3/2019 04 PyS60_UI

6/44

Qt tanfolyam

BME-AAIT 2009 Mobilszoftverek 4. el ads 6

8/3/2019 04 PyS60_UI

7/44

Az elz rsz tartalmbl A Python jellemzi

A Python teleptse Telepts mobil kszlkre Telepts S60 Emultor al

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 7

y on nye v emu a sa Alapvet szintaxis A nyelv eszkzei

Modulok Alkalmazs letciklus

Pldk

8/3/2019 04 PyS60_UI

8/44

Emlkeztek mg rMik azok az ennesek?

Aki szimpla igennel

vlaszol, megbukik!

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 8

8/3/2019 04 PyS60_UI

9/44

Emlkeztek mg rMik azok az ennesek?

A Python nyelv egy eszkze, egyfajta szekvencia:Objektumok gyjtemnye vesszkkel elvlasztva.

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 9

a:(1, "szia", 3,)

8/3/2019 04 PyS60_UI

10/44

4. elads PyS60Felhasznli Interfsz

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 10

8/3/2019 04 PyS60_UI

11/44

Tartalom User Interface

Az alkalmazs fellete

Text widget

Tabok

Dialgusok Note

Adatbekr ablak

Vlasztlista Tbbszrs vlasztlista

rlap

Listbox s ikonok BME-AAIT 2008 11Bevezets a mobil szoftverfejlesztsbe 4. elads

8/3/2019 04 PyS60_UI

12/44

User InterfaceA PyS60 kommunikcija a felhasznlval

Graphical user interface, GUI Input s output

Egysgestett eszkzk Alapja: S60

Elnye: programoznl, felhasznlnlPyS60 modulja: appuifw

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 12

8/3/2019 04 PyS60_UI

13/44

Az alkalmazs felletnek felptseAz S60-as User Interface-

re trtn

lekpezs3 klnbz kperny-mret:

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 13

LargeFull

Felhasznli interakcik

(query, note, stb.)

8/3/2019 04 PyS60_UI

14/44

Kperny mretek

normal large full

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 14

appuifw.app.screen = full #stb.

8/3/2019 04 PyS60_UI

15/44

rintkpernys modellekrintsrzkeny kijelz?

appuifw.touch_enabled()Van fizikai billentyzete?

directional pad flagOrientci belltsa

appuifw.app.orientation automatic, portrait, landscape

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 15

8/3/2019 04 PyS60_UI

16/44

Fkusz Symbian: multitask opercis rendszer

appuifw.app.focus: bellthatunk callback fggvnyt, amely akkor hvdik

meg, amikor az alkalmazs a httrbe kerl vagy az

e r e n.Bejv telefonhvs, stb.

Pldul egy valsidej jtkot lelltunk / elindtunk

zleti adatokat perzisztens sztrba tesszk

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 16

8/3/2019 04 PyS60_UI

17/44

appuifwmodul alkalmazs men, exit handlerdef quit():

app_lock.signal()

def sayhello():

appuifw.note(u"Hell!", "info")

def saybye():

appuifw.note(u"Bye!", "info")

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 17

e sayv sz at :

appuifw.note(u"Viszlt!", "info")

appuifw.app.exit_key_handler = quit

appuifw.app.menu = [(u"hello", sayhello),

(u"pp", (

(u"bye", saybye),

(u"viszlt", sayviszlat)))]

8/3/2019 04 PyS60_UI

18/44

Szvegek elhelyezse Text widget: rich text editor

Az alaprtelmezett appuifw.app.body is ez Szn: color s highlight_color,

hrmas tuple vagy 0xRRGGBB

.

Style: STYLE_BOLD STYLE_UNDERLINE STYLE_ITALIC STYLE_STRIKETHROUGH

HIGHLIGHT_STANDARD HIGHLIGHT_ROUNDED HIGHLIGHT_SHADOW

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 18

8/3/2019 04 PyS60_UI

19/44

Text widgeten vgezhet mveletek

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 19

8/3/2019 04 PyS60_UI

20/44

Tab csoportok (flek)Logikailag sszetartoz

elemek nzetei klnoldalakra

Navigcis panelenjelennek meg

view_stack listba: Canvas, Text, Listbox

appuifw.app.body = BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 20

8/3/2019 04 PyS60_UI

21/44

Tab csoportok pldadef red():t=appuifw.app.bodyt.clear()t.font='title'

t.color=(255,0,0)t.set(u'Ez a piros oldala a programnak.')

def green():t=appuifw.app.body.

t.font='legend't.color=(0,255,0)t.set(u'Ez a zld oldala a programnak.')

def changetab(index):appuifw.app.activate_tab( index)

if index==0:red()else:green()

appuifw.app.set_tabs([u"piros", u"zld"], changetab)changetab(0)

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 21

8/3/2019 04 PyS60_UI

22/44

Dialgusok - loklis InfoPopup

Note: felbukkan info ablakok Query: egysoros adatbekr dialgusok

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 22

Popup menu: felbukkan vlasztlista

Selection list: keresmezs vlasztlista

Multi selection list: tbbszrs elemvlasztlista

rlapok

8/3/2019 04 PyS60_UI

23/44

Dialgusok - globlis global_note

global_query global_msg_query

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 23

_ _

TopWindow objektumok

8/3/2019 04 PyS60_UI

24/44

rtestsek (note-ok)Tglalap alak terletek

Hromfle informci-kirats note-okkal Klnbz animcik

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 24

appu w.note u "sz veg", "t pus", g o a GUI: mindig Unicode!

Tpus: error: Hiba

info: Informls

conf: Megersts

8/3/2019 04 PyS60_UI

25/44

Lekrdez ablakok (query-k) Egy mezs dialgusok felhasznli beavatkozs cljra.

eredmny = appuifw.query(u"Kirt szveg", "tpus",

default) text

cod

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 25

number

date

time

query float

Visszatrsi rtk

8/3/2019 04 PyS60_UI

26/44

Query pldaertek = appuifw.multi_query(u"Vezetknv?",u"Keresztnv?")

if ertek== None:appuifw.app.set_exit()(vezetek, kereszt) = ertek

" "=

sztring = u"Hny ves vagy, "+ nev+ u"?"ev = appuifw.query(sztring, "number")if ev == None:

appuifw.app.set_exit()ev = ev-10sztring = "Alig "+ str(ev)+ u" vesnek nzel ki, kicsi "+ nev+

u"!"

appuifw.note(sztring, "conf") BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 26

8/3/2019 04 PyS60_UI

27/44

VlasztlistkA felhasznl tbb elem kzl kijell egyet

Lista sszelltsa futsidben is lehetTpusok:

Egszablakos: appuifw.selection_list(lista,kereses_be) A keressi mez egy automatikus szr

Felbukkan: appuifw.popup_menu(lista,u"fejlc")

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 27

8/3/2019 04 PyS60_UI

28/44

A vlasztlista hasznlata Bemen els paramter egy lista

popup esetn lehet kettesekbl ll lista

Visszatrsi rtk: a kivlasztott elemindexe, vagy None

lista = [u"Els", u"Msodik", u"Harmadik"]kereses_be = 1

Index = appuifw.popup_menu(lista, u"fejlc")Index2 = appuifw.selection_list(lista, kereses_be)

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 28

8/3/2019 04 PyS60_UI

29/44

Tbbszrsen vlaszthat lista: multiselection list Tbbszrs kivlaszts lista opcionlis keresmezvel

Ktfle stlus: checkbox vagy checkmark

index_lista = appuifw.multi_selection_list (lista, style='checkmark',search_field=1)

Visszatrsi rtk: Ennes, vagy None

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 29

8/3/2019 04 PyS60_UI

30/44

Pldaif appuifw.query(u"Pipkat alkalmazzunk ngyzetek helyett?", "query"):mystyle='checkmark'

else:mystyle='checkbox'

lista = [u"Aladr", u"Beta", u"Beatrix", u"Bella", u"Ceclia", u"Csaba"," "

search_on = 1 #keresmezindices = appuifw.multi_selection_list (lista, mystyle, search_on)for index in indices:

appuifw.note(lista[index], "conf") #a kivlasztott neveket kirjuk

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 30

8/3/2019 04 PyS60_UI

31/44

InfoPopupi=appuifw.InfoPopup()

i.show(u"A nap tipje.", (0, 0), 5000, 0,appuifw.EHRightVCenter)

EHLeftVTop, EHLeftVCenter, EHLeftVBottom,EHCenterVTop, EHCenterVCenter, EHCenterVBottom,EHRightVTop, EHRightVCenter, EHRightVBottom

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 31

8/3/2019 04 PyS60_UI

32/44

globalui: globlis querykglobal_note(note text[, type ])

error, text, warn, charging, wait,perm,not_charging, battery_full,battery_low, recharge_battery, confirm

global_query(query text[, timeout ])

global_msg_query(query text, header

text[, timeout ])global_popup_menu(option items[,

header text, timeout ])

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 32

8/3/2019 04 PyS60_UI

33/44

globalui pldadef quit():appuifw.app.focus=None

app_lock.signal()

def focuscb(fg):

g :

appuifw.note(u"Paksot tltre dugtk.", "info")

else:

e32.ao_sleep(3)

globalui.global_note(u"Ignored", "battery_low")

appuifw.app.focus=focuscb

appuifw.note(u"Ha elvltasz, lemerlk!", "info")

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 33

8/3/2019 04 PyS60_UI

34/44

rlap: A legsszetettebb dialgusTbb beviteli mezvel is rendelkezhet

Szerkeszts s nzet zemmdFlag-ekkel finomhangolhat a mkdse

urlap = Form([mezk=field_list, flagek=flags]) appuifw.FFormEditModeOnly

appuifw.FFormDoubleSpaced

Binris vagy opertorral fzhetjk ssze

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 34

8/3/2019 04 PyS60_UI

35/44

rlap mezkA mezk ennesek: (cmke, tpus [,rtk])

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 35

8/3/2019 04 PyS60_UI

36/44

rlap futtatsaexecute() fggvnyvel

save_hook: Validlsra (True/False)menu attribtum: szoksos men

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 36

8/3/2019 04 PyS60_UI

37/44

Pldacurrencies = [u'HUF', u'USD', u'EUR']def validate(aktualis):

global myform

itemname=aktualis[0][2]description=aktualis[1][2]price=aktualis[2][2]currency=currencies[aktualis[3][2][1]]appuifw.note(itemname, "info")

" ". ,

appuifw.note(u"price is "+str(price), "info")appuifw.note(currency, "info")return True

fields = [( u'Megnevezs', 'text', u'Baseball t'),( u'Lers', 'text', u'Hasznlt, de tiszta'),( u'r','number', 25 ),( u'Pnznem', 'combo', ( currencies, 0) )]

#A 0. elem (HUF) az alaprtelmezett

flags = appuifw.FFormEditModeOnly | appuifw.FFormDoubleSpacedmyform = appuifw.Form(fields, flags)myform.save_hook = validate

myform.execute() BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 37

8/3/2019 04 PyS60_UI

38/44

Adatmegjelents: ListboxSymbian/S60 listira val lekpzs

Mindenre hasznlhatAzonos magassg s elrendezs

e eme egym s a a

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 38

8/3/2019 04 PyS60_UI

39/44

Kitr: IkonokTbb kpet tartalmaz fjlbl jnnek

Mbm: multi-bitmap file Mif: Multi-image file

p + maszPl:

ikon1 = appuifw.Icon(u"z:\\system\\data\\avkon.mbm", 28, 29)

ikon2 = appuifw.Icon(u"z:\\resource\\apps\\avkon2.mbm", 34, 35)

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 39

8/3/2019 04 PyS60_UI

40/44

Lista ltrehozsa lista = Listbox(listaelemek, callback)

Callback: egy elem kivlasztsakor hvdikmeg

s ae eme : ar a mazoennesek tpusa hatrozza mega listaelemek elrendezst

A sztringek bennetermszetesen Unicodesztringek

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 40

8/3/2019 04 PyS60_UI

41/44

Lista elrendezs tpusokEgyszer szimpla magassg lista

sztring-lista

Dupla magassg lista els sor sztrin msodik sor sztrin _ _ _ _

kettesekbl ll listaSzimpla magassg lista grafikval

(sztring, ikon) kettesekbl ll lista

Dupla magassg lista grafikval (els_sor_sztring, msodik_sor_sztring, ikon)

hrmasokbl ll lista BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 41

8/3/2019 04 PyS60_UI

42/44

Pldadef observer():global lb, entriesappuifw.note(entries[lb.current()][0],"info")

icon1 = appuifw.Icon(u"z:\\resource\\apps\\avkon2.mbm", 34, 35)icon2 = appuifw.Icon(u"z:\\resource\\apps\\avkon2.mbm", 58, 59)entries = [(u"Abc", icon1),(u"Hvs", icon2),(u"jabb elem", icon1),(u"Megint ez az ikon",icon2)]

lb = appuifw.Listbox(entries, observer)appuifw.app.body = lb

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 42

8/3/2019 04 PyS60_UI

43/44

sszefoglals User Interface

Az alkalmazs fellete

Text widget

Tabok

Dialgusok Note

Adatbekr ablak

Vlasztlista Tbbszrs vlasztlista

rlap

Listbox s ikonok BME-AAIT 2008 43Bevezets a mobil szoftverfejlesztsbe 4. elads

8/3/2019 04 PyS60_UI

44/44

TesztMik azok a flek, s mire jk?

Mik a fontosabb dialgus (adatbevitel-)tpusok?

az r apo on osa u a ons ga

BME-AAIT 2008 Bevezets a mobil szoftverfejlesztsbe 4. elads 44