[{"data":1,"prerenderedAt":564},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Files":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Files":563},{"id":4,"title":5,"body":6,"description":547,"extension":548,"meta":549,"navigation":550,"path":559,"seo":560,"stem":561,"__hash__":562},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002Files.md","Îles (Islands)",{"type":7,"value":8,"toc":540},"minimark",[9,13,33,38,61,67,71,104,114,132,142,145,293,310,334,338,344,425,433,437,440,444,451,536],[10,11,5],"h1",{"id":12},"îles-islands",[14,15,16,17,21,22,26,27,32],"p",{},"Une île est une interface Vue montée dans un ",[18,19,20],"em",{},"shadow root",". Cette page explique comment une ",[23,24,25],"strong",{},"page"," du bureau devient une île. Pour construire une île dans une application et la monter vous-même, voir ",[28,29,31],"a",{"href":30},"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002File-d-application","Îlot d'application",".",[34,35,37],"h2",{"id":36},"registre-des-îles","Registre des îles",[14,39,40,41,45,46,49,50,53,54,57,58,32],{},"Le fichier ",[42,43,44],"code",{},"assets.json"," est le registre des îles. Chaque île y a deux clés : ",[42,47,48],{},"\u003Cnom>.island.js"," et ",[42,51,52],{},"\u003Cnom>.island.css",". Le nom de l'entrée de build est le nom de l'île : l'entrée ",[42,55,56],{},"insights.dashboard"," donne la clé ",[42,59,60],{},"insights.dashboard.island.js",[14,62,63,66],{},[42,64,65],{},"frappe.utils.island.get_ui_islands()"," renvoie les îles du site : celles dont l'application est installée. Aucun hook n'est nécessaire.",[34,68,70],{"id":69},"créer-une-page-dessinée-par-une-île","Créer une page dessinée par une île",[72,73,74,82,101],"ol",{},[75,76,77,78,81],"li",{},"Créez une ",[23,79,80],{},"Page"," standard dans votre application, en mode développeur.",[75,83,84,85,88,89,92,93,96,97,100],{},"Mettez le champ ",[23,86,87],{},"Type"," à ",[23,90,91],{},"Frappe UI",". Laissez le champ ",[23,94,95],{},"Island"," vide. Une telle page doit être standard (",[23,98,99],{},"Standard"," = « Yes »).",[75,102,103],{},"Enregistrez. Dodock écrit un point de départ à côté du fichier JSON de la page :",[105,106,111],"pre",{"className":107,"code":109,"language":110},[108],"language-text","mon_app\u002Fmon_module\u002Fpage\u002Ftableau_ventes\u002F\n├── tableau_ventes.json          type : \"Frappe UI\"\n├── tableau_ventes.island.js     le point d'entrée, déjà écrit\n└── tableau_ventes.vue           le composant, à modifier\n","text",[42,112,109],{"__ignoreMap":113},"",[72,115,117],{"start":116},4,[75,118,119,120,123,124,127,128,131],{},"Lancez ",[42,121,122],{},"bench build",". La page s'ouvre à l'adresse ",[42,125,126],{},"\u002Fdesk\u002Ftableau-ventes",". ",[42,129,130],{},"bench watch"," reconstruit et remonte l'île à chaque enregistrement, sans recharger la page.",[14,133,134,135,49,138,141],{},"Exemple fictif : ",[42,136,137],{},"mon_app",[42,139,140],{},"tableau_ventes"," sont des noms inventés.",[14,143,144],{},"Le composant reçoit la fin de l'adresse et signale son titre et ses actions :",[105,146,150],{"className":147,"code":148,"language":149,"meta":113,"style":113},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\ndefineProps({ route: Array, query: Object });\nconst emit = defineEmits([\"title\", \"actions\"]);\nemit(\"title\", \"Tableau des ventes\");\n\u003C\u002Fscript>\n","vue",[42,151,152,172,215,257,283],{"__ignoreMap":113},[153,154,157,161,165,169],"span",{"class":155,"line":156},"line",1,[153,158,160],{"class":159},"sMK4o","\u003C",[153,162,164],{"class":163},"swJcz","script",[153,166,168],{"class":167},"spNyl"," setup",[153,170,171],{"class":159},">\n",[153,173,175,179,183,186,189,192,195,198,201,203,206,209,212],{"class":155,"line":174},2,[153,176,178],{"class":177},"s2Zo4","defineProps",[153,180,182],{"class":181},"sTEyZ","(",[153,184,185],{"class":159},"{",[153,187,188],{"class":163}," route",[153,190,191],{"class":159},":",[153,193,194],{"class":181}," Array",[153,196,197],{"class":159},",",[153,199,200],{"class":163}," query",[153,202,191],{"class":159},[153,204,205],{"class":181}," Object ",[153,207,208],{"class":159},"}",[153,210,211],{"class":181},")",[153,213,214],{"class":159},";\n",[153,216,218,221,224,227,230,233,236,240,242,244,247,250,252,255],{"class":155,"line":217},3,[153,219,220],{"class":167},"const",[153,222,223],{"class":181}," emit ",[153,225,226],{"class":159},"=",[153,228,229],{"class":177}," defineEmits",[153,231,232],{"class":181},"([",[153,234,235],{"class":159},"\"",[153,237,239],{"class":238},"sfazB","title",[153,241,235],{"class":159},[153,243,197],{"class":159},[153,245,246],{"class":159}," \"",[153,248,249],{"class":238},"actions",[153,251,235],{"class":159},[153,253,254],{"class":181},"])",[153,256,214],{"class":159},[153,258,259,262,264,266,268,270,272,274,277,279,281],{"class":155,"line":116},[153,260,261],{"class":177},"emit",[153,263,182],{"class":181},[153,265,235],{"class":159},[153,267,239],{"class":238},[153,269,235],{"class":159},[153,271,197],{"class":159},[153,273,246],{"class":159},[153,275,276],{"class":238},"Tableau des ventes",[153,278,235],{"class":159},[153,280,211],{"class":181},[153,282,214],{"class":159},[153,284,286,289,291],{"class":155,"line":285},5,[153,287,288],{"class":159},"\u003C\u002F",[153,290,164],{"class":163},[153,292,171],{"class":159},[14,294,295,298,299,302,303,306,307,32],{},[42,296,297],{},"route"," contient les segments après le nom de la page, ",[42,300,301],{},"query"," les paramètres. Ils se mettent à jour sans remonter l'île. L'île s'appelle ",[42,304,305],{},"\u003Capp>.page.\u003Cnom de la page>",", par exemple ",[42,308,309],{},"mon_app.page.tableau-ventes",[14,311,312,313,316,317,319,320,49,323,326,327,329,330,333],{},"Le framework construit toutes les îles de page du bench en un seul build, depuis ",[42,314,315],{},"apps\u002Ffrappe\u002Fisland-toolchain\u002F",". Une île de page peut importer ",[42,318,149],{},", ",[42,321,322],{},"frappe-ui",[42,324,325],{},"@framework\u002Fui",", mais aucun module propre à l'application. Au premier build, ",[42,328,122],{}," lance ",[42,331,332],{},"yarn install"," dans ce dossier.",[34,335,337],{"id":336},"nommer-une-île-de-lapplication","Nommer une île de l'application",[14,339,340,341,343],{},"Une page qui a besoin des composants de l'application nomme une île construite par l'application, dans le champ ",[23,342,95],{}," :",[105,345,349],{"className":346,"code":347,"language":348,"meta":113,"style":113},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{ \"doctype\": \"Page\", \"name\": \"insights-dashboard\", \"type\": \"Frappe UI\", \"island\": \"insights.dashboard\" }\n","json",[42,350,351],{"__ignoreMap":113},[153,352,353,355,357,360,362,364,366,368,370,372,374,377,379,381,383,386,388,390,392,395,397,399,401,403,405,407,409,412,414,416,418,420,422],{"class":155,"line":156},[153,354,185],{"class":159},[153,356,246],{"class":159},[153,358,359],{"class":167},"doctype",[153,361,235],{"class":159},[153,363,191],{"class":159},[153,365,246],{"class":159},[153,367,80],{"class":238},[153,369,235],{"class":159},[153,371,197],{"class":159},[153,373,246],{"class":159},[153,375,376],{"class":167},"name",[153,378,235],{"class":159},[153,380,191],{"class":159},[153,382,246],{"class":159},[153,384,385],{"class":238},"insights-dashboard",[153,387,235],{"class":159},[153,389,197],{"class":159},[153,391,246],{"class":159},[153,393,394],{"class":167},"type",[153,396,235],{"class":159},[153,398,191],{"class":159},[153,400,246],{"class":159},[153,402,91],{"class":238},[153,404,235],{"class":159},[153,406,197],{"class":159},[153,408,246],{"class":159},[153,410,411],{"class":167},"island",[153,413,235],{"class":159},[153,415,191],{"class":159},[153,417,246],{"class":159},[153,419,56],{"class":238},[153,421,235],{"class":159},[153,423,424],{"class":159}," }\n",[14,426,427,428,49,430,432],{},"L'île doit exister sur le site, sinon l'enregistrement de la page est refusé. Dans ce cas, le framework ne construit rien et n'écrit aucun fichier à côté de la page. La page n'a pas besoin d'être standard. Le bureau monte l'île nommée et lui passe ",[42,429,297],{},[42,431,301],{},", comme pour une île de page.",[34,434,436],{"id":435},"si-lîle-est-absente","Si l'île est absente",[14,438,439],{},"Si l'île n'est pas trouvée, la page affiche un message d'erreur traduit à la place de l'île.",[34,441,443],{"id":442},"décisions-de-conception","Décisions de conception",[14,445,446,447,450],{},"Les décisions sont dans ",[42,448,449],{},"ui\u002Fisland\u002Fdecisions\u002F"," du dépôt Dodock, notamment :",[452,453,454,467],"table",{},[455,456,457],"thead",{},[458,459,460,464],"tr",{},[461,462,463],"th",{},"Décision",[461,465,466],{},"Sujet",[468,469,470,481,494,504,514,526],"tbody",{},[458,471,472,478],{},[473,474,475],"td",{},[42,476,477],{},"0001",[473,479,480],{},"Une application construit ses propres îles.",[458,482,483,488],{},[473,484,485],{},[42,486,487],{},"0011",[473,489,490,491,32],{},"Une application dessine un document du bureau avec ",[42,492,493],{},"doc_events",[458,495,496,501],{},[473,497,498],{},[42,499,500],{},"0012",[473,502,503],{},"Une page du bureau peut être une île.",[458,505,506,511],{},[473,507,508],{},[42,509,510],{},"0013",[473,512,513],{},"Le framework construit les îles de page.",[458,515,516,521],{},[473,517,518],{},[42,519,520],{},"0014",[473,522,523,525],{},[42,524,44],{}," est le registre des îles.",[458,527,528,533],{},[473,529,530],{},[42,531,532],{},"0016",[473,534,535],{},"Les graphiques du bureau sont des graphiques frappe-ui.",[537,538,539],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":113,"searchDepth":156,"depth":174,"links":541},[542,543,544,545,546],{"id":36,"depth":174,"text":37},{"id":69,"depth":174,"text":70},{"id":336,"depth":174,"text":337},{"id":435,"depth":174,"text":436},{"id":442,"depth":174,"text":443},"Dessiner une page du bureau avec une île Vue : Page de type Frappe UI, île construite par le framework ou nommée par l'application, et registre des îles dans assets.json.","md",{"reviewed":550,"last_verified":551,"sources":552},true,"2026-11-03",[553,554,555,556,557,558],"dodock@develop:ui\u002FREADME.md","dodock@develop:ui\u002Fisland\u002Fdecisions\u002F0012-a-desk-page-can-be-an-island.md","dodock@develop:ui\u002Fisland\u002Fdecisions\u002F0013-framework-builds-page-islands.md","dodock@develop:ui\u002Fisland\u002Fdecisions\u002F0014-assets-json-is-the-island-registry.md","dodock@develop:frappe\u002Fcore\u002Fdoctype\u002Fpage\u002Fpage.json","dodock@develop:frappe\u002Futils\u002Fisland.py","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Files",{"title":5,"description":547},"2.next\u002F3.dodock\u002F10.developpeurs\u002Files","d6kz9s2UGghW9Q1pr2erlFJe371PO_Bz_iWlYCqBnkw",{},1793871746217]