Can I create my own Widget based on jQuery implementation? E.g. Calendar control

Branch Hendrix shared this question 5 years ago
Answered

Can I create my own widget based on HTML/CSS/JS? Something that is built using jQuery? E.g. Calendar control. Intended use is in mobile prototype. I found and have played with HTML Web widget, but what are the restrictions for its use? I see jQuery 1.8, jQuery UI, jQuery Mobile 1.1 linked into the export HTML...

Comments (10)

photo
1

Which kind of restrictions you refer to?


You can use the HTML widget and write all the HTML code you want including internal css or javascript. If you want to use external CSS/Javascript files you can use the HTML Website widget instead of the HTML widget.

photo
1

Its a packaging and visualization issue. I understand that I can do what you characterized. I'd like to be able to build a native widget out of the HTML/CSS/Javascript with a visual representation and be able to just drag it from the widget panel. Basically, a native widget creator tool.

photo
1

I didn't tried to build something similar to what you are trying to do, but thinking about it I can't imagine any restriction you could find.

photo
1

How is visualization handled? Is a visualization available during design time or is it only represented during run time?

photo
1

During design time the view is updated with the code introduced on the HTML text area on the Properties Panel, but you can't interact with the HTML inner controls, this can be done only in simulation time.

photo
1

Can you explain how the HTML Website widget works? What is it actually doing? Can you point it at an http:// location? I have the HTML Website control working and it runs fine in simulation on the design workstation. If I move the exported HTML to a server, it seems like it tries to render some aspects but never finishes.


I am cheating a little bit in that the HTML Website control is pointing at Google Drive directory on the design machine. Apparently a Google Drive file directory can be used like a psuedo web server.


I would like it to run from an external server so it can reach iPhone5 for touch testing.

photo
1

I'm afraid the HTML Website widget is only intended for use with local files. Once simulated the widget is converted to an iframe and maybe you can make it point to your Google Drive but I'm not sure about it because we didn't test it.


If you want you can deselect the option "Optimize" in the "File->Preferences" dialog to make the html and javascript code more legible in order to understand better how the simulated prototype works.

photo
1

I turned off optimize...


I can see where it captured the website content in externalwebsites...


Everything is there


But the client prototype rendering seems to stop after some basic CSS layout


Any ideas? I am trying to figure out what launches the websites content. I can find where the screen is defined and even a button on the screen, but I can't seem to figure out what activates the website content (the URL that is contained in the Website widget)

photo
1

If I can the externalwebsites... html file in Google Chrome -it stops at the same point in the prototyper HMTL export client. if I open it in IE, it works. If I open in Safari on OSX, it stops at the same point.


Browser compatibility issue with something?

photo
1

I've figured out the problem... The AWS IIS Server didn't have a MIME type associated with json file and the browser would hickup and stop when it hit a data file (json) which was used to populate the Javascript code running in the Web Server Widget.


BTW - I would default the program to "not" optimize the HTML export unless its a big perf hit..


Thanks for your help!