drop down menu from database in zendframework 2 layout - layout

layout.phtml code:
<ul class="dropdown-menu">
<li><a tabindex="-1" href="<?php echo $this->url('project') ?>">Java</a></li>
<li><a tabindex="-1" href="<?php echo $this->url('project') ?>">android</a></li>
<li><a tabindex="-1" href="<?php echo $this->url('project') ?>">Dot Net</a></li>
<li><a tabindex="-1" href="<?php echo $this->url('project') ?>">Zend Framework</a></li>
</ul>
but i want to convert into loop here.
Module.php code:
class Module
{
public function onBootstrap(MvcEvent $e) {
$eventManager = $e->getApplication()->getEventManager();
$moduleRouteListener = new ModuleRouteListener();
$moduleRouteListener->attach($eventManager);
// this is for session
$this->initSession(array(
'remember_me_seconds' => 180,
'use_cookies' => true,
'cookie_httponly' => true,
));
// this code is not working(to get the values from db for menu list)
$service = $this->getServiceLocator()->get('UserService');
$result = $service->getmenulist();
$this->layout()->myVariable = $result;
}
//other code
}
This is my current menu in layout, but i want make the drop down list from database. i don't know how to pass the value to layout from module.php. anyone help me to solve this issue. Is there any other way to execute it. In module.php, i am trying to get list of menu names and passing that to layout.

Your code for retrieving the UserService doesn't belong in the onBootstrap method as it will be executed every time your app is run, regardless of whether or not you actually access that module. This code may belong in a custom viewhelper, as #Sam suggested, which could be used to inject your menu into the layout.
If you're planning on additional functionality around the menu, for example toggling items based on an ACL, then you're approach might involve a custom Navigation container and/or a Listener to fetch and populate your menu.
Unfortunately, your question is more of a design issue and likely just an absence of a full understanding of the some basic ZF2 concepts than an actual problem with a particular piece of code. As such, you're not going to get too many responses from the community. You probably just need to review the ZF2 docs and tutorials and come back when you're having a specific problem with implementing those concepts.
ZF2 Navigation
ZF2 View Helpers
ZF2 Module Class Best Practices

Related

Is it possible to create a modularized reusable component in Umbraco 9?

I'm looking to create a reusable, modularized component in Umbraco 9. I've never worked with any Umbraco before. The example I'll use is a text widget/component that has an image on the left and text on the right, with the ability to set whether you want to swap this to be image right, text left.
I come from the Sitecore world where creating a component like this would mean creating a definition with the fields in the back office, creating an MVC controller and an action, and pointing that back office definition at the controller/action combo. Then, anywhere I've deemed a component hot spot, I can click an "add component" and it'd display the available components I've created (Text + Image Block, in our example).
Our team has been researching how to do something like this in Umbraco. We've been using element types. I've got it working where I can create a list of element types, but we couldn't figure out how to add a controller/action/view to this process to really control what gets displayed.
We've looked into the Grid Type Editor. That requires some Angular work that wasn't exactly playing nice, for some reason it was seeing our image fields as null even though they had an image.
We also tried messing with the Block List editor, and are currently investigating macros.
We've been spinning our wheels and I'm hoping to get some assistance on how to do something like this in Umbraco. Perhaps I'm searching/using the wrong terminology?
Most of our components are super simple, and rather than create a reusable component, we can just use the grid editor. In our example above, we could create a 50/50 grid row and put an image in the left column and the text in the right. This would work, but we'd like to have a little more of a reusable package. Furthermore, a few of the components will require some controller functionality to be able to hit an API and massage some data before passing it to the presentation layer.
We will keep investigating, but ultimately I'm hoping someone can clear up if we're going down the wrong path, or just missing some crucial point here.
Sure! Two ways come to mind for me. One would be make a simple doctype like the screenshot below and let layout decide how to stack them
This sample uses bootstrap which of course you don't have to use, and in my case I have them in a nested content element so I basically just loop through them and alternate putting flex-row-reverse on the row.
#{
var i = 0
foreach(var contentBlock in Model.ContentBlocks)
{
<div class="d-flex flex-wrap align-items-center #(i %2 != 0 ? "flex-row-reverse" : null)">
<div class="block-left col-sm-7">
<h5>#contentBlock.SectionHeading</h5>
#Html.Raw(contentBlock.SectionDescription.ToString())
</div>
#if(contentBlock.HasValue("sectionImage") && contentBlock.SectionImage != null)
{
<div class="block1-right col-sm-5 ml-auto">
<figure class="hover">
<img id="#contentBlock.SectionImage.Name.Trim().Replace(" ", "-")" src="#contentBlock.SectionImage.Url">
</figure>
</div>
}
</div>
i++;
}
}
The other way (as you asked for) is to give the content editor the choice with a toggle, add a toggle to the doctype
and instead of this line
<div class="d-flex flex-wrap align-items-center #(i %2 != 0 ? "flex-row-reverse" : null)">
you could use this line
<div class="d-flex flex-wrap align-items-center #(contentBlock.SectionAlignment == true ? "flex-row-reverse":null)">
Or even something like this where you just assign your own class and write the CSS separately
<div class="d-flex flex-wrap align-items-center #(contentBlock.SectionAlignment == true ? "block-right":"block-left")">
Hope that helps get you going in the right direction. I'm sure you'll have to adapt this for your situation and this code is not tested.
Happy to help if you have any issues.

