Permalink
Browse files

win8 navigation app with ajax

  • Loading branch information...
1 parent 319a1af commit 7931f1c3ec453a010a4cd007b8c7db8d67747665 @ryanttb committed Nov 3, 2012
Showing with 8,045 additions and 0 deletions.
  1. +2 −0 Win8Test/.gitignore
  2. +77 −0 Win8Test/navigation-js-app/css/default.css
  3. +175 −0 Win8Test/navigation-js-app/css/searchResults.css
  4. +28 −0 Win8Test/navigation-js-app/default.html
  5. +69 −0 Win8Test/navigation-js-app/dev-journal-ryan.txt
  6. BIN Win8Test/navigation-js-app/images/jQuery Geo paradigm.png
  7. BIN Win8Test/navigation-js-app/images/jquerygeo.png
  8. BIN Win8Test/navigation-js-app/images/logo.png
  9. BIN Win8Test/navigation-js-app/images/smalllogo.png
  10. BIN Win8Test/navigation-js-app/images/splashscreen.png
  11. BIN Win8Test/navigation-js-app/images/storelogo.png
  12. +44 −0 Win8Test/navigation-js-app/js/default.js
  13. +2 −0 Win8Test/navigation-js-app/js/jquery-1.8.1.min.js
  14. +6,850 −0 Win8Test/navigation-js-app/js/jquery.geo-1.0b1.js
  15. +2 −0 Win8Test/navigation-js-app/js/jquery.min.js
  16. +127 −0 Win8Test/navigation-js-app/js/navigator.js
  17. +288 −0 Win8Test/navigation-js-app/js/searchResults.js
  18. +87 −0 Win8Test/navigation-js-app/navigation-js-app.jsproj
  19. +7 −0 Win8Test/navigation-js-app/navigation-js-app.jsproj.user
  20. +46 −0 Win8Test/navigation-js-app/navigation-js-app.sln
  21. BIN Win8Test/navigation-js-app/navigation-js-app.v11.suo
  22. BIN Win8Test/navigation-js-app/navigation-js-app_TemporaryKey.pfx
  23. +30 −0 Win8Test/navigation-js-app/package.appxmanifest
  24. +32 −0 Win8Test/navigation-js-app/pages/home/home.css
  25. +26 −0 Win8Test/navigation-js-app/pages/home/home.html
  26. +74 −0 Win8Test/navigation-js-app/pages/home/home.js
  27. +28 −0 Win8Test/navigation-js-app/postAjax.html
  28. +51 −0 Win8Test/navigation-js-app/searchResults.html
