Is there any good way to build Dart app with Web-UI and dynamically loading over network new HTML templates (client side templating)?
It looks like Web UI templates are always load together with generated *.js files:
<head>
<!-- this will be transformed by WebUI compiler to *_generated.js code -->
<link rel="components" href="common_templates.html">
</head>
Currently it's not possible to dynamically load and process templates with WebUI. WebUI needs to process the templates ahead of time. I think #ChrisBuckett suggestion from the other answer/comments would be a great way to go: use deferred loading when it becomes available.
Another crazy idea would be to ship the web-ui compiler with your app and process the templates in the browser. Note, this is not even possible today because web-ui currently cannot be compiled with dart2js (it has some dependencies on dart:io). Hypothetically, if it were possible, it's likely going to be a lot bigger than shipping the extra templates. So, if your goal was to reduce the initial download, then this idea is a no-go.
I am working toward a single page application that dynamically loads new content into the content section of the page based on the menu selected on the left. The content section gets populated from a WebUi component, but it does happen dynamically, and it does happen client side. On the menu, I have something like;
<li> Active </li>
<li> Completed </li>
where i have the application respond to the hash changing when a menu item is clicked. They do something similar in the WebUi implementation of the ToDo app.
The content has a conditional template that loads a WebUi component based on the menu selected.
This may not be what you had in mind. Please provide more details if I am off track here.
It is now possible to performed delayed loading of Dart code. If your client side templates are implemented as Dart source, you can use the DeferredLibrary class.
A more detailed article will likely show up soon in the articles section of Dart website.
Related
We started a modular MVC project at the beginning of the as described in this thread.
MVC Ninject: How to add NinJect bindings from an MVC Area project
One thing we've yet to figure out a good solution for is prevent a full page refresh when loading views from different areas.
A brief history, we use different web projects for all our areas. When the projects build, we copy all the files to an Area folder in the main web app project.
The main web app project the header portion of the application contains a menu which allows users to open any plugin.
Right now when a user clicks on a menu item, the menu as well as everything refreshes.
We've been experimenting with partial views in the plugin projects but still getting the page refreshes and most of the time losing css causing page layout problems.
At the very least the _Layout template we use in the main website, we need to find a way to where that doesn't refresh when loading views from any area.
Any ideas would be greatly appreciated.
Thanks
This has been an off and off thing but finally we found something that looks promising without having to resort changing a lot of code to a javascript framework. We use jQuery for UI manipulation but try to keep what we write down for productivity and quality considerations.
Right now we're working with MVC built in ajax helpers so this ability is actually native to the Asp.Net MVC.
Basically, the div which contains #RenderBody, we gave an ID.
Then we define AjaxOptions to replace html in this div. Then we use Ajax.ActionLink.
The beauty of it so far is we define ajaxStart & complete functions which handle a loading div while loading in a single place.
<script>
$(document).ajaxStart(function () {
$("#loading_div").show();
});
$(document).ajaxError(function (result) {
$("#loading_div").hide();
alert('Exception: ' + result);
});
$(document).ajaxComplete(function () {
$("#loading_div").hide();
});
</script>
Then in all our plugin applications, all controllers return partial views. One thing I noticed is, in our plugin projects, in the _ViewStart template, it is important to comment the Layout.
If not we found the more you clicked on links, the more you'd have controller actions running repeated loops.
It's imperative to load the jquery-Unobtrusive-ajax script in layout. We do so in the head.
We have a solution with 41 projects, 7 which are plugin projects. So far watching the dom and network traffic, everything in the initial tests is running nicely.
Edit: so apparently adding class="button" make it work... Can someone provide a reference on what other classes are there? We can't find any information on this.. Thanks
We are making an app in HTML5 using XDK, it has quite a few different views. We were planning to just link to another html page each time we want to go to a different view. But we quickly found out that hyperlinking does not work, is disabled, and button does not link either.
One of the people in my group said she saw an example about having a bunch of and then just show and hide them and use that as UI navigation... is that the only way?
Thanks in advance!
The Intel XDK doesn't insert any class definitions or require that you use a specific framework. It is a tool for assembling an HTML5 hybrid mobile app using the CSS, HTML and JS files that you supply.
If you look at the samples and the default "blank" project that is created when you create a new project you'll see that there may be references to one or more of the following "phantom" JS files:
intelxdk.js
cordova.js
xhr.js
The first two (intelxdk.js and cordova.js) are special "device API" JavaScript libraries. You won't actually find them in your project directory, they are automatically included when you use the emulator and when you build your project (which "wraps up" your HTML5 code and assets into a native wrapper that is specific to the target you are building -- it does not compile anything, it just converts it into a hybrid native/HTML5 container app that can be installed on the target platform that you built for).
The third one is a special helper JS library for dealing with CORS issues from within your app.
None of these three JS files define any classes or HTML tags, etc. They simply implement target-specific device APIs that consist of JavaScript on the "top end" and native code on the "bottom end." Your application only sees and interacts with the JavaScript interface, and only with the APIs that you need to use (which is totally optional).
For an intro to all of this, please see the Intel XDK Documentation page.
So, that means you determine which frameworks and structure your app takes. In other words, if you want to use Bootstrap and jQuery you can do so. If you decide to use the App Designer or the App Starter tools, they will define some classes that impact your layout. However, you are not required to use these tools to define your HTML and CSS, you can do it by hand or use your favorite UI framework library.
Keep in mind that your code is not being rendered by a desktop browser but the embedded "webview" that is part of the device. These webviews don't have the same memory and CPU resources that you're used to working with in a desktop browser, so you need to learn to be "lean and mean" for the best results. You are using HTML5 technologies to build a mobile app -- not creating a web site on a phone.
Hope this helps, please see our HTML5 web site for more background material. It's a little slim right now, but we're adding examples and background material as time and resources permit.
Hope that helps...
I am starting a jquery mobile/phonegap application. And would like to know if there is any way I can keep my code in seperate files so it is easier to manage. From all the reading I have done on jquery mobile it looks like all of your pages are in one file and are just seperated by divs like <div data-role="page" id="page-one"></div>. I guess I could try to make some type of a makefile that concatenated them all together, but it seems that most apps are pretty lengthy that they should have a solution for this. Keeping all the code in one file just seems impossible to maintain.
JQuery demo, three pages, all one source file:
http://demos.jquerymobile.com/1.1.0/docs/pages/multipage-template.html
You can just use normal links with jQuery mobile:
http://demos.jquerymobile.com/1.4.0/navigation/
It will "hijack" the link and use transitions to give you a native like animation. As Flatlineato pointed out you need to make each page confirm to the required markup, and you'll need to repeat your headers/footers etc on each included page.
Or you can use more complex solutions to dynamically change the content of your page, which can be stored in multiple files, like this other SO post:
including the header and footer in jquery mobile multiple page site
But I would also agree with Leo and say the jQuery mobile isn't the best choice for Phonegap, it's not that well optimized, and runs slower in the Phonegap webkit view than it does in native safari.
I've also switched to a custom navigation system and dropped jQM early on in my Phonegap development, but that was over a year ago, more recent versions may work better.
I think my personal API is what you are searching for:
https://github.com/charnekin/api
Demo example:
http://yopo.es/cordovapi/
jQuery Mobile allows you to have the pages in separate files. Obviously in each file must conform to the structure of the markup pages.
To point to another page in the link instead of the id you specify the correct file name. If the file then you enter multiple jquery mobile pages must also specify the id.
This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.
When debugging my MVC3 app in Visual Studio using IE9 I see lots of small "script block" entries for my page. My page relies heavily on AJAX, and some actions result in replacing sections of the DOM with partial views coming back from the server.
What I'm seeing is a growing list of these "script block" entries - should I be worried about this? Will this ultimately be a performance problem when the app is live?
Note: the script blocks are quite small bits of code - I've moved most of my significant javascript into their own .js files.
Mm, I thinks it's more of a personal style thing with modern browsers, but if nothing else, trying to contain all the script for a view in one block at the bottom of the page will make for easier debugging and your future self will thank you for it!
As a general rule of thumb I will only have script blocks in pages that need to use the document.ready or variables from my viewmodel. Otherwise, I would move all the functions into their own js file. It helps keep the views cleaner and the browser will load the page faster since it won't block loading the page when it hits as many script tags. Plus, it will make debugging easier since you can go straight to the js file instead of having to find the function within the HTML.