WebApp/App Designer HTML Component stopped triggering the DataChanged(app, event) function.

10 次查看(过去 30 天)
I'm using this simple HTML code that creates a password text box. In App Designer, I have an HTML component that I dragged and dropped from the side panel and set the Souce to be the HTML file.
When running the app from App Designer, the HTML component works as intended triggering the PasswordHTMLDataChanged(app, event) function when the password field has changed and storing the password for authentication.
When the App is compiled and run on WebApp, the HTML code does generate the text box but doesn't trigger the PasswordHTMLDataChanged(app, event) leaving my password variable empty.
This Web Application was working fine when running version 2022a but stopped working after the upgrade to 2023b.
Here's the HTML file:
<head>
<style>
div {
display: flex;
flex-direction: row;
}
input {
font-family: Helvetica;
font-size: 12px;
flex-grow: 2;
width: 10px;
height: 100%;
padding-left: 4px;
padding-right: 4px;
}
button {
width: 28px;
font-size: 12px;
margin-right: 1px;
/* background: url(icons/ritm-icon-compress-alt-solid.svg);
background-size: 20px 20px; */
}
</style>
<script type="text/javascript">
function setup(htmlComponent) {
var password = document.getElementById("password");
var toggle = document.getElementById("toggle");
function dataChanged(event) {
password.value = htmlComponent.Data;
}
function valueChanged(event) {
htmlComponent.Data = password.value;
}
function toggleType(event) {
if (password.type === "text")
password.type = "password";
else
password.type = "text";
}
htmlComponent.addEventListener("DataChanged", dataChanged);
password.addEventListener("change", valueChanged);
toggle.addEventListener("click", toggleType);
dataChanged();
valueChanged();
}
</script>
</head>
<body>
<div>
<input id="password" type="password">
<button id="toggle">👁</button>
</div>
</body>
and here's the AppDesigner callback function.
function PasswordHTMLDataChanged(app, event)
password = app.PasswordHTML.Data;
app.pass = password;
% disp(password);
% disp("Change function did run");
end
As part of my troubleshooting I added the disp(password) (uncommented of course) to see if the function was actually triggered and no messages are shown in the logs.

回答(1 个)

prabhat kumar sharma
I understand that your web app is not triggering the "PasswordHTMLDataChanged" function on R2023b.
I have successfully created a web app with HTML and a text area to update the value when "PasswordHTMLDataChanged" is triggered. The UI for the app looks as shown below:
It appears to be working for me, as the value of the text area updates when I change the textbox generated using the provided HTML code.
Here are the steps I followed:
  1. Created the application using app designer.
  2. Created the web app and generated the ctf file.
  3. Deployed the ctf file on MATLAB Web App Server.
I recommend testing your function using an additional textarea. Ensure that you have added the source file correctly and are not encountering any errors while creating the web app. Additionally, you can check the log files for any error messages.
I hope this information is helpful.
  3 个评论
Mathieu Vinette
Mathieu Vinette 2023-12-18
编辑:Mathieu Vinette 2023-12-18
@prabhat kumar sharma I've tried to create a new project with only the HTML and text box as you suggested. I created the callback function on the HTML container to update the text box on change. The app works when run from AppDesigner but has the same issue of not triggering the callback function when run as a webApp(ctf file). This has been tested on both development WebApp and full server version with the same results. I've attached the project with the compiled file for your review. I suspect that there might be a bug in the latest release of 2023b WebApp.
@Martin Tragsdorf Thanks for the temporary workaround. I'll have to test it out. How do you make sure the keypress function only triggers when a text box is selected? If I understand your code correctly this would keep login all the key strokes throughout the application session.
Martin Tragsdorf
Martin Tragsdorf 2023-12-22
编辑:Martin Tragsdorf 2023-12-22
I only use the password field to restrict the access at the start of the application. At that time there is nothing visible besides the password field. After entering the correct password, I delete the password field and remove the WindowKeyPressFcn.
If you want to activate the callback only after the label field has been clicked you can use the WindowButtonDownFcn to check for a mouse click on the label field and activate/deactivate the WindowKeyPressFcn callback. I build a small example application that activates a panel object after you enter the correct password "test123".
I also fixed a bug in the code I posted above, that was causing the last character of the password to not be deleted when you hit the backspace key.

请先登录,再进行评论。

类别

Help CenterFile Exchange 中查找有关 Develop Apps Using App Designer 的更多信息

产品


版本

R2023b

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!

Translated by