Is it missing in all tutorials of media-overlay or am i missing that ?
To make MediaOverlay, all tutorial say that we should:
in xhtml wich contain the texte;
<header><h1><span class="audio" id="c001s0000">Chapter 1. Loomings.</span></h1></header>
<p>
<span class="audio" id="c001s0001">Call me Ishmael.</span>
<span class="audio" id="c001s0002">Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</span>
...
in associated .smil;
<seq id="id1" epub:textref="chapter_001.xhtml" epub:type="bodymatter chapter">
<par id="sentence0">
<text src="chapter_001.xhtml#c001s0000"/>
<audio src="audio/mobydick_001_002_melville.mp4" clipBegin="0:00:21" clipEnd="0:00:28"/>
</par>
<par id="sentence1">
<text src="chapter_001.xhtml#c001s0001"/>
<audio src="audio/mobydick_001_002_melville.mp4" clipBegin="0:00:28" clipEnd="0:00:30"/>
</par>
<par id="sentence2">
<text src="chapter_001.xhtml#c001s0002"/>
<audio src="audio/mobydick_001_002_melville.mp4" clipBegin="0:00:30" clipEnd="0:00:44"/>
</par>
the audio(.mp4) is saved where it should be. (audio/mobydick_001_002_melville.mp4)
4/ association between .xhtml and .smil is done in opf file, section :
<item id="xchapter_001" href="chapter_001.xhtml" media-type="application/xhtml+xml" media-overlay="chapter_001_overlay"/>
<item id="chapter_001_overlay" href="chapter_001_overlay.smil" media-type="application/smil+xml"/>
<item id="xchapter_002" href="chapter_002.xhtml" media-type="application/xhtml+xml" media-overlay="chapter_002_overlay"/>
<item id="chapter_002_overlay" href="chapter_002_overlay.smil" media-type="application/smil+xml"/>
ok, we are done of all that, but the question is how to play media overlay? how to start audio file and highlight the text? What this button "start reading" of iBooks application do?
This is an awfully late reply, but for others to know, the "Start Reading" button will take the items sequentially from the smil file and work on them. So the very first action would be to play the audio file starting at 0:00:21 and highlight "Call me Ishmael" from the text.
Please add a Style in your css (stylesheet):
.-epub-media-overlay-active {
color: #dc4c37;
}
Related
I'm trying to make a text input area like this.
I tried this way
<v-text-field
label="Outlined"
placeholder="Placeholder"
background-color="white"
append-icon="mdi-arrow-right x-large primary"
outlined
></v-text-field>
And it give me this result.
Issues are
Icon doesn't get large enough to fill the entire text-area
Can't change the color of arrow stroke
What should I do to make this text area also receives file drag and drop?(user might want to type or sometimes drop a file to the text area
Thank you so much.
Hope someone who are well knowledgeable about vuetify could help me.
for part of your question about input design and look you should use provided slot from the v-text-field component, this way you can achieve more and here is the vuetify documentation about this: text field icon slots
and to check what other slots is available for this component check this list: all text field slots
even though using slot would achieve a lot more than prop, to fully achieve the desired result you might need to overwrite some css styles that you can find by inspecting the element in the browser dev tool to find them out.
I made the look you wanted with the approach described above in the code below:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
.v-text-field.v-text-field--enclosed .v-text-field__details,
.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
padding-right: 0 !important;
}
.v-text-field--enclosed .v-input__append-inner,
.v-text-field--enclosed .v-input__append-outer,
.v-text-field--enclosed .v-input__prepend-inner,
.v-text-field--enclosed .v-input__prepend-outer,
.v-text-field--full-width .v-input__append-inner,
.v-text-field--full-width .v-input__append-outer,
.v-text-field--full-width .v-input__prepend-inner,
.v-text-field--full-width .v-input__prepend-outer {
margin-top: 0 !important;
}
.pointer {
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-text-field label="Outlined" placeholder="Placeholder" outlined>
<template v-slot:append>
<v-sheet color="red" class="d-flex justify-center align-center rounded-r pointer" width="50" height="56">
<v-icon dark>
mdi-arrow-right
</v-icon>
</v-sheet>
</template>
</v-text-field>
</v-container>
</v-main>
</v-app>
</div>
about the drag and drop issue vuetify's v-file-input component does not natively support this behavior (for now at least) but you can read the article below to find out how to write this feature in vuetify:
Step by Step: Custom drag & drop upload component in Vuetify (Vue 2)
I'm writing here after a couple of hours of reading everything available on-line, including SAPUI5 Explored Apps, API, etcs.
I need to use Image with Maps to define and capture different clickable areas in an image.
SAPUI5 explored says there is an UseMap parameter, but don't provide enough info or example. I've tried and can't map and get the clicked location.
The API offers sap.m.ImageHelper, with one parameter to use maps. But it also lacks example or enough documentation.
Finally, I'm aware that there's some examples on-line using sap.ui.commons. But I couldn't find any example using sap.m
Anyone has a real working example of this?
Thank you!
Regards,
Douglas
The sap.m.Image useMap property simply adds a useMap property to the element. However you need to define a map element with the same name as in the useMap property along with the regions.
You could use the HTML control from the sap.ui.core library to add a HTML map element to the page.
<Image src="img/someImage.jpg"
width="200px"
useMap="regions"
>
</Image>
<core:HTML content='<map name="regions">
<area shape="rect" coords="0,0,82,126" href="link1.html" alt="Link 1">
<area shape="rect" coords="90,90, 158,103" href="link2.htm" alt="Link 2">
</map>'>
</core:HTML>
You don't necessarily have to revert to a stringified version of your map coding.
Here's how you can provide a map as the useMap parameter for a sap.m.image by referencing the html namespace (Note the declaration xmlns:html="http://www.w3.org/1999/xhtml" at the top):
<mvc:View controllerName="xy.controller.Master" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" >
<App>
<pages>
<Page title="{i18n>title}">
<content>
<Image src="img/Blume.PNG" densityAware="false" width="" useMap="Map">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Image>
<html:map name="Map" id="Map">
<html:area alt="" title="" href="www.google.de" shape="poly" coords="384,505,444,507,444,528,390,527"/>
<html:area alt="" title="" href="www.google.de" shape="poly" coords="426,582,494,583,494,636,426,632"/>
</html:map>
</content>
</Page>
</pages>
</App>
</mvc:View>
Credits: https://answers.sap.com/questions/290270/how-use-sapmimage-with-usemap-and-get-the-clicked.html
I have a table (sap.m.Table) and would like to change the header font to bold, but I'm unable to do that. Here is my code for one of the column definitions in my *.view.xml:
<Column xmlns="sap.m"
hAlign="Left"
width="17em"
>
<Text text="Vendor" />
</Column>
After looking at the API (sap.m.Text), I don't see a way to change the text style and I'm also new to UI5. Could someone point me to where to look for this?
sap.m.FormattedText
Another option is to use sap.m.FormattedText[api] with an inline tag <strong> within the htmlText value.
<Column ...>
<FormattedText htmlText="<strong>My Column</strong>" />
</Column>
Note
In XML, the character < needs to be escaped with <.
Browsers do not guarantee that the text within <strong> is always displayed in bold.
The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important. [source]
The element <b> is currently not supported by the FormattedText. On the other hand, <em> is supported to emphasize the text.
sap.m.Label
Instead of sap.m.Text, you can use sap.m.Label which supports "Bold" design.
<Column id="myColumn">
<Label labelFor="myColumn"
design="Bold"
text="..."
wrapping="true"
/>
</Column>
Additionally, enable the property wrapping (available since 1.50) in order to achieve the default behavior of sap.m.Text. Wrapping should be enabled for column headers as recommended by Fiori design guidelines:
Column Headers - Best Practices
Use controls that wrap [...]. Do not use controls that truncate.
Note: If the label is not labeling anything, please try with different controls like sap.m.FormattedText.
I found by chance that using <FormattedText> instead of <Text> creates bold headers. This works without (!) using any additional bold or strong markup in the htmlText of <FormattedText>.
So in your case you would go with:
<Column
hAlign="Left"
width="17em"
>
<FormattedText htmlText="Vendor" />
</Column>
Whether this works seems to be somewhat dependent on the SAPUI5 version and the theme in use.
It works for me on SAPUI5 1.108 with the default theme (no data-sap-ui-theme specified in index.html).
Try like in the Documentation
Create a custom CSS
Add your styleclass to the Control.
I want to place a text field in a matrix layout. Please check below code and please suggest how to check XML code errors? Every time I stuck in designing the XML code. Please suggest me how to overcome that.
<core:View
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.commons.layout"
controllerName="matrix.matrix"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="ytftfhgff">
<content>
<l:MatrixLayout layoutFixed="true" columns="4" width="600px" widths="150px,150px,150px,150px">
<l:MatrixLayoutRow>
<l:MatrixLayoutCell colSpan="4">
<Text text="Its a heading" />
</l:MatrixLayoutCell>
</l:MatrixLayoutRow>
<l:MatrixLayoutRow>
<l:MatrixLayoutCell>
<Label text="First Name"/>
</l:MatrixLayoutCell>
<l:MatrixLayoutCell>
<TextField id="axscx" width="20em"></TextField>
</l:MatrixLayoutCell>
</l:MatrixLayoutRow>
</l:MatrixLayout>
</content>
</Page>
</core:View>
Thanks in advance,
sriman.
In general the errors logged by the XMLTemplateParser to the console should be understandable enough to get a basic idea of what's going wrong. In your case it is quite simple. The default namespace is set to "sap.m", i.e. the runtime tries to load the TextField control from that library. This cannot work as sap.m does not have a TextField control.
You can either use the Input control, i.e. replace TextField with Input. Or introduce an additional namespace:
xmlns:commons="sap.ui.commons"
and define the TextField in the following way:
<commons:TextField id="axscx" width="20em"/>
I would prefer using the Input field.
I have a question about GWT UIBinder. I'd like to create a simple web-page which presents movies on my streamer. I would like to have a simple list of the movies - like on the right side of youtube.
Problem is, that program doesn't know how many movies are in my database, so I cannot just put (for example) 5 movie elements (and 2 arrows) in panel when making MoviesList.ui.xml. I would like this number to be assigned when creating list of the movies - and to scroll to left (or right) when user pressed each arrow.
Here is my list UiBinder xml:
<ui:UiBinder
...
<g:HorizontalPanel ui:field="list">
<f:LeftArrow ui:field="itemLeft" />
<f:SamplesSmall ui:field="item1" />
<f:Divider ui:field="div1" />
<f:SamplesSmall ui:field="item2" />
<f:Divider ui:field="div2" />
<f:SamplesSmall ui:field="item3" />
<f:Divider ui:field="div3" />
<f:SamplesSmall ui:field="item4" />
<f:Divider ui:field="div4" />
<f:RightArrow ui:field="itemRight" />
</g:HorizontalPanel>
</ui:UiBinder>
How should I create this file, so number of items will create on-the-fly?
best
Thanks a lot - both of you.
I found a way to do with FlexTable.
z00bs - it'a great idea, but I'd like to make movie items to slide. In that case I cannot clear container nad create new items. I'll try to find a way to implement jquery.scrollTo.js to UiBinder.
best