I was working on the Apache ofbiz(17.12.07) since last 1 month, I have a custom UI requirement for a client. I want to display a side-bar(screenshot of sibe-bar attached below) in all the ofbiz modules.
I have created a plugin called HOME in ofbiz. this HOME plugin contains a header,side-bar,container,footer.
I have created a .ftl file for this.
my requirement is to display the same header,sidebar,footer in all the module pages and the container will change according to the module content.
If the modules are ftl files then I could modify the UI but they are xml files not the ftl.
clicking on the modules in the sidebar will take you to the respective module.
example: when I click on Asset maintenance in home page. we'll direct to Asset maintenance page. the container which is of grey color is the xml file as shown below.
container xml:
<screen name="FindScreenDecorator">
<section>
<widgets>
<section>
<condition>
<if-empty field="titleProperty"/>
</condition>
<widgets>
<container style="page-title"><label text="${title}"></label>
</container>
</widgets>
<fail-widgets>
<container style="page-title"><label
text="${uiLabelMap[titleProperty]}"></label></container>
</fail-widgets>
</section>
<decorator-section-include name="menu-bar"/>
<container style="clear"/>
<screenlet id="searchOptions" name="findScreenlet" collapsible="true"
title="${uiLabelMap.CommonSearchOptions}">
<container id="search-options">
<decorator-section-include name="search-options" />
</container>
</screenlet>
<screenlet padded="false">
<label style="h3" text="${uiLabelMap.CommonSearchResults}"/>
<container id="search-results">
<decorator-section-include name="search-results"/>
</container>
</screenlet>
</widgets>
</section>
</screen>`
home page screenshot:
home_page_template
Asset maintenance module Ui screenshot:
Asset_maint_Page
layout of Ui:
layout
code for home page:
<div class="screenlet-body">
<#if !userLogin?has_content>
<div>${uiLabelMap.WebtoolsForSomethingInteresting}.</div>
<br />
<div>${uiLabelMap.WebtoolsNoteAntRunInstall}</div>
<br />
<div>${uiLabelMap.CommonLogin}</div>
</#if>
<#if userLogin?has_content>
<ul class="webToolList" id="home">
<li><h2 id="production">${uiLabelMap.HOMEProduction}</h2></li>
<li><h2 id="inv">${uiLabelMap.HOMEInventoryManagement}</h2></li>
<li><h2 id="asset">${uiLabelMap.HOMEAssetMaintenance}</h2></li>
<li><h2 id="order">${uiLabelMap.HOMEOrder}</h2></li>
<li><h2 id="users">${uiLabelMap.HOMEUsers}</h2></li>
<li><h2 id="prodcatalog">${uiLabelMap.HOMEProductCatalog}</h2></li>
</ul>
</#if>
</div>
I remember having seen a such solution on OFBiz MLs or Jira. I'm pretty sure it was not using a plugins or any specific component. IIRW it was rather related to a theme. As I'm unsure you should better subscribe and ask on user ML: http://ofbiz.apache.org/mailing-lists.html. Here you ask to few persons who follow OFBiz questions, there to hundreds...
I am using the Ionic framework inside of a Visual Studio 2015 Cordova project.
I would like to override a bar footer that I have inside of a side menu.
I have tried as below...
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon ion-navicon" ng-click="vm.toggleLeft()" ng-hide="$exposeAside.active"></button>
<h1 style="text-align: left" class="title">My Contents</h1>
<ion-content class="padding">
<div data-ng-include="'app/main/main.html'"></div>
</ion-content>
<!-- HOW TO OVERRIDE THIS HEIGHT?? -->
<ion-footer-bar style="height: 20px" align-title="left" class="bar-balanced"></ion-footer-bar>
</ion-side-menu-content>
The bar does resize to the 20px via the inline css, however the main contents still think the bar is it's original height.
I have seen it mentioned you can set the $bar-footer-height: 36px; sccs variable.
I don't seem to be able to find out how to do this when I am in a Visual Studio Cordova project. I have seen it mentioned to use the $ ionic setup sass to setup the sccs, but I cm still unfamiliar with the sccs, and once again not sure if I can do this when just including the Ionic files inside the Visual Studio Cordova project, i.e. the only links to Ionic are as as below in my index.html
<link href="lib/css/ionic.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet" />
<script src="lib/js/winstore-jscompat.js"></script>
<script src="lib/js/ionic.bundle.min.js"></script>
I am not sure how to "link in" the sccs if this is what I need to do.
Is there a way to override this setting just in css, or do I need to "link in" the sccs, and if so how can I do this (once again, in a project setup via Visual Studio 2015 as opposed the the Ionic CL)
SCSS if one pre-processing format for CSS, you need to convert it to CSS, and include this final CSS to the index.html
By running ionic setup sass, the build tool gulp with tasks are defined. Just run $ gulp, and it will generate a CSS file lib/ionic/ionic.min.css
So the steps are:
Modify the scss/**/*.scss , anything you want to update.
Run build command $ gulp
Make sure the final CSS file are included in index.html
If you don't know SASS/SCSS, then just don't run ionic setup sass, just edit directly lib/ionic/ionic.css, add your styles at the bottom of the file, or create a new file, and include it under the line included ionic.min.css. It is just a regular web for mobile anyway.
About SASS: http://ionicframework.com/docs/cli/sass.html
About Gulp: http://gulpjs.com/
I'm trying to recreate a similar look to the Windows 8 app view and I'm having an issue with the display. If your running Windows 8 and you're on the home page, just click the down arrow icon located at the bottom of the screen. This takes you to a list of all of the applications installed on your computer grouped alphabetically. This is essentially what I'm trying to recreate visually (only my data is not apps).
What I want:
I've created a grouped ListView (alphabetical) using the html/css/js method and what I get is close, but not exact. I get "A" followed by items that start with A.... then a new column "B" followed by B items... new column "C", etc. If there are only 2 "A" items I want "B" to show up next in the list. Not in a new column. Basically, I want to override the block formatting of the display but I can't seem to figure out how. I've played around with the DOM Explorer and there are so many classes and styles I haven't been able to figure out what needs to be changed.
What my app looks like:
Has anyone else done this? Does anyone have any suggestions I can try? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Grocery List</title>
<link href="grocerylist.css" rel="stylesheet" />
<script src="/js/groceryData.js"></script>
<script src="grocerylist.js"></script>
</head>
<body>
<div class="grocerylist fragment">
<header class="page-header" aria-label="Header content" role="banner">
<button class="back-button" data-win-control="WinJS.UI.BackButton"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Grocery List</span>
</h1>
</header>
<section class="page-section" aria-label="Main content" role="main">
<!-- Template for the grouped headers for the list -->
<div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="simpleHeaderItem">
<h1 data-win-bind="innerText: title"></h1>
</div>
</div>
<!-- Template for each item in the list -->
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div id="groceryNameTemplate">
<!-- Display the name of our food -->
<h4 data-win-bind="innerText: name"></h4>
</div>
</div>
<!-- Our list of available grocery items -->
<div id="groceryListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : GroceryData.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate'),
groupDataSource: GroceryData.itemList.groups.dataSource,
groupHeaderTemplate: select('#headerTemplate'),
layout: { type : WinJS.UI.GridLayout },
itemsDraggable: true,
itemsReorderable: false }">
</div>
</section>
</div>
</body>
</html>
Code added as requested. I went through all of my CSS and 100% of it is style only (colors, fonts, etc) all placement and positioning is defined in the WinJS styles which come with ListView.
In essence, the Apps view is just a standard 2D grid layout in a ListView, laid out in vertical columns first, then horizontally.
The trick is that there are two different item types: a letter/header item and an app item. This means that your data source--which in this case can be a single WinJS.Binding.List, is a single list of the apps sorted alphabetically, with then header header/letter items inserted at the appropriate points before items that start with that letter. (Remember to use globalization-sensitive collation if you're sorting alphabetically.)
With such a list, however, you cannot rely on declarative templates for your rendering, because you need to render both types of items distinctly. For this you need to use an item rendering function instead of a template. Because the rendering function gets called for each item, it can check the type and dynamically render each one according to its data. In the Apps view, an App item would be rendered with an icon and name, whereas a header/letter would be rendered with just text. The item renderer also assigns appropriate behaviors, which in the Apps view is that app items launch the app and header items do a semantic zoom out.
A rendering function is really the approach to take whenever you have a standard layout--a GridLayout again in this case--but need per-item rendering control. (This is different from a custom layout that lets you depart from the non-standard layout algorithms, and of course a custom layout can also be combined with a rendering function.)
For all the details of rendering functions, check out chapter 7 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, specifically the sections "How Templates Work with Collection Controls" and its subsections on pages 364-376, and "Template Functions (Part 2): Optimizing Item Rendering" starting on page 414 if you want to go deeper, but probably isn't necessary for your scenario.
Custom layouts, just to note, are covered in Appendix B. Also, custom layouts only work with WinJS 2.0 on Windows 8.1; template functions work with WinJS 1.0 or 2.0 on 8.0 and 8.1 both.
Anyway, with per-item rendering via a template function, you can just create CSS as appropriate for the classes in each item structure you create, so you don't have to play games with the ListView's style hierarchy. You'll just want to make sure that your header/letter items have a suitable top margin to make the gap. Alternately, you could also have a gap item type in your data source that would render a blank space and not respond to any input. Also, you'll need to style the various selected, active, and hover states of the header/letter items to be all the same so they don't get highlighted like an app item.
The last note I'll make is that you don't need to use the GridLayout's grouping capabilities at all, because that forces the groups into new columns as you've observed. That's just its layout behavior when it has a group items source. That said, you could use a standard List for your app items and a create a group data source from it like you're doing, and then use a custom layout to handle the groups differently than the standard GridLayout. That should work as well, so it's really your choice in approach. I'd use this way if for some reason you can't get the header/letter styling to work with the template function approach, or if you're targeting Windows 8.0/WinJS 1.0 and not 8.1/2.0.
Hope that explains your options.
Look here.
I want to update the BC page title tag so that it updates and shows the correct page title on every page. Right now it's in the website template and it needs to stay there for ease for customer editing.
{tag_pagetitle} Displays current page title. Must be used within the title tag of the template.
eg.
<!-- TemplateBeginEditable name="doctitle" -->
<title>{tag_pagetitle}</title>
<!-- TemplateEndEditable -->
Background
I am trying to add a Facebook Comment box into my Mediaskin php file, but when I use the code below the box appears on every page.
Code
<!-- /debughtml -->
</div>
<br />
<center><div class="fb-comments" data-width="800" data-num-posts="100" data-colorscheme="dark"></div></center>
<!-- /bodyContent -->
Question
How can I make the facebook comments appear only on read pages (pages with index.php?title= in the URL, but without &action=edit at the end of the URL?