SAPUI5 Complexe exemple de liaison de données avec DropdownBox en vue XML

J'ai construit ce JSON (testé comme valide) (.. ne pas oublier que les hommes et les femmes portent le même nom ici :-)): 

{
    "staff": {
        "berlin": [{
            "male": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ],
            "female": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ]
        }],
        "paris": [{
            "male": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ],
            "female": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ]
        }],
        "oslo": [{
            "male": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ],
            "female": [
                {"firstName": "Lasse", "lastName": "Larsson"},  
                {"firstName": "Gerrit", "lastName": "Gartner"}
            ]
        }]
    }
}

Dans mon contrôleur, je mis la JSON modèle à l'ensemble de la vue comme:

//init instance of JSON model
this.staffData = new sap.ui.model.json.JSONModel();
//load JSON file into model
this.staffData.loadData("ajax-dummy/staff.json");
//bind model to whole view 
this.getView().setModel(this.staffData);

Dans mon XML point de vue, je voudrais maintenant de créer dynamiquement un (imbriqué) DropdownBox
ce qui devrait me faire sélectionner par ex.
berlin->mâle->nom
J'ai donc besoin de 3 niveaux de ListItems.

Le premier problème est: j'ai cela peut se produire avec JS (construire un Listitem pour chaque
clé dans le personnel de l'objet, etc.) mais je n'ai aucune idée de comment faire face à ce à la vue XML.
Ça ressemble à ça pour le moment:

<content>
<DropdownBox id="dd-locations" editable="true">
<core:ListItem text="{/staff/berlin}"></core:ListItem>
</DropdownBox>
</content>

Et il affiche (bien sûr) juste "{objet ..}" dans den DropdownBox, parce que c'EST un objet.

Est-ce même possible de construire dans la vue XML avec la liaison de données? Ou est-il une meilleure façon de structure
le JSON? Je sais que le ListItems besoin d'un tableau... Et enfin: Comment puis-je nest la ListItems? Est-il un meilleur Contrôle
puis DropdownBox que je devrais utiliser?

EDIT:
Ce que je veux "juste" de nidification Listitems comme j'ai pu en HTML. J'ai essayé par exemple:

<ComboBox>
                            <items>
                                <core:ListItem key="key2" text="text2"/>
                                <core:ListItem key="key3" text="text2">
                                    <ComboBox>
                                        <items>
                                            <core:ListItem key="key4" text="text3"/>
                                            <core:ListItem key="key5" text="text3"/>
                                            <core:ListItem key="key6" text="text3"/>
                                         </items>
                                    </ComboBox>
                                </core:ListItem>
                                <core:ListItem key="key4" text="text2"/>
                             </items>
                        </ComboBox>

Mais poule, une erreur se produit, qui dit:

Uncaught Error: Impossible d'ajouter une enfant direct sans agrégation par défaut
définies pour le contrôle de sap.l'interface utilisateur.de base.ListItem

Comment puis-je définir un élément d'agrégation pour un ListItem? Cela fonctionnerait-il?

Merci beaucoup, ho

InformationsquelleAutor ho.s | 2015-02-11
  1. 2

    Ne sais pas si c'est une approche intéressante dans votre cas, mais compte tenu de la nature hiérarchique de votre modèle, peut-être que cet exemple de la "Table de fil d'Ariane" est ce que vous cherchez: https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.TableBreadcrumb/preview

    Il permet de forer plus profond dans votre modèle de hiérarchie, et l'étape de retour si besoin trop

    Mais je ne suis pas sûr si elle peut être adaptée à un "multi-niveau dropdownbox" si...

    EDIT: je n'avais plus approfondie de regarder votre JSON, et il semble que la structure n'est pas correct.
    De fournir des données à plusieurs listes déroulantes, les données doivent être dans le format de Tableau, pas le format de l'Objet. Dès maintenant, votre JSON contient une propriété staff avec de multiples propriétés berlin, paris, etc, alors que ça devrait être un tableau de villes. J'ai modifié votre JSON pour le staff propriété contient un tableau d'objets, qui contient un gender propriété contenant un tableau d'objets, qui contient un person propriété contenant un tableau d'objets.

    En outre, afin d'assurer un approvisionnement correct de liaison à l' "enfant" listes déroulantes, vous pouvez définir la liaison vers le bon chemin lors de la sélection d'une entrée dans la liste déroulante.

    Voir ci-dessous, de travail extrait de la restructuration du modèle (un tableau de villes, un éventail de genres et de toute une série de personnes), et la reconsolidation du droit de listes déroulantes:

    JS:

    sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
"staff": [
{
"city" : ""
},
{
"city" : "berlin",
"genders" : [
{ 
"gender" : "male", 
"people" : [
{"firstName": "Lasse", "lastName": "Larsson"},  
{"firstName": "Gerrit", "lastName": "Gartner"}
]
},
{ 
"gender" : "female", 
"people" : [
{"firstName": "Paris", "lastName": "Hilton"},  
{"firstName": "Kate", "lastName": "Upton"}
]
},
]
},
{
"city" : "paris",
"genders" : [
{ 
"gender" : "male", 
"people" : [
{"firstName": "Lasse", "lastName": "Larsson"},  
{"firstName": "Gerrit", "lastName": "Gartner"}
]
},
{ 
"gender" : "female", 
"people" : [
{"firstName": "Lasse", "lastName": "Larsson"},  
{"firstName": "Gerrit", "lastName": "Gartner"}
]
},
]
},
{
"city" : "oslo",
"genders" : [
{ 
"gender" : "male", 
"people" : [
{"firstName": "Lasse", "lastName": "Larsson"},  
{"firstName": "Gerrit", "lastName": "Gartner"}
]
},
{ 
"gender" : "female", 
"people" : [
{"firstName": "Lasse", "lastName": "Larsson"},  
{"firstName": "Gerrit", "lastName": "Gartner"}
]
},
]
},
]
});
this.getView().setModel(oModel);
},
handleStaffSelect : function(oEvent) {
var oGender = this.byId("selGender");
var oTemplate = new sap.ui.core.ListItem({ key : "{gender}", text : "{gender}"})
oGender.bindItems(oEvent.getParameter("selectedItem").getBindingContext().getPath() + "/genders", oTemplate);
},
handleGenderSelect : function(oEvent) {
var oGender = this.byId("selPerson");
var oTemplate = new sap.ui.core.ListItem({ key : "{lastName}", text : "{lastName}"})
oGender.bindItems(oEvent.getParameter("selectedItem").getBindingContext().getPath() + "/people", oTemplate);
}
});
sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

    HTML:

    <script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View 
controllerName="view1.initial"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Select id="selStaff" items="{/staff}" change="handleStaffSelect">
<core:ListItem key="{city}" text="{city}" />
</Select>
<Select id="selGender" change="handleGenderSelect" />
<Select id="selPerson" />
</mvc:View>
</script>

    • Merci pour votre suggestion, cela pourrait être une option en théorie, mais je ne veux explorer les possibilités de travailler avec dDropdownBox/zone de liste déroulante. (J'ai édité le fichier en question pour être plus clair ce que je veux)
    • Voir mon jour de réponse pour une éventuelle solution
    • Merci beaucoup pour votre effort de m'éclairer. C'est exactement ce que je cherchais, à partir de l'logiquement point de vue. Grand. Et enfin, votre approche (mise à jour dépendant sélectionne) est encore plus "élégant" que l'imbrication des éléments.
    InformationsquelleAutor Qualiture