hilojs Discussions Rss Feedhttps://hilojs.codeplex.com/discussionshilojs Discussions Rss DescriptionNew Post: how to access month page?http://hilojs.codeplex.com/discussions/569345<div style="line-height: normal;">I have HiloJS running on VS Express 2012 for Win 8. The OS is Win 8.1 on a touch screen PC. The Hub and Detail pages load, but the touch gesture 'zoom' has no effect anywhere. So, how to get to the month page?
<br />
<br />
Regards<br />
</div>ttidrickWed, 08 Oct 2014 20:06:33 GMTNew Post: how to access month page? 20141008080633PNew Post: Use <LINK> with wildcard includes in specs projecthttp://hilojs.codeplex.com/discussions/538657<div style="line-height: normal;">I originally learned about it through Jeremy's pull request.<br />
</div>bennageTue, 11 Mar 2014 22:28:09 GMTNew Post: Use <LINK> with wildcard includes in specs project 20140311102809PNew Post: Use <LINK> with wildcard includes in specs projecthttp://hilojs.codeplex.com/discussions/538657<div style="line-height: normal;">Wow! Thanks for the quick reply. That is a lifesaver! Is this feature documented somewhere?
<br />
And I have to wonder what the IDE people are doing since VS6.0 if such things are still not possible to add from the IDE.<br />
</div>phil_keTue, 11 Mar 2014 20:50:28 GMTNew Post: Use <LINK> with wildcard includes in specs project 20140311085028PNew Post: Use <LINK> with wildcard includes in specs projecthttp://hilojs.codeplex.com/discussions/538657<div style="line-height: normal;">Did you see this commit?
<br />
<a href="https://hilojs.codeplex.com/SourceControl/changeset/64eb2d6f96702ecd0e95e93b397b2f10c2b27234" rel="nofollow">https://hilojs.codeplex.com/SourceControl/changeset/64eb2d6f96702ecd0e95e93b397b2f10c2b27234</a>
<br />
<br />
It's not in the code one the download center, but I believe it addresses your concern.<br />
</div>bennageTue, 11 Mar 2014 20:21:52 GMTNew Post: Use <LINK> with wildcard includes in specs project 20140311082152PNew Post: Use <LINK> with wildcard includes in specs projecthttp://hilojs.codeplex.com/discussions/538657<div style="line-height: normal;">It's very tiresome and error prone to add every file from the main project to the specs project.
<br />
I wonder if there is a way to use wildcard Include directives and &lt;LINK&gt; together?<br />
</div>phil_keTue, 11 Mar 2014 16:44:31 GMTNew Post: Use <LINK> with wildcard includes in specs project 20140311044431PNew Post: After retargeting to Windows 8.1 the tests doesn't run!http://hilojs.codeplex.com/discussions/528904<div style="line-height: normal;">I have fixed this by the way the script tags are added.<br />
<pre><code>buildScriptTags: function (fileList) {
var appPath = this.appFolder.path.toLowerCase();
var specList = fileList.map(function (file) {
var filePath = file.path.toLowerCase().replace(appPath, &quot;&quot;);
var script = document.createElement(&quot;script&quot;);
script.language = &quot;javascript&quot;;
// This doesn't seem to do anything in DOCMODE 11
script.async = false;
// In DOCMODE 11 IE moved to the standards based script loading behavior of
// having out-of-line script elements which are dynamically added to the DOM
// asynchronously load.
// http://msdn.microsoft.com/en-us/library/windows/apps/dn263112.aspx
// So we wait for the script to be loaded here using a Promise
var promise = new WinJS.Promise(function (c, e) {
script.onload = function () {
c(script);
};
script.onerror = function () {
e(new Error(&quot;Could not load &quot; + script.src));
}
script.setAttribute(&quot;src&quot;, filePath);
});
// This is done async since 8.1
head.appendChild(script);
return promise;
});
return WinJS.Promise.join(specList);
},</code></pre>
</div>phil_keTue, 11 Mar 2014 16:37:40 GMTNew Post: After retargeting to Windows 8.1 the tests doesn't run! 20140311043740PNew Post: After retargeting to Windows 8.1 the tests doesn't run!http://hilojs.codeplex.com/discussions/528904<div style="line-height: normal;">Hi Johan,
<br />
<br />
The approach that we used for unit tests turned out to be incompatible with 8.1.
<br />
We haven't had an opportunity to revisit the code, however InfernoRedArt has posted a pull request that addresses the problem:
<br />
<a href="https://hilojs.codeplex.com/SourceControl/network/forks/InfernoRedArt/Windows81/contribution/5372" rel="nofollow">https://hilojs.codeplex.com/SourceControl/network/forks/InfernoRedArt/Windows81/contribution/5372</a><br />
</div>bennageTue, 04 Feb 2014 18:52:37 GMTNew Post: After retargeting to Windows 8.1 the tests doesn't run! 20140204065237PNew Post: After retargeting to Windows 8.1 the tests doesn't run!http://hilojs.codeplex.com/discussions/528904<div style="line-height: normal;">I've managed to download and execute this sample, including the tests on Windows 8.1 with Visual Studio 2013. BUT, when I choose to retarget the Projects to Windows 8.1 in Visual Studio 2013, the tests fail to run.
<br />
<br />
It seems the suite of tests isn't properly created somehow. I've tried to debug and find the proper line where this fails but unfortunately not. The only thing I manage to identify is that when the specRunner.js line 172 is being executed (which seems to add the test specific tag to the UI, the Windows 8 version successfully populates the mocha.suites with a suite of tests, but with the Windows 8.1 version this never happens. The line is executed but mocha.suites collection is not updated.
<br />
<br />
If anyone with better understanding of the mocha.js framework could help it would be greatly appreciated!
<br />
<br />
Johan Lindfors<br />
</div>JohanLindforsTue, 04 Feb 2014 18:46:04 GMTNew Post: After retargeting to Windows 8.1 the tests doesn't run! 20140204064604PNew Post: Unable to find and download chai in Visual Studio Express 2012 for windows 8http://hilojs.codeplex.com/discussions/456266<div style="line-height: normal;">Hi sonalmac,
<br />
<br />
Sorry about the trouble. You can download chai directly from its site:
<br />
<a href="http://chaijs.com/" rel="nofollow">http://chaijs.com/</a><br />
</div>bennageTue, 10 Sep 2013 00:30:30 GMTNew Post: Unable to find and download chai in Visual Studio Express 2012 for windows 8 20130910123030ANew Post: Unable to find and download chai in Visual Studio Express 2012 for windows 8http://hilojs.codeplex.com/discussions/456266<div style="line-height: normal;">I am trying to install and learn Hillo specification project. It requires assertion library of chai. I am trying to find it through Hillo Specification project --- Manange NuGet Package -- Search online -- chai since last 2 days. It never shows up there. I tried in another project on my machine too. Same result.. Does chai has different name now? How do I find it?<br />
</div>sonalmacMon, 09 Sep 2013 18:39:20 GMTNew Post: Unable to find and download chai in Visual Studio Express 2012 for windows 8 20130909063920PNew Post: Code Review Homeworkhttp://hilojs.codeplex.com/discussions/395818<div style="line-height: normal;"><p>Sorry, I forgot to mention one more thing. I really dislike downloading some code, to find out that I have to go to a few other places to download more code. Additionally when I compile I get errors, prompting immediate concern about the codebase. So having to download chai.css/mocha.js/mocha.css is annoying. I would prefer it come with the code or an additional build step to retrieve this if not present. I would suspect 40%-50% OF people wont even bother with the tests if they have errors in that project, irrespective of how easy it is to download and copy in for the tests.</p></div>glavmanWed, 19 Sep 2012 22:40:38 GMTNew Post: Code Review Homework 20120919104038PNew Post: Code Review Homeworkhttp://hilojs.codeplex.com/discussions/395818<div style="line-height: normal;"><p>I agree with rofite. The code is quite clear but how it is all linked together from start of the hub to the eventual initial display. Again, as rofite has suggested this maybe suited to an article or something on the codeplex site, but it is not immediately apparent that how items are linked together. Perhaps an initial basic step by step list just showing the sequence of events from start of app, to the hob module and what series of events happen to present the initial display. Obviously you can follow this through via debugging but it does remove ambiguity and means speed to understanding is considerably shorter.</p>
<p>Also, it is not apparent that you need to have images in your Pictures folder (among others). Again, you can find this out by stepping through the code but a one liner in the readme.txt suggesting you should have some images in your Pictures/Homegroup/etc... (std windows dir) directories for images to display would be helpful. To be more precise, download app code, load in VS 2012, hit F5 to run. If there are no images, as there wasn't in my case, it is not clear whether this is intended or maybe the code has a bug? Dont know until you debug. Again, one line of text would set expectations.</p>
<p>Overall, the code is well commented and layed out. My main gripe as already mentioned, is the flow or linkage of modules.</p></div>glavmanWed, 19 Sep 2012 22:36:53 GMTNew Post: Code Review Homework 20120919103653PNew Post: Code Review Homeworkhttp://hilojs.codeplex.com/discussions/395818<div style="line-height: normal;"><p>code is prity much clear, specs also.</p>
<p>i'have a question:</p>
<p>FilmstripPresenter and FlipviewPresenter are both created in DetailPresenter. On the other hand ImageNavPresenter is created in detail.js and passed to DetailPresenter constructor. Why is that?</p></div>zmajcekWed, 19 Sep 2012 21:54:52 GMTNew Post: Code Review Homework 20120919095452PNew Post: Code Review Homeworkhttp://hilojs.codeplex.com/discussions/395818<div style="line-height: normal;"><p>It is ok for beginners like me.</p></div>MatrixPJWed, 19 Sep 2012 12:46:59 GMTNew Post: Code Review Homework 20120919124659PNew Post: the architecture of the pageshttp://hilojs.codeplex.com/discussions/391074<div style="line-height: normal;"><p>For me am now learning so everything looks&nbsp; find to me.</p>
<p>Thank you.</p></div>MatrixPJWed, 19 Sep 2012 12:44:15 GMTNew Post: the architecture of the pages 20120919124415PNew Post: Code Review Homeworkhttp://hilojs.codeplex.com/discussions/395818<div style="line-height: normal;">
<p>I don't think indirection is an issue. The code seems succinct and clear in the individual modules. While I tend to like things spelled out more in this kind of sample code used for introductory purposes, these modules are short enough to review and figure
out what is being done. The ability see the whole thing at a glance helps tremendously.</p>
<p>However, there is nothing here that describes the relationship of the modules to each other. No comments in the code, for example, that explains what the filstrippresenter is in relation to the detail presenter, or how the detail page is actually using all
the presenters.</p>
<p>Perhaps this would be more appropriately covered in documentation/article about the project, but at least something that helps relate the modules together should be in the code comments.</p>
<p>I'm not versed enough in the testing framework being used to comment on the testability, so I'll leave that to others.</p>
</div>rofiteMon, 17 Sep 2012 15:42:48 GMTNew Post: Code Review Homework 20120917034248PNew Post: the architecture of the pageshttp://hilojs.codeplex.com/discussions/391074<div style="line-height: normal;"><p>A related discussion is here:&nbsp;<a href="https://gist.github.com/3408167">https://gist.github.com/3408167</a></p></div>bennageTue, 21 Aug 2012 18:59:56 GMTNew Post: the architecture of the pages 20120821065956PNew Post: the architecture of the pageshttp://hilojs.codeplex.com/discussions/391074<div style="line-height: normal;"><p>I began experimenting with the above approach here:<br /><a href="http://hilojs.codeplex.com/SourceControl/changeset/view/d00bbccf0125#Hilo%2fHilo%2fmonth%2fmonth.js">http://hilojs.codeplex.com/SourceControl/changeset/view/d00bbccf0125#Hilo%2fHilo%2fmonth%2fmonth.js</a></p>
<p>Derick and I have been debating it. I'll attempt to restate Derick's&nbsp;arguments&nbsp;<em>against </em>it.</p>
<ul>
<li>It makes dependencies implicit (the more explicit approach would be to use a constructor)</li>
<li>The tests require us to know too much about the internals of the SUT. (We have to monkey with the `ready` function because it's invoked by the constructor and has DOM&nbsp;manipulation&nbsp;it)</li>
<li>It exposes internal of the SUT.</li>
</ul>
<p>The corresponding test code is here:<br /><a href="http://hilojs.codeplex.com/SourceControl/changeset/view/d00bbccf0125#Hilo.Specifications%2fspecs%2fmonth%2fmonth.spec.js">http://hilojs.codeplex.com/SourceControl/changeset/view/d00bbccf0125#Hilo.Specifications%2fspecs%2fmonth%2fmonth.spec.js</a></p>
<p>(Note that the test is actually broken because I&nbsp;committed&nbsp;the wrong thing. The `ready` is being reset after it's invoked in the constructor which accomplishes nothing. I hacked later it to be reset it on the prototype <em>before </em>the constructor is invoked.)</p>
<p>I don't share Derick's&nbsp;concern about the dependencies being too implicit. (I'm open to being convinced otherwise). Though I don't like having</p>
<pre><span>this</span>.queryBuilder = <span>new</span> Hilo.ImageQueryBuilder();</pre>
<p>in the `ready` function.</p>
<p>Opine!</p></div>bennageMon, 20 Aug 2012 20:33:19 GMTNew Post: the architecture of the pages 20120820083319PNew Post: Memory Leaks (Zombies!) With Event-Driven Codehttp://hilojs.codeplex.com/discussions/392059<div style="line-height: normal;"><p>FYI &nbsp;- in my testing of our app so far, I'm not seeing any zombies yet. I've only tested the Rotate page so far, but that's a pretty standard example of how we built things, so I'm hopeful for the rest of the app.</p>
<p>Here's the explanation of why the rotate page doesn't have any memory leaks, even though we are not using `removeEventListener` anywhere in the app right now:</p>
<p>When the page loads up, it is handed a few things from the previous page: a query object and a selected item index. It uses these objects to load the image that it needs to display. Neither of these objects triggers any events, therefore they do not hold any reference to anything on our page. Our page is holding a reference to them. That means when our page goes out of scope, the references can be cleaned up. The previous page that owns the original reference to the query object is sitting in the same situation. When that previous page goes out of scope or lets the query object reference go out of scope, the query object is cleaned up.</p>
<p>The rotate page does make use of DOM events and events from our controller objects, though. When the page loads, it queries the DOM for a few elements and then attaches a few click events to them. The object that listens to the events from the DOM also triggers its own events. The page has a controller object that it creates, which listens to the events that our other controller objects have triggered. All of this has the potential to create a large number of zombies - DOM events handled by objects which trigger other events that are handled by objects.&nbsp;</p>
<p>In this case, though, the DOM events all come from DOM elements that are contained within the page fragment. The page fragment is the portion of the .html page that the WinJS framework dynamically loads and renders when we navigate between pages. It's the HTML of the "single page" in the term "Single Page App", basically. Because of this, the DOM events that we are binding to are attached to DOM elements that will be removed when we navigate to another page (using the "Back" button, for example). When we navigate to another page, the page control object (the "code behind" for the page) also falls out of scope - and it's the the page control that created all of the objects we need for the page, did the DOM querying and got everything set up.</p>
<p>All of this means that when we navigate to a different page in the app, the DOM elements we are bound to and the page control that holds references to our objects both fall out of scope. Since our controller objects and their event bindings are managed in side of the DOM and page control that just fell out of scope, all of our objects are also falling out of scope. This means everything we created on this page is now garbage, out of scope, and able to be cleaned up the the JavaScript garbage collector. Therefore, the next time we navigate to the same page, even to load and manipulate the same image, we are creating a new instance of the controllers and DOM elements, without any reference to the previous elements or objects, hence no zombies and no memory leaks.</p>
<p>Even if this is the case and the app doesn't have any memory leaks, the information that I've shown here needs to show up in our code and in the documentation to make sure people understand what's going on with memory management in JavaScript.</p>
<p>If we decide to change our app design to use a common header and footer, for example, throughout all of the pages we may end up in a situation that needs to be explicitly handled. If we put a DOM element in the default.html page, outside of the fragment that gets swapped out on navigation, then any DOM events we wire up to those elements outside the page fragment will need to be cleaned up.</p>
<p>For now, though, we should be fine - at least for most of our pages. We should go through the rest of the pages with a fine tooth comb to ensure the rest of the app is zombie free, though.</p></div>derickbaileyFri, 17 Aug 2012 18:51:21 GMTNew Post: Memory Leaks (Zombies!) With Event-Driven Code 20120817065121PNew Post: Memory Leaks (Zombies!) With Event-Driven Codehttp://hilojs.codeplex.com/discussions/392059<div style="line-height: normal;">
<p>Any time we have an event listener (event handler, bind to an event, whatever you want to call it), we have the potential for a memory leak.&nbsp;This is due to the way the observer pattern works, which is the basis for all event handling systems (in .NET,
Java, JavaScript, C&#43;&#43;, Ruby or anywhere else).&nbsp;</p>
<p>Let's say ObjectA can dispatch events (because it uses the WinJS.Utilities.eventMixin). If ObjectB wants to listen to those events, we call addEventListener on ObjectA:</p>
<p>&nbsp; ObjectA.addEventListener(&quot;some event&quot;, ObjectB.SomeFunction);</p>
<p>This sets up the &quot;SomeFunction&quot; on ObjectB as the event handler.&nbsp;</p>
<p>Let's also say ObjectA is a globally accessible object. It might hang off a namespace or be directly available in the global context. Either way, it hangs around all the time.</p>
<p>And now lets say it's time for the page that is holding on to ObjectB to go away. When this page is closed, the page's reference to ObjectB will no longer be needed. JavaScript's garbage collection should be able to clean up ObjectB.</p>
<p>But there's a problem. ObjectA is holding a direct reference to ObjectB through it's event listeners. Because of this, ObjectB will not be garbage collected. It will hang around in memory, and any time ObjectA triggers the &quot;some event&quot; event, ObjectB will
get called - longer after the page that created ObjectB is closed. We basically have a zombie object (memory leak) at this point.</p>
<p>This is a very simple scenario that is very common in event-driven applications. It's also very easy to solve. When the page that created ObjectB closes, it needs to have ObjectB removed from ObjectA's event handlers:</p>
<p>&nbsp; ObjectA.removeEventListener(&quot;some event&quot;, ObjectB.SomeFunction);</p>
<p>By doing this, we are telling ObjectA to remove the reference to ObjectB that it holds. Thus, when the page closes, no more references to the ObjectB will exist and ObjectB can be garbage collected. We have effectively taken the zombie's head off it's body,
and killed it. :)</p>
<p>I've written about this extensively in JavaScript and Backbone.js, and have created a utility that makes this 100x easier to manage (there are some nuances to this, regarding anonymous callback functions and bound functions as event handlers that make it
a bit tricky):</p>
<p><a href="http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/">http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/</a></p>
<p><a href="http://lostechies.com/derickbailey/2012/03/19/backbone-js-and-javascript-garbage-collection/">http://lostechies.com/derickbailey/2012/03/19/backbone-js-and-javascript-garbage-collection/</a></p>
<p><a href="https://github.com/derickbailey/backbone.marionette/blob/master/src/backbone.marionette.eventbinder.js">https://github.com/derickbailey/backbone.marionette/blob/master/src/backbone.marionette.eventbinder.js</a></p>
<p><a href="https://github.com/derickbailey/backbone.marionette/wiki/When-to-use-the-EventBinder">https://github.com/derickbailey/backbone.marionette/wiki/When-to-use-the-EventBinder</a></p>
<p>In spite of these posts and this code being specific to Backbone, the same principles and patterns apply to WinJS objects, and DOM events. We need to be sure our event handlers are not creating zombies in our app. Its also likely that we will want to create
something like my EventBinder for WinJS (though we can certainly do things without it - it just makes things easier).</p>
</div>derickbaileyFri, 17 Aug 2012 16:28:24 GMTNew Post: Memory Leaks (Zombies!) With Event-Driven Code 20120817042824P