Replies: 4 comments 4 replies
-
|
The steps I followed were:
the Default.razor component below for reference: and the ThemeInfo.cs: This was a very quick integration. If I had more time I would either include a ThemeSetting component or add additional Panes so that the hardcoded content would be editable and dynamic (ie. the Hero section and Footer). Also note that this theme would not function on Interactive render mode, as the |
Beta Was this translation helpful? Give feedback.
-
|
After more testing with the Arsha theme I realized that in order for a theme to be able to support both Static and Interactive render modes it was necessary to include an additional property on the Resource class for RenderMode. This allows a theme to include |
Beta Was this translation helpful? Give feedback.
-
|
Hi @sbwalker |
Beta Was this translation helpful? Give feedback.
-
|
there is not a Git repo for this - I created an example project to test the 8.1 release |
Beta Was this translation helpful? Give feedback.
-
|
Okay |
Beta Was this translation helpful? Give feedback.
-
|
Perhaps I was overly optimistic... this thread seems to indicate that including scripts within components does not work well with enhanced navigation: "Using enhanced navigation requires a different approach when it comes down to dealing with scripts. The main reason being that without enhanced navigation, all the state is cleared on each navigation, while with it, the state on the page is "preserved". That means that scripts that modify global state or depend on the page loading to perform an action need to be adjusted to account for the fact that with enhanced nav, those two things don't work in the same way." Basically this means that as users navigate between different pages in your Blazor app, you will encounter issues with any JavaScript which is expected to execute on every page. This is due to enhanced navigation which uses the browsers fetch API to retrieve a new page, then patches the DOM with the parts of the page that have changed. This avoids performing full page loads every time you navigate between pages (especially useful if only a small part of the UI has actually changed) - however it is not compatible with traditional JavaScript usage. |
Beta Was this translation helpful? Give feedback.
-
|
I found a solution which works... it is based on this sample project from Mackinnon Buck who is a member of the Blazor team at Microsoft: https://github.com/MackinnonBuck/blazor-page-script Blazor has a concept known as "JavaScript Initializers" (https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-8.0). They allow you to execute logic before and after a Blazor app loads. I added a JavaScript Initializer to the wwwroot named Oqtane.Server.lib.module.js (as this is the required naming convention). The initializer contains the JavaScript code from the blazor-page-script repo above. Essentially the script registers a custom HTML element called "page-script" which accepts a single parameter of "src". The purpose of the page-script element is to trigger events when a user navigates your application. The most critical event when running on Static Blazor using Enhanced Navigation (the default) is the "onUpdate" event. This event is called on every page transition and basically replaces the traditional role of the JavaScript "onload" event. A new property was added to the Oqtane Resource class called Reload. It defaults to False but when it is set to True it instructs the framework to inject the script into the page using the page-script custom element rather than a traditional script element. You would only use this new property for JavaScript files which need to be reloaded on every page transition. For the Bootstrap theme I used as an example, I moved all of the script resources to the ThemeInfo.cs and declared them as Resources: You will notice that the last script in the list, main.js, uses the new Reload = true property. This script file had to be modified to conform to the pattern required by the page-script element. It needed to implement the onUpdate event, and any references to window.addEventListener('load', xxx) needed to be removed (as "onload" is not triggered for page transitions). Once these changes were made, the JavaScript works as expected even as you navigate to different page in the site... and all animations, etc... work perfectly. |
Beta Was this translation helpful? Give feedback.
-
|
@sbwalker, after making this change, did the preloader work? |
Beta Was this translation helpful? Give feedback.
-
One of the items which has traditionally been challenging with Blazor is how to deal with JavaScript.
In Interactive Blazor you needed to use JS Interop which meant creating C# wrappers for any JavaScript library or script you wanted to utilize, resulting in a more challenging integration story. In Static Blazor, JavaScript becomes a first-class citizen once again, which means you can include standard script references directly in your components, and they will function as expected.
This is a huge benefit for developers... but its a game changer for designers, as it now means that you can download or purchase any of the thousands of popular Bootstrap templates which are available online, and quickly integrate them into Oqtane.
Bootstrap templates are comprised of HTML, CSS, and JavaScript... and although it was fairly easy to integrate the HTML and CSS previously, the JavaScript libraries were a challenge. Now you can simply reference the JavaScript libraries in your theme's razor components using standard
<script />tags and bundle the resources with your theme.I downloaded a Bootstrap theme today (https://bootstrapmade.com/demo/Arsha/) and created an Oqtane theme in ~2 hours which 100% replicates its content and behaviors (ie,. animations, etc...).
Beta Was this translation helpful? Give feedback.
All reactions