Oracle-jet with typescript web component - javascript

I have created application with typescript run:
ojet create web-app-navbar --template=navbar --typescript
then I have creatd web component run:
ojet create components demo-card --typescript
ojet cli has created demo-card component successfully.
I want to add demo-card component to about page and I have add html tag:
// IT IS about.ts
class AboutViewModel {
constructor() {
}
/**
* Optional ViewModel method invoked after the View is inserted into the
* document DOM. The application can put logic that requires the DOM being
* attached here.
* This method might be called multiple times - after the View is created
* and inserted into the DOM and after the View is reconnected
* after being disconnected.
*/
connected(): void {
// implement if needed
}
/**
* Optional ViewModel method invoked after the View is disconnected from the DOM.
*/
disconnected(): void {
// implement if needed
}
/**
* Optional ViewModel method invoked after transition to the new View is complete.
* That includes any possible animation between the old and the new View.
*/
transitionCompleted(): void {
// implement if needed
}
}
export default AboutViewModel;
<!--
Copyright (c) 2014, 2020, Oracle and/or its affiliates.
The Universal Permissive License (UPL), Version 1.0
-->
<!-- IT IS about.html view -->
<div class="oj-hybrid-padding">
<h1>About Content Area</h1>
<div>
To change the content of this section, you will make edits to the about.html file located in the /js/views folder.
</div>
<deno-card></deno-card>
</div>
but it don't displayed on the page.
How can I add this component to my application?

Add import 'demo-card/loader' to about.ts
When using the ojet cli a path to the component is automatically set up for you.
You need to add import 'demo-card/loader' to automatically resolve the correct path for the transpiled component.

Related

Why does fullcalendar give the error that it does not provide an export called 'default'?

I am trying to use the fullcalenar library through stimulusjs to display the calendar in a rails app, without a webpacker.
To start I just want to show the calendar, without complexity, as in the documentation, and the controller I am trying to do looks like this:
import FullCalendar from 'https://cdn.jsdelivr.net/npm/#fullcalendar/core#5.10.0/main.global.min.js'
export default class extends Controller {
static targets = ["calendar"]
connect() {
this.init()
}
init() {
this.calendar = new FullCalendar.Calendar(this.calendarTarget, {
initialView: 'dayGridMonth',
})
this.calendar.render()
}
}
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.10.0/main.min.css" rel="stylesheet" />
<div data-controller="fullcalendar">
<div data-target="calendar"></div>
</div>
the error that it throws and that I do not understand is the following:
Failed to autoload controller: fullcalendar SyntaxError: The requested module 'blob:http://localhost:3000/1c3e6673-aecc-4144-b5d6-471fb03b5e0f' does not provide an export named 'default'
FullCalendar has two primary installation methods. You're using the one from this documentation page, which does not export ES6 modules. It's more like the old (pre-Gulp/Webpack) way of importing global variables.
If you want to import inside your Stimulus controllers, you'll either need to use Webpack or something importmaps, just like the other FullCalendar installation page says.
If you want something basic, I'd recommend importmaps (https://github.com/rails/importmap-rails). It requires very little configuration compared to Webpack, and will allow what you're trying to do.

VueJs 3 - Use bundled sfc combined with Client Side Rendering

