Je veux avoir un curseur et un contrôle d'entrée, tous deux pour une valeur spécifique.
L'utilisateur devrait pouvoir utiliser le champ de saisie ou le curseur pour saisir sa valeur.
Si l'utilisateur modifie la valeur sur le curseur, le champ de saisie doit afficher la valeur du curseur. Et si l'utilisateur entre quelque chose dans le champ de saisie, le curseur doit se déplacer vers la valeur correspondante.
Actuellement, je crée un JSONModel avec la valeur comme propriété à lier:
<Slider value="{/valueName}" step="10" width="200px" />
<Input value="{/valueName}" type="Number" width="50px" />
Maintenant, lorsque je change la valeur du curseur, la mise à jour du champ de saisie fonctionne correctement. Mais si j'entre une valeur dans le champ de saisie, le curseur ne pas se déplace vers la valeur.
Pourquoi est-ce ainsi et comment résoudre mon problème? p>
let model = new JSONModel({
valueName: 10
});
settings.setModel(model);
Étant donné que les solutions données ne fonctionnaient que pour les valeurs entières, une question de suivi pour les valeurs flottantes a été créée ici
3 Réponses :
J'ai été déconcerté par cela au début. La raison semble être que la valeur est enregistrée sous forme de chaîne (même si vous spécifiez explicitement un nombre ou que vous liez clairement la valeur du modèle initial à une valeur numérique). J'ai vérifié cela en gérant l'événement liveChange de l'entrée, en récupérant la valeur du modèle de valueName, en effectuant un parseInt sur la valeur, puis en définissant le curseur sur cette valeur. Cela provoque la mise à jour du curseur lorsque je modifie l'entrée.
Contrôleur:
<Slider id="slider" value="{/valueName}" min="0" max="100" step="10" width="200px" />
<Input textAlign="Center" value="{/valueName}" type="Number" width="50px" valueLiveUpdate="true" liveChange="handleChange"/>
Vue XML:
handleChange: function(){
var slider = this.getView().byId("slider");
var val = this.getView().getModel().getProperty("/valueName");
slider.setValue(parseInt(val));
}
La mise en garde était que si je voulais mettre à jour le curseur à, disons, 70, je devrais d'abord saisir le 0 (car les paramètres du curseur tels qu'ils sont convertis la valeur en min (0) ou 10 au moment où je tape un nombre - étant donné le comportement correct de liveUpdate). Il existe des moyens de contourner ce problème, mais j'ai pensé que je vous fournirais la réponse et que vous pourrez déterminer quoi faire à partir de là.
En fin de compte, je pense que c'est un bug. EDIT - ce n'est pas un bug - veuillez vous référer au commentaire de Boghyon sous cette réponse
Malheureusement / heureusement, ce n'est pas un bogue. L'entrée stocke la valeur dans la chaîne -> Slider attend float mais obtient une chaîne du modèle -> ne met pas à jour sa valeur. C'est par conception. Les applications doivent spécifier explicitement un type comme expliqué dans: stackoverflow.com/a/57935545/5846045 . Nous pourrions nous demander pourquoi cela fonctionne alors dans l'autre sens (Slider -> Input): ManagedObject convertit déjà implicitement des valeurs pour le type de chaîne: github.com/SAP/openui5/blob/... , mais uniquement < / i> pour le type de chaîne.
L'utilisateur doit pouvoir utiliser le champ de saisie ou le curseur pour saisir sa valeur.
Au cas où vous ne le sauriez pas, vous pouvez utiliser la fonction de saisie de l'info-bulle intégrée:
<Slider showAdvancedTooltip="true" showHandleTooltip="false" inputsAsTooltips="true" />Vous donne ceci:
Le curseur attend une valeur de type float .
Le champ de saisie, cependant, évalue les entrées comme chaîne .
Vous pouvez le résoudre de manière déclarative en attribuant un type approprié à l'objet d'information de liaison:
sap / ui / model / type / String * au type de liaison value du Slider ⇒ Formate la valeur de chaîne du modèle en un type float avant de passer la valeur au Slider. sap / ui / model / type / Float * au type de liaison valeur de l'entrée ⇒ Stocke la valeur sous forme de nombre dans le modèle. Le curseur peut alors utiliser directement la valeur numérique. Voici une démonstration des approches ci-dessus: https://jsbin.com / sodihub / edit? js, sortie
L'utilisation de la fonctionnalité type dans la liaison permettra de analyser , mettre en forme et même valider la valeur du modèle avant mettre à jour le contrôle tout en conservant le mode de liaison de données bidirectionnelle.
* En cas de liaison avec ODataModel, nécessite sap / ui / model / odata / type / Decimal | String < / code> à la place!
Votre démo fonctionne bien. Je suis maintenant tombé sur un autre problème. Si vous définissez l ' étape du curseur sur 0,1 , seules les valeurs entières sont affichées dans le champ de saisie. Comment pouvez-vous résoudre cela? Si je devais ouvrir une nouvelle question à ce sujet, veuillez me le faire savoir.
Question de suivi ici: stackoverflow.com/questions/65583975/...
@IceRevenge La démo est maintenant corrigée et j'y ai ajouté plus d'informations. Merci de m'avoir informé du problème!
Ajoutez simplement un
typede données approprié à l'une des liaisons de propriété comme expliqué dans stackoverflow.com/a/57935545/ 5846045