1. Réalisée par : Fatma Ghachem Année Universitaire : 2009/2010

2. Plan Introduction Le UI Framework de Symbian Os Présentation des UIs de Symbian Comparaison entre les UIs Fichiers et dépendances Les ressources AVKON UI Conclusion 1/43

3. Plan Introduction Le UI Framework de Symbian Os Présentation des UIs de Symbian Comparaison entre les UIs Fichiers et dépendances Les ressources AVKON UI Conclusion 2/43

4. Introduction Interface utilisateur facteur de différenciation La différentiationclépour survivre et réussirdans le marché, Fournirune interface utilisateur unique et compétitive, répondantaux besoins des utilisateurs. 3/43

5. Plan Introduction Le UI Framework de Symbian Os Présentation des UIs de Symbian Comparaison entre les UIs Fichiers et dépendances Les ressources AVKON UI Conclusion 4/43

6. Symbian UI Framework(1/2) Architecture de Symbian OS 5/43

7. Symbian UI Framework(2/2) Qikon et Avkonimplémententles classes définiesdans le framework Uikon. Application baséessur S60 et UIQ définissentleurs classes depuis les UI spécifiques : UIQ remplace le prefix CEikpar CQik S60 utiliseCAkn. 6/43

8. Plan Introduction Le UI Framework de Symbian Os Présentation des UIs de Symbian Comparaison entre les UIs Fichiers et dépendances Les ressources AVKON UI Conclusion 7/43

9. La philosophie Symbian UI Moinsde fenêtrespour réaliserunetâche. Fonctionnalitésavancéesdevraientêtrecacher(utilisateurnovice) UI vise troisprincipauxcritères: Simplicitéfacilitéd’utilisation ErgonomieIl fautquel’utilisateur se familiarise avec l’interface. Efficacitél’utilisation du téléphonedoitêtreefficace ; un utilisateurdoit se sentirmettre de la situation. 8/43

10. S60 (précédemment: Series 60) Propriétaire : Nokia License donnée à : Samsung, LG, Panasonic, Lenovo Conçue pour : Utilisation « One-handed » Support de l’écran tactile à partir de la dernière version 5.0 5-directions de navigation (4 directions + centre), clavier numérique Avantage : le multi-tachesest optimal dansS60 Inconvénient: limitation concernant la résolution de l’écranet le clavier. Panasonic X800 Nokia N93i Nokia N95 LG KS10 JoY Samsung SGH - D720 9/43

11. ou Series 80 Propriétaire: Nokia Conçue pour : Intéractionà travers un clavier alphanumérique, 4 boutons de navigations à droiteet la joystick Nokia 9500 qui tourne avec EPOC v6 est similaire à un Psion Series 5mx saufquece dernier n’a pas d’écrantactile = Series 80 Nokia 9500 10/43

12. Series 90 Propriétaire: Nokia Etatactuel : n’est plus en cours de développement Caractèristiques : Support de l’écran tactile Résolution de l’écran est plus large que les Series 80 Saisie avec le clavier virtuelou le clavier Bluetooth. Nokia 7710 11/43

13. UIQ (User Interface Quartz) Propriétaire: Sony Ericsson et Motorola Les appareilsintégrant UIQ et montrantsavraivaleursont Sony Ericsson P800 et P900/P910i. Licence donnée à : Sony Ericsson, Motorola, BenQ, Arima Motorola M1000 Arima U300 MotorolaMOTORIZR Z8 BenQP30 SE P990 12/43

14. MOAP (Mobile Oriented Applications Platform) Propriétaire : NTT DoCoMo, FOMA = Freedom of Mobile Access (3G services) Disponible uniquement au Japon Licencedonnée à : Mitsubishi, Fujitsu, Sony Ericsson, Sharp Différence par rapport au marchéeuropéen: cartes de créditintégrées , waterproof, capture des codes à barre, fingerprint sensor, GPS… 13/43

15. Editions de S60 Series 60 (2001), "Series 60 Second Edition" (2003), "Series 60 3rd Edition" (2005) et "S60 5th Edition" (2008). S60 1st Edition : résolution de l’écranfixé à 176x208 S60 2nd Edition Feature Pack 3 support de multiples résolutions Basic (176x208), et Double (352x416) exemple N90. S60 v3, installation des programmescertifiés. S60 5th Edition support de haute résolution (640x360) touchscreens. Intégration de Adobe Flash Lite 3.0 avec les extensions Action Script Permet aux développeursFlash Lited’accèder aux fonctionalités du téléphonecomme les contacts, messagerie et GPS 14/43

