JQuery-Mobile Multiple Content roles - jquery-mobile

Are we allowed to have multiple content roles in a page?
The documentation suggests there should be one but doesn't explicitly say that there should only be one
I have been using the content roles to provide a logical grouping of areas of my pages.
This also provides padding and background gradients to give a nice separation of grouped elements, without the addition of my own css - we have avoided adding css where possible to allow the upgrade path to be as easy as possible
If so, is there any other role which would be better suited or should I be using standard ui- CSS rules?
.. like ui-body or can you suggest an other?
Would there be any place for a 'section' role which would do the same job?
Many thanks, Ant
originally asked here https://forum.jquery.com/topic/multiple-content-roles

Have you looked at fieldset, which I'm using quite a bit. Also gives you legend as sort-of section header
Another nice combination I'm using is JQM collapsibles with the 1140 CSS grid. The Grid allows to do rows of max 12 cells, like so:
<container>
<row>
<cell1><cell2><cell3><cell4><cell5>...<cell12>
// cells can be anything from 1-12, so 4/4/4, 2/4/4/2...
</row>
<row>
// new row
</row>
</container>
On smartphone the cells change to 100% width, so you will have:
<container>
<row>
<cell1>
<cell2>
<cell3>
<cell4>
<cell5>
...
<cell12>
</row>
</container>
I'm mixing this with collapsibles (no additional CSS needed) like so:
<container>
<collapsible-set>
<collapsible-1>
<row>
<cell><fieldest><content>
<cell><fieldest><content>
<row>
</collabsible-1>
<collapsible-2>
<row>
<cell><fieldest><content>
<cell><fieldest><content>
<row>
</collabsible-2>
...
Looks nice on Smartphone and Tablet. I'm using it for long forms mostly.

Related

Maui BazorWebView. Information Needed

I currently trying out Maui and would like to keep the Maui Shell and components as the base platform.
But I have found that the CollectionView with about 20 or 30 complex items becomes almost impossible to scroll and gets odd display issues. So I'm currently looking at doing the more complex displays in Razor. I have been using Razor on the web for a while and have had no problems showing many thousands of items. So 50 or 60 complex display items on a mobile phone should not be a problem.
What I would like to do is not host the whole application in the BlazoeWebView, but just call up a single Razor page at a time in the BlazorWebView by either changing the "HostPage" or the "RootComponents".
<BlazorWebView HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
So far I have been unable to find the correct application structure to allow this.
Any information on how to achieve this would be much appreciated.
I figured it out.
Set up an XML namespace with the path to your razor view.
Leave the HostPage at "wwwroot/index.html"
Leave the Selector at Selector="#app"
Set the ContentType to the name of your Razor page.
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:view="**clr-namespace:Your.Path.To.Razor.Page">
<BlazorWebView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type view:Razor_Page_Name}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentView>

Is there a way to manually render Table in ant design?

According to Table documentation of Ant Design, it seems that there is no way to render Table manually, e.g.:
// Possible
<Table dataSource={dataSource} columns={columns} />
// Impossible
<Table>
<Row>
<Col></Col>
</Row>
</Table>
Am I misunderstanding Ant Design Table? Is there a way to achieve this?

SAPUI5 Table shows data only on ABAP Server?

I have created a simple UI5 application which consists of a Table.
The problem is that this table shows data only when I run the application on ABAP Server on other servers, ie. Tomcat or Web App Preview in eclipse it doesn't work. I also tried this application with other open oData services but the table shows no result.
Secondly the table show the data and after it continue to scroll down the data and there comes empty fields from above and data disappears to the down.
Does anyone have any ideas?
Most likely you will be helped with disabeling the same origin policy in google chrome. See:
Disable same origin policy in Chrome.
For a more extensive answer see:
http://scn.sap.com/community/developer-center/front-end/blog/2013/06/29/solving-same-origin-policy-issue-in-different-ways
That usually happened to me when I didn't map the correct field to the "Items" of the table.
You must check both the capitalization and the path of the item in your model.
Here is a short example :
<Table id="idMaterialsList2"
items="{SalesOrder>/Items/results}">
<columns>
<Column>
<Text text="{i18n>Order_product}" />
</Column>
</columns>
<items>
<ColumnListItem type="Navigation">
<ObjectIdentifier
title="{SalesOrder>Product}"
text="{SalesOrder>Description}"/>
</ColumnListItem>
</items>
</Table>
a) Check "items="{SalesOrder>/Items/results}"" the path
b) Check the names of the elements you want to show ""{SalesOrder>Product}""
If a is correct and b is wrong you will have an empty table with X lines where X = SalesOrder>/Items/results.length.
If a is wrong you will see nothing.
Try :)

Stripping extra newlines in Saxon

I use Altova XMLSpy and Saxon. Saxon adds a lot of tabs and Newlines in the result file. So I added the templates (found here on stackoverflow):
<xsl:template match="*/text()[normalize-space()]">
<xsl:value-of select="normalize-space()"/>
</xsl:template>
<xsl:template match="*/text()[not(normalize-space())]" />
to the stylesheet, which neatly removed all extra white space. However, it also removed the space before and after the <i>....</i> and <q>....</q> inside a <p>:
<p>this is <i>italic</i> text</p>
So both Altova and Saxon gave me:
<p>this is<i>italic</i>text</p>
How can I solve this problem?
Use the xsl:output element to control indentation of the output. Use xsl:strip-space and xsl:preserve-space to control whitespace handling of your input.
Use templates like the two you show only as a last resort. Here, the first template is the one causing the loss of whitepace adjacent to your i elements, because the processors are doing what you told them to do, instead of what you meant to tell them to do.

Filter pages with multiple tags in Umbraco 4.7

I want to put check boxes on my page, corresponding to certain tags.
Then I want the user to be able to filter out articles depending on what checkboxes are ticked.
For example: The user wants to read about apples and oranges and therefore ticks both "apples" and "oranges", The result should be articles where both are tagged, but not only apples or only oranges.
Any idea how I can do this in Umbraco?
I'm using umbraco 4.7
There are several ways you can do this. The easiest (but not most scalable) would be to create a checkbox datatype called "fruit". This would be added to all Document types you wanted to be able to filter.
You could then use XLST/XPATH to filter the document types to those with selected fruits.
Edit:
The XSLT you would need to access and display the selected fruit tags for a specific article would be something like:
<xsl:variable name="items" select="umbraco.library:Split($fruit,',')" />
<xsl:for-each select="$items//value">
<xsl:value-of select="umbraco.library:GetPreValueAsString(current())"/>
</xsl:for-each>
In the context of filtering a collection of articles, you could use adapt this code to be something like:
<xsl:for-each select="$currentPage//Article [umbraco.library:Split(./fruit,',')//value = 'orange']">
<xsl:value-of select="./#nodeName"/>
</xsl:for-each>
This will find all Article nodes under the current page that have a fruit tag set as 'orange', and then display each Article's title.

Resources