Hi!
Im trying to figure out if it would be possible to create a dynamic web app using hype.
It will be placed on same domain as backend which provides json api’s
So for example if i create a login screen, then before transition to next scene starts login.json is called and only starts if the information is correct.
Then inside the app there will be data on some different pages, or scenes?
What im looking for is an easy way to build the ui using for example hype, then make it dynamic with my apis.
Im also hoping this could be a way of reducing the amount of work needed campared to building an app in AngularJs for example.
I have done this before using Ajax requests, so it is possible. You can either have it using in-house javascript, or as I did, set up an external functions .js file and put that into the resource folder. Just remember to look at how the exported file structure is made, as a reference.
I do not have any examples to hand, I would need to create them, but I can explain how I went about it.
Due to the nature of Hype and the resource folder I found it time consuming creating the functions within Hype, so in the end I found the best solution is to use an external editor, I use PHPStorm.
With a blank html page I added the buttons, data tables etc, not pretty just in a column, and then created the functions for javascript/JQuery/PHP or RESTful. Once the functions had been tested with the desired results I debugged, cleaned the code and then put it into HYPE.
Then I used HYPE own JS editor to call the functions as and when and copied any resulting code from the HTML into HYPE for display. I actually found this works really well, time wise. Together using both local and session storage and this style of building you can have a data driven site up in no time with the benefit of fantastic styling without the worry of css conflicts.
When it came to replicating the result I had in the HTML file, such as appending a div with data in a readable format, I copied that part into a rectangle. Much like a module in Joomla. The javascript I included in the header, but only after it was complete and bug free.
Personally I have not had any issues with plugins, but to be honest i only use jQuery. I tend to write my own. But I do recall others having issues with certain plugin conflicts.
Not had a issue with performance of a site with Hype, but sometimes in development I have had to restart the app as my memory has been swallowed up.
I cannot see any reason why a large application would be a problem, but of cause it depends on how you write it
I’ve made some progress and so far it works great except for a few minor things.
I have the document ready part on the login scene on scene load, but when i logout its loaded again so if i try logging in again without refreshing browser api is sent twice…
And im trying to load some charts directly when logging in but i cant make it work, if I add the function id to a button i can make them show which seems very strange.
And another thing, how did you set up your navigation, did you use scenes for “pages” or just animations?
The first part, is a little difficult without seeing it. But first I would ask, is the app searching for any sessionStorage, or localStorage on Login scene load. My thinking is you could put a catch in that script, which would prevent it from running twice.
The charts, when you say you are loading them directly, is this with Highcharts or something like that, as in an API, or a HYPE timeline chart.
Yes, I used scenes as pages, and I had a symbol element with its own timeline animations and put it on each screen.
With charts i mean external charts in this case amCharts, if I place them with static data inside hype and load them on scene load it works, but now they are placed in the scriptfile and is appended with json data from api.
But they are not fired on scene load, maybe its same issue as document ready, i will look through that today.
If you have the ability to put this in dropbox with the chart scene loaded first i can have a look. Or if you can provide a sample hype file with this function i will be happy to take a look