16. Editions de UIQ UIQ 1.1 (2001) Intégré avec SymbianOS v6.1 Triple-band GSM, HSCSD, et GPRS Bluetooth v1.0b WAP 1.2.1 UIQ 2.1(2003) Intégré avec SymbianOS v7.0 Java MIDP 2.0 Themes UIQ 1 intgére toutes les composantes du core ( téléphonie et connectivité). UIQ 2 a été la première version utilisée sur un téléphone UIQ-based. Elle a intégré Java et des technologies de messagerie. UIQ 3 a restauré la fonctionalité de multitaches, supportant différents style de téléphones avec un seul code de base et une configuration facile. UIQ 3.3 (2008) Intégré avec SymbianOS v9.3 Nouvelle version d’ Opera 9 JSR-248( Mobile Service Architecture) (spécification qui décrit environnement non câblé) 15/43

17. Plan Introduction Le UI Framework de Symbian Os Présentation des UIs de Symbian Comparaison entre les UIs Fichiers et dépendances Les ressources AVKON UI Conclusion 16/43

18. Comparaison entre les UI de Symbian Os GPS,VoIP,3G Séries 60 la plus répandue parmi les téléphones basés sur Symbian OS. Séries 80 destinée à la famille « Communicator » , PDA non tactile avec clavier alphanumérique Séries 90 était destiner uniquement aux PDA tactile et n’est plus développée UIQ la deuxième interface utilisateur la plus répandue sur les téléphones Symbian OS. MOAP(S) cette plateforme a la particularité d'être fermée; il est en effet impossible d'installer des applications tierces. 17/43

19. Plan Introduction Le UI Framework de Symbian Os Présentation des UIs de Symbian Comparaison entre les UIs Fichiers et dépendances Les ressources AVKON UI Conclusion 18/43

20. Relation entre les fichiers (1/2) Les fichiers sources et leurs descriptions 19/43 20

21. Relation entre les fichiers (2/2) Fichier sources de l’application Fichier ressources de l’application Fichier header et rssi 20/43

22. Concept de Ressource Files(rss(i)) But : Séparation entre les éléments du UI (list,boutons..) et le code Définissent: User Interface (Menus, Dialogs, Lists) Avantage: L’information est chargéequelorsqu’on en a besoin moinsd’utilisation de la RAM 21/43

23. Plan Introduction Le UI Framework de Symbian Os Présentation des UIs de Symbian Comparaison entre les UIs Fichiers et dépendances Les ressources AVKON UI Conclusion 22/43

24. Ressources AVKON : GenericDialogs (1/7) Type Single-page dialog Multi-pagedialog Fonction Affiche les données Permet la saisie de données Créer à partir de la classe CEikDialog CEikDialog classe de base pour tous les dialogs utilisée pour créer des dialogs spécifiques à chaque UI. 23/43

25. Ressources AVKON : GenericDialogs (2/7) Pour Implémenter un dialog : Définir la ressource dialog dans le fichier.rss. Définiruneclasse qui implémenteCAknDialog UneressourceDIALOG encapsule la structure du dialog définit par le développeur . Ces STRUCT sontdéfiniesdans le fichiereikon.rhcomme suit : STRUCT DIALOG { LONG flags=0; LTEXT title=""; LLINK pages=0; LLINK buttons=0; STRUCT items[]; LLINK form=0; } 24/43

26. Ressources AVKON : GenericDialogs (3/7) La structure d’uneligne dialog est définiecomme suit danseikon.rh. STRUCT DLG_LINE { WORD type; LTEXT prompt; WORD id=0; LONG itemflags=0; STRUCT control; LTEXT trailer=""; LTEXT bmpfile = "" ; WORD bmpid = 0xffff ; WORD bmpmask ; LTEXT tooltip = "" ; } 25/43

27. Ressources AVKON : GenericDialogs (4/7) EaknMyCmdNext est définiedans .hrh EaknSoftkeyOptions est un standard ID, définitdans avkon.hrh. Le texte est definitdans le fichier .loc Boutons prédéfinis : R_AVKON_SOFTKEYS_OPTIONS_BACK pour avoir BACK dans menu options R_AVKON_SOFTKEYS_OPTIONS_DONE pour avoir enregistrer dans menu options R_AVKON_SOFTKEYS_OPTIONS_CANCEL pour avoir annuler dans menu options R_AVKON_SOFTKEYS_OPTIONS_EXIT pour avoir EXIT dans menu options RESOURCE CBA r_softkeys_options_next { buttons = { CBA_BUTTON { id = EAknSoftkeyOptions; txt = qtn_aknexeditor_cba_options; }, CBA_BUTTON { id = EAknMyCmdNext; txt = qtn_Myapp_cba_next; } }; } 26/43

