Reading this post here on stackoverflow want to load a different css when compiling for release mode.
Code:
#{ #if (Debug)
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#else
<link href="#Url.Content("~/Content/Site-min.css")" rel="stylesheet" type="text/css" />
#endif
}
Attempt 2
#{ #if (Debug) }
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#{ #else }
<link href="#Url.Content("~/Content/Site-min.css")" rel="stylesheet" type="text/css" />
#{ #endif }
I tried to DEBUG in uppercase
But no change has no effect when compiling Debug to Release
According to this SO post, if you want this sort of thing to work, you can use a property in your Model to drive the View's conditional stuff, so the C# sets the Model's boolean (IsDebug, or whatever) via the compile time directive stuff and the View relies on that.
So your Model would end doing something like:
bool IsDebug = true;
#if (!DEBUG)
IsDebug = false;
#endif
and your View would do something like:
#if(Model.IsDebug)
{
}
else
{
}
You could also use ViewBag/ViewData to hold that boolean value too, I suppose.
UPDATE:
Base on your comments, here's something you could do:
Create a new BaseController class which inherits from Controller.
public abstract class BaseController : Controller
{
...
protected BaseController()
{
bool indebug = false;
#if DEBUG
indebug = true;
#endif
ViewBag.InDebug = indebug;
}
}
and have your Controllers inherit from this rather than Controller.
Then in your _Layout.cshtml you could do this:
#if (ViewBag.InDebug)
{
}
else
{
}
This seems to work OK.
Related
I am using Laravel 5.5 and Dusk 2.0. I have the following html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body class="my-body-class" id="my-body-div">
<div class="my-content-class" id="my-content-div">
Content goes here.
</div>
</body>
</html>
Here's my Dusk test.
public function testBasicExample()
{
$this->browse(function (Browser $browser) {
$browser->visit('/test/admin-fixed-layout');
$this->assertNotNull($browser->element('.my-content-class'));
$this->assertNotNull($browser->element('#my-content-div'));
// $this->assertNotNull($browser->element('.my-body-class'));
$this->assertNotNull($browser->element('#my-body-div'));
});
}
If I un-comment the assertion that uses the body class selector, the test fails. Why?
This is because by default prefix is set to body:
public function __construct($driver, $prefix = 'body')
{
$this->driver = $driver;
$this->prefix = trim($prefix);
}
in Laravel\Dusk\ElementResolver class.
If you really need to change this (but probably there is no point), you can add the following method into Tests/DuskTestCase class:
protected function newBrowser($driver)
{
return new \Laravel\Dusk\Browser($driver, new \Laravel\Dusk\ElementResolver($driver, ''));
}
This will override default browser and pass empty prefix instead of default body prefix
I am in learning and trying to app development in the cocos2d-x.
How do I implement a callback from the WebView is?
I have been using the cocos2d-x v3.10.
test_index.html
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="robots" content="none" />
<meta name="viewport" content="width=device-width,height=device-height">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/sp.js"></script>
<ul class="slideshow">
<li>
<a href="#" onclick='sp.call("test1")'>
<img src="img/test1.jpg" width="100%"/>
</li>
</ul>
<style>
.bx-default-pager {
display: none;
}
.bx-viewport {
border: none !important;
}
</style>
</body>
sp.js
(function(){
var sp = {};
var isAndroid = navigator.userAgent.match(/Android/);
var isIOs = navigator.userAgent.match(/iPhone/) || navigator.userAgent.match(/iPod/) || navigator.userAgent.match(/iPad/);
sp.call = function(text){
if(isAndroid){
window.Cocos2dx.call(text);
} else if (isIOs) {
window.location.href = "cocos2dx:" + text;
} else {
window.location.href = text;
}
};
window.sp = sp;
})();
test.cpp
bool TestScene::init()
{
auto webView = cocos2d::experimental::ui::WebView::create();
webView->loadURL("http://test/test_index.html");
webview->setONJSCallback(CC_CALLBACK_1(TestScene::callbackFromJS,this));
webView->setAnchorPoint(Point(0,0));
webView->setPosition(Point(0,150));
webView->setContentSize(Size(WINSIZE.width,WINSIZE.height-150));
this->addChild(webView,1);
}
void TestScene::callbackFromJS(cocos2d::experimental::ui::WebView* webview, std::string* url)
{
log("call this method");
}
Wrong use of the "setOnJSCallback"?
The JSCallback works like this.
It checks everytime a url is loaded, if that contains the JavascriptInterfaceScheme name if any defined for the webview. If it is there it wont load that url instead call the JSCallBack function. If not it will normally load the url. In #Plusmiles case you have not set any JavascriptInterfaceScheme name.
Below is the code which worked for me
cocos2d::experimental::ui::WebView * Practice::_webView;
_webView = experimental::ui::WebView::create();
_webView->setContentSize(Size(1200, 1200));
_webView->setPosition(Vec2(900,768));
_webView->setJavascriptInterfaceScheme("cocos2dx");
_webView->loadURL("https://example.com");
_webView->setOnJSCallback(&Practice::callbackFromJS);
this->addChild(_webView, 1);
void Practice::callbackFromJS(cocos2d::experimental::ui::WebView* webview, const std::string &answer) {
std::string response = answer;
}
to call from html file you need to set
window.location.href = "cocos2dx:" + text;
where cocos2dx is the JavascriptInterfaceScheme name set in the webview. Whenever it find this name in the url it will call the function with webview object as first parameter and url as second. So you need to avoid this webview in url if you want the url to load rather than calling JSCallback function.
I hope this answer will help.
So you can only access "https" but not "http"? This is because of new IOS 9 restrictions. You need to add the following to your plist in order to be able to access http
<key>NSAppTransportSecurity</key>
<dict>
<!--Include to allow all connection -->
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
I am trying to make a simple example with highlight.js but I can not make it work. I am not familiar with highlight.js. Here is my code and I dont know what`s wrong in it. Any idea! Thanks in advance.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
<script type='text/javascript'>
hljs.initHighlightingOnLoad();
$(document).ready(function() {
$('#myBlock').each(function(i, e) {hljs.highlightBlock(e)});
});
</script>
</head>
<body>
<div id="myBlock">
<pre><code class="php">
require_once 'Zend/Uri/Http.php';
abstract class URI extends BaseURI
{
/**
* Returns a URI
*
* #return URI
*/
static public function _factory($stats = array(), $uri = 'http')
{
$uri = explode(':', $uri, 2);
$schemeSpecific = isset($uri[1]) ? $uri[1] : '';
$desc = 'Multi
line description';
// Security check
if (!ctype_alnum($scheme)) {
throw new Zend_Uri_Exception('Illegal scheme');
}
return [
'uri' => $uri,
'value' => null,
];
}
}
</code></pre>
</div>
</body>
</html>
You need to change the way you read the css and javascript files a bit:
The css file:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
The javascript file:
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
Yes, I know, you used the way it was on the original site, but it seems they made a mistake, when they wrote the example codes.
I don't know how to solve the following: I'd like to let my Model generate real javascript dynamically based on some model logic.
This final piece of javascript code then should be added inside the $(document).ready { } part of my html page.
The thing is: If I use inline="javascript", the code gets quoted as my getter is a String (that is how it is mentioned in the Thymeleaf doc but it's not what I need ;-)
If I use inline="text" in is not quoted but all quotes are escaped instead ;-) - also nice but unusable 8)
If I try inline="none" nothing happens.
Here are the examples
My model getter created the following Javascript code.
PageHelper class
public String documentReady() {
// do some database operations to get the numbers 8,5,3,2
return "PhotoGallery.load(8,5,3,2).loadTheme(name='basic')";
}
So if I now try inline="javascript"
<script th:inline="javascript">
/*<![CDATA[*/
jQuery().ready(function(){
/*[[${pageHelper.documentReady}]]*/
});
/*]]>*/
</script>
it will be rendered to
<script>
/*<![CDATA[*/
jQuery().ready(function(){
'PhotoGallery.load(8,5,3,2).loadTheme(name=\'basic\')'
});
/*]]>*/
</script>
Which doesn't help as it is a String literal, nothing more (this is how Thymeleaf deals with it).
So if I try inline="text" instead
<script>
/*<![CDATA[*/
jQuery().ready(function(){
PhotoGallery.load(8,5,3,2).loadTheme(name='basic')
});
/*]]>*/
</script>
Which escapes the quotes.
inline="none" I do not really understand, as it does nothing
<script>
/*<![CDATA[*/
jQuery().ready(function(){
[[${pageHelper.documentReady}]]
});
/*]]>*/
</script>
To be honest I have no idea how to solve this issue and hopefully anybody out there knows how to deal with this.
Many thanks in advance
Cheers
John
I would change the approach.
Thymeleaf easily allows you to add model variables in your templates to be used in Javascript. In my implementations, I usually put those variables somewhere before the closing header tag; to ensure they're on the page once the JS loads.
I let the template decide what exactly to load, of course. If you're displaying a gallery, then render it as you would and use data attributes to define the gallery that relates to some JS code. Then write yourself a nice jQuery plugin to handle your gallery.
A relatively basic example:
Default Layout Decorator: layout/default.html
<!doctype html>
<html xmlns:layout="http://www.thymeleaf.org" xmlns:th="http://www.thymeleaf.org">
<head>
<title>My Example App</title>
<object th:remove="tag" th:include="fragments/scripts :: header" />
</head>
<body>
<div layout:fragment="content"></div>
<div th:remove="tag" th:replace="fragments/scripts :: footer"></div>
<div th:remove="tag" layout:fragment="footer-scripts"></div>
</body>
</html>
The thing to notice here is the inclusion of the generic footer scripts and then a layout:fragment div defined. This layout div is what we're going to use to include our jQuery plugin needed for the gallery.
File with general scripts: fragments/scripts.html
<div th:fragment="header" xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var MY_APP = {
contextPath: /*[[#{/}]]*/,
defaultTheme: /*[[${theme == null} ? null : ${theme}]]*/,
gallery: {
theme: /*[[${gallery == null} ? null : ${gallery.theme}]]*/,
images: /*[[${gallery == null} ? null : ${gallery.images}]]*/,
names: /*[[${gallery == null} ? null : ${gallery.names}]]*/
}
};
/*]]>*/
</script>
</div>
<div th:fragment="footer" xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/my_app.js"></script>
</div>
In the scripts file, there are 2 fragments, which are included from the decorator. In the header fragment, a helpful context path is included for the JS layer, as well as a defaultTheme just for the hell of it. A gallery object is then defined and assigned from our model. The footer fragment loads the jQuery library and a main site JS file, again for purposes of this example.
A page with a lazy-loaded gallery: products.html
<html layout:decorator="layout/default" xmlns:layout="http://www.thymeleaf.org/" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Products Landing Page</title>
</head>
<body>
<div layout:fragment="content">
<h1>Products</h1>
<div data-gallery="lazyload"></div>
</div>
<div th:remove="tag" layout:fragment="footer-scripts">
<script type="text/javascript" src="/js/my_gallery.js"></script>
</div>
</body>
</html>
Our products page doesn't have much on it. Using the default decorator, this page overrides the page title in the head. Our content fragment includes a title in an h1 tag and an empty div with a data-gallery attribute. This attribute is what we'll use in our jQuery plugin to initialize the gallery.
The value is set to lazyload, so our plugin knows that we need to find the image IDs in some variable set somewhere. This could have easily been empty if the only thing our plugin supports is a lazyloaded gallery.
So the layout loads some default scripts and with cleverly placed layout:fragments, you allow certain sections of the site to load libraries independent of the rest.
Here's a basic Spring controller example, to work with our app: MyController.java
#Controller
public class MyController {
#RequestMapping("/products")
public String products(Model model) {
class Gallery {
public String theme;
public int[] images;
public String[] names;
public Gallery() {
this.theme = "basic";
this.images = new int[] {8,5,3,2};
this.names = new String[] {"Hey", "\"there's\"", "foo", "bar"};
}
}
model.addAttribute("gallery", new Gallery());
return "products";
}
}
The Gallery class was tossed inline in the products method, to simplify our example here. This could easily be a service or repository of some type that returns an array of identifiers, or whatever you need.
The jQuery plugin that we created, could look something like so: my_gallery.js
(function($) {
var MyGallery = function(element) {
this.$el = $(element);
this.type = this.$el.data('gallery');
if (this.type == 'lazyload') {
this.initLazyLoadedGallery();
}
};
MyGallery.prototype.initLazyLoadedGallery = function() {
// do some gallery loading magic here
// check the variables we loaded in our header
if (MY_APP.gallery.images.length) {
// we have images... sweet! let's fetch them and then do something cool.
PhotoGallery.load(MY_APP.gallery.images).loadTheme({
name: MY_APP.gallery.theme
});
// or if load() requires separate params
var imgs = MY_APP.gallery.images;
PhotoGallery.load(imgs[0],imgs[1],imgs[2],imgs[3]).loadTheme({
name: MY_APP.gallery.theme
});
}
};
// the plugin definition
$.fn.myGallery = function() {
return this.each(function() {
if (!$.data(this, 'myGallery')) {
$.data(this, 'myGallery', new MyGallery(this));
}
});
};
// initialize our gallery on all elements that have that data-gallery attribute
$('[data-gallery]').myGallery();
}(jQuery));
The final rendering of the products page would look like so:
<!doctype html>
<html>
<head>
<title>Products Landing Page</title>
<script type="text/javascript">
/*<![CDATA[*/
var MY_APP = {
contextPath: '/',
defaultTheme: null,
gallery: {
theme: 'basic',
images: [8,5,3,2],
names: ['Hey','\"there\'s\"','foo','bar']
}
};
/*]]>*/
</script>
</head>
<body>
<div>
<h1>Products</h1>
<div data-gallery="lazyload"></div>
</div>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/my_app.js"></script>
<script type="text/javascript" src="/js/my_gallery.js"></script>
</body>
</html>
As you can see, Thymeleaf does a pretty good job of translating your model to valid JS and actually adds the quotes where needed and escapes them as well. Once the page finishes rendering, with the jQuery plugin at the end of the file, everything needed to initialize the gallery should be loaded and ready to go.
This is not a perfect example, but I think it's a pretty straight-forward design pattern for a web app.
instead of ${pageHelper.documentReady} use ${pageHelper.documentReady}
I have a question. How could I create subpages (something like this: character.php?name=Xar) but I want it in Laravel. Do I have to create routes? Also to mention, when I create a route like this:
Route::get('account/test', 'HomeController#test');
and the view is in folder under views/aac/test, and the function is like:
public function test()
{
return View::make('aac.test');
}
it won't load the CSS. it's just an HTML page.
back to the problem again, how could I create sites like that? I'm also using Blade templating engine.
// app/routes.php
Route::get('characters', 'CharactersController#all');
Route::get('characters/{name}', 'CharactersController#detail');
// app/controllers/CharactersController.php
class CharactersController extends BaseController
{
public function all()
{
// show all characters
}
public function detail($name)
{
// find character by name & show detail for example
return View::make('acc.test');
}
}
// app/views/acc/test.blade.php
// HTML::style('css/style.css') loads CSS file located at public/css/style.css
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
{{ HTML::style('css/style.css') }}
</head>
<body>
</body>
</html>
Search function
Place search form somewhere in your view file
<form action="{{ URL::action('CharactersController#search') }}" method="get">
<input type="text" name="search-term">
<input type="submit" value="Search">
</form>
As specified, search form is submited to CharactersController and its search method.
Controller's method
public function search()
{
$name = Inpute::get('search-term');
$searchResult = Character::where('name', '=', $name)->get();
....
}
Register new route
Route::get('characters/search', 'CharactersController#search');