0

Présentation d’Xcode : les playgrounds

Bien maintenant que nous avons vu comment ouvrir Xcode (cf présentation d’Xcode) et vaguement à quoi il servait, on va en profiter pour découvrir un peu plus en détail ce que sont les playgrounds. Alors à vos claviers, aujourd’hui nous coderons (un peu) !

//: Playground – noun: a place where people can play

 

Pour cet exemple nous allons créer un playground vide (blank) sur la plateforme iOS.

 

Lorsque l’on crée ou que l’on lance un playground, Xcode doit d’abord mettre en place l’environnement de développement et lancer le simulateur d’OS. Comme tout le code que nous écrirons sera exécuté en temps réel, tout a besoin d’être prêt dès l’ouverture du fichier. Nous voyons donc qu’Xcode prépare le terrain pour nous dans la barre d’état du playground :

Une fois le simulateur chargé, le playground est prêt à fonctionner (la barre d’état affiche maintenant Ready et on peut voir dans la colonne de droite un sympathique "Hello, playground"" nous indiquant que le code s’exécute correctement.

new playground
Barre d'état
Réglages d'interface
1
Editeur de code
2
Live view
Console
Explorateur

 

En créant un playground vide, on s’aperçoit qu’il n’est pas si vide que ça, il y a déjà trois lignes de code écrites à l’intérieur de l’éditeur de code (1).

1
2
3
4
5
//: Playground - noun: a place where people can play

import UIKit

var str = "Hello, playground"

La première est un commentaire, elle n’est donc pas exécutée.
La seconde, import UIKit , permet d’importer le framework d’interface utilisateur graphique (User Interface Kit) et rends ses classes et méthodes accessibles dans le playground.
La troisième, var str = "Hello, playground" , déclare une nouvelle variable nommée str et lui donne la valeur Hello, playground.

Sur la droite (2) se trouve la Live View qui nous donne un retour en temps réel de ce que l’on écrit ; lorsque l’on déclare une variable la live view va afficher sa valeur, par défaut. A droite de la valeur se trouve un rectangle gris qui permet d’afficher le retour graphique sous la déclaration de variable dans l’éditeur de code. Au survol de la valeur se trouve également un petit oeil qui ouvre une popup contenant elle aussi le retour graphique.
Certes pour une chaîne de caractère le retour de valeur est le même que le retour graphique car la variable a une valeur brut, ce n’est pas un objet avec des paramètres, des fonctions, etc…, c’est seulement une valeur.

Rajoutons une autre chaîne de caractère à notre playground, mais cette fois-ci en utilisant l’interface graphique :

1
2
var label = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
label.text = str

Une fois ces lignes rajoutées à la fin du code actuel, Xcode détecte que nous avons effectué une modification et lance l’exécution du code :

Alors dans la live view, on voit apparaître deux nouvelles lignes de retour en face de nos lignes de code. La première ligne déclare une variable label contenant un label (un calque de texte) contenu dans le rectangle CGRect(x: 0, y: 0, width: 100, height: 100). Si à coté de cette ligne on regarde la visualisation de rendu graphique, ce sera vide, car nous avons seulement créé un carré de 100px par 100px capable de contenir du texte mais pour l’instant il est vide.

Dans la deuxième ligne, on attribue la valeur de la variable str déclarée plus haut comme texte de ce label. Ainsi, on peut voir sur la visualisation graphique de la seconde ligne notre texte écrit dans la typographie système dans notre carré, et il y a même des points de suspension car le label a calculé tout seul que la longueur du texte a afficher était plus longue que le conteneur dans lequel il devait rentrer. Cela fait partie des fonctions intégrée d’un des objets disponibles dans UIKit.

 

Voici rapidement à quoi servent les playgrounds en fin de compte : ils permettent d’obtenir un résultat quasi immédiat de notre code sans avoir à utiliser d’émulateur de système, de matériel supplémentaire ou même de tous les réglages nécessaires à une application. Il nous permet de jouer avec le code et de tester des choses sans se prendre la tête.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *