javascript putting a value into a variable

Develop and Deploy Cross-Browser Web Apps .

javascript putting a value into a variable

Postby cgetty » Sun Jun 21, 2015 9:07 pm

Hello again all

Once more a simple (not so much for me) request for help.

I have a button, a input field and a image.

I would like to enter an image URL into the input field, fire off the onclick event and change the src property on the image to change the picture.

I tried ctl_input_Photo_source.value = ctl_image4.src; and this ctl_image4.src.setSrc(ctl_input_Photo_source.value); and a few other things too.

As you can see I don't know what I'm doing. More java script lessons are in order.

Any help would be much appreciated.

Clark
cgetty
 
Posts: 9
Joined: Mon May 19, 2014 5:54 am
Location: Texas

Re: javascript putting a value into a variable

Postby kevinotton » Mon Jun 22, 2015 4:48 pm

Here is a sample file for what you want to do. Clearly there is no error checking and it would be better to make the files selectable from a drop down of files that exist.

I was going to do a load of video tutorials on the basics. I need to know people would use them before I spend time making them. A very quick (1 hour) attempt is attached. Comment appreciated - I know its rough.

// The default code is a com class (inherited from xui.Com)
Class('App', 'xui.Com',{
// Ensure that all the value of "key/value pair" does not refer to external variables
Instance:{
// To determine whether or not the com will be destroyed, when the first UI control be destroyed
autoDestroy : true,
// To initialize properties
properties : {},
// To initialize instance(e.g. properties)
initialize : function(){
},
// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
iniComponents : function(){
// [[Code created by CrossUI RAD Studio
var host=this, children=[], append=function(child){children.push(child.get(0));};

append(
(new xui.UI.HTMLButton())
.setHost(host,"changeImageButton")
.setLeft(180)
.setTop(560)
.setWidth(120)
.setHeight(22)
.setHtml("change image")
.onClick("_changeimagebutton_onclick")
);

append(
(new xui.UI.Input())
.setHost(host,"inputImageName")
.setLeft(390)
.setTop(560)
);

append(
(new xui.UI.Image())
.setHost(host,"ctl_image16")
.setLeft(30)
.setTop(70)
.setSrc("{/}images/IMG_0154.jpg")
);

return children;
// ]]Code created by CrossUI RAD Studio
},
// Give a chance to determine which UI controls will be appended to parent container
customAppend : function(parent, subId, left, top){
// "return false" will cause all the internal UI controls will be added to the parent panel
return false;
},
// Give a chance to load other resource
iniResource: function(com, threadid){
//xui.Thread.suspend(threadid);
//var callback=function(/**/){
// /**/
// xui.Thread.resume(threadid);
//};
},
// Give a chance to load other com
iniExComs : function(com, threadid){
//xui.Thread.suspend(threadid);
//var callback=function(/**/){
// /**/
// xui.Thread.resume(threadid);
//};
},
_changeimagebutton_onclick:function (profile, e, value){
var ns = this, uictrl = profile.boxing();
var imagename = ns.inputImageName.getUIValue();
xui.message(imagename);
//
ns.ctl_image16.setSrc("{/}images/"+imagename);
}
}
});
Attachments
crossui_changeImage.zip
Zipped SWF file. Very rough draft to see if its any use.
(1000 Bytes) Downloaded 474 times
kevinotton
 
Posts: 39
Joined: Thu May 15, 2014 8:18 am
Location: Needham Market, Suffolk, UK

Re: javascript putting a value into a variable

Postby cgetty » Tue Jun 23, 2015 8:24 pm

Hi Kevin

your code snippet worked. I only needed to change one small thing to get it to work for me. The change is near the end of the code, see comment in the code.

You said "better to make the files selectable from a drop down of files that exist". WOW that is my next task to do just that!

I tried to view the .SWF file but was not able.

If you paste the class into the CrossUI builder on line it runs ok. I tryed to deploy it on two on line hosting sites with no success.

I think more on line videos would be a VERY GOOD thing. I know it takes a bit of effort. I have many more thoughts about that if you want to hear them . PM me

I'm reposting your code that I was able to get working.