View
@@ -0,0 +1,2 @@
+bin
+bld
@@ -0,0 +1,77 @@
+html {
+ cursor: default;
+}
+
+#contenthost {
+ height: 100%;
+ width: 100%;
+}
+
+.fragment {
+ /* Define a grid with rows for a banner and a body */
+ -ms-grid-columns: 1fr;
+ -ms-grid-rows: 128px 1fr 0px;
+ display: -ms-grid;
+ height: 100%;
+ width: 100%;
+}
+
+ .fragment header[role=banner] {
+ /* Define a grid with columns for the back button and page title. */
+ -ms-grid-columns: 120px 1fr;
+ -ms-grid-rows: 1fr;
+ display: -ms-grid;
+ }
+
+ .fragment header[role=banner] .win-backbutton {
+ margin-left: 39px;
+ margin-top: 59px;
+ }
+
+ .fragment header[role=banner] .titlearea {
+ -ms-grid-column: 2;
+ margin-top: 37px;
+ }
+
+ .fragment header[role=banner] .titlearea .pagetitle {
+ width: calc(100% - 20px);
+ }
+
+ .fragment section[role=main] {
+ -ms-grid-row: 2;
+ height: 100%;
+ width: 100%;
+ }
+
+@media screen and (-ms-view-state: snapped) {
+ .fragment header[role=banner] {
+ -ms-grid-columns: auto 1fr;
+ margin-left: 20px;
+ }
+
+ .fragment header[role=banner] .win-backbutton {
+ margin: 0;
+ margin-right: 10px;
+ margin-top: 76px;
+ }
+
+ .fragment header[role=banner] .win-backbutton:disabled {
+ display: none;
+ }
+
+ .fragment header[role=banner] .titlearea {
+ -ms-grid-column: 2;
+ margin-left: 0;
+ margin-top: 68px;
+ }
+}
+
+@media screen and (-ms-view-state: fullscreen-portrait) {
+ .fragment header[role=banner] {
+ -ms-grid-columns: 100px 1fr;
+ }
+
+ .fragment header[role=banner] .win-backbutton {
+ margin-left: 29px;
+ }
+}
@@ -0,0 +1,175 @@
+.searchResults section[role=main] {
+ /* Define a grid with rows for the filters, spacing and results */
+ -ms-grid-columns: 1fr;
+ -ms-grid-rows: auto 18px 1fr;
+ display: -ms-grid;
+}
+
+ .searchResults section[role=main] .filterarea {
+ -ms-grid-row: 1;
+ }
+
+ .searchResults section[role=main] .filterarea .filterbar {
+ height: auto;
+ list-style-type: none;
+ margin-left: 80px;
+ margin-top: 5px;
+ max-width: calc(100% - 120px);
+ }
+
+ .searchResults section[role=main] .filterarea .filterbar li {
+ display: inline;
+ font-family: "Segoe UI Light";
+ font-size: 20pt;
+ line-height: 24pt;
+ margin-right: 40px;
+ opacity: 0.6;
+ }
+
+ .searchResults section[role=main] .filterarea .filterbar li:active {
+ color: rgba(90, 183, 227, 1);
+ }
+
+ .searchResults section[role=main] .filterarea .filterbar li.highlight, .searchResults section[role=main] .filterarea .filterbar li:hover {
+ opacity: 1.00;
+ }
+
+ .searchResults section[role=main] .resultslist .win-horizontal.win-viewport .win-surface {
+ margin-left: 108px;
+ margin-bottom: 60px;
+ }
+
+ .searchResults section[role=main] .resultslist {
+ -ms-grid-row: 3;
+ height: 100%;
+ margin-bottom: 36px;
+ position: relative;
+ width: 100%;
+ z-index: 0;
+ }
+
+ .searchResults section[role=main] .resultslist .win-horizontal.win-viewport .win-container {
+ margin-bottom: 20px;
+ margin-right: 41px;
+ }
+
+ .searchResults section[role=main] .resultslist .item {
+ /* Define a grid with columns for an icon, spacing and item details */
+ -ms-grid-columns: 40px 10px 1fr;
+ -ms-grid-rows: 1fr;
+ display: -ms-grid;
+ height: 64px;
+ padding-left: 7px;
+ padding-top: 1px;
+ padding-right: 7px;
+ width: 340px;
+ }
+
+ .searchResults section[role=main] .resultslist .item .item-image {
+ -ms-grid-column: 1;
+ -ms-grid-row: 1;
+ height: 40px;
+ margin-top: 6px;
+ width: 40px;
+ }
+
+ .searchResults section[role=main] .resultslist .item .item-content {
+ -ms-grid-column: 3;
+ -ms-grid-row: 1;
+ }
+
+ .searchResults section[role=main] .resultslist .item .item-content .item-subtitle, .searchResults section[role=main] .resultslist .item .item-content .item-description {
+ opacity: 0.6;
+ }
+
+.searchResults header[role=banner] .titlearea {
+ -ms-grid-column: 2;
+ margin-top: 45px;
+}
+
+ .searchResults header[role=banner] .titlearea .pagetitle {
+ display: inline;
+ padding: 0;
+ padding-right: 30px;
+ }
+
+ .searchResults header[role=banner] .titlearea .pagesubtitle {
+ display: inline;
+ margin: 0;
+ padding: 0;
+ }
+
+/* Define a style for both selected filters and text matching the query. */
+.searchResults mark {
+ background: transparent;
+ color: rgba(90, 183, 227, 1);
+}
+
+/* Hide the <select> filter list. It will be shown in snapped mode only. */
+.searchResults .filterselect {
+ display: none;
+}
+
+@media screen and (-ms-view-state: snapped) {
+ .searchResults header[role=banner] .titlearea {
+ margin-top: 73px;
+ }
+
+ .searchResults section[role=main] {
+ /* Rows for the filters, spacing, and the results */
+ -ms-grid-columns: 1fr;
+ -ms-grid-rows: 40px 21px 1fr;
+ display: -ms-grid;
+ }
+
+ /* Hide the horizontal list of filters in snapped mode. */
+ .searchResults section[role=main] .filterarea .filterbar {
+ display: none;
+ }
+
+ /* Show a <select> list of filters in snapped mode */
+ .searchResults section[role=main] .filterarea .filterselect {
+ display: inline;
+ margin-left: 20px;
+ margin-top: 3px;
+ max-width: calc(100% - 38px);
+ }
+
+ .searchResults section[role=main] .resultslist .win-vertical.win-viewport .win-surface {
+ margin-left: 6px;
+ }
+
+ .searchResults section[role=main] .resultslist .win-vertical.win-viewport .win-container {
+ margin-right: 27px;
+ margin-bottom: 22px;
+ margin-top: 4px;
+ }
+
+ .searchResults section[role=main] .resultslist .win-item {
+ height: 64px;
+ margin-top: 0;
+ width: 280px;
+ }
+
+ .searchResults section[role=main] .resultslist .item {
+ /* Define a grid with columns for an icon, spacing and item details */
+ -ms-grid-columns: 42px 12px 1fr;
+ -ms-grid-rows: 1fr;
+ display: -ms-grid;
+ height: 100%;
+ width: 100%;
+ }
+
+ .searchResults header[role=banner] .pagetitle {
+ /* Update the page title to be smaller in snapped mode */
+ height: 30px;
+ margin-top: 0;
+ width: 270px;
+ }
+}
+
+@media screen and (-ms-view-state: fullscreen-portrait) {
+ .searchResults section[role=main] .resultslist .win-horizontal.win-viewport .win-surface {
+ margin-left: 90px;
+ }
+}
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>navigation_js_app</title>
+
+ <!-- WinJS references -->
+ <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
+ <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
+ <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
+
+ <!-- navigation_js_app references -->
+ <link href="/css/default.css" rel="stylesheet" />
+
+ <script src="/js/jquery-1.8.1.min.js"></script>
+ <script src="/js/jquery.geo-1.0b1.js"></script>
+
+ <script src="/js/default.js"></script>
+ <script src="/js/navigator.js"></script>
+ <script src="/js/searchResults.js"></script>
+</head>
+<body>
+ <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
+ <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
+ <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"></button>
+ </div> -->
+</body>
+</html>
@@ -0,0 +1,69 @@
+== 2012-08-18
+
+=== book!
+
+Download this book: http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx
+
+=== sessionState
+
+I'm not sure if I can use window.sessionStorage but there's WinJS.Application.sessionState. I wonder if the API is the same.
+
+Here's the API URL in MSDN: http://msdn.microsoft.com/en-us/library/windows/apps/br211377.aspx
+
+The WinJS.UI section is under Controls heading. There's also Windows.UI.WebUI.
+
+The WinJS.Application doc page times out for me. Here's some other one: https://msdn.microsoft.com/en-us/subscriptions/securedownloads/br229774.aspx
+
+Hmm, not the same API: Any data stored on sessionState will automatically be serialized. Nice!
+
+=== local
+
+But that's session. The map's extent should survive session pauses, no? I think I want WinJS.Application.local which as a similar to web storage API but not the same. Ah, local is an actual, physical file. Going to check HTML5 localStorage instead.
+
+Nice, we do have localStorage. This is friendly!
+
+Hmm, after it closes, the tile is still around. However, at some point I lost my bbox and thus, localStorage ;(
+
+Maybe that was only because I forced a rebuild and the new binary has a different signature.
+
+localStorage doesn't always stay. I'm not sure what's up with that.
+
+I tried Application.local, but I'm getting exceptions even by just calling .exists("bbox");
+
+I may have killed the app before saving.
+
+=== innerHTML
+
+That [object] text was just because I was using toStaticHTML on a jQuery object, existingChildren. Doh! Works great now!
+
+=== suspend/checkpoint
+
+I'm having trouble getting suspend to trigger. It triggers when the user is closing the app. You can't stop termination at that point but you can save data.
+
+=== adding search
+
+Added search via Add New Item. Following this quickstart: http://msdn.microsoft.com/library/windows/apps/Hh465238
+
+onquerysubmitted fires when your app is the main app. It "navigates" to the search results page. It sends search args but I don't know how they're sent to the page yet.
+
+"Alternatively, you can register for the suggestionsrequested event and build your own list of suggestions."
+
+I want to do this but can't find the property: "Use searchPane.showOnKeyboardInput so that the search box receives input when a user types."
+
+The searchData function gets everything. Make sure to check for empty queryText and do something useful.
+
+Hmm, not sure I can get an async result for searchData.
+
+searchData returns a WinJS.Binding.List object. How do I add items one at a time? Maybe .push? It's a bad day for the MS Win8 docs to go down. Yeah, .push! Thank's Intellisence!
+
+Ok, so navigation doesn't work in the blank app template. If you want to use search, you need to start with at least the navigation template. Sheesh!
+
+Also, put the map on the home page, not default.
+
+=== jQuery
+
+jQuery does cause errors but appears to work anyway.
+
+=== web
+
+I can't access web content easily in Windows Store apps.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 7931f1c

Please sign in to comment.