Greetings
Hello fellow Vuers!
So I've got the following situation:
I use ASP.Net Core 3.1 as my server and I would like to use the Vue SFC setup including Typescript support and bind the resulting components into my .cshtml.
Example Usage
Example.vue
<template>
<label :for="name">{{ content }}</label>
<input :id="name" :placeholder="content"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
someCode
}),
</script>
<style scoped>
/*some styling*/
</style>
Index.cshtml.cs
public class IndexModel: PageModel{
public string Name { get; set; }
public string Content { get; set; }
}
Index.cshtml
#page
#model Namespace.To.IndexModel
<example :name="#Model.Name" :content="#Model.Content" />
The Question
Is there a way to bundle the Single File Components and then use the Components as needed inside of a .(cs)html?
Preferably I'd like to have each component inside of it's own .js file to load them on demand, but it's not a must have.
Thanks in advance
It is possible. But to clarify, it seems like you want to use the components individually. That means that what you're calling a SFC/component, will need to be treated as its own Vue app.
Assuming that's the case, instead of making the components bundled separately you'll need to create a vue app for each one, and individually export them.
You will need to decide how/when to mount them. I've relied on a more manual way of mounting, which requires a line of js to link the DOM element with the widget and pass the attributes. Alternatively you can rely on the DOM tag only. Admittedly, the js way is a bit more verbose, but less prone to edge cases.
Here is the example for the js way
components/example/index.js:
import Example from './Example.vue';
export const mountExample = (el, props) =>
Vue.createApp(el, props);
Then will wrap the component in a function that allows you to pass the DOM element to use and the props.
You would need
<script src="vue.js"/><!-- if it's not bundled in there -->
<script src="example.js"/>
<div id="example" />
<script>
mountExample('#example', {name:"#Model.Name", content="#Model.Content});
</script>
The other way (without the js instantiation) would be to wrap it in a function (IIFE) that looks for <example> tags, parses the content and then mounts the app with the provided parameters. It's quite a bit more work than the other example, but shouldn't be terribly complex.
So for the Example example, I'd organize it something like this: example
/components/example/
|-- Example.vue
|-- index.js
and then use webpack chaining via vue.config.js to do multiple of these
module.exports = {
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: config => {
// remove the standard entry point
config.entryPoints.delete('app')
// then add your own
config.entry('example')
.add('./src/components/example/index.js')
.end()
.entry('menu')
.add('./src/components/menu/index.js')
.end()
}
}
A caveat; I've used rollup to generate these and I haven't tested this, but webpack should work too
resources for the webpack config:
https://cli.vuejs.org/guide/webpack.html#simple-configuration
https://github.com/neutrinojs/webpack-chain

How to document a Module that Exports an Instance of a Class with JSDoc

I'm working on a Javascript project where the default export (i.e. what you get when you require the module) is an instance of a class that extends a class.
For example:
/**
* #module my-module-name
*/
/**
* Private so documentation doesn't mention DefaultRouter
* #private
*/
class DefaultRouter extends Router {
/**
* Extra method docs
*/
extreMethod() {}
}
export default new DefaultRouter();
The documentation for this (ideally) would include the Router class (as that's available to developers) and show the API surface for the module as including docs for the extended class Router as well as the extraMethod.
I can get extraMethod docs showing up by using #alias module:my-module-name.extraMethod but I can't find a clean way to expose the Router methods.
How can I do this in a simpler way, e.g. with some # tag?
After playing around a little, I found the #borrows tag that seems to work how I wanted it to.
/**
* #module my-module-name
* #borrows module:my-module-name.Router#methodName as methodName
*/

Vaadin7 jQuery UI integration

Vaadin 7 supports custom javascript. But my question is if we want to integrate jQuery-ui with vaadin7, how can we add jQuery-ui css files. At the moment #Javascript supports adding javascript only. If we wanna add css, we have add that as sass style.
To add jQuery (or any other javascript library) to a Vaadin 7 application, follow these easy steps:
First Create a Vaadin project either using your favorite IDE or the vaadin maven archetype (or both). Create a new class that extends from VaadinServlet, and override the servletInitialized method:
import javax.servlet.ServletException;
import com.vaadin.server.BootstrapFragmentResponse;
import com.vaadin.server.BootstrapListener;
import com.vaadin.server.BootstrapPageResponse;
import com.vaadin.server.ServiceException;
import com.vaadin.server.SessionInitEvent;
import com.vaadin.server.SessionInitListener;
import com.vaadin.server.VaadinServlet;
public class TestJqueryVaadinServlet extends VaadinServlet {
#Override
protected void servletInitialized() throws ServletException {
super.servletInitialized();
getService().addSessionInitListener(new SessionInitListener() {
#Override
public void sessionInit(SessionInitEvent event) throws ServiceException {
event.getSession().addBootstrapListener(new BootstrapListener() {
#Override
public void modifyBootstrapPage(BootstrapPageResponse response) {
// With this code, Vaadin servlet will add the line:
//
// <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
//
// as the first line inside the document's head tag in the generated html document
response.getDocument().head().prependElement("script").attr("type", "text/javascript").attr("src", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
}
#Override
public void modifyBootstrapFragment(BootstrapFragmentResponse response) {}
});
}
});
}
}
Then add the reference to the servlet in your web.xml or annotate the class with the #WebServlet annotation.
And then Create your jQuery snippet and invoke it using the JavaScript class, for example:
public class MyVaadinUI extends UI {
#Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
Label label = new Label("This will fade-out once you click the button");
Button button = new Button("Hide Label");
button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
JavaScript.getCurrent().execute("$('.v-label').animate({opacity: 0.0}, 3000);");
}
});
layout.addComponent(label);
layout.addComponent(button);
}
}
Including style sheets or JavaScript files in your add-ons or as a part of your application can now be done by adding a #StyleSheet or #JavaScript annotation to a Component or Extension class. Each annotation takes a list of strings with URLs to the resources that should be loaded on the page before the framework initializes the client-side Component or Extension.
The URLs can either be complete absolute urls (e.g."https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js") or relative URLs (e.g. "redbutton.css"). A relative URL is converted to a special URL that will download the file from the Java package where the defining class is located. This means that e.g. #StyleSheet({"redbutton.css"}) on the class com.example.RedButton will cause the file com/example/redbutton.css on the classpath to be loaded in the browser. #JavaScript works in exactly the same way
#!java
#StyleSheet("redbutton.css")
public class RedButton extends NativeButton {
public RedButton(String caption) {
super(caption);
addStyleName("redButton");
}
}
In this simple example, the RedButton component just adds a
redButton
style name to a normal
NativeButton
. redbutton.css is located in the same folder as RedButton.java and has this content:
#!css
.redButton {
background-color: red;
}
This new mechanism makes it very easy to include style sheet or JavaScript files with add-ons and automatically load them in the browser when the add-on is used.
Second and my favorite way:
you can also use the #Stylesheet and #Javascript annotations. its much simpler.
#StyleSheet({
/*
* JQuery UI
*/
"vaadin://jquery/jquery-ui-1.9.2.custom/css/ui-darkness/jquery-ui-1.9.2.custom.min.css",
})
#JavaScript({
/*
* JQuery
*/
"vaadin://jquery/jquery-1.11.1.min.js",
/*
* JQuery UI
*/
"vaadin://jquery/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js",
})
public class MyUI extends UI {
...
}

