I'm trying to use WinJS SplitView in my Windows Universal App.
I created new project and added code from this example: http://try.buildwinjs.com/
So my HTML looks like that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- App1 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body class="win-type-body">
<div id="app">
<div class="splitView" data-win-control="WinJS.UI.SplitView">
<!-- Pane area -->
<div>
<div class="header">
<button class="win-splitviewpanetoggle"
data-win-control="WinJS.UI.SplitViewPaneToggle"
data-win-options="{ splitView: select('.splitView') }"></button>
<div class="title"><h3 class="win-h3">SplitView Pane Area</h3></div>
</div>
<div class="nav-commands">
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
</div>
</div>
<!-- Content area -->
<div class="contenttext"><h2 class="win-h2">SplitView Content Area</h2> </div>
</div>
</div>
</body>
</html>
When running the app almost everything works good. The only problem is with menu items (SplitViewCommand). They are not displayed.
When checking HTML WinJS.UI.SplitView and WinJS.UI.SplitViewPaneToggle is processed correctly but WinJS.UI.SplitViewCommand is not processed. It looks like app doesn't know what WinJS.UI.SplitViewCommand is.
Check your version of WinJS library in base.js file. WinJS.UI.SplitView is avaliable in WinJS 4.0 and above, but support for WinJS.UI.SplitViewCommand object starts from WinJS 4.2.
Related
Working with Material Design Lite, and the initial test is proving unreliable. I'm trying to reproduce the demo shown here: The first Layout Example.
It looks like this, a menu header with a hamburger icon: . However when I try to implement this in my project I get the header with the "Title" text, but no Hamburger Icon. What am I doing wrong?
Here is my code:
<head>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.cyan-light_blue.min.css">
</head>
<body>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link1</a>
<a class="mdl-navigation__link" href="">Link2</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
</body>
</html>
There's no explicit mention of the menu icon and I believe that is because the default is for it to appear although the documentation is unclear on this point.
Here's the code they list to use for this demo to work:
<style>
.demo-layout-transparent {
background: url('../assets/demos/transparent.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
color: white;
}
</style>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
<div class="mdl-layout__drawer-button"
role="button" aria-expanded="false">
<i class="material-icons">menu</i>
</div>
add this between these two divs mdl-layout__drawer, mdl-layout__content
The issue is a validation messages appears and the textfield turns red when specific fields are clicked and blurred out. But when I click the submit button of the form without touching any of the input fields, no error messages are shown and none of the textfields turn red.
The correct way is, it has to show all the validation messages during the submission and all the textfields have to turn red.
The plunk for this is
http://plnkr.co/edit/fNUdp7Qdd0ysrd0eiPFT
<!DOCTYPE html>
<html>
<head>
<title>Angular-Formly</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<!-- form declaration-->
<body ng-app="app" ng-controller="MainController as vm">
<div class="container col-md-4 col-md-offset-4">
<form novalidate name="vm.form" ng-submit="vm.formsubmit()" >
<formly-form model="vm.user" fields="vm.fields" form="vm.form" >
</formly-form>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- Application Dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/api-check/7.2.4/api-check.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script data-require="angular-messages#1.4.8" data-semver="1.4.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly/6.11.0/formly.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/4.3.1/angular-formly-templates-bootstrap.js"></script>
<!-- Application Scripts -->
<script src="app.js"></script>
<script src="MainController.js"></script>
<script type="text/ng-template" id="custom-messages.html">
<div class="my-messages" ng-messages="field.$error" ng-style="{color: 'red'}" ng-if="form.$submitted">
<div class="my-message" ng-message"required">required Message</div>
</div>
</script>
<script type="text/ng-template" id="formly-messages.html">
<formly-transclude></formly-transclude>
<div class="my-messages" ng-messages="form.$error" ng-style="{color: 'red'}" ng-if="fc.$touched">
<div ng-repeat="(name, message) in ::options.validation.messages" ng-message="{{::name}}">{{message(fc.$viewValue, fc.$modelValue, this)}}
</div>
</div>
</script>
</body>
</html>
Can anyone kindly give me the solution for this? Thanks in advance
It seems the form won't allow you to submit it, because you've got required fields in there.
Therefore the form.$submitted value will never be true in your option setting formlyConfigProvider.extras.errorExistsAndShouldBeVisibleExpression.
I am trying to figure out how to get a menu-icon button to change when a toggle occurs...same concept as when a menu icon changes from the hamburger bun icon to a X between toggles. I am using the bootstrap 3 framework and for some reason am having trouble getting the icon to alternate between opening and closing the side-bar menu (the toggle works fine just can't get the icon to change when toggle occurs). I am assuming this is a universally achieved with the bootstraps CSS and JS frameworks...any and all help is greatly appreciated!
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/jquery-mobile.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="css/plugins/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav"><br><br><br><br><br><br>
<li class="sidebar-brand">
<h3>
DDI Work
</h3>
</li>
<li>
Landscapes
</li>
<li>
Pavements
</li>
<li>
Pools & Spas
</li>
<li>
Walls
</li>
<li>
Outdor Features
</li>
<li>
Gardens
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<br><br><br><span class="fa arrow"></span>
<span class="fa arrow">::before</span>
</div>
</div>
</div>
JS:
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
This is an example with Glyphicon, but you can do it with any font. Instead of span:before you can use fa:before since you're using font awesome.
http://jsbin.com/betibo/1/edit
CSS:
#wrapper.toggled #menu-toggle span:before {content:'\2212'}
Change the content here to the unicode of the toggled class
<div id="wrapper">
<span class="glyphicon glyphicon-plus"></span>
</div>
jQuery -- same as you had
I left on Friday with my application working in dev mode....I came in this morning and the Layout.Mobile.chtml was NOT being used.....THIS IS DEV MODE so I still starting the web server each time.... I read about a similar issue related to the cache....but I don't see how this could be related to my problem as once the web server shuts down the cache is cleared.
I am using Visual Studio 2012 as my development "web server".
Everything was running and I don't see where the problem is nor do I understand where to look next. Any suggestions of how to diagnosis this problem or where to look would be appreciated.
This is ONLY for the Layout.Mobile.cshtml....when I switch back to the Layout.cshtml it is being called fine....
In my global.asax.cs I have the following set to force firefox to display using the mobile layout:
//The following forces Firefox to use the Mobile View ONLY
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("mobile")
{
ContextCondition = (context =>
context.Request.UserAgent.IndexOf("Mozilla", StringComparison.OrdinalIgnoreCase) >= 0)
});
My _ViewStart.cshtml file is:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
My _Layout.Cshtml is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Etracs</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
#RenderSection("scripts", required: false)
</head>
<body>
<header>
*#
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#Html.Partial("_ViewSwitcher")
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - Turning Basin Services</p>
</div>
</div>
</footer>
</body>
</html>
My _Layout.Mobile.cshtml is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#* #Styles.Render("~/Content/Mobile/css") *#
#* #Styles.Render("~/Content/jquerymobile/css") *#
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#* #Scripts.Render("~/bundles/jquery") *#
#* #Scripts.Render("~/bundles/jquerymobile") *#
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
#RenderSection("scripts", required: false)
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header">
#RenderSection("backbtn", false)
<h1>#ViewBag.Title</h1>
#RenderSection("Home", false)
</div>
<div data-role="content">
#* #RenderSection("featured", false) *#
#RenderBody()
</div>
<div data-role="footer">
<h4> #Html.Partial("_ViewSwitcher") © #DateTime.Now.Year - Turning Basin Services</h4>
</div>
</div>
</body>
</html>
In my views I am usually setting up the view to impliclity map to the Layout using viewstart.... however, my .Login.Mobile.cshtml hardwires the assocaiation to the mobile layout as follows:
#model TBS.Etracs.Web.Main.Models.LoginModel
#{
ViewBag.Title = "Log in";
Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
#Html.ValidationSummary(true)
<section id="loginForm">
#* #using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) { *#
#using (Html.BeginForm ("Login")) {
#Html.AntiForgeryToken()
<div data-role="content">
<div data-role="fieldcontain">
<label for="UserName">UserName:</label>
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div data-role="fieldcontain">
<label for="Password">Password</label>
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<div data-role="fieldcontain">
<label for="ProgramMode">ProgramMode</label>
<select name="ProgramMode" id="ProgramMode">
<option value="VW">VW</option>
<option value="Porsche">Porsche</option>
<option value="Bentley">Bentley</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="ConnectionMode">ConnectionMode</label>
<select name="ConnectionMode" id="ConnectionMode">
<option value="Production">Production</option>
<option value="Test">Test</option>
</select>
</div>
<input type="submit" value="Log in" />
</div>
}
</section>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I see you acknowledged you didn't believe this was related to the cache - but I'm adding this here since it's critical to be aware of when using mobile views.
The caching bug is explained here
Dave Ward:
Something everyone should be aware of when using MVC 4's mobile view
support is that there's a bug in the RTM version that results in the
wrong view being rendered for mobile devices after the view falls out
of the resolution cache the first time. The tricky part is that you
won't notice this in debug mode or until 15 minutes of inactivity in
release mode, so it's incredibly easy to let the buggy behavior slip
into production. There's an easy fix on NuGet, which Rick Anderson
covers here:
http://blogs.msdn.com/b/rickandy/archive/2012/09/17/asp-net-mvc-4-mobile-caching-bug-fixed.aspx
See also comments in this post
http://www.hanselman.com/blog/MakingASwitchableDesktopAndMobileSiteWithASPNETMVC4AndJQueryMobile.aspx
If you have a custom view engine (like i do) you can just change the base class after installing the nuget package:
public class SiteIdentityViewEngine : Microsoft.Web.Mvc.FixedRazorViewEngine, IVirtualPathFactory
Using Glimpse I found that that the _layout.mobile.cshtml was still being called and included....the problem was that it was not working....which relates to a problem I had earlier.....
In my _Layout.Mobile.chtml I went back to the following code and my layout is now working
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I used this to replace the following lines in my _layout.Mobile.cshtml
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
The big question that I am VERY confused about is what happened .... this prevous worked for several days and then quit working..... Input would be appreciated.
I am using JQuery Mobile and setting up the dialog box link dynamically. Upon user clicking the link, the dialog opens in a separate page, NOT in a dialog box popup. I have the working code below. Can somebody please tell me what I am doing wrong?
Thanks in advance,
Vish
Here is a link to this sample on jsfiddle
http://jsfiddle.net/vishr/ekLWd/
When user clicks on Add Item, I dynamically change the text to Remove Item and when user clicks Remove Item, I put up a dialog box, which in this case opens in a separate page, not a dialog pop-up
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript">
(function(){
$(document).ready(function() {
$("#del-item").live('click', function(){
$.mobile.changePage($('#del-dialog'), 'pop');
});
$("#add-item").live('click', function(){
$('#add-item .ui-btn-text').text('Remove Item');
$('.item').attr('id', 'del-item');
$('.item').attr('href', '#del-dialog');
$('.item').attr('data-rel', 'dialog');
});
$("#close-dialog").click(function(){
$('.ui-dialog').dialog('close');
});
});
})();
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div id="dialog-container" data-inline="true">
Add Item
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="dialog" role="dialog" id="del-dialog">
<div data-role="content">
<div style="text-align:center;"><strong>Remove Item?</strong></div>
<form id="myForm">
<div data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">Cancel</div>
<div class="ui-block-b">OK</div>
</fieldset>
</div>
</form>
</div>
</div>
</body>
</html>
If you want the dialog box to open in the same page then you should use SimpleDialog plugin available for jquery mobile.
Below is your code which i have customized using SimpleDialog plugin so that the dialog box appears in the same page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript">
(function(){
$(document).ready(function() {
$("#del-item").live('click', function(){
//$.mobile.changePage($('#del-dialog'), 'pop');
$(this).simpledialog({
'prompt' : 'What do you say?',
'cleanOnClose': true,
'buttons' : {
'OK': {
click: function () {
$('#simplestringout').text($('#simplestring').attr('data-string'));
}
},
'Cancel': {
click: function () { console.log(this); },
icon: "delete",
theme: "c"
}
}
})
});
$("#add-item").live('click', function(){
$('#add-item .ui-btn-text').text('Remove Item');
$('.item').attr('id', 'del-item');
$('.item').attr('href', '#del-dialog');
$('.item').attr('data-rel', 'dialog');
});
$("#close-dialog").click(function(){
$('.ui-dialog').dialog('close');
});
});
})();
</script>
<title>Page Title</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div id="dialog-container" data-inline="true">
Add Item
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>