Is possible to have a component inside another component in nativescript vue?
Like relation father-son
Like this:
<Frame ~mainContent>
<Page>
<ActionBar title="Initial Page" style="color:white">
<NavigationButton icon="res://menu" #tap="openMenu"></NavigationButton>
</ActionBar>
<StackLayout>
<son-component></son-component>
</StackLayout>
</Page>
</Frame>
This should do it. You need to register Son Component
<Frame ~mainContent>
<Page>
<ActionBar title="Initial Page" style="color:white">
<NavigationButton icon="res://menu" #tap="openMenu"></NavigationButton>
</ActionBar>
<StackLayout>
<Son></Son>
</StackLayout>
</Page>
</Frame>
<script >
import Son from "./son-component";
export default {
components: {
Son,
},
props: {
},
data() {
}
}
</script>
Related
I am trying to get the object on itemTap in a ListView. I want to be able to have access to the name and age of the object. But I can't figure out how to do this in the onItemTap function
data
listOfItems: [{name: "Tom", age: 55}, {name:"Greg", age: 32}]
template
<ListView for="item in listOfItems" #itemTap="onItemTap($event)">
<v-template>
<Label :text="item.text" />
</v-template>
</ListView>
methods
onItemTap: function(args) {
???
}
See the docs
Template
<ListView for="item in listOfItems" #itemTap="onItemTap">
<v-template>
<!-- Shows the list item label in the default color and style. -->
<Label :text="item.text" />
</v-template>
</ListView>
Methods
onItemTap(event) {
console.log(event.index)
console.log(event.item)
}
I am getting an error while using ReorderHandle in reorderMode="Drag" in RadListView component of nativescript-ui-listview/vue like
[Vue warn]: Unknown custom element: <ReorderHandle> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
How can I use ReorderHandle in Nativescript-vue according to this doc link?
Any help on this functionality will be appreciated.
Here are my codes
main.js
import Vue from 'nativescript-vue'
import RadListView from 'nativescript-ui-listview/vue';
Vue.use(RadListView);
My Vue Component
<RadListView ref="listView" for="(manager, index) in managers" :itemReorder="true" reorderMode="Drag">
<v-template>
<Label>{{ manager.name }}</Label>
<ReorderHandle col="1" verticalAlignment="center">
<Image android:src="res://reorder_icon" ios:src="res://reorder-icon" stretch="none" verticalAlignment="stretch" margin="16" />
</ReorderHandle>
</v-template>
</RadListView>
There is an Vue example of that.
Like you can see in the code you don't need to add <ReorderHandle>
Example:
<template>
<RadListView ref="listView"
for="item in items"
pullToRefresh="true"
itemReorder="true"
swipeActions="true"
#itemTap="onItemTap"
#pullToRefreshInitiated="onPullToRefreshInitiated"
#itemReordered="onItemReordered"
#itemSwipeProgressStarted="onSwipeStarted">
<v-template>
<GridLayout columns="50, *" rows="*" class="item">
<Image :src="item.image" col="0" class="thumbnail" />
<StackLayout col="1">
<label :text="item.name" class="h2" col="1"/>
<label :text="item.description" class="p" col="1"/>
</StackLayout>
</GridLayout>
</v-template>
<v-template name="itemswipe">
<GridLayout columns="auto, *, auto" backgroundColor="White">
<StackLayout id="mark-view" col="0" class="swipe-item left"
orientation="horizontal" #tap="onLeftSwipeClick">
<Label text="mark" verticalAlignment="center" horizontalAlignment="center"/>
</StackLayout>
<StackLayout id="delete-view" col="2" class="swipe-item right"
orientation="horizontal" #tap="onRightSwipeClick">
<Label text="delete" verticalAlignment="center" horizontalAlignment="center" />
</StackLayout>
</GridLayout>
</v-template>
</RadListView>
</template>
More details can be found here.
I have this svg
<svg viewBox="0 0 462 40" height="40" width="462" id="lol-text-1" class="lol-text__svg">
<desc>Created with Snap</desc>
<defs>
<linearGradient x1="0" y1="0.3" x2="0" y2="0.8" id="Sikjr46ql1nr">
<stop offset="0%" stop-color="#cbac62"/>
<stop offset="100%" stop-color="#66481f"/>
</linearGradient>
<mask id="Sikjr46ql1nz">
<text x="0" y="35" class="lol-text__mask" style="" fill="#ffffff">Pentakill</text>
</mask>
</defs>
<g style="" mask="url('#Sikjr46ql1nz')">
<text x="0" y="35" class="lol-text__shadow" style="" fill="#ad986a">Pentakill</text>
<text x="1" y="36" class="lol-text__text" style="" fill="url('#Sikjr46ql1nr')">Pentakill</text>
</g>
As it says in the svg code, it was created with snap.
Here is the html tag used to generate the svg:
<span class="lol-text" style="display: none;">Pentakill</span>
I asume that the style="display: none;" was inserted after the svg was generated.
What i need is an example on how do i generate the same svg from an html tag using snap.svg or svg.js
Thank you!
Snap.svg will help you generate graphics, but it can also work with existing SVG. This means that your SVG content does not necessarily have to be created with Snap.svg, you're also free to manipulate graphics created with tools like Adobe Illustrator, Inkscape, or Sketch.
Here are some examples, which you can also find on the Demo section of their website.
<html>
<head>
<meta charset="utf-8" />
<title>Sample snapsvg</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
var snap = Snap(912,912);
var headline = snap.paper.text(56,100, ['The Three Layers','of','Every Web Page']).attr({fill: '#FBAF3F', fontFamily: 'Impact'});
}
</body>
</html>
here you can see the output
UPDATE
if you want to know more about it with example.
http://www.sitepoint.com/create-infographic-using-snap-svg/
I have searched a lot to find what I wanted and I found exactly what I was looking for.
Here is the code and an example: text gradient generated with snap.svg
I have a SAPUI5 splitapp with a detail page. This detail page contains a list with ObjectListItems. I want to listen to a press/selection of this item, but I always have to press two times to an element, else the event does not get triggered.
Does anybody know what is the reason?
Thanks and best regards
Detail XML
<Page
id="myJobsPage"
title="{i18n>myJobsTitle}">
<List
id="myJobsMasterList"
inset="false"
items="{testkunden}">
<ObjectListItem
id="myJobsListItem"
visible="true"
title="{job}"
number="{offen}"
numberUnit="Euro"
press="onMyJobsListItem"
type="Active">
<!-- visible part -->
<ObjectAttribute
id="Gpart123"
text="Partner: {gpart}"
visible="true" />
<ObjectAttribute
id="Anrede123"
text="{anrede}"
visible="true" />
<ObjectAttribute
id="Name123"
text="{vorname} {nachname}"
visible="true" />
<ObjectAttribute
id="Strasse123"
text="{strasse} {hausnr}"
visible="true" />
</ObjectListItem>
<!-- <ObjectStatus text="{i18n>myJobsObjectStatus}" /> -->
</List>
</Page>
</mvc:View>
Controller
onMyJobsListItem: function(event){
console.log("only triggers if click twice");
};
UPDATE:
Splitapp Root View
<mvc:View
controllerName="mobile.splitapp.controller.App"
displayBlock="true"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" >
<App id="app">
<SplitApp id="splitapp" >
<masterPages>
<mvc:XMLView viewName="mobile.splitapp.view.Master" id="master1" />
</masterPages>
<detailPages>
<mvc:XMLView viewName="mobile.splitapp.view.MyJobs" id="myJobsPage" />
<mvc:XMLView viewName="mobile.splitapp.view.DisconnectionOrder" id="disconnectionOrderPage" />
</detailPages>
</SplitApp>
</App>
</mvc:View>
Here is a running example of your code (see below of jsbin, and the updated jsbin) and it runs just fine! Since you did not post your "surrounding" code I cannot tell what's wrong. But as you can see in the example below the event is triggered directly after the first press...
Cann you see a difference to your code?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SAPUI5 single file template | nabisoft</title>
<script src="https://openui5beta.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"></script>
<!-- use "sync" or change the code below if you have issues -->
<!-- XMLView -->
<script id="myXmlView" type="ui5/xmlview">
<mvc:View
controllerName="MyController"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<App>
<SplitApp>
<masterPages>
<Page
id="myJobsPage"
title="Master Page">
<List
id="myJobsMasterList"
inset="false"
items="{/Customers}">
<ObjectListItem
id="myJobsListItem"
visible="true"
title="{CompanyName}"
number="{offen}"
numberUnit="Euro"
press="onMyJobsListItem"
type="Active"/>
</List>
</Page>
</masterPages>
<detailPages>
<Page
title="Detail Page">
<List
inset="false"
items="{/Customers}">
<ObjectListItem
visible="true"
title="{CompanyName}"
number="{offen}"
numberUnit="Euro"
press="onMyJobsListItem"
type="Active"/>
</List>
</Page>
</detailPages>
</SplitApp>
</App>
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
"use strict";
//### Controller ###
sap.ui.controller("MyController", {
onInit : function () {
this.getView().setModel(
new sap.ui.model.odata.v2.ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", {
json : true,
useBatch : false
})
);
},
onMyJobsListItem: function(event){
alert("press");
}
});
//### THE APP: place the XMLView somewhere into DOM ###
sap.ui.xmlview({
viewContent : jQuery("#myXmlView").html()
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
I am new to Apache tiles, trying to configure it in spring 4. But the templates, i am extending is not visible in my jsp page.For ex: If i am hitting url "/admin", then content of admin.jsp is visible, nothing else.
blow is the code snippet.
application-context.xml
<beans:bean id="viewResolver"
class="org.springframework.web.servlet.view.tiles3.TilesViewResolver" />
<beans:bean id="tilesConfigurer"
class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
<beans:property name="definitions">
<beans:list>
<beans:value>/WEB-INF/layouts/views.xml</beans:value>
</beans:list>
</beans:property>
</beans:bean>
views.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<definition name="DefaultTemplate"
template="/WEB-INF/views/template/SiteTemplate.jsp">
<put-attribute name="title" value="Home" />
<put-attribute name="header" value="/WEB-INF/views/template/header.jsp" />
<put-attribute name="body" value="This is body" />
<put-attribute name="footer" value="/WEB-INF/views/template/footer.jsp" />
</definition>
<definition name="admin" extends="DefaultTemplate">
<put-attribute name="body"
value="/WEB-INF/views/admin.jsp" />
</definition>
</tiles-definitions>
SiteTemplate.jsp
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>DCAT</title>
</head>
<body>
<div>
<!-- Header -->
<tiles:insertAttribute name="header" />
<!-- Body Page -->
<div>
<tiles:insertAttribute name="body" />
</div>
<!-- Footer Page -->
<tiles:insertAttribute name="footer" />
</div>
</body>
</html>
Footer.jsp
<div>
<h2>Footer</h2>
</div>
Header.jsp
<div>
<h2>Header</h2>
</div>
admin.jsp
<div style="margin:10px;">
<h3>SpringMVC - Tiles3 Integration</h3>
<p>By:- Thita Nayak</p>
</div>
Admin controller
#Controller
public class AdminController {
private static final Logger logger = LoggerFactory.getLogger(AdminController.class);
#RequestMapping(value = "/admin", method = RequestMethod.GET)
public String admin(){
return "admin";
}
}
I cannot see anything wrong with your code
The problem might be in the namespace declaration
Try to change beans:bean to beans if your namespace is as follow
<beans xmlns="http://www.springframework.org/schema/beans" ...