28. Ressources AVKON : GenericDialogs (5/7) Définition d’une ressource dialog d’une seule page dans le fichier .rss . RESOURCE DIALOG r_demo_singlepage_dialog { flags = EEikDialogFlagNoDrag | EEikDialogFlagFillAppClientRect | EEikDialogFlagCbaButtons | EEikDialogFlagWait; buttons = R_AVKON_SOFTKEYS_OK_CANCEL; items = { DLG_LINE { type = EEikCtNumberEditor; // The caption(prompt) prompt = "Number1:"; id = ESinglePageDlgC1Id; // The control control = NUMBER_EDITOR { min=0; max=999; }; // The tag, indicating the measurement unit trailer = "cm"; }, DLG_LINE { type = EEikCtNumberEditor; // The caption(prompt) prompt = "Number2:"; id = EsinglePageDlgC2Id; // The control control = NUMBER_EDITOR { min=0; max=999; }; // The tag, indicating the measurement unit trailer = "cm"; } }; } 27/43

29. Ressources AVKON : GenericDialogs (6/7) La classe header Class CMyDialog::public CAknDialog { public: // the static RunDlgLD launch function staticTIntRunDlgLD(TIntaResouceId); private: // FromCAknDialog // base constructor - CAknDialog::CAknDialog() isused // Destructor ~CMyDialog() // the control initializerfunction voidPreLayoutDynInitL(); // the function that collects final control values as well as // checking the exit condition TBoolOkToExitL(TIntaButtonId); private: //data items }; Pour l’ Implémentation de la classe Dialog : 1. Implémenteruneclasse qui dérive de CAknDialogdans un fichier header, ouutilisercettedernièredirectement. 2. Si ilexite des controls qui ont des valeursprédéfinis , écrirealors la fonctionPreLayoutDynInitL() 3. Si la classe est dérivée de CAknDialog, définirunefonctionstatiqueRunDlgLD() 4. Si ilexite des conditions particulièreou des controls oùl’utilisateurdoitsaisir des données , on ajoute la fonctionOkToExitL() . Il existed’autrefonctionalités pour l’initialisation du dialog et la vérification des données 28/43

30. Ressources AVKON : GenericDialogs (7/7) Les méthodes de cette classe sont : 1. RunDlgLD() : o Créeune instance de dialog et fait appel au constructeur. o Fait appel à ExecuteLD() avec les ressources appropriées. //3 The following example code checks the validity of the values in the two editor controls: TBoolCMyDialog::OkToExitL (TIntaButtonId) { // Get the Number1 editor control CEikNumberEditor* editor1 = (CEikNumberEditor*) Control(ESingleDlgId); // Get the Number2 editor control CEikNumberEditor* editor2 = (CEikNumberEditor*) Control(ESingleDlg2Id); // Check the validity of the values in the two editors if ( editor1->Number() > editor2->Number()) { // Show an error note CAknErrorNote* note = new (ELeave) CAknErrorNote; note->ExecuteLD(_L("Number1 should be less than number2")); return EFalse; } return ETrue; } 2. PreLayoutDynInitL() Cette fonction est appelée par frameworkdialog pour dimensionner et afficher le dialog. //1 Tint CMyDialog::RunDlgLD() { CMyDialog* dlg = new (ELeave) CMyDialog(); return dlg->ExecuteLD(R_DEMO_SINGLEPAGE_DIALOG); } //2 The following example code initializes the values of the two editors: voidCMyDialog::PreLayoutDynInitL() { // Get the Number1 editor control CEikNumberEditor* editor1 = (CEikNumberEditor*) Control(ESinglePageDlgC1Id); // Set the value to the Number1 editor editor1->SetNumber(100); // Get the Number2 editor control CEikNumberEditor* editor2 = (CEikNumberEditor*) Control(EsinglePageDlgC2Id); // Set the value to the Number2 editor editor2->SetNumber(200); } 3. OkToExitL() Pour executer et instancier le dialog : a.Appel des fonctionsnew(ELeave) ou call static NewL dialog factory pour créerune instance des classes dialogues b.Appel de ExecuteLD(TIntaResourceId). Qui fait appel à : o PrepareLC(aResourceId); o return(RunLD()); 29/43

31. Ressources AVKON : QueryDialogs (1/2) Type Confirmation querydialog Data querydialog List querydialog Multiselectionlistquerydialog Global confirmation query Global listquery Global message query Gére les saisies de l’utilisateur Elles ne sont pas ferméesautomatiquement 30/43

32. Ressources AVKON : QueryDialogs (2/2) //1 RESOURCE DIALOG r_aknexquery_confirmation_query { flags = EGeneralQueryFlags; buttons = R_AVKON_SOFTKEYS_YES_NO; items = { DLG_LINE { type = EAknCtQuery; id = EGeneralQuery; control = AVKON_CONFIRMATION_QUERY { layout = EConfirmationQueryLayout; label = qtn_aknexquery_con_label_text; bmpfile = AKNEXQUERY_BMPFILE_NAME; bmpid = EMbmAknexqueryLshellicon; bmpmask = AKNEXQUERY_BITMAP_MASK_FLAG; }; } }; } //2 The following code launches the dialog for which the resource has been defined previously: TBuf<256> msg(_L("Delete note?")); CAknQueryDialog* dlg = CAknQueryDialog::NewL( ); if ( dlg->ExecuteLD(R_AKNEXQUERY_CONFIRMATION_QUERY, msg)) { // yes/ok pressed } Ressource de Confirmation query a une structure standard ExecuteLD(R_AKNEXQUERY_CONFIRMATION_QUERY, msg )est utilisé pour executer confirmation query. 31/43

33. Ressources AVKON : Notes (1/3) Affiche les notifications à l’utilisateur 32/43

34. Ressources AVKON : Notes (2/3) CAknConfirmationNote : – Unetache qui s’estterminée avec succès CAknInformationNote – Informel’utilisateurd’une situation inhabituelle CAknWarningNote – Avertitl’utilisateurd’une situation qui requiertune action CAknErrorNote – Avertitl’utilisateurd’une situation qui ne permet pas de continuer la tache 33/43

35. Ressources AVKON : Notes (3/3) voidCNoteExamplesAppUi::HandleCommandL(TIntaCommand) { switch(aCommand) { ... case ECommand_ConfirmationNoteExample: //NoteExamples.hrh { _LIT(text1, “Thank You"); CAknConfirmationNote* note1 = new (ELeave) CAknConfirmationNote( ETrue ); //Waiting note1->ExecuteLD(text1); //Blocks until note dismissed } break; ... } } 34/43

36. Ressources AVKON : Forms (1/4) Fournit un moyen de saisie de plusieurs données en un seul processus. 35/43

37. Ressources AVKON : Forms (2/4) Deux modes: View mode (= list box, highlight fields) Edit mode (editfields) Par défaut: changement de modes depuis le menu options Multi-page Forms: tabulations pour grouperplusieurs controls 36/43

38. Ressources AVKON : Forms (3/4) RESOURCE FORM r_aknexform_text_field_form { items = { DLG_LINE { type = EEikCtEdwin; prompt = qtn_aknexform_form_label_ed1; id = EAknExFormDlgCtrlIdEdwin01; itemflags = EEikDlgItemTakesEnterKey | EEikDlgItemOfferAllHotKeys; control = EDWIN { flags = EEikEdwinNoHorizScrolling | EEikEdwinResizable; width = AKNEXFORM_EDWIN_WIDTH; lines = AKNEXFORM_EDWIN_LINES; maxlength = EAknExFormEdwinMaxLength; // added to limit expanding in forms. // If you want full screen use 5 here max_view_height_in_lines = 5; // if you have the line above, you must have this. // It's calculable from LAF base_line_delta = 21; }; }, DLG_LINE { type = EEikCtEdwin; prompt = qtn_aknexform_form_label_ed2; id = EAknExFormDlgCtrlIdEdwin02; itemflags = EEikDlgItemTakesEnterKey | EEikDlgItemOfferAllHotKeys; control = EDWIN { flags = EEikEdwinNoHorizScrolling | EEikEdwinResizable; width = AKNEXFORM_EDWIN_WIDTH; lines = AKNEXFORM_EDWIN_LINES; maxlength = EAknExFormEdwinMaxLength; // added to limit expanding in forms. // If you want full screen use 5 here max_view_height_in_lines = 5; // if you have the line above, you must have this. // It's calculable from LAF base_line_delta = 21; }; } }; } Structure dialog et une structure Form dans le fichier ressource (.rss) car un form est un dialog spécial. Form est à définirdans la structure du dialog : flags, qui spécifient le style du Form. buttons, qui spécifient les types de softkey. form, qui fait réference au Form définitultérieurement. Les champs de la Form sontdéfinis avec la structure DLG_LINE. RESOURCE DIALOG r_aknexform_text_field_dialog { flags = EEikDialogFlagNoDrag | EEikDialogFlagFillAppClientRect | EEikDialogFlagNoTitleBar | EEikDialogFlagNoBorder | EEikDialogFlagCbaButtons; buttons = R_AVKON_SOFTKEYS_OPTIONS_BACK; form = r_aknexform_text_field_form; } 37/43

39. Ressources AVKON : Forms (4/4) Pour créer un FORM depuis les définitions contenues dans le fichier ressource 1. Implémenteruneclasse qui hérite de CAknForm. //1 class CMyForm : public CAknForm { public: staticCMyForm * NewL(); virtual ~CMyForm(); … private: CMyForm(); private: … }; 2. Créerune instance de cetteclassedéjaimplémentée. 3. Faire appel à ConstructL pour l’objet form. 4. Appel de la fonctionExecuteLD avec l’id de la ressourcecommeparamètre pour lancer le Form. Le form peutétrecréer et affichercomme suit : CMyForm * form = CMyForm::NewL(); form->ExecuteLD( R_MYFORM_DIALOG ); 38/43

40. Ressources AVKON : ListBox (1/3) Les ressources listboxsontdéfiniesdansune structure de donnéesLISTBOX dans le fichier <eikon.rh>. Les items définisdans les listboxsontaussidéfinisdans les ressources dans <badef.rh>.Ilssont de type LBUF. STRUCT ARRAY { STRUCT items[]; // list items } STRUCT LISTBOX { BYTE version; // version number WORD flags; WORD height; // in items WORD width; // in chars LLINK array_id; // points to items in ARRAY structure } Les types de listboxsontdéfinis par le paramètre flags dans la LISTBOX. Vue sans unepossibilité de sélection 39/43

41. Ressources AVKON : ListBox (2/3) Pour définir un listboxdans le fichier (.rss) r_demo_listbox_itemsdéfinit les items appartenant à la ressourcelistboxr_demo_listbox. RESOURCE LISTBOX r_demo_listbox { flags = EAknListBoxSelectionList; array_id = r_demo_listbox_items; } RESOURCE ARRAY r_demo_listbox_items { items = { LBUF { txt = "Item1"; }, LBUF { txt = "Item2"; }, LBUF { txt = "Item3"; } }; } 40/43

42. Ressources AVKON : ListBox (3/3) // createlistbox instance CEikTextListBox* list = new (ELeave) CAknSingleStyleListBox(); // set container control list->SetContainerWindow(*this); // initialize resource reader, passing resource id as parameter TResourceReaderrr; iEikonEnv->CreateResourceReaderLC(rr, R_DEMO_LISTBOX); // load and construct the resource list->ConstructFromResourceL(rr); CleanupStack::PopAndDestroy(); // rr Pour créer un listbox de sélectiondepuis un fichierressource 1. Créerune nouvelle instance de listbox 2. Créer la fenêtre container du listbox. 3. Initialiser le lecteur de ressource 4. Charger la ressourcelistbox en utilisant le lecteur de ressource. 41/43

43. Plan Introduction Le UI Framework de Symbian Os Présentation des UIs de Symbian Comparaison entre les UIs Fichiers et dépendances Ressources AVKON UI Conclusion 42/43

44. Conclusion UI ont la même structure et classes de base Les menus sontgénéralementdéfinis en utilisant les ressources du standard Uikon. Les Dialogs sont plus utilisésdans UIQ et S60 Les boutonssont plus utilisésdans UIQ, maisrarementdans S60 Les commandes et la gestion des événementssontsimilaires pour UIQ et S60, (seulediffèrence les IDs command et codes des key event) 43/43

45. Références Symbian OS UI-Development for S60 , Andreas Jakl, 2008 S60 Platform Avkon UI Resources Forms , Nokia Corporation ,2005 S60 Platform Avkon UI Resources Notes , Nokia Corporation ,2005 S60 Platform Avkon UI Resources Listboxes , Nokia Corporation ,2005 S60 Platform Avkon UI Resources Dialogs , Nokia Corporation ,2005 S60 Programming A Tutorial Guide, Paul Coulton, Reuben Edwards,Apr.2007

46. Merci de Votre Attention