Storage sample app

Can you give a bit more infor on how this app works. I can see it working just fine but for the life of me I cannot understand how it is happening as I see no code anywhere. No functions, coding on objects and even the label is acting like a button.

Hello Donald,

Yes; of course. May this application sample need to be explained a little. In fact they are based in a File Input control. The Label control is associated to such input, then, when the user click the label, it's the same that if the user click the File Input control. This is doing in such way in order to hide the File Input control (you can't view in the application at runtime) and use only the Label control to allow the user to look for image files.

So, when the user click the Label, in fact the File Input click behaviour starts and allow the user to choose an image file. If you take a look at the "Load" event of the File Input control, you can see how we use this event for two things: firstly shown the selected image in the Image control, using the Image's "src" attribute; and secondly store the selected image into the app's local storage:

The sample application has only another piece of code in the view "Show" event:

As you can see, what we doing here is to look into the app's local storage for a previously saved image, and, if found it, set the Image control with that saved image using the Image's "src" attribute.

And this is basically what this sample application shown us: how to use the File input control to choose a file (and how to use a Label control to receive the user click and fire the File input open file dialog) and how we can use the File input's "Load" event to store the selected file into the app's local storage.

If you have any further question jus post here Donald. :)

Thanks for that but I have lots of questions. Maybe I do not have certain tools showing.

I cannot find either of those two pieces of code you show. I see no such thing as a show event. I see nothing called a Load Event.

The only link I can see between the label and the file input is in the property called Visual Input. What is a Visual and how does it work with the label?

The image src value, is that the source image in image properties? I see nothing called src.

We will get there. Thanks

Hello Donald,

Thanks for that but I have lots of questions. Maybe I do not have certain tools showing.

No problem. Probably my poor english didn't allow me to describe the things like I wanted.

I cannot find either of those two pieces of code you show. I see no such thing as a show event. I see nothing called a Load Event.

First of all I commit a mistake here: there is not a "Load" event in the File Input control, but a "Read" event, as you can see below:

About the View's Show event, here is:

The above pieces of code are the only one in the Storage application sample.

The only link I can see between the label and the file input is in the property called Visual Input. What is a Visual and how does it work with the label?

The Label control is associated with the File Input control using the Label's Input property as you see. Basically, a Label can be associated with an Input control using the Label's Input property. Doing this when the Label control is clicked, the associated Input control get the focus.

But the File Input control is something special. When a File Input control are clicked they show us a dialog in order to pick a file. So, if we associated a Label with a File Input control, when the Label is clicked, the file's dialog appear. This means we can hide the Input control (like we do in the sample) in order to use only the Label control instead to pick a file.

The image src value, is that the source image in image properties? I see nothing called src.

When we deal with Image controls, normally, we use their Image property to set an image path or URL. In this scenario we do not use the "src" attribute at all. The "src" attribute exists for the HTML "img" tag and determine the path or URL of an image. But, again, normally we don't use the "src" attribute. Instead of this we simply use the "Image" property.

However, the Storage application sample shown us how to select a file and then store it into the app's local storage. But what we save in the local storage is the "Base64" codification of an image, not a file, not an URL, but the "Base64" codification of the image. So, when we want to show that "Base64" codified image into an Image control, we can't use the "Image" property.

For this reason we use the "src" attribute of the "Image" control with the "SetAttribute" action. What we set in the "src" attribute is the "Base64" codification of the image. And this is the way, because the "src" atribute is capable to store such information ("Base64") and shown the image like we wanted.

Now please, Donald, if you have any other question just post here: I want to help you in everything you wanted.

I have not read your whole response above, but something is not right. I am not able to get the small tabs at the bottom to come up. I was wondering what had happen to them. Do I have some tool bars turned off or something. How did you generate your first image above that shows the read tab at the bottom? I cannot get that to display. Probably simple but ??

Thanks

Never mind I see it now Shessh!!

Hello Donald,

Yes; basically we can access the Code tab by first select one or more controls. Once a control is selected we can click the Code tab or just press the F12 key to access the control's events code. This is about controls.

Talking about the app we can access their events code by clicking outside the app's view or any other control and then click the Code tab or just press the F12 key.

And finally, talking about the app's views we can access their events code by clicking inside the view (the white part in the designer) and then click the Code tab or just press the F12 key.

Below an image which may can help:

Ok now it comes together better. Don't know why I didn't notice the tabs at the bottom but now I have learned again the hardway :-)

This sample has some special things going on that I am not used to, being a VisualNeo guy my thinking goes that way as you know. But your explanation makes sense now or at least as much as I can get. Thanks for the detailed explanations.

Hello,

No problem! Take also a look at this video Donald:

https://www.youtube.com/watch?v=TDZpVhUIxTo

Probably the video explain a little more the point. :)

One more thing, So the SetAttribute tool applies to HTML attributes. And is not specific to just images but any html attribute to which it is referencing. I could then set the color of text with it if I was addressing a text object?

The SetAttribute dialog shows 3 inputs but when clicking the second one it does not give a drop down of choices so I am assuming any attribute could be changed if it applies to the object?

What say you?

Hello Donald,

Yes; the "SetAttribute" action allow us to set any arbitrary attribute for a control / HTML element. But probably this action is required only in certain specific scenarios like the Storage sample application. Yes; we can set the text color of an Input control with "SetAttribute" like below:

But we have a shortcut for that by using the "SetStyle" action:

And, we can also play with CSS classes, which is probably a better decision. For example, supose we have a CSS file to be added into our application or just use the app's "Inline CSS" option to prepare this CSS class:

Then we can use the "AddClass" action to set the color of the Input control:

So as you can view we have different options and approach in order to set the text color of a control, if the control have a text and they are allowed to be changed.

The SetAttribute dialog shows 3 inputs but when clicking the second one it does not give a drop down of choices so I am assuming any attribute could be changed if it applies to the object?

Yes; any attribute is any attribute: for example, we can add our own attributes or "data" attributes in order to be checked and retrieved later using the "GetAttribute" action. Anyway may it's a good idea for the second input in such action's editor to have a list with the most used attributes. The next App Builder release must include something like that.