Code: Select all
Class('App', 'xui.Com',{
Instance:{
autoDestroy : true,
properties : {},
initialize : function(){
},
iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
           
            append(
                (new xui.UI.HTMLButton())
                .setHost(host,"changeImageButton")
                .setLeft(20)
                .setTop(220)
                .setWidth(120)
                .setHeight(22)
                .setHtml("change image")
                .onClick("_changeimagebutton_onclick")
            );
           
            append(
                (new xui.UI.Input())
                .setHost(host,"inputImageName")
                .setLeft(150)
                .setTop(220)
                .setWidth(290)
                .setValue("http://webmail.keele.ac.uk/redirect/gmail.png")
            );
           
            append(
                (new xui.UI.Image())
                .setHost(host,"ctl_image16")
                .setLeft(30)
                .setTop(20)
                .setWidth(160)
                .setHeight(140)
                .setSrc("http://cgetty.freehostia.com/icon/light.jpg")
            );
           
            append(
                (new xui.UI.SLabel())
                .setHost(host,"ctl_slabel3")
                .setTips("NO No! Copy me into the input field & push the change image button")
                .setLeft(150)
                .setTop(250)
                .setWidth(284)
                .setCaption("http://webmail.keele.ac.uk/redirect/gmail.png")
            );
           
            append(
                (new xui.UI.SLabel())
                .setHost(host,"ctl_slabel4")
                .setTips("Copy me into the input field & push the change image button")
                .setLeft(150)
                .setTop(200)
                .setWidth(164)
                .setCaption("http://tinyurl.com/l2hndz8")
            );
           
            append(
                (new xui.UI.SLabel())
                .setHost(host,"ctl_slabel5")
                .setLeft(320)
                .setTop(200)
                .setWidth(264)
                .setHeight(19)
                .setCaption("<-----Image source 1  Caravan To Midnight")
                .setCustomStyle({
                    "KEY" : {
                        "color" : "#0000FF"
                    }
                })
            );
           
            append(
                (new xui.UI.SLabel())
                .setHost(host,"ctl_slabel6")
                .setLeft(440)
                .setTop(250)
                .setWidth(214)
                .setHeight(5)
                .setCaption("<----- Image source 2 Google Mail")
                .setCustomStyle({
                    "KEY" : {
                        "color" : "#0000FF"
                    }
                })
            );
           
            append(
                (new xui.UI.SLabel())
                .setHost(host,"ctl_slabel24")
                .setLeft(200)
                .setTop(40)
                .setWidth(464)
                .setHeight(100)
                .setCaption("This sample takes an input field & when you push the change image button the data from the input field is sent to the image source property changing the image.")
                .setHAlign("left")
                .setCustomStyle({
                    "KEY" : {
                        "font-size" : "14pt",
                        "border" : "ridge #0000FF 2px"
                    }
                })
            );
           
            append(
                (new xui.UI.SLabel())
                .setHost(host,"ctl_slabel67")
                .setLeft(10)
                .setTop(280)
                .setWidth(694)
                .setHeight(20)
                .setCaption("The functional part (the part that makes it work) of this sample came from kevinotton Thank you for your help")
                .setHAlign("left")
                .setCustomStyle({
                    "KEY" : {
                        "color" : "#8B008B"
                    }
                })
            );
           
            return children;
            // ]]Code created by CrossUI RAD Studio
        },

customAppend : function(parent, subId, left, top){
return false;
},
iniResource: function(com, threadid){
},
iniExComs : function(com, threadid){
;
},
_changeimagebutton_onclick:function (profile, e, value){
var ns = this, uictrl = profile.boxing();
var imagename = ns.inputImageName.getUIValue();
xui.message(imagename);
ns.ctl_image16.setSrc(imagename);
ns.inputImageName.setUIValue('');

// ns.ctl_image16.setSrc("{/}images/"+imagename); <- I only changed this bit of code & it worked clark :-)
}
}
});


I looked your Utube channel & ran across one of your sights. I left a comment in the contact request.

I'm trying to convert one of the sample programs into a simple complete app. I think a hand full of complete working apps would do more to attract more users, a win win for all.

Thanks again Kevin for your help.
Clark
cgetty
 
Posts: 9
Joined: Mon May 19, 2014 5:54 am
Location: Texas

Re: javascript putting a value into a variable

Postby kevinotton » Wed Jun 24, 2015 7:20 am

The swf file with the html code to run it.
Attachments
crossui_changeImage.zip
An idea for tutorial videos - very draft for comment
(1000 Bytes) Downloaded 492 times
kevinotton
 
Posts: 39
Joined: Thu May 15, 2014 8:18 am
Location: Needham Market, Suffolk, UK


Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 1 guest

cron