How to add css and js files on node pages independent of the theme?

I am using display suite to display a full node of type 'Article'. I want to add some css and js on the page containing the article node, though the adding of these can't be dependent on the themeing. So I cannot use the template.php file
How would I be able to do this ?
Create a new module and put it in: /sites/all/modules/custom
The module structure and files would look like this:
ahelper/
ahelper/css/article_node.css
ahelper/js/article_node.js
ahelper/ahelper.info
ahelper/ahelper.module
ahelper/ahelper.info
core = "7.x"
name = "Article Helper"
project = "ahelper"
version = "7.x-1.0"
ahelper/ahelper.module
<?php
/**
* Implements hook_node_view()
*/
function ahelper_node_view($node, $view_mode, $langcode) {
// if node is an article, and we're looking at a full page view
if ($node->type == 'article' && $view_mode == 'full') {
// then add this javascript file
drupal_add_js(drupal_get_path('module', 'ahelper') .'/js/article_node.js');
// and add this css file
drupal_add_css(drupal_get_path('module', 'ahelper') .'/css/article_node.css');
}
}
Then just enable the module. You can play around with the node_view hook.
Create a custom module and include your js and css files using the functions drupal_add_js and drupal_add_css. You can call them either in your custom module's hook_init or hook_nodeapi (or Node Api Hooks in Drupal 7) depending on how you want to include your files. These functions get called regardless of what theme your using.
References:
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_js
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_css

Categories

Resources