Warning: fsockopen(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /dsk/www-master/html/2009/ecrire/inc/distant.php on line 699

Warning: fsockopen(): unable to connect to www-ari.ufr-info-p6.jussieu.fr:80 (php_network_getaddresses: getaddrinfo failed: Name or service not known) in /dsk/www-master/html/2009/ecrire/inc/distant.php on line 699

Warning: fsockopen(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /dsk/www-master/html/2009/ecrire/inc/distant.php on line 699

Warning: fsockopen(): unable to connect to www-ari.ufr-info-p6.jussieu.fr:80 (php_network_getaddresses: getaddrinfo failed: Name or service not known) in /dsk/www-master/html/2009/ecrire/inc/distant.php on line 699

Contrôles des connaissances de acii
4. Le style c’est classe


Cet examen sur machine en 3 heures réunit les deux architectures clients / serveurs les plus utilisées sous Unix, savoir Apache et X-window, avec une pincée de technologie d’Ajax. Il s’agit d’écrire un navigateur minimal, capable d’interpréter une page HTML réduite à une suite de balises table, chaque sous-balise td étant assimilée à une fenêtre X-window. Ces sous-balises n’auront pas de contenu, mais leur forme sera déduite de leur attribut style présent dans la sous-balise ou dans ses parentes, ou des attributs class ou id référençant des styles définis ailleurs. En particulier, il faudra analyser le contenu de la balise style en début de page, et effectuer des requêtes HTTP commandées par la balise link indiquant une feuille de styles par son attribut href.

Un exemple d’une telle page avec différentes feuilles de styles est fournie par ce lien. Il visualise une table de 4x3 cases de couleurs variées, et une deuxième table de 3 cases. Quand on clique sur l’une de celles-ci, la balise link est affectée, ce qui provoque un réaffichage de la page avec une nouvelle coloration. Le but de l’examen est de simuler le comportement d’un navigateur sur une telle page.

Comme d’habitude on trouvera les fichiers suivants, donc aucun ne devra être modifié :

Les conditions techniques de l’examen sont décrites par la brève de convocation, qui fait partie de l’énoncé.


1 Classer les classes (3 point(s))

Un style peut-être anonyme (attribut style d’une balise) ou repérable par un sélecteur référençant une classe. La déclaration d’une classe est composée de sélecteurs suivis du style entre accolades. On se limitera à des sélecteurs simples, repérés par l’expression rationnelle _RE_CLASS elle aussi précompilée dans main.c. Une feuille de styles est une suite de classes, séparées par des sauts de lignes et autres caractères non significatifs.

Ecrire la fonction classer_classes prenant en argument une chaîne de caractères représentant une feuille de styles à sélecteurs simples, et un pointeur sur une structure stylesheet. Cette fonction repère toutes les classes présentes dans cette feuille, et alloue autant de structures stylesheet. Elle les remplit avec le nom du sélecteur et l’analyse du style par un appel à la fonction phraser_style. Ces structures seront chaînées entre elles, la dernière arrivant finalement en tête et étant la valeur du champ next du deuxième argument de la fonction.

Le résultat retourné sera le nombre de caractères lus, autrement dit la position de l’accolade fermante de la dernière classe trouvée.

Fichier attendu : classer_classe.c

2 Dur de la feuille (3 point(s))

Il s’agit à présent d’écrire la fonction charger_css qui sera appelée à chaque rencontre d’un balise link ou de son altération dynamique par JavaScript. Cette fonction prend en argument une URL, et effectue une requête GET à l’aide de la fonction lance_requete fournie dans main.c. Elle confie ensuite l’analyse du flux d’entrée à la fonction classer_classe définie précédemment.

La suite des classes rencontrée sera affectée à la globale feuille supposée contenir à tout moment l’unique feuille de style utilisée dans le document (on n’abordera donc pas la problématique des priorités entre feuilles de styles).

Fichier attendu : charger_css.c

3 Le style en dur (2 point(s))

Une page HTML peut contenir une sorte de feuille de style anonyme, savoir la zone de texte délimitée par une balise style (à ne pas confondre avec l’attribut style.

Le fichier main.c contient toutes les déclarations nécessaires à l’analyse par SAX, excepté la fonction charger_style_interne s’occupant de l’analyse des zone de textes. Définir cette fonction, afin que la zone délimitée par une balise style- soit analysée par la fonction classer_classe. La suite des classes rencontrées sera affectée à la globale interne.

Fichier attendu : charger_style_interne.c

4 Ces lecteurs de classe (2 point(s))

Il existe plusieurs sortes de sélecteurs :

  • ceux commençant par un point (utilisable comme valeur de l’attribut class) ;
  • ceux commençant par un dièse (qui référence une balise dont attribut id vaut ce nom) ;
  • ceux ayant pour nom celui d’une balise ;
  • ceux juxtaposant les précédents arbitrairement.

Dans cet examen, on ne s’intéresse qu’à la première sorte.

Les règles de priorités des CSS stipulent qu’une classe définie dans la feuille anonyme a priorité sur une classe définie par une feuille de style référencée par une balise link. Ecrire la fonction trouver_classe prenant en argument un nom de classe, et retournant s’il existe le style qu’il définit dans les feuilles de styles chargées préalablement, en respectant cette priorité. Si la classe n’est pas trouvée, retourner NULL.

Fichier attendu : trouver_classe.c

5 Styler les fenêtres (4 point(s))

Il faut à présent parcourir la structure own contenant la description des deux tables rencontrées par l’analyseur SAX. La représentation est la même que celle étudié à la séance Les tables passent par les fenêtres, mais il y a 2 tables, ce qui fait donc 3 boucles imbriquées pour repérer toutes les cellules de tables et créer autant de fenêtres, avec les dimensions et couleurs spécifiées par les CSS.

La création proprement dite est assurée par la fonction CreerFenetre fournie dans main.c, argument de la fonction gerer_fenetres que vous avez à écrire. Cette fonction parcourt la structure fournie par SAX et applique les règles de CSS : pour chacun des sous-attributs considérés, on choisit en priorité la valeur fournie par l’attribut style et à défaut par l’attribut class. Si les deux sont absents, on se rabat sur les valeurs de la balise englobante (donc un td peut dépendre de son tr qui lui même dépend de son table).

Fichier attendu : gerer_fenetres.c

6 Métamorphose (3 point(s))

Enfin, définir la fonction fButtonPress appelée lors qu’on clique sur une des cases de la dernière table. Cette fonction doit en particulier charger la feuille de style précisée dans l’attribut onclick, et changer les attributs des autres cases de la table.

On utilisera pour repérer les valeurs utiles l’expression rationnelle _RE_ONCLICK. Il faudra également définir une fonction RecreerFenetre de même signature que CreerFenêtre pour modifier les fenêtres créées précédemment.

Fichier attendu : recharge_css.c