I am evaluating the new Microsoft fast.design https://www.fast.design/ with fluent-design-system-provider and trying to customize the accent color for Blazor project but no luck...
This is what I did so far as per the official documentation (https://www.fast.design/docs/design-systems/fast-frame):
In my asp.net core Blazor Server Project's _Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title </title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="Test.Main.styles.css" rel="stylesheet" />
</head>
<body>
<fluent-design-system-provider use-defaults>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">π</a>
</div>
</fluent-design-system-provider>
<script src="_framework/blazor.server.js"></script>
<script type="module" src="https://unpkg.com/##microsoft/fast-components"></script>
<script type="module" src="https://unpkg.com/##fluentui/web-components"></script>
<script type="module" src="~/script/site.js"></script>
</body>
</html>
After this in my site.js I am trying to generate and replace the color pallete as mentioned in the documentation https://www.fast.design/docs/design-systems/fast-frame#generating-and-replacing-palettes
import { parseColorHexRGB } from "#microsoft/fast-colors";
import { createColorPalette } from "#microsoft/fast-components";
// Initialization
(function () {
const palette = createColorPalette(parseColorHexRGB("#28EBD7"));
const provider = document.querySelector("fluent-design-system-provider");
// change the neutral color pallete
provider.neutralPalette = palette;
})();
I get the following error,
Uncaught TypeError: Failed to resolve module specifier "#microsoft/fast-colors". Relative references must start with either "/", "./", or "../".
How do i resolve this ?
As far as I know, the import is used in the client application (such as Angular, Teactjs), instead of Asp.net Core Blazor. If you are create a Client application, you could check the Fast Integrations.
To integrate Fast with Asp.net Core Blazor, after installing the Fast using the following command:
npm install --save #microsoft/fast-components
You can locate the single file script build in the following location:
node_modules/#microsoft/fast-components/dist/fast-components.min.js
Copy this to your wwwroot/script folder and reference it with a script tag as described above. Code in the Razor page like this:
<script type="module" src="script/fast-components.min.js"></script>
More detail information, see Fast Integrations for Asp.net Core Blazor.
I missed to add the complete path to the fluent components js files, referencing the correct path works well!
import { neutralLayerL1Behavior, parseColorString } from "https://unpkg.com/#fluentui/web-components";
import { createColorPalette } from "https://unpkg.com/#microsoft/fast-components";
export function initDesignSystemProvider() {
const designSystemProvider = document.querySelector("fluent-design-system-provider");
var accentBaseColor = "#204320";
const accentPalette = createColorPalette(parseColorString(accentBaseColor));
designSystemProvider.accentBaseColor = accentBaseColor;
designSystemProvider.accentPalette = accentPalette;
}
Related
I am pretty new to Vue.js.
I am trying to build a project without cli.
I've tried to add the CDN into the index.html.
and create a app.js file , add it to index.html and it works well.
Then I watch some youtube and tutorial, the idea of component kicks in and I am trying to add the Single-File Components into the project.
But I do not know how to structure the files so that it could work with the components.
Here are what I've got so far , could someone please tell me what's wrong hereοΌ
Any suggestions would be appreciated.
Many Thanks.
Oren
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>new Vue project</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
App.vue
<template>
<div class="container">
<Header />
</div>
</template>
<script>
import Header from './src/components/Header'
export default {
name:'App',
components:{
Header,
},
data(){
return{
test:'oren testing'
}
}
}
</script>
SFCs require a build step and is recomended
When using standard Vue without a build step and mounting to in-DOM templates, it is much less optimal because:
We have to ship the Vue template compiler to the browser (13kb extra size)
The compiler will have to retrieve the template string from already instantiated DOM
The compiler then compiles the string into a JavaScript render function
Vue then replaces existing DOM templates with new DOM generated from the render function.
If you still don't want a build step, take a look at petite-vue
I'm trying to get a basic VueJS application working using the code
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue#3"></script>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
import MyComponent from './my-component.js'
createApp(MyComponent).mount('#app')
</script>
</body>
</html>
But all I see is the error of 'Error resolving module specifier βvueβ. Relative module specifiers must start with β./β, β../β or β/β.' when I browse to localhost:3000 on Firefox. I've been at this for hours but I can't figure out why it doesn't work when I've copied it from the VueJS page 'getting started'. I've used the commands 'npm run dev', 'npx serve' and 'npm run build' but they all return the same error in the web developer tools' console.
Any help or guidance on this would be appreciated.
It seems that you are using the global build of Vue where all APIs are exposed under the global Vue variable (line 4 in your example).
Solution 1
Remove the import line for vue and prepend createApp with "Vue.":
//REMOVED: import { createApp } from 'vue'
import MyComponent from './my-component.js'
Vue.createApp(MyComponent).mount('#app') //NOTE that "Vue." has been added
Solution 2
Another solution would be to add an importmap block. That way, you can refer to vue as specified in the importmap and the corresponding url is resolved from there. Unfortunately, this is (at the moment) only supported by Chromium-based browsers. Luckily, a shim is available to allow use of importmap on non-Chromium browsers.
See below for an example, where the shim is injected above the importmap-block. Note that the script-line for loading vue has been removed from the header-block.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<script async src="https://ga.jspm.io/npm:es-module-shims#1.4.6/dist/es-module-shims.js"></script>
<script type="importmap">
{ "imports": { "vue": "https://unpkg.com/vue#3/dist/vue.esm-browser.js" } }
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'vue' createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app')
</script>
</body>
</html>
I was trying to convert the basic viewer example code into a simple vue.js viewer app. When I try to run `npm run serve'(vue-cli).Things are getting rendered correctly and I am getting all the console logs in the console.
But even before the script getting executed the eslint-loader is showing Autodesk is not defined error. But I can see the viewer loaded the document in the background.I will attach a screenshot of it here.
Can someone correct me with the code for creating a basic viewer as a simple vue.js app?
/public/index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- Autodesk Forge Viewer files -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
/src/App.vue
<div id="forgeViewer"></div>
</template>
<script>
export default {
mounted(){
var viewer;
var options = {
env: 'AutodeskProduction',
api: 'derivativeV2', // for models uploaded to EMEA change this option to 'derivativeV2_EU'
getAccessToken: function(onTokenReady) {
var token = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJzY29wZSI6WyJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OnJlYWQiLCJkYXRhOnJlYWQiLCJkYXRhOndyaXRlIl0sImNsaWVudF9pZCI6Ikp2Vk40bzdBQ0V0ZE81TVpnZ21QMk9WM1RoNFJnRW54IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoiMXBQcVhxOFBZVVU0WmtpTURsaGpUSUxCM3I1UEpBWk9kbTY4dTY2R1ZjajhDY3VzYjB3VFVId0E3emZPVk5JRCIsImV4cCI6MTU4ODIzNDEwOX0.zmY_BFmoZgL4TbtSVyTWKlrFdImEKbQTUsfQxBjsPV4';
var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
}
};
Autodesk.Viewing.Initializer(options, function() {
var htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
});
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
}
},
methods:{
onDocumentLoadSuccess:function(viewerDocument){
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{
})
},
onDocumentLoadFailure:function(){
console.error('Failed fetching Forge manifest');
}
}
}
</script>
<style>
</style>
You have to fix your Eslint errors one by one.
1.- Declare autodesk as a global in .eslintrc
"globals": {
"Autodesk": true
}
2.- Declare viewer
const viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
3.- Remove event listeners if not being used or just console.log(event)
Alternatively you can disable eslint but I'd never recommend that.
check out these working samples here:
https://github.com/dukedhx/forge-tools-hub/blob/master/components/Viewer.vue
https://github.com/alvpickmans/forge-vuer
In the main.js you can add:
Vue.prototype.$Autodesk = window.Autodesk;
And use it in the vue components like below:
this.$Autodesk
I am attempting to implement paging in my simple ASP.NET Core 2.2 application.
I executed the command Install-Package NonFactors.Grid.Mvc6 to install the package and followed all the installation steps described in this page.
I can see the data displayed in grid but when I click to show the next records the paging in not moving to show the other records.
I am missing any scripts?
I made the test followed the tutorial that you provided , but it worked well. Make sure your styles and scripts are saved as follows:
Then include grid styling sheet and grid scripts to _Layout.cshtml like below:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/Content/MvcGrid/mvc-grid.css" rel="stylesheet">
</environment>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/MvcGrid/mvc-grid.js"></script>
<script>
[].forEach.call(document.getElementsByClassName('mvc-grid'), function (element) {
new MvcGrid(element);
});
</script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
what seems to be wrong here i dont get any error but at the same time no progress in routing. .
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
</head>
<body ng-app="myApp">
<h1> this is index.html </h1>
<div ng-view></div>
</body>
</html>
mainpage.js // where my controller is
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/home', {
templateUrl : 'homepage.html'
})
.otherwise({
templateUrl : 'index.html'
});
});
when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console
The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template
I think problem is with your javascript file name. In index you mentioned mainpage.js and in description its homepage.js.
Edit : Okay. Then try arranging files list like
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
As mentioned in the answer by user Priyanka, the filename can be the issue. But that should produce an error on the console and according to you there was no error on the console.
The other possible reason can be the sequence in which you've imported your files. I generally sequence my files this way -
<head>
<!-- 1. External CSS Libraries likes bootstrap, jquery -->
<!-- 2. My Application specific CSS files -->
<!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
<!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>
Again the sequence in which you import the external JS libraries may also cause problems.