#114 ¥ Trimestre 2018 LETTRE DU § DIALOGUE - : A\ EL ECHO / (WEBDEV EMAILS pm Améliorer la délivrabilité desemails a HFSGL p24) Comment faire évoluer la structure de fichiers inaltérables ? uN a WEBDEV i) Test automatique de site avec Selenium ll a WINDEV (Fis) Gererefficacement Tes éerans 4KD]_-AMicher un bureau distant depuis une application WINDEV 2? Arméliorerla deélivrabilité et Vattractivité de vos emails 2A Fichiers inaltérables HFSQL: comment faire évoluer la structure? 2G Cartographie Bing maps 2G Comment intégrer un composant trouvé sur Le “Goodies du trimestre” Github est une superbe enceinte bluetooth JBL aux couleurs de Q2 isti4 . WINDEV : un son de folie ! Sommaire & Actualités 3.) Gestion des bureaux virtuels Windows 10 QA. PCSOFTa votre service 32 Exécuter une application Q5 Améliorez HM dans un ou un traitement en gérant ‘champ Planning UAC Les exemples de la LST Se er eenere OG Sabarits & Ambiance 34, leSaviez-Vous? icles présentés dans cette LST. Indoor 3G Filter une table sur une Q)& Solution cloud: Cozy Cloud colonne cachée 1 Q Testsautomatiques desites 377. Mémoriserles nceuds eee as ed WEBDEV avec Selenium enroulés d'une table es exemple: ecibles depuis ; hirarchique once 1 4, Utilitare: watermarkez vos images facilement 3 Appeler du code assembleur res elec i = “ : 16 Gestion des écrans 4K AQ Questions & Réponses ‘ swsinsnion' | Q Développer uneskill pour 1 Android 10S: comment ‘Alexa (Amazon Echo) créer un bouton flottant ? PCSOFT.> Siége : 3 rue de Puech Villa [BP 44 408 - 34197 Montpellier Cedex S Tel: 04,67,032,032 Agence Paris “V42 Avenue des Champs Elysées 75008 Pars - Tel: 01.48.01.48.88oC Ree a Ey eens e FICHIERS INALTERABLES LO ace a Ue ny Sac ee ACTUALITES VERSIONS 24 eee eee ee WINDEV, WEBDEY et WINDEV Mobile. Retrowvez le détalldes nouveautés surle site wwrwipesoft RESERVEZ VITE VOS PEACES ‘POUR EE Rr IOC] Soya See ay Mee ae oe ea REVUE DE PRESSE cere ne ey cs Peers ean as Reger ion dans ses points de vente, Un su Cat eae ae ey ree eB eet tablettes qui sont déployées ald,.Cette application métier, Jérémy Mamane la décrit comme un veritable « couteau suisse » du vendeur, permettant de réaliser lencaissement, Oe en eee ts ere ea ey GABARITS ET AMBIANCE INDOOR Fain aaa: a eta Naoa) Support Technique PP Gratuit a Leste du supporttechnique gratuit (wm pesof fst] met gratuitement ’ vote dispostion un ensemble informations destnges& vous aider mieux développer + les FAQ. + es téléchargerents + les forums développeursprotessionnels (News Group) Vous avez une question? Contactez le Support Technique Gratut PCSOFT! + Avec Futilitaite RequéteAusT (média conse. Votre requéte sera ‘énéralement waitée sous 48 heures + Par telephone au 04.67,03.17.17 (préparez vote numéro de série et ‘votre question svp) ou par courte Envol par email: merc de ne pas attacher de fichiers de tlle supérieure 10 Mo sans faccard préalable de votre destinataire. non votre fichier sera refuse parle systéme. Assistance Directe Un complément efficace du ‘Support Technique Gratuit Tout projet important ou stratégique doit bénéicier dune "Assistance Direct"! LLassstance Directe permet d'une part de bénéficier d'un contact téléphonique immédiat avec un ingénieurspécialisé, et autre part de choisi ls sujts 8 tater, et ee pour une durée que vous définisez ‘vous-méme. Cela vous permet de résoudre immédiatement les Sujets {qu vous posent probleme. Le contact téliphonique est garant sous T6 heures ouvrables, ce qui ‘yous permet une meilleur eficact Ce service est disponible sur abonnerent. Consulting Profitez de lexpérience d'un ingénieur de PC SOFT sur votre site Un consuiting PC SOFT peut étre délégué chez vous, pour une durée de 18 5 jours, par un ingénieur PC SOFT connaissant la fois votre domaine t les outis que vous utlisez Liingénieur PC SOFT répond directement & vos questions, travalle sur votre projet rel et votre configuration rélle. Vous obtenez les ‘éponses précises qu vous font gagner un temps précieux et vous _ascurent des bonnes orientations technologiques et méthadologiques. Notte conseil? Commandez 1 jour de consulting pour 100 jours de cévelonpement Et chaque année, prenezhabitude de faire venir juste 2 jours) chez ‘yous un ingénieur PC SOFT, pour profiter dune expertise de toutes les nouveauté. Sur votre projet, dans vos locaux.en votre présence, Fingénieur PC SOFT valde tanalyse, vous montre des nouveautés utles dans votre cas, de figure, vous propose des optimisations de votre code, valde vos modes d'utlisation, ‘Yous erez ravi de eticacité de son intervention! Budgétez ores et la prochaine intervention! Un assistanat vous fait gagner des journées de développement ! Quelques exemples de suetstratés = Simplification du code et mise en place de nouvelles techniques HFSL Client/Serveur, Sockets, Webservices, Composants, Patch, Configurations, + Transformation de medules développés avec WINDEV en Webservices. + Optimisation de teitements avantlarecerte de application validation analyse avant de débuter une application, Formation ‘Séminaires de formation pour WINDEV, WEBDEV et WINDEV Mobile PC SOFT organise & Pais, chaque semaine, des séminaites de for ration 8 WINDEV, WEBDEY, WINDEV Mobile et Thématique (HFSQL, ‘Webservice, GDS, Reporting, MV, POO, Threads.) de differents siveaux: fondamentaux, avancés, es séminares, animés par des ingénieurs PC SOFT expérimentés (compétence assurée }), permettent de découvrir et de maitriser |WINDEY, WEBDEV et WINDEV Mobil selon un plan efiace. Suivre une formation organisée par PC SOFT est toujours rentable est se donner les moyens de matriser WINDEV, WEBDEV et WINDEV Mobile dans les meilleurs délais, ou den découvrir la face cachée, ‘encore plus puissante | Inscrvez-vous vite! Ces séminaires peuvent également éte organist dans vos locaux, en France et & 'étranger. Le montant de ces formations est déductible du “15% Formation”. CConsultez le calender des séminaires joint 8 cette LST (e tail des stages et les cantenus pédagogiques sont disponibles sur notre ste ‘Web : wnmpcsof formation), vous rouverez LA formation adaptée votre experience et votre besoin. Contactez le service commercial pour plus informations (Fabrice CHAMBON au 04.67.032.032). 4 - LALETTRE DU SUPPORT TECHNIQUE PC SOFTWINDEV. @ CHAMP PLANNING : PERSONNALISEZ L'INTERFACE, C'EST FACILE ! Jun 22 mar 23 mer 24 feu [RDV cliente / SCORAPRO ae cerrance! Emily Gabriel Personnalisation des = _ rendez-vous Elyne ees vel Par détaur afichage des rendez-vous dun champ Planning (ou dun champ Agenda) Lslise une fenéte inteme die du produit. Cette fenétre interne offe un aspect vsuel standard qui Fabien Not] peut ne pas étve adapté & toutes les IM, lest posible de personnalser cette fenéte pour un congés planning: depuis la description du champ Planning, ‘onglet “Général”, déroulez option “Fendt interne (en bas) et sélectionnez pour les rendez-vod Fenétre prédfnie’. = DOSSO isati temps, de défi le Hoel de fa ressource Go ‘dans une variable de type chaine: La fenétre interne prédéfinie “Fl_WinDevVueRDV" est des ressources sccriertan es ve chan automatiquement ajoutée au projet et peut étre modifiée Par dau i est possible de msifer Cpelsest formal pour afcher: comme rimporte quelle autre fen interne faclement aspect vsveldune res. : i West toutfos important de respectr quelques points source. suite moder lesparamétes oy // v8 gra : + conserver des dimensions adaptées pour la fenétre suf de mores les paroritres Commercial += gCoord(120, 25) + interme, tess gece cule posteceteaxpusi, ‘TIME a oor 20, 28) deccpenduchanyDaningaestengr ova A gPoleeGas0) ‘Sow Gomer a cesar eh See Lee a 5) « Soumaret comer Leajout dune ressouree par programma: tion fonction Wangage PlanningAjoute- Oana a Ressource) permet également de précser “Copnmercal r= geoord(, 0) e m= ajoutée dans le bloc dela glmage(tRepExeD+"\photos\Elyne jpg") Laressource est ensuite ajoutée vila fonction le commerc PlanningAJouteRessource, + utiliser des ancrages pour que le rendez-vous s'adapte PlanningAjouteRessource(P. Exemple, au mieux (par exemple, lors d'un chevauchement 0 la lyme PRENCES ‘Attention: por out, la ressource est feria ‘Repéxe0"\photoe\etyne jpg?) identifi par son nom. Lrsque fe nom LinconvérientdecetesytaeestqueTimage 8 ressource est formaté (comme dans estcentéedanseboctessourelestdonc CLE, chaque app=| Manu oS Tema Planing Personal inécessaire de disposer d'une image adaptée ‘@ssource (comme Fajout d'un rendez-vous aetna eslibelés ont été aorancs (ue retailer image par programmation) Pe exemple) doit ut formate, ia couleur du rendez-vous est appliquée directement pour quill sit commbinge un texte our contouner ce fonetionnement est en fond de a fenéte inte (une image blanche Semi Lasolition proposée danstexemple consste a Conselé c'utiiser la fonction gLiem lors de transparente est positionnée par-dessus pour aténuer taille du rendez-vous ext plus petite Exemple aan eerste Worcs tasisoutdelareource enprécarsuniden: ly colen fonctons ont fat Fojet un arte deale ‘att pis simple que le Wbelé format (pari coueur des bells ext adopté pour avoir une mel dar a ST 2, pages 24 et 25) corps, idntfon auterutique our) aun sbane quence soko coler de fond dete enregisrerert sles ments non ul ender vous éptmporant I est ainsi possible de postionner manuel Acute =e Jot spins, lement les éléments (images, libellés, .) 3 BianningAjouteRessource(?LN_ Exemple, + selon la hauteur accordée au rendez-vous, le libellé de Tadedelatoncion Langage gCooed Cane PanningtiouteRessoucePLN Eremple, zelon[a hauteur accordée a render vos bell 3 peut tre masqus (la hauteur est nsufisarte) fonction permet de postionner au pixel tous glien(CommerciallDCommercia)) m et : les éléments qui suivent son appel bell, @ icv. shure via oncon image Pour cela il et nécessaire dans un premier La manipulation dela ressource peut ensuite . se fae en utlisant cet identifi LALETTRE DU SUPPORT TECHNIQUE PC SOFT- 5AMBIANCE ET GABARITS INDOOR Patina Ce et eee ee ae ee fei LOGICIEL A) WINDOWS ate 2018 > ‘Summer Festival Rock! Nae mae met jeu_ ven sam im B Sslon du design géométrique ‘concert Emily Palojiskt ‘pesiton “yous? @ SITE WEB pd ST en ee ee PRECILIA Manteau de fourrure élégant 259€ ) Ss (M) L XL @@ee@ Mise en jm R eV Taille Couleur Les styles della charte graphique "Indoor" font été concus pour obtenir une appli- cation jolie et ergonomique, sans sur- charge! Cette page présente quelques idées de présentation basées sur cette charte . somone okeon — {graphique (ce ne sont pas des exemples LEPROCESSUS AVIONS EXPEDTIONS —OECOUWRIR VOL ire).WD INDOOR UNE APPLICATION WINDEV COMPLETE ET PRETE A LEMPLOI DE GESTION DE SALLES DE SPORT. L'INTERFACE DE L'APPLICATION EST REALISEE AVEC LE GABARIT “INDOOR”. LLexemple "WD Indoor’ est un exemple complet de "gestion de salles de sport” pour Windows. Cet exemple utlise le gabart Indoor” lire avec la UST, Voic les particulartés de cet exemple: 1. Un accés rapide aux sections via le menu latéral gauche. Ce ‘menu est constitué de plsiews champs Bouton, La section en cours dafchage est représenté par un bouton état enfoncé 2. Une interface épurée qu met en avant les informations pro ritares. 3. Lutlication de ifférerts styles de table selon les informations achées: + pour les tables comportant un grand nombre de lignes avec beaucoup informations lignes sont pus fines (pour permette dlaffcher plus de lignes) et les couleurs sont aternées entre chaque ign (pour faciiter la lecture). Cest le cas de la table des factures par exemple. + pour les ignes comportant moins informations et pour le quelles les lignes doivent dtze bien dstintes, les lignes sont plus espacées, pour allégerVinterface, Cest le cas de la table des membres par exemple. + pourles autres tables, un style plus standard est appliqué 4. Les champs de sisie sont larges et haus, pour permettre une saisie et une visualisation des données plus aérées. 5. Le planning de Faccuel utilise un code couleur rapidement identifiable: + une couleur neutre (aris), peu accentuée, pour les servations passées réservatons sur lesquelles i n'ya pas besoin ditervern + une couleur chaude jaune orang, pep’ tres accentuée, pour + une couleur dans les tonaités du gabarit (violet) pour ls és: vations & vent Ct exemple requiert un pack de mise 2 jour spéciique, présent dans le repertoire “Support” du DVD 1: "WK230PACKOIOS3KWINDEV. ACCEDEZ A VOS DONNEES » STOCKEES DANS COZY CLOUD Parmi les solutions Cloud alternatives, Cozy Cloud dispose d'une offre intéressante pour les professionnels car elle peut étre déployée sur des serveurs “privés" ou dans un réseau local. cozy est une plateforme cloud ‘ratte hebergée en France qui propose de stocker toutes ls don nées personnels (photos données bancars,factues, ec), Lapartcularté de Cozy est qui est poss installer son propre serveur “cloud chez 0] ou sur un serveur de son propre réseau Les accés API et ls applications y accédent dela miéme mane que surlecloud propose 2, en ligne, le “WD Cozy Claud" utilise un com: Interne permettant dinterroger un serveur Cozy (public ou priv interne expose uniquement es jon de fichiers, mas le principe rest dentique pourinterager les autres APL (tiches, tc), Pour utiliser exemple, il est bien entendu récessare de disposer d'un serveur Cozy soit réé depuis le site “cozyio’, sot install surun serveur personnel (hitpsziidocs cozy Présentation Cozy propose une plateforme de dévelop [pement basée sur REST afin de manipule les données dun ser ments, applic Laced est done étre ws si hnepRequéte d sent ge via le type ngage. a documentation compte du service clsponile adresse suivante: "https Enregistrement de application Une particular de Cozy est qui ist pas nécestaire de créer une cé API sur le serveur application qui se connecte peut automa tiquement enregistrer aupres du serveur Cette opération est réalsée avec la fonction CozyApplicationEnregistre de aco ‘COL, AUTH” du composant interme 8 - LALETTRE DU SUPPORT TECHNIQUE PC SOFT MesParamétresCozy.Application.Nom=. WINDE MesParamétresCozy Application Version= ExtraitChaine( VersionWWINDEY, 1,"") MesParamétresCozy Application D= . nd URL est une chai » SAI DOMAINE.COZY MesParametresCozy Application = CozyApplicationEnreaistret sURL ‘MesParamétresCozy.Application } La fonction tenvole une version mise & jour de Ia structure CozyOAuthapp recue en paramétre (notamment avec le token de application, nécessaire pour ire et modifier ses données) Connexion client La connexion client est une connexion (OAuth 2 dassique, Cette connexion estrea- lisée grice& [a fonction CozyConnecte cuiattend en paramétes *TURL du serveur Cozy, + les informations de application enegisrée précédemment, *les permissions demandes. 1/8ffectue une connexion utilisateur U7 (et demande les droits pour accéder ae fichiers) stToken est un AuthToken stfoken = CozyConnecte(URL, MesParamétresCozy. Application, ‘aysystémeDeFichers ), Lorsque le token est obtenu, toutesles autres fonctions du composant interne (collection "COLES" seront accessibles Systéme de fichiers (“Cozy Drive") La coletion *COL, VES" (pour Virtual File System) implémente les APIREST dusytérme Ge ihiers de Cozy. Nest possible de: flisteFichier) pour érumérer les éléments + gérer la corbelle (un fichier supprimé est présents dans un repertoire. Cette fonction envoyé dans la corbele, attend en paramétre un identifiant de réper- “stor les fichiers et ls repertoires, toire comme point de départ. + ajouter des fichiers t les mettre & jour en ‘grant des révisions, 11 Réeupbre la liste des éléments + créer des répertoires, des archives, 11 du dossier cae eee eeeel SListetléments est une chaine = CCozyFSListefléments-Répertoiret. Lafenétre"FEN.COZV" de Texemple expose URL, tune partie des fonctionnaltés proposées. | _NiesParamétresCozy Token, slDParent, est possible de es islisteDétailée ) “ster les repertoires et les chess, + supprimer un répertie, + envoyer, télécharger et supprimer des fichiers. Remarque: ces fonctionaliis sont accesbles Soit depuis les boutons, solt depuis le menu :|DParent) Pour récupérer un fichier i suft tout auss simplemente Fournir son identifiant Ia fonction CozyVFSRécupéreFichier en précisart le chemin local ou sera tléchargé lefichier B Télécharger un fichier Emplacement est une chaine 11 Ouyre le sélecteur de fichiers sEmplacement = fSélecteur(", 28 DRIVE[ N ].LIB_Nom.élément, “Enregistrer sous. "Tous les fichiers (1° + TAB + ™*", "4, felCrde + felxiste) Récupére le fichier séletionné CozyvFSRécupéreFichier URL, MesParamétresCozy.Token, ATT IO[N}, sEmplacement) LALETTRE DU SUPPORT TECHNIQUE PC SOFT - 9WINDEV_ WEBDEV. a TESTS AUTOMATIQUES DE SITES WEBDEV AVEC SELENIUM Selenium WebDriver est un framework permettant d’automatiser des tests de sites Web sur de nombreuses plateformes. Ceccrar-larfe Manel CC Mec LT aU tC MAM fem a CMU e URL) Selenium pour vos sites WEBDEV. Cees ae ay > W@W o> le Ere on — erred en JAVA, du code mer (directement depuis WEBDEY et Fécteur de tests), mais aalement utilisation de Vinterface au tra vers des navigateurs que peuvent utiliser es ces test automatique dansle domaine du Web nécesstent de gérer les tests Principe Selenium WebDriver Sleium WebDriver wseleniumhg.org) stun framework csponbte dans plusieurs Tangages ne permet pas de réalser un test ‘a urtour sel Le ramevork permet dancer un navigate vio un drier four par chaque navigateut Une fi le navigate lan, le framework iloguer avec le navigateur au moyen au diver Le test est fini dans un langage donné: Java, C4 Ruby, Python, Javascript NET. Ce gateur le framework ‘i pllte le navigateur Pour la LS, ia ue cols de travaler avec le framework NET ete framework Java. Ain les tests peuvent fre exécutés depuis le WLang: Les instructions données au navigateur sont 11s simples. Cree Mca ten fonction des instructions de test Pee og xemple dinstructions “nttp/ocathost/ \WW_TESTAUTOMATIQUE WEB/ER/ |Element est un Webélement dynamique oclElement =. [river FindElementByl Element Click Ecriture des donne ramp pelelementsendkeys(’3 rue des fleurs") WEBDEV et Ie pilotage automatique esses WEBDEV peuvent tre pilots comme svimporte que st par Selenium WebDrver ‘Cependant, certains champs cnt des intra tions particles avec Tutlisteur fut done utlizer quelques astuces pour les manipuler sans probleme. Cas particulier: le champ Table Lars deajout dune ligne via a 1am Table avec jou de lignes automatique, sare de perdre le focus du champ tune ligne, Pour faire cela dans le testi faut forcerun clic surglément "body" 10 - LA LETTRE DU SUPPORT TECHNIQUE PC SOFT de la page entre chaque sase pour perdre le focus sur le champ Table. ncllement est un IWebElement ‘dynamique jonne de table 1 FindElementByld("c0-AA" lick) pelflement Drives FindElement®yXPath(. “Hinput(@rype="text pclElement Clear) ncllement SendKeysa") chaque action il faut perdee le ocus sur la table Element Driver FindElementByTagName(‘body") Element Click) Suite du test Cas particulier: le champ Planning llestimpossble de ploterlechamp Planing via Selenium. En eet, le framework utlse les “id* pour retrouver les éléments dans a page, ce qui estincornpatible avec le champ Planning. Ain de tester ce champ, il faut done avoir recours & des fonctions Wangage. Le‘ramenork Selenium WebDrver permet ext cauterles fonctions navigateur dela page. Pour Lorsque le test est termini reste & fermer Selenium Je navigateur, en utilisant la fonction Quit tnanpulerle dump isufitdoncde déinr Utilisation depuis dudtven tune fonction navigateur qui manipule ty lication 11 Fin du test alimentelechamp Panning, Ceteopératon UNE applicatior pelDriver Quit) Seffectue via la fonction Executeseipe: ~— WINDEV du 11 Execution d'une fonction jvascrpt framework .Net Réutilisation de pel0bjeus est un : rcnje a esesor sania Intégration du "exemple WINDEV li avec la LS, i est nécessire de: Seen Pour réaliser la mise en place + intégrer le framework Selenium au projet Note:en cas tiation de données/champs de Selenium WebDriver pour comme expliqué& tape 1 “ntération du serveur, pensez & utliser des traitements Ie framework .NET, i sutfit dintégrer ce framework ‘AJAX dans la procédure navigateur pour framework au projet WINDEV via les opé- + rendre accessible le site “WW_ "anipuler ces données/champs. rations suivante ‘esthutomatiqu”surle poste local Pur cla, + télécharger le framework. NET sur simple GO projet depuis WEBDEV suit @ Selenium: “chtepsi/hwmw.nugetorg/packages/ IL est alors possible drexécuter exemple Téléchargement Selenium weboriver7 WO Testautomatique™ Lexemple “WO ° i + déiopelefchier upg tlécharge Danse TestAutomatique" permet de lancer des tess des "WebDrivers' répertore “ib se trouve laliste des versions sure site “(WW_TestAutomatique. INET disponibles pour etramewark. Note: La version NET 8 utlser dépend de Ia version de Windows et des laments is- ‘Astuce: niésitez pas & vous inspiter des Les drivers des navigateurs sont lités su le tests de ce projet exemple pour écrie vos stese Selena drs laibigue Tae Pary roprestes Devers, ngs. ne Pug tals sre peste de dveloppement Pas Itps/amsleiamhgorafdowload, et Selenium: ‘avant de développer des tests ilestnéces-_dotnet/remework/migration-quide/ Utilisation depuis ‘ate de tlcharger es WebDrivers cores. versions-and-dependences) licati fondo aureus 3b BOWS nage eer "WedOe dase UNE pleted ion tests es naigteurs doivent ere presents ilisati poet WINDEVdepistepionteurdupeet Java (utilisation sur la machine). Par défaut le projet de 12 (option “Utliser un assemblage NET dans io IST content des es pour les navgateus—{CPrgeyy avancée) Chrome, Freon Edge et Opera chaque criver est un endcutable (eve) qu sera Le projet Java four’ avec la LST est présent LLenserble des commandes disponibles pour das le repertoire "xe\Seleniu\Prejet JAVA ‘manipulerenavigateur est sé parl'assem- Scitcpemnmceetodnes tropenmaiorsie pe ma por @ —tesiecrseteeeete pee stare tun ie ena “hone Qi tow tome en cde eon httpsi//sites.google.com/a/ WebDriver pour le framework Java, il est canary rea: La structure d'un test est toujours possible dlutiliser le projet Java fournit avec =o tre S'Srsonme be orc https/ithub.conymozila/geckodriver? + lancement dun navigateur Pour ouvrr le projet depuis Eclipse, clique releases + rlsation du test ‘util’ puis “Open project from fle sytem” + Opera ea et cholsisez le répertore du projet Java htt //tisconvopersotivare/ Pour lancer un navigate I suit instancier eerie pues le driver du navigateur en lui dannant en pararatre le chemin vers son WebDriver Par + Foe ‘exemple pour Chrome: https//developer microsoft.com/en-us/ rmicrosoft-edge/tools/WebDriver/ Ce projet ne contient aucune libra: i est nécessaire de les ajouter(opéation tale dns les points suivants). Note: Ce projet contientes sources des tests // Lance un navigateur chrome Rese eee ae pelDrver est un RemoteWebDriver . ‘dynamique Note2:Laliste de toutes les commandes pour Note peutparois dre nécessaieclajouter_pciDrver = allouer un ChromeDrver(. _mgnipuler le navigoteur ext lspombe sur lerépertoire instalation du navigateur dans sCheminWebbriverDuNavigateur) a ee ae ee lavariabe ctenvironnement PATH" du poste. ne fois lenavigateurlancé lest possible de does/apijava/ fini le test (ajouter des ccs, remlir des formulaires, etc), ® LALETTRE DU SUPPORT TECHNIQUE PC SOFT 11TESTS AUTOMATIQUES DE SITES WEBDEV AVEC SELENIUM (SUITE) ‘Unit’ puis WUnis", + validec Structure d'un test JUnit LLannotation @8efore permet dindiquer es ‘actions éalser avant le test.Cette annota~ tion pemet de chagere driver du nvigateur et de e lancer via instancation du driver Before public void setUp0 throws Exception { ‘river = new ChromeDriverO; ) LLannotation @Test indique le test reais Dans cette annotation, se trouvent toutes es instructions de test 8 transmettre au navi= gateut @rest public void monTest0 throws Exception ® F Téléchargement ran (ommonsio. : du framework Dans ce cas, il ext néeessaire dajouter ces Selenit Nbraiies au projet Java dela méme maniére annotation @After permet dexécuter du errr «quel ramewerk Selenium. code aris test Dans ce bloc, le navigateur WebDriver Java put re ferme via la fonction quit Le framework pour Java est disponible & Chargement des Cet! Pe ee cere aon 3 “WebDrivers" pablo enDown hrowe cepton Client & WebDriver Language Bindings ea — 5 driver sera chargé dynamique tps raw seeniumq.org/download es ’ Une fois charg, Hest nécesaite de et . les fichiers jar du framework au projet Java. import org.openqa.selenium.chrome. Selenium et Pour cla ilfaut ChromeDaiver, : “fare un clic dot sur le nom du projet puis Java: astuces et liquer sur "Properties Det fonctions avancées (ots hie aitimeokptckcemmant) ESTEE SOC Putte que dri tous es tests en v8 téléchargés, y compris les fichiers contenus chromedriver.exe"); ‘mai, exste des extensions “Selenium IDE Enregistrer un scénario de os sorati CTorregarer les manpultions eflectudes Télécharger les Fi] integration de puis de gender le code lava corespondant. autres librairies JUnit : Crest le cas, par exemple, de Festenson Java et les lier Pour intégrer JUnit dans le projet, “Selenium IDE" pour Chrome: au projet i fout: hutpsy/chrome.google.com/webstore/ seffecer cic rit surlenom du poet Sevslenumedes Des ibraes completes sot ncet~ puis chqur sur Properties movilfkahbdckldjjndioackbalphokd er Sn ea oe ae co eg cere aa eT ; plémentares comme envegistrer des vidéos “ypraries, ma '3It Dans cette extension il est possible de créer ln test puis de clquer sur *Record” avant (aruresecorder) ou éaser des caprres —« stectonner option “Aad brary etches g-etectyer les manipulations du test dans le 12 LA LETTRE DU SUPPORT TECHNIQUE PC SOFTest possible a'exporter ls tests pour les piloter depuis une application WINDEV. rnavigateur Lenregistrement du test ‘arte private ATUTestRecorder recorder; Lancement de JAR via le lors du clic sur ‘top" eta partie cite Je Lenegisementseiecte soustannotaton Wlangage et récupération eters afche [ast des commandes — perse dulog realists. ae Une fois le test exporté en fichier exécu- Pour reutlisercetest lest nécessaiedetex- recorder able Jot let pase eeu costo porter vale mena Expor’enstecionnant new ATUTestRecordersChemine depuis le WLangage. Pour ela fat lancer Temode ‘lava Webdrivee + Un) "Nideoy","est.chrome’ false}; ‘une invite de commande et ance le fichier oe recorder start de test, par exemple en utilisant a ligne de @ bees testes nd t pete detest par oem Ace ade est et Gd pei eae rewepterent see fla ie amesiaterentae der oeton ates sous famotaton @afee cmebene/Cjavajar"C\CheminVers\ realisation de captures décran, et. recorder.stop0; ee Note: dans Fexemple fouri avec la ST, ls Changer le navigateur Faire une capture d'écran fonction LanceUnTest permet de lancer fac ar fut, les tests généés sont configurés_Pourréler une capturedéran pendant un lementun test et derécupérer on ésultat pour le navigeteur Firefox. Pour change le tes fauttiser a fonction getSerensho- Tavonturguntes es acest derés: es Exemple de la ST Tae qulques modo create pour copie eat de a cap- DBS Txenpe avec Sst dt 1: Changer import en haut eter pour re dann cher ak uterlafoncton reconfigure poste de velopment indqueusage un auveravigteur dons Conve delice commons (un Go suit, Leste srt uniquement de support au test Avant de lancer les tests ist nécessaire de copier ls libraries nécessaites exemple ci-dessous Chrome: 1/ Une capture d'écran au milieu du test =a File scrFile = ((TakesScreenshot) driver). Jertoi ingrtrgapemnatesimrome, Gaerne tu et dan le epertie de chaque test: as Fievslscopyresafle newFleschemine _ ©€/Ts CasPricer POOL 2 fimprinetean/ccransase-come"” — &6/Test Navigateur700N0 = Apis ’ sale import org. opens snlnichrome Png faut également copier. Gromebtver + utes les ibraies nesses: Framework acuereanercugedansietorten RéUtilisation des set it ecco @ _ sito du test Comme pourle premier tests Java depuis UN€ les crivers des navgataurs dan es pe «25 enfoncion duravigateu le diver nest ev ‘ers eine liar heee ected application WINDEV —_ ‘res Weborver Gu naigetout dans le dossier Webrier fxe/Test/ Casares / WebDriver eae Citation dexeuable txe/Test/Navigateu/ WebDiver Lit que dexter les tests Jove S049 sos posble castes fahler Par det pour Pefon Tcipse, et possible Cevporer ces texts Loramie Posble de eas sto Uf Drive Firefox sousforme defchiers JAR. Ces fchiersJAR Gussie ercton LanegUnTet pout reer es SrtemsePoperacwebDivergecto, —Seortetevablesdepusle Wargo. a Cte ceo espste sa inca pecan Pourexportervottetesten JAR sous clpse, Monde Procédes ‘COL TstAutomatiqus. driver = new FirefoxDriver(); IPSe, JAVA" Hestnecessre de 7 1) Orv Choma = fie un cc rot sua dss & exporter Systemsetroperty'WebDrive.chrome. _uisslectonne "un as Jae Applicaton’ ative. sChemin +"7MebDrver! (pourlancerle testi n'jamais ét exit chvomeciverexe: are un ce crt sure poet puis ste driver = new ChromeDriver); tomer ‘expert + choisi option “Runnable JAR fe’ Enregistrer une vidéo + slectionnerle test et lerépertoire export Par défat es tstsrienregistrent pas de vos, ‘cependant ia ibraie"ATUTestRecorder" pee: met 'enregistrer des vidéos du déroulement des tests. LALETTRE DU SUPPORT TECHNIQUE PC SOFT - 13WINDEV WEBDEV. WINDEV. APPLIQUER UN "WATERMARK" SUR VOS IMAGES POUR LES PROTEGER Lorsqu'on utilise des images dillustration, pour une application ou un site, ou méme lorsqu’on fournit des images dillustrations, il est parfois nécessaire de "marquer" les images afin d'en indiquer la provenance et la propriété. On parle alors de “tatouage numérique" ou "watermarking" en anglais. L'utilitaire "WDWatermark" permet de “tatouer" des images avec du texte ou un logo, de créer des modéles de watermarks pour les appliquer a d'autres images. Le code source de I'utiltaire est livré: il peut ainsi étre facilement étendu a vos besoins, Toute la gestion des images, des calques et des transformations est entiérement réalisée en WLangage. e watern de facon untae de | redimensionner image (raccourl "Ct + T), | - découper (ogner)Fimage (faccourl “Ctr Maj +): la sours, vous sere invite & dessner le rectangle de découpe 8 lécran Ces deux opérations peuvent tre réalises une seule fois chacune. Elles sont mémorisées lors de Texport dans un mode et sont rejouées lors de Fimport d'un modele sur une autre image de travail Un calque texte peut tre ajouté par ce bouton ou le raccourc “Ctl + | ate +7 Le texte peut éte mis en forme (couleur alc, ale transparence, ombre porte) et tre écrit dans plusieurs langues (Francais, Anglais, Espagnol Lecalque est toujours éditable, méme sil est manipulé a écran(déplaé, redimensionné ou tour) lest posible adapter tale du calqueen fonction du texte viale menu contextuel surlecalque lest également possible de modifier dynamiquement [a talle de Ia police lors dun redimensionnement du calque en maintenant la touche. | sate enfor CALQUE IMAGE ‘Un calque image peut étre ajouté par ce bouton ou le + alter image peut tv redimensionnée et tournée. lest possible de conserver les proportions de image lors du redimen sionnement en maintenant la touche “Mj enfoncée. TRADUCTIONS DES TEXTES -ATaficage lest possible debasculer su unelngue donaée Francis Anahi, Espagnol. Si un enregisverent est eflectut, image fae sera exportée dans a langue active is the property of Precilia® and may| | not be used without prior agreement Precilia® yno 9 puede ser utfizada sin acuerdo previoJur les images fore c rrr MODELE DE CALQUES. a Silerésutatobtenu redimensionnement. I découpe, calques, et) doit re app“ qué sur plusieurs images, ilest possible ey lexporterFéprewe en tant que medéle =e (cour "Ct © AR sou pon yy apo en tat que ode s Pour rejouer ce mode i suf ou trrune nowele mage et importer le 2, sae, See rmodele (raccoure “Ctl + Alt + Mou option “Importer un model’) Les modéles sont enrejstrées dans des fichiers “MWA. Pour falter le choix d'un modele le séecteu affiche un aperc, ‘TRAITEMENT PAR LOTS a | LLopton "Traitement par lot permet dappliquer tes rap ‘dement un mode (un ensemble de calques)surlesimages un repertoire donne S rs 2 (cimeinenavrbeein a Modifier. a Adaperlnaite —Cule0 an ‘Aignes P] bord gauche ‘Aeander average ord dct ond haut Isuft de definc copies ane + le répertore source contenant les images a Yatouer Suppimer Supp | Bertie +e repertoire destination ot serontplacées les images aprés| Centre horiontl tratement, as +e fichier modéle a appliquer a chaque image, + la langue des textes (si des calques textes sont présents| dans le mode) MENU CONTEXTUEL ‘Chaguecalque peut etre ancré selon sa poston relative 3 Timage (option "Ancrer la position’ du menu contextue) au encore aigné sur Fun des boas de Fimage (option “Algner." du menu contest. Ceci est partcurement iil dans les madéles qui peuvent étre joues sur des images dont les dimensions sont ffrentes es unes Bes autres, Le menu contexuel permet également de ‘CODE SOURCE LIVRE + modifier le contenu du calque, eutare WOWatermark” ext live avec son code source + adapter la tale du calque a son contenu, afin de pouvoir étreintégré dans un fx de production + copier /cller le calque ‘u personnalsé. Bans ce cas, est nécesssie dappliquer + supprimer le clque, ‘unpack de mise jour spéciique, pésent danse réper- toire "Support du DVD I: "WX230PACKOBNOS3K’ LALETTRE DU SUPPORT TECHNIQUE PC SOFT- 1555 ETAPES POUR GERER LES ECRANS AK DANS LES APPLICATIONS WINDEV Avec l'agrandissement de la diagonale des écrans, les résolutions ont également évolué. Du format HDReady 1280x720, puis HD a 1980x1080, il est de plus en plus fréquent de travailler sur des écrans 2K et 4K. La particularité des écrans avec une résolution et une diagonale importantes est la mise a I'échelle. Visuellement, la taille des éléments est sensiblement la méme que sur un écran non 4K, mais la résolution est toujours aussi grande (3840x2160 pour le 4K). L'affichage obtenu est lisible et de meilleure définition. Et vos applications WINDEV dans tout ¢a? Si vous ne manipulez pas la position ou Ia taille des champs, il n'y a rien a faire... ou presque. Description de la fenétre eae Afficher en grande police Jom _amrageen grande ol Danstouslescas les appliatonss'afcher conectement |e oer noes SiTopton‘Afichage en grande poe” (onglet HM de la descipson def fenéte) est postonnée sur Agrancie [om nepsapand ine] Ni) Ia fete et es champs Unis estates poo N, Poteet.) Danse cas conta, es fends sfichernt dan a rslon compatible 20 7 courone mais san mse echele et done visuelemet rites ete option et active par defaut pour toutes es roves fends pramites créée vec WINDEV mas iipeut re nécessaie de active Sule Dae Tenétes sues ancennes versions Gérer des images ‘Comme a résolution est plus important, les images adap tées & un format standard seront mises & Téchele sur un affichage 4K. effet est un simple éirement de limage dans ses deux dimension, ce qui détériore a qualité suele Pour résoudre ce probiéme, il suit de remplacer les images exis tantes par une version avec une meilleur résolution: 3 fis la taille intiale permet de couvtir la quasi-totalté des résoltions| cfécran actuels (par exemple, pour une image affichée dans un champ en T6xl6 utils un fichier image de 4848, avec le mode Homothétique+ Haute Quali) Si tapplication est ulisée sur itférentesrésoltions, i peut étre intéressant de créer une bibiothéque WDL contenant les images “standard” et une autre contenant les images “4K” Ces biblothéques pouront te chargées (ala fonction ChargeWDL) ‘au lancement de application suivant a résolution utlisée (a fonction \Wangage FacteurGrandePolice permet de savoir s affichage est mis Féchele, 16 - LALETTRE DU SUPPORT TECHNIQUE PC SOFT =FACTEUR | | ae =e © Connaitre le facteur 8 d'agrandissement de I'écran Ls fonction WLangage FacteurGrandePolice permet de connate le ratio de mise a échelle de Necran ela permet par exemple de calcuerla hauteur lib" d une police sur un éeran 4k: 1/Affiche le libellé en police 9, en adaptant a taille 17 selon les écrans Lib DATE,PoliceTale = 9 * FacteurGrandePoliced) Ajuster la position et les dimensions d'un champ Pour ajuster la postion et les dimensions des champs i lest nécessaie de passer par une conversion via ls fonc- tions WLangage CoordonnéeEditeurVersEcran/Coordonnée- EcranVerséditeur. //Positionne la hauteur du ibellé& 32, en adaptant selon la 1 résolution de Vécran UB FOCUS. Hauteur = CoordonnéeEdlteurVersEcran(32) Conseil: si vous devez convertr plusieurs fois une méme valeur numérique avec les fonctions Coordonnée€diteurVersEcran ct CoordonnéeEcranVersEditeur, mérovsezle réultat dela corer sion dans une variable globaleetutiisez cette variable globe, Cela fevtera d appeerinatlement la fonction Détecter le changement de DPI le} (déplacement de la fenétre) ‘Sivous souitez adapter le contenu de vor entre lorsque calle est déplacée dun Geran 4K vers un écran standard, Lest posible de suv 'événement Windows “WM DPICHANGED” Cot événement est transmis par Windows & la fenétre lorsque le changement de résolution a été appliqué J intercepte Vévénement Windows 1) "WN DPICHANGED® (0x02E0) sur fa fenétre Evénement(SurMiseALEchelle, MaFenétre. Nom, 0x02E0) 1) Procédure appelée lors de 'événement PROCEDURE INTERNE SurMiseALEchelle) 71) Récupére le nouveau facteur dagrandissement soit NouveauFacteur = FacteurGrandePolice) FIN LALETTRE DU SUPPORT TECHNIQUE PC SOFT = 17Les enceintes connectées apportent de nouveaux usages aux assistants virtuels de Apple (Siri), Google et Amazon (Alexa). 4 L'exemple "WW_Alexa" présente de fagon didactique, la gestion d'une prise de réservation vocale via Alexa Pour développer un dialogue via Alexa, il est nécessaire de développer une "skill" (ou "compétence") qui effectuera des appels a un Webservice REST WINDEV ou WEBDEV.lea est un assistant personnel ‘commercialisé par Amazon et disponible notamment sur les appareils Echo. Disponible en France depuis juin 2018, i est désormeis possible de développer des skis (applications Web pour Alexa} en langue francaise Présentation Une ‘skill (qu pourrait te adult par ‘com- pétence’ estlenam donné par Amazon aux Services Web utiisés par Alexa pour enrichir ses fonctionnaltés Chaque “sil” expose des “intents, assimi- lables & un point entrée Par exemple, en demandant& Alera: "Alera, allume la lumige’, “llume la lumiére" est, intent” dans a phase. Une “intent” peut étre assacie (ou non) & des “slots (ou variables) ‘Autre exemple, en demandant Alea: ‘Alea, baiselaluminosité de 10 paurcens,"oisse la lume” est intent et "de 10 pourcents* est un ‘sor. Ces slots" et"ntent” sont fin sur a plate- forme de développement 'Amazon, Le service Web intertogé, qui répond 8 ces “intents en fonction de ces"slots, peut tout 8 fait éte développé avec WEBDEY et en particulier grdce aux fonctionnaltés REST. Principe Pourctéer une" Alea aut donc abort ta dfn surla plateorme de développement ‘Amazon, pus créer et dvelopper le sence Web REST avec WEBDEV. Le projet "WW Alera le avec cette LST, permet de complétrla dinion dea sil cxemple que ns alos raiser sagt ne "sll de mulation de réservation hel Création de la "skill" Alexa Aptés avoir c66 un compte ou aprés sre identi, vous pouvez créer une “sil” depuis lapage htps//developeramazon comvalexa/ console/as Endiquant surle bouton [Create Skil], vous ates iia + donner un nom findique2 "LST + défiir la langue de la “sl” (cholsissez “French” + chosrle modéle desl” créer (chose “Custom, Les autres modéles peuvent etre créés et gérés avec WEBDEV, mals pour les bosons de cet article, nous avons choisi de séletionner "Custom Un clic sure bouton { Create Skil] permet Far COTE FH SIO Pa Waly a ser Aer at daly haerapa forthe erncope fr poucon evnet ein a sale a “oe ‘Skil vocation Name et 5 | veer , ‘Sample Utterances (10) eens enue |h erserverun nie Gees (a) (te) eres le) et) je ever une tl) ce reserver ante ee» at Fo 3 te) reenerelunhis (le) (se) de créer la skill et datfcher le tableau de bord de la sil sur lequel est possible de fires “intents Paramétrage de la “skill” Leparamétrage dela “sil peut re effectue as pas enligne, en suivant es instructions Déploiement ‘AexaConfirmevaiblet Loreque le service REST est tring i sft . eleanor rea dee ployer en ligne (PCSCloud, serveur privé, 1 erin ate Leserveurdot te accesible depuis tet {Ales sels les vrables confines ou et doit absolument exposer le service i/00n, demanderaavaleur des var tiquement en HTTPS 20 - LALETTRE DU SUPPORT TECHNIQUE PC SOFT