Meteor Iron-Router Layout Rendering

We have implemented a layout where the main content resides in dynamic sidebars. We defined following layoutTemplate:
<template name="layout">
{{> content}}
{{> leftbar}}
{{> rightbar}}
<nav class="navigation">
{{#if currentUser}}
{{> navigation_logged_in}}
{{else}}
{{> navigation_logged_out}}
{{/if}}
</nav>
</template>
We include e.g. the rightbar template in the layout template.
<template name="rightbar">
<aside class="rightbar">
<button id="closeRightBar" class="close-cross"></button>
{{yield 'rightbar'}}
</aside>
</template>
The rightbar template includes the rightbar yield where we yield the specific content into.
We have implemented following RouteController:
UserShowRouter = RouteController.extend({
before: function() {
var username = this.params.username;
if(App.subs.user) {
App.subs.user.stop();
}
App.subs.user = Meteor.subscribe('user', username);
},
waitOn: function () {
return Meteor.subscribe('user');
},
data: function() {
return Meteor.users.findOne({'profile.username': this.params.username});
},
action: function() {
this.render('profile', {to: 'rightbar'});
}
});
What we wanted to achieve is that for example the profile template is yielded into the rightbar yield and get's updated and re-rendered as the data changes.
The problem is now that the sidebars are dynamically animated, shown and hidden. Now every time the profile template gets re-rendered also the layout template gets re-rendered. Why is that? We thought one of the purposes of yield regions is that the whole site doesn`t need to be re-renderd. Now when the layout gets re-rendered the whole css of the animations are set back to the original values.
We now have tried several different approaches, but none of them seems to be a good and clean solution. Is there a way to keep the layout template from being re-rendered and just keep the yield region and template up-dated? Any suggestions or alternatives would be highly appreciated.
As I understand it, the behavior in which re-rendering of your templates "bubbles up" and causes re-rendering of their parent templates is not particular to iron-router or the way your code is implemented, but is inherent in Spark. Iron-router's {{yield}} pattern does not alter this behavior, as far as I can tell from its documentation.
The good news is that Spark is set to be replaced imminently with a newer, more fine-grained rendering engine, currently codenamed "Spacebars," which should alleviate the concern.
Here is a preview of the new rendering system:
https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
This talk from a week ago is also excellent at describing the benefits coming through the new rendering engine (while fairly long, an overview is given in the first 5 minutes):
https://www.youtube.com/watch?v=aPf0LMQHIqk
As for your options today, you can:
a) Use the {{#constant}} and {{#isolate}} parameters to try to limit re-rendering.
b) Work from a development branch as described in the link above:
You can play with the current work-in-progress version of the code using the template-engine-preview-4 release tag (run your app with meteor --release template-engine-preview-4), or by checking out the shark branch (it's an internal codename).
c) Best of all if the timeframe of your project allows is to allow the re-rendering to continue until Meteor 1.0 hits and "Spacebars" resides on the main branch - it sounds like this is 1-3 months away.
I think that the reason your layout template gets rerendered is because the data hook you implemented uses a reactive data source. If the current user object changes, the router probably decides to rerender the whole page because there is no simple way to decide which parts exactly depend on your reactive data.
If I'm right, a simple solution to your problem is to create a user helper that will fetch the necessary data only where they're actually needed, e.g.
Template.profile.user = function () {
return Meteor.users.findOne({/*...*/});
}
Then you can use it in your profile template along with the with helper (sic!), i.e.
{{#with user}}
...
{{/with}}
to prevent multiple calls to the Template.profile.user function.
Also, if I were you, I would use the data hook only for data which is required by templates in my layout.

rendering Liferay page URLs inside of portlets Liferay 6.1

I'm new to liferay and I'm almost positive this is blazingly simple to do: Using velocity markup, I want to be able to generate links to pages within my Liferay website and embed them inside of my portlets on different pages.
I have a vague idea of how it might be done so I searched around figuring it would be posted somewhere, but I can't find anything on it. Incidentally, I want to put whatever code I come up with inside the view.jsp of the portlet. I would use velocity markup here but I don't think (don't know for sure) if that is allowed inside of a jsp.
Please let me know if you need more information to respond.
I would use velocity markup here but I don't think (don't know for sure) if that is allowed inside of a jsp.
Why would you want to use Velocity mark-up inside a JSP (view.jsp)? I don't see any advantages in doing that apart from the argument that you are really great at velocity.
Though here is a link that would help you embed velocity inside of JSP.
Note: In my opinion it is not a good practice to embed velocity within JSP in a portlet
In JSP:
You will need a Layout object which you can get with the help of static methods in LayoutLocalServiceUtil.
After you get the Layouts, you can use the static methods of com.liferay.portal.util.PortalUtil like getLayoutFriendlyURL or getLayoutFullURL etc to build the URL.
In VM (these would be *.vm files in themes):
You can follow all the same steps as mentioned in JSP. The things you would need to do that are:
Instance of LayoutLocalService, can be found out by using the following code (taken from this answer):
#set($layoutLocalService = $serviceLocator.findService("com.liferay.portal.service.LayoutLocalService"))
now you can use the velocity variable $layoutLocalService to make calls to service methods for getting the layouts.
Then you can call methods of PortalUtil class by using the variable $portalUtil available for *.vm files in themes.
You can check-out the following files for more details (if you are interested):
docroot/html/themes/_unstyled/templates/init.vm, this contains all the velocity variables available in themes. Variables of interest might be $theme, $theme_display, $layout, $navItems.
docroot/html/themes/_unstyled/templates/portlet.vm, this file is a template to display the individual portlets.
docroot/html/themes/_unstyled/templates/navigation.vm, contains code for displaying the navigation menu with page links.
docroot/html/themes/_unstyled/templates/portal_normal.vm, this file represents a page-template in liferay and this contains the other files like navigation.vm & portlet.vm.
For Velocity:
Okay so for generating the links for Liferay pages in velocity take a look at the following file in the Liferay source code:
/portal-web/docroot/html/themes/_unstyled/templates/navigation.vm
In there you'll see how the default Liferay theme generates the navigation structure for your site. To make life easier for you here it is:
<nav class="$nav_css_class" id="navigation">
<h1>
<span>#language("navigation")</span>
</h1>
<ul>
#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
#if ($nav_item.hasChildren())
<ul class="child-menu">
#foreach ($nav_child in $nav_item.getChildren())
#if ($nav_child.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
So the Velocity is looking through a collection called $nav_items, and then calls the getURL() method on each item to generate the link.
For JSP:
You'll need to make use of the LayoutLocalServiceUtil class, and in
particular one of the getLayouts() methods.You'll have to pick the one that best suits your need.
This will return the list of Layouts (your pages), and then you can
call getFriendlyURL() on each of these layouts to return it's url
This will be a relative url to your site, so something like
/my-site-home-page.
Let me know if you have any more questions!

Fancybox integrated into a minislide link

We have a row of header menu links where a couple of them need to be fancybox popups. However, when I insert the appropriate fancybox code into the menu section the text is slightly smaller and higher than the other links (and does not incorporate the minislide background button etc.):
<li><a id="tip6"><strong>How it works</a></li> <li class="line">|</li>
I realised for the text to appear correct it needs to have an actual href= link so the menu system knows it's a link (which it doesn't need to be). So of course when a link is added it overrides the fancybox operation. This is what a functional link needs to be formulated as in our menu system:
<li><strong>How it works</strong></li> <li class="line">|</li>
I want it to function as a fancybox link though, so how can I remove the actual href= link and fool the menu into thinking it's a link so it's correctly displayed?
I've already tried the following, without success:
<li><strong><a id="tip4" href="link.php">How it works</a></strong></li> <li class="line">|</li>
You could also use href="javascript:;" to avoid overriding the fancybox functionality and still having the href attribute to work with your style settings so
<li><strong><a id="tip4" href="javascript:;">How it works</a></strong></li> <li class="line">|</li>
or with the strong tag inside the anchor (doesn't really matter)
<li><a id="tip4" href="javascript:;"><strong>How it works</strong></a></li> <li class="line">|</li>
On the other hand, if you are planning to use the same script for more than one element within the same html document, the better use classes instead of ID. Check http://fancybox.net/faq No. 7 for more

jQuery Mobile how to dynamically add html to dialog box

I am looking to open a dialog from a specific page and load dynamic data into the dialog.
On the main page I have a number of different links that when clicked provides more information on that link. All the data I have for that link is included on the main page. Somehow I would like to assign the dialog so that it is populated when the dialog opens.
I've tried something like this so far:
<?php foreach($offers as $offer) : ?>
<?php echo $offer->{'offer_name'}; ?>
<?php endforeach; ?>
Then I have an event catcher to catch the link click and then load the "data-desc" meta into the dialog but this doesn't work.
$('.offer').live('click', function(){
var data = $(this).attr('data-desc');
$("#data-desc").html(data);
$("#dialog-offer").dialog("open");
return false;
});
<div data-role="content" id="dialog-offer">
<p class="data-desc"></p>
</div>
I have been looking for an example on how to do this in jQM. This is such a basic necessity for jQM in general that I am surprised that I cannot find any examples. Could someone point me in the right direction. Thanks for the help.
You have a number of errors in your code:
You have given the id="dialog-offer" to a <div> with data-role="content". You should wrap that div in another div with data-role=page
You don't necessarily need to use $("#dialog-offer").dialog("open");. Just set <a href='#dialog-offer'>
You have the wrong selector for the html() call. The class name of the <p> is what you're using with an id-style selector
I have rewritten the code and posted it here: http://jsfiddle.net/PBb3h/
Not exactly like yours, but it does what you want